feat(nc-gui): selectedImages & bulk download

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

@@ -20,6 +20,8 @@ const {
   downloadFile,
   updateModelValue,
   selectedImage,
+  selectedImages,
+  bulkDownloadFiles,
 } = useAttachmentCell()!
 
 // todo: replace placeholder var
@@ -97,6 +99,10 @@ function onRemoveFileClick(title: any, i: number) {
           Viewing Attachments of
           <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]">
+          <a-button type="primary" class="nc-attachment-download-all" @click="bulkDownloadFiles"> Bulk Download </a-button>
+        </div>
       </div>
     </template>
 
@@ -115,6 +121,12 @@ function onRemoveFileClick(title: any, i: number) {
       <div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
         <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]"
+              class="nc-attachment-checkbox group-hover:(opacity-100)"
+              :class="{ '!opacity-100': selectedImages[i] }"
+            />
+
             <a-tooltip v-if="!readOnly">
               <template #title> Remove File </template>
               <MdiCloseCircle
@@ -210,6 +222,11 @@ function onRemoveFileClick(title: any, i: number) {
     @apply active:(ring border-0 ring-accent);
   }
 
+  .nc-attachment-checkbox {
+    @apply absolute top-2 left-2;
+    @apply transition-opacity duration-150 ease-in opacity-0;
+  }
+
   .nc-attachment-remove {
     @apply absolute top-2 right-2 bg-white;
     @apply hover:(ring ring-red-500);

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

@@ -55,6 +55,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const selectedImage = ref()
 
+    const selectedImages = ref<boolean[]>([])
+
     const { project } = useProject()
 
     const { api, isLoading } = useApi()
@@ -63,6 +65,13 @@ 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
+      selectedImages.value = Array.from({ length: items.length }, () => false)
+      return items
+    })
+
     /** remove a file from our stored attachments (either locally stored or saved ones) */
     function removeFile(i: number) {
       if (isPublic.value) {
@@ -198,6 +207,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       }
     }
 
+    /** bulk download selected files */
+    async function bulkDownloadFiles() {
+      await Promise.all(selectedImages.value.map(async (v, i) => v && (await downloadFile(visibleItems.value[i]))))
+    }
+
     /** download a file */
     async function downloadFile(item: Record<string, any>) {
       ;(await import('file-saver')).saveAs(item.url || item.data, item.title)
@@ -218,9 +232,6 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       }
     }
 
-    /** our currently visible items, either the locally stored or the ones from db, depending on isPublic & isForm status */
-    const visibleItems = computed<any[]>(() => (isPublic.value && isForm.value ? storedFiles.value : attachments.value))
-
     watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
 
     return {
@@ -243,7 +254,9 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       downloadFile,
       updateModelValue,
       selectedImage,
+      selectedImages,
       storedFiles,
+      bulkDownloadFiles,
     }
   },
   'useAttachmentCell',