Merge pull request #75 from powerpaul17/save_collapsible_status_of_books

Save collapsible status of books

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Reset input when escape key is pressed
 - Implement audit logging
+- Save collapsed state of book navigation items
 
 ## [0.26.6] - 2024-06-10
 

package.json

@@ -49,6 +49,7 @@
     "eslint-plugin-vue": "^9.9.0",
     "glob": "^8.0.3",
     "jsdom": "^20.0.0",
+    "localforage": "^1.10.0",
     "postcss": "^8.4.14",
     "prettier": "^3.0.3",
     "release-it": "^16.2.1",

src/components/BookNavigationItem.vue

@@ -23,7 +23,7 @@
     :loading="isLoading"
     :undo="isDeleting"
     :open="isOpen"
-    @update:open="(open: boolean) => (isOpen = open)"
+    @update:open="handleUpdateOpenStatus"
     @update:name="handleUpdateBookName"
     @undo="handleUndo"
   >
@@ -121,7 +121,14 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref, type PropType, type Ref } from 'vue';
+  import {
+    computed,
+    onMounted,
+    ref,
+    watch,
+    type PropType,
+    type Ref
+  } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
 
   import { translate as t } from '@nextcloud/l10n';
@@ -144,6 +151,8 @@
 
   import { useBookService } from '../services/bookService';
 
+  import { useLocalForage } from '../utils/useLocalForage';
+
   const route = useRoute();
   const router = useRouter();
 
@@ -212,4 +221,32 @@
   });
 
   const isOpen = ref(false);
+
+  function handleUpdateOpenStatus(open: boolean): void {
+    isOpen.value = open;
+    void saveCollapsedStatus();
+  }
+
+  watch(
+    () => props.book,
+    async () => {
+      await loadCollapsedStatus();
+    }
+  );
+
+  onMounted(async () => {
+    await loadCollapsedStatus();
+  });
+
+  const { getItemInKey, setItemInKey } = useLocalForage<boolean>(
+    'bookCollapsedStatus'
+  );
+
+  async function loadCollapsedStatus(): Promise<void> {
+    isOpen.value = (await getItemInKey(props.book.id)) ?? false;
+  }
+
+  async function saveCollapsedStatus(): Promise<void> {
+    await setItemInKey(props.book.id, isOpen.value);
+  }
 </script>

src/utils/useLocalForage.ts

@@ -0,0 +1,30 @@
+import localforage from 'localforage';
+
+export function useLocalForage<T>(
+  storageKey: string,
+  storeName = 'settings'
+): {
+  setItemInKey: (itemId: number, value: T) => Promise<void>;
+  getItemInKey: (itemId: number) => Promise<T | undefined>;
+} {
+  localforage.config({
+    name: 'money',
+    storeName
+  });
+
+  return {
+    getItemInKey: async (itemId): Promise<T | undefined> => {
+      const keyValue = await localforage.getItem<Record<number, T>>(storageKey);
+
+      return keyValue?.[itemId];
+    },
+    setItemInKey: async (itemId, value): Promise<void> => {
+      const status = await localforage.getItem<Record<number, T>>(storageKey);
+
+      await localforage.setItem('bookCollapsedStatus', {
+        ...status,
+        [itemId]: value
+      });
+    }
+  };
+}