Merge pull request #50 from Arzte/push-zlukqzyzwtuk

Persistent Settings & Hide Disabled Addons
ltouroumov · Oct 2, 2024 · d668d27 · d668d27
2 parents d1b3e37 + edfe3d8
commit d668d27
Show file tree

Hide file tree

Showing 9 changed files with 279 additions and 8 deletions.
diff --git a/components/viewer/ProjectMenu.vue b/components/viewer/ProjectMenu.vue
@@ -33,7 +33,7 @@ const { projectList } = defineProps<{
   projectList: ViewerProjectList;
 }>();
 
-const { loadProject, unloadProject } = useProjectStore();
+const { loadProject } = useProjectStore();
 const { toggleProjectMenu } = useViewerStore();
 
 const loadRemoteFile = async ({ target }: MouseEvent) => {

diff --git a/components/viewer/ViewProjectRow.vue b/components/viewer/ViewProjectRow.vue
@@ -28,6 +28,7 @@
           :key="obj.id"
           :obj="obj"
           :row="row"
+          :hide-disabled-addons="disabledAddons"
         />
       </div>
     </div>
@@ -41,13 +42,15 @@ import StyleRow from '~/components/viewer/style/StyleRow.vue';
 import { buildConditions } from '~/composables/conditions';
 import type { ProjectRow } from '~/composables/project';
 import { useProjectRefs } from '~/composables/store/project';
+import { useSettingRefs } from '~/composables/store/settings';
 import { formatText } from '~/composables/text';
 
 const { row } = defineProps<{
   row: ProjectRow;
 }>();
 
 const { selectedIds } = useProjectRefs();
+const { disabledAddons } = useSettingRefs();
 
 const condition = buildConditions(row);
 const isVisible = computed(() => condition(selectedIds.value));

diff --git a/components/viewer/modal/BackpackModal.vue b/components/viewer/modal/BackpackModal.vue
@@ -35,10 +35,11 @@
               <div class="form-check form-switch">
                 <input
                   id="packRowDisabledSwitch"
-                  v-model="lockBackpackObjects"
                   class="form-check-input"
                   type="checkbox"
                   role="switch"
+                  :checked="lockBackpackObjects"
+                  @change="toggleLockBackpackObjects()"
                 />
                 <label class="form-check-label" for="packRowDisabledSwitch">
                   Lock Objects in the Backpack
@@ -47,10 +48,11 @@
               <div class="form-check form-switch">
                 <input
                   id="hideDisabledAddons"
-                  v-model="hideDisabledAddons"
                   class="form-check-input"
                   type="checkbox"
                   role="switch"
+                  :checked="disabledAddonsInBackpack"
+                  @change="toggleDisabledAddonsInBackpack()"
                 />
                 <label class="form-check-label" for="hideDisabledAddons">
                   Hide Disabled Addons
@@ -75,7 +77,7 @@
                   :row="row"
                   :width="packRow.objectWidth"
                   :view-object="objectMode"
-                  :hide-disabled-addons="hideDisabledAddons"
+                  :hide-disabled-addons="!disabledAddonsInBackpack"
                 />
               </div>
             </div>
@@ -102,13 +104,17 @@ import ExportCode from '~/components/viewer/utils/ExportCode.vue';
 import ImportCode from '~/components/viewer/utils/ImportCode.vue';
 import type { ProjectObj, ProjectRow } from '~/composables/project';
 import { useProjectRefs, useProjectStore } from '~/composables/store/project';
+import { useSettingRefs, useSettingStore } from '~/composables/store/settings';
 import { useViewerRefs, useViewerStore } from '~/composables/store/viewer';
 import { ViewContext } from '~/composables/viewer';
 
 const { getObject, getObjectRow, getRow, project } = useProjectStore();
 const { selected, backpack } = useProjectRefs();
 const { toggleBackpack } = useViewerStore();
+const { toggleDisabledAddonsInBackpack, toggleLockBackpackObjects } =
+  useSettingStore();
 const { isBackpackVisible } = useViewerRefs();
+const { disabledAddonsInBackpack, lockBackpackObjects } = useSettingRefs();
 
 type PackRowChoice = { row: ProjectRow; obj: ProjectObj; count: number };
 type PackRow = { packRow: ProjectRow; choices: PackRowChoice[] };
@@ -134,8 +140,6 @@ const packRows = computed(() => {
     backpack.value,
   );
 });
