refactor(gui): group imports

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/account/SignupSettings.vue

@@ -51,6 +51,6 @@ loadSettings()
 <style scoped>
 :deep(.ant-checkbox-wrapper) {
   @apply !flex-row-reverse !flex !justify-start gap-4;
-  justify-content: start;
+  justify-content: flex-start;
 }
 </style>

packages/nc-gui/components/smartsheet/Grid.vue

@@ -11,11 +11,13 @@ import {
   IsGridInj,
   IsLockedInj,
   MetaInj,
+  NavigateDir,
   OpenNewRecordFormHookInj,
   PaginationDataInj,
   ReadonlyInj,
   ReloadRowDataHookInj,
   ReloadViewDataHookInj,
+  SmartsheetStoreEvents,
   computed,
   createEventHook,
   enumColor,
@@ -42,7 +44,6 @@ import {
   watch,
 } from '#imports'
 import type { Row } from '~/lib'
-import { NavigateDir, SmartsheetStoreEvents } from '~/lib'
 
 const { t } = useI18n()
 
@@ -545,17 +546,17 @@ watch(
   { immediate: true },
 )
 
-const columnPosition = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
+const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
 
 eventBus.on(async (event, payload) => {
   if (event === SmartsheetStoreEvents.FIELD_ADD) {
-    columnPosition.value = payload
+    columnOrder.value = payload
     addColumnDropdown.value = true
   }
 })
 
-const closeAddColumnMenu = () => {
+const closeAddColumnDropdown = () => {
-  columnPosition.value = null
+  columnOrder.value = null
   addColumnDropdown.value = false
 }
 </script>
@@ -633,9 +634,9 @@ const closeAddColumnMenu = () => {
                   <template #overlay>
                     <SmartsheetColumnEditOrAddProvider
                       v-if="addColumnDropdown"
-                      :column-position="columnPosition"
+                      :column-position="columnOrder"
-                      @submit="closeAddColumnMenu"
+                      @submit="closeAddColumnDropdown"
-                      @cancel="closeAddColumnMenu"
+                      @cancel="closeAddColumnDropdown"
                       @click.stop
                       @keydown.stop
                     />

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useEventListener } from '@vueuse/core'
 import type { ColumnReqType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import {
@@ -14,6 +13,7 @@ import {
   ref,
   uiTypes,
   useColumnCreateStoreOrThrow,
+  useEventListener,
   useI18n,
   useMetas,
   useNuxtApp,

packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { AllowedColumnTypesForQrCode, UITypes } from 'nocodb-sdk'
+import type { UITypes } from 'nocodb-sdk'
+import { AllowedColumnTypesForQrCode } from 'nocodb-sdk'
 import type { SelectProps } from 'ant-design-vue'
 import { useVModel } from '#imports'
 
@@ -50,10 +51,17 @@ setAdditionalValidations({
 <template>
   <a-row>
     <a-col :span="24">
-      <a-form-item class="flex w-1/2 pb-2 nc-qr-code-value-column-select" :label="$t('labels.qrCodeValueColumn')"
+      <a-form-item
-        v-bind="validateInfos.fk_qr_value_column_id">
+        class="flex w-1/2 pb-2 nc-qr-code-value-column-select"
-        <a-select v-model:value="vModel.fk_qr_value_column_id" :options="columnsAllowedAsQrValue"
+        :label="$t('labels.qrCodeValueColumn')"
-          placeholder="Select a column for the QR code value" @click.stop />
+        v-bind="validateInfos.fk_qr_value_column_id"
+      >
+        <a-select
+          v-model:value="vModel.fk_qr_value_column_id"
+          :options="columnsAllowedAsQrValue"
+          placeholder="Select a column for the QR code value"
+          @click.stop
+        />
       </a-form-item>
     </a-col>
   </a-row>

packages/nc-gui/components/smartsheet/header/Cell.vue

@@ -25,7 +25,7 @@ const addField = async (payload) => {
   editColumnDropdown.value = true
 }
 
-const closeAddColumnMenu = () => {
+const closeAddColumnDropdown = () => {
   columnOrder.value = null
   editColumnDropdown.value = false
 }
@@ -73,8 +73,8 @@ const closeAddColumnMenu = () => {
           :column="columnOrder ? null : column"
           :column-position="columnOrder"
           class="w-full"
-          @submit="closeAddColumnMenu"
+          @submit="closeAddColumnDropdown"
-          @cancel="closeAddColumnMenu"
+          @cancel="closeAddColumnDropdown"
           @click.stop
           @keydown.stop
         />

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -1,24 +1,25 @@
 <script lang="ts" setup>
-import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import type { LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import {
+  ActiveViewInj,
   ColumnInj,
   IsLockedInj,
   MetaInj,
   Modal,
   ReloadViewDataHookInj,
+  SmartsheetStoreEvents,
   defineEmits,
   defineProps,
   extractSdkResponseErrorMsg,
+  getUniqueColumnName,
   inject,
   message,
   useI18n,
   useMetas,
   useNuxtApp,
+  useSmartsheetStoreOrThrow,
 } from '#imports'
-import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
-import { ActiveViewInj } from '~/context'
-import { SmartsheetStoreEvents } from '~/lib'
 
 const { virtual = false } = defineProps<{ virtual?: boolean }>()
 
@@ -92,21 +93,11 @@ const sortByColumn = async (direction: 'asc' | 'desc') => {
     })
     eventBus.emit(SmartsheetStoreEvents.SORT_RELOAD)
     reloadDataHook?.trigger()
-  } catch (e: any) {
+  } catch (e) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
-const getUniqueColumnName = (initName: string, columns: ColumnType[]) => {
-  let name = initName
-  let i = 1
-  while (columns.find((c) => c.title === name)) {
-    name = `${initName}_${i}`
-    i++
-  }
-  return name
-}
-
 const duplicateColumn = async () => {
   let columnCreatePayload = {}
 

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -107,7 +107,7 @@ const addField = async (payload) => {
   editColumnDropdown.value = true
 }
 
-const closeAddColumnMenu = () => {
+const closeAddColumnDropdown = () => {
   columnOrder.value = null
   editColumnDropdown.value = false
 }
@@ -151,8 +151,8 @@ const closeAddColumnMenu = () => {
           :column="columnOrder ? null : column"
           :column-position="columnOrder"
           class="w-full"
-          @submit="closeAddColumnMenu"
+          @submit="closeAddColumnDropdown"
-          @cancel="closeAddColumnMenu"
+          @cancel="closeAddColumnDropdown"
           @click.stop
           @keydown.stop
         />

packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue

@@ -51,9 +51,14 @@ const filterOption = (input: string, option: any) => option.label.toLowerCase()?
 </script>
 
 <template>
-  <a-select v-model:value="localValue" :dropdown-match-select-width="false" show-search
+  <a-select
-    :placeholder="$t('placeholder.selectField')" :filter-option="filterOption"
+    v-model:value="localValue"
-    dropdown-class-name="nc-dropdown-toolbar-field-list">
+    :dropdown-match-select-width="false"
+    show-search
+    :placeholder="$t('placeholder.selectField')"
+    :filter-option="filterOption"
+    dropdown-class-name="nc-dropdown-toolbar-field-list"
+  >
     <a-select-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
       <div class="flex gap-2 items-center items-center h-full">
         <component :is="option.icon" class="min-w-5 !mx-0" />

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -16,10 +16,10 @@ import {
   resolveComponent,
   useMenuCloseOnEsc,
   useNuxtApp,
+  useSmartsheetStoreOrThrow,
   useViewColumns,
   watch,
 } from '#imports'
-import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
 
 const meta = inject(MetaInj, ref())
 

packages/nc-gui/components/virtual-cell/QrCode.vue

@@ -30,8 +30,12 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
 </script>
 
 <template>
-  <a-modal v-model:visible="modalVisible" wrap-class-name="nc-qr-code-large" :body-style="{ padding: '0px' }"
+  <a-modal
-    @ok="handleModalOkClick">
+    v-model:visible="modalVisible"
+    wrap-class-name="nc-qr-code-large"
+    :body-style="{ padding: '0px' }"
+    @ok="handleModalOkClick"
+  >
     <template #footer>
       <div class="mr-4" data-testid="nc-qr-code-large-value-label">{{ qrValue }}</div>
     </template>

packages/nc-gui/utils/columnUtils.ts

@@ -1,7 +1,6 @@
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import LinkVariant from '~icons/mdi/link-variant'
-import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
 import QrCodeScan from '~icons/mdi/qrcode-scan'
 import FormatColorText from '~icons/mdi/format-color-text'
 import TextSubject from '~icons/mdi/text-subject'
@@ -181,4 +180,14 @@ const isColumnRequiredAndNull = (col: ColumnType, row: Record<string, any>) => {
   return isColumnRequired(col) && (row[col.title!] === undefined || row[col.title!] === null)
 }
 
-export { uiTypes, getUIDTIcon, isColumnRequiredAndNull, isColumnRequired, isVirtualColRequired }
+const getUniqueColumnName = (initName: string, columns: ColumnType[]) => {
+  let name = initName
+  let i = 1
+  while (columns.find((c) => c.title === name)) {
+    name = `${initName}_${i}`
+    i++
+  }
+  return name
+}
+
+export { uiTypes, getUIDTIcon, getUniqueColumnName, isColumnRequiredAndNull, isColumnRequired, isVirtualColRequired }