Merge branch 'development' into tw_otu_distribution_n_plus_one

Author: kleintom

CHANGELOG.md

@@ -19,6 +19,7 @@ New TaxonName Relationship: nomen oblitum rejected between 1961 and 1972
 ### Changed
 
 - Updated Ruby gems
+- Save taxonomic tree settings in user preferences [#4577]
 
 [#4321]: https://github.com/SpeciesFileGroup/taxonworks/issues/4321
 

app/javascript/vue/components/ui/VMap/VMap.vue

@@ -439,9 +439,10 @@ function addGeoJsonLayer(geoJsonLayers) {
 
   geojsonLayer.eachLayer((layer) => {
     addEventsToLayer(layer)
-    drawnItems.addLayer(layer)
   })
 
+  geojsonLayer.addTo(drawnItems)
+
   if (props.fitBounds && !isShapeToolActive) {
     centerShapesInMap()
   }

app/javascript/vue/composables/index.js

@@ -8,3 +8,4 @@ export * from './useWindowSize'
 export * from './useHotkey/useHotkey.js'
 export * from './useEventListener.js'
 export * from './useBroadcastChannel.js'
+export * from './useUserPreferences.js'

app/javascript/vue/composables/useUserPreferences.js

@@ -0,0 +1,109 @@
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { User } from '@/routes/endpoints'
+import { useBroadcastChannel } from './useBroadcastChannel'
+
+const preferences = ref(null)
+const isLoading = ref(false)
+const error = ref(null)
+const loaded = ref(false)
+
+const STORAGE_KEY = 'tw_user_preferences'
+
+export function useUserPreferences() {
+  const { post } = useBroadcastChannel({
+    name: 'tw_user_preferences',
+    onMessage({ data }) {
+      preferences.value = data
+    }
+  })
+
+  const loadPreferences = async (forceReload = false) => {
+    if (loaded.value && !forceReload) return preferences.value
+
+    const saved = sessionStorage.getItem(STORAGE_KEY)
+
+    if (!forceReload && saved) {
+      preferences.value = JSON.parse(saved)
+      loaded.value = true
+
+      return preferences.value
+    }
+
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const { body } = await User.preferences()
+
+      preferences.value = body
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(body))
+      loaded.value = true
+
+      return body
+    } catch (err) {
+      error.value = err
+      console.error('Error loading preferences:', err)
+
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const syncStorage = () => {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(preferences.value))
+
+    post(preferences.value)
+  }
+
+  const setPreference = async (key, value, opts = { persist: true }) => {
+    if (!preferences.value?.layout) {
+      preferences.value.layout = {}
+    }
+
+    if (!preferences.value) {
+      preferences.value = {
+        layout: {}
+      }
+    }
+
+    preferences.value.layout[key] = value
+
+    syncStorage()
+
+    if (opts.persist) {
+      try {
+        await User.update(preferences.value.id, {
+          user: {
+            layout: {
+              [key]: value
+            }
+          }
+        })
+      } catch (err) {
+        console.error('Failed to persist user preference:', err)
+      }
+    }
+  }
+
+  const clearPreferences = () => {
+    preferences.value = null
+    sessionStorage.removeItem(STORAGE_KEY)
+    loaded.value = false
+    post(preferences.value)
+  }
+
+  if (!isLoading.value && !loaded.value) {
+    loadPreferences()
+  }
+
+  return {
+    preferences: computed(() => preferences.value),
+    isLoading: computed(() => isLoading.value),
+    error: computed(() => error.value),
+    loaded: computed(() => loaded.value),
+    loadPreferences,
+    setPreference,
+    clearPreferences
+  }
+}

app/javascript/vue/tasks/nomenclature/browse/components/Taxonomy/TaxonomyOptions.vue

@@ -52,8 +52,10 @@
 import VModal from '@/components/ui/Modal.vue'
 import VBtn from '@/components/ui/VBtn/index.vue'
 import VIcon from '@/components/ui/VIcon/index.vue'
-import { convertType } from '@/helpers'
-import { onBeforeMount, ref } from 'vue'
+import { useUserPreferences } from '@/composables'
+import { ref, watch } from 'vue'
+
+const STORAGE_LAYOUT_KEY = 'tasks::BrowseNomenclature::Layout'
 
 const count = defineModel('count', {
   type: Boolean,
@@ -71,32 +73,28 @@ const rainbow = defineModel('rainbow', {
 })
 
 const isModalVisible = ref(false)
-
-const STORAGE_COUNT_KEY = 'TW::TaxonomyTree::Count'
-const STORAGE_ONLY_VALID_KEY = 'TW::TaxonomyTree::OnlyValid'
-const STORAGE_RAINBOW_KEY = 'TW::TaxonomyTree::RainbowMode'
+const { preferences, setPreference } = useUserPreferences()
 
 function updateStorage() {
-  localStorage.setItem(STORAGE_COUNT_KEY, count.value)
-  localStorage.setItem(STORAGE_ONLY_VALID_KEY, onlyValid.value)
-  localStorage.setItem(STORAGE_RAINBOW_KEY, rainbow.value)
+  setPreference(STORAGE_LAYOUT_KEY, {
+    count: count.value,
+    onlyValid: onlyValid.value,
+    rainbow: rainbow.value
+  })
 }
 
-onBeforeMount(() => {
-  const c = convertType(localStorage.getItem(STORAGE_COUNT_KEY))
-  const r = convertType(localStorage.getItem(STORAGE_RAINBOW_KEY))
-  const v = convertType(localStorage.getItem(STORAGE_ONLY_VALID_KEY))
-
-  if (v !== null) {
-    onlyValid.value = v
-  }
-
-  if (c !== null) {
-    count.value = c
-  }
-
-  if (r !== null) {
-    rainbow.value = r
+watch(
+  () => preferences.value?.layout?.[STORAGE_LAYOUT_KEY],
+  (newVal) => {
+    if (newVal) {
+      onlyValid.value = newVal?.onlyValid
+      count.value = newVal?.count
+      rainbow.value = newVal?.rainbow
+    }
+  },
+  {
+    immediate: true,
+    deep: true
   }
-})
+)
 </script>