From 6cdbfdf896b35a7f848072ebcd65ddb898de4764 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:15 +0000
Subject: [PATCH] fix(nc-gui): added missing readonly property in some of the
 fields

---
 .../nc-gui/components/cell/DatePicker.vue     |  1 +
 packages/nc-gui/components/cell/Duration.vue  | 17 +++++++-----
 packages/nc-gui/components/cell/Email.vue     | 21 +++++++++------
 .../nc-gui/components/cell/PhoneNumber.vue    | 24 ++++++++++-------
 .../nc-gui/components/cell/TimePicker.vue     |  1 +
 packages/nc-gui/components/cell/Url.vue       | 27 ++++++++++++-------
 6 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index e39344c91e..3bc489a0ed 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -240,6 +240,7 @@ const clickHandler = () => {
 <template>
   <a-date-picker
     v-model:value="localState"
+    :disabled="readOnly"
     :picker="picker"
     :tabindex="0"
     :bordered="false"
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index cde8bdf2ee..f1facc875d 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -13,6 +13,7 @@ import {
   inject,
   parseProp,
   ref,
+  ReadonlyInj,
 } from '#imports'
 
 interface Props {
@@ -32,14 +33,16 @@ const column = inject(ColumnInj)
 
 const editEnabled = inject(EditModeInj)
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
+const readOnly = inject(ReadonlyInj, ref(false))
+
 const showWarningMessage = ref(false)
 
 const durationInMS = ref(0)
 
 const isEdited = ref(false)
 
-const isEditColumn = inject(EditColumnInj, ref(false))
-
 const durationType = computed(() => parseProp(column?.value?.meta)?.duration || 0)
 
 const durationPlaceholder = computed(() =>
@@ -93,7 +96,7 @@ const focus: VNodeRef = (el) =>
 <template>
   <div class="duration-cell-wrapper">
     <input
-      v-if="editEnabled"
+      v-if="!readOnly && editEnabled"
       :ref="focus"
       v-model="localState"
       class="w-full !border-none !outline-none py-1"
@@ -111,11 +114,13 @@ const focus: VNodeRef = (el) =>
       @mousedown.stop
     />
 
-    <span v-else-if="modelValue === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
+    <span v-else-if="modelValue === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
+      $t('general.null')
+    }}</span>
 
-    <span v-else> {{ localState }}</span>
+    <span v-else :class="isExpandedFormOpen ? 'px-2' : 'px-0'"> {{ localState }}</span>
 
-    <div v-if="showWarningMessage && showValidationError" class="duration-warning">
+    <div v-if="showWarningMessage && showValidationError" class="duration-warning" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
       {{ $t('msg.plsEnterANumber') }}
     </div>
   </div>
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index b68282574c..d4a4976574 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -10,6 +10,7 @@ import {
   inject,
   useI18n,
   validateEmail,
+  ReadonlyInj,
 } from '#imports'
 
 interface Props {
@@ -30,13 +31,15 @@ const editEnabled = inject(EditModeInj)!
 
 const column = inject(ColumnInj)!
 
-// Used in the logic of when to display error since we are not storing the email if it's not valid
-const localState = ref(value)
-
 const isSurveyForm = inject(IsSurveyFormInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const readOnly = inject(ReadonlyInj, ref(false))
+
+// Used in the logic of when to display error since we are not storing the email if it's not valid
+const localState = ref(value)
+
 const vModel = computed({
   get: () => value,
   set: (val) => {
@@ -71,7 +74,7 @@ watch(
 
 <template>
   <input
-    v-if="editEnabled"
+    v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
     class="w-full outline-none text-sm py-1"
@@ -87,17 +90,19 @@ watch(
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
+    $t('general.null')
+  }}</span>
 
   <nuxt-link
     v-else-if="validEmail"
     no-ref
-    class="text-sm underline hover:opacity-75 inline-block"
+    class="py-1 text-sm underline hover:opacity-75 inline-block"
     :href="`mailto:${vModel}`"
     target="_blank"
   >
-    <LazyCellClampedText :value="vModel" :lines="rowHeight" />
+    <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </nuxt-link>
 
-  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
+  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
 </template>
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index 1211a863e6..5778524f82 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -17,17 +17,19 @@ const { showNull } = useGlobal()
 
 const { t } = useI18n()
 
-const editEnabled = inject(EditModeInj)!
+const editEnabled = inject(EditModeInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
 const column = inject(ColumnInj)!
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
+const readOnly = inject(ReadonlyInj, ref(false))
+
 // Used in the logic of when to display error since we are not storing the phone if it's not valid
 const localState = ref(value)
 
-const isSurveyForm = inject(IsSurveyFormInj, ref(false))
-
 const vModel = computed({
   get: () => value,
   set: (val) => {
@@ -38,7 +40,7 @@ const vModel = computed({
   },
 })
 
-const validEmail = computed(() => vModel.value && isMobilePhone(vModel.value))
+const validPhoneNumber = computed(() => vModel.value && isMobilePhone(vModel.value))
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
@@ -62,7 +64,7 @@ watch(
 
 <template>
   <input
-    v-if="editEnabled"
+    v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
     class="w-full outline-none text-sm py-1"
@@ -78,17 +80,19 @@ watch(
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
+    $t('general.null')
+  }}</span>
 
   <a
-    v-else-if="validEmail"
-    class="text-sm underline hover:opacity-75"
+    v-else-if="validPhoneNumber"
+    class="py-1 text-sm underline hover:opacity-75 inline-block"
     :href="`tel:${vModel}`"
     target="_blank"
     rel="noopener noreferrer"
   >
-    <LazyCellClampedText :value="vModel" :lines="rowHeight" />
+    <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </a>
 
-  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
+  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
 </template>
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 34081a1e1e..626cb9bc97 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -129,6 +129,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 <template>
   <a-time-picker
     v-model:value="localState"
+    :disabled="readOnly"
     :show-time="true"
     :bordered="false"
     use12-hours
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 8aa39bac32..5fce0f5f3e 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -17,6 +17,7 @@ import {
   useCellUrlConfig,
   useI18n,
   watch,
+  ReadonlyInj,
 } from '#imports'
 
 interface Props {
@@ -39,13 +40,15 @@ const isEditColumn = inject(EditColumnInj, ref(false))
 
 const disableOverlay = inject(CellUrlDisableOverlayInj, ref(false))
 
-// Used in the logic of when to display error since we are not storing the url if it's not valid
-const localState = ref(value)
-
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
 const isSurveyForm = inject(IsSurveyFormInj, ref(false))
 
+const readOnly = inject(ReadonlyInj, ref(false))
+
+// Used in the logic of when to display error since we are not storing the url if it's not valid
+const localState = ref(value)
+
 const vModel = computed({
   get: () => value,
   set: (val) => {
@@ -92,7 +95,7 @@ watch(
 <template>
   <div class="flex flex-row items-center justify-between w-full h-full">
     <input
-      v-if="editEnabled"
+      v-if="!readOnly && editEnabled"
       :ref="focus"
       v-model="vModel"
       :placeholder="isEditColumn ? $t('labels.enterDefaultUrlOptional') : ''"
@@ -108,31 +111,35 @@ watch(
       @mousedown.stop
     />
 
-    <span v-else-if="vModel === null && showNull" class="nc-null uppercase"> {{ $t('general.null') }}</span>
+    <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
+      {{ $t('general.null') }}</span
+    >
 
     <nuxt-link
       v-else-if="isValid && !cellUrlOptions?.overlay"
       no-prefetch
       no-rel
-      class="z-3 text-sm underline hover:opacity-75"
+      class="py-1 z-3 text-sm underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
     >
-      <LazyCellClampedText :value="value" :lines="rowHeight" />
+      <LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
     </nuxt-link>
 
     <nuxt-link
       v-else-if="isValid && !disableOverlay && cellUrlOptions?.overlay"
       no-prefetch
       no-rel
-      class="z-3 w-full h-full text-center !no-underline hover:opacity-75"
+      class="py-1 z-3 w-full h-full text-center !no-underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
     >
-      <LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" />
+      <LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
     </nuxt-link>
 
-    <span v-else class="w-9/10 overflow-ellipsis overflow-hidden"><LazyCellClampedText :value="value" :lines="rowHeight" /></span>
+    <span v-else class="w-9/10 overflow-ellipsis overflow-hidden"
+      ><LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
+    /></span>
 
     <div v-if="column.meta?.validate && !isValid && value?.length && !editEnabled" class="mr-1 w-1/10">
       <a-tooltip placement="top">