fix(gui-v2): shared form - attachment show remove icon

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

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

@@ -10,7 +10,6 @@ const {
   open,
   isLoading,
   isPublicGrid,
-  isForm,
   isReadonly,
   visibleItems,
   modalVisible,
@@ -34,6 +33,8 @@ const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, is
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
+const { isSharedForm } = useSmartsheetStoreOrThrow()
+
 onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
@@ -61,7 +62,7 @@ function onClick(item: Record<string, any>) {
     <template #title>
       <div class="flex gap-4">
         <div
-          v-if="!isReadonly && (isForm || isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
+          v-if="isSharedForm || (!isReadonly && isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
           class="nc-attach-file group"
           @click="open"
         >
@@ -78,7 +79,7 @@ function onClick(item: Record<string, any>) {
     </template>
 
     <div ref="dropZoneRef">
-      <template v-if="!isReadonly && !dragging">
+      <template v-if="isSharedForm || (!isReadonly && !dragging)">
         <general-overlay
           v-model="isOverDropZone"
           inline
@@ -94,9 +95,8 @@ function onClick(item: Record<string, any>) {
           <a-card class="nc-attachment-item group">
             <a-tooltip v-if="!isReadonly">
               <template #title> Remove File </template>
-
               <MdiCloseCircle
-                v-if="isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
+                v-if="isSharedForm || (isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
                 class="nc-attachment-remove"
                 @click.stop="removeFile(i)"
               />

packages/nc-gui-v2/components/shared-view/Form.vue

@@ -23,7 +23,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     columnObj.colOptions &&
     columnObj.colOptions.type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = formColumns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
+    columnObj = formColumns.value?.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
       string,
       any
     >

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

@@ -3,53 +3,58 @@ import type { TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
 
-const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
-  const { $api } = useNuxtApp()
-  const { sqlUi } = useProject()
-
-  const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
-
-  // state
-  // todo: move to grid view store
-  const search = reactive({
-    field: '',
-    query: '',
-  })
-
-  // getters
-  const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
-  const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
-  const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
-  const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
-  const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
-  const xWhere = computed(() => {
-    let where
-    const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
-    if (!col) return
-
-    if (!search.query.trim()) return
-    if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
-      where = `(${col.title},like,%${search.query.trim()}%)`
-    } else {
-      where = `(${col.title},eq,${search.query.trim()})`
+const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
+  (view: Ref<ViewType>, meta: Ref<TableType>, shared = false) => {
+    const { $api } = useNuxtApp()
+    const { sqlUi } = useProject()
+
+    const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
+
+    // state
+    // todo: move to grid view store
+    const search = reactive({
+      field: '',
+      query: '',
+    })
+
+    // getters
+    const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
+    const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
+    const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
+    const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
+    const isSharedForm = computed(() => isForm?.value && shared)
+    const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
+    const xWhere = computed(() => {
+      let where
+      const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
+      if (!col) return
+
+      if (!search.query.trim()) return
+      if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
+        where = `(${col.title},like,%${search.query.trim()}%)`
+      } else {
+        where = `(${col.title},eq,${search.query.trim()})`
+      }
+      return where
+    })
+
+    return {
+      view,
+      meta,
+      isLocked,
+      $api,
+      search,
+      xWhere,
+      isPkAvail,
+      isForm,
+      isGrid,
+      isGallery,
+      cellRefs,
+      isSharedForm,
     }
-    return where
-  })
-
-  return {
-    view,
-    meta,
-    isLocked,
-    $api,
-    search,
-    xWhere,
-    isPkAvail,
-    isForm,
-    isGrid,
-    isGallery,
-    cellRefs,
-  }
-}, 'smartsheet-store')
+  },
+  'smartsheet-store',
+)
 
 export { useProvideSmartsheetStore }
 

packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue

@@ -22,7 +22,7 @@ if (!notFound.value) {
   provide(IsPublicInj, ref(true))
   provide(IsFormInj, ref(true))
 
-  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta as Ref<TableType>)
+  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta as Ref<TableType>, true)
 }
 </script>