diff --git a/src/components/common/CollapseMenuOneSelect.vue b/src/components/common/CollapseMenuOneSelect.vue index 162129f084aed55e9986cd206b09f9eb0dbeb57a..246bca3438ad90ade643c4a6a91b9ab17979a88e 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)" style="padding: 5px 16px" + @click="select(option, option.i18n[locale] || option.naturalKey, option.id)" > <a>{{ option.i18n[locale] || option.naturalKey }}</a> </div> @@ -24,6 +24,7 @@ v-for="child in option.children" :key="child.id" :option="child" + :id-reference-scope="idReferenceScope" @select-menu-item="select" > </CollapseMenuOneSelect> @@ -43,17 +44,34 @@ export default { type: Object, required: true, }, + listSelect: Array, + idReferenceScope: String, }, - 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) { + 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 }); } + return { select, isOpen, @@ -69,6 +87,10 @@ 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 72242e60f0bdffb56ea68c192a9a6db52227f73f..afc7e53c2ed2e10ddaff85ef408e9974472be172 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,8 @@ :id="option.id" :key="optionKey" :option="option" + :list-select="requiredAuthorizationsLabels[referenceScopesByData.id]" + :id-reference-scope="referenceScopesByData.id" @select-menu-item="selectAuthorization($event.type, $event)" ></CollapseMenuOneSelect> </b-dropdown> @@ -574,6 +577,7 @@ export default { refForAuth[reference] = ref; changeReferenceScopes(refForAuth[reference].referenceScopes); } + sortedReferenceScope(referenceScopes); } } } @@ -601,6 +605,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 }); }