Move hierarchical menu type selection to user settings

src/assets/DefaultUserSettings.json

@@ -64,5 +64,26 @@
       }
     ],
     "group": "UI"
+  },
+  {
+    "id": "ui.hierarchical-menu-style",
+    "type": "oneOfMultiple",
+    "label": "Menu style",
+    "value": "auto",
+    "items": [
+      {
+        "value": "auto",
+        "icon": "mdi-responsive"
+      },
+      {
+        "value": "tree",
+        "icon": "mdi-file-tree"
+      },
+      {
+        "value": "column",
+        "icon": "mdi-view-week"
+      }
+    ],
+    "group": "UI"
   }
 ]

src/components/general/HierarchicalMenu.vue

@@ -1,19 +1,22 @@
 <template>
   <TreeMenu
-    v-if="type === 'tree'"
+    v-if="finalType === 'tree'"
     v-model:active="active"
     :items="items"
     :open="open"
   />
   <ColumnMenu
-    v-else-if="type === 'column'"
+    v-else-if="finalType === 'column'"
     v-model:active="active"
     v-model:open="open"
     :items="items"
   />
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useDisplay } from 'vuetify'
+
 import ColumnMenu from '@/components/general/ColumnMenu.vue'
 import TreeMenu from '@/components/general/TreeMenu.vue'
 import { ColumnItem } from './ColumnItem'
@@ -22,8 +25,17 @@ interface Props {
   type: string
   items: ColumnItem[]
 }
-defineProps<Props>()
+const props = defineProps<Props>()
 
 const open = defineModel<string[]>('open')
 const active = defineModel<string>('active')
+
+const { mobile } = useDisplay()
+
+const finalType = computed(() => {
+  if (props.type === 'auto') {
+    return mobile.value ? 'column' : 'tree'
+  }
+  return props.type
+})
 </script>

src/views/SchematicStatusDisplayView.vue

@@ -1,25 +1,9 @@
 <template>
   <Teleport to="#web-oc-sidebar-target">
-    <v-toolbar v-if="!mobile" density="compact">
-      <v-btn-toggle
-        v-model="menuType"
-        variant="tonal"
-        divided
-        density="compact"
-        class="ma-2"
-      >
-        <v-btn variant="text" value="tree">
-          <v-icon>mdi-file-tree</v-icon>
-        </v-btn>
-        <v-btn variant="text" value="column">
-          <v-icon>mdi-view-week</v-icon>
-        </v-btn>
-      </v-btn-toggle>
-    </v-toolbar>
     <HierarchicalMenu
       v-model:active="active"
       v-model:open="open"
-      :type="mobile ? 'column' : menuType"
+      :type="menuType"
       :items="items"
     />
   </Teleport>
