From 48a1e36fafeda45ef2cc4e1fa40f8f36dae76800 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 12 Sep 2022 11:53:11 +0530
Subject: [PATCH] chore(gui): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/smartsheet/Cell.vue     |   3 +-
 .../nc-gui/components/smartsheet/Grid.vue     | 352 +++++++++---------
 packages/nc-gui/components/smartsheet/Row.vue |   2 +-
 .../smartsheet/expanded-form/index.vue        |   2 +-
 .../nc-gui/components/tabs/Smartsheet.vue     |   6 +-
 .../composables/useSmartsheetRowStore.ts      |   2 +-
 packages/nc-gui/composables/useViewData.ts    |  16 +-
 .../index/[type]/[title]/[[viewTitle]].vue    |   6 +-
 8 files changed, 194 insertions(+), 195 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 6fe1f0b035..90ee5826da 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -15,9 +15,9 @@ import {
   toRef,
   useColumn,
   useDebounceFn,
+  useSmartsheetRowStoreOrThrow,
   useVModel,
 } from '#imports'
-import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { NavigateDir } from '~/lib'
 
 interface Props {
@@ -65,7 +65,6 @@ const syncValue = useDebounceFn(function () {
   emit('save')
 }, 1000)
 
-
 const isAutoSaved = $computed(() => {
   return [
     UITypes.SingleLineText,
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index f8faa99b39..cf4dcaf6e8 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -248,35 +248,36 @@ const onKeyDown = async (e: KeyboardEvent) => {
       e.preventDefault()
       if (selected.row < data.value.length - 1) selected.row++
       break
-    default: {
-      const rowObj = data.value[selected.row]
-      const columnObj = fields.value[selected.col]
-
-      if ((!editEnabled && e.metaKey) || e.ctrlKey) {
-        switch (e.keyCode) {
-          // copy - ctrl/cmd +c
-          case 67:
-            await copy(rowObj.row[columnObj.title] || '')
-            break
+    default:
+      {
+        const rowObj = data.value[selected.row]
+        const columnObj = fields.value[selected.col]
+
+        if ((!editEnabled && e.metaKey) || e.ctrlKey) {
+          switch (e.keyCode) {
+            // copy - ctrl/cmd +c
+            case 67:
+              await copy(rowObj.row[columnObj.title] || '')
+              break
+          }
         }
-      }
-
-      if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
-        return
-      }
 
-      /** on letter key press make cell editable and empty */
-      if (e?.key?.length === 1) {
-        if (!isPkAvail && !rowObj.rowMeta.new) {
-          // Update not allowed for table which doesn't have primary Key
-          return message.info(t('msg.info.updateNotAllowedWithoutPK'))
+        if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
+          return
         }
-        if (makeEditable(rowObj, columnObj)) {
-          rowObj.row[columnObj.title] = ''
+
+        /** on letter key press make cell editable and empty */
+        if (e?.key?.length === 1) {
+          if (!isPkAvail && !rowObj.rowMeta.new) {
+            // Update not allowed for table which doesn't have primary Key
+            return message.info(t('msg.info.updateNotAllowedWithoutPK'))
+          }
+          if (makeEditable(rowObj, columnObj)) {
+            rowObj.row[columnObj.title] = ''
+          }
+          // editEnabled = true
         }
-        // editEnabled = true
       }
-    }
       break
   }
 }
@@ -326,16 +327,21 @@ const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) =
 
 const rowRefs = $ref<any[]>()
 
+/** save/update records before unmounting the component */
 onBeforeUnmount(async () => {
   console.log(rowRefs)
-  for (const [index, currentRow] of Object.entries(data.value)) {
+  let index = -1
+  for (const currentRow of data.value) {
+    index++
+    /** if new record save row and save the LTAR cells */
     if (currentRow.rowMeta.new) {
       const syncLTARRefs = rowRefs[index]!.syncLTARRefs
-      const savedRow = await updateOrSaveRow(currentRow, null)
+      const savedRow = await updateOrSaveRow(currentRow, '')
       await syncLTARRefs(savedRow)
       currentRow.rowMeta.changed = false
       continue
     }
+    /** if existing row check updated cell and invoke update method */
     if (currentRow.rowMeta.changed) {
       currentRow.rowMeta.changed = false
       for (const field of meta?.value.columns ?? []) {
@@ -347,7 +353,6 @@ onBeforeUnmount(async () => {
     }
   }
 })
-
 </script>
 
 <template>
@@ -363,88 +368,87 @@ onBeforeUnmount(async () => {
           @contextmenu="showContextMenu"
         >
           <thead>
-          <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">
-                <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 items-center"
-                  >
-                    <a-checkbox v-model:checked="selectedAllRecords" />
+            <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">
+                  <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 items-center"
+                    >
+                      <a-checkbox v-model:checked="selectedAllRecords" />
 
-                    <span class="flex-1" />
-                  </div>
-                </template>
-                <template v-else>
-                  <div class="text-gray-500">#</div>
-                </template>
-              </div>
-            </th>
-            <th
-              v-for="col in fields"
-              :key="col.title"
-              v-xc-ver-resize
-              :data-col="col.id"
-              :data-title="col.title"
-              @xcresize="onresize(col.id, $event)"
-              @xcresizing="onXcResizing(col.title, $event)"
-              @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" />
-
-                <SmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
-              </div>
-            </th>
-            <th
-              v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
-              v-t="['c:column:add']"
-              class="cursor-pointer"
-              @click.stop="addColumnDropdown = true"
-            >
-              <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
-                <div class="h-full w-[60px] flex items-center justify-center">
-                  <MdiPlus class="text-sm nc-column-add" />
+                      <span class="flex-1" />
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div class="text-gray-500">#</div>
+                  </template>
+                </div>
+              </th>
+              <th
+                v-for="col in fields"
+                :key="col.title"
+                v-xc-ver-resize
+                :data-col="col.id"
+                :data-title="col.title"
+                @xcresize="onresize(col.id, $event)"
+                @xcresizing="onXcResizing(col.title, $event)"
+                @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" />
+
+                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
                 </div>
+              </th>
+              <th
+                v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
+                v-t="['c:column:add']"
+                class="cursor-pointer"
+                @click.stop="addColumnDropdown = true"
+              >
+                <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
+                  <div class="h-full w-[60px] flex items-center justify-center">
+                    <MdiPlus class="text-sm nc-column-add" />
+                  </div>
 
-                <template #overlay>
-                  <SmartsheetColumnEditOrAddProvider
-                    v-if="addColumnDropdown"
-                    @submit="addColumnDropdown = false"
-                    @cancel="addColumnDropdown = false"
-                    @click.stop
-                    @keydown.stop
-                  />
-                </template>
-              </a-dropdown>
-            </th>
-          </tr>
+                  <template #overlay>
+                    <SmartsheetColumnEditOrAddProvider
+                      v-if="addColumnDropdown"
+                      @submit="addColumnDropdown = false"
+                      @cancel="addColumnDropdown = false"
+                      @click.stop
+                      @keydown.stop
+                    />
+                  </template>
+                </a-dropdown>
+              </th>
+            </tr>
           </thead>
           <tbody>
-          <SmartsheetRow ref="rowRefs" v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
-            <template #default="{ state }">
-              <tr class="nc-grid-row">
-                <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
-                  <div class="items-center flex gap-1 min-w-[55px]">
-                    <div
-                      v-if="!readOnly || !isLocked"
-                      class="nc-row-no text-xs text-gray-500"
-                      :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
-                    >
-                      {{ rowIndex + 1 }}
-                    </div>
-                    <div
-                      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 && !isLocked" class="nc-expand"
-                         :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+            <SmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
+              <template #default="{ state }">
+                <tr class="nc-grid-row">
+                  <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
+                    <div class="items-center flex gap-1 min-w-[55px]">
+                      <div
+                        v-if="!readOnly || !isLocked"
+                        class="nc-row-no text-xs text-gray-500"
+                        :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
+                      >
+                        {{ rowIndex + 1 }}
+                      </div>
+                      <div
+                        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 && !isLocked" 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)"
@@ -453,87 +457,87 @@ onBeforeUnmount(async () => {
                         >
                           {{ row.rowMeta.commentCount }}
                         </span>
-                      <div
-                        v-else
-                        class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
-                      >
-                        <MdiArrowExpand
-                          v-t="['c:row-expand']"
-                          class="select-none transform hover:(text-accent scale-120) nc-row-expand"
-                          @click="expandForm(row, state)"
-                        />
+                        <div
+                          v-else
+                          class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
+                        >
+                          <MdiArrowExpand
+                            v-t="['c:row-expand']"
+                            class="select-none transform hover:(text-accent scale-120) nc-row-expand"
+                            @click="expandForm(row, state)"
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </td>
-                <td
-                  v-for="(columnObj, colIndex) of fields"
-                  :ref="cellRefs.set"
-                  :key="columnObj.id"
-                  class="cell relative cursor-pointer nc-grid-cell"
-                  :class="{
+                  </td>
+                  <td
+                    v-for="(columnObj, colIndex) of fields"
+                    :ref="cellRefs.set"
+                    :key="columnObj.id"
+                    class="cell relative cursor-pointer nc-grid-cell"
+                    :class="{
                       active: isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex,
                     }"
-                  :data-key="rowIndex + columnObj.id"
-                  :data-col="columnObj.id"
-                  :data-title="columnObj.title"
-                  @click="selectCell(rowIndex, colIndex)"
-                  @dblclick="makeEditable(row, columnObj)"
-                  @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
-                >
-                  <div class="w-full h-full">
-                    <SmartsheetVirtualCell
-                      v-if="isVirtualCol(columnObj)"
-                      v-model="row.row[columnObj.title]"
-                      :column="columnObj"
-                      :active="selected.col === colIndex && selected.row === rowIndex"
-                      :row="row"
-                      @navigate="onNavigate"
-                    />
-
-                    <SmartsheetCell
-                      v-else
-                      v-model="row.row[columnObj.title]"
-                      :column="columnObj"
-                      :edit-enabled="
+                    :data-key="rowIndex + columnObj.id"
+                    :data-col="columnObj.id"
+                    :data-title="columnObj.title"
+                    @click="selectCell(rowIndex, colIndex)"
+                    @dblclick="makeEditable(row, columnObj)"
+                    @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
+                  >
+                    <div class="w-full h-full">
+                      <SmartsheetVirtualCell
+                        v-if="isVirtualCol(columnObj)"
+                        v-model="row.row[columnObj.title]"
+                        :column="columnObj"
+                        :active="selected.col === colIndex && selected.row === rowIndex"
+                        :row="row"
+                        @navigate="onNavigate"
+                      />
+
+                      <SmartsheetCell
+                        v-else
+                        v-model="row.row[columnObj.title]"
+                        :column="columnObj"
+                        :edit-enabled="
                           isUIAllowed('xcDatatableEditable') &&
                           editEnabled &&
                           selected.col === colIndex &&
                           selected.row === rowIndex
                         "
-                      :row-index="rowIndex"
-                      :active="selected.col === colIndex && selected.row === rowIndex"
-                      @update:edit-enabled="editEnabled = false"
-                      @save="updateOrSaveRow(row, columnObj.title)"
-                      @navigate="onNavigate"
-                      @cancel="editEnabled = false"
-                    />
-                  </div>
-                </td>
-              </tr>
-            </template>
-          </SmartsheetRow>
-
-          <!--
-    TODO: add relationType !== 'bt' ?
-    v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
-  -->
-          <tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable') && !isSqlView">
-            <td
-              v-t="['c:row:add:grid-bottom']"
-              :colspan="visibleColLength + 1"
-              class="text-left pointer nc-grid-add-new-cell cursor-pointer"
-              @click="addEmptyRow()"
-            >
-              <div class="px-2 w-full flex items-center text-gray-500">
-                <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
-
-                <span class="ml-1">
+                        :row-index="rowIndex"
+                        :active="selected.col === colIndex && selected.row === rowIndex"
+                        @update:edit-enabled="editEnabled = false"
+                        @save="updateOrSaveRow(row, columnObj.title)"
+                        @navigate="onNavigate"
+                        @cancel="editEnabled = false"
+                      />
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </SmartsheetRow>
+
+            <!--
+TODO: add relationType !== 'bt' ?
+v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
+-->
+            <tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable') && !isSqlView">
+              <td
+                v-t="['c:row:add:grid-bottom']"
+                :colspan="visibleColLength + 1"
+                class="text-left pointer nc-grid-add-new-cell cursor-pointer"
+                @click="addEmptyRow()"
+              >
+                <div class="px-2 w-full flex items-center text-gray-500">
+                  <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
+
+                  <span class="ml-1">
                     {{ $t('activity.addRow') }}
                   </span>
-              </div>
-            </td>
-          </tr>
+                </div>
+              </td>
+            </tr>
           </tbody>
         </table>
 
diff --git a/packages/nc-gui/components/smartsheet/Row.vue b/packages/nc-gui/components/smartsheet/Row.vue
index 055733b497..acfbbea0c8 100644
--- a/packages/nc-gui/components/smartsheet/Row.vue
+++ b/packages/nc-gui/components/smartsheet/Row.vue
@@ -35,7 +35,7 @@ reloadHook.on(() => {
 provide(ReloadRowDataHookInj, reloadHook)
 
 defineExpose({
-  syncLTARRefs
+  syncLTARRefs,
 })
 </script>
 
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 8243cfc9d9..0f4e69fc0b 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -6,11 +6,11 @@ import Cell from '../Cell.vue'
 import VirtualCell from '../VirtualCell.vue'
 import Comments from './Comments.vue'
 import Header from './Header.vue'
-import { ReloadRowDataHookInj } from '~/context'
 import {
   FieldsInj,
   IsFormInj,
   MetaInj,
+  ReloadRowDataHookInj,
   computedInject,
   provide,
   ref,
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index 4443b12bf1..cb6d4c9903 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -21,7 +21,6 @@ import {
 
 import type { TabItem } from '~/composables'
 
-
 const { activeTab } = defineProps<{
   activeTab: TabItem
 }>()
@@ -38,10 +37,7 @@ const fields = ref<ColumnType[]>([])
 //   TabMetaInj,
 //   computed(() => ({} as TabItem)),
 // )
-provide(
-  TabMetaInj,
-  ref(activeTab),
-)
+provide(TabMetaInj, ref(activeTab))
 const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
 
 const reloadEventHook = createEventHook<void>()
diff --git a/packages/nc-gui/composables/useSmartsheetRowStore.ts b/packages/nc-gui/composables/useSmartsheetRowStore.ts
index 191f578ca2..c337d2e2d6 100644
--- a/packages/nc-gui/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetRowStore.ts
@@ -134,7 +134,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
     removeLTARRef,
     syncLTARRefs,
     loadRow,
-    currentRow
+    currentRow,
   }
 }, 'smartsheet-row-store')
 
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index dc7a39aeea..c9422d59bc 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -166,12 +166,12 @@ export function useViewData(
     if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
     const response = !isPublic.value
       ? await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, {
-        ...queryParams.value,
-        ...params,
-        ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
-        ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
-        where: where?.value,
-      })
+          ...queryParams.value,
+          ...params,
+          ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
+          ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
+          where: where?.value,
+        })
       : await fetchSharedViewData()
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
@@ -251,11 +251,11 @@ export function useViewData(
     }
   }
 
-  async function updateOrSaveRow(row: Row, property: string) {
+  async function updateOrSaveRow(row: Row, property?: string) {
     if (row.rowMeta.new) {
       return await insertRow(row.row, formattedData.value.indexOf(row))
     } else {
-      await updateRowProperty(row, property)
+      await updateRowProperty(row, property!)
     }
   }
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
index ce973167a6..ee6297069c 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TabItem } from '~/composables'
-import { TabMetaInj } from '~/context'
+import type { TabItem } from '~/composables'
+import { TabMetaInj } from '#imports'
 
 const { getMeta } = useMetas()
 const route = useRoute()
@@ -20,7 +20,7 @@ getMeta(route.params.title as string, true).finally(() => {
   <div v-if="loading" class="flex items-center justify-center h-full w-full">
     <a-spin size="large" />
   </div>
-  <TabsSmartsheet :active-tab="activeTab" :key="route.params.title" v-else />
+  <TabsSmartsheet v-else :key="route.params.title" :active-tab="activeTab" />
 </template>
 
 <style scoped></style>