From 5a1ef4ef084876fb231da86686dcd897ee5e660d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 17 Aug 2022 17:10:43 +0530
Subject: [PATCH] fix/Fixed field hiding and improved typing in useViewColumn

---
 .../smartsheet-toolbar/FieldsMenu.vue         |  4 +-
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 41 ++++++++------
 .../nc-gui-v2/composables/useViewColumns.ts   | 55 ++++++++-----------
 packages/nc-gui-v2/lib/types.ts               |  8 +++
 4 files changed, 58 insertions(+), 50 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 1711cabe32..8212bb7ab7 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -89,9 +89,9 @@ const onMove = (event: { moved: { newIndex: number } }) => {
         </div>
         <div class="nc-fields-list py-1">
           <Draggable :list="fields" item-key="id" @change="onMove($event)">
-            <template #item="{ element: field }">
+            <template #item="{ element: field, index: index }">
               <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
-                <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, i)">
+                <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, index)">
                   <span class="">{{ field.title }}</span>
                 </a-checkbox>
                 <div class="flex-1" />
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 38794c95b5..912e90c5f3 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -41,7 +41,7 @@ const isPublicView = inject(IsPublicInj, ref(false))
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
-const readonly = inject(ReadonlyInj, ref(false))
+const readOnly = inject(ReadonlyInj, false)
 const isLocked = inject(IsLockedInj, false)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
