From 6057ee687e65016db488505346162ce5bebfbcf2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 01:40:49 +0530
Subject: [PATCH] feat(gui-v2): make edit enabled toggle possible

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Text.vue   |   2 +-
 .../nc-gui-v2/components/cell/TextArea.vue    |   1 +
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  14 +-
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 192 +++++++++---------
 .../components/smartsheet/VirtualCell.vue     |   9 +-
 packages/nc-gui-v2/context/index.ts           |   2 +-
 6 files changed, 117 insertions(+), 103 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 2b530448d3..ccd0bca0c7 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -18,6 +18,6 @@ const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="h-full w-full outline-none" @blur="editEnabled = false" />
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index a6d50e9efc..c27933fe56 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -24,6 +24,7 @@ const focus = (el: HTMLTextAreaElement) => el?.focus()
     v-model="vModel"
     rows="4"
     class="h-full w-full min-h-[60px] outline-none"
+    @blur="editEnabled = false"
     @keydown.alt.enter.stop
     @keydown.shift.enter.stop
   />
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index b103ca1842..8fb5d05bf8 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -18,11 +18,21 @@ interface Emits {
 
 const { column, ...props } = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue', 'save', 'navigate'])
+const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'cancel'])
 
 provide(ColumnInj, column)
 
-provide(EditModeInj, toRef(props, 'editEnabled'))
+provide(
+  EditModeInj,
+  computed({
+    get() {
+      return props?.editEnabled
+    },
+    set() {
+      return emit('cancel')
+    },
+  }),
+)
 
 let changed = $ref(false)
 const syncValue = useDebounceFn(function () {
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index ecff0198e1..ad60b6d0fd 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -208,115 +208,117 @@ const onNavigate = (dir: NavigateDir) => {
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
-          <tr class="group">
-            <th>
-              <div class="flex align-center w-[80px]">
-                <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
-                <div
-                  :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                  class="group-hover:flex w-full align-center"
-                >
-                  <a-checkbox v-model:checked="selectedAllRecords" />
-                  <span class="flex-1" />
+            <tr class="group">
+              <th>
+                <div class="flex align-center w-[80px]">
+                  <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
+                  <div
+                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                    class="group-hover:flex w-full align-center"
+                  >
+                    <a-checkbox v-model:checked="selectedAllRecords" />
+                    <span class="flex-1" />
+                  </div>
                 </div>
-              </div>
-            </th>
-            <th
-              v-for="col in fields"
-              :key="col.title"
-              v-xc-ver-resize
-              :data-col="col.id"
-              @xcresize="onresize(col.id, $event)"
-              @xcresizing="onXcResizing(col.title, $event)"
-              @xcresized="resizingCol = null"
-            >
-              <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
-              <SmartsheetHeaderCell v-else :column="col" />
-            </th>
-            <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
-            <th v-t="['c:column:add']" @click="addColumnDropdown = true">
-              <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
-                <div class="h-full w-full flex align-center justify-center">
-                  <MdiPlusIcon class="text-sm" />
-                </div>
-                <template #overlay>
-                  <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
-                </template>
-              </a-dropdown>
-            </th>
-          </tr>
+              </th>
+              <th
+                v-for="col in fields"
+                :key="col.title"
+                v-xc-ver-resize
+                :data-col="col.id"
+                @xcresize="onresize(col.id, $event)"
+                @xcresizing="onXcResizing(col.title, $event)"
+                @xcresized="resizingCol = null"
+              >
+                <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+                <SmartsheetHeaderCell v-else :column="col" />
+              </th>
+              <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
+              <th v-t="['c:column:add']" @click="addColumnDropdown = true">
+                <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
+                  <div class="h-full w-full flex align-center justify-center">
+                    <MdiPlusIcon class="text-sm" />
+                  </div>
+                  <template #overlay>
+                    <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
+                  </template>
+                </a-dropdown>
+              </th>
+            </tr>
           </thead>
           <tbody>
-          <tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
-            <td key="row-index" class="caption nc-grid-cell">
-              <div class="align-center flex w-[80px]">
-                <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
-                <div
-                  :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                  class="group-hover:flex w-full align-center"
-                >
-                  <a-checkbox v-model:checked="row.rowMeta.selected" />
-                  <span class="flex-1" />
-                  <MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
+            <tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
+              <td key="row-index" class="caption nc-grid-cell">
+                <div class="align-center flex w-[80px]">
+                  <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                  <div
+                    :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                    class="group-hover:flex w-full align-center"
+                  >
+                    <a-checkbox v-model:checked="row.rowMeta.selected" />
+                    <span class="flex-1" />
+                    <MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
+                  </div>
                 </div>
-              </div>
-            </td>
-            <td
-              v-for="(columnObj, colIndex) in fields"
-              :key="rowIndex + columnObj.title"
-              class="cell pointer nc-grid-cell"
-              :class="{
+              </td>
+              <td
+                v-for="(columnObj, colIndex) in fields"
+                :key="rowIndex + columnObj.title"
+                class="cell pointer nc-grid-cell"
+                :class="{
                   active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
                 }"
-              :data-col="columnObj.id"
-              @click="selectCell(rowIndex, colIndex)"
-              @dblclick="editEnabled = true"
-              @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
-            >
-              <div class="w-full h-full">
-                <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]"
-                                       :column="columnObj"
-                                       @navigate="onNavigate"
-                />
+                :data-col="columnObj.id"
+                @click="selectCell(rowIndex, colIndex)"
+                @dblclick="editEnabled = true"
+                @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
+              >
+                <div class="w-full h-full">
+                  <SmartsheetVirtualCell
+                    v-if="isVirtualCol(columnObj)"
+                    v-model="row.row[columnObj.title]"
+                    :column="columnObj"
+                    @navigate="onNavigate"
+                  />
 
-                <SmartsheetCell
-                  v-else
-                  v-model="row.row[columnObj.title]"
-                  :column="columnObj"
-                  :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-                  @save="updateOrSaveRow(row, columnObj.title)"
-                  @navigate="onNavigate"
-                />
-              </div>
-            </td>
-          </tr>
+                  <SmartsheetCell
+                    v-else
+                    v-model="row.row[columnObj.title]"
+                    :column="columnObj"
+                    :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                    @save="updateOrSaveRow(row, columnObj.title)"
+                    @navigate="onNavigate"
+                    @cancel="editEnabled = false"
+                  />
+                </div>
+              </td>
+            </tr>
 
-          <tr v-if="!isLocked">
-            <td
-              v-t="['c:row:add:grid-bottom']"
-              :colspan="visibleColLength + 1"
-              class="text-left pointer nc-grid-add-new-cell"
-              @click="addEmptyRow()"
-            >
-              <a-tooltip top left>
-                <div class="w-min flex align-center">
-                  <MdiPlusIcon class="text-pint-500 text-xs" />
-                  <span class="ml-1 caption grey--text">
+            <tr v-if="!isLocked">
+              <td
+                v-t="['c:row:add:grid-bottom']"
+                :colspan="visibleColLength + 1"
+                class="text-left pointer nc-grid-add-new-cell"
+                @click="addEmptyRow()"
+              >
+                <a-tooltip top left>
+                  <div class="w-min flex align-center">
+                    <MdiPlusIcon class="text-pint-500 text-xs" />
+                    <span class="ml-1 caption grey--text">
                       {{ $t('activity.addRow') }}
                     </span>
-                </div>
-                <template #title>
-                  <span class="caption"> Add new row</span>
-                </template>
-              </a-tooltip>
-            </td>
-          </tr>
+                  </div>
+                  <template #title>
+                    <span class="caption"> Add new row</span>
+                  </template>
+                </a-tooltip>
+              </td>
+            </tr>
           </tbody>
         </table>
         <template #overlay>
           <div class="bg-white shadow" @click="contextMenu = false">
-            <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row
-            </div>
+            <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
             <div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
             <div v-if="contextMenuTarget" class="nc-menu-item" @click="clearCell(contextMenuTarget)">Clear cell</div>
             <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 5c03c952cf..8cb234b3c4 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -4,7 +4,6 @@ import { provide, useVirtualCell } from '#imports'
 import { ColumnInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
-
 interface Props {
   column: ColumnType
   modelValue: any
@@ -21,9 +20,11 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
 </script>
 
 <template>
-  <div class="nc-virtual-cell"
-       @keydown.stop.enter.exact="emit('navigate',NavigateDir.NEXT)"
-       @keydown.stop.shift.enter.exact="emit('navigate',NavigateDir.PREV)">
+  <div
+    class="nc-virtual-cell"
+    @keydown.stop.enter.exact="emit('navigate', NavigateDir.NEXT)"
+    @keydown.stop.shift.enter.exact="emit('navigate', NavigateDir.PREV)"
+  >
     <VirtualCellHasMany v-if="isHm" />
     <VirtualCellManyToMany v-else-if="isMm" />
     <VirtualCellBelongsTo v-else-if="isBt" />
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 809c3ee5cd..58aea722a6 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -21,4 +21,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
 
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
-export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
+export const EditModeInj: InjectionKey<ComputedRef<boolean>> = Symbol('edit-mode-injection')