From a581bbc7fd94ce97a7c1a87f1f4bf82104ce0285 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 25 Jan 2023 16:07:47 +0300
Subject: [PATCH] feat: extended support for NULL indicator

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/assets/style.scss                  | 7 +++++++
 packages/nc-gui/components/cell/Currency.vue       | 2 ++
 packages/nc-gui/components/cell/DatePicker.vue     | 3 ++-
 packages/nc-gui/components/cell/DateTimePicker.vue | 5 ++++-
 packages/nc-gui/components/cell/Decimal.vue        | 1 +
 packages/nc-gui/components/cell/Duration.vue       | 2 ++
 packages/nc-gui/components/cell/Email.vue          | 2 ++
 packages/nc-gui/components/cell/Float.vue          | 1 +
 packages/nc-gui/components/cell/Integer.vue        | 1 +
 packages/nc-gui/components/cell/Json.vue           | 2 ++
 packages/nc-gui/components/cell/Percent.vue        | 1 +
 packages/nc-gui/components/cell/Text.vue           | 2 +-
 packages/nc-gui/components/cell/TextArea.vue       | 2 +-
 packages/nc-gui/components/cell/TimePicker.vue     | 5 ++++-
 packages/nc-gui/components/cell/Url.vue            | 2 ++
 packages/nc-gui/components/cell/YearPicker.vue     | 3 ++-
 16 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 14de553535..666f0ebc83 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -294,3 +294,10 @@ a {
 .ant-select-selection-search-input:focus {
   @apply !ring-0;
 }
+
+.nc-null {
+  @apply text-gray-300 italic;
+  input::placeholder {
+    @apply text-gray-300 italic;
+  }
+}
diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index 2ff0e2560a..12850e1be1 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -81,6 +81,8 @@ onMounted(() => {
     @mousedown.stop
   />
 
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+
   <span v-else-if="vModel">{{ currency }}</span>
 
   <span v-else />
diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index c0c662732d..b0d736267a 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -71,7 +71,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
+const placeholder = computed(() => (modelValue === null ? 'NULL' : isDateInvalid ? 'Invalid date' : ''))
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
@@ -169,6 +169,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     v-model:value="localState"
     :bordered="false"
     class="!w-full !px-0 !border-none"
+    :class="{ 'nc-null': modelValue === null }"
     :format="dateFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index af47b62e02..7789a458ef 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -79,6 +79,8 @@ watch(
   { flush: 'post' },
 )
 
+const placeholder = computed(() => (modelValue === null ? 'NULL' : isDateInvalid ? 'Invalid date' : ''))
+
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
@@ -172,8 +174,9 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :show-time="true"
     :bordered="false"
     class="!w-full !px-0 !border-none"
+    :class="{ 'nc-null': modelValue === null }"
     :format="dateTimeFormat"
-    :placeholder="isDateInvalid ? 'Invalid date' : ''"
+    :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 0529cb206e..0703c10326 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -49,6 +49,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @selectstart.capture.stop
     @mousedown.stop
   />
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
 
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index e640754c38..3de34ba1ba 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -93,6 +93,8 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
       @mousedown.stop
     />
 
+    <span v-else-if="localState === null" class="nc-null">NULL</span>
+
     <span v-else> {{ localState }}</span>
 
     <div v-if="showWarningMessage" class="duration-warning">
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index 9d0de8ad18..e304275b07 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -39,6 +39,8 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @mousedown.stop
   />
 
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
   </a>
diff --git a/packages/nc-gui/components/cell/Float.vue b/packages/nc-gui/components/cell/Float.vue
index 44e9babee2..ffa0c2c6e9 100644
--- a/packages/nc-gui/components/cell/Float.vue
+++ b/packages/nc-gui/components/cell/Float.vue
@@ -49,6 +49,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @selectstart.capture.stop
     @mousedown.stop
   />
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
 
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index 7b4426925f..7d7a25bc31 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -53,6 +53,7 @@ function onKeyDown(evt: KeyboardEvent) {
     @selectstart.capture.stop
     @mousedown.stop
   />
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
 
diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index b4176d0d64..4eeec392ae 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -154,6 +154,8 @@ useSelectedCellKeyupListener(active, (e) => {
       </span>
     </div>
 
+    <span v-else-if="vModel === null" class="nc-null">NULL</span>
+
     <span v-else>{{ vModel }}</span>
   </component>
 </template>
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index bea2acd71b..e29be38a6c 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -47,5 +47,6 @@ const focus: VNodeRef = (el) => {
     @selectstart.capture.stop
     @mousedown.stop
   />
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index f1d1b1b33a..32baee6fc4 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -38,7 +38,7 @@ const focus: VNodeRef = (el) => {
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null" class="text-gray-300 italic">NULL</span>
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
 
   <LazyCellClampedText v-else :value="vModel" :lines="1" />
 </template>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 254a0d7044..c09f9717fa 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -55,7 +55,7 @@ const rowHeight = computed(() => {
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null" class="text-gray-300 italic">NULL</span>
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
 
   <LazyCellClampedText v-else-if="rowHeight" :value="vModel" :lines="rowHeight" />
 
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 23f6af1919..a873643986 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -72,6 +72,8 @@ watch(
   { flush: 'post' },
 )
 
+const placeholder = computed(() => (modelValue === null ? 'NULL' : isTimeInvalid ? 'Invalid time' : ''))
+
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
@@ -97,7 +99,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     use12-hours
     format="HH:mm"
     class="!w-full !px-0 !border-none"
-    :placeholder="isTimeInvalid ? 'Invalid time' : ''"
+    :class="{ 'nc-null': modelValue === null }"
+    :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :open="(readOnly || (localState && isPk)) && !active && !editable ? false : open"
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 742ee0e661..fe84746c32 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -88,6 +88,8 @@ watch(
       @mousedown.stop
     />
 
+    <span v-else-if="vModel === null" class="nc-null">NULL</span>
+
     <nuxt-link
       v-else-if="isValid && !cellUrlOptions?.overlay"
       no-prefetch
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index f1c3ef1bce..8c491a3e35 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -58,7 +58,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
+const placeholder = computed(() => (modelValue === null ? 'NULL' : isYearInvalid ? 'Invalid year' : ''))
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
@@ -82,6 +82,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     picker="year"
     :bordered="false"
     class="!w-full !px-0 !border-none"
+    :class="{ 'nc-null': modelValue === null }"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"