From 15f4d5f399eabbae050b683d5a8326b66da68474 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 23 Nov 2023 07:02:55 +0000
Subject: [PATCH] fix: Made fields editor integrated with locked mode

---
 .../smartsheet/column/EditOrAdd.vue           | 114 ++++++++++--------
 .../components/smartsheet/details/Fields.vue  |  89 +++++++++-----
 2 files changed, 124 insertions(+), 79 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 796373a6cc..9eb7a391a3 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -37,6 +37,7 @@ const props = defineProps<{
   hideType?: boolean
   hideAdditionalOptions?: boolean
   fromTableExplorer?: boolean
+  readonly?: boolean
 }>()
 
 const emit = defineEmits(['submit', 'cancel', 'mounted', 'add', 'update'])
@@ -66,6 +67,8 @@ const isForm = inject(IsFormInj, ref(false))
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
+const readOnly = computed(() => props.readonly)
+
 const { isMysql, isMssql, isXcdbBase } = useBase()
 
 const reloadDataTrigger = inject(ReloadViewDataHookInj)
@@ -114,6 +117,8 @@ const reloadMetaAndData = async () => {
 const saving = ref(false)
 
 async function onSubmit() {
+  if (readOnly.value) return
+
   saving.value = true
   const saved = await addOrUpdate(reloadMetaAndData, props.columnPosition)
   saving.value = false
@@ -134,7 +139,7 @@ async function onSubmit() {
 // focus and select the column name field
 const antInput = ref()
 watchEffect(() => {
-  if (antInput.value && formState.value) {
+  if (antInput.value && formState.value && !readOnly.value) {
     // todo: replace setTimeout
     setTimeout(() => {
       // focus and select input only if active element is not an input or textarea
@@ -232,6 +237,7 @@ if (props.fromTableExplorer) {
             <input
               ref="antInput"
               v-model="formState.title"
+              :disabled="readOnly"
               class="flex flex-grow nc-fields-input text-lg font-bold outline-none bg-inherit"
               :contenteditable="true"
             />
@@ -247,7 +253,7 @@ if (props.fromTableExplorer) {
             ref="antInput"
             v-model:value="formState.title"
             class="nc-column-name-input !rounded !mt-1"
-            :disabled="isKanban"
+            :disabled="isKanban || readOnly"
             @input="onAlter(8)"
           />
         </a-form-item>
@@ -263,7 +269,7 @@ if (props.fromTableExplorer) {
               v-model:value="formState.uidt"
               show-search
               class="nc-column-type-input !rounded"
-              :disabled="isKanban"
+              :disabled="isKanban || readOnly"
               dropdown-class-name="nc-dropdown-column-type "
               @change="onUidtOrIdTypeChange"
               @dblclick="showDeprecated = !showDeprecated"
@@ -285,28 +291,30 @@ if (props.fromTableExplorer) {
           </div> -->
         </div>
 
-        <LazySmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" v-model:value="formState" />
-        <LazySmartsheetColumnQrCodeOptions v-if="formState.uidt === UITypes.QrCode" v-model="formState" />
-        <LazySmartsheetColumnBarcodeOptions v-if="formState.uidt === UITypes.Barcode" v-model="formState" />
-        <LazySmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" v-model:value="formState" />
-        <LazySmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" />
-        <LazySmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" />
-        <LazySmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" v-model:value="formState" />
-        <LazySmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" v-model:value="formState" />
-        <LazySmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" v-model:value="formState" />
-        <LazySmartsheetColumnDecimalOptions v-if="formState.uidt === UITypes.Decimal" v-model:value="formState" />
-        <LazySmartsheetColumnDateTimeOptions v-if="formState.uidt === UITypes.DateTime" v-model:value="formState" />
-        <LazySmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" v-model:value="formState" />
-        <LazySmartsheetColumnLinkedToAnotherRecordOptions
-          v-if="!isEdit && (formState.uidt === UITypes.LinkToAnotherRecord || formState.uidt === UITypes.Links)"
-          v-model:value="formState"
-        />
-        <LazySmartsheetColumnLinkOptions v-if="isEdit && formState.uidt === UITypes.Links" v-model:value="formState" />
-        <LazySmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
-        <SmartsheetColumnSelectOptions
-          v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect"
-          v-model:value="formState"
-        />
+        <template v-if="!readOnly">
+          <LazySmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" v-model:value="formState" />
+          <LazySmartsheetColumnQrCodeOptions v-if="formState.uidt === UITypes.QrCode" v-model="formState" />
+          <LazySmartsheetColumnBarcodeOptions v-if="formState.uidt === UITypes.Barcode" v-model="formState" />
+          <LazySmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" v-model:value="formState" />
+          <LazySmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" />
+          <LazySmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" />
+          <LazySmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" v-model:value="formState" />
+          <LazySmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" v-model:value="formState" />
+          <LazySmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" v-model:value="formState" />
+          <LazySmartsheetColumnDecimalOptions v-if="formState.uidt === UITypes.Decimal" v-model:value="formState" />
+          <LazySmartsheetColumnDateTimeOptions v-if="formState.uidt === UITypes.DateTime" v-model:value="formState" />
+          <LazySmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" v-model:value="formState" />
+          <LazySmartsheetColumnLinkedToAnotherRecordOptions
+            v-if="!isEdit && (formState.uidt === UITypes.LinkToAnotherRecord || formState.uidt === UITypes.Links)"
+            v-model:value="formState"
+          />
+          <LazySmartsheetColumnLinkOptions v-if="isEdit && formState.uidt === UITypes.Links" v-model:value="formState" />
+          <LazySmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
+          <SmartsheetColumnSelectOptions
+            v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect"
+            v-model:value="formState"
+          />
+        </template>
       </div>
       <a-checkbox
         v-if="formState.meta && columnToValidate.includes(formState.uidt)"
@@ -317,41 +325,43 @@ if (props.fromTableExplorer) {
           {{ `${$t('msg.acceptOnlyValid')} ${formState.uidt}` }}
         </span>
       </a-checkbox>
-      <div class="!my-3">
-        <!--
-        Default Value for JSON & LongText is not supported in MySQL
-         Default Value is Disabled for MSSQL -->
-        <LazySmartsheetColumnDefaultValue
-          v-if="
+      <template v-if="!readOnly">
+        <div class="!my-3">
+          <!--
+            Default Value for JSON & LongText is not supported in MySQL
+            Default Value is Disabled for MSSQL -->
+          <LazySmartsheetColumnDefaultValue
+            v-if="
           !isVirtualCol(formState) &&
           !isAttachment(formState) &&
           !isMssql(meta!.source_id) &&
           !(isMysql(meta!.source_id) && (isJSON(formState) || isTextArea(formState)))
           "
-          v-model:value="formState"
-        />
-      </div>
-
-      <div
-        v-if="!props.hideAdditionalOptions && !isVirtualCol(formState.uidt) && (!appInfo.ee || (appInfo.ee && !isXcdbBase(meta!.source_id) && formState.uidt === UITypes.SpecificDBType))"
-        class="text-xs cursor-pointer text-gray-400 nc-more-options mb-1 mt-4 flex items-center gap-1 justify-end"
-        @click="advancedOptions = !advancedOptions"
-      >
-        {{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
-        <component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
-      </div>
-
-      <Transition name="layout" mode="out-in">
-        <div v-if="advancedOptions" class="overflow-hidden">
-          <LazySmartsheetColumnAttachmentOptions v-if="appInfo.ee && isAttachment(formState)" v-model:value="formState" />
-
-          <LazySmartsheetColumnAdvancedOptions
-            v-if="formState.uidt !== UITypes.Attachment"
             v-model:value="formState"
-            :advanced-db-options="advancedOptions || formState.uidt === UITypes.SpecificDBType"
           />
         </div>
-      </Transition>
+
+        <div
+          v-if="!props.hideAdditionalOptions && !isVirtualCol(formState.uidt) && (!appInfo.ee || (appInfo.ee && !isXcdbBase(meta!.source_id) && formState.uidt === UITypes.SpecificDBType))"
+          class="text-xs cursor-pointer text-gray-400 nc-more-options mb-1 mt-4 flex items-center gap-1 justify-end"
+          @click="advancedOptions = !advancedOptions"
+        >
+          {{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
+          <component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
+        </div>
+
+        <Transition name="layout" mode="out-in">
+          <div v-if="advancedOptions" class="overflow-hidden">
+            <LazySmartsheetColumnAttachmentOptions v-if="appInfo.ee && isAttachment(formState)" v-model:value="formState" />
+
+            <LazySmartsheetColumnAdvancedOptions
+              v-if="formState.uidt !== UITypes.Attachment"
+              v-model:value="formState"
+              :advanced-db-options="advancedOptions || formState.uidt === UITypes.SpecificDBType"
+            />
+          </div>
+        </Transition>
+      </template>
 
       <template v-if="props.fromTableExplorer">
         <a-form-item></a-form-item>
diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 489272e0e8..ac3f2ce25f 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -40,6 +40,8 @@ const { getMeta } = useMetas()
 
 const { meta, view } = useSmartsheetStoreOrThrow()
 
+const isLocked = inject(IsLockedInj, ref(false))
+
 const { openedViewsTab } = storeToRefs(useViewsStore())
 
 const moveOps = ref<moveOp[]>([])
@@ -587,6 +589,8 @@ const toggleVisibility = async (checked: boolean, field: Field) => {
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
 
+  if (isLocked.value) return
+
   if (cmdOrCtrl && e.key.toLowerCase() === 's') {
     if (openedViewsTab.value !== 'field') return
     e.preventDefault()
@@ -625,7 +629,11 @@ onKeyDown('ArrowUp', () => {
 })
 
 onKeyDown('Delete', () => {
+  if (isLocked.value) return
+
+  if (document.activeElement?.tagName === 'INPUT') return
   if (document.activeElement?.tagName === 'TEXTAREA') return
+
   const isDeletedField = fieldStatus(activeField.value) === 'delete'
   if (!isDeletedField && activeField.value) {
     onFieldDelete(activeField.value)
@@ -633,7 +641,11 @@ onKeyDown('Delete', () => {
 })
 
 onKeyDown('Backspace', () => {
+  if (isLocked.value) return
+
+  if (document.activeElement?.tagName === 'INPUT') return
   if (document.activeElement?.tagName === 'TEXTAREA') return
+
   const isDeletedField = fieldStatus(activeField.value) === 'delete'
   if (!isDeletedField && activeField.value) {
     onFieldDelete(activeField.value)
@@ -659,11 +671,15 @@ const onClickCopyFieldUrl = async (field: ColumnType) => {
 const keys = useMagicKeys()
 
 whenever(keys.meta_s, () => {
+  if (isLocked.value) return
+
   if (!meta.value?.id) return
   if (openedViewsTab.value === 'field') saveChanges()
 })
 
 whenever(keys.ctrl_s, () => {
+  if (isLocked.value) return
+
   if (!meta.value?.id) return
   if (openedViewsTab.value === 'field') saveChanges()
 })
@@ -718,9 +734,9 @@ const onFieldOptionUpdate = () => {
             </template>
           </a-input>
           <div class="flex gap-2">
-            <NcTooltip>
+            <NcTooltip :disabled="isLocked">
               <template #title> {{ `${renderAltOrOptlKey()} + C` }} </template>
-              <NcButton type="secondary" size="small" class="mr-1" :disabled="loading" @click="addField()">
+              <NcButton type="secondary" size="small" class="mr-1" :disabled="loading || isLocked" @click="addField()">
                 <div class="flex items-center gap-2">
                   <GeneralIcon icon="plus" class="w-3" />
                   New Field
@@ -730,19 +746,22 @@ const onFieldOptionUpdate = () => {
             <NcButton
               type="secondary"
               size="small"
-              :disabled="!loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1"
+              :disabled="(!loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1) || isLocked"
               @click="clearChanges()"
             >
               Reset
             </NcButton>
-            <NcTooltip>
+            <NcTooltip :disabled="isLocked">
               <template #title> {{ `${renderCmdOrCtrlKey()} + S` }} </template>
 
               <NcButton
                 type="primary"
                 size="small"
                 :loading="loading"
-                :disabled="isColumnsValid ? !loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1 : true"
+                :disabled="
+                  (isColumnsValid ? !loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1 : true) ||
+                  isLocked
+                "
                 @click="saveChanges()"
               >
                 Save changes
@@ -752,7 +771,7 @@ const onFieldOptionUpdate = () => {
         </div>
         <div class="flex flex-row rounded-lg border-1 border-gray-200">
           <div ref="fieldsListWrapperDomRef" class="nc-scrollbar-md !overflow-auto w-full flex-grow-1 nc-fields-height">
-            <Draggable v-model="fields" item-key="id" @change="onMove($event)">
+            <Draggable v-model="fields" :disabled="isLocked" item-key="id" @change="onMove($event)">
               <template #item="{ element: field }">
                 <div
                   v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv"
@@ -761,9 +780,16 @@ const onFieldOptionUpdate = () => {
                   @click="changeField(field, $event)"
                 >
                   <div class="flex items-center flex-1 py-2.5 gap-1 w-2/6">
-                    <component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" />
+                    <component
+                      :is="iconMap.drag"
+                      class="cursor-move !h-3.75 text-gray-600 mr-1"
+                      :class="{
+                        'opacity-0 !cursor-default': isLocked,
+                      }"
+                    />
                     <NcCheckbox
                       v-if="field.id && viewFieldsMap[field.id]"
+                      :disabled="isLocked"
                       :checked="
                         visibilityOps.find((op) => op.column.fk_column_id === field.id)?.visible ?? viewFieldsMap[field.id].show
                       "
@@ -882,27 +908,29 @@ const onFieldOptionUpdate = () => {
                                 </NcButton>
                               </div>
                             </NcTooltip>
-                            <a-menu-divider class="my-1.5" />
+                            <a-menu-divider v-if="!isLocked" class="my-1.5" />
                           </template>
 
-                          <NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)">
-                            <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span>
-                          </NcMenuItem>
-                          <NcMenuItem v-if="!field.pv" key="table-explorer-insert-above" @click="addField(field, true)">
-                            <Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>Insert above</span>
-                          </NcMenuItem>
-                          <NcMenuItem key="table-explorer-insert-below" @click="addField(field)">
-                            <Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>Insert below</span>
-                          </NcMenuItem>
-
-                          <a-menu-divider class="my-1.5" />
-
-                          <NcMenuItem key="table-explorer-delete" class="!hover:bg-red-50" @click="onFieldDelete(field)">
-                            <div class="text-red-500">
-                              <GeneralIcon icon="delete" class="group-hover:text-accent -ml-0.25 -mt-0.75 mr-0.5" />
-                              Delete
-                            </div>
-                          </NcMenuItem>
+                          <template v-if="!isLocked">
+                            <NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)">
+                              <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span>
+                            </NcMenuItem>
+                            <NcMenuItem v-if="!field.pv" key="table-explorer-insert-above" @click="addField(field, true)">
+                              <Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>Insert above</span>
+                            </NcMenuItem>
+                            <NcMenuItem key="table-explorer-insert-below" @click="addField(field)">
+                              <Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>Insert below</span>
+                            </NcMenuItem>
+
+                            <a-menu-divider class="my-1.5" />
+
+                            <NcMenuItem key="table-explorer-delete" class="!hover:bg-red-50" @click="onFieldDelete(field)">
+                              <div class="text-red-500">
+                                <GeneralIcon icon="delete" class="group-hover:text-accent -ml-0.25 -mt-0.75 mr-0.5" />
+                                Delete
+                              </div>
+                            </NcMenuItem>
+                          </template>
                         </NcMenu>
                       </template>
                     </NcDropdown>
@@ -927,7 +955,13 @@ const onFieldOptionUpdate = () => {
                   @click="changeField(displayColumn, $event)"
                 >
                   <div class="flex items-center flex-1 py-2.5 gap-1 w-2/6">
-                    <component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-200 mr-1" />
+                    <component
+                      :is="iconMap.drag"
+                      class="cursor-move !h-3.75 text-gray-200 mr-1"
+                      :class="{
+                        'opacity-0 !cursor-default': isLocked,
+                      }"
+                    />
                     <NcCheckbox :disabled="true" :checked="true" />
                     <SmartsheetHeaderCellIcon
                       v-if="displayColumn"
@@ -1046,6 +1080,7 @@ const onFieldOptionUpdate = () => {
                 :preload="fieldState(activeField)"
                 :table-explorer-columns="fields"
                 embed-mode
+                :readonly="isLocked"
                 from-table-explorer
                 @update="onFieldUpdate"
                 @add="onFieldAdd"