feat(gui-v2): disable import button logic

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

@@ -65,6 +65,10 @@ const dialogShow = computed({
 const useForm = Form.useForm
 const { resetFields, validate, validateInfos } = useForm(syncSource, validators)
 
+const disableImportButton = computed(() => {
+  return !syncSource.value.details.apiKey || !syncSourceUrlOrId.value
+})
+
 async function saveAndSync() {
   await createOrUpdate()
   await sync()
@@ -213,7 +217,14 @@ onBeforeUnmount(() => {
     <template #footer>
       <div v-if="step === 1">
         <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
-        <a-button key="submit" v-t="['c:sync-airtable:save-and-sync']" type="primary" @click="saveAndSync">Import</a-button>
+        <a-button
+          key="submit"
+          v-t="['c:sync-airtable:save-and-sync']"
+          type="primary"
+          :disabled="disableImportButton"
+          @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>
@@ -235,7 +246,7 @@ onBeforeUnmount(() => {
               <a-input-password v-model:value="syncSource.details.apiKey" placeholder="Api Key" size="large" />
             </a-form-item>
             <a-form-item v-bind="validateInfos.syncSourceUrlOrId">
-              <a-input v-model:value="syncSource.details.syncSourceUrlOrId" placeholder="Shared Base ID / URL" size="large" />
+              <a-input v-model:value="syncSourceUrlOrId" placeholder="Shared Base ID / URL" size="large" />
             </a-form-item>
           </a-form-item>
           <span class="prose-xl font-bold self-center my-4">Advanced Settings</span>

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

@@ -58,6 +58,8 @@ const validators = computed(() => {
   }
 })
 
+const { resetFields, validate, validateInfos } = useForm(importState, validators)
+
 const importMeta = computed(() => {
   if (IsImportTypeExcel.value) {
     return {
@@ -94,7 +96,18 @@ const dialogShow = computed({
   },
 })
 
-const { resetFields, validate, validateInfos } = useForm(importState, validators)
+const disablePreImportButton = computed(() => {
+  if (activeKey.value === 'uploadTab') {
+    return !(importState.fileList.length > 0)
+  } else if (activeKey.value === 'urlTab') {
+    if (!validateInfos.url.validateStatus) return true
+    return validateInfos.url.validateStatus === 'error'
+  } else if (activeKey.value === 'jsonEditorTab') {
+    return !jsonEditorRef.value?.isEditorValid()
+  }
+})
+
+const disableFormatJsonButton = computed(() => !jsonEditorRef.value?.isEditorValid())
 
 async function handlePreImport() {
   loading.value = true
@@ -167,9 +180,7 @@ function handleChange(info: UploadChangeParam) {
 }
 
 function formatJson() {
-  loading.value = true
+  jsonEditorRef.value?.format()
-  jsonEditorRef.value.format()
-  loading.value = false
 }
 
 function populateUniqueTableName() {
@@ -206,10 +217,18 @@ function getAdapter(name: string, val: any) {
     <template #footer>
       <a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button>
       <a-button v-else key="cancel" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
-      <a-button v-if="activeKey === 'jsonEditorTab'" key="format" :loading="loading" @click="formatJson">Format JSON</a-button>
+      <a-button v-if="activeKey === 'jsonEditorTab'" key="format" :disabled="disableFormatJsonButton" @click="formatJson"
-      <a-button v-if="!templateEditorModal" key="pre-import" type="primary" :loading="loading" @click="handlePreImport">{{
+        >Format JSON</a-button
-        $t('activity.import')
+      >
-      }}</a-button>
+      <a-button
+        v-if="!templateEditorModal"
+        key="pre-import"
+        type="primary"
+        :loading="loading"
+        :disabled="disablePreImportButton"
+        @click="handlePreImport"
+        >{{ $t('activity.import') }}</a-button
+      >
       <a-button v-else key="import" type="primary" :loading="loading" @click="handleImport">{{ $t('activity.import') }}</a-button>
     </template>
     <TemplateEditor

packages/nc-gui-v2/components/monaco/Editor.vue

@@ -8,6 +8,7 @@ import { deepCompare } from '~/utils/deepCompare'
 const { modelValue } = defineProps<{ modelValue: any }>()
 
 const emit = defineEmits(['update:modelValue'])
+const isValid = ref(true)
 
 /**
  * Adding monaco editor to Vite
@@ -29,8 +30,13 @@ const format = () => {
   editor.setValue(JSON.stringify(JSON.parse(editor?.getValue() as string), null, 2))
 }
 
+const isEditorValid = () => {
+  return isValid.value
+}
+
 defineExpose({
   format,
+  isEditorValid,
 })
 
 onMounted(() => {
@@ -57,9 +63,11 @@ onMounted(() => {
 
     editor.onDidChangeModelContent(async (e) => {
       try {
+        isValid.value = true
         const obj = JSON.parse(editor.getValue())
         if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj)
       } catch (e) {
+        isValid.value = false
         console.log(e)
       }
     })