Migrate Settings model to Vue 3

biigle · Jan 15, 2025 · 17487b7 · 17487b7
1 parent 7858764
commit 17487b7
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 97 deletions.
diff --git a/resources/assets/js/annotations/stores/settings.js b/resources/assets/js/annotations/stores/settings.js
@@ -1,4 +1,4 @@
-import Settings from '@/core/models/Settings.vue';
+import Settings from '@/core/models/Settings.js';
 
 /**
  * Store for annotator settings
@@ -24,11 +24,7 @@ let defaults = {
 };
 
 export default new Settings({
-    data() {
-        return {
-            urlParams: Object.keys(defaults),
-            storageKey: 'biigle.annotations.settings',
-            defaults: defaults,
-        };
-    },
+    urlParams: Object.keys(defaults),
+    storageKey: 'biigle.annotations.settings',
+    defaults: defaults,
 });
diff --git a/resources/assets/js/core/models/Settings.js b/resources/assets/js/core/models/Settings.js
@@ -0,0 +1,78 @@
+import {debounce, urlParams} from '../utils.js';
+import {reactive, watch} from 'vue';
+
+/**
+ * Model for arbitrary settings that are persisted in localStorage.
+ */
+export default class {
+    constructor(options) {
+        this.urlParams = options?.urlParams || [];
+        this.storageKey = options?.storageKey || 'biigle.settings';
+        this.defaults = options?.defaults || {};
+        this.data = reactive({});
+
+        // Vue 2 legacy support.
+        if (options.data) {
+            throw new Error('Settings is no longer a Vue instance.');
+        }
+
+        this.restoreFromLocalStorage();
+        if (this.urlParams.length > 0) {
+            this.restoreFromUrlParams(this.urlParams);
+        }
+    }
+
+    set(key, value) {
+        if (value === this.defaults[key]) {
+            this.delete(key);
+        } else if (this.has(key)) {
+            this.data[key] = value;
+        } else {
+            this.data[key] = value;
+        }
+
+        debounce(this.persist, 100, this.storageKey);
+    }
+
+    delete(key) {
+        delete this.data[key];
+        this.persist();
+    }
+
+    get(key) {
+        return this.has(key) ? this.data[key] : this.defaults[key];
+    }
+
+    has(key) {
+        return this.data.hasOwnProperty(key);
+    }
+
+    persist() {
+        if (Object.keys(this.data).length > 0) {
+            window.localStorage.setItem(this.storageKey, JSON.stringify(this.data));
+        } else {
+            window.localStorage.removeItem(this.storageKey);
+        }
+    }
+
+    restoreFromLocalStorage() {
+        let data = JSON.parse(window.localStorage.getItem(this.storageKey));
+        if (data) {
+            this.data = data;
+        }
+    }
+
+    restoreFromUrlParams(keys) {
+        let params = urlParams.params;
+        keys = keys || Object.keys(params);
+        keys.forEach((key) => {
+            if (params.hasOwnProperty(key)) {
+                this.data[key] = params[key];
+            }
+        });
+    }
+
+    watch(key, callback) {
+        watch(() => this.data[key], callback);
+    }
+};
diff --git a/resources/assets/js/core/models/Settings.vue b/resources/assets/js/core/models/Settings.vue
diff --git a/resources/assets/js/export.js b/resources/assets/js/export.js
@@ -16,7 +16,7 @@ import NotificationsApi from '@/core/api/notifications.js';
 import NotificationSettingsMixin from '@/core/mixins/notificationSettings.vue';
 import PowerToggleComponent from '@/core/components/powerToggle.vue';
 import ProjectsApi from '@/core/api/projects.js';
-import SettingsModel from '@/core/models/Settings.vue';
+import SettingsModel from '@/core/models/Settings.js';
 import SidebarComponent from '@/core/components/sidebar.vue';
 import SidebarTabComponent from '@/core/components/sidebarTab.vue';
 import TypeaheadComponent from '@/core/components/typeahead.vue';

diff --git a/resources/assets/js/videos/stores/settings.js b/resources/assets/js/videos/stores/settings.js
@@ -1,4 +1,4 @@
-import Settings from '@/core/models/Settings.vue';
+import Settings from '@/core/models/Settings.js';
 
 let defaults = {
     annotationOpacity: 1,
@@ -14,11 +14,7 @@ let defaults = {
 };
 
 export default new Settings({
-    data() {
-        return {
-            urlParams: Object.keys(defaults),
-            storageKey: 'biigle.videos.settings',
-            defaults: defaults,
-        };
-    },
+    urlParams: Object.keys(defaults),
+    storageKey: 'biigle.videos.settings',
+    defaults: defaults,
 });
diff --git a/resources/assets/js/volumes/volumeContainer.vue b/resources/assets/js/volumes/volumeContainer.vue
@@ -4,7 +4,7 @@ import ImageGrid from './components/volumeImageGrid.vue';
 import FilesStore from './stores/files.js';
 import LabelsTab from './components/labelsTab.vue';
 import LoaderMixin from '@/core/mixins/loader.vue';
-import Settings from '@/core/models/Settings.vue';
+import Settings from '@/core/models/Settings.js';
 import Sidebar from '@/core/components/sidebar.vue';
 import SidebarTab from '@/core/components/sidebarTab.vue';
 import SortingTab from './components/sortingTab.vue';
@@ -253,14 +253,10 @@ export default {
         this.sortingSequence = this.fileIds;
         this.volumeId = biigle.$require('volumes.volumeId');
         this.settings = new Settings({
-            data() {
-                return {
-                    storageKey: 'biigle.volumes.settings',
-                    defaults: {
-                        showFilenames: false,
-                        showLabels: false,
-                    },
-                };
+            storageKey: 'biigle.volumes.settings',
+            defaults: {
+                showFilenames: false,
+                showLabels: false,
             },
         });