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

<script lang="ts" setup>
import { onKeyDown } from '@vueuse/core'
import FileSaver from 'file-saver'
import { useAttachmentCell } from './utils'
import { ref, useUIPermission } from '#imports'
import { isImage, openLink } from '~/utils'
import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
import MdiCloseCircle from '~icons/mdi/close-circle'
import MdiDownload from '~icons/mdi/download'
import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'

const { isUIAllowed } = useUIPermission()

const { open, isLoading, isPublicGrid, isForm, visibleItems, modalVisible, column, FileIcon, removeFile } = useAttachmentCell()

// todo: replace placeholder var
const isLocked = ref(false)

onKeyDown('Escape', () => (modalVisible.value = false))

async function downloadFile(item: Record<string, any>) {
  FileSaver.saveAs(item.url || item.data, item.title)
}
</script>

<template>
  <a-modal v-model:visible="modalVisible" width="80%" :footer="null">
    <template #title>
      <div class="flex gap-4">
        <div
          v-if="(isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
          class="nc-attach-file group"
          @click="open"
        >
          <MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
          Attach File
        </div>

        <div class="flex items-center gap-2">
          Viewing Attachments of
          <div class="font-semibold underline">{{ column.title }}</div>
        </div>
      </div>
    </template>

    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-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-tooltip>
            <template #title> Remove File </template>

            <MdiCloseCircle
              v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
              class="nc-attachment-remove"
              @click.stop="removeFile(i)"
            />
          </a-tooltip>

          <a-tooltip placement="bottom">
            <template #title> Download file </template>

            <div class="nc-attachment-download">
              <MdiDownload @click.stop="downloadFile(item)" />
            </div>
          </a-tooltip>

          <div class="p-2 flex items-center cursor-pointer">
            <img v-if="isImage(item.title, item.mimetype)" :alt="item.title || `#${i}`" :src="item.url || item.data" />

            <component
              :is="FileIcon(item.icon)"
              v-else-if="item.icon"
              height="150"
              width="150"
              @click.stop="openLink(item.url || item.data)"
            />

            <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(item.url || item.data)" />
          </div>
        </a-card>

        <div class="truncate" :title="item.title">
          {{ item.title }}
        </div>
      </div>
    </div>
  </a-modal>
</template>

<style lang="scss" scoped>
.nc-attach-file {
  @apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
  @apply hover:(bg-primary/10 text-primary ring);
  @apply active:(ring-pink-500 bg-primary/20);
}

.nc-attachment-item {
  @apply cursor-pointer !h-2/3 !min-h-[200px] flex items-center justify-center relative;

  &::after {
    @apply pointer-events-none rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
    content: '';
  }

  &:hover::after {
    @apply ring shadow transform scale-103;
  }

  &:active::after {
    @apply ring ring-pink-500 shadow transform scale-103;
  }
}

.nc-attachment-download {
  @apply absolute bottom-2 right-2;
  @apply transition-opacity duration-150 ease-in opacity-0 group-hover:(opacity-100) hover:ring;
  @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
  @apply active:(ring border-0 ring-pink-500);
}

.nc-attachment-remove {
  @apply absolute top-2 right-2;
  @apply hover:(ring ring-red-500);
  @apply cursor-pointer rounded-full border-1;
  @apply active:(ring border-0 ring-red-500);
}

:deep(.ant-card-body) {
  @apply !p-2;
}
</style>