From 2fab4c46328e8e719f99aae72afbd78a5e16d0c0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 20 Nov 2022 15:59:26 +0530
Subject: [PATCH] fix(gui): miscellaneous ui fixes and improvement

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components.d.ts               |   1 +
 .../nc-gui/components/dlg/TableCreate.vue     |   8 +-
 .../smartsheet/column/EditOrAdd.vue           |   7 ++
 .../smartsheet/column/SelectOptions.vue       |   4 +-
 .../smartsheet/toolbar/ShareView.vue          | 102 ++++++++----------
 .../tabs/auth/user-management/UsersModal.vue  |   6 ++
 .../nc-gui/components/virtual-cell/Lookup.vue |   2 +-
 .../composables/useMultiSelect/index.ts       |   1 +
 .../form/[viewId]/index/survey.vue            |   4 +-
 .../sql-data-mapper/lib/sql/BaseModelSqlv2.ts |   4 +-
 10 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 1be206af09..3b0dd76f2f 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -200,6 +200,7 @@ declare module '@vue/runtime-core' {
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusCircleOutline: typeof import('~icons/mdi/plus-circle-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
+    MdiPlusThick: typeof import('~icons/mdi/plus-thick')['default']
     MdiReddit: typeof import('~icons/mdi/reddit')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 7c36fa06e7..46fcb06b87 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Form, computed, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
+import { Form, computed, nextTick, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
 import { TabType } from '~/lib'
 
 const props = defineProps<{
@@ -89,8 +89,10 @@ const _createTable = async () => {
 
 onMounted(() => {
   generateUniqueTitle()
-
-  inputEl.value?.focus()
+  nextTick(() => {
+    inputEl.value?.focus()
+    inputEl.value?.select()
+  })
 })
 </script>
 
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 5acda92b36..0eb697dc36 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useEventListener } from '@vueuse/core'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import {
   IsFormInj,
@@ -116,6 +117,12 @@ onMounted(() => {
     formState.value.column_name = formState.value?.title
   }
 })
+
+useEventListener('keydown', (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    emit('cancel')
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
index a3295fa84c..f02646718b 100644
--- a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
@@ -163,12 +163,12 @@ watch(inputs, () => {
               v-model:value="element.title"
               class="caption"
               :data-testid="`select-column-option-input-${index}`"
+              @keydown.enter.prevent="element.title?.trim() && addNewOption()"
               @change="optionChanged(element.id)"
             />
 
             <MdiClose
-              class="ml-2 hover:!text-black"
-              :style="{ color: 'red' }"
+              class="ml-2 hover:!text-black-500 text-gray-500 cursor-pointer"
               :data-testid="`select-column-option-remove-${index}`"
               @click="removeOption(index)"
             />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 0289edc953..e328576dfb 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -48,12 +48,12 @@ const withRTL = computed({
   },
 })
 
-const transitionDuration = computed({
-  get: () => shared.value.meta.transitionDuration || 250,
-  set: (duration) => {
-    shared.value.meta = { ...shared.value.meta, transitionDuration: duration > 5000 ? 5000 : duration }
-  },
-})
+// const transitionDuration = computed({
+//   get: () => shared.value.meta.transitionDuration || 50,
+//   set: (duration) => {
+//     shared.value.meta = { ...shared.value.meta, transitionDuration: duration > 5000 ? 5000 : duration }
+//   },
+// })
 
 const allowCSVDownload = computed({
   get: () => !!shared.value.meta.allowCSVDownload,
@@ -131,7 +131,7 @@ async function saveTheme() {
   $e(`a:view:share:${viewTheme.value ? 'enable' : 'disable'}-theme`)
 }
 
-const saveTransitionDuration = useDebounceFn(updateSharedViewMeta, 1000, { maxWait: 2000 })
+// const saveTransitionDuration = useDebounceFn(updateSharedViewMeta, 1000, { maxWait: 2000 })
 
 async function updateSharedViewMeta() {
   try {
@@ -248,7 +248,7 @@ watch(passwordProtected, (value) => {
               Use Survey Mode
             </a-checkbox>
 
-            <Transition name="layout" mode="out-in">
+            <!--            <Transition name="layout" mode="out-in">
               <div v-if="surveyMode" class="flex flex-col justify-center pl-6">
                 <a-form-item class="!my-1" :has-feedback="false" name="transitionDuration">
                   <template #label>
@@ -264,46 +264,7 @@ watch(passwordProtected, (value) => {
                   />
                 </a-form-item>
               </div>
-            </Transition>
-          </div>
-
-          <div>
-            <!-- todo: i18n -->
-            <a-checkbox
-              v-if="shared.type === ViewTypes.FORM"
-              v-model:checked="viewTheme"
-              data-testid="nc-modal-share-view__with-theme"
-              class="!text-sm"
-            >
-              Use Theme
-            </a-checkbox>
-
-            <Transition name="layout" mode="out-in">
-              <div v-if="viewTheme" class="flex pl-6">
-                <LazyGeneralColorPicker
-                  data-testid="nc-modal-share-view__theme-picker"
-                  class="!p-0"
-                  :model-value="shared.meta.theme?.primaryColor"
-                  :colors="projectThemeColors"
-                  :row-size="9"
-                  :advanced="false"
-                  @input="onChangeTheme"
-                />
-              </div>
-            </Transition>
-          </div>
-
-          <div>
-            <!-- use RTL orientation in form - todo: i18n -->
-            <a-checkbox
-              v-if="shared.type === ViewTypes.FORM"
-              v-model:checked="withRTL"
-              data-testid="nc-modal-share-view__locale"
-              class="!text-sm"
-            >
-              <!-- todo i18n -->
-              RTL Orientation
-            </a-checkbox>
+            </Transition> -->
           </div>
 
           <div>
@@ -339,20 +300,45 @@ watch(passwordProtected, (value) => {
             </Transition>
           </div>
 
-          <div>
+          <div
+            v-if="
+              shared && (shared.type === ViewTypes.GRID || shared.type === ViewTypes.KANBAN || shared.type === ViewTypes.GALLERY)
+            "
+          >
             <!-- Allow Download -->
-            <a-checkbox
-              v-if="
-                shared &&
-                (shared.type === ViewTypes.GRID || shared.type === ViewTypes.KANBAN || shared.type === ViewTypes.GALLERY)
-              "
-              v-model:checked="allowCSVDownload"
-              data-testid="nc-modal-share-view__with-csv-download"
-              class="!text-sm"
-            >
+            <a-checkbox v-model:checked="allowCSVDownload" data-testid="nc-modal-share-view__with-csv-download" class="!text-sm">
               {{ $t('labels.downloadAllowed') }}
             </a-checkbox>
           </div>
+
+          <div v-if="shared.type === ViewTypes.FORM">
+            <!-- todo: i18n -->
+            <a-checkbox v-model:checked="viewTheme" data-testid="nc-modal-share-view__with-theme" class="!text-sm">
+              Use Theme
+            </a-checkbox>
+
+            <Transition name="layout" mode="out-in">
+              <div v-if="viewTheme" class="flex pl-6">
+                <LazyGeneralColorPicker
+                  data-testid="nc-modal-share-view__theme-picker"
+                  class="!p-0"
+                  :model-value="shared.meta.theme?.primaryColor"
+                  :colors="projectThemeColors"
+                  :row-size="9"
+                  :advanced="false"
+                  @input="onChangeTheme"
+                />
+              </div>
+            </Transition>
+          </div>
+
+          <div v-if="shared.type === ViewTypes.FORM">
+            <!-- use RTL orientation in form - todo: i18n -->
+            <a-checkbox v-model:checked="withRTL" data-testid="nc-modal-share-view__locale" class="!text-sm">
+              <!-- todo i18n -->
+              RTL Orientation
+            </a-checkbox>
+          </div>
         </div>
       </div>
     </a-modal>
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index c8b509916c..86def37f78 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Input } from 'ant-design-vue'
 import {
   Form,
   computed,
@@ -133,6 +134,10 @@ const clickInviteMore = () => {
   usersData.role = ProjectRole.Viewer
   usersData.emails = undefined
 }
+
+const emailField = (inputEl: typeof Input) => {
+  inputEl?.$el?.focus()
+}
 </script>
 
 <template>
@@ -222,6 +227,7 @@ const clickInviteMore = () => {
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('datatype.Email') }}:</div>
 
                     <a-input
+                      :ref="emailField"
                       v-model:value="usersData.emails"
                       validate-trigger="onBlur"
                       :placeholder="$t('labels.email')"
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 1040868cec..9284a52ad4 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -11,8 +11,8 @@ import {
   inject,
   isAttachment,
   provide,
-  refAutoReset,
   ref,
+  refAutoReset,
   useMetas,
   watch,
 } from '#imports'
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 96bfdd80a0..d0d6fe7867 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -41,6 +41,7 @@ export function useMultiSelect(
 
   function selectCell(row: number, col: number) {
     clearRangeRows()
+    if (selected.row === row && selected.col === col) return
     editEnabled.value = false
     selected.row = row
     selected.col = col
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index d1d13b09af..771edf786c 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -44,7 +44,7 @@ const el = ref<HTMLDivElement>()
 
 provide(DropZoneRef, el)
 
-const transitionDuration = computed(() => sharedViewMeta.value.transitionDuration || 250)
+const transitionDuration = computed(() => sharedViewMeta.value.transitionDuration || 50)
 
 const steps = computed(() => {
   if (!formColumns.value) return []
@@ -305,7 +305,7 @@ onMounted(() => {
                 </button>
               </div>
 
-              <div v-else-if="!submitted" class="flex items-center gap-3">
+              <div v-else-if="!submitted" class="flex items-center gap-3 flex-col">
                 <a-tooltip
                   :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
                   :mouse-enter-delay="0.25"
diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
index 5c07bb1e2e..96c85b7666 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
@@ -9,7 +9,7 @@ import RollupColumn from '../../../../models/RollupColumn';
 import LookupColumn from '../../../../models/LookupColumn';
 import DataLoader from 'dataloader';
 import Column from '../../../../models/Column';
-import { XcFilter, XcFilterWithAlias } from '../BaseModel';
+import { XcFilter, XcFilterWithAlias } from '../BaseModel'
 import conditionV2 from './conditionV2';
 import Filter from '../../../../models/Filter';
 import sortV2 from './sortV2';
@@ -2240,7 +2240,7 @@ class BaseModelSqlv2 {
     for (let i = 0; i < this.model.columns.length; ++i) {
       const column = this.model.columns[i];
       // skip validation if `validate` is undefined or false
-      if (!column?.meta?.validate && !column?.validate) continue;
+      if (!column?.meta?.validate || !column?.validate) continue;
 
       const validate = column.getValidators();
       const cn = column.column_name;