chore(gui-v2): lint

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

packages/nc-gui-v2/components/cell/attachment/index.vue

@@ -131,7 +131,10 @@ onKeyDown('Escape', () => {
         <a-tooltip v-else placement="bottom">
           <template #title> View attachments </template>
 
-          <MdiArrowExpand class="select-none transform group-hover:(text-pink-500 scale-120) text-[10px] text-gray-500" @click.stop="modalVisible = true" />
+          <MdiArrowExpand
+            class="select-none transform group-hover:(text-pink-500 scale-120) text-[10px] text-gray-500"
+            @click.stop="modalVisible = true"
+          />
         </a-tooltip>
       </div>
     </template>

packages/nc-gui-v2/components/dlg/AirtableImport.vue

@@ -224,7 +224,13 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" :mask-closable="false" @keydown.esc="dialogShow = false" class="pa-2">
+  <a-modal
+    v-model:visible="dialogShow"
+    width="max(30vw, 600px)"
+    :mask-closable="false"
+    class="pa-2"
+    @keydown.esc="dialogShow = false"
+  >
     <template #footer>
       <div v-if="step === 1">
         <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
@@ -241,7 +247,6 @@ onBeforeUnmount(() => {
     </template>
     <span class="ml-5 mt-5 prose-xl font-weight-bold" type="secondary" :level="5">QUICK IMPORT - AIRTABLE</span>
     <div class="ml-5 mr-5">
-
       <div v-if="step === 1">
         <div class="mb-4">
           <span class="mr-3 pt-2 text-gray-500 text-xs">Credentials</span>

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

@@ -79,7 +79,10 @@ const onMove = (event: { moved: { newIndex: number } }) => {
       </a-button>
     </div>
     <template #overlay>
-      <div class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border" @click.stop>
+      <div
+        class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
+        @click.stop
+      >
         <div class="p-1" @click.stop>
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>

packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@@ -84,7 +84,7 @@ watch(
             <!--          </v-select> -->
           </template>
         </div>
-        <a-button class="text-capitalize mb-1 mt-4" @click.stop="addSort" type="primary" ghost>
+        <a-button class="text-capitalize mb-1 mt-4" type="primary" ghost @click.stop="addSort">
           <div class="flex gap-1 align-center">
             <MdiAddIcon />
             <!-- Add Sort Option -->

packages/nc-gui-v2/components/smartsheet/Form.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
-import {RelationTypes, UITypes, getSystemColumns, isVirtualCol} from 'nocodb-sdk'
+import { RelationTypes, UITypes, getSystemColumns, isVirtualCol } from 'nocodb-sdk'
-import {message} from 'ant-design-vue'
+import { message } from 'ant-design-vue'
-import type {Permission} from '~/composables/useUIPermission/rolePermissions'
+import type { Permission } from '~/composables/useUIPermission/rolePermissions'
-import {computed, inject, onClickOutside, useDebounceFn} from '#imports'
+import { computed, inject, onClickOutside, useDebounceFn } from '#imports'
-import {ActiveViewInj, IsFormInj, MetaInj} from '~/context'
+import { ActiveViewInj, IsFormInj, MetaInj } from '~/context'
-import {extractSdkResponseErrorMsg} from '~/utils'
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 provide(IsFormInj, true)
 
@@ -16,9 +16,9 @@ const state = useGlobal()
 
 const formRef = ref()
 
-const {$api, $e} = useNuxtApp()
+const { $api, $e } = useNuxtApp()
 
-const {isUIAllowed} = useUIPermission()
+const { isUIAllowed } = useUIPermission()
 
 const formState = reactive({})
 
@@ -32,9 +32,9 @@ const view = inject(ActiveViewInj)
 
 if (meta) useProvideColumnCreateStore(meta)
 
-const {loadFormView, insertRow, formColumnData, formViewData, updateFormView} = useViewData(meta, view as any)
+const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view as any)
 
-const {showAll, hideAll, saveOrUpdate} = useViewColumns(view, meta as any, false, async () => {
+const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, false, async () => {
   await loadFormView()
   setFormData()
 })
@@ -106,8 +106,10 @@ function isDbRequired(column: Record<string, any>) {
     // primary column
     (column.pk && !column.ai && !column.cdf)
   if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) {
-    const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<string,
+    const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<
-        any>
+      string,
+      any
+    >
     if (col.rqd && !col.default) {
       isRequired = true
     }
@@ -117,7 +119,7 @@ function isDbRequired(column: Record<string, any>) {
 }
 
 function onMove(event: any) {
-  const {newIndex, element, oldIndex} = event.added || event.moved || event.removed
+  const { newIndex, element, oldIndex } = event.added || event.moved || event.removed
 
   if (event.added) {
     element.show = true
@@ -209,8 +211,7 @@ function setFormData() {
     let data: Record<string, boolean> = {}
     try {
       data = JSON.parse(formViewData.value.email as string) || {}
-    } catch (e) {
+    } catch (e) {}
-    }
     data[state.user.value?.email as string] = emailMe.value
     formViewData.value.email = JSON.stringify(data)
     checkSMTPStatus()
@@ -221,7 +222,7 @@ function setFormData() {
       (f: Record<string, any>) => f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
     )
     .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)
-  .map((c: Record<string, any>) => ({...c, required: !!(c.required || 0)}))
+    .map((c: Record<string, any>) => ({ ...c, required: !!(c.required || 0) }))
 
   systemFieldsIds.value = getSystemColumns(col).map((c: Record<string, any>) => c.fk_column_id)
 
@@ -237,8 +238,10 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     columnObj.colOptions &&
     columnObj.colOptions.type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string,
+    columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
-        any>
+      string,
+      any
+    >
   }
 
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)
@@ -376,7 +379,7 @@ onMounted(async () => {
                 />
               </div>
               <div class="flex flex-row">
-                <mdi-drag-vertical class="flex flex-1"/>
+                <mdi-drag-vertical class="flex flex-1" />
               </div>
             </div>
           </a-card>
@@ -389,14 +392,13 @@ onMounted(async () => {
           <a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']">
             <a-button type="link" class="w-full caption mt-2" size="large" @click="showColumnDropdown = true">
               <div class="flex items-center prose-sm justify-center text-gray-400">
-                <mdi-plus/>
+                <mdi-plus />
                 <!-- Add new field to this table -->
                 {{ $t('activity.addField') }}
               </div>
             </a-button>
             <template #overlay>
-              <SmartsheetColumnEditOrAdd ref="editOrAddRef" @submit="submitCallback"
+              <SmartsheetColumnEditOrAdd ref="editOrAddRef" @submit="submitCallback" @cancel="showColumnDropdown = false" />
-                                         @cancel="showColumnDropdown = false"/>
             </template>
           </a-dropdown>
         </template>
@@ -445,12 +447,11 @@ onMounted(async () => {
                 @end="drag = false"
               >
                 <template #item="{ element, index }">
-                  <div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3"
+                  <div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3" @click="activeRow = element.title">
-                       @click="activeRow = element.title">
                     <div class="flex">
                       <div class="flex flex-1">
                         <div class="flex flex-row">
-                          <mdi-drag-vertical class="flex flex-1"/>
+                          <mdi-drag-vertical class="flex flex-1" />
                         </div>
                         <SmartsheetHeaderVirtualCell
                           v-if="isVirtualCol(element)"
@@ -466,7 +467,7 @@ onMounted(async () => {
                         />
                       </div>
                       <div v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)" class="flex">
-                        <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)"/>
+                        <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
                       </div>
                     </div>
                     <a-form-item
@@ -475,7 +476,7 @@ onMounted(async () => {
                       :name="element.title"
                       :rules="[{ required: element.required, message: `${element.title} is required` }]"
                     >
-                      <SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element"/>
+                      <SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" />
                     </a-form-item>
                     <a-form-item
                       v-else
@@ -503,8 +504,8 @@ onMounted(async () => {
                       </a-form-item>
                       <a-form-item class="mt-2 mb-0 w-1/2">
                         <a-input
-                            size="small"
                           v-model:value="element.description"
+                          size="small"
                           class="form-meta-input !bg-[#dbdbdb] text-sm"
                           :placeholder="$t('msg.info.formHelpText')"
                           @change="updateColMeta(element)"
@@ -512,8 +513,7 @@ onMounted(async () => {
                       </a-form-item>
                       <div class="items-center flex">
                         <span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span>
-                        <a-switch size="small" v-model:checked="element.required" class="my-2"
+                        <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
-                                  @change="updateColMeta(element)"/>
                       </div>
                     </div>
                     <span class="text-gray-500">{{ element.description }}</span>
@@ -535,29 +535,26 @@ onMounted(async () => {
                   {{ $t('general.submit') }}
                 </a-button>
               </div>
-
             </a-card>
-
-
           </a-form>
 
           <div class="mx-10 px-10">
-
             <!-- After form is submitted -->
             <div class="text-gray-500 mt-4 mb-2">
               {{ $t('msg.info.afterFormSubmitted') }}
             </div>
             <!-- Show this message -->
             <label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
-            <a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView"/>
+            <a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView" />
 
             <!-- Other options -->
             <div class="mt-4">
               <div class="my-4">
                 <!-- Show "Submit Another Form" button -->
-                <a-switch size="small"
+                <a-switch
                   v-model:checked="formViewData.submit_another_form"
                   v-t="[`a:form-view:submit-another-form`]"
+                  size="small"
                   @change="updateView"
                 />
                 <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
@@ -565,21 +562,19 @@ onMounted(async () => {
 
               <div class="my-4">
                 <!-- Show a blank form after 5 seconds -->
-                <a-switch size="small"
+                <a-switch
                   v-model:checked="formViewData.show_blank_form"
                   v-t="[`a:form-view:show-blank-form`]"
+                  size="small"
                   @change="updateView"
                 />
                 <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
               </div>
               <div class="my-4">
-                <a-switch size="small" v-model:checked="emailMe" v-t="[`a:form-view:email-me`]"
+                <a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" size="small" @change="onEmailChange" />
-                          @change="onEmailChange"/>
                 <!-- Email me at <email> -->
                 <span class="ml-4">
-                {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{
+                  {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>
-                    state.user.value?.email
-                  }}</span>
                 </span>
               </div>
             </div>

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -17,8 +17,6 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
     <SmartsheetToolbarMoreActions v-if="isGrid" />
     <div class="flex-1" />
     <SmartsheetToolbarSearchData v-if="isGrid" class="shrink mr-2" />
-
-
   </div>
 </template>
 

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import AddRow from './AddRow.vue'
-import DeleteTable from './DeleteTable.vue'
 import LockMenu from './LockMenu.vue'
 import Reload from './Reload.vue'
 </script>

packages/nc-gui-v2/components/tabs/auth/UserManagement.vue

@@ -194,7 +194,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
         </a-button>
         <a-button v-if="isUIAllowed('newUser')" size="middle" type="primary" ghost @click="onInvite">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-            <MdiAccountPlusOutline class="mr-1"/>
+            <MdiAccountPlusOutline class="mr-1" />
             <div>{{ $t('activity.inviteTeam') }}</div>
           </div>
         </a-button>

packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { Modal } from 'ant-design-vue'
+import { Empty, Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
-import { Empty } from 'ant-design-vue'
 import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
 import { ColumnInj, IsFormInj } from '~/context'
 
@@ -114,7 +113,7 @@ const expandedFormRow = ref()
           show-less-items
         />
       </template>
-      <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE"/>
+      <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
     </div>
 
     <SmartsheetExpandedForm

packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue

@@ -116,7 +116,7 @@ const newRowState = computed(() => {
           show-less-items
         />
       </template>
-      <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE"/>
+      <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 
       <SmartsheetExpandedForm
         v-if="expandedFormDlg"

packages/nc-gui-v2/layouts/base.vue

@@ -22,7 +22,9 @@ const logout = () => {
       <Transition name="layout">
         <a-layout-header v-if="signedIn" class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg">
           <div
-            v-if="route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'"
+            v-if="
+              route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'
+            "
             class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105"
             @click="navigateTo('/')"
           >