From dc314b70fc5af393cbc76ced0449da7a2b7d7d62 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 13 Feb 2023 18:59:28 +0800
Subject: [PATCH] feat(nc-gui): add showNullAndEmptyInFilter

---
 .../components/dashboard/settings/Misc.vue    | 22 ++++++++++++++-----
 .../nc-gui/composables/useGlobal/state.ts     |  1 +
 .../nc-gui/composables/useGlobal/types.ts     |  1 +
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Misc.vue b/packages/nc-gui/components/dashboard/settings/Misc.vue
index 96a13c6d65..8581376ed1 100644
--- a/packages/nc-gui/components/dashboard/settings/Misc.vue
+++ b/packages/nc-gui/components/dashboard/settings/Misc.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useGlobal, useProject, watch } from '#imports'
 
-const { includeM2M, showNull } = useGlobal()
+const { includeM2M, showNull, showNullAndEmptyInFilter } = useGlobal()
+
 const { loadTables } = useProject()
 
 watch(includeM2M, async () => await loadTables())
@@ -11,14 +12,25 @@ watch(includeM2M, async () => await loadTables())
   <div class="flex flex-row w-full">
     <div class="flex flex-col w-full">
       <div class="flex flex-row items-center w-full mb-4 gap-2">
-        <!--        Show M2M Tables -->
+        <!-- Show M2M Tables -->
         <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']" class="nc-settings-meta-misc">
-          {{ $t('msg.info.showM2mTables') }}
+          {{ $t('msg.info.showM2mTables') }} <br/>
+          <span class="text-gray-500">{{ $t('msg.info.showM2mTablesDesc')}}</span>
         </a-checkbox>
       </div>
       <div class="flex flex-row items-center w-full mb-4 gap-2">
-        <!--        Show NULL -->
-        <a-checkbox v-model:checked="showNull" v-e="['c:settings:show-null']" class="nc-settings-show-null">Show NULL</a-checkbox>
+        <!-- Show NULL -->
+        <a-checkbox v-model:checked="showNull" v-e="['c:settings:show-null']" class="nc-settings-show-null">
+          {{ $t('msg.info.showNullInCells')}} <br/>
+          <span class="text-gray-500">{{ $t('msg.info.showNullInCellsDesc')}}</span>
+        </a-checkbox>
+      </div>
+      <div class="flex flex-row items-center w-full mb-4 gap-2">
+        <!-- Show NULL and EMPTY in Filters -->
+        <a-checkbox v-model:checked="showNullAndEmptyInFilter" v-e="['c:settings:show-null']" class="nc-settings-show-null">
+          {{ $t('msg.info.showNullAndEmptyInFilter')}} <br/>
+          <span class="text-gray-500">{{ $t('msg.info.showNullAndEmptyInFilterDesc')}}</span>
+        </a-checkbox>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/composables/useGlobal/state.ts b/packages/nc-gui/composables/useGlobal/state.ts
index 2b1f7bc036..b2834ee03d 100644
--- a/packages/nc-gui/composables/useGlobal/state.ts
+++ b/packages/nc-gui/composables/useGlobal/state.ts
@@ -63,6 +63,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     previewAs: null,
     includeM2M: false,
     showNull: false,
+    showNullAndEmptyInFilter: false,
     currentVersion: null,
     latestRelease: null,
     hiddenRelease: null,
diff --git a/packages/nc-gui/composables/useGlobal/types.ts b/packages/nc-gui/composables/useGlobal/types.ts
index 9ef6ab3ddb..86d4fb3ad4 100644
--- a/packages/nc-gui/composables/useGlobal/types.ts
+++ b/packages/nc-gui/composables/useGlobal/types.ts
@@ -31,6 +31,7 @@ export interface StoredState {
   previewAs: ProjectRole | null
   includeM2M: boolean
   showNull: boolean
+  showNullAndEmptyInFilter: boolean
   currentVersion: string | null
   latestRelease: string | null
   hiddenRelease: string | null