refactor(nc-gui): rename selectedImages to selectedVisibleItems

packages/nc-gui/components/cell/attachment/Modal.vue

@@ -20,7 +20,7 @@ const {
   downloadFile,
   updateModelValue,
   selectedImage,
-  selectedImages,
+  selectedVisibleItems,
   bulkDownloadFiles,
 } = useAttachmentCell()!
 
@@ -100,7 +100,7 @@ function onRemoveFileClick(title: any, i: number) {
           <div class="font-semibold underline">{{ column?.title }}</div>
         </div>
 
-        <div v-if="selectedImages.includes(true)" class="flex flex-1 items-center gap-3 justify-end mr-[30px]">
+        <div v-if="selectedVisibleItems.includes(true)" class="flex flex-1 items-center gap-3 justify-end mr-[30px]">
           <a-button type="primary" class="nc-attachment-download-all" @click="bulkDownloadFiles"> Bulk Download </a-button>
         </div>
       </div>
@@ -122,9 +122,9 @@ function onRemoveFileClick(title: any, i: number) {
         <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
           <a-card class="nc-attachment-item group">
             <a-checkbox
-              v-model:checked="selectedImages[i]"
+              v-model:checked="selectedVisibleItems[i]"
               class="nc-attachment-checkbox group-hover:(opacity-100)"
-              :class="{ '!opacity-100': selectedImages[i] }"
+              :class="{ '!opacity-100': selectedVisibleItems[i] }"
             />
 
             <a-tooltip v-if="!readOnly">

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

@@ -56,9 +56,6 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     /** for image carousel */
     const selectedImage = ref()
 
-    /** for bulk download */
-    const selectedVisibleItems = ref<boolean[]>([])
-
     const { project } = useProject()
 
     const { api, isLoading } = useApi()
@@ -68,11 +65,10 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     const { t } = useI18n()
 
     /** our currently visible items, either the locally stored or the ones from db, depending on isPublic & isForm status */
-    const visibleItems = computed<any[]>(() => {
-      const items = isPublic.value && isForm.value ? storedFiles.value : attachments.value
-      selectedVisibleItems.value = Array.from({ length: items.length }, () => false)
-      return items
-    })
+    const visibleItems = computed<any[]>(() => (isPublic.value && isForm.value ? storedFiles.value : attachments.value))
+
+    /** for bulk download */
+    const selectedVisibleItems = ref<boolean[]>(Array.from({ length: visibleItems.value.length }, () => false))
 
     /** remove a file from our stored attachments (either locally stored or saved ones) */
     function removeFile(i: number) {
@@ -212,6 +208,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     /** bulk download selected files */
     async function bulkDownloadFiles() {
       await Promise.all(selectedVisibleItems.value.map(async (v, i) => v && (await downloadFile(visibleItems.value[i]))))
+      selectedVisibleItems.value = Array.from({ length: visibleItems.value.length }, () => false)
     }
 
     /** download a file */