@@ -53,7 +37,8 @@ import debounce from 'lodash-es/debounce'
 import { ref, onMounted, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import { useAlertsStore } from '../stores/alerts.ts'
+import { useAlertsStore } from '@/stores/alerts.ts'
+import { useUserSettingsStore } from '@/stores/userSettings.ts'
 
 import { configManager } from '../services/application-config/index.ts'
 import type { ColumnItem } from '../components/general/ColumnItem'
@@ -82,6 +67,7 @@ const sliderDebounceInterval = 500
 
 const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
 const alertsStore = useAlertsStore()
+const settings = useUserSettingsStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -101,13 +87,17 @@ const selectedDate = ref<Date>(new Date())
 const selectedDateSlider = ref<Date>(selectedDate.value)
 
 const { mobile } = useDisplay()
-const menuType = ref('tree')
 
 onMounted(() => {
   onGroupIdChange()
   onPanelIdChange()
 })
 
+const menuType = computed(() => {
+  const configured = settings.get('ui.hierarchical-menu-style')?.value as string
+  return configured ?? 'auto'
+})
+
 const selectedDateString = computed(() => {
   if (selectedDate.value === undefined) return ''
   const dateString = selectedDate.value.toISOString()

src/views/SpatialDisplayView.vue

@@ -1,25 +1,9 @@
 <template>
   <Teleport to="#web-oc-sidebar-target">
-    <v-toolbar v-if="!mobile" density="compact">
-      <v-btn-toggle
-        v-model="menuType"
-        variant="tonal"
-        divided
-        density="compact"
-        class="ma-2"
-      >
-        <v-btn variant="text" value="tree">
-          <v-icon>mdi-file-tree</v-icon>
-        </v-btn>
-        <v-btn variant="text" value="column">
-          <v-icon>mdi-view-week</v-icon>
-        </v-btn>
-      </v-btn-toggle>
-    </v-toolbar>
     <HierarchicalMenu
       v-model:active="active"
       v-model:open="open"
-      :type="mobile ? 'column' : menuType"
+      :type="menuType"
       :items="items"
     />
   </Teleport>
@@ -32,13 +16,13 @@
 
 <script setup lang="ts">
 import HierarchicalMenu from '@/components/general/HierarchicalMenu.vue'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { ColumnItem } from '../components/general/ColumnItem'
 import { useWmsCapilities } from '@/services/useWms'
 import { configManager } from '@/services/application-config'
 import { Layer, LayerGroup } from '@deltares/fews-wms-requests'
 import SpatialDisplay from '@/components/spatialdisplay/SpatialDisplay.vue'
-import { useDisplay } from 'vuetify'
+import { useUserSettingsStore } from '@/stores/userSettings'
 
 interface Props {
   layerName?: string
@@ -53,12 +37,16 @@ const props = withDefaults(defineProps<Props>(), {
 const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
 const capabilities = useWmsCapilities(baseUrl)
 
+const settings = useUserSettingsStore()
+
 const active = ref<string>('root')
 const open = ref<string[]>([])
 const items = ref<ColumnItem[]>([])
-const menuType = ref('tree')
 
-const { mobile } = useDisplay()
+const menuType = computed(() => {
+  const configured = settings.get('ui.hierarchical-menu-style')?.value as string
+  return configured ?? 'auto'
+})
 
 watch(capabilities, () => {
   if (capabilities.value === undefined) return []

src/views/TopologyDisplayView.vue

@@ -1,25 +1,9 @@
 <template>
   <Teleport to="#web-oc-sidebar-target">
-    <v-toolbar v-if="!mobile" density="compact">
-      <v-btn-toggle
-        v-model="menuType"
-        variant="tonal"
-        divided
-        density="compact"
-        class="ma-2"
-      >
-        <v-btn variant="text" value="tree">
-          <v-icon>mdi-file-tree</v-icon>
-        </v-btn>
-        <v-btn variant="text" value="column">
-          <v-icon>mdi-view-week</v-icon>
-        </v-btn>
-      </v-btn-toggle>
-    </v-toolbar>
     <HierarchicalMenu
       v-model:active="active"
       v-model:open="open"
-      :type="mobile ? 'column' : menuType"
+      :type="menuType"
       :items="items"
     />
   </Teleport>
@@ -118,6 +102,7 @@ import HierarchicalMenu from '@/components/general/HierarchicalMenu.vue'
 import type { ColumnItem } from '@/components/general/ColumnItem'
 import { createTopologyMap, getTopologyNodes } from '@/lib/topology'
 import { useConfigStore } from '@/stores/config'
+import { useUserSettingsStore } from '@/stores/userSettings'
 
 import type {
   SecondaryWorkflowGroupItem,
@@ -133,7 +118,6 @@ import {
   useRoute,
   useRouter,
 } from 'vue-router'
-import { useDisplay } from 'vuetify'
 
 interface Props {
   nodeId?: string | string[]
@@ -156,7 +140,12 @@ interface DisplayTab {
 const props = defineProps<Props>()
 
 const configStore = useConfigStore()
-const { mobile } = useDisplay()
+const settings = useUserSettingsStore()
+
+const menuType = computed(() => {
+  const configured = settings.get('ui.hierarchical-menu-style')?.value as string
+  return configured ?? 'auto'
+})
 
 const active = ref<string | undefined>(undefined)
 const activeNode = computed(() => {
@@ -177,7 +166,6 @@ const secondaryWorkflows = computed<SecondaryWorkflowGroupItem[] | undefined>(
 )
 const open = ref<string[]>([])
 const items = ref<ColumnItem[]>([])
-const menuType = ref('tree')
 
 const filterIds = ref<string[]>([])
 const topologyNode = ref<TopologyNode | undefined>(undefined)