@@ -63,7 +63,7 @@ const _contextMenu = ref(false)
 const contextMenu = computed({
   get: () => _contextMenu.value,
   set: (val) => {
-    if (!readonly) {
+    if (!readOnly) {
       _contextMenu.value = val
     }
   },
@@ -310,15 +310,20 @@ const expandForm = (row: Row, state: Record<string, any>) => {
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>
                 <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center">
-                  <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
-                  <div
-                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                    class="nc-check-all w-full align-center"
-                  >
-                    <a-checkbox v-model:checked="selectedAllRecords" />
+                  <template v-if="!readOnly">
+                    <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
+                    <div
+                      :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                      class="nc-check-all w-full align-center"
+                    >
+                      <a-checkbox v-model:checked="selectedAllRecords" />
 
-                    <span class="flex-1" />
-                  </div>
+                      <span class="flex-1" />
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div class="text-gray-500">#</div>
+                  </template>
                 </div>
               </th>
               <th
@@ -332,14 +337,13 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 @xcresized="resizingCol = null"
               >
                 <div class="w-full h-full bg-gray-100 flex items-center">
-                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readonly" />
+                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
 
-                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="readonly" />
+                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
                 </div>
               </th>
-              <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
               <th
-                v-if="!readonly && isUIAllowed('add-column')"
+                v-if="!readOnly && isUIAllowed('add-column')"
                 v-t="['c:column:add']"
                 class="cursor-pointer"
                 @click.stop="addColumnDropdown = true"
@@ -368,18 +372,21 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
                     <div class="align-center flex gap-1 min-w-[55px]">
-                      <div v-if="!readonly" class="nc-row-no text-xs text-gray-500" :class="{ hidden: row.rowMeta.selected }">
+                      <div v-if="!readOnly" class="nc-row-no text-xs text-gray-500" :class="{ hidden: row.rowMeta.selected }">
+                        {{ rowIndex + 1 }}
+                      </div>
+                      <div v-else class="text-xs text-gray-500">
                         {{ rowIndex + 1 }}
                       </div>
                       <div
-                        v-if="!readonly"
+                        v-if="!readOnly"
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"
                       >
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
                       </div>
                       <span class="flex-1" />
-                      <div v-if="!readonly" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                      <div v-if="!readOnly" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
                           class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index c775d36dc3..f1588df161 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -4,18 +4,11 @@ import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
 import { IsPublicInj } from '#imports'
+import type { Field } from '~/lib'
 
 export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
   const isPublic = inject(IsPublicInj, ref(false))
-  const fields = ref<
-    {
-      order: number
-      show: number | boolean
-      title: string
-      fk_column_id?: string
-      system?: boolean
-    }[]
-  >()
+  const fields = ref<Field[]>()
 
   const filterQuery = ref('')
 
@@ -39,7 +32,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
         }
       }, {})
       fields.value = meta.value?.columns
-        ?.map((column) => {
+        ?.map((column: ColumnType) => {
           const currentColumnField = fieldById[column.id!] || {}
 
           return {
@@ -50,13 +43,13 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
             system: isSystemColumn(currentColumnField.type || false),
           }
         })
-        .sort((a, b) => a.order - b.order)
+        .sort((a: Field, b: Field) => a.order - b.order)
     }
   }
 
   const showAll = async (ignoreIds?: any) => {
     if (isPublic.value) {
-      fields.value = fields.value?.map((field) => ({
+      fields.value = fields.value?.map((field: Field) => ({
         ...field,
         show: true,
       }))
@@ -79,7 +72,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   }
   const hideAll = async (ignoreIds?: any) => {
     if (isPublic.value) {
-      fields.value = fields.value?.map((field) => ({
+      fields.value = fields.value?.map((field: Field) => ({
         ...field,
         show: false,
       }))
@@ -101,9 +94,9 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
-    if (isPublic && fields.value) {
+    if (isPublic.value && fields.value) {
       fields.value[index] = field
-      meta.value.columns = meta.value?.columns?.map((column) => {
+      meta.value.columns = meta.value?.columns?.map((column: ColumnType) => {
         if (column.id === field.fk_column_id) {
           return {
             ...column,
@@ -128,16 +121,16 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     reloadData?.()
   }
 
-  const metaColumnById = computed(() => {
-    return (
-      meta.value?.columns?.reduce<Record<string, ColumnType>>((acc, curr) => {
-        return {
+  const metaColumnById = computed<Record<string, ColumnType>>(
+    () =>
+      meta.value?.columns?.reduce(
+        (acc: ColumnType, curr: ColumnType) => ({
           ...acc,
           [curr.id!]: curr,
-        }
-      }, {}) || {}
-    )
-  })
+        }),
+        {},
+      ) || {},
+  )
 
   const showSystemFields = computed({
     get() {
@@ -160,33 +153,33 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
 
   const filteredFieldList = computed(() => {
     return (
-      fields.value?.filter((field) => {
+      fields.value?.filter((field: Field) => {
         // hide system columns if not enabled
         if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) {
           return false
         }
 
         return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
-      }) || {}
+      }) || []
     )
   })
 
   const sortedAndFilteredFields = computed<ColumnType[]>(() => {
     return (fields?.value
-      ?.filter((c) => {
+      ?.filter((field: Field) => {
         // hide system columns if not enabled
         if (
           !showSystemFields.value &&
           metaColumnById.value &&
-          metaColumnById?.value?.[c.fk_column_id!] &&
-          isSystemColumn(metaColumnById.value?.[c.fk_column_id!])
+          metaColumnById?.value?.[field.fk_column_id!] &&
+          isSystemColumn(metaColumnById.value?.[field.fk_column_id!])
         ) {
           return false
         }
-        return c.show && metaColumnById?.value?.[c.fk_column_id!]
+        return field.show && metaColumnById?.value?.[field.fk_column_id!]
       })
-      ?.sort((a, b) => a.order - b.order)
-      ?.map((c) => metaColumnById?.value?.[c.fk_column_id!]) || []) as ColumnType[]
+      ?.sort((a: Field, b: Field) => a.order - b.order)
+      ?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[]
   })
 
   // reload view columns when table meta changes
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index 7b006d67f7..b0ce7a09ee 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -21,6 +21,14 @@ export interface ProjectMetaInfo {
   PackageVersion?: string
 }
 
+export interface Field {
+  order: number
+  show: number | boolean
+  title: string
+  fk_column_id?: string
+  system?: boolean
+}
+
 export type Roles = Record<Role, boolean>
 
 export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }