From a34c2ba8d5a8c30250b441a95e6f4c4312a19ce3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 25 Jul 2022 16:45:33 +0800
Subject: [PATCH] refactor(gui-v2): run lint

---
 .../components/dlg/AirtableImport.vue         |  8 ++---
 .../nc-gui-v2/components/dlg/QuickImport.vue  | 12 ++++---
 .../nc-gui-v2/components/dlg/TableCreate.vue  | 32 ++++++++-----------
 .../nc-gui-v2/utils/parsers/parserHelpers.ts  |  2 +-
 4 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index d2a1f16586..50c337bbbf 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -188,7 +188,7 @@ onMounted(() => {
     <template #footer>
       <div v-if="step === 1">
         <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
-        <a-button v-t="['c:sync-airtable:save-and-sync']" key="submit" type="primary" @click="saveAndSync">Import</a-button>
+        <a-button key="submit" v-t="['c:sync-airtable:save-and-sync']" type="primary" @click="saveAndSync">Import</a-button>
       </div>
     </template>
     <a-typography-title class="ml-4 mb-4 select-none" type="secondary" :level="5">QUICK IMPORT - AIRTABLE</a-typography-title>
@@ -234,7 +234,7 @@ onMounted(() => {
             <template #title>
               <span>Coming Soon!</span>
             </template>
-            <a-checkbox disabled v-model:checked="syncSource.details.options.syncFormula">Import Formula Columns</a-checkbox>
+            <a-checkbox v-model:checked="syncSource.details.options.syncFormula" disabled>Import Formula Columns</a-checkbox>
           </a-tooltip>
         </a-form>
         <a-divider />
@@ -249,7 +249,7 @@ onMounted(() => {
       </div>
       <div v-if="step === 2">
         <div class="mb-4 prose-xl font-bold">Logs</div>
-        <a-card bodyStyle="background-color: #000000; height:400px; overflow: auto;">
+        <a-card body-style="background-color: #000000; height:400px; overflow: auto;">
           <div v-for="({ msg, status }, i) in progress" :key="i">
             <div v-if="status === 'FAILED'" class="flex items-center">
               <MdiCloseCircleOutlineIcon class="text-red-500" />
@@ -261,12 +261,12 @@ onMounted(() => {
             </div>
           </div>
           <div
-            class="flex items-center"
             v-if="
               !progress ||
               !progress.length ||
               (progress[progress.length - 1].status !== 'COMPLETED' && progress[progress.length - 1].status !== 'FAILED')
             "
+            class="flex items-center"
           >
             <MdiLoadingIcon class="text-green-500 animate-spin" />
             <span class="text-green-500 ml-2"> Importing</span>
diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index 0974427a47..15630ae56d 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -10,8 +10,12 @@ import MdiLinkVariantIcon from '~icons/mdi/link-variant'
 import MdiCodeJSONIcon from '~icons/mdi/code-json'
 import { fieldRequiredValidator, importUrlValidator } from '~/utils/validation'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { JSONTemplateAdapter, JSONUrlTemplateAdapter, ExcelTemplateAdapter, ExcelUrlTemplateAdapter } from '~/utils/parsers'
+import { ExcelTemplateAdapter, ExcelUrlTemplateAdapter, JSONTemplateAdapter, JSONUrlTemplateAdapter } from '~/utils/parsers'
 import { useProject } from '#imports'
+const { modelValue, importType } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
 const { t } = useI18n()
 
 interface Props {
@@ -19,10 +23,8 @@ interface Props {
   importType: 'csv' | 'json' | 'excel'
 }
 
-const { modelValue, importType } = defineProps<Props>()
 const { tables } = useProject()
 const toast = useToast()
-const emit = defineEmits(['update:modelValue'])
 const activeKey = ref('uploadTab')
 const jsonEditorRef = ref()
 const loading = ref(false)
@@ -211,10 +213,10 @@ const parseAndExtractData = async (val: any, name: string) => {
             name="file"
             :multiple="true"
             :accept="importMeta.acceptTypes"
+            list-type="picture"
             @change="handleChange"
             @drop="handleDrop"
             @reject="rejectDrop"
-            list-type="picture"
           >
             <MdiFileIcon size="large" />
             <p class="ant-upload-text">Click or drag file to this area to upload</p>
@@ -232,7 +234,7 @@ const parseAndExtractData = async (val: any, name: string) => {
           </span>
         </template>
         <div class="pr-10 pb-10 pt-5">
-          <MonacoEditor v-model="importState.jsonEditor" class="h-[400px]" ref="jsonEditorRef" />
+          <MonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="h-[400px]" />
         </div>
       </a-tab-pane>
       <a-tab-pane v-else key="urlTab" :closable="false">
diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index 6de0863b1b..3ba3616bd9 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { onMounted } from '@vue/runtime-core'
-import { useProject, useTableCreate, useTabs } from '#imports'
-import { validateTableName } from '~/utils/validation'
+import type { ComponentPublicInstance } from '@vue/runtime-core'
 import { Form } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
+import { onMounted, useProject, useTableCreate, useTabs } from '#imports'
+import { validateTableName } from '~/utils/validation'
 
-const { modelValue = false } = defineProps<{ modelValue?: boolean }>()
+interface Props {
+  modelValue?: boolean
+}
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue', 'create'])
 
-const emit = defineEmits(['update:modelValue'])
+const dialogShow = useVModel(props, 'modelValue', emit)
 
 const idTypes = [
   { value: 'AI', text: 'Auto increment number' },
@@ -15,14 +19,6 @@ const idTypes = [
 ]
 
 const toast = useToast()
-const dialogShow = computed({
-  get() {
-    return modelValue
-  },
-  set(v) {
-    emit('update:modelValue', v)
-  },
-})
 
 const isIdToggleAllowed = ref(false)
 const isAdvanceOptVisible = ref(false)
@@ -51,7 +47,7 @@ const validateDuplicate = (v: string) => {
   return (tables?.value || []).every((t) => t.table_name.toLowerCase() !== (v || '').toLowerCase()) || 'Duplicate table name'
 }
 
-const inputEl = ref<any>()
+const inputEl = ref<ComponentPublicInstance>()
 
 const useForm = Form.useForm
 const formState = reactive({
@@ -75,7 +71,7 @@ const { resetFields, validate, validateInfos } = useForm(formState, validators)
 onMounted(() => {
   generateUniqueTitle()
   nextTick(() => {
-    const el = inputEl?.value?.$el
+    const el = inputEl.value?.$el
     el?.querySelector('input')?.focus()
     el?.querySelector('input')?.select()
   })
@@ -99,7 +95,7 @@ onMounted(() => {
         <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
         <!-- hint="Enter table name" -->
         <div class="mb-2">Table Name</div>
-        <a-form-item v-bind="validateInfos['title']">
+        <a-form-item v-bind="validateInfos.title">
           <a-input
             ref="inputEl"
             v-model:value="table.title"
@@ -119,7 +115,7 @@ onMounted(() => {
         <div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }">
           <!-- hint="Table name as saved in database" -->
           <div class="mb-2">{{ $t('msg.info.tableNameInDb') }}</div>
-          <a-form-item v-if="!project.prefix" v-bind="validateInfos['table_name']">
+          <a-form-item v-if="!project.prefix" v-bind="validateInfos.table_name">
             <a-input v-model:value="table.table_name" size="large" hide-details :placeholder="$t('msg.info.tableNameInDb')" />
           </a-form-item>
           <div>
@@ -133,7 +129,7 @@ onMounted(() => {
                   <template #title>
                     <span>ID column is required, you can rename this later if required.</span>
                   </template>
-                  <a-checkbox disabled v-model:checked="formState.columns.id">ID</a-checkbox>
+                  <a-checkbox v-model:checked="formState.columns.id" disabled>ID</a-checkbox>
                 </a-tooltip>
               </a-col>
               <a-col :span="6">
diff --git a/packages/nc-gui-v2/utils/parsers/parserHelpers.ts b/packages/nc-gui-v2/utils/parsers/parserHelpers.ts
index e8fef2ebdf..a2a87470b7 100644
--- a/packages/nc-gui-v2/utils/parsers/parserHelpers.ts
+++ b/packages/nc-gui-v2/utils/parsers/parserHelpers.ts
@@ -1,4 +1,4 @@
-import { UITypes, ColumnType } from 'nocodb-sdk'
+import { ColumnType, UITypes } from 'nocodb-sdk'
 import { isValidURL } from '~/utils/urlUtils'
 import { isEmail } from '~/utils/validation'