Fix #380

IGNF · Nov 7, 2024 · ef611ea · ef611ea
1 parent c0b13a4
commit ef611ea
Show file tree

Hide file tree

Showing 5 changed files with 228 additions and 232 deletions.
diff --git a/src/components/CartoAndTools.vue b/src/components/CartoAndTools.vue
@@ -78,7 +78,7 @@ const selectedControls = computed(() => {
         >>> la méthode computed()
       -->
       <MenuControl 
-      :selected-controls="selectedControls"/>
+        :selected-controls="selectedControls"/>
     </RightMenuTool>
 
   </div>

diff --git a/src/components/carte/Controls.vue b/src/components/carte/Controls.vue
@@ -314,7 +314,8 @@ const mousePositionOptions = {
     :share-options="shareOptions"
   />
   <LayerSwitcher
-    :visibility="true"
+    v-if="controlOptions"
+    :visibility="props.controlOptions.includes(useControls.LayerSwitcher.id)"
     :analytic="useControls.LayerSwitcher.analytic"
     :layer-switcher-options="layerSwitcherOptions"
   />
@@ -361,12 +362,14 @@ const mousePositionOptions = {
     :attributions-options="attributionsOptions"
   />
   <SearchEngine
-    :visibility="true"
+    v-if="controlOptions"
+    :visibility="props.controlOptions.includes(useControls.SearchEngine.id)"
     :analytic="useControls.SearchEngine.analytic"
     :search-engine-options="searchEngineOptions"
   />
   <GetFeatureInfo
-    :visibility="true"
+    v-if="controlOptions"
+    :visibility="props.controlOptions.includes(useControls.GetFeatureInfo.id)"
     :analytic="useControls.GetFeatureInfo.analytic"
     :get-feature-info-options="getFeatureInfoOptions"
   />

diff --git a/src/components/carte/control/MeasureLength.vue b/src/components/carte/control/MeasureLength.vue
@@ -25,7 +25,7 @@ onBeforeUpdate(() => {
   if (props.visibility) {
     map.addControl(measureLength.value);
     if (props.analytic) {
-      var el = measureLength.value.element.querySelector("button[id^=GPshowMeasureLenghtPicto-]");
+      var el = measureLength.value.element.querySelector("button[id^=GPshowMeasureLengthPicto-]");
       useActionButtonEulerian(el);
     }
   }

diff --git a/src/components/menu/MenuControl.vue b/src/components/menu/MenuControl.vue
@@ -11,44 +11,46 @@
 </script>
 
 <script setup lang="js">
-import { useControlsMenuOptions } from '@/composables/controls'
-import { useLogger } from 'vue-logger-plugin'
-import { useMapStore } from "@/stores/mapStore"
+import { useControlsMenuOptions } from '@/composables/controls';
+import { useLogger } from 'vue-logger-plugin';
+import { useMapStore } from "@/stores/mapStore";
 
-const log = useLogger()
-const mapStore = useMapStore();
+const log = useLogger();
+const mapStore = useMapStore();;
 
 const props = defineProps({
   selectedControls : Array
-})
+});
 
-const selectedControls = defineModel()
+const selectedControls = defineModel();
 
-const disabled = false
-const inline = false
-const required = false
-const small = false
-const opts = useControlsMenuOptions()
+const disabled = false;
+const inline = false;
+const required = false;
+const small = false;
+const opts = useControlsMenuOptions();
 
 const allOptions = computed(() => {
   return opts.filter((opt) => {
-    if (opt.label.toLowerCase().includes(searchString.value.toLowerCase())
-    || opt.hint.toLowerCase().includes(searchString.value.toLowerCase())
-    || opt.name.toLowerCase().includes(searchString.value.toLowerCase()))
-      return opt
+    if (opt.label.toLowerCase().includes(searchString.value.toLowerCase()) || 
+        opt.hint.toLowerCase().includes(searchString.value.toLowerCase())  ||
+        opt.name.toLowerCase().includes(searchString.value.toLowerCase()))
+      return opt;
   })
-})
+});
 
 const favOptions = computed(() => {
-  if (props.selectedControls)
+  if (props.selectedControls) {
     return allOptions.value.filter((opt) => {
       if (props.selectedControls.includes(opt.name))
-        return opt
+        return opt;
       })
-  else return []
+  } else {
+    return [];
+  }
 })
 
-const tabListName = "Gestion d'outils"
+const tabListName = "Gestion d'outils";
 const tabTitles = [
   {
     title : "Ajouter des outils",
@@ -60,20 +62,19 @@ const tabTitles = [
     tabId : "tab-1",
     panelId : "tab-content-1"
   }
-]
-const selectedTabIndex = ref(0)
-const asc = ref(true)
-const initialSelectedIndex = 0
+];
+const selectedTabIndex = ref(0);
+const asc = ref(true);
+const initialSelectedIndex = 0;
 function selectTab (idx) {
-  asc.value = selectedTabIndex.value < idx
-  selectedTabIndex.value = idx
+  asc.value = selectedTabIndex.value < idx;
+  selectedTabIndex.value = idx;
 }
-const searchString = ref("")
+const searchString = ref("");
 function updateSearch(e) {
-  searchString.value = e
+  searchString.value = e;
 }
 
-
 watch(selectedControls, (values) => {
   mapStore.cleanControls();
   for (let index = 0; index < values.length; index++) {
@@ -92,54 +93,47 @@ onUpdated(() => {})
     <h4>Gestion d'outils</h4>
     <div class="control-search-bar">
       <DsfrSearchBar
-      :model-value="searchString"
-      @update:model-value="updateSearch"
-      />
+        :model-value="searchString"
+        @update:model-value="updateSearch"/>
     </div>
     <div class="control-content">
       <DsfrTabs
-    :tab-list-name="tabListName"
-    :tab-titles="tabTitles"
-    :initial-selected-index="initialSelectedIndex"
-    @select-tab="selectTab"
-  >
-    <DsfrTabContent
-      panel-id="tab-content-0"
-      tab-id="tab-0"
-      :selected="selectedTabIndex === 0"
-      :asc="asc"
-    >
-        <DsfrCheckboxSet
-        v-model="selectedControls"
-        :disabled="disabled"
-        :inline="inline"
-        :small="small"
-        :required="required"
-        :options="allOptions"
-        :model-value="props.selectedControls"
-      />
-    </DsfrTabContent>
-    <DsfrTabContent
-      panel-id="tab-content-1"
-      tab-id="tab-1"
-      :selected="selectedTabIndex === 1"
-      :asc="asc"
-    >
-        <DsfrCheckboxSet
-        v-model="selectedControls"
-        :disabled="disabled"
-        :inline="inline"
-        :small="small"
-        :required="required"
-        :options="favOptions"
-        :model-value="props.selectedControls"
-      />
-    </DsfrTabContent>
-  </DsfrTabs>
+        :tab-list-name="tabListName"
+        :tab-titles="tabTitles"
+        :initial-selected-index="initialSelectedIndex"
+        @select-tab="selectTab">
+
+        <DsfrTabContent
+          panel-id="tab-content-0"
+          tab-id="tab-0"
+          :selected="selectedTabIndex === 0"
+          :asc="asc">
+            <DsfrCheckboxSet
+              v-model="selectedControls"
+              :disabled="disabled"
+              :inline="inline"
+              :small="small"
+              :required="required"
+              :options="allOptions"
+              :model-value="props.selectedControls"/>
+        </DsfrTabContent>
+        <DsfrTabContent
+          panel-id="tab-content-1"
+          tab-id="tab-1"
+          :selected="selectedTabIndex === 1"
+          :asc="asc">
+            <DsfrCheckboxSet
+              v-model="selectedControls"
+              :disabled="disabled"
+              :inline="inline"
+              :small="small"
+              :required="required"
+              :options="favOptions"
+              :model-value="props.selectedControls"/>
+        </DsfrTabContent>
+      </DsfrTabs>
     </div>
-
-</div>
-
+  </div>
 </template>
 
 <style scoped>