From 7247c5980d2189b772f74325330cbf4f7b4dcd47 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 16:55:24 +0800
Subject: [PATCH] feat(gui-v2): add isValid & apply tailwindcss on Editor

---
 .../nc-gui-v2/components/template/Editor.vue    | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index aed8ef8312..abc284e2ae 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -259,13 +259,24 @@ async function importTemplate() {
   } catch (e: any) {
     toast.error(await extractSdkResponseErrorMsg(e))
   } finally {
-    // TODO: close dialog when the integration is ready
     isImporting.value = false
   }
 }
 
+const isValid = () => {
+  for (const [_, o] of Object.entries(validateInfos)) {
+    if (o?.validateStatus) {
+      if (o.validateStatus === 'error') {
+        return false
+      }
+    }
+  }
+  return true
+}
+
 defineExpose({
   importTemplate,
+  isValid,
 })
 </script>
 
@@ -288,8 +299,8 @@ defineExpose({
               <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style>
                 <a-input
                   v-model:value="table.table_name"
+                  class="max-w-xs"
                   size="large"
-                  style="max-width: 300px"
                   hide-details
                   @click="(e) => e.stopPropagation()"
                   @blur="setEditableTn(tableIdx, false)"
@@ -355,10 +366,10 @@ defineExpose({
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
                     <a-auto-complete
                       v-model:value="record.uidt"
+                      class="w-52"
                       size="large"
                       :options="uiTypeOptions"
                       :filter-option="filterOption"
-                      style="width: 200px"
                     />
                   </a-form-item>
                 </template>