fix(gui): miscellaneous ui fixes and improvement

Signed-off-by: Pranav C <pranavxc@gmail.com>
2 years ago · 2fab4c4632
10 changed files with 71 additions and 68 deletions
--- 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']
--- 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>

--- 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>
--- 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)"
            />
--- 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>
--- 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')"
--- 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'
--- 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
--- 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"
--- 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;