-const hideDisabledAddons = ref(true);
-const lockBackpackObjects = ref(true);
 const objectMode = computed(() => {
   if (lockBackpackObjects.value) return ViewContext.BackpackDisabled;
   else return ViewContext.BackpackEnabled;

diff --git a/components/viewer/modal/MenuModal.vue b/components/viewer/modal/MenuModal.vue
@@ -39,6 +39,15 @@
             Library
           </a>
         </li>
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            :class="{ active: selected === 'viewer-settings' }"
+            @click="selected = 'viewer-settings'"
+          >
+            Viewer Settings
+          </a>
+        </li>
       </ul>
       <div v-if="selected === 'project'">
         <div v-if="store.status === 'loaded'" class="mb-2">
@@ -57,6 +66,9 @@
       <div v-if="selected === 'library'">
         <BuildLibrary />
       </div>
+      <div v-if="selected === 'viewer-settings'">
+        <ViewerSettings />
+      </div>
     </template>
   </OffCanvas>
 </template>

diff --git a/components/viewer/utils/ViewerSettings.vue b/components/viewer/utils/ViewerSettings.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <h5 class="text-center">Viewer</h5>
+    <ul class="list-group mb-5 shadow">
+      <li
+        class="list-group-item d-flex justify-content-between align-items-center"
+      >
+        <div class="form-check form-switch">
+          <input
+            id="hideDisabledAddons"
+            class="form-check-input me-1"
+            type="checkbox"
+            role="switch"
+            :checked="disabledAddons"
+            @change="toggleHideDisabledAddons()"
+          />
+          <label class="form-check-label" for="hideDisabledAddons"
+            >Hide Disabled Addons
+            <small class="text-body-secondary ms-3"
+              >When enabled hides addons whose conditions are unmet</small
+            >
+          </label>
+        </div>
+      </li>
+    </ul>
+    <h5 class="text-center">Backpack</h5>
+    <ul class="list-group mb-5 shadow">
+      <li
+        class="list-group-item d-flex justify-content-between align-items-center"
+      >
+        <div class="form-check form-switch">
+          <input
+            id="showDisabledAddons"
+            class="form-check-input me-1"
+            type="checkbox"
+            role="switch"
+            :checked="disabledAddonsInBackpack"
+            @change="toggleDisabledAddonsInBackpack()"
+          />
+          <label class="form-check-label"
+            >Show Disabled Addons
+            <small class="text-body-secondary ms-3"
+              >When disabled shows addons whose conditions are met</small
+            ></label
+          >
+        </div>
+      </li>
+      <li
+        class="list-group-item d-flex justify-content-between align-items-center"
+      >
+        <div class="form-check form-switch">
+          <input
+            id="lockBackpackObjects"
+            class="form-check-input me-1"
+            type="checkbox"
+            role="switch"
+            :checked="lockBackpackObjects"
+            @change="toggleLockBackpackObjects()"
+          />
+          <label class="form-check-label" for="lockBackpackObjects"
+            >Lock Objects in Backpack</label
+          >
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSettingRefs, useSettingStore } from '~/composables/store/settings';
+
+const { disabledAddons, disabledAddonsInBackpack, lockBackpackObjects } =
+  useSettingRefs();
+const {
+  toggleHideDisabledAddons,
+  toggleDisabledAddonsInBackpack,
+  toggleLockBackpackObjects,
+} = useSettingStore();
+</script>
diff --git a/composables/store/settings.ts b/composables/store/settings.ts
@@ -0,0 +1,38 @@
+import { defineStore, storeToRefs } from 'pinia';
+
+export const useSettingStore = defineStore(
+  'viewer-settings',
+  () => {
+    const disabledAddons = ref<boolean>(false);
+    const disabledAddonsInBackpack = ref<boolean>(true);
+    const lockBackpackObjects = ref<boolean>(true);
+
+    const toggleHideDisabledAddons = (set?: boolean) => {
+      disabledAddons.value = set ?? !disabledAddons.value;
+    };
+
+    const toggleDisabledAddonsInBackpack = (set?: boolean) => {
+      disabledAddonsInBackpack.value = set ?? !disabledAddonsInBackpack.value;
+    };
+
+    const toggleLockBackpackObjects = (set?: boolean) => {
+      lockBackpackObjects.value = set ?? !lockBackpackObjects.value;
+    };
+
+    return {
+      disabledAddons,
+      disabledAddonsInBackpack,
+      lockBackpackObjects,
+      toggleLockBackpackObjects,
+      toggleDisabledAddonsInBackpack,
+      toggleHideDisabledAddons,
+    };
+  },
+  {
+    persist: {
+      storage: piniaPluginPersistedstate.localStorage(),
+    },
+  },
+);
+
+export const useSettingRefs = () => storeToRefs(useSettingStore());
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -71,6 +71,12 @@ export default defineNuxtConfig({
     },
   ],
 
-  modules: ['@unocss/nuxt', '@pinia/nuxt', '@vueuse/nuxt', '@nuxt/image'],
+  modules: [
+    '@unocss/nuxt',
+    '@pinia/nuxt',
+    'pinia-plugin-persistedstate/nuxt',
+    '@vueuse/nuxt',
+    '@nuxt/image',
+  ],
   compatibilityDate: '2024-09-04',
 });
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "handlebars": "^4.7.8",
     "perfect-debounce": "^1.0.0",
     "pinia": "^2.2.2",
+    "pinia-plugin-persistedstate": "^4.0.2",
     "ramda": "^0.30.1",
     "ts-pattern": "^5.3.1",
     "vue-toastification": "next"