From 67728624e2c41d3450b1641bef8b031e520ef032 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 23 Aug 2022 09:35:57 +0200
Subject: [PATCH] fix(gui-v2): attachments not loading in shared view

---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../components/cell/attachment/index.vue      |  4 +-
 .../components/cell/attachment/utils.ts       | 27 +++++++++----
 .../components/general/HelpAndSupport.vue     |  1 +
 .../smartsheet-toolbar/SortListMenu.vue       | 39 +++++++++++--------
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  5 ++-
 6 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 9b0fa75f45..79e596ccda 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -202,6 +202,7 @@ declare module '@vue/runtime-core' {
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
+    MdiSort: typeof import('~icons/mdi/sort')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
     MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 2d21896300..e1981a915f 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -61,7 +61,8 @@ watch(
     if (nextModel) {
       try {
         attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
-      } catch {
+      } catch (e) {
+        console.error(e)
         attachments.value = []
       }
     }
@@ -124,6 +125,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         </div>
       </a-tooltip>
     </div>
+    <div v-else class="flex" />
 
     <template v-if="visibleItems.length">
       <div
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index d547633bd1..624227aa07 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -1,9 +1,22 @@
 import { message } from 'ant-design-vue'
 import FileSaver from 'file-saver'
-import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
-import { ColumnInj, EditModeInj, IsPublicInj, MetaInj, ReadonlyInj } from '~/context'
-import { isImage } from '~/utils'
-import { NOCO } from '~/lib'
+import {
+  ColumnInj,
+  EditModeInj,
+  IsPublicInj,
+  MetaInj,
+  NOCO,
+  ReadonlyInj,
+  computed,
+  inject,
+  isImage,
+  ref,
+  useApi,
+  useFileDialog,
+  useInjectionState,
+  useProject,
+  watch,
+} from '#imports'
 import MdiPdfBox from '~icons/mdi/pdf-box'
 import MdiFileWordOutline from '~icons/mdi/file-word-outline'
 import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
@@ -22,8 +35,6 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const isPublic = inject(IsPublicInj, ref(false))
 
-    const isForm = inject('isForm', false)
-
     // todo: replace placeholder var
     const isPublicGrid = $ref(false)
 
@@ -60,6 +71,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         updateModelValue(storedFilesData.value.map((storedFile) => storedFile.file))
       } else {
         attachments.value.splice(i, 1)
+
         updateModelValue(attachments.value)
       }
     }
@@ -149,7 +161,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     }
 
     /** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
-    const visibleItems = computed<any[]>(() => (isPublic.value ? storedFilesData.value : attachments.value) || ([] as any[]))
+    const visibleItems = computed<any[]>(() => [...attachments.value, ...storedFiles.value])
 
     watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
 
@@ -158,7 +170,6 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       storedFilesData,
       visibleItems,
       isPublic,
-      isForm,
       isPublicGrid,
       isReadonly,
       meta,
diff --git a/packages/nc-gui-v2/components/general/HelpAndSupport.vue b/packages/nc-gui-v2/components/general/HelpAndSupport.vue
index a5e414c7d4..6477d5322d 100644
--- a/packages/nc-gui-v2/components/general/HelpAndSupport.vue
+++ b/packages/nc-gui-v2/components/general/HelpAndSupport.vue
@@ -25,6 +25,7 @@ const openSwaggerLink = () => {
   </div>
 
   <a-drawer
+    v-bind="$attrs"
     v-model:visible="showDrawer"
     class="h-full relative"
     placement="right"
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index b91c78f768..704f21c48a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -1,27 +1,34 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
-import { getSortDirectionOptions } from '~/utils/sortUtils'
-import { computed, inject, useViewSorts } from '#imports'
-import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
-import MdiMenuDownIcon from '~icons/mdi/menu-down'
-import MdiSortIcon from '~icons/mdi/sort'
-import MdiDeleteIcon from '~icons/mdi/close-box'
-import MdiAddIcon from '~icons/mdi/plus'
+import {
+  ActiveViewInj,
+  IsLockedInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  computed,
+  getSortDirectionOptions,
+  inject,
+  ref,
+  useViewSorts,
+  watch,
+} from '#imports'
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
-const isLocked = inject(IsLockedInj)
+const isLocked = inject(IsLockedInj, ref(false))
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { sorts, saveOrUpdate, loadSorts, addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
 
 const columns = computed(() => meta?.value?.columns || [])
-const columnByID = computed<Record<string, ColumnType>>(() =>
-  columns?.value?.reduce((obj: any, col: any) => {
-    obj[col.id] = col
+
+const columnByID = computed(() =>
+  columns.value.reduce((obj, col) => {
+    obj[col.id!] = col
+
     return obj
-  }, {}),
+  }, {} as Record<string, ColumnType>),
 )
 
 watch(
@@ -38,10 +45,10 @@ watch(
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-t="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
         ><div class="flex items-center gap-1">
-          <MdiSortIcon />
+          <MdiSort />
           <!-- Sort -->
           <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.sort') }}</span>
-          <MdiMenuDownIcon class="text-grey" />
+          <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
     </div>
@@ -49,7 +56,7 @@ watch(
       <div class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto !border">
         <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
           <template v-for="(sort, i) in sorts || []" :key="i">
-            <MdiDeleteIcon class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
+            <MdiCloseBox class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
 
             <FieldListAutoCompleteDropdown
               v-model="sort.fk_column_id"
@@ -79,7 +86,7 @@ watch(
         </div>
         <a-button class="text-capitalize mb-1 mt-4" type="primary" ghost @click.stop="addSort">
           <div class="flex gap-1 items-center">
-            <MdiAddIcon />
+            <MdiPlus />
             <!-- Add Sort Option -->
             {{ $t('activity.addSort') }}
           </div>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 7852cfd50f..a5db17b0b0 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -15,6 +15,7 @@ import {
   PaginationDataInj,
   ReadonlyInj,
   ReloadViewDataHookInj,
+  createEventHook,
   enumColor,
   inject,
   onClickOutside,
@@ -44,8 +45,8 @@ const fields = inject(FieldsInj, ref([]))
 const readOnly = inject(ReadonlyInj, false)
 const isLocked = inject(IsLockedInj, ref(false))
 
-const reloadViewDataHook = inject(ReloadViewDataHookInj)
-const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)
+const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
+const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
 const { isUIAllowed } = useUIPermission()