From dac2b1dd43229c45d8aac72c92a11a8736b3b052 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Tue, 21 Jan 2025 16:01:56 +0100
Subject: [PATCH 1/3] =?UTF-8?q?order=20liste=20submission=20et=20ajout=20b?=
=?UTF-8?q?ackground=20color=20si=20select=20reste=20=C3=A0=20faire=20le?=
=?UTF-8?q?=20remove=20de=20la=20class=20si=20non=20select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../common/CollapseMenuOneSelect.vue | 20 +++++++++++++++++--
src/views/data/DataVersioningView.vue | 15 ++++++++++++++
2 files changed, 33 insertions(+), 2 deletions(-)
diff --git a/src/components/common/CollapseMenuOneSelect.vue b/src/components/common/CollapseMenuOneSelect.vue
index 162129f08..095612ff2 100644
--- a/src/components/common/CollapseMenuOneSelect.vue
+++ b/src/components/common/CollapseMenuOneSelect.vue
@@ -2,7 +2,7 @@
<div
v-if="!option.children.length"
:id="option.id"
- @click="select(option, option.i18n[locale] || option.naturalKey)"
+ @click="select(option, option.i18n[locale] || option.naturalKey, option.id)"
style="padding: 5px 16px"
>
<a>{{ option.i18n[locale] || option.naturalKey }}</a>
@@ -43,6 +43,7 @@ export default {
type: Object,
required: true,
},
+ listSelect: Array,
},
emits: ["select-menu-item"],
setup(props, { emit }) {
@@ -50,7 +51,19 @@ export default {
const locale = services.internationalisationService.getLocale();
const displayText = computed(() => props.option.i18n[locale] || props.option.naturalKey);
- function select(option, localName) {
+ function select(option, localName, localID) {
+ if (props.listSelect && props.listSelect.length !== 0) {
+ if (
+ props.option.i18n[locale] === props.listSelect[0] ||
+ props.option.naturalKey === props.listSelect[0]
+ ) {
+ console.log(props.listSelect, document.getElementById(props.option.id));
+ }
+ }
+ const element = document.getElementById(localID);
+ if (element) {
+ element.classList.add('colorSelected');
+ }
option.localName = option.localName || localName;
emit("select-menu-item", option || { ...this.option, localName });
}
@@ -68,6 +81,9 @@ export default {
a {
color: black;
}
+.colorSelected {
+ background-color: rgba(0, 100, 100, 0.4);
+}
.card {
box-shadow: none;
diff --git a/src/views/data/DataVersioningView.vue b/src/views/data/DataVersioningView.vue
index 72242e60f..34d0137f9 100644
--- a/src/views/data/DataVersioningView.vue
+++ b/src/views/data/DataVersioningView.vue
@@ -26,6 +26,7 @@
>
<b-dropdown
:ref="referenceScopesByData.id"
+ :id="referenceScopesByData.id"
expanded
max-height="500"
scrollable
@@ -57,6 +58,7 @@
:id="option.id"
:key="optionKey"
:option="option"
+ :list-select="requiredAuthorizationsLabels[referenceScopesByData.id]"
@select-menu-item="selectAuthorization($event.type, $event)"
></CollapseMenuOneSelect>
</b-dropdown>
@@ -574,6 +576,7 @@ export default {
refForAuth[reference] = ref;
changeReferenceScopes(refForAuth[reference].referenceScopes);
}
+ sortedReferenceScope(referenceScopes);
}
}
}
@@ -601,6 +604,18 @@ export default {
}
}
+ function sortedReferenceScope(referenceScope) {
+ for (let i = 0; i < referenceScope[props.dataId].length; i++) {
+ if (Object.keys(referenceScope[props.dataId][i].nodes).length !== 0) {
+ referenceScope[props.dataId][i].nodes = Object.fromEntries(
+ Object.entries(referenceScope[props.dataId][i].nodes)
+ .sort(([, a], [, b]) => a.naturalKey.localeCompare(b.naturalKey))
+ .map(([key, value], index) => [index, value, key])
+ );
+ }
+ }
+ }
+
function nameSelectedTagList(nameTagList) {
return i18n.t("dataTypesManagement.selected_filter", { key: nameTagList });
}
--
GitLab
From b292a90c5312fb4af3894333c5ef8e8e4922dc40 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 22 Jan 2025 16:44:34 +0100
Subject: [PATCH 2/3] ajout function de modification de class en js
---
.../common/CollapseMenuOneSelect.vue | 25 +++++++++----------
src/views/data/DataVersioningView.vue | 12 +++++++++
2 files changed, 24 insertions(+), 13 deletions(-)
diff --git a/src/components/common/CollapseMenuOneSelect.vue b/src/components/common/CollapseMenuOneSelect.vue
index 095612ff2..caf78dcd1 100644
--- a/src/components/common/CollapseMenuOneSelect.vue
+++ b/src/components/common/CollapseMenuOneSelect.vue
@@ -2,8 +2,8 @@
<div
v-if="!option.children.length"
:id="option.id"
- @click="select(option, option.i18n[locale] || option.naturalKey, option.id)"
style="padding: 5px 16px"
+ @click="select(option, option.i18n[locale] || option.naturalKey, option.id)"
>
<a>{{ option.i18n[locale] || option.naturalKey }}</a>
</div>
@@ -25,6 +25,9 @@
:key="child.id"
:option="child"
@select-menu-item="select"
+ @change-style-if-selected="
+ select(child, child.i18n[locale] || child.naturalKey, child.id)
+ "
>
</CollapseMenuOneSelect>
</div>
@@ -45,35 +48,30 @@ export default {
},
listSelect: Array,
},
- emits: ["select-menu-item"],
+ emits: ["select-menu-item", "change-style-if-selected"],
setup(props, { emit }) {
const isOpen = ref(false);
const locale = services.internationalisationService.getLocale();
const displayText = computed(() => props.option.i18n[locale] || props.option.naturalKey);
function select(option, localName, localID) {
- if (props.listSelect && props.listSelect.length !== 0) {
- if (
- props.option.i18n[locale] === props.listSelect[0] ||
- props.option.naturalKey === props.listSelect[0]
- ) {
- console.log(props.listSelect, document.getElementById(props.option.id));
- }
- }
const element = document.getElementById(localID);
if (element) {
- element.classList.add('colorSelected');
+ console.log(localID);
+ emit("change-style-if-selected", localID);
+ element.classList.add("colorSelected");
}
option.localName = option.localName || localName;
emit("select-menu-item", option || { ...this.option, localName });
}
+
return {
select,
isOpen,
locale,
- displayText,
+ displayText
};
- },
+ }
};
</script>
@@ -81,6 +79,7 @@ export default {
a {
color: black;
}
+
.colorSelected {
background-color: rgba(0, 100, 100, 0.4);
}
diff --git a/src/views/data/DataVersioningView.vue b/src/views/data/DataVersioningView.vue
index 34d0137f9..626504b9a 100644
--- a/src/views/data/DataVersioningView.vue
+++ b/src/views/data/DataVersioningView.vue
@@ -60,6 +60,7 @@
:option="option"
:list-select="requiredAuthorizationsLabels[referenceScopesByData.id]"
@select-menu-item="selectAuthorization($event.type, $event)"
+ @change-style-if-selected="changeStyleIfSelected($event, referenceScopesByData.id)"
></CollapseMenuOneSelect>
</b-dropdown>
</b-field>
@@ -790,6 +791,16 @@ export default {
}
}
+ function changeStyleIfSelected(event, referenceScopesByDataId) {
+ console.log("selected", event, referenceScopesByDataId);
+ const regex = new RegExp("(.*)" + referenceScopesByDataId + "K(.*)");
+ Array.from(document.querySelectorAll("div.colorSelected"))
+ .filter(el => el.id && regex.test(el.id) && !el.id.includes(event))
+ .forEach((element) => {
+ element.classList.remove("colorSelected");
+ });
+ }
+
function isReferenceScopesSelected() {
if (selected && selected.requiredAuthorizations) {
submissionListVisible.value =
@@ -982,6 +993,7 @@ export default {
comment,
currentDataset,
internationalizeRequiredAuthorization,
+ changeStyleIfSelected,
submissionListVisible,
};
},
--
GitLab
From e49b1e02b357ff7ff449ef89fb2daf158524b569 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Thu, 23 Jan 2025 15:02:08 +0100
Subject: [PATCH 3/3] fonction JS pour rendre dynamique de changement du
background du select dans de dropDown de submission
---
.../common/CollapseMenuOneSelect.vue | 29 ++++++++++++-------
src/views/data/DataVersioningView.vue | 13 +--------
2 files changed, 19 insertions(+), 23 deletions(-)
diff --git a/src/components/common/CollapseMenuOneSelect.vue b/src/components/common/CollapseMenuOneSelect.vue
index caf78dcd1..246bca343 100644
--- a/src/components/common/CollapseMenuOneSelect.vue
+++ b/src/components/common/CollapseMenuOneSelect.vue
@@ -24,10 +24,8 @@
v-for="child in option.children"
:key="child.id"
:option="child"
+ :id-reference-scope="idReferenceScope"
@select-menu-item="select"
- @change-style-if-selected="
- select(child, child.i18n[locale] || child.naturalKey, child.id)
- "
>
</CollapseMenuOneSelect>
</div>
@@ -47,6 +45,7 @@ export default {
required: true,
},
listSelect: Array,
+ idReferenceScope: String,
},
emits: ["select-menu-item", "change-style-if-selected"],
setup(props, { emit }) {
@@ -54,13 +53,21 @@ export default {
const locale = services.internationalisationService.getLocale();
const displayText = computed(() => props.option.i18n[locale] || props.option.naturalKey);
- function select(option, localName, localID) {
- const element = document.getElementById(localID);
- if (element) {
- console.log(localID);
- emit("change-style-if-selected", localID);
- element.classList.add("colorSelected");
+ function changeStyleIfSelected(localID) {
+ const localElement = document.getElementById(localID);
+ if (localElement) {
+ console.log("selected", localID, props.idReferenceScope);
+ Array.from(document.querySelectorAll("div.colorSelected"))
+ .filter(el => el.id && el.id.includes(props.idReferenceScope + "K") && !el.id.includes(localID))
+ .forEach((element) => {
+ element.classList.remove("colorSelected");
+ });
+ localElement.classList.add("colorSelected");
}
+ }
+
+ function select(option, localName, localID) {
+ changeStyleIfSelected(localID);
option.localName = option.localName || localName;
emit("select-menu-item", option || { ...this.option, localName });
}
@@ -69,9 +76,9 @@ export default {
select,
isOpen,
locale,
- displayText
+ displayText,
};
- }
+ },
};
</script>
diff --git a/src/views/data/DataVersioningView.vue b/src/views/data/DataVersioningView.vue
index 626504b9a..afc7e53c2 100644
--- a/src/views/data/DataVersioningView.vue
+++ b/src/views/data/DataVersioningView.vue
@@ -59,8 +59,8 @@
:key="optionKey"
:option="option"
:list-select="requiredAuthorizationsLabels[referenceScopesByData.id]"
+ :id-reference-scope="referenceScopesByData.id"
@select-menu-item="selectAuthorization($event.type, $event)"
- @change-style-if-selected="changeStyleIfSelected($event, referenceScopesByData.id)"
></CollapseMenuOneSelect>
</b-dropdown>
</b-field>
@@ -791,16 +791,6 @@ export default {
}
}
- function changeStyleIfSelected(event, referenceScopesByDataId) {
- console.log("selected", event, referenceScopesByDataId);
- const regex = new RegExp("(.*)" + referenceScopesByDataId + "K(.*)");
- Array.from(document.querySelectorAll("div.colorSelected"))
- .filter(el => el.id && regex.test(el.id) && !el.id.includes(event))
- .forEach((element) => {
- element.classList.remove("colorSelected");
- });
- }
-
function isReferenceScopesSelected() {
if (selected && selected.requiredAuthorizations) {
submissionListVisible.value =
@@ -993,7 +983,6 @@ export default {
comment,
currentDataset,
internationalizeRequiredAuthorization,
- changeStyleIfSelected,
submissionListVisible,
};
},
--
GitLab