feat(gui-v2): disable interaction on attachments for readonly state

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

@@ -17,6 +17,7 @@ const {
   isLoading,
   isPublicGrid,
   isForm,
+  isReadonly,
   visibleItems,
   modalVisible,
   column,
@@ -34,7 +35,7 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue)
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
@@ -49,7 +50,7 @@ onKeyDown('Escape', () => {
     <template #title>
       <div class="flex gap-4">
         <div
-          v-if="(isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
+          v-if="!isReadonly && (isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
           class="nc-attach-file group"
           @click="open"
         >
@@ -58,6 +59,7 @@ onKeyDown('Escape', () => {
         </div>
 
         <div class="flex items-center gap-2">
+          <div v-if="isReadonly" class="text-gray-400">[Readonly]</div>
           Viewing Attachments of
           <div class="font-semibold underline">{{ column.title }}</div>
         </div>
@@ -66,7 +68,7 @@ onKeyDown('Escape', () => {
 
     <div ref="dropZoneRef" :class="{ dragging }">
       <div
-        v-if="!dragging"
+        v-if="!isReadonly && !dragging"
         :class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
         class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-blue-100/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
       >
@@ -77,7 +79,7 @@ onKeyDown('Escape', () => {
       <div ref="sortableRef" 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-tooltip>
+            <a-tooltip v-if="!isReadonly">
               <template #title> Remove File </template>
 
               <MdiCloseCircle

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
 import Modal from './Modal.vue'
 import { useSortable } from './sort'
@@ -27,10 +28,10 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage } =
+const { modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
   useProvideAttachmentCell(updateModelValue)
 
-const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue)
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
@@ -51,13 +52,18 @@ function updateModelValue(data: string | Record<string, any>) {
 const selectImage = (file: any) => {
   selectedImage.value = file
 }
+
+onKeyDown('Escape', () => {
+  modalVisible.value = false
+  isOverDropZone.value = false
+})
 </script>
 
 <template>
   <div ref="dropZoneRef" class="nc-attachment-cell flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
-    <template v-if="!dragging && isOverDropZone">
+    <template v-if="!isReadonly && !dragging && isOverDropZone">
       <div
         class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
       >
@@ -67,6 +73,7 @@ const selectImage = (file: any) => {
 
     <template v-else>
       <div
+        v-if="!isReadonly"
         :class="{ 'mx-auto px-4': !visibleItems.length }"
         class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:bg-primary/10"
         @click.stop="open"

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

@@ -8,6 +8,7 @@ export function useSortable(
   element: MaybeRef<HTMLElement | undefined>,
   items: MaybeRef<any[]>,
   updateModelValue: (data: string | Record<string, any>[]) => void,
+  isReadonly: MaybeRef<boolean> = false,
 ) {
   let dragging = $ref(false)
 
@@ -54,7 +55,7 @@ export function useSortable(
       if (_element && sortable) sortable.destroy()
     })
 
-    if (_element) initSortable(_element)
+    if (_element && !unref(isReadonly)) initSortable(_element)
   })
 
   return {

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

@@ -1,7 +1,7 @@
 import { notification } from 'ant-design-vue'
 import FileSaver from 'file-saver'
 import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
-import { ColumnInj, EditModeInj, MetaInj } from '~/context'
+import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj } from '~/context'
 import { isImage } from '~/utils'
 import { NOCO } from '~/lib'
 import MdiPdfBox from '~icons/mdi/pdf-box'
@@ -12,6 +12,8 @@ import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
 
 export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
   (updateModelValue: (data: string | Record<string, any>[]) => void) => {
+    const isReadonly = inject(ReadonlyInj, false)
+
     const isPublicForm = inject('isPublicForm', false)
 
     const isForm = inject('isForm', false)
@@ -130,6 +132,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       isPublicForm,
       isForm,
       isPublicGrid,
+      isReadonly,
       meta,
       column,
       editEnabled,