refactor(gui-v2): attachment store refactoring

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/cell/attachment/index.vue

@@ -43,7 +43,7 @@ const {
   FileIcon,
   selectedImage,
   isReadonly,
-  storedFilesRefs,
+  storedFiles,
 } = useProvideAttachmentCell(updateModelValue)
 
 const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
@@ -76,11 +76,11 @@ onKeyDown('Escape', () => {
   isOverDropZone.value = false
 })
 
-/** sync storedFilesRefs state with row state */
+/** sync storedFiles state with row state */
 watch(
-  () => storedFilesRefs?.value?.length || 0,
+  () => storedFiles.value.length || 0,
   () => {
-    rowState.value[column.value.title!] = storedFilesRefs?.value
+    rowState.value[column.value.title!] = storedFiles.value
   },
 )
 </script>

packages/nc-gui-v2/components/cell/attachment/utils.ts

@@ -33,10 +33,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const editEnabled = inject(EditModeInj, ref(false))
 
-    // todo: refactor name
-    const storedFiles = ref<{ title: string; file: File }[]>([])
+    /** keep user selected files data (in base encoded string format) and meta details */
+    const storedFilesData = ref<{ title: string; file: File }[]>([])
 
-    const storedFilesRefs = ref<File[]>([])
+    /** keep user selected File object */
+    const storedFiles = ref<File[]>([])
 
     const attachments = ref<File[]>([])
 
@@ -53,10 +54,10 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     /** remove a file from our stored attachments (either locally stored or saved ones) */
     function removeFile(i: number) {
       if (isPublic.value) {
+        storedFilesData.value.splice(i, 1)
         storedFiles.value.splice(i, 1)
-        storedFilesRefs.value.splice(i, 1)
 
-        updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+        updateModelValue(storedFilesData.value.map((storedFile) => storedFile.file))
       } else {
         attachments.value.splice(i, 1)
         updateModelValue(attachments.value)
@@ -68,8 +69,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       if (!selectedFiles.length || isPublicGrid) return
 
       if (isPublic.value) {
-        storedFilesRefs.value.push(...selectedFiles)
-        storedFiles.value.push(
+        storedFiles.value.push(...selectedFiles)
+        storedFilesData.value.push(
           ...(await Promise.all<AttachmentProps>(
             Array.from(selectedFiles).map(
               (file) =>
@@ -91,7 +92,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
           )),
         )
 
-        return updateModelValue(storedFiles.value.map((storedFile) => storedFile.file))
+        return updateModelValue(storedFilesData.value.map((storedFile) => storedFile.file))
       }
 
       const newAttachments = []
@@ -146,13 +147,13 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     }
 
     /** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
-    const visibleItems = computed<any[]>(() => (isPublic.value ? storedFiles.value : attachments.value) || ([] as any[]))
+    const visibleItems = computed<any[]>(() => (isPublic.value ? storedFilesData.value : attachments.value) || ([] as any[]))
 
     watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
 
     return {
       attachments,
-      storedFiles,
+      storedFilesData,
       visibleItems,
       isPublic,
       isForm,
@@ -171,7 +172,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       downloadFile,
       updateModelValue,
       selectedImage,
-      storedFilesRefs,
+      storedFiles,
     }
   },
   'useAttachmentCell',

packages/nc-gui-v2/composables/useSharedFormViewStore.ts

@@ -13,7 +13,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const notFound = ref(false)
   const submitted = ref(false)
   const passwordDlg = ref(false)
-  const password = ref('')
+  const password = ref<string | null>(null)
   const secondsRemain = ref(0)
 
   provide(SharedViewPasswordInj, password)

packages/nc-gui-v2/context/index.ts

@@ -25,4 +25,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
-export const SharedViewPasswordInj: InjectionKey<Ref<string>> = Symbol('shared-view-password-injection')
+export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')