From b48b0afb9847deb1f3137b83220a740d707aaefc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 17:50:24 +0800
Subject: [PATCH 001/125] wip(gui-v2): more actions draft

---
 .../smartsheet-toolbar/MoreActions.vue        | 391 ++++--------------
 1 file changed, 79 insertions(+), 312 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 13f1bc5f98..95c6b9b3ce 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -1,324 +1,91 @@
-<script>
-import FileSaver from 'file-saver'
-import { ExportTypes } from 'nocodb-sdk'
-import { NOCO } from '~/lib/constants'
-import DropOrSelectFileModal from '~/components/import/DropOrSelectFileModal'
-import ColumnMappingModal from '~/components/project/spreadsheet/components/importExport/ColumnMappingModal'
-import CSVTemplateAdapter from '~/components/import/templateParsers/CSVTemplateAdapter'
-import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
-import WebhookModal from '~/components/project/tableTabs/webhook/WebhookModal'
-import WebhookSlider from '~/components/project/tableTabs/webhook/WebhookSlider'
-
-export default {
-  name: 'ExportImport',
-  components: {
-    WebhookSlider,
-    ColumnMappingModal,
-    DropOrSelectFileModal,
-  },
-  props: {
-    meta: Object,
-    nodes: Object,
-    selectedView: Object,
-    publicViewId: String,
-    queryParams: Object,
-    isView: Boolean,
-    reqPayload: Object,
-  },
-  emits: ['reload', 'showAdditionalFeatOverlay'],
-  data() {
-    return {
-      importModal: false,
-      columnMappingModal: false,
-      parsedCsv: {},
-      webhookModal: false,
-    }
-  },
-
-  methods: {
-    async onCsvFileSelection(file) {
-      const reader = new FileReader()
-      reader.onload = async (e) => {
-        const templateGenerator = new CSVTemplateAdapter(file.name, e.target.result)
-        await templateGenerator.init()
-        templateGenerator.parseData()
-        this.parsedCsv.columns = templateGenerator.getColumns()
-        this.parsedCsv.data = templateGenerator.getData()
-        this.columnMappingModal = true
-        this.importModal = false
-      }
-
-      reader.readAsText(file)
-    },
-
-    async extractCsvData() {
-      return Promise.all(
-        this.data.map(async (r) => {
-          const row = {}
-          for (const col of this.availableColumns) {
-            if (col.virtual) {
-              let prop, cn
-              if (col.mm || (col.lk && col.lk.type === 'mm')) {
-                const tn = col.mm ? col.mm.rtn : col.lk.ltn
-                const title = col.mm ? col.mm._rtn : col.lk._ltn
-                await this.$store.dispatch('meta/ActLoadMeta', {
-                  env: this.nodes.env,
-                  dbAlias: this.nodes.dbAlias,
-                  tn,
-                })
-
-                prop = `${title}MMList`
-                cn = col.lk
-                  ? col.lk._lcn
-                  : (
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pv) ||
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pk) ||
-                      {}
-                    ).title
-
-                row[col.title] = r.row[prop] && r.row[prop].map((r) => cn && r[cn])
-              } else if (col.hm || (col.lk && col.lk.type === 'hm')) {
-                const tn = col.hm ? col.hm.table_name : col.lk.ltn
-                const title = col.hm ? col.hm.title : col.lk._ltn
-
-                await this.$store.dispatch('meta/ActLoadMeta', {
-                  env: this.nodes.env,
-                  dbAlias: this.nodes.dbAlias,
-                  tn,
-                })
-
-                prop = `${title}List`
-                cn = col.lk
-                  ? col.lk._lcn
-                  : (
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pv) ||
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pk)
-                    ).title
-                row[col.title] = r.row[prop] && r.row[prop].map((r) => cn && r[cn])
-              } else if (col.bt || (col.lk && col.lk.type === 'bt')) {
-                const tn = col.bt ? col.bt.rtn : col.lk.ltn
-                const title = col.bt ? col.bt._rtn : col.lk._ltn
-                await this.$store.dispatch('meta/ActLoadMeta', {
-                  env: this.nodes.env,
-                  dbAlias: this.nodes.dbAlias,
-                  tn,
-                })
+<script setup lang="ts">
+import MdiFlashOutlineIcon from '~icons/mdi/flash-outline'
+import MdiDownloadOutlineIcon from '~icons/mdi/download-outline'
+import MdiUploadOutlineIcon from '~icons/mdi/upload-outline'
+import MdiViewListOutlineIcon from '~icons/mdi/view-list-outline'
+import MdiHookIcon from '~icons/mdi/hook'
+
+const { isUIAllowed } = useUIPermission()
+// TODO:: identify based on meta
+const isView = ref(false)
+
+function exportCsv() {
+  // TODO
+}
 
-                prop = `${title}Read`
-                cn = col.lk
-                  ? col.lk._lcn
-                  : (
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pv) ||
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pk) ||
-                      {}
-                    ).title
-                row[col.title] = r.row[prop] && r.row[prop] && cn && r.row[prop][cn]
-              } else {
-                row[col.title] = r.row[col.title]
-              }
-            } else if (col.uidt === 'Attachment') {
-              let data = []
-              try {
-                if (typeof r.row[col.title] === 'string') {
-                  data = JSON.parse(r.row[col.title])
-                } else if (r.row[col.title]) {
-                  data = r.row[col.title]
-                }
-              } catch {}
-              row[col.title] = (data || []).map((a) => `${a.title}(${a.url})`)
-            } else {
-              row[col.title] = r.row[col.title]
-            }
-          }
-          return row
-        }),
-      )
-    },
-    async exportCsv() {
-      let offset = 0
-      let c = 1
+function importCsv() {
+  // TODO
+}
 
-      try {
-        while (!isNaN(offset) && offset > -1) {
-          let res
-          if (this.publicViewId) {
-            res = await this.$api.public.csvExport(this.publicViewId, ExportTypes.CSV, {
-              responseType: 'blob',
-              query: {
-                fields:
-                  this.queryParams &&
-                  this.queryParams.fieldsOrder &&
-                  this.queryParams.fieldsOrder.filter((c) => this.queryParams.showFields[c]),
-                offset,
-                sortArrJson: JSON.stringify(
-                  this.reqPayload &&
-                    this.reqPayload.sorts &&
-                    this.reqPayload.sorts.map(({ fk_column_id, direction }) => ({
-                      direction,
-                      fk_column_id,
-                    })),
-                ),
-                filterArrJson: JSON.stringify(this.reqPayload && this.reqPayload.filters),
-              },
-              headers: {
-                'xc-password': this.reqPayload && this.reqPayload.password,
-              },
-            })
-          } else {
-            res = await this.$api.dbViewRow.export(
-              NOCO,
-              this.projectName,
-              this.meta.title,
-              this.selectedView.title,
-              ExportTypes.CSV,
-              {
-                responseType: 'blob',
-                query: {
-                  offset,
-                },
-              },
-            )
-          }
-          const { data } = res
+function openSharedViewModal() {
+  // TODO:
+}
 
-          offset = +res.headers['nc-export-offset']
-          const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
-          FileSaver.saveAs(blob, `${this.meta.title}_exported_${c++}.csv`)
-          if (offset > -1) {
-            this.$toast.info('Downloading more files').goAway(3000)
-          } else {
-            this.$toast.success('Successfully exported all table data').goAway(3000)
-          }
-        }
-      } catch (e) {
-        console.log(e)
-        this.$toast.error(e.message).goAway(3000)
-      }
-    },
-    async importData(columnMappings) {
-      try {
-        const data = this.parsedCsv.data
-        for (let i = 0, progress = 0; i < data.length; i += 500) {
-          const batchData = data.slice(i, i + 500).map((row) =>
-            columnMappings.reduce((res, col) => {
-              // todo: parse data
-              if (col.enabled && col.destCn) {
-                const v = this.meta && this.meta.columns.find((c) => c.title === col.destCn)
-                let input = row[col.sourceCn]
-                // parse potential boolean values
-                if (v.uidt === UITypes.Checkbox) {
-                  input = input.replace(/["']/g, '').toLowerCase().trim()
-                  if (input === 'false' || input === 'no' || input === 'n') {
-                    input = '0'
-                  } else if (input === 'true' || input === 'yes' || input === 'y') {
-                    input = '1'
-                  }
-                } else if (v.uidt === UITypes.Number) {
-                  if (input === '') {
-                    input = null
-                  }
-                } else if (v.uidt === UITypes.SingleSelect || v.uidt === UITypes.MultiSelect) {
-                  if (input === '') {
-                    input = null
-                  }
-                }
-                res[col.destCn] = input
-              }
-              return res
-            }, {}),
-          )
-          await this.$api.dbTableRow.bulkCreate(NOCO, this.projectName, this.meta.title, batchData)
-          progress += batchData.length
-          this.$store.commit('loader/MutMessage', `Importing data : ${progress}/${data.length}`)
-          this.$store.commit('loader/MutProgress', Math.round((100 * progress) / data.length))
-        }
-        this.columnMappingModal = false
-        this.$store.commit('loader/MutClear')
-        this.$emit('reload')
-        this.$toast.success('Successfully imported table data').goAway(3000)
-      } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
-      }
-    },
-  },
+function openWebhookModal() {
+  // TODO:
 }
 </script>
 
 <template>
-  <div>
-    <v-menu open-on-hover bottom offset-y transition="slide-y-transition">
-      <template #activator="{ on }">
-        <v-btn
-          v-t="['c:actions']"
-          outlined
-          class="nc-actions-menu-btn caption px-2 nc-remove-border font-weight-medium"
-          small
-          text
-          v-on="on"
-        >
-          <v-icon small color="#777"> mdi-flash-outline </v-icon>
-          <!-- More -->
+  <a-menu offset-y transition="slide-y-transition" mode="horizontal">
+    <a-sub-menu key="sub1">
+      <template #icon>
+        <setting-outlined />
+      </template>
+      <template #title>
+        <span class="flex items-center gap-2">
+          <MdiFlashOutlineIcon />
           {{ $t('general.more') }}
-
-          <v-icon small color="#777"> mdi-menu-down </v-icon>
-        </v-btn>
+        </span>
       </template>
-
-      <v-list dense>
-        <v-list-item v-t="['a:actions:download-csv']" dense @click="exportCsv">
-          <v-list-item-title>
-            <v-icon small class="mr-1"> mdi-download-outline </v-icon>
-            <span class="caption">
-              <!-- Download as CSV -->
-              {{ $t('activity.downloadCSV') }}
-            </span>
-          </v-list-item-title>
-        </v-list-item>
-        <v-list-item v-if="_isUIAllowed('csvImport') && !isView" v-t="['a:actions:upload-csv']" dense @click="importModal = true">
-          <v-list-item-title>
-            <v-icon small class="mr-1" color=""> mdi-upload-outline </v-icon>
-            <span class="caption">
-              <!-- Upload CSV -->
-              {{ $t('activity.uploadCSV') }}
-            </span>
-
-            <span class="caption grey--text">(<x-icon small color="grey lighten-2"> mdi-alpha </x-icon> version)</span>
-          </v-list-item-title>
-        </v-list-item>
-        <v-list-item
-          v-if="_isUIAllowed('SharedViewList') && !isView"
-          v-t="['a:actions:shared-view-list']"
-          dense
-          @click="$emit('showAdditionalFeatOverlay', 'shared-views')"
-        >
-          <v-list-item-title>
-            <v-icon small class="mr-1" color=""> mdi-view-list-outline </v-icon>
-            <span class="caption">
-              <!-- Shared View List -->
-              {{ $t('activity.listSharedView') }}
-            </span>
-          </v-list-item-title>
-        </v-list-item>
-        <v-list-item v-if="_isUIAllowed('webhook') && !isView" v-t="['c:actions:webhook']" dense @click="webhookModal = true">
-          <v-list-item-title>
-            <v-icon small class="mr-1" color=""> mdi-hook </v-icon>
-            <span class="caption"> Webhooks </span>
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-menu>
-    <DropOrSelectFileModal v-model="importModal" accept=".csv" text="CSV" @file="onCsvFileSelection" />
-    <ColumnMappingModal
-      v-if="columnMappingModal && meta"
-      v-model="columnMappingModal"
-      :meta="meta"
-      :import-data-columns="parsedCsv.columns"
-      :parsed-csv="parsedCsv"
-      @import="importData"
-    />
-    <!--    <webhook-modal v-if="webhookModal" v-model="webhookModal" :meta="meta" /> -->
-    <WebhookSlider v-model="webhookModal" :meta="meta" />
-  </div>
+      <a-menu-item key="action:downloadCSV" v-t="['c:actions']" @click="exportCsv">
+        <span class="flex items-center gap-2">
+          <MdiDownloadOutlineIcon class="text-primary" />
+          <!-- Download as CSV -->
+          {{ $t('activity.downloadCSV') }}
+        </span>
+      </a-menu-item>
+
+      <a-menu-item
+        v-if="isUIAllowed('csvImport') && !isView"
+        key="action:uploadCSV"
+        v-t="['a:actions:upload-csv']"
+        @click="importCsv"
+      >
+        <span class="flex items-center gap-2">
+          <MdiUploadOutlineIcon class="text-primary" />
+          <!-- Upload CSV -->
+          {{ $t('activity.uploadCSV') }}
+        </span>
+      </a-menu-item>
+
+      <a-menu-item
+        v-if="isUIAllowed('SharedViewList') && !isView"
+        key="action:listSharedView"
+        v-t="['a:actions:shared-view-list']"
+        @click="openSharedViewModal"
+      >
+        <span class="flex items-center gap-2">
+          <MdiViewListOutlineIcon class="text-primary" />
+          <!-- Shared View List -->
+          {{ $t('activity.listSharedView') }}
+        </span>
+      </a-menu-item>
+
+      <a-menu-item
+        v-if="isUIAllowed('webhook') && !isView"
+        key="action:webhooks"
+        v-t="['c:actions:webhook']"
+        @click="openWebhookModal"
+      >
+        <span class="flex items-center gap-2">
+          <MdiHookIcon class="text-primary" />
+          <!-- TODO: i18n -->
+          Webhooks
+        </span>
+      </a-menu-item>
+    </a-sub-menu>
+  </a-menu>
 </template>
 
 <style scoped></style>

From bf418e63b00aecf4cf169babb4ee4d53d8b696cd Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 17:50:34 +0800
Subject: [PATCH 002/125] feat(gui-v2): include SmartsheetToolbarMoreActions

---
 packages/nc-gui-v2/components/smartsheet/Toolbar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index a67a8c90e7..c7a6fdd3cc 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -5,6 +5,7 @@
     <SmartsheetToolbarFieldsMenu :show-system-fields="false" />
     <SmartsheetToolbarColumnFilterMenu />
     <SmartsheetToolbarSortListMenu />
+    <SmartsheetToolbarMoreActions />
   </v-toolbar>
 </template>
 

From 81fe2454841ac721dfe4145654aeaa1d3245d23c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 20:00:19 +0800
Subject: [PATCH 003/125] feat(gui-v2): add ADrawer

---
 packages/nc-gui-v2/components.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index a2373af8bd..49e4512a11 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
     ADivider: typeof import('ant-design-vue/es')['Divider']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']

From 1d4d577cc9edab7c2ce877c1c28a90b9860e019c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 20:01:13 +0800
Subject: [PATCH 004/125] feat(gui-v2): webhook drawer

---
 .../nc-gui-v2/components/webhook/Drawer.vue   | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/webhook/Drawer.vue

diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
new file mode 100644
index 0000000000..4b5de4745a
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+interface Props {
+  modelValue: boolean
+}
+
+const { modelValue } = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
+
+const editOrAdd = ref(false)
+
+const dialogShow = computed({
+  get() {
+    return modelValue
+  },
+  set(v) {
+    emit('update:modelValue', v)
+  },
+})
+</script>
+
+<template>
+  <a-drawer v-model:visible="dialogShow" :closable="false" placement="right" width="700px" @keydown.esc="dialogShow = false">
+    <WebhookEditor v-if="editOrAdd" />
+    <WebhookList v-else @edit-or-add="editOrAdd = true" />
+    <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
+      <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">
+        🚀 We are Hiring! 🚀
+      </a-button>
+    </div>
+  </a-drawer>
+</template>

From 69e4e62e3ef9ea7f21f335e6d3c6b114af8f7a9d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 20:01:21 +0800
Subject: [PATCH 005/125] feat(gui-v2): webhook list

---
 .../nc-gui-v2/components/webhook/List.vue     | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/webhook/List.vue

diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
new file mode 100644
index 0000000000..99d97ec3e8
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk'
+import { MetaInj } from '~/context'
+import useViews from '~/composables/useViews'
+interface Props {
+  visible: boolean
+}
+
+const { visible } = defineProps<Props>()
+const emit = defineEmits(['visible', 'editOrAdd'])
+const hooks = ref([])
+const meta = inject(MetaInj)
+const { views, loadViews } = useViews(meta as Ref<TableType>)
+
+const afterVisibleChange = (bool: boolean) => {
+  console.log('visible', bool)
+  emit('visible')
+}
+
+onMounted(() => {
+  loadViews()
+})
+</script>
+
+<template>
+  <div class="h-5/6">
+    <a-typography-title class="inline" :level="4">{{ views?.[0].title }} : Webhooks </a-typography-title>
+    <a-button class="float-right" type="primary" size="large" @click="emit('editOrAdd')">
+      <!-- TODO: i18n -->
+      Create Webhook
+    </a-button>
+    <a-divider />
+    <div v-if="hooks.length > 0">TODO</div>
+    <div v-else class="pa-4 bg-gray-100 text-gray-600">
+      Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
+    </div>
+  </div>
+</template>

From 2272b0a8a6a81368352653911d22504c43375794 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 20:01:43 +0800
Subject: [PATCH 006/125] feat(gui-v2): webhook editor

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 130 ++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/webhook/Editor.vue

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
new file mode 100644
index 0000000000..b50b426c51
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { Form } from 'ant-design-vue'
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk'
+import { MetaInj } from '~/context'
+import useViews from '~/composables/useViews'
+import MdiContentSaveIcon from '~icons/mdi/content-save'
+
+const meta = inject(MetaInj)
+const { views, loadViews } = useViews(meta as Ref<TableType>)
+
+const useForm = Form.useForm
+const formState = reactive({
+  title: '',
+  notification: {
+    type: 'URL',
+  },
+  method: 'GET',
+})
+
+const eventList = ref([
+  {
+    title: 'After Insert',
+    value: 'after insert',
+  },
+  {
+    title: 'After Update',
+    value: 'after update',
+  },
+  {
+    title: 'After Delete',
+    value: 'after delete',
+  },
+])
+
+const notificationList = ref([
+  { type: 'URL' },
+  { type: 'Email' },
+  { type: 'Slack' },
+  { type: 'Microsoft Teams' },
+  { type: 'Discord' },
+  { type: 'Mattermost' },
+  { type: 'Twilio' },
+  { type: 'Whatsapp Twilio' },
+])
+
+const methodList = ref([
+  { title: 'GET' },
+  { title: 'POST' },
+  { title: 'DELETE' },
+  { title: 'PUT' },
+  { title: 'HEAD' },
+  { title: 'PATCH' },
+])
+
+const validators = computed(() => {
+  return {}
+})
+const { resetFields, validate, validateInfos } = useForm(formState, validators)
+
+onMounted(() => {
+  loadViews()
+})
+</script>
+
+<template>
+  <div class="float-left pt-3">
+    <a-typography-title class="inline" :level="4">{{ views?.[0].title }} : Webhooks </a-typography-title>
+  </div>
+  <div class="float-right mb-5">
+    <a-button class="mr-3" type="primary" size="large" @click="emit('editOrAdd')">
+      <div class="flex items-center">
+        <MdiContentSaveIcon class="mr-2" />
+        <!-- TODO: i18n -->
+        Test Webhook
+      </div>
+    </a-button>
+    <a-button class="mt-2" type="primary" size="large" @click="emit('editOrAdd')">
+      <div class="flex items-center">
+        <MdiContentSaveIcon class="mr-2" />
+        <!-- TODO: i18n -->
+        Save
+      </div>
+    </a-button>
+  </div>
+  <a-divider />
+  <a-form :model="formState" name="create-or-edit-webhook">
+    <a-form-item>
+      <a-row class="mb-5" type="flex">
+        <a-input v-model:value="formState.title" size="large" :placeholder="$t('general.title')" />
+      </a-row>
+      <a-row class="mb-5" type="flex" :gutter="[16, 16]">
+        <a-col :span="12">
+          <a-form-item v-bind="validateInfos.event">
+            <a-select v-model:value="formState.event" size="large" :placeholder="$t('general.event')">
+              <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value">{{ event.title }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item v-bind="validateInfos.notification.type">
+            <a-select v-model:value="formState.notification.type" size="large" :placeholder="$t('general.notification')">
+              <a-select-option v-for="(notification, i) in notificationList" :key="i" :value="notification.type">{{
+                notification.type
+              }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="formState.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 16]">
+        <a-col :span="6">
+          <a-select v-model:value="formState.method" size="large">
+            <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
+          </a-select>
+        </a-col>
+        <a-col :span="18">
+          <a-input></a-input>
+        </a-col>
+      </a-row>
+
+      <a-row v-if="formState.notification.type === 'Slack'" class="mb-5" type="flex"> TODO: Slack </a-row>
+      <a-row v-if="formState.notification.type === 'Microsoft Teams'" class="mb-5" type="flex"> TODO: Microsoft Teams </a-row>
+      <a-row v-if="formState.notification.type === 'Discord'" class="mb-5" type="flex"> TODO: Discord </a-row>
+      <a-row v-if="formState.notification.type === 'Mattermost'" class="mb-5" type="flex"> TODO: Mattermost </a-row>
+      <!--  TODO: handle inputs[hook.notification.type] -->
+      <!--  TODO: handle column filter -->
+      <!--  TODO: sample payload -->
+    </a-form-item>
+  </a-form>
+</template>

From 786d87a3e2afbfe0eed4a638690d3ea0f842877d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 20:03:15 +0800
Subject: [PATCH 007/125] feat(gui-v2): include WebhookDrawer

---
 .../nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 95c6b9b3ce..1d339644b4 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -8,6 +8,7 @@ import MdiHookIcon from '~icons/mdi/hook'
 const { isUIAllowed } = useUIPermission()
 // TODO:: identify based on meta
 const isView = ref(false)
+const showWebhookDrawer = ref(false)
 
 function exportCsv() {
   // TODO
@@ -22,7 +23,7 @@ function openSharedViewModal() {
 }
 
 function openWebhookModal() {
-  // TODO:
+  showWebhookDrawer.value = true
 }
 </script>
 
@@ -86,6 +87,7 @@ function openWebhookModal() {
       </a-menu-item>
     </a-sub-menu>
   </a-menu>
+  <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 </template>
 
 <style scoped></style>

From eef5a2110d9e06559380378385a790026bb9bcee Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 20:08:36 +0800
Subject: [PATCH 008/125] fix(gui-v2): validators

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index b50b426c51..5ed73d8643 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -54,7 +54,12 @@ const methodList = ref([
 ])
 
 const validators = computed(() => {
-  return {}
+  return {
+    'title': [],
+    'event': [],
+    'notification.type': [],
+    'method': [],
+  }
 })
 const { resetFields, validate, validateInfos } = useForm(formState, validators)
 
@@ -98,7 +103,7 @@ onMounted(() => {
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item v-bind="validateInfos.notification.type">
+          <a-form-item v-bind="validateInfos['notification.type']">
             <a-select v-model:value="formState.notification.type" size="large" :placeholder="$t('general.notification')">
               <a-select-option v-for="(notification, i) in notificationList" :key="i" :value="notification.type">{{
                 notification.type

From 8f5f71cbbbfb117fd83e2498cf55722675bae057 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 22:07:23 +0800
Subject: [PATCH 009/125] feat(gui-v2): render webhook form input

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 143 +++++++++++++++++-
 1 file changed, 136 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 5ed73d8643..1af6f9e539 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -18,6 +18,104 @@ const formState = reactive({
   method: 'GET',
 })
 
+const formInput = ref({
+  'Email': [
+    {
+      key: 'to',
+      label: 'To Address',
+      placeholder: 'To Address',
+      type: 'SingleLineText',
+      required: true,
+    },
+    {
+      key: 'subject',
+      label: 'Subject',
+      placeholder: 'Subject',
+      type: 'SingleLineText',
+      required: true,
+    },
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Slack': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Microsoft Teams': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Discord': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Mattermost': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Twilio': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+    {
+      key: 'to',
+      label: 'Comma separated Mobile #',
+      placeholder: 'Comma separated Mobile #',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Whatsapp Twilio': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+    {
+      key: 'to',
+      label: 'Comma separated Mobile #',
+      placeholder: 'Comma separated Mobile #',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+})
+const notification = ref({
+  method: 'POST',
+  body: '{{ json data }}',
+})
+
 const eventList = ref([
   {
     title: 'After Insert',
@@ -63,6 +161,10 @@ const validators = computed(() => {
 })
 const { resetFields, validate, validateInfos } = useForm(formState, validators)
 
+function onNotTypeChange() {
+  // TODO
+}
+
 onMounted(() => {
   loadViews()
 })
@@ -94,7 +196,7 @@ onMounted(() => {
       <a-row class="mb-5" type="flex">
         <a-input v-model:value="formState.title" size="large" :placeholder="$t('general.title')" />
       </a-row>
-      <a-row class="mb-5" type="flex" :gutter="[16, 16]">
+      <a-row type="flex" :gutter="[16, 16]">
         <a-col :span="12">
           <a-form-item v-bind="validateInfos.event">
             <a-select v-model:value="formState.event" size="large" :placeholder="$t('general.event')">
@@ -104,9 +206,14 @@ onMounted(() => {
         </a-col>
         <a-col :span="12">
           <a-form-item v-bind="validateInfos['notification.type']">
-            <a-select v-model:value="formState.notification.type" size="large" :placeholder="$t('general.notification')">
-              <a-select-option v-for="(notification, i) in notificationList" :key="i" :value="notification.type">{{
-                notification.type
+            <a-select
+              v-model:value="formState.notification.type"
+              size="large"
+              :placeholder="$t('general.notification')"
+              @change="onNotTypeChange"
+            >
+              <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">{{
+                notificationOption.type
               }}</a-select-option>
             </a-select>
           </a-form-item>
@@ -119,15 +226,37 @@ onMounted(() => {
           </a-select>
         </a-col>
         <a-col :span="18">
-          <a-input></a-input>
+          <a-form-item v-bind="validateInfos['notification.url']">
+            <a-input v-model:value="formState.url" size="large" placeholder="http://example.com" />
+          </a-form-item>
         </a-col>
       </a-row>
-
       <a-row v-if="formState.notification.type === 'Slack'" class="mb-5" type="flex"> TODO: Slack </a-row>
       <a-row v-if="formState.notification.type === 'Microsoft Teams'" class="mb-5" type="flex"> TODO: Microsoft Teams </a-row>
       <a-row v-if="formState.notification.type === 'Discord'" class="mb-5" type="flex"> TODO: Discord </a-row>
       <a-row v-if="formState.notification.type === 'Mattermost'" class="mb-5" type="flex"> TODO: Mattermost </a-row>
-      <!--  TODO: handle inputs[hook.notification.type] -->
+      <a-row v-if="formInput[formState.notification.type] && notification" class="mb-5" type="flex">
+        <a-col v-for="(input, i) in formInput[formState.notification.type]" :key="i" :span="24">
+          <a-form-item v-if="input.type === 'LongText'">
+            <a-textarea
+              :key="input.key"
+              v-model:value="notification[input.key]"
+              outlined
+              :placeholder="input.label"
+              :rules="[(v) => !input.required || !!v || `${$t('general.required')}`]"
+            />
+          </a-form-item>
+          <a-form-item v-else>
+            <a-input
+              :key="input.key"
+              v-model:value="notification[input.key]"
+              class="caption"
+              :placeholder="input.label"
+              :rules="[(v) => !input.required || !!v || `${$t('general.required')}`]"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
       <!--  TODO: handle column filter -->
       <!--  TODO: sample payload -->
     </a-form-item>

From 25eec485cd33039b5decc8f70a7446abbfe746c4 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 22:47:48 +0800
Subject: [PATCH 010/125] feat(gui-v2): add sample payload part

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 1af6f9e539..683b5a3fc4 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -17,7 +17,7 @@ const formState = reactive({
   },
   method: 'GET',
 })
-
+const filters = []
 const formInput = ref({
   'Email': [
     {
@@ -258,7 +258,35 @@ onMounted(() => {
         </a-col>
       </a-row>
       <!--  TODO: handle column filter -->
-      <!--  TODO: sample payload -->
+      <div>
+        <span class="caption grey--text">
+          <em>Available context variables are <strong>data and user</strong></em>
+          <v-tooltip top>
+            <template #activator="{ on }">
+              <v-icon small color="grey" class="ml-2" v-on="on">mdi-information</v-icon>
+            </template>
+            <span class="caption">
+              <strong>data</strong> : Row data <br />
+              <strong>user</strong> : User information<br />
+            </span>
+          </v-tooltip>
+          <br />
+          <a href="https://docs.nocodb.com/developer-resources/webhooks/" target="_blank">
+            <!-- Document Reference -->
+            {{ $t('labels.docReference') }}
+          </a>
+        </span>
+        <WebhookTest
+          :hook="{
+            ...formState,
+            filters,
+            notification: {
+              ...formState.notification,
+              payload: notification,
+            },
+          }"
+        />
+      </div>
     </a-form-item>
   </a-form>
 </template>

From 3cc42470fa49bddfc4a1ee6bd65cc4b72b440e69 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 22:48:01 +0800
Subject: [PATCH 011/125] feat(gui-v2): add WebhookTest

---
 .../nc-gui-v2/components/webhook/Test.vue     | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/webhook/Test.vue

diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
new file mode 100644
index 0000000000..6144639494
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onMounted } from '@vue/runtime-core'
+
+interface Props {
+  hook: Record<string, any>
+}
+
+const { hook } = defineProps<Props>()
+
+const { $state, $api, $e } = useNuxtApp()
+
+const { getMeta, removeMeta } = useMetas()
+const isVisible = ref(false)
+const sampleData = ref({
+  data: {},
+  user: {},
+})
+const activeKey = ref(1)
+
+watch(
+  () => hook?.operation,
+  async (v) => {
+    await loadSampleData()
+  },
+)
+
+async function loadSampleData() {
+  // TODO: get model id
+  const modelId = 'XXX'
+  sampleData.value = {
+    data: $api.dbTableWebhook.samplePayloadGet(modelId, hook?.operation),
+    user: $state.user.value as Record<string, any>,
+  }
+}
+
+onMounted(async () => {
+  console.log(hook)
+  await loadSampleData()
+})
+</script>
+
+<template>
+  <a-collapse v-model:activeKey="activeKey" ghost>
+    <a-collapse-panel key="1" header="Sample Payload">
+      <!-- TODO: need changes from Quick Import PR -->
+      <MonacoEditor v-model:value="sampleData" read-only class="caption mb-2 min-h-75" />
+    </a-collapse-panel>
+  </a-collapse>
+</template>

From 6e016c54043ef22356c0f0b5538bf1151d124bbc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 22:50:10 +0800
Subject: [PATCH 012/125] fix(gui-v2): inject meta to get model id

---
 packages/nc-gui-v2/components/webhook/Test.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index 6144639494..74be2ed77f 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from '@vue/runtime-core'
+import { MetaInj } from '~/context'
 
 interface Props {
   hook: Record<string, any>
@@ -8,8 +9,7 @@ interface Props {
 const { hook } = defineProps<Props>()
 
 const { $state, $api, $e } = useNuxtApp()
-
-const { getMeta, removeMeta } = useMetas()
+const meta = inject(MetaInj)
 const isVisible = ref(false)
 const sampleData = ref({
   data: {},
@@ -25,16 +25,13 @@ watch(
 )
 
 async function loadSampleData() {
-  // TODO: get model id
-  const modelId = 'XXX'
   sampleData.value = {
-    data: $api.dbTableWebhook.samplePayloadGet(modelId, hook?.operation),
+    data: $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation),
     user: $state.user.value as Record<string, any>,
   }
 }
 
 onMounted(async () => {
-  console.log(hook)
   await loadSampleData()
 })
 </script>

From c60b65407a630fd91b5a381763e4e07f7a34a939 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 22:57:11 +0800
Subject: [PATCH 013/125] feat(gui-v2): add icons for notification options

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 683b5a3fc4..80b0ca6195 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -5,6 +5,14 @@ import type { TableType } from 'nocodb-sdk'
 import { MetaInj } from '~/context'
 import useViews from '~/composables/useViews'
 import MdiContentSaveIcon from '~icons/mdi/content-save'
+import MdiLinkIcon from '~icons/mdi/link'
+import MdiEmailIcon from '~icons/mdi/email'
+import MdiSlackIcon from '~icons/mdi/slack'
+import MdiMicrosoftTeamsIcon from '~icons/mdi/microsoft-teams'
+import MdiDiscordIcon from '~icons/mdi/discord'
+import MdiChatIcon from '~icons/mdi/chat'
+import MdiWhatsAppIcon from '~icons/mdi/whatsapp'
+import MdiCellPhoneMessageIcon from '~icons/mdi/cellphone-message'
 
 const meta = inject(MetaInj)
 const { views, loadViews } = useViews(meta as Ref<TableType>)
@@ -200,7 +208,9 @@ onMounted(() => {
         <a-col :span="12">
           <a-form-item v-bind="validateInfos.event">
             <a-select v-model:value="formState.event" size="large" :placeholder="$t('general.event')">
-              <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value">{{ event.title }}</a-select-option>
+              <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value">
+                {{ event.title }}
+              </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
@@ -212,9 +222,19 @@ onMounted(() => {
               :placeholder="$t('general.notification')"
               @change="onNotTypeChange"
             >
-              <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">{{
-                notificationOption.type
-              }}</a-select-option>
+              <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
+                <div class="flex items-center">
+                  <MdiLinkIcon v-if="notificationOption.type === 'URL'" class="mr-2" />
+                  <MdiEmailIcon v-if="notificationOption.type === 'Email'" class="mr-2" />
+                  <MdiSlackIcon v-if="notificationOption.type === 'Slack'" class="mr-2" />
+                  <MdiMicrosoftTeamsIcon v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" />
+                  <MdiDiscordIcon v-if="notificationOption.type === 'Discord'" class="mr-2" />
+                  <MdiChatIcon v-if="notificationOption.type === 'Mattermost'" class="mr-2" />
+                  <MdiWhatsAppIcon v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" />
+                  <MdiCellPhoneMessageIcon v-if="notificationOption.type === 'Twilio'" class="mr-2" />
+                  {{ notificationOption.type }}
+                </div>
+              </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>

From 57b8053f58673d6f9277c0126eaa332f52150443 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 00:27:51 +0800
Subject: [PATCH 014/125] wip(gui-v2): editHook

---
 packages/nc-gui-v2/components/webhook/Drawer.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
index 4b5de4745a..393c9b40c2 100644
--- a/packages/nc-gui-v2/components/webhook/Drawer.vue
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -16,12 +16,17 @@ const dialogShow = computed({
     emit('update:modelValue', v)
   },
 })
+
+function editHook(hook: Record<string, any>) {
+  editOrAdd.value = true
+  // TODO: update editor ref hook
+}
 </script>
 
 <template>
   <a-drawer v-model:visible="dialogShow" :closable="false" placement="right" width="700px" @keydown.esc="dialogShow = false">
     <WebhookEditor v-if="editOrAdd" />
-    <WebhookList v-else @edit-or-add="editOrAdd = true" />
+    <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
     <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
       <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">
         🚀 We are Hiring! 🚀

From 7ef2463cbcbcca3f4eeecde7e1b07eb1b4ea4cd7 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 00:31:55 +0800
Subject: [PATCH 015/125] feat(gui-v2): webhook list

---
 .../nc-gui-v2/components/webhook/List.vue     | 53 +++++++++++--------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index 99d97ec3e8..2585a9013b 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -1,37 +1,48 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk'
 import { MetaInj } from '~/context'
-import useViews from '~/composables/useViews'
-interface Props {
-  visible: boolean
-}
+import MdiHookIcon from '~icons/mdi/hook'
+import MdiDeleteIcon from '~icons/mdi/delete'
 
-const { visible } = defineProps<Props>()
-const emit = defineEmits(['visible', 'editOrAdd'])
+const emit = defineEmits(['edit'])
 const hooks = ref([])
 const meta = inject(MetaInj)
-const { views, loadViews } = useViews(meta as Ref<TableType>)
-
-const afterVisibleChange = (bool: boolean) => {
-  console.log('visible', bool)
-  emit('visible')
-}
-
-onMounted(() => {
-  loadViews()
-})
 </script>
 
 <template>
   <div class="h-5/6">
-    <a-typography-title class="inline" :level="4">{{ views?.[0].title }} : Webhooks </a-typography-title>
-    <a-button class="float-right" type="primary" size="large" @click="emit('editOrAdd')">
+    <a-typography-title class="inline" :level="4">{{ meta.title }} : Webhooks </a-typography-title>
+    <a-button class="float-right" type="primary" size="large" @click="emit('add')">
       <!-- TODO: i18n -->
       Create Webhook
     </a-button>
     <a-divider />
-    <div v-if="hooks.length > 0">TODO</div>
+    <div v-if="hooks.length">
+      <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer bg-gray-100 pl-5 pr-5 pt-2 pb-2">
+        <template #renderItem="{ item }">
+          <a-list-item @click="emit('edit', item)">
+            <a-list-item-meta :description="item.event">
+              <template #title>
+                {{ item.title }}
+              </template>
+              <template #avatar>
+                <div class="mt-4">
+                  <MdiHookIcon />
+                </div>
+              </template>
+            </a-list-item-meta>
+            <template #extra>
+              <div>
+                <!-- Notify Via -->
+                <div class="mr-2">{{ $t('labels.notifyVia') }} : {{ item?.notification?.type }}</div>
+                <div class="float-right pt-2 pr-1">
+                  <MdiDeleteIcon />
+                </div>
+              </div>
+            </template>
+          </a-list-item>
+        </template>
+      </a-list>
+    </div>
     <div v-else class="pa-4 bg-gray-100 text-gray-600">
       Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
     </div>

From f8eb09efb1048cafc0a033c1389f747cdd956627 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 11:29:50 +0800
Subject: [PATCH 016/125] feat(gui-v2): Slack Channel

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 80b0ca6195..d6595d60a8 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -14,18 +14,36 @@ import MdiChatIcon from '~icons/mdi/chat'
 import MdiWhatsAppIcon from '~icons/mdi/whatsapp'
 import MdiCellPhoneMessageIcon from '~icons/mdi/cellphone-message'
 
+interface Option {
+  label: string
+  value: string
+}
+
 const meta = inject(MetaInj)
+
 const { views, loadViews } = useViews(meta as Ref<TableType>)
 
 const useForm = Form.useForm
+
 const formState = reactive({
   title: '',
   notification: {
     type: 'URL',
+    channel: '',
   },
   method: 'GET',
 })
+
+const slackChannels = ref()
+
+const teamsChannels = ref()
+
+const discordChannels = ref()
+
+const mattermostChannels = ref()
+
 const filters = []
+
 const formInput = ref({
   'Email': [
     {
@@ -119,6 +137,7 @@ const formInput = ref({
     },
   ],
 })
+
 const notification = ref({
   method: 'POST',
   body: '{{ json data }}',
@@ -173,6 +192,10 @@ function onNotTypeChange() {
   // TODO
 }
 
+function filterOption(input: string, option: Option) {
+  return option.value.toUpperCase().includes(input.toUpperCase())
+}
+
 onMounted(() => {
   loadViews()
 })
@@ -251,7 +274,19 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formState.notification.type === 'Slack'" class="mb-5" type="flex"> TODO: Slack </a-row>
+      <a-row v-if="formState.notification.type === 'Slack'" type="flex">
+        <a-col :span="24">
+          <a-form-item v-bind="validateInfos['notification.channels']">
+            <a-auto-complete
+              v-model:value="formState.channels"
+              size="large"
+              :options="slackChannels"
+              placeholder="Select Slack channels"
+              :filter-option="filterOption"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
       <a-row v-if="formState.notification.type === 'Microsoft Teams'" class="mb-5" type="flex"> TODO: Microsoft Teams </a-row>
       <a-row v-if="formState.notification.type === 'Discord'" class="mb-5" type="flex"> TODO: Discord </a-row>
       <a-row v-if="formState.notification.type === 'Mattermost'" class="mb-5" type="flex"> TODO: Mattermost </a-row>

From 6f27ade4f25e6ad68353ae1deae0b81a9a45619f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 11:31:05 +0800
Subject: [PATCH 017/125] feat(gui-v2): MS Team Channel

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index d6595d60a8..f3875c50fc 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -287,7 +287,19 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formState.notification.type === 'Microsoft Teams'" class="mb-5" type="flex"> TODO: Microsoft Teams </a-row>
+      <a-row v-if="formState.notification.type === 'Microsoft Teams'" type="flex">
+        <a-col :span="24">
+          <a-form-item v-bind="validateInfos['notification.channels']">
+            <a-auto-complete
+              v-model:value="formState.channels"
+              size="large"
+              :options="teamsChannels"
+              placeholder="Select Microsoft Teams  channels"
+              :filter-option="filterOption"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
       <a-row v-if="formState.notification.type === 'Discord'" class="mb-5" type="flex"> TODO: Discord </a-row>
       <a-row v-if="formState.notification.type === 'Mattermost'" class="mb-5" type="flex"> TODO: Mattermost </a-row>
       <a-row v-if="formInput[formState.notification.type] && notification" class="mb-5" type="flex">

From 2cfeca4a96e281e732f92df7b989d5d8d8e86963 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 11:32:21 +0800
Subject: [PATCH 018/125] feat(gui-v2): Discord Channel

---
 .../nc-gui-v2/components/webhook/Editor.vue    | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index f3875c50fc..dd6be9ac10 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -294,13 +294,25 @@ onMounted(() => {
               v-model:value="formState.channels"
               size="large"
               :options="teamsChannels"
-              placeholder="Select Microsoft Teams  channels"
+              placeholder="Select Microsoft Teams channels"
+              :filter-option="filterOption"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="formState.notification.type === 'Discord'" type="flex">
+        <a-col :span="24">
+          <a-form-item v-bind="validateInfos['notification.channels']">
+            <a-auto-complete
+              v-model:value="formState.channels"
+              size="large"
+              :options="discordChannels"
+              placeholder="Select Discord channels"
               :filter-option="filterOption"
             />
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formState.notification.type === 'Discord'" class="mb-5" type="flex"> TODO: Discord </a-row>
       <a-row v-if="formState.notification.type === 'Mattermost'" class="mb-5" type="flex"> TODO: Mattermost </a-row>
       <a-row v-if="formInput[formState.notification.type] && notification" class="mb-5" type="flex">
         <a-col v-for="(input, i) in formInput[formState.notification.type]" :key="i" :span="24">
@@ -356,4 +368,4 @@ onMounted(() => {
       </div>
     </a-form-item>
   </a-form>
-</template>
+</template>
\ No newline at end of file

From 0e842e9a09cb0f4d607ff9e62fb10ffada589449 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 11:32:59 +0800
Subject: [PATCH 019/125] feat(gui-v2): Mattermost Channel

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index dd6be9ac10..d77a0c5599 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -313,7 +313,19 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formState.notification.type === 'Mattermost'" class="mb-5" type="flex"> TODO: Mattermost </a-row>
+      <a-row v-if="formState.notification.type === 'Mattermost'" type="flex">
+        <a-col :span="24">
+          <a-form-item v-bind="validateInfos['notification.channels']">
+            <a-auto-complete
+              v-model:value="formState.channels"
+              size="large"
+              :options="mattermostChannels"
+              placeholder="Select Mattermost channels"
+              :filter-option="filterOption"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
       <a-row v-if="formInput[formState.notification.type] && notification" class="mb-5" type="flex">
         <a-col v-for="(input, i) in formInput[formState.notification.type]" :key="i" :span="24">
           <a-form-item v-if="input.type === 'LongText'">
@@ -368,4 +380,4 @@ onMounted(() => {
       </div>
     </a-form-item>
   </a-form>
-</template>
\ No newline at end of file
+</template>

From 388d5d2944d966fa5d5cb2cfcc59c7dce89abb2d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 11:43:39 +0800
Subject: [PATCH 020/125] fix(gui-v2): webhook editor validations

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 49 +++++++++----------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index d77a0c5599..da9c262a3f 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -13,6 +13,7 @@ import MdiDiscordIcon from '~icons/mdi/discord'
 import MdiChatIcon from '~icons/mdi/chat'
 import MdiWhatsAppIcon from '~icons/mdi/whatsapp'
 import MdiCellPhoneMessageIcon from '~icons/mdi/cellphone-message'
+import { fieldRequiredValidator } from '~/utils/validation'
 
 interface Option {
   label: string
@@ -29,7 +30,7 @@ const formState = reactive({
   title: '',
   notification: {
     type: 'URL',
-    channel: '',
+    channels: '',
   },
   method: 'GET',
 })
@@ -180,10 +181,12 @@ const methodList = ref([
 
 const validators = computed(() => {
   return {
-    'title': [],
-    'event': [],
-    'notification.type': [],
-    'method': [],
+    'title': [fieldRequiredValidator],
+    'event': [fieldRequiredValidator],
+    'notification.type': [fieldRequiredValidator],
+    'notification.url': [fieldRequiredValidator],
+    'notification.channels': [fieldRequiredValidator],
+    'method': [fieldRequiredValidator],
   }
 })
 const { resetFields, validate, validateInfos } = useForm(formState, validators)
@@ -224,8 +227,12 @@ onMounted(() => {
   <a-divider />
   <a-form :model="formState" name="create-or-edit-webhook">
     <a-form-item>
-      <a-row class="mb-5" type="flex">
-        <a-input v-model:value="formState.title" size="large" :placeholder="$t('general.title')" />
+      <a-row type="flex">
+        <a-col :span="24">
+          <a-form-item v-bind="validateInfos.title">
+            <a-input v-model:value="formState.title" size="large" :placeholder="$t('general.title')" />
+          </a-form-item>
+        </a-col>
       </a-row>
       <a-row type="flex" :gutter="[16, 16]">
         <a-col :span="12">
@@ -270,7 +277,7 @@ onMounted(() => {
         </a-col>
         <a-col :span="18">
           <a-form-item v-bind="validateInfos['notification.url']">
-            <a-input v-model:value="formState.url" size="large" placeholder="http://example.com" />
+            <a-input v-model:value="formState.notification.url" size="large" placeholder="http://example.com" />
           </a-form-item>
         </a-col>
       </a-row>
@@ -278,7 +285,7 @@ onMounted(() => {
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="formState.channels"
+              v-model:value="formState.notification.channels"
               size="large"
               :options="slackChannels"
               placeholder="Select Slack channels"
@@ -291,7 +298,7 @@ onMounted(() => {
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="formState.channels"
+              v-model:value="formState.notification.channels"
               size="large"
               :options="teamsChannels"
               placeholder="Select Microsoft Teams channels"
@@ -304,7 +311,7 @@ onMounted(() => {
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="formState.channels"
+              v-model:value="formState.notification.channels"
               size="large"
               :options="discordChannels"
               placeholder="Select Discord channels"
@@ -317,7 +324,7 @@ onMounted(() => {
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="formState.channels"
+              v-model:value="formState.notification.channels"
               size="large"
               :options="mattermostChannels"
               placeholder="Select Mattermost channels"
@@ -329,22 +336,12 @@ onMounted(() => {
       <a-row v-if="formInput[formState.notification.type] && notification" class="mb-5" type="flex">
         <a-col v-for="(input, i) in formInput[formState.notification.type]" :key="i" :span="24">
           <a-form-item v-if="input.type === 'LongText'">
-            <a-textarea
-              :key="input.key"
-              v-model:value="notification[input.key]"
-              outlined
-              :placeholder="input.label"
-              :rules="[(v) => !input.required || !!v || `${$t('general.required')}`]"
-            />
+            <!--  TODO: add validator -->
+            <a-textarea :key="input.key" v-model:value="notification[input.key]" outlined :placeholder="input.label" />
           </a-form-item>
           <a-form-item v-else>
-            <a-input
-              :key="input.key"
-              v-model:value="notification[input.key]"
-              class="caption"
-              :placeholder="input.label"
-              :rules="[(v) => !input.required || !!v || `${$t('general.required')}`]"
-            />
+            <!--  TODO: add validator -->
+            <a-input :key="input.key" v-model:value="notification[input.key]" class="caption" :placeholder="input.label" />
           </a-form-item>
         </a-col>
       </a-row>

From f1396f580a9509e05175f4e5a0104b3d1af6d164 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 12:09:10 +0800
Subject: [PATCH 021/125] feat(gui-v2): add column filter to webhook & tooltip

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 76 +++++++++++--------
 1 file changed, 44 insertions(+), 32 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index da9c262a3f..43a68aadb1 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -13,6 +13,8 @@ import MdiDiscordIcon from '~icons/mdi/discord'
 import MdiChatIcon from '~icons/mdi/chat'
 import MdiWhatsAppIcon from '~icons/mdi/whatsapp'
 import MdiCellPhoneMessageIcon from '~icons/mdi/cellphone-message'
+import MdiGestureDoubleTapIcon from '~icons/mdi/gesture-double-tap'
+import MdiInformationIcon from '~icons/mdi/information'
 import { fieldRequiredValidator } from '~/utils/validation'
 
 interface Option {
@@ -211,7 +213,7 @@ onMounted(() => {
   <div class="float-right mb-5">
     <a-button class="mr-3" type="primary" size="large" @click="emit('editOrAdd')">
       <div class="flex items-center">
-        <MdiContentSaveIcon class="mr-2" />
+        <MdiGestureDoubleTapIcon class="mr-2" />
         <!-- TODO: i18n -->
         Test Webhook
       </div>
@@ -333,7 +335,7 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formInput[formState.notification.type] && notification" class="mb-5" type="flex">
+      <a-row v-if="formInput[formState.notification.type] && notification" type="flex">
         <a-col v-for="(input, i) in formInput[formState.notification.type]" :key="i" :span="24">
           <a-form-item v-if="input.type === 'LongText'">
             <!--  TODO: add validator -->
@@ -345,36 +347,46 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <!--  TODO: handle column filter -->
-      <div>
-        <span class="caption grey--text">
-          <em>Available context variables are <strong>data and user</strong></em>
-          <v-tooltip top>
-            <template #activator="{ on }">
-              <v-icon small color="grey" class="ml-2" v-on="on">mdi-information</v-icon>
-            </template>
-            <span class="caption">
-              <strong>data</strong> : Row data <br />
-              <strong>user</strong> : User information<br />
-            </span>
-          </v-tooltip>
-          <br />
-          <a href="https://docs.nocodb.com/developer-resources/webhooks/" target="_blank">
-            <!-- Document Reference -->
-            {{ $t('labels.docReference') }}
-          </a>
-        </span>
-        <WebhookTest
-          :hook="{
-            ...formState,
-            filters,
-            notification: {
-              ...formState.notification,
-              payload: notification,
-            },
-          }"
-        />
-      </div>
+      <a-row class="mb-5" type="flex">
+        <a-col :span="24">
+          <a-checkbox v-model:checked="formState.condition">On Condition</a-checkbox>
+          <SmartsheetToolbarColumnFilter v-if="formState.condition" />
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="24">
+          <div class="text-gray-600">
+            <em>Available context variables are <strong>data and user</strong></em>
+
+            <a-tooltip bottom>
+              <template #title>
+                <span>
+                  <strong>data</strong> : Row data <br />
+                  <strong>user</strong> : User information<br />
+                </span>
+              </template>
+              <MdiInformationIcon class="ml-2" />
+            </a-tooltip>
+
+            <div class="mt-3">
+              <a href="https://docs.nocodb.com/developer-resources/webhooks/" target="_blank">
+                <!-- Document Reference -->
+                {{ $t('labels.docReference') }}
+              </a>
+            </div>
+          </div>
+          <WebhookTest
+            :hook="{
+              ...formState,
+              filters,
+              notification: {
+                ...formState.notification,
+                payload: notification,
+              },
+            }"
+          />
+        </a-col>
+      </a-row>
     </a-form-item>
   </a-form>
 </template>

From 098d719adaedebc3d0e8a5f454b53eea9fdc8ead Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 12:12:13 +0800
Subject: [PATCH 022/125] chore(gui-v2): add TODO

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 43a68aadb1..b337ff469c 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -282,6 +282,7 @@ onMounted(() => {
             <a-input v-model:value="formState.notification.url" size="large" placeholder="http://example.com" />
           </a-form-item>
         </a-col>
+        <!-- TODO: add Body, Params Headers & Auth Tabs -->
       </a-row>
       <a-row v-if="formState.notification.type === 'Slack'" type="flex">
         <a-col :span="24">

From 1c9c241b1d2fd39a4b2ec1aeafdd9cfa5b5302da Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 12:26:44 +0800
Subject: [PATCH 023/125] feat(gui-v2): add loadPluginList & use meta to show
 title

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index b337ff469c..d8ae3b6dc1 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { Form } from 'ant-design-vue'
-import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk'
+import { useToast } from 'vue-toastification'
+import { PluginType } from 'nocodb-sdk'
 import { MetaInj } from '~/context'
-import useViews from '~/composables/useViews'
 import MdiContentSaveIcon from '~icons/mdi/content-save'
 import MdiLinkIcon from '~icons/mdi/link'
 import MdiEmailIcon from '~icons/mdi/email'
@@ -16,15 +15,18 @@ import MdiCellPhoneMessageIcon from '~icons/mdi/cellphone-message'
 import MdiGestureDoubleTapIcon from '~icons/mdi/gesture-double-tap'
 import MdiInformationIcon from '~icons/mdi/information'
 import { fieldRequiredValidator } from '~/utils/validation'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 
 interface Option {
   label: string
   value: string
 }
 
-const meta = inject(MetaInj)
+const { $state, $api, $e } = useNuxtApp()
+
+const toast = useToast()
 
-const { views, loadViews } = useViews(meta as Ref<TableType>)
+const meta = inject(MetaInj)
 
 const useForm = Form.useForm
 
@@ -37,6 +39,8 @@ const formState = reactive({
   method: 'GET',
 })
 
+const apps = ref({})
+
 const slackChannels = ref()
 
 const teamsChannels = ref()
@@ -201,14 +205,28 @@ function filterOption(input: string, option: Option) {
   return option.value.toUpperCase().includes(input.toUpperCase())
 }
 
+async function loadPluginList() {
+  try {
+    const plugins = (await $api.plugin.list()).list as any
+    apps.value = plugins.reduce((o: Record<string, any>[], p: Record<string, any>) => {
+      p.tags = p.tags ? p.tags.split(',') : []
+      p.parsedInput = p.input && JSON.parse(p.input)
+      o[p.title] = p
+      return o
+    }, {})
+  } catch (e) {
+    toast.error(extractSdkResponseErrorMsg(e))
+  }
+}
+
 onMounted(() => {
-  loadViews()
+  loadPluginList()
 })
 </script>
 
 <template>
   <div class="float-left pt-3">
-    <a-typography-title class="inline" :level="4">{{ views?.[0].title }} : Webhooks </a-typography-title>
+    <a-typography-title class="inline" :level="4">{{ meta.title }} : Webhooks </a-typography-title>
   </div>
   <div class="float-right mb-5">
     <a-button class="mr-3" type="primary" size="large" @click="emit('editOrAdd')">

From 73182acf03090510799ce8796a7412a78c50dd2a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 12:43:42 +0800
Subject: [PATCH 024/125] fix(gui-v2): missing type on error

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index d8ae3b6dc1..a728c40d8d 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -214,7 +214,7 @@ async function loadPluginList() {
       o[p.title] = p
       return o
     }, {})
-  } catch (e) {
+  } catch (e: any) {
     toast.error(extractSdkResponseErrorMsg(e))
   }
 }

From 794c71e64170ee6ad19331d2fe165be2c8432935 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 13:00:42 +0800
Subject: [PATCH 025/125] fix(gui-v2): webhook sample data

---
 packages/nc-gui-v2/components/webhook/Test.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index 74be2ed77f..9e60ff5570 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -26,7 +26,7 @@ watch(
 
 async function loadSampleData() {
   sampleData.value = {
-    data: $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation),
+    data: await $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation),
     user: $state.user.value as Record<string, any>,
   }
 }
@@ -40,7 +40,7 @@ onMounted(async () => {
   <a-collapse v-model:activeKey="activeKey" ghost>
     <a-collapse-panel key="1" header="Sample Payload">
       <!-- TODO: need changes from Quick Import PR -->
-      <MonacoEditor v-model:value="sampleData" read-only class="caption mb-2 min-h-75" />
+      <MonacoEditor v-model="sampleData" class="min-h-60 max-h-80" />
     </a-collapse-panel>
   </a-collapse>
 </template>

From ec5893d67f6f25394660167f37a63648fd628282 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 13:05:04 +0800
Subject: [PATCH 026/125] feat(gui-v2): add onNotTypeChange & refactor naming
 in webhook

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 72 +++++++++++--------
 1 file changed, 43 insertions(+), 29 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index a728c40d8d..9c464210be 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -30,7 +30,7 @@ const meta = inject(MetaInj)
 
 const useForm = Form.useForm
 
-const formState = reactive({
+const hook = reactive({
   title: '',
   notification: {
     type: 'URL',
@@ -39,7 +39,7 @@ const formState = reactive({
   method: 'GET',
 })
 
-const apps = ref({})
+const apps: Record<string, any> = ref()
 
 const slackChannels = ref()
 
@@ -145,10 +145,7 @@ const formInput = ref({
   ],
 })
 
-const notification = ref({
-  method: 'POST',
-  body: '{{ json data }}',
-})
+const notification = ref({})
 
 const eventList = ref([
   {
@@ -195,10 +192,27 @@ const validators = computed(() => {
     'method': [fieldRequiredValidator],
   }
 })
-const { resetFields, validate, validateInfos } = useForm(formState, validators)
+const { resetFields, validate, validateInfos } = useForm(hook, validators)
 
 function onNotTypeChange() {
-  // TODO
+  notification.value = {}
+
+  if (hook.notification.type === 'Slack') {
+    slackChannels.value = (apps && apps?.Slack && apps.Slack.parsedInput) || []
+  }
+  if (hook.notification.type === 'Microsoft Teams') {
+    teamsChannels.value = (apps && apps['Microsoft Teams'] && apps['Microsoft Teams'].parsedInput) || []
+  }
+  if (hook.notification.type === 'Discord') {
+    discordChannels.value = (apps && apps.Discord && apps.Discord.parsedInput) || []
+  }
+  if (hook.notification.type === 'Mattermost') {
+    mattermostChannels.value = (apps && apps.Mattermost && apps.Mattermost.parsedInput) || []
+  }
+  if (hook.notification.type === 'URL') {
+    notification.value = notification.value || {}
+    notification.value.body = '{{ json data }}'
+  }
 }
 
 function filterOption(input: string, option: Option) {
@@ -245,19 +259,19 @@ onMounted(() => {
     </a-button>
   </div>
   <a-divider />
-  <a-form :model="formState" name="create-or-edit-webhook">
+  <a-form :model="hook" name="create-or-edit-webhook">
     <a-form-item>
       <a-row type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos.title">
-            <a-input v-model:value="formState.title" size="large" :placeholder="$t('general.title')" />
+            <a-input v-model:value="hook.title" size="large" :placeholder="$t('general.title')" />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row type="flex" :gutter="[16, 16]">
         <a-col :span="12">
           <a-form-item v-bind="validateInfos.event">
-            <a-select v-model:value="formState.event" size="large" :placeholder="$t('general.event')">
+            <a-select v-model:value="hook.event" size="large" :placeholder="$t('general.event')">
               <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value">
                 {{ event.title }}
               </a-select-option>
@@ -267,7 +281,7 @@ onMounted(() => {
         <a-col :span="12">
           <a-form-item v-bind="validateInfos['notification.type']">
             <a-select
-              v-model:value="formState.notification.type"
+              v-model:value="hook.notification.type"
               size="large"
               :placeholder="$t('general.notification')"
               @change="onNotTypeChange"
@@ -289,24 +303,24 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formState.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 16]">
+      <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 16]">
         <a-col :span="6">
-          <a-select v-model:value="formState.method" size="large">
+          <a-select v-model:value="hook.method" size="large">
             <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
           </a-select>
         </a-col>
         <a-col :span="18">
           <a-form-item v-bind="validateInfos['notification.url']">
-            <a-input v-model:value="formState.notification.url" size="large" placeholder="http://example.com" />
+            <a-input v-model:value="hook.notification.url" size="large" placeholder="http://example.com" />
           </a-form-item>
         </a-col>
         <!-- TODO: add Body, Params Headers & Auth Tabs -->
       </a-row>
-      <a-row v-if="formState.notification.type === 'Slack'" type="flex">
+      <a-row v-if="hook.notification.type === 'Slack'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="formState.notification.channels"
+              v-model:value="hook.notification.channels"
               size="large"
               :options="slackChannels"
               placeholder="Select Slack channels"
@@ -315,11 +329,11 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formState.notification.type === 'Microsoft Teams'" type="flex">
+      <a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="formState.notification.channels"
+              v-model:value="hook.notification.channels"
               size="large"
               :options="teamsChannels"
               placeholder="Select Microsoft Teams channels"
@@ -328,11 +342,11 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formState.notification.type === 'Discord'" type="flex">
+      <a-row v-if="hook.notification.type === 'Discord'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="formState.notification.channels"
+              v-model:value="hook.notification.channels"
               size="large"
               :options="discordChannels"
               placeholder="Select Discord channels"
@@ -341,11 +355,11 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formState.notification.type === 'Mattermost'" type="flex">
+      <a-row v-if="hook.notification.type === 'Mattermost'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="formState.notification.channels"
+              v-model:value="hook.notification.channels"
               size="large"
               :options="mattermostChannels"
               placeholder="Select Mattermost channels"
@@ -354,8 +368,8 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formInput[formState.notification.type] && notification" type="flex">
-        <a-col v-for="(input, i) in formInput[formState.notification.type]" :key="i" :span="24">
+      <a-row v-if="formInput[hook.notification.type] && notification" type="flex">
+        <a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24">
           <a-form-item v-if="input.type === 'LongText'">
             <!--  TODO: add validator -->
             <a-textarea :key="input.key" v-model:value="notification[input.key]" outlined :placeholder="input.label" />
@@ -368,8 +382,8 @@ onMounted(() => {
       </a-row>
       <a-row class="mb-5" type="flex">
         <a-col :span="24">
-          <a-checkbox v-model:checked="formState.condition">On Condition</a-checkbox>
-          <SmartsheetToolbarColumnFilter v-if="formState.condition" />
+          <a-checkbox v-model:checked="hook.condition">On Condition</a-checkbox>
+          <SmartsheetToolbarColumnFilter v-if="hook.condition" />
         </a-col>
       </a-row>
       <a-row>
@@ -396,10 +410,10 @@ onMounted(() => {
           </div>
           <WebhookTest
             :hook="{
-              ...formState,
+              ...hook,
               filters,
               notification: {
-                ...formState.notification,
+                ...hook.notification,
                 payload: notification,
               },
             }"

From a239a233eac8faff5e94b84b204afeb6e0082589 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 13:42:59 +0800
Subject: [PATCH 027/125] chore(gui-v2): deactivate a-collapse initially

---
 packages/nc-gui-v2/components/webhook/Test.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index 9e60ff5570..3e02581b12 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -15,7 +15,7 @@ const sampleData = ref({
   data: {},
   user: {},
 })
-const activeKey = ref(1)
+const activeKey = ref(0)
 
 watch(
   () => hook?.operation,

From cb5ba18c36ceaba0cb5e6d0073230b36341661d2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 13:43:10 +0800
Subject: [PATCH 028/125] chore(gui-v2): add AList*

---
 packages/nc-gui-v2/components.d.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 49e4512a11..c17b11a884 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -27,6 +27,9 @@ declare module '@vue/runtime-core' {
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
+    AList: typeof import('ant-design-vue/es')['List']
+    AListItem: typeof import('ant-design-vue/es')['ListItem']
+    AListItemMeta: typeof import('ant-design-vue/es')['ListItemMeta']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']

From d9932fc2a00755a1ce58beabe6e11bbf0ce1cf8a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 13:43:58 +0800
Subject: [PATCH 029/125] wip(gui-v2): body, params, headers & auth tabs

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 67 ++++++++++++++++---
 1 file changed, 59 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 9c464210be..6f8d62e4d4 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -36,9 +36,22 @@ const hook = reactive({
     type: 'URL',
     channels: '',
   },
-  method: 'GET',
+  api: {
+    method: 'POST',
+    path: '',
+    body: '{{ json data }}',
+    params: [],
+    auth: '',
+    headers: [],
+    response: {},
+    perf: {},
+    meta: {},
+  },
+  condition: false,
 })
 
+const urlTabKey = ref('body')
+
 const apps: Record<string, any> = ref()
 
 const slackChannels = ref()
@@ -145,7 +158,17 @@ const formInput = ref({
   ],
 })
 
-const notification = ref({})
+const notification = ref({
+  method: 'GET',
+  path: '',
+  body: '',
+  params: [],
+  auth: '',
+  headers: [],
+  response: {},
+  perf: {},
+  meta: {},
+})
 
 const eventList = ref([
   {
@@ -187,7 +210,8 @@ const validators = computed(() => {
     'title': [fieldRequiredValidator],
     'event': [fieldRequiredValidator],
     'notification.type': [fieldRequiredValidator],
-    'notification.url': [fieldRequiredValidator],
+    'api.method': [fieldRequiredValidator],
+    'api.path': [fieldRequiredValidator],
     'notification.channels': [fieldRequiredValidator],
     'method': [fieldRequiredValidator],
   }
@@ -195,7 +219,17 @@ const validators = computed(() => {
 const { resetFields, validate, validateInfos } = useForm(hook, validators)
 
 function onNotTypeChange() {
-  notification.value = {}
+  notification.value = {
+    method: 'GET',
+    path: '',
+    body: '',
+    params: [],
+    auth: '',
+    headers: [],
+    response: {},
+    perf: {},
+    meta: {},
+  }
 
   if (hook.notification.type === 'Slack') {
     slackChannels.value = (apps && apps?.Slack && apps.Slack.parsedInput) || []
@@ -305,16 +339,33 @@ onMounted(() => {
       </a-row>
       <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 16]">
         <a-col :span="6">
-          <a-select v-model:value="hook.method" size="large">
+          <a-select v-model:value="hook.api.method" size="large">
             <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
           </a-select>
         </a-col>
         <a-col :span="18">
-          <a-form-item v-bind="validateInfos['notification.url']">
-            <a-input v-model:value="hook.notification.url" size="large" placeholder="http://example.com" />
+          <a-form-item v-bind="validateInfos['notification.api.path']">
+            <a-input v-model:value="hook.api.path" size="large" placeholder="http://example.com" />
           </a-form-item>
         </a-col>
-        <!-- TODO: add Body, Params Headers & Auth Tabs -->
+        <a-col :span="24">
+          <a-tabs v-model:activeKey="urlTabKey">
+            <a-tab-pane key="body" tab="Body">
+              <!-- TODO: set lang -->
+              <MonacoEditor v-model="hook.api.body" class="min-h-60 max-h-80" />
+            </a-tab-pane>
+            <a-tab-pane key="params" tab="Params" force-render>
+              <!-- TODO: Params component -->
+            </a-tab-pane>
+            <a-tab-pane key="headers" tab="Headers">
+              <!-- TODO: header component -->
+            </a-tab-pane>
+            <a-tab-pane key="auth" tab="Auth">
+              <!-- TODO: set lang -->
+              <MonacoEditor v-model="hook.api.auth" class="min-h-60 max-h-80" />
+            </a-tab-pane>
+          </a-tabs>
+        </a-col>
       </a-row>
       <a-row v-if="hook.notification.type === 'Slack'" type="flex">
         <a-col :span="24">

From 2324a3e82049a8003101249a733726ec79d6ef6e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 13:51:25 +0800
Subject: [PATCH 030/125] init(gui-v2): ApiClientParams

---
 packages/nc-gui-v2/components/api-client/Params.vue | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/api-client/Params.vue

diff --git a/packages/nc-gui-v2/components/api-client/Params.vue b/packages/nc-gui-v2/components/api-client/Params.vue
new file mode 100644
index 0000000000..557e754982
--- /dev/null
+++ b/packages/nc-gui-v2/components/api-client/Params.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+TODO: Params
+</template>
\ No newline at end of file

From e4fb824b1dabe543adf751a67b0241f6ad22e3cb Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 13:51:34 +0800
Subject: [PATCH 031/125] init(gui-v2): ApiClientHeaders

---
 packages/nc-gui-v2/components/api-client/Headers.vue | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/api-client/Headers.vue

diff --git a/packages/nc-gui-v2/components/api-client/Headers.vue b/packages/nc-gui-v2/components/api-client/Headers.vue
new file mode 100644
index 0000000000..d7f82849a5
--- /dev/null
+++ b/packages/nc-gui-v2/components/api-client/Headers.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+TODO: Headers
+</template>
\ No newline at end of file

From ee5d2d8fff88cece4e0f756f9328f2fbae813ddc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 13:51:49 +0800
Subject: [PATCH 032/125] feat(gui-v2): include ApiClientParams &
 ApiClientHeaders

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 6f8d62e4d4..13487d3d6b 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -355,10 +355,10 @@ onMounted(() => {
               <MonacoEditor v-model="hook.api.body" class="min-h-60 max-h-80" />
             </a-tab-pane>
             <a-tab-pane key="params" tab="Params" force-render>
-              <!-- TODO: Params component -->
+              <ApiClientParams v-model="hook.api.parameters" />
             </a-tab-pane>
             <a-tab-pane key="headers" tab="Headers">
-              <!-- TODO: header component -->
+              <ApiClientHeaders v-model="hook.api.headers" />
             </a-tab-pane>
             <a-tab-pane key="auth" tab="Auth">
               <!-- TODO: set lang -->

From bb884ce5af91f10b10af40fa45affa8acff53a0f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 14:09:42 +0800
Subject: [PATCH 033/125] refactor(gui-v2): style webhook form

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 13487d3d6b..aae3ac6f2c 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -337,7 +337,7 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 16]">
+      <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]">
         <a-col :span="6">
           <a-select v-model:value="hook.api.method" size="large">
             <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
@@ -349,7 +349,7 @@ onMounted(() => {
           </a-form-item>
         </a-col>
         <a-col :span="24">
-          <a-tabs v-model:activeKey="urlTabKey">
+          <a-tabs v-model:activeKey="urlTabKey" centered>
             <a-tab-pane key="body" tab="Body">
               <!-- TODO: set lang -->
               <MonacoEditor v-model="hook.api.body" class="min-h-60 max-h-80" />
@@ -423,11 +423,23 @@ onMounted(() => {
         <a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24">
           <a-form-item v-if="input.type === 'LongText'">
             <!--  TODO: add validator -->
-            <a-textarea :key="input.key" v-model:value="notification[input.key]" outlined :placeholder="input.label" />
+            <a-textarea
+              :key="input.key"
+              v-model:value="notification[input.key]"
+              outlined
+              :placeholder="input.label"
+              size="large"
+            />
           </a-form-item>
           <a-form-item v-else>
             <!--  TODO: add validator -->
-            <a-input :key="input.key" v-model:value="notification[input.key]" class="caption" :placeholder="input.label" />
+            <a-input
+              :key="input.key"
+              v-model:value="notification[input.key]"
+              class="caption"
+              :placeholder="input.label"
+              size="large"
+            />
           </a-form-item>
         </a-col>
       </a-row>

From f43f79334ba110f171c6fd579d46293bc2fdcd26 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 15:38:53 +0800
Subject: [PATCH 034/125] feat(gui-v2): add auth message & wrap on condition
 with a-card

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index aae3ac6f2c..e942dc684d 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -363,6 +363,10 @@ onMounted(() => {
             <a-tab-pane key="auth" tab="Auth">
               <!-- TODO: set lang -->
               <MonacoEditor v-model="hook.api.auth" class="min-h-60 max-h-80" />
+              <span class="text-gray-600 prose-sm">
+                For more about auth option refer
+                <a class="prose-sm" href="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>.
+              </span>
             </a-tab-pane>
           </a-tabs>
         </a-col>
@@ -445,8 +449,10 @@ onMounted(() => {
       </a-row>
       <a-row class="mb-5" type="flex">
         <a-col :span="24">
-          <a-checkbox v-model:checked="hook.condition">On Condition</a-checkbox>
-          <SmartsheetToolbarColumnFilter v-if="hook.condition" />
+          <a-card>
+            <a-checkbox v-model:checked="hook.condition">On Condition</a-checkbox>
+            <SmartsheetToolbarColumnFilter v-if="hook.condition" />
+          </a-card>
         </a-col>
       </a-row>
       <a-row>

From 08e8d5a71db4ef22eae1bff13f198519a0c08cea Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 16:08:29 +0800
Subject: [PATCH 035/125] chore(gui-v2): fix width problem in webhook drawer

---
 packages/nc-gui-v2/components/webhook/Drawer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
index 393c9b40c2..7ff39b2474 100644
--- a/packages/nc-gui-v2/components/webhook/Drawer.vue
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -27,7 +27,7 @@ function editHook(hook: Record<string, any>) {
   <a-drawer v-model:visible="dialogShow" :closable="false" placement="right" width="700px" @keydown.esc="dialogShow = false">
     <WebhookEditor v-if="editOrAdd" />
     <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
-    <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
+    <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">
       <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">
         🚀 We are Hiring! 🚀
       </a-button>

From 4bb8029804ba01697916aad7af8d7d7f18b67e24 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 16:09:14 +0800
Subject: [PATCH 036/125] feat(gui-v2): delete webhooks

---
 .../nc-gui-v2/components/webhook/List.vue     | 37 ++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index 2585a9013b..c97c0a5195 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -1,11 +1,36 @@
 <script setup lang="ts">
+import { useToast } from 'vue-toastification'
 import { MetaInj } from '~/context'
 import MdiHookIcon from '~icons/mdi/hook'
 import MdiDeleteIcon from '~icons/mdi/delete'
 
 const emit = defineEmits(['edit'])
+
+const { $api, $e } = useNuxtApp()
+
+const toast = useToast()
+
 const hooks = ref([])
 const meta = inject(MetaInj)
+
+async function deleteHook(item: Record<string, any>, index: number) {
+  try {
+    if (item.id) {
+      // await $api.dbTableWebhook.delete(item.id)
+      hooks.value.splice(index, 1)
+    } else {
+      hooks.value.splice(index, 1)
+    }
+    toast.success('Hook deleted successfully')
+    if (!hooks.value.length) {
+      hooks.value = []
+    }
+  } catch (e: any) {
+    toast.error(e.message)
+  }
+
+  $e('a:webhook:delete')
+}
 </script>
 
 <template>
@@ -18,15 +43,17 @@ const meta = inject(MetaInj)
     <a-divider />
     <div v-if="hooks.length">
       <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer bg-gray-100 pl-5 pr-5 pt-2 pb-2">
-        <template #renderItem="{ item }">
+        <template #renderItem="{ item, index }">
           <a-list-item @click="emit('edit', item)">
-            <a-list-item-meta :description="item.event">
+            <a-list-item-meta :description="item.event" class="uppercase">
               <template #title>
-                {{ item.title }}
+                <span class="text-xl normal-case">
+                  {{ item.title }}
+                </span>
               </template>
               <template #avatar>
                 <div class="mt-4">
-                  <MdiHookIcon />
+                  <MdiHookIcon class="text-xl" />
                 </div>
               </template>
             </a-list-item-meta>
@@ -35,7 +62,7 @@ const meta = inject(MetaInj)
                 <!-- Notify Via -->
                 <div class="mr-2">{{ $t('labels.notifyVia') }} : {{ item?.notification?.type }}</div>
                 <div class="float-right pt-2 pr-1">
-                  <MdiDeleteIcon />
+                  <MdiDeleteIcon class="text-xl" @click.stop="deleteHook(item, index)" />
                 </div>
               </div>
             </template>

From a665f6bc00080255b0c9fcb9d2fba0ef08155a8c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 16:20:41 +0800
Subject: [PATCH 037/125] feat(gui-v2): add loadHooksList & fix description

---
 .../nc-gui-v2/components/webhook/List.vue     | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index c97c0a5195..b657bfafde 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
+import { onMounted } from '@vue/runtime-core'
 import { MetaInj } from '~/context'
 import MdiHookIcon from '~icons/mdi/hook'
 import MdiDeleteIcon from '~icons/mdi/delete'
@@ -13,6 +14,18 @@ const toast = useToast()
 const hooks = ref([])
 const meta = inject(MetaInj)
 
+async function loadHooksList() {
+  try {
+    const hookList = (await $api.dbTableWebhook.list(meta?.value.id as string)).list as any
+    hooks.value = hookList.map((hook: Record<string, any>) => {
+      hook.notification = hook.notification && JSON.parse(hook.notification)
+      return hook
+    })
+  } catch (e: any) {
+    toast.error(e.message)
+  }
+}
+
 async function deleteHook(item: Record<string, any>, index: number) {
   try {
     if (item.id) {
@@ -31,6 +44,10 @@ async function deleteHook(item: Record<string, any>, index: number) {
 
   $e('a:webhook:delete')
 }
+
+onMounted(() => {
+  loadHooksList()
+})
 </script>
 
 <template>
@@ -45,7 +62,10 @@ async function deleteHook(item: Record<string, any>, index: number) {
       <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer bg-gray-100 pl-5 pr-5 pt-2 pb-2">
         <template #renderItem="{ item, index }">
           <a-list-item @click="emit('edit', item)">
-            <a-list-item-meta :description="item.event" class="uppercase">
+            <a-list-item-meta>
+              <template #description>
+                <span class="uppercase"> {{ item.event }} {{ item.operation }}</span>
+              </template>
               <template #title>
                 <span class="text-xl normal-case">
                   {{ item.title }}

From 9dabd27393893895d02a4bb4c79847b7aeb6068d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 16:34:35 +0800
Subject: [PATCH 038/125] chore(gui-v2): enable delete dbTableWebhook.delete

---
 packages/nc-gui-v2/components/webhook/List.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index b657bfafde..3704223d9d 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -29,7 +29,7 @@ async function loadHooksList() {
 async function deleteHook(item: Record<string, any>, index: number) {
   try {
     if (item.id) {
-      // await $api.dbTableWebhook.delete(item.id)
+      await $api.dbTableWebhook.delete(item.id)
       hooks.value.splice(index, 1)
     } else {
       hooks.value.splice(index, 1)

From 1cd4b2da8e27ad61819f2a7020922984369a3967 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 16:52:33 +0800
Subject: [PATCH 039/125] feat(gui-v2): testWebhook

---
 .../nc-gui-v2/components/webhook/Test.vue     | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index 3e02581b12..0c8950bb31 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted } from '@vue/runtime-core'
+import { useToast } from 'vue-toastification'
 import { MetaInj } from '~/context'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 
 interface Props {
   hook: Record<string, any>
@@ -9,8 +11,11 @@ interface Props {
 const { hook } = defineProps<Props>()
 
 const { $state, $api, $e } = useNuxtApp()
+
+const toast = useToast()
+
 const meta = inject(MetaInj)
-const isVisible = ref(false)
+
 const sampleData = ref({
   data: {},
   user: {},
@@ -31,6 +36,23 @@ async function loadSampleData() {
   }
 }
 
+async function testWebhook() {
+  try {
+    await $api.dbTableWebhook.test(meta?.value.id as string, {
+      hook,
+      payload: sampleData.value,
+    })
+
+    toast.success('Webhook tested successfully')
+  } catch (e: any) {
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+defineExpose({
+  testWebhook,
+})
+
 onMounted(async () => {
   await loadSampleData()
 })
@@ -39,7 +61,7 @@ onMounted(async () => {
 <template>
   <a-collapse v-model:activeKey="activeKey" ghost>
     <a-collapse-panel key="1" header="Sample Payload">
-      <!-- TODO: need changes from Quick Import PR -->
+      <!-- TODO: set lang -->
       <MonacoEditor v-model="sampleData" class="min-h-60 max-h-80" />
     </a-collapse-panel>
   </a-collapse>

From 5b0f1ff6a5d8c744115eeaafc5bccada01d6b23d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 17:30:02 +0800
Subject: [PATCH 040/125] chore(gui-v2): fine tune style & i18n

---
 packages/nc-gui-v2/components/webhook/List.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index 3704223d9d..421bac8dd7 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -52,11 +52,12 @@ onMounted(() => {
 
 <template>
   <div class="h-5/6">
-    <a-typography-title class="inline" :level="4">{{ meta.title }} : Webhooks </a-typography-title>
-    <a-button class="float-right" type="primary" size="large" @click="emit('add')">
-      <!-- TODO: i18n -->
-      Create Webhook
-    </a-button>
+    <div class="mb-4">
+      <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
+      <a-button class="float-right" type="primary" size="large" @click="emit('add')">
+        {{ $t('activity.addWebhook') }}
+      </a-button>
+    </div>
     <a-divider />
     <div v-if="hooks.length">
       <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer bg-gray-100 pl-5 pr-5 pt-2 pb-2">

From 48f41d6515d385da406e0c92e832e74da48ac669 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 17:30:31 +0800
Subject: [PATCH 041/125] feat(gui-v2): add backToList emits in Webhook Editor

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index e942dc684d..5cc95b5f01 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -14,6 +14,7 @@ import MdiWhatsAppIcon from '~icons/mdi/whatsapp'
 import MdiCellPhoneMessageIcon from '~icons/mdi/cellphone-message'
 import MdiGestureDoubleTapIcon from '~icons/mdi/gesture-double-tap'
 import MdiInformationIcon from '~icons/mdi/information'
+import MdiArrowLeftBoldIcon from '~icons/mdi/arrow-left-bold'
 import { fieldRequiredValidator } from '~/utils/validation'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 
@@ -22,6 +23,8 @@ interface Option {
   value: string
 }
 
+const emit = defineEmits(['backToList', 'editOrAdd'])
+
 const { $state, $api, $e } = useNuxtApp()
 
 const toast = useToast()
@@ -273,24 +276,28 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="float-left pt-3">
-    <a-typography-title class="inline" :level="4">{{ meta.title }} : Webhooks </a-typography-title>
-  </div>
-  <div class="float-right mb-5">
-    <a-button class="mr-3" type="primary" size="large" @click="emit('editOrAdd')">
-      <div class="flex items-center">
-        <MdiGestureDoubleTapIcon class="mr-2" />
-        <!-- TODO: i18n -->
-        Test Webhook
-      </div>
-    </a-button>
-    <a-button class="mt-2" type="primary" size="large" @click="emit('editOrAdd')">
+  <div class="mb-4">
+    <div class="float-left mt-2">
       <div class="flex items-center">
-        <MdiContentSaveIcon class="mr-2" />
-        <!-- TODO: i18n -->
-        Save
+        <MdiArrowLeftBoldIcon class="mr-3 text-xl cursor-pointer" @click="emit('backToList')" />
+        <span class="inline text-xl font-bold">{{ meta.title }} : {{ hook.title || 'Webhooks' }} </span>
       </div>
-    </a-button>
+    </div>
+    <div class="float-right mb-5">
+      <a-button class="mr-3" type="primary" size="large" @click="emit('editOrAdd')">
+        <div class="flex items-center">
+          <MdiGestureDoubleTapIcon class="mr-2" />
+          <!-- TODO: i18n -->
+          Test Webhook
+        </div>
+      </a-button>
+      <a-button type="primary" size="large" @click="emit('editOrAdd')">
+        <div class="flex items-center">
+          <MdiContentSaveIcon class="mr-2" />
+          {{ $t('general.save') }}
+        </div>
+      </a-button>
+    </div>
   </div>
   <a-divider />
   <a-form :model="hook" name="create-or-edit-webhook">

From 364ea59e22d6b70426e63194c704ad766ee7af12 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 17:30:48 +0800
Subject: [PATCH 042/125] feat(gui-v2): include back to list

---
 packages/nc-gui-v2/components/webhook/Drawer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
index 7ff39b2474..bd14e77d70 100644
--- a/packages/nc-gui-v2/components/webhook/Drawer.vue
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -25,7 +25,7 @@ function editHook(hook: Record<string, any>) {
 
 <template>
   <a-drawer v-model:visible="dialogShow" :closable="false" placement="right" width="700px" @keydown.esc="dialogShow = false">
-    <WebhookEditor v-if="editOrAdd" />
+    <WebhookEditor v-if="editOrAdd" @back-to-list="editOrAdd = false" />
     <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
     <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">
       <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">

From 356e8ffc309d7baa568d2abd70f8efbee615f13d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 17:39:49 +0800
Subject: [PATCH 043/125] feat(gui-v2): add saveHooks

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 63 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 5cc95b5f01..f36b0ad0a6 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -65,7 +65,9 @@ const discordChannels = ref()
 
 const mattermostChannels = ref()
 
-const filters = []
+const loading = ref(false)
+
+const filters = ref([])
 
 const formInput = ref({
   'Email': [
@@ -270,6 +272,60 @@ async function loadPluginList() {
   }
 }
 
+async function saveHooks() {
+  loading.value = true
+  try {
+    await validate()
+  } catch (_: any) {
+    toast.error('Invalid Form')
+    loading.value = false
+    return
+  }
+
+  try {
+    let res
+    if (hook.id) {
+      res = await $api.dbTableWebhook.update(hook.id, {
+        ...hook,
+        notification: {
+          ...hook.notification,
+          payload: notification,
+        },
+      })
+    } else {
+      res = await $api.dbTableWebhook.create(meta.value.id as string, {
+        ...hook,
+        notification: {
+          ...hook.notification,
+          payload: notification,
+        },
+      })
+    }
+
+    if (!hook.id && res) {
+      hook.id = res.id
+    }
+
+    // TODO: wait for filter implementation
+    // if ($refs.filter) {
+    //   await $refs.filter.applyChanges(false, {
+    //     hookId: hook.id,
+    //   });
+    // }
+
+    toast.success('Webhook details updated successfully')
+  } catch (e: any) {
+    toast.error(extractSdkResponseErrorMsg(e))
+  } finally {
+    loading.value = false
+  }
+  $e('a:webhook:add', {
+    operation: hook.operation,
+    condition: hook.condition,
+    notification: hook.notification.type,
+  })
+}
+
 onMounted(() => {
   loadPluginList()
 })
@@ -291,9 +347,10 @@ onMounted(() => {
           Test Webhook
         </div>
       </a-button>
-      <a-button type="primary" size="large" @click="emit('editOrAdd')">
+      <a-button type="primary" size="large" @click.prevent="saveHooks">
         <div class="flex items-center">
           <MdiContentSaveIcon class="mr-2" />
+          <!-- Save -->
           {{ $t('general.save') }}
         </div>
       </a-button>
@@ -498,4 +555,4 @@ onMounted(() => {
       </a-row>
     </a-form-item>
   </a-form>
-</template>
+</template>
\ No newline at end of file

From e1a2b289ba0bd6123aed7b1d789ff86d69eb714a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 17:57:45 +0800
Subject: [PATCH 044/125] feat(gui-v2): testWebhook

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index f36b0ad0a6..4713e988c2 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -57,6 +57,8 @@ const urlTabKey = ref('body')
 
 const apps: Record<string, any> = ref()
 
+const webhookTestRef = ref()
+
 const slackChannels = ref()
 
 const teamsChannels = ref()
@@ -326,6 +328,10 @@ async function saveHooks() {
   })
 }
 
+async function testWebhook() {
+  await webhookTestRef.value.testWebhook()
+}
+
 onMounted(() => {
   loadPluginList()
 })
@@ -340,7 +346,7 @@ onMounted(() => {
       </div>
     </div>
     <div class="float-right mb-5">
-      <a-button class="mr-3" type="primary" size="large" @click="emit('editOrAdd')">
+      <a-button class="mr-3" type="primary" size="large" @click="testWebhook">
         <div class="flex items-center">
           <MdiGestureDoubleTapIcon class="mr-2" />
           <!-- TODO: i18n -->
@@ -542,6 +548,7 @@ onMounted(() => {
             </div>
           </div>
           <WebhookTest
+            ref="webhookTestRef"
             :hook="{
               ...hook,
               filters,
@@ -555,4 +562,4 @@ onMounted(() => {
       </a-row>
     </a-form-item>
   </a-form>
-</template>
\ No newline at end of file
+</template>

From 7a842cd033f02def8daf890f2cfedd1b786b24bd Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 18:11:00 +0800
Subject: [PATCH 045/125] feat(gui-v2): editHook

---
 packages/nc-gui-v2/components/webhook/Drawer.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
index bd14e77d70..2c8462810d 100644
--- a/packages/nc-gui-v2/components/webhook/Drawer.vue
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -8,24 +8,29 @@ const emit = defineEmits(['update:modelValue'])
 
 const editOrAdd = ref(false)
 
+const webhookEditorRef = ref()
+
 const dialogShow = computed({
   get() {
     return modelValue
   },
-  set(v) {
+  set(v: boolean) {
     emit('update:modelValue', v)
   },
 })
 
-function editHook(hook: Record<string, any>) {
+async function editHook(hook: Record<string, any>) {
   editOrAdd.value = true
-  // TODO: update editor ref hook
+  nextTick(async () => {
+    webhookEditorRef.value.hook = { ...hook }
+    await webhookEditorRef.value.onEventChange()
+  })
 }
 </script>
 
 <template>
   <a-drawer v-model:visible="dialogShow" :closable="false" placement="right" width="700px" @keydown.esc="dialogShow = false">
-    <WebhookEditor v-if="editOrAdd" @back-to-list="editOrAdd = false" />
+    <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
     <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
     <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">
       <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">

From 1c1592be5e941e1ce046b7c7ce0f492dafe98a8b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 18:11:14 +0800
Subject: [PATCH 046/125] feat(gui-v2): define expose hook & onEventChange

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 4713e988c2..f5b93b77c2 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -260,6 +260,10 @@ function filterOption(input: string, option: Option) {
   return option.value.toUpperCase().includes(input.toUpperCase())
 }
 
+async function onEventChange() {
+  // TODO
+}
+
 async function loadPluginList() {
   try {
     const plugins = (await $api.plugin.list()).list as any
@@ -332,6 +336,11 @@ async function testWebhook() {
   await webhookTestRef.value.testWebhook()
 }
 
+defineExpose({
+  hook,
+  onEventChange,
+})
+
 onMounted(() => {
   loadPluginList()
 })

From 2877c47006b5cf9f82e7d2bc979425827510e539 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 18:58:54 +0800
Subject: [PATCH 047/125] feat(gui-v2): add setHook & onEventChange

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 49 ++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index f5b93b77c2..127f2707d8 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -260,8 +260,53 @@ function filterOption(input: string, option: Option) {
   return option.value.toUpperCase().includes(input.toUpperCase())
 }
 
+function setHook(newHook: any) {
+  Object.assign(hook, { ...newHook })
+}
+
 async function onEventChange() {
-  // TODO
+  const { notification: { payload = {}, type = {} } = {}, ...rest } = hook
+
+  Object.assign(hook, {
+    ...hook,
+    notification: {
+      type,
+    },
+  })
+
+  await onNotTypeChange()
+
+  notification.value = payload
+
+  let channels: Record<string, any>[] | null = null
+
+  switch (hook.notification.type) {
+    case 'Slack':
+      channels = slackChannels
+      break
+    case 'Microsoft Teams':
+      channels = teamsChannels
+      break
+    case 'Discord':
+      channels = discordChannels
+      break
+    case 'Mattermost':
+      channels = mattermostChannels
+      break
+  }
+
+  if (channels) {
+    notification.webhook_url =
+      notification.webhook_url &&
+      notification.webhook_url.map((v: Record<string, any>) =>
+        channels?.find((s: Record<string, any>) => v.webhook_url === s.webhook_url),
+      )
+  }
+
+  if (hook.notification.type === 'URL') {
+    notification.value = notification.value || {}
+    notification.value.body = '{{ json data }}'
+  }
 }
 
 async function loadPluginList() {
@@ -337,8 +382,8 @@ async function testWebhook() {
 }
 
 defineExpose({
-  hook,
   onEventChange,
+  setHook,
 })
 
 onMounted(() => {

From 758aa565fb332f092b15030ec8ce3659435208f3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 18:59:14 +0800
Subject: [PATCH 048/125] fix(gui-v2): use setHook instead

---
 packages/nc-gui-v2/components/webhook/Drawer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
index 2c8462810d..65894820e5 100644
--- a/packages/nc-gui-v2/components/webhook/Drawer.vue
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -22,7 +22,7 @@ const dialogShow = computed({
 async function editHook(hook: Record<string, any>) {
   editOrAdd.value = true
   nextTick(async () => {
-    webhookEditorRef.value.hook = { ...hook }
+    webhookEditorRef.value.setHook(hook)
     await webhookEditorRef.value.onEventChange()
   })
 }

From 69e7b66f6b9c3283edc20b0557dfb694dfa7d6b4 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 19:32:34 +0800
Subject: [PATCH 049/125] fix(gui-v2): feed notification payload to hook.api

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 127f2707d8..b45ccba3c9 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -261,7 +261,7 @@ function filterOption(input: string, option: Option) {
 }
 
 function setHook(newHook: any) {
-  Object.assign(hook, { ...newHook })
+  Object.assign(hook, { ...newHook, api: { ...newHook.notification.payload } })
 }
 
 async function onEventChange() {

From 331383b83b534c60b39317c97c456d8289c667c5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 27 Jul 2022 21:11:47 +0800
Subject: [PATCH 050/125] wip(gui-v2): dynamic validators

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 58 ++++++++++++++-----
 1 file changed, 43 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index b45ccba3c9..6a9071caae 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -37,18 +37,7 @@ const hook = reactive({
   title: '',
   notification: {
     type: 'URL',
-    channels: '',
-  },
-  api: {
-    method: 'POST',
-    path: '',
-    body: '{{ json data }}',
-    params: [],
-    auth: '',
-    headers: [],
-    response: {},
-    perf: {},
-    meta: {},
+    payload: {},
   },
   condition: false,
 })
@@ -165,6 +154,7 @@ const formInput = ref({
   ],
 })
 
+// FIXME: this s paylaod for URL only
 const notification = ref({
   method: 'GET',
   path: '',
@@ -217,10 +207,48 @@ const validators = computed(() => {
     'title': [fieldRequiredValidator],
     'event': [fieldRequiredValidator],
     'notification.type': [fieldRequiredValidator],
-    'api.method': [fieldRequiredValidator],
-    'api.path': [fieldRequiredValidator],
     'notification.channels': [fieldRequiredValidator],
-    'method': [fieldRequiredValidator],
+    ...(hook.notification.type === 'URL' && {
+      'payload.method': [fieldRequiredValidator],
+      'payload.path': [fieldRequiredValidator],
+    }),
+    ...(hook.notification.type === 'Email' && {
+      'notification.payload.to': [fieldRequiredValidator],
+      'notification.payload.subject': [fieldRequiredValidator],
+      'notification.payload.body': [fieldRequiredValidator],
+    }),
+    ...(hook.notification.type === 'Slack' && {
+      'notification.payload.channels': [fieldRequiredValidator],
+      'notification.payload.body': [fieldRequiredValidator],
+    }),
+    ...(hook.notification.type === 'Slack' &&
+      {
+        // TODO:
+      }),
+    ...(hook.notification.type === 'Microsoft Teams' &&
+      {
+        // TODO:
+      }),
+    ...(hook.notification.type === 'Discord' &&
+      {
+        // TODO:
+      }),
+    ...(hook.notification.type === 'Mattermost' &&
+      {
+        // TODO:
+      }),
+    ...(hook.notification.type === 'URL' &&
+      {
+        // TODO:
+      }),
+    ...(hook.notification.type === 'Twilio' &&
+      {
+        // TODO:
+      }),
+    ...(hook.notification.type === 'Whatsapp Twilio' &&
+      {
+        // TODO:
+      }),
   }
 })
 const { resetFields, validate, validateInfos } = useForm(hook, validators)

From d5de4b6980a03cc215135bedf6109a8eb760de0e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 00:08:05 +0800
Subject: [PATCH 051/125] fix(gui-v2): v-model values in webhook form

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 6a9071caae..623385bff8 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -491,30 +491,30 @@ onMounted(() => {
       </a-row>
       <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]">
         <a-col :span="6">
-          <a-select v-model:value="hook.api.method" size="large">
+          <a-select v-model:value="hook.notification.payload.method" size="large">
             <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
           </a-select>
         </a-col>
         <a-col :span="18">
-          <a-form-item v-bind="validateInfos['notification.api.path']">
-            <a-input v-model:value="hook.api.path" size="large" placeholder="http://example.com" />
+          <a-form-item v-bind="validateInfos['notification.payload.path']">
+            <a-input v-model:value="hook.notification.payload.path" size="large" placeholder="http://example.com" />
           </a-form-item>
         </a-col>
         <a-col :span="24">
           <a-tabs v-model:activeKey="urlTabKey" centered>
             <a-tab-pane key="body" tab="Body">
               <!-- TODO: set lang -->
-              <MonacoEditor v-model="hook.api.body" class="min-h-60 max-h-80" />
+              <MonacoEditor v-model="hook.notification.payload.body" class="min-h-60 max-h-80" />
             </a-tab-pane>
             <a-tab-pane key="params" tab="Params" force-render>
-              <ApiClientParams v-model="hook.api.parameters" />
+              <ApiClientParams v-model="hook.notification.payload.parameters" />
             </a-tab-pane>
             <a-tab-pane key="headers" tab="Headers">
-              <ApiClientHeaders v-model="hook.api.headers" />
+              <ApiClientHeaders v-model="hook.notification.payload.headers" />
             </a-tab-pane>
             <a-tab-pane key="auth" tab="Auth">
               <!-- TODO: set lang -->
-              <MonacoEditor v-model="hook.api.auth" class="min-h-60 max-h-80" />
+              <MonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" />
               <span class="text-gray-600 prose-sm">
                 For more about auth option refer
                 <a class="prose-sm" href="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>.
@@ -527,7 +527,7 @@ onMounted(() => {
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="hook.notification.channels"
+              v-model:value="hook.notification.payload.channels"
               size="large"
               :options="slackChannels"
               placeholder="Select Slack channels"
@@ -540,7 +540,7 @@ onMounted(() => {
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="hook.notification.channels"
+              v-model:value="hook.notification.payload.channels"
               size="large"
               :options="teamsChannels"
               placeholder="Select Microsoft Teams channels"
@@ -553,7 +553,7 @@ onMounted(() => {
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="hook.notification.channels"
+              v-model:value="hook.notification.payload.channels"
               size="large"
               :options="discordChannels"
               placeholder="Select Discord channels"
@@ -566,7 +566,7 @@ onMounted(() => {
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
             <a-auto-complete
-              v-model:value="hook.notification.channels"
+              v-model:value="hook.notification.payload.channels"
               size="large"
               :options="mattermostChannels"
               placeholder="Select Mattermost channels"
@@ -636,6 +636,7 @@ onMounted(() => {
               filters,
               notification: {
                 ...hook.notification,
+                // FIXME: this should be wrong
                 payload: notification,
               },
             }"

From 967f56e3c91bd04b2a2b2280769826a2e23ad26c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 00:11:47 +0800
Subject: [PATCH 052/125] feat(gui-v2): dynamic validators

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 37 ++++---------------
 1 file changed, 8 insertions(+), 29 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 623385bff8..1cc1e38bbe 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -217,38 +217,17 @@ const validators = computed(() => {
       'notification.payload.subject': [fieldRequiredValidator],
       'notification.payload.body': [fieldRequiredValidator],
     }),
-    ...(hook.notification.type === 'Slack' && {
+    ...((hook.notification.type === 'Slack' ||
+      hook.notification.type === 'Microsoft Teams' ||
+      hook.notification.type === 'Discord' ||
+      hook.notification.type === 'Mattermost') && {
       'notification.payload.channels': [fieldRequiredValidator],
       'notification.payload.body': [fieldRequiredValidator],
     }),
-    ...(hook.notification.type === 'Slack' &&
-      {
-        // TODO:
-      }),
-    ...(hook.notification.type === 'Microsoft Teams' &&
-      {
-        // TODO:
-      }),
-    ...(hook.notification.type === 'Discord' &&
-      {
-        // TODO:
-      }),
-    ...(hook.notification.type === 'Mattermost' &&
-      {
-        // TODO:
-      }),
-    ...(hook.notification.type === 'URL' &&
-      {
-        // TODO:
-      }),
-    ...(hook.notification.type === 'Twilio' &&
-      {
-        // TODO:
-      }),
-    ...(hook.notification.type === 'Whatsapp Twilio' &&
-      {
-        // TODO:
-      }),
+    ...((hook.notification.type === 'Twilio' || hook.notification.type === 'Whatsapp Twilio') && {
+      'notification.payload.body': [fieldRequiredValidator],
+      'notification.payload.to': [fieldRequiredValidator],
+    }),
   }
 })
 const { resetFields, validate, validateInfos } = useForm(hook, validators)

From a592d6272155d8dad6de67b9d8d920ab24304494 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 10:23:56 +0800
Subject: [PATCH 053/125] fix(gui-v2): add back WebhookDrawer

---
 .../smartsheet-toolbar/MoreActions.vue        | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 615439ff9e..770776f1ab 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -15,14 +15,24 @@ import MdiViewListIcon from '~icons/mdi/view-list-outline'
 
 // todo : replace with inject
 const publicViewId = null
+
+// TODO:: identify based on meta
+const isView = ref(false)
+
+const { isUIAllowed } = useUIPermission()
+
 const { project } = useProject()
 
 const { $api } = useNuxtApp()
+
 const toast = useToast()
 
 const meta = inject(MetaInj)
+
 const selectedView = inject(ActiveViewInj)
 
+const showWebhookDrawer = ref(false)
+
 const exportCsv = async () => {
   let offset = 0
   let c = 1
@@ -80,7 +90,7 @@ const exportCsv = async () => {
         toast.success('Successfully exported all table data')
       }
     }
-  } catch (e) {
+  } catch (e: any) {
     toast.error(extractSdkResponseErrorMsg(e))
   }
 }
@@ -99,22 +109,37 @@ const exportCsv = async () => {
     <template #overlay>
       <div class="bg-white shadow">
         <div>
-          <div class="nc-menu-item" @click.stop="exportCsv">
+          <div
+            v-if="isUIAllowed('csvImport') && !isView"
+            v-t="['a:actions:upload-csv']"
+            class="nc-menu-item"
+            @click.stop="exportCsv"
+          >
             <MdiDownloadIcon />
             <!-- Download as CSV -->
             {{ $t('activity.downloadCSV') }}
           </div>
-          <div class="nc-menu-item" @click.stop>
+          <div v-if="isUIAllowed('csvImport') && !isView" v-t="['a:actions:upload-csv']" class="nc-menu-item" @click.stop>
             <MdiUploadIcon />
             <!-- Upload CSV -->
             {{ $t('activity.uploadCSV') }}
           </div>
-          <div class="nc-menu-item" @click.stop>
+          <div
+            v-if="isUIAllowed('SharedViewList') && !isView"
+            v-t="['a:actions:shared-view-list']"
+            class="nc-menu-item"
+            @click.stop
+          >
             <MdiViewListIcon />
             <!-- Shared View List -->
             {{ $t('activity.listSharedView') }}
           </div>
-          <div class="nc-menu-item" @click.stop>
+          <div
+            v-if="isUIAllowed('webhook') && !isView"
+            v-t="['c:actions:webhook']"
+            class="nc-menu-item"
+            @click.stop="showWebhookDrawer = true"
+          >
             <MdiHookIcon />
             <!-- todo: i18n -->
             Webhook
@@ -123,4 +148,5 @@ const exportCsv = async () => {
       </div>
     </template>
   </a-dropdown>
+  <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 </template>

From 52be7479f4266d4fd5f1b77496e1d7856d4f4069 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 10:37:19 +0800
Subject: [PATCH 054/125] chore(gui-v2): lint

---
 .../components/dashboard/settings/AuditTab.vue     |  9 ++++++++-
 .../components/dashboard/settings/UIAcl.vue        |  2 +-
 .../nc-gui-v2/components/dlg/AirtableImport.vue    | 14 ++++++++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 45a109f5fe..91e5cd56af 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -96,6 +96,13 @@ const columns = [
       />
     </div>
 
-    <a-table class="w-full" size="small" :data-source="audits ?? []" :columns="columns" :pagination="false" :loading="isLoading" />
+    <a-table
+      class="w-full"
+      size="small"
+      :data-source="audits ?? []"
+      :columns="columns"
+      :pagination="false"
+      :loading="isLoading"
+    />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
index 53dc342609..944d260993 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
@@ -13,7 +13,7 @@ const toast = useToast()
 const roles = $ref<string[]>(['editor', 'commenter', 'viewer'])
 let isLoading = $ref(false)
 let tables = $ref<any[]>([])
-let searchInput = $ref('')
+const searchInput = $ref('')
 
 const filteredTables = computed(() =>
   tables.filter(
diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 28c808e539..673e93d3c7 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -240,10 +240,20 @@ onBeforeUnmount(() => {
         </div>
         <a-form ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="ma-0">
           <a-form-item v-bind="validateInfos['details.apiKey']">
-            <a-input-password v-model:value="syncSource.details.apiKey" class="nc-input-api-key" placeholder="Api Key" size="large" />
+            <a-input-password
+              v-model:value="syncSource.details.apiKey"
+              class="nc-input-api-key"
+              placeholder="Api Key"
+              size="large"
+            />
           </a-form-item>
           <a-form-item v-bind="validateInfos['details.syncSourceUrlOrId']">
-            <a-input v-model:value="syncSource.details.syncSourceUrlOrId" class="nc-input-shared-base" placeholder="Shared Base ID / URL" size="large" />
+            <a-input
+              v-model:value="syncSource.details.syncSourceUrlOrId"
+              class="nc-input-shared-base"
+              placeholder="Shared Base ID / URL"
+              size="large"
+            />
           </a-form-item>
           <span class="prose-xl font-bold self-center my-4">Advanced Settings</span>
           <a-divider class="mt-2 mb-5" />

From 791a6a927898daf44c59dd662b7a4dae61f99113 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 12:04:43 +0800
Subject: [PATCH 055/125] fix(gui-v2): fix webhook event

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 104 ++++++++++--------
 1 file changed, 57 insertions(+), 47 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 1cc1e38bbe..c0596505b5 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -34,10 +34,14 @@ const meta = inject(MetaInj)
 const useForm = Form.useForm
 
 const hook = reactive({
+  id: '',
   title: '',
+  event: '',
+  operation: '',
+  eventOperation: '',
   notification: {
     type: 'URL',
-    payload: {},
+    payload: {} as any,
   },
   condition: false,
 })
@@ -48,13 +52,13 @@ const apps: Record<string, any> = ref()
 
 const webhookTestRef = ref()
 
-const slackChannels = ref()
+const slackChannels = ref<Record<string, any>[]>([])
 
-const teamsChannels = ref()
+const teamsChannels = ref<Record<string, any>[]>([])
 
-const discordChannels = ref()
+const discordChannels = ref<Record<string, any>[]>([])
 
-const mattermostChannels = ref()
+const mattermostChannels = ref<Record<string, any>[]>([])
 
 const loading = ref(false)
 
@@ -155,31 +159,25 @@ const formInput = ref({
 })
 
 // FIXME: this s paylaod for URL only
-const notification = ref({
-  method: 'GET',
-  path: '',
-  body: '',
-  params: [],
-  auth: '',
-  headers: [],
-  response: {},
-  perf: {},
-  meta: {},
-})
+// const notification = ref({
+//   method: 'GET',
+//   path: '',
+//   body: '',
+//   params: [],
+//   auth: '',
+//   headers: [],
+//   response: {},
+//   perf: {},
+//   meta: {},
+// })
 
 const eventList = ref([
-  {
-    title: 'After Insert',
-    value: 'after insert',
-  },
-  {
-    title: 'After Update',
-    value: 'after update',
-  },
-  {
-    title: 'After Delete',
-    value: 'after delete',
-  },
+  // {text: ["Before", "Insert"], value: ['before', 'insert']},
+  { text: ['After', 'Insert'], value: ['after', 'insert'] },
+  // {text: ["Before", "Update"], value: ['before', 'update']},
+  { text: ['After', 'Update'], value: ['after', 'update'] },
+  // {text: ["Before", "Delete"], value: ['before', 'delete']},
+  { text: ['After', 'Delete'], value: ['after', 'delete'] },
 ])
 
 const notificationList = ref([
@@ -233,7 +231,7 @@ const validators = computed(() => {
 const { resetFields, validate, validateInfos } = useForm(hook, validators)
 
 function onNotTypeChange() {
-  notification.value = {
+  const notification = {
     method: 'GET',
     path: '',
     body: '',
@@ -258,8 +256,8 @@ function onNotTypeChange() {
     mattermostChannels.value = (apps && apps.Mattermost && apps.Mattermost.parsedInput) || []
   }
   if (hook.notification.type === 'URL') {
-    notification.value = notification.value || {}
-    notification.value.body = '{{ json data }}'
+    hook.notification = hook.notification ?? notification
+    hook.notification.payload.body = '{{ json data }}'
   }
 }
 
@@ -283,36 +281,36 @@ async function onEventChange() {
 
   await onNotTypeChange()
 
-  notification.value = payload
+  hook.notification.payload = payload
 
   let channels: Record<string, any>[] | null = null
 
   switch (hook.notification.type) {
     case 'Slack':
-      channels = slackChannels
+      channels = slackChannels as any
       break
     case 'Microsoft Teams':
-      channels = teamsChannels
+      channels = teamsChannels as any
       break
     case 'Discord':
-      channels = discordChannels
+      channels = discordChannels as any
       break
     case 'Mattermost':
-      channels = mattermostChannels
+      channels = mattermostChannels as any
       break
   }
 
   if (channels) {
-    notification.webhook_url =
-      notification.webhook_url &&
-      notification.webhook_url.map((v: Record<string, any>) =>
+    hook.notification.payload.webhook_url =
+      hook.notification.payload.webhook_url &&
+      hook.notification.payload.webhook_url.map((v: Record<string, any>) =>
         channels?.find((s: Record<string, any>) => v.webhook_url === s.webhook_url),
       )
   }
 
   if (hook.notification.type === 'URL') {
-    notification.value = notification.value || {}
-    notification.value.body = '{{ json data }}'
+    hook.notification.payload = hook.notification.payload || {}
+    hook.notification.payload.body = '{{ json data }}'
   }
 }
 
@@ -325,6 +323,9 @@ async function loadPluginList() {
       o[p.title] = p
       return o
     }, {})
+    if (hook.event && hook.operation) {
+      hook.eventOperation = `${hook.event} ${hook.operation}`
+    }
   } catch (e: any) {
     toast.error(extractSdkResponseErrorMsg(e))
   }
@@ -347,15 +348,15 @@ async function saveHooks() {
         ...hook,
         notification: {
           ...hook.notification,
-          payload: notification,
+          payload: hook.notification.payload,
         },
       })
     } else {
-      res = await $api.dbTableWebhook.create(meta.value.id as string, {
+      res = await $api.dbTableWebhook.create(meta?.value.id as string, {
         ...hook,
         notification: {
           ...hook.notification,
-          payload: notification,
+          payload: hook.notification.payload,
         },
       })
     }
@@ -393,6 +394,15 @@ defineExpose({
   setHook,
 })
 
+watch(
+  () => hook.eventOperation,
+  (v) => {
+    const [event, operation] = hook.eventOperation.split(' ')
+    hook.event = event
+    hook.operation = operation
+  },
+)
+
 onMounted(() => {
   loadPluginList()
 })
@@ -436,9 +446,9 @@ onMounted(() => {
       <a-row type="flex" :gutter="[16, 16]">
         <a-col :span="12">
           <a-form-item v-bind="validateInfos.event">
-            <a-select v-model:value="hook.event" size="large" :placeholder="$t('general.event')">
-              <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value">
-                {{ event.title }}
+            <a-select v-model:value="hook.eventOperation" size="large" :placeholder="$t('general.event')">
+              <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')">
+                {{ event.text.join(' ') }}
               </a-select-option>
             </a-select>
           </a-form-item>

From 960bb05311faa435125ab9712d0d3b860f7c2362 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 12:29:44 +0800
Subject: [PATCH 056/125] fix(gui-v2): webhook payload

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 55 +++++++++----------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index c0596505b5..4903ab657b 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -158,19 +158,6 @@ const formInput = ref({
   ],
 })
 
-// FIXME: this s paylaod for URL only
-// const notification = ref({
-//   method: 'GET',
-//   path: '',
-//   body: '',
-//   params: [],
-//   auth: '',
-//   headers: [],
-//   response: {},
-//   perf: {},
-//   meta: {},
-// })
-
 const eventList = ref([
   // {text: ["Before", "Insert"], value: ['before', 'insert']},
   { text: ['After', 'Insert'], value: ['after', 'insert'] },
@@ -266,7 +253,13 @@ function filterOption(input: string, option: Option) {
 }
 
 function setHook(newHook: any) {
-  Object.assign(hook, { ...newHook, api: { ...newHook.notification.payload } })
+  Object.assign(hook, {
+    ...newHook,
+    notification: {
+      ...newHook.notification,
+      payload: newHook.notification.payload,
+    },
+  })
 }
 
 async function onEventChange() {
@@ -276,6 +269,7 @@ async function onEventChange() {
     ...hook,
     notification: {
       type,
+      payload,
     },
   })
 
@@ -323,6 +317,7 @@ async function loadPluginList() {
       o[p.title] = p
       return o
     }, {})
+
     if (hook.event && hook.operation) {
       hook.eventOperation = `${hook.event} ${hook.operation}`
     }
@@ -344,25 +339,27 @@ async function saveHooks() {
   try {
     let res
     if (hook.id) {
-      res = await $api.dbTableWebhook.update(hook.id, {
-        ...hook,
-        notification: {
-          ...hook.notification,
-          payload: hook.notification.payload,
-        },
-      })
+      // TODO: fix me
+      // res = await $api.dbTableWebhook.update(hook.id, {
+      //   ...hook,
+      //   notification: {
+      //     ...hook.notification,
+      //     payload: hook.notification.payload,
+      //   },
+      // })
     } else {
-      res = await $api.dbTableWebhook.create(meta?.value.id as string, {
-        ...hook,
-        notification: {
-          ...hook.notification,
-          payload: hook.notification.payload,
-        },
-      })
+      // TODO: fix me
+      // res = await $api.dbTableWebhook.create(meta?.value.id as string, {
+      //   ...hook,
+      //   notification: {
+      //     ...hook.notification,
+      //     payload: hook.notification.payload,
+      //   },
+      // })
     }
 
     if (!hook.id && res) {
-      hook.id = res.id
+      // hook.id = res.id
     }
 
     // TODO: wait for filter implementation

From b251317ad1fd2b6b5e431a57e02168417082f59d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 13:02:52 +0800
Subject: [PATCH 057/125] feat(gui-v2): revise dynamic fields & validations

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 24 ++++---------------
 1 file changed, 5 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 4903ab657b..226c26c14d 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -561,27 +561,13 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formInput[hook.notification.type] && notification" type="flex">
+      <a-row v-if="formInput[hook.notification.type] && hook.notification.payload" type="flex">
         <a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24">
-          <a-form-item v-if="input.type === 'LongText'">
-            <!--  TODO: add validator -->
-            <a-textarea
-              :key="input.key"
-              v-model:value="notification[input.key]"
-              outlined
-              :placeholder="input.label"
-              size="large"
-            />
+          <a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]">
+            <a-textarea v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
           </a-form-item>
-          <a-form-item v-else>
-            <!--  TODO: add validator -->
-            <a-input
-              :key="input.key"
-              v-model:value="notification[input.key]"
-              class="caption"
-              :placeholder="input.label"
-              size="large"
-            />
+          <a-form-item v-else v-bind="validateInfos[`notification.payload.${input.key}`]">
+            <a-input v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
           </a-form-item>
         </a-col>
       </a-row>

From 311708ed0f96a912e5f499f63b1280e3f1a0dd6c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 13:11:58 +0800
Subject: [PATCH 058/125] fix(gui-v2): webhook saving type

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

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 226c26c14d..54639a3576 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Form } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
-import { PluginType } from 'nocodb-sdk'
 import { MetaInj } from '~/context'
 import MdiContentSaveIcon from '~icons/mdi/content-save'
 import MdiLinkIcon from '~icons/mdi/link'
@@ -339,23 +338,24 @@ async function saveHooks() {
   try {
     let res
     if (hook.id) {
-      // TODO: fix me
-      // res = await $api.dbTableWebhook.update(hook.id, {
-      //   ...hook,
-      //   notification: {
-      //     ...hook.notification,
-      //     payload: hook.notification.payload,
-      //   },
-      // })
+      res = await $api.dbTableWebhook.update(hook.id, {
+        ...hook,
+        notification: {
+          ...hook.notification,
+          payload: hook.notification.payload,
+        },
+      } as any)
     } else {
-      // TODO: fix me
-      // res = await $api.dbTableWebhook.create(meta?.value.id as string, {
-      //   ...hook,
-      //   notification: {
-      //     ...hook.notification,
-      //     payload: hook.notification.payload,
-      //   },
-      // })
+      res = await $api.dbTableWebhook.create(
+        meta?.value.id as string,
+        {
+          ...hook,
+          notification: {
+            ...hook.notification,
+            payload: hook.notification.payload,
+          },
+        } as any,
+      )
     }
 
     if (!hook.id && res) {

From 00798bc94c6dba9a3d8793f51eeafec1260a4b2e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 13:23:13 +0800
Subject: [PATCH 059/125] chore(gui-v2): style webhook listing

---
 packages/nc-gui-v2/components/webhook/List.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index 421bac8dd7..dee6356cc9 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -60,9 +60,9 @@ onMounted(() => {
     </div>
     <a-divider />
     <div v-if="hooks.length">
-      <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer bg-gray-100 pl-5 pr-5 pt-2 pb-2">
+      <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer pl-5 pr-5 pt-2 pb-2">
         <template #renderItem="{ item, index }">
-          <a-list-item @click="emit('edit', item)">
+          <a-list-item class="pa-2" @click="emit('edit', item)">
             <a-list-item-meta>
               <template #description>
                 <span class="uppercase"> {{ item.event }} {{ item.operation }}</span>

From b42238f7acfcc13778705666b1d696bae48ca880 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 14:16:16 +0800
Subject: [PATCH 060/125] fix(gui-v2): payload body issue

---
 .../nc-gui-v2/components/webhook/Editor.vue    | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 54639a3576..81de0a6cff 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -217,17 +217,7 @@ const validators = computed(() => {
 const { resetFields, validate, validateInfos } = useForm(hook, validators)
 
 function onNotTypeChange() {
-  const notification = {
-    method: 'GET',
-    path: '',
-    body: '',
-    params: [],
-    auth: '',
-    headers: [],
-    response: {},
-    perf: {},
-    meta: {},
-  }
+  hook.notification.payload = {} as any
 
   if (hook.notification.type === 'Slack') {
     slackChannels.value = (apps && apps?.Slack && apps.Slack.parsedInput) || []
@@ -242,7 +232,6 @@ function onNotTypeChange() {
     mattermostChannels.value = (apps && apps.Mattermost && apps.Mattermost.parsedInput) || []
   }
   if (hook.notification.type === 'URL') {
-    hook.notification = hook.notification ?? notification
     hook.notification.payload.body = '{{ json data }}'
   }
 }
@@ -272,8 +261,6 @@ async function onEventChange() {
     },
   })
 
-  await onNotTypeChange()
-
   hook.notification.payload = payload
 
   let channels: Record<string, any>[] | null = null
@@ -303,7 +290,6 @@ async function onEventChange() {
 
   if (hook.notification.type === 'URL') {
     hook.notification.payload = hook.notification.payload || {}
-    hook.notification.payload.body = '{{ json data }}'
   }
 }
 
@@ -617,4 +603,4 @@ onMounted(() => {
       </a-row>
     </a-form-item>
   </a-form>
-</template>
+</template>
\ No newline at end of file

From 4ef25f7b93d2ad14daa276efc0df2ce1f9256716 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 15:47:29 +0800
Subject: [PATCH 061/125] fix(gui-v2): webhook validation

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 81de0a6cff..3369c61d2a 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -189,12 +189,11 @@ const methodList = ref([
 const validators = computed(() => {
   return {
     'title': [fieldRequiredValidator],
-    'event': [fieldRequiredValidator],
+    'eventOperation': [fieldRequiredValidator],
     'notification.type': [fieldRequiredValidator],
-    'notification.channels': [fieldRequiredValidator],
     ...(hook.notification.type === 'URL' && {
-      'payload.method': [fieldRequiredValidator],
-      'payload.path': [fieldRequiredValidator],
+      'notification.payload.method': [fieldRequiredValidator],
+      'notification.payload.path': [fieldRequiredValidator],
     }),
     ...(hook.notification.type === 'Email' && {
       'notification.payload.to': [fieldRequiredValidator],
@@ -428,7 +427,7 @@ onMounted(() => {
       </a-row>
       <a-row type="flex" :gutter="[16, 16]">
         <a-col :span="12">
-          <a-form-item v-bind="validateInfos.event">
+          <a-form-item v-bind="validateInfos.eventOperation">
             <a-select v-model:value="hook.eventOperation" size="large" :placeholder="$t('general.event')">
               <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')">
                 {{ event.text.join(' ') }}
@@ -603,4 +602,4 @@ onMounted(() => {
       </a-row>
     </a-form-item>
   </a-form>
-</template>
\ No newline at end of file
+</template>

From db4d88af1b1ebfbd66b79ea8c9d05ca42ef7d944 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 17:35:27 +0800
Subject: [PATCH 062/125] feat(gui-v2): set lang / validate

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 4 +---
 packages/nc-gui-v2/components/webhook/Test.vue   | 1 -
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 3369c61d2a..845320f21c 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -474,8 +474,7 @@ onMounted(() => {
         <a-col :span="24">
           <a-tabs v-model:activeKey="urlTabKey" centered>
             <a-tab-pane key="body" tab="Body">
-              <!-- TODO: set lang -->
-              <MonacoEditor v-model="hook.notification.payload.body" class="min-h-60 max-h-80" />
+              <MonacoEditor v-model="hook.notification.payload.body" :validate="false" class="min-h-60 max-h-80" />
             </a-tab-pane>
             <a-tab-pane key="params" tab="Params" force-render>
               <ApiClientParams v-model="hook.notification.payload.parameters" />
@@ -484,7 +483,6 @@ onMounted(() => {
               <ApiClientHeaders v-model="hook.notification.payload.headers" />
             </a-tab-pane>
             <a-tab-pane key="auth" tab="Auth">
-              <!-- TODO: set lang -->
               <MonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" />
               <span class="text-gray-600 prose-sm">
                 For more about auth option refer
diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index 0c8950bb31..38530bcb16 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -61,7 +61,6 @@ onMounted(async () => {
 <template>
   <a-collapse v-model:activeKey="activeKey" ghost>
     <a-collapse-panel key="1" header="Sample Payload">
-      <!-- TODO: set lang -->
       <MonacoEditor v-model="sampleData" class="min-h-60 max-h-80" />
     </a-collapse-panel>
   </a-collapse>

From cf956b37766853e8903ae94eeaf12cd814dc564d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 17:36:01 +0800
Subject: [PATCH 063/125] feat(gui-v2): generlise monaco

---
 .../nc-gui-v2/components/monaco/Editor.vue    | 57 ++++++++++++++-----
 1 file changed, 42 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui-v2/components/monaco/Editor.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
index 3db0aebf74..4479d574b4 100644
--- a/packages/nc-gui-v2/components/monaco/Editor.vue
+++ b/packages/nc-gui-v2/components/monaco/Editor.vue
@@ -2,12 +2,20 @@
 import * as monaco from 'monaco-editor'
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import TypescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 import { onMounted } from '#imports'
 import { deepCompare } from '~/utils/deepCompare'
 
-const { modelValue } = defineProps<{ modelValue: any }>()
+interface Props {
+  modelValue: string
+  lang?: string
+  validate?: Boolean
+}
+
+const { modelValue, lang = 'json', validate = true } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
+
 const isValid = ref(true)
 
 /**
@@ -16,10 +24,14 @@ const isValid = ref(true)
  * @ts-expect-error */
 self.MonacoEnvironment = {
   getWorker(_: any, label: string) {
-    if (label === 'json') {
-      return new JsonWorker()
+    switch (label) {
+      case 'json':
+        return new JsonWorker()
+      case 'typescript':
+        return new TypescriptWorker()
+      default:
+        return new EditorWorker()
     }
-    return new EditorWorker()
   },
 }
 
@@ -36,13 +48,14 @@ defineExpose({
 })
 
 onMounted(() => {
-  if (root.value) {
-    const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), 'json')
-
-    // configure the JSON language support with schemas and schema associations
-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-      validate: true,
-    })
+  if (root.value && lang) {
+    const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), lang)
+    if (lang === 'json') {
+      // configure the JSON language support with schemas and schema associations
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: validate as boolean,
+      })
+    }
 
     editor = monaco.editor.create(root.value, {
       model,
@@ -60,8 +73,15 @@ onMounted(() => {
     editor.onDidChangeModelContent(async (e) => {
       try {
         isValid.value = true
-        const obj = JSON.parse(editor.getValue())
-        if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj)
+
+        const value = editor?.getValue()
+        if (typeof modelValue === 'object') {
+          if (!value || !deepCompare(modelValue, JSON.parse(value))) {
+            emit('update:modelValue', JSON.stringify(modelValue, null, 2))
+          }
+        } else {
+          if (value !== modelValue) emit('update:modelValue', value)
+        }
       } catch (e) {
         isValid.value = false
         console.log(e)
@@ -73,8 +93,15 @@ onMounted(() => {
 watch(
   () => modelValue,
   (v) => {
-    if (editor && v && !deepCompare(v, JSON.parse(editor?.getValue() as string))) {
-      editor.setValue(JSON.stringify(v, null, 2))
+    if (editor && v) {
+      const value = editor?.getValue()
+      if (typeof v === 'object') {
+        if (!value || !deepCompare(v, JSON.parse(value))) {
+          editor.setValue(JSON.stringify(v, null, 2))
+        }
+      } else {
+        if (value !== v) editor.setValue(v)
+      }
     }
   },
 )

From 03ec810817d5b1facb7f976f206eb6dba3b88c7b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 18:54:58 +0800
Subject: [PATCH 064/125] feat(gui-v2): ApiClientParams

---
 .../components/api-client/Params.vue          | 78 ++++++++++++++++++-
 1 file changed, 76 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/api-client/Params.vue b/packages/nc-gui-v2/components/api-client/Params.vue
index 557e754982..7da29f6864 100644
--- a/packages/nc-gui-v2/components/api-client/Params.vue
+++ b/packages/nc-gui-v2/components/api-client/Params.vue
@@ -1,7 +1,81 @@
 <script setup lang="ts">
+import MdiPlusIcon from '~icons/mdi/plus'
+import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 
+interface Props {
+  modelValue: Record<string, any>[]
+}
+
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const localState = computed({
+  get() {
+    return modelValue
+  },
+  set(newValue: Record<string, any>[]) {
+    emit('update:modelValue', newValue)
+  },
+})
+
+const addParamRow = () => localState.value.push({})
+
+const deleteParamRow = (idx: number) => localState.value.splice(idx, 1)
 </script>
 
 <template>
-TODO: Params
-</template>
\ No newline at end of file
+  <div class="flex flex-row justify-center">
+    <table>
+      <thead>
+        <tr>
+          <th>
+            <!-- Intended to be empty - For checkbox -->
+          </th>
+          <th>
+            <div class="text-center font-normal mb-2">Param Name</div>
+          </th>
+          <th>
+            <div class="text-center font-normal mb-2">Value</div>
+          </th>
+          <th>
+            <!-- Intended to be empty - For delete button -->
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(paramRow, idx) in localState" :key="idx">
+          <td class="px-2">
+            <a-form-item>
+              <a-checkbox v-model:checked="paramRow.enabled" />
+            </a-form-item>
+          </td>
+          <td class="px-2">
+            <a-form-item>
+              <a-input v-model:value="paramRow.name" size="large" placeholder="Key" />
+            </a-form-item>
+          </td>
+          <td class="px-2">
+            <a-form-item>
+              <a-input v-model:value="paramRow.value" size="large" placeholder="Value" />
+            </a-form-item>
+          </td>
+          <td class="relative">
+            <div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
+              <MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteParamRow(idx)" />
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td :colspan="12" class="text-center">
+            <a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addParamRow">
+              <template #icon>
+                <MdiPlusIcon class="flex mx-auto" />
+              </template>
+            </a-button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

From 57dfce118f607b4feaef879247ba21f3368864bc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 19:14:55 +0800
Subject: [PATCH 065/125] feat(gui-v2): ApiClientHeaders

---
 .../components/api-client/Headers.vue         | 124 +++++++++++++++++-
 1 file changed, 122 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/api-client/Headers.vue b/packages/nc-gui-v2/components/api-client/Headers.vue
index d7f82849a5..6111e18681 100644
--- a/packages/nc-gui-v2/components/api-client/Headers.vue
+++ b/packages/nc-gui-v2/components/api-client/Headers.vue
@@ -1,7 +1,127 @@
 <script setup lang="ts">
+import MdiPlusIcon from '~icons/mdi/plus'
+import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 
+interface Props {
+  modelValue: Record<string, any>[]
+}
+
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const localState = computed({
+  get() {
+    return modelValue
+  },
+  set(newValue: Record<string, any>[]) {
+    emit('update:modelValue', newValue)
+  },
+})
+
+const headerList = ref([
+  'A-IM',
+  'Accept',
+  'Accept-Charset',
+  'Accept-Encoding',
+  'Accept-Language',
+  'Accept-Datetime',
+  'Access-Control-Request-Method',
+  'Access-Control-Request-Headers',
+  'Authorization',
+  'Cache-Control',
+  'Connection',
+  'Content-Length',
+  'Content-Type',
+  'Cookie',
+  'Date',
+  'Expect',
+  'Forwarded',
+  'From',
+  'Host',
+  'If-Match',
+  'If-Modified-Since',
+  'If-None-Match',
+  'If-Range',
+  'If-Unmodified-Since',
+  'Max-Forwards',
+  'Origin',
+  'Pragma',
+  'Proxy-Authorization',
+  'Range',
+  'Referer',
+  'TE',
+  'User-Agent',
+  'Upgrade',
+  'Via',
+  'Warning',
+  'Non-standard headers',
+  'Dnt',
+  'X-Requested-With',
+  'X-CSRF-Token',
+])
+
+const addHeaderRow = () => localState.value.push({})
+
+const deleteHeaderRow = (idx: number) => localState.value.splice(idx, 1)
 </script>
 
 <template>
-TODO: Headers
-</template>
\ No newline at end of file
+  <div class="flex flex-row justify-center">
+    <table>
+      <thead>
+        <tr>
+          <th>
+            <!-- Intended to be empty - For checkbox -->
+          </th>
+          <th>
+            <div class="text-center font-normal mb-2">Header Name</div>
+          </th>
+          <th>
+            <div class="text-center font-normal mb-2">Value</div>
+          </th>
+          <th>
+            <!-- Intended to be empty - For delete button -->
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(headerRow, idx) in localState" :key="idx">
+          <td class="px-2">
+            <a-form-item>
+              <a-checkbox v-model:checked="headerRow.enabled" />
+            </a-form-item>
+          </td>
+          <td class="px-2">
+            <a-form-item>
+              <a-select v-model:value="headerRow.name" size="large" placeholder="Key">
+                <a-select-option v-for="(header, i) in headerList" :key="i" :value="header">
+                  {{ header }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </td>
+          <td class="px-2">
+            <a-form-item>
+              <a-input v-model:value="headerRow.value" size="large" placeholder="Value" />
+            </a-form-item>
+          </td>
+          <td class="relative">
+            <div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
+              <MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteHeaderRow(idx)" />
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td :colspan="12" class="text-center">
+            <a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addHeaderRow">
+              <template #icon>
+                <MdiPlusIcon class="flex mx-auto" />
+              </template>
+            </a-button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

From 14d087eae129cdc68f3163b95ea37c4de1a6b6e8 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 19:24:13 +0800
Subject: [PATCH 066/125] fix(gui-v2): handle base cases

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 845320f21c..b4e50cc3bd 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -232,6 +232,8 @@ function onNotTypeChange() {
   }
   if (hook.notification.type === 'URL') {
     hook.notification.payload.body = '{{ json data }}'
+    hook.notification.payload.parameters = [{}]
+    hook.notification.payload.headers = [{}]
   }
 }
 
@@ -289,6 +291,8 @@ async function onEventChange() {
 
   if (hook.notification.type === 'URL') {
     hook.notification.payload = hook.notification.payload || {}
+    hook.notification.payload.parameters = hook.notification.payload.parameters || [{}]
+    hook.notification.payload.headers = hook.notification.payload.headers || [{}]
   }
 }
 
@@ -344,7 +348,7 @@ async function saveHooks() {
     }
 
     if (!hook.id && res) {
-      // hook.id = res.id
+      hook.id = res.id
     }
 
     // TODO: wait for filter implementation
@@ -591,8 +595,7 @@ onMounted(() => {
               filters,
               notification: {
                 ...hook.notification,
-                // FIXME: this should be wrong
-                payload: notification,
+                payload: hook.notification.payload,
               },
             }"
           />

From 4340f9a3ee612c0355e6bf3cf35c38a8558547f7 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 19:55:50 +0800
Subject: [PATCH 067/125] fix(gui-v2): set default values

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index b4e50cc3bd..c753ecc1b9 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -37,10 +37,15 @@ const hook = reactive({
   title: '',
   event: '',
   operation: '',
-  eventOperation: '',
+  eventOperation: undefined,
   notification: {
     type: 'URL',
-    payload: {} as any,
+    payload: {
+      method: 'POST',
+      body: '{{ json data }}',
+      headers: [{}],
+      parameters: [{}],
+    } as any,
   },
   condition: false,
 })
@@ -234,6 +239,7 @@ function onNotTypeChange() {
     hook.notification.payload.body = '{{ json data }}'
     hook.notification.payload.parameters = [{}]
     hook.notification.payload.headers = [{}]
+    hook.notification.payload.method = 'POST'
   }
 }
 
@@ -293,6 +299,7 @@ async function onEventChange() {
     hook.notification.payload = hook.notification.payload || {}
     hook.notification.payload.parameters = hook.notification.payload.parameters || [{}]
     hook.notification.payload.headers = hook.notification.payload.headers || [{}]
+    hook.notification.payload.method = hook.notification.payload.method || 'POST'
   }
 }
 

From 139612ba5d7906cae10bb64fece66de33c12cb20 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 20:05:15 +0800
Subject: [PATCH 068/125] chore(gui-v2): MdiDeleteIcon -> MdiDeleteOutlineIcon

---
 packages/nc-gui-v2/components/webhook/List.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index dee6356cc9..eba0eb09f7 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -3,7 +3,7 @@ import { useToast } from 'vue-toastification'
 import { onMounted } from '@vue/runtime-core'
 import { MetaInj } from '~/context'
 import MdiHookIcon from '~icons/mdi/hook'
-import MdiDeleteIcon from '~icons/mdi/delete'
+import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 
 const emit = defineEmits(['edit'])
 
@@ -83,7 +83,7 @@ onMounted(() => {
                 <!-- Notify Via -->
                 <div class="mr-2">{{ $t('labels.notifyVia') }} : {{ item?.notification?.type }}</div>
                 <div class="float-right pt-2 pr-1">
-                  <MdiDeleteIcon class="text-xl" @click.stop="deleteHook(item, index)" />
+                  <MdiDeleteOutlineIcon class="text-xl" @click.stop="deleteHook(item, index)" />
                 </div>
               </div>
             </template>

From e84d4e61612fa7b778b139f55b92fe611ad3ad90 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 28 Jul 2022 20:07:36 +0800
Subject: [PATCH 069/125] chore(gui-v2): make test webhook button outlined

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index c753ecc1b9..9d646352a4 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -410,7 +410,7 @@ onMounted(() => {
       </div>
     </div>
     <div class="float-right mb-5">
-      <a-button class="mr-3" type="primary" size="large" @click="testWebhook">
+      <a-button class="mr-3" size="large" @click="testWebhook">
         <div class="flex items-center">
           <MdiGestureDoubleTapIcon class="mr-2" />
           <!-- TODO: i18n -->

From 937b418ee0f245fb61d1e3ef3b28a2296626dc50 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 13:03:08 +0800
Subject: [PATCH 070/125] fix(gui-v2): replace formState by table from
 useTableCreate

---
 .../nc-gui-v2/components/dlg/TableCreate.vue  | 24 ++++++-------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index 9466bd41f4..51da509f0b 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -53,23 +53,13 @@ const validateDuplicate = (v: string) => {
 
 const inputEl = ref<ComponentPublicInstance>()
 const useForm = Form.useForm
-const formState = reactive({
-  title: '',
-  table_name: '',
-  columns: {
-    id: true,
-    title: true,
-    created_at: true,
-    updated_at: true,
-  },
-})
 const validators = computed(() => {
   return {
     title: [validateTableName, validateDuplicateAlias],
     table_name: [validateTableName],
   }
 })
-const { resetFields, validate, validateInfos } = useForm(formState, validators)
+const { resetFields, validate, validateInfos } = useForm(table, validators)
 
 onMounted(() => {
   generateUniqueTitle()
@@ -91,10 +81,10 @@ onMounted(() => {
   >
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
-      <a-button key="submit" size="large" type="primary" @click="createTable">{{ $t('general.submit') }}</a-button>
+      <a-button key="submit" size="large" type="primary" @click="createTable()">{{ $t('general.submit') }}</a-button>
     </template>
     <div class="pl-10 pr-10 pt-5">
-      <a-form :model="formState" name="create-new-table-form">
+      <a-form :model="table" name="create-new-table-form">
         <!-- Create A New Table -->
         <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
         <!-- hint="Enter table name" -->
@@ -133,17 +123,17 @@ onMounted(() => {
                   <template #title>
                     <span>ID column is required, you can rename this later if required.</span>
                   </template>
-                  <a-checkbox v-model:checked="formState.columns.id" disabled>ID</a-checkbox>
+                  <a-checkbox v-model:checked="table.columns.id" disabled>ID</a-checkbox>
                 </a-tooltip>
               </a-col>
               <a-col :span="6">
-                <a-checkbox v-model:checked="formState.columns.title"> title </a-checkbox>
+                <a-checkbox v-model:checked="table.columns.title"> title </a-checkbox>
               </a-col>
               <a-col :span="6">
-                <a-checkbox v-model:checked="formState.columns.created_at"> created_at </a-checkbox>
+                <a-checkbox v-model:checked="table.columns.created_at"> created_at </a-checkbox>
               </a-col>
               <a-col :span="6">
-                <a-checkbox v-model:checked="formState.columns.updated_at"> updated_at </a-checkbox>
+                <a-checkbox v-model:checked="table.columns.updated_at"> updated_at </a-checkbox>
               </a-col>
             </a-row>
           </div>

From 915674dd1e734ad725a2096464558524ba599f0a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 13:03:41 +0800
Subject: [PATCH 071/125] fix(gui-v2): change columns to Record<string,
 boolean>

---
 packages/nc-gui-v2/composables/useTableCreate.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useTableCreate.ts b/packages/nc-gui-v2/composables/useTableCreate.ts
index f6f39dd493..98135d9479 100644
--- a/packages/nc-gui-v2/composables/useTableCreate.ts
+++ b/packages/nc-gui-v2/composables/useTableCreate.ts
@@ -4,10 +4,15 @@ import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
 
 export default (onTableCreate?: (tableMeta: TableType) => void) => {
-  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
+  const table = reactive<{ title: string; table_name: string; columns: Record<string, boolean> }>({
     title: '',
     table_name: '',
-    columns: ['id', 'title', 'created_at', 'updated_at'],
+    columns: {
+      id: true,
+      title: true,
+      created_at: true,
+      updated_at: true,
+    },
   })
 
   const { sqlUi, project, tables } = useProject()
@@ -16,13 +21,13 @@ export default (onTableCreate?: (tableMeta: TableType) => void) => {
   const createTable = async () => {
     if (!sqlUi?.value) return
     const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
-      if (col.column_name === 'id' && table.columns.includes('id_ag')) {
+      if (col.column_name === 'id' && table.columns.id_ag) {
         Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
         col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
         col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
         return true
       }
-      return table.columns.includes(col.column_name)
+      return !!table.columns[col.column_name]
     })
 
     const tableMeta = await $api.dbTable.create(project?.value?.id as string, {

From da9e23a62b3c4a2f46f7d0a8a6ea441232cd31d0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 13:04:19 +0800
Subject: [PATCH 072/125] chore(gui-v2): lint

---
 packages/nc-gui-v2/components.d.ts                 |  3 +++
 .../components/dashboard/settings/AuditTab.vue     |  9 ++++++++-
 .../components/dashboard/settings/Metadata.vue     |  2 +-
 .../components/dashboard/settings/UIAcl.vue        |  4 ++--
 .../nc-gui-v2/components/dlg/AirtableImport.vue    | 14 ++++++++++++--
 5 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 692c3f667c..0aeedc3574 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
     AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -16,6 +17,7 @@ declare module '@vue/runtime-core' {
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
     ADivider: typeof import('ant-design-vue/es')['Divider']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
@@ -29,6 +31,7 @@ declare module '@vue/runtime-core' {
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AList: typeof import('ant-design-vue/es')['List']
     AListItem: typeof import('ant-design-vue/es')['ListItem']
+    AListItemMeta: typeof import('ant-design-vue/es')['ListItemMeta']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 45a109f5fe..91e5cd56af 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -96,6 +96,13 @@ const columns = [
       />
     </div>
 
-    <a-table class="w-full" size="small" :data-source="audits ?? []" :columns="columns" :pagination="false" :loading="isLoading" />
+    <a-table
+      class="w-full"
+      size="small"
+      :data-source="audits ?? []"
+      :columns="columns"
+      :pagination="false"
+      :loading="isLoading"
+    />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue b/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
index fc66c3e353..91b385b0d6 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
@@ -88,7 +88,7 @@ const columns = [
       </div>
       <a-table
         class="w-full"
-        :customRow="
+        :custom-row="
           (record) => ({
             class: `nc-metasync-row nc-metasync-row-${record.title}`,
           })
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
index 2a1970ddd8..41c4d41f93 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
@@ -13,7 +13,7 @@ const toast = useToast()
 const roles = $ref<string[]>(['editor', 'commenter', 'viewer'])
 let isLoading = $ref(false)
 let tables = $ref<any[]>([])
-let searchInput = $ref('')
+const searchInput = $ref('')
 
 const filteredTables = computed(() =>
   tables.filter(
@@ -123,7 +123,7 @@ const columns = [
         :pagination="false"
         :loading="isLoading"
         bordered
-        :customRow="
+        :custom-row="
           (record) => ({
             class: `nc-acl-table-row nc-acl-table-row-${record.title}`,
           })
diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 28c808e539..673e93d3c7 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -240,10 +240,20 @@ onBeforeUnmount(() => {
         </div>
         <a-form ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="ma-0">
           <a-form-item v-bind="validateInfos['details.apiKey']">
-            <a-input-password v-model:value="syncSource.details.apiKey" class="nc-input-api-key" placeholder="Api Key" size="large" />
+            <a-input-password
+              v-model:value="syncSource.details.apiKey"
+              class="nc-input-api-key"
+              placeholder="Api Key"
+              size="large"
+            />
           </a-form-item>
           <a-form-item v-bind="validateInfos['details.syncSourceUrlOrId']">
-            <a-input v-model:value="syncSource.details.syncSourceUrlOrId" class="nc-input-shared-base" placeholder="Shared Base ID / URL" size="large" />
+            <a-input
+              v-model:value="syncSource.details.syncSourceUrlOrId"
+              class="nc-input-shared-base"
+              placeholder="Shared Base ID / URL"
+              size="large"
+            />
           </a-form-item>
           <span class="prose-xl font-bold self-center my-4">Advanced Settings</span>
           <a-divider class="mt-2 mb-5" />

From a3407dda72e90e35fc7d35db0887a8dccdb131db Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 13:27:05 +0800
Subject: [PATCH 073/125] fix(gui-v2): set maskClosable to false

---
 packages/nc-gui-v2/components/dlg/AirtableImport.vue | 2 +-
 packages/nc-gui-v2/components/dlg/QuickImport.vue    | 2 +-
 packages/nc-gui-v2/components/dlg/TableCreate.vue    | 1 +
 packages/nc-gui-v2/components/dlg/TableRename.vue    | 1 +
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 673e93d3c7..94b1efad22 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -210,7 +210,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" :mask-closable="false" @keydown.esc="dialogShow = false">
     <template #footer>
       <div v-if="step === 1">
         <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index 4678f101b9..705d8799a0 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -228,7 +228,7 @@ function getAdapter(name: string, val: any) {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(60vw, 600px)" @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" width="max(60vw, 600px)" :mask-closable="false" @keydown.esc="dialogShow = false">
     <a-typography-title class="ml-5 mt-5 mb-5" type="secondary" :level="5">{{ importMeta.header }}</a-typography-title>
     <template #footer>
       <a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button>
diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index 51da509f0b..eb726c3a2e 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -76,6 +76,7 @@ onMounted(() => {
   <a-modal
     v-model:visible="dialogShow"
     width="max(30vw, 600px)"
+    :mask-closable="false"
     @keydown.esc="dialogShow = false"
     @keydown.enter="$emit('create', table)"
   >
diff --git a/packages/nc-gui-v2/components/dlg/TableRename.vue b/packages/nc-gui-v2/components/dlg/TableRename.vue
index b18148ca70..bfd2e46b0b 100644
--- a/packages/nc-gui-v2/components/dlg/TableRename.vue
+++ b/packages/nc-gui-v2/components/dlg/TableRename.vue
@@ -95,6 +95,7 @@ const renameTable = async () => {
   <a-modal
     v-model:visible="dialogShow"
     :title="$t('activity.renameTable')"
+    :mask-closable="false"
     @keydown.esc="dialogShow = false"
     @finish="renameTable"
   >

From a62a5834b1e115174872b385131fbdd21547b7e6 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 13:39:20 +0800
Subject: [PATCH 074/125] fix(gui-v2): add missing Go To Dashboard button

---
 .../nc-gui-v2/components/dlg/AirtableImport.vue   | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 94b1efad22..c173989469 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -14,18 +14,28 @@ interface Props {
 }
 
 const { modelValue } = defineProps<Props>()
+
 const emit = defineEmits(['update:modelValue'])
 
 // TODO: handle baseURL
 const baseURL = 'http://localhost:8080' // this.$axios.defaults.baseURL
 
 const { $state } = useNuxtApp()
+
 const toast = useToast()
+
 const { sqlUi, project, loadTables } = useProject()
+
 const loading = ref(false)
+
+const showGoToDashboardButton = ref(false)
+
 const step = ref(1)
+
 const progress = ref<Record<string, any>[]>([])
+
 let socket: Socket | null
+
 const syncSource = ref({
   id: '',
   type: 'Airtable',
@@ -64,6 +74,7 @@ const dialogShow = computed({
 })
 
 const useForm = Form.useForm
+
 const { resetFields, validate, validateInfos } = useForm(syncSource, validators)
 
 const disableImportButton = computed(() => {
@@ -195,6 +206,7 @@ onMounted(async () => {
   socket.on('progress', async (d: Record<string, any>) => {
     progress.value.push(d)
     if (d.status === 'COMPLETED') {
+      showGoToDashboardButton.value = true
       await loadTables()
       // TODO: add tab of the first table
     }
@@ -314,6 +326,9 @@ onBeforeUnmount(() => {
             <span class="text-green-500 ml-2"> Importing</span>
           </div>
         </a-card>
+        <div class="flex justify-center items-center">
+          <a-button v-if="showGoToDashboardButton" class="mt-4" size="large" @click="dialogShow = false">Go to Dashboard</a-button>
+        </div>
       </div>
     </div>
   </a-modal>

From 9cfc6018ce1a139cae254e8fbca11475b894ae3f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 13:42:39 +0800
Subject: [PATCH 075/125] fix(gui-v2): add log ref

---
 .../nc-gui-v2/components/dlg/AirtableImport.vue  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index c173989469..27266d5376 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -34,6 +34,8 @@ const step = ref(1)
 
 const progress = ref<Record<string, any>[]>([])
 
+const logRef = ref()
+
 let socket: Socket | null
 
 const syncSource = ref({
@@ -205,6 +207,14 @@ onMounted(async () => {
 
   socket.on('progress', async (d: Record<string, any>) => {
     progress.value.push(d)
+
+    nextTick(() => {
+      if (logRef.value) {
+        const el = logRef.value.$el
+        el.scrollTop = el.scrollHeight
+      }
+    })
+
     if (d.status === 'COMPLETED') {
       showGoToDashboardButton.value = true
       await loadTables()
@@ -303,7 +313,7 @@ onBeforeUnmount(() => {
       </div>
       <div v-if="step === 2">
         <div class="mb-4 prose-xl font-bold">Logs</div>
-        <a-card body-style="background-color: #000000; height:400px; overflow: auto;">
+        <a-card ref="logRef" 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" />
@@ -327,7 +337,9 @@ onBeforeUnmount(() => {
           </div>
         </a-card>
         <div class="flex justify-center items-center">
-          <a-button v-if="showGoToDashboardButton" class="mt-4" size="large" @click="dialogShow = false">Go to Dashboard</a-button>
+          <a-button v-if="showGoToDashboardButton" class="mt-4" size="large" @click="dialogShow = false"
+            >Go to Dashboard</a-button
+          >
         </div>
       </div>
     </div>

From 4f036e421830aadf126924f6728521b0cf00b3e6 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 14:14:33 +0800
Subject: [PATCH 076/125] fix(gui-v2): use <a-select/> with show-search

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

diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index 247e300353..b87e24b1f6 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -364,9 +364,10 @@ defineExpose({
                 </template>
                 <template v-else-if="column.key === 'uidt'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
-                    <a-auto-complete
+                    <a-select
                       v-model:value="record.uidt"
                       class="w-52"
+                      show-search
                       size="large"
                       :options="uiTypeOptions"
                       :filter-option="filterOption"
@@ -476,4 +477,4 @@ defineExpose({
     @apply !pb-0;
   }
 }
-</style>
+</style>
\ No newline at end of file

From cfc60e742382df65cd7a7cb33fafaeee215e2a7d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 14:46:22 +0800
Subject: [PATCH 077/125] fix(gui-v2): not render format json button in
 template edito

---
 packages/nc-gui-v2/components/dlg/QuickImport.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index 705d8799a0..24ada584da 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -233,7 +233,11 @@ 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" :disabled="disableFormatJsonButton" @click="formatJson"
+      <a-button
+        v-if="activeKey === 'jsonEditorTab' && !templateEditorModal"
+        key="format"
+        :disabled="disableFormatJsonButton"
+        @click="formatJson"
         >Format JSON</a-button
       >
       <a-button

From 9c4594ef34d7c814712696c7cb369119c45f228e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 15:09:03 +0800
Subject: [PATCH 078/125] fix(gui-v2): fix json validation logic

---
 packages/nc-gui-v2/components/dlg/QuickImport.vue | 11 ++++++++---
 packages/nc-gui-v2/components/template/Editor.vue |  5 ++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index 24ada584da..a1348c2da3 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -141,9 +141,14 @@ async function handlePreImport() {
 }
 
 async function handleImport() {
-  loading.value = true
-  await templateEditorRef.value.importTemplate()
-  loading.value = false
+  try {
+    loading.value = true
+    await templateEditorRef.value.importTemplate()
+  } catch (e: any) {
+    return toast.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    loading.value = false
+  }
   dialogShow.value = false
 }
 
diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index b87e24b1f6..caf1d4ae6f 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -174,9 +174,8 @@ async function importTemplate() {
   try {
     await validate()
   } catch (errorInfo) {
-    toast.error('Please fill all the required values')
     isImporting.value = false
-    return
+    throw new Error('Please fill all the required values')
   }
 
   try {
@@ -477,4 +476,4 @@ defineExpose({
     @apply !pb-0;
   }
 }
-</style>
\ No newline at end of file
+</style>

From 49514d2c3ebbc9ca66a76ce8df87ab19dd1d1269 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 16:37:18 +0800
Subject: [PATCH 079/125] fix(gui-v2): fix modalWidth for excel import

---
 packages/nc-gui-v2/components/dlg/QuickImport.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index a1348c2da3..3d63482b93 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -123,6 +123,13 @@ const disableImportButton = computed(() => {
 
 const disableFormatJsonButton = computed(() => !jsonEditorRef.value?.isValid)
 
+const modalWidth = computed(() => {
+  if (importType === 'excel' && templateEditorModal.value) {
+    return 'max(90vw, 600px)'
+  }
+  return 'max(60vw, 600px)'
+})
+
 async function handlePreImport() {
   loading.value = true
   if (activeKey.value === 'uploadTab') {
@@ -233,7 +240,7 @@ function getAdapter(name: string, val: any) {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(60vw, 600px)" :mask-closable="false" @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" :width="modalWidth" :mask-closable="false" @keydown.esc="dialogShow = false">
     <a-typography-title class="ml-5 mt-5 mb-5" type="secondary" :level="5">{{ importMeta.header }}</a-typography-title>
     <template #footer>
       <a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button>

From 63fe318d6231a325bd2079b09dfc4b8d5f438e1a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 17:02:02 +0800
Subject: [PATCH 080/125] fix(gui-v2): revise editor template input style

---
 packages/nc-gui-v2/components/template/Editor.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index caf1d4ae6f..36b72f699c 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -357,7 +357,6 @@ defineExpose({
                         }
                       "
                       v-model:value="record.column_name"
-                      size="large"
                     />
                   </a-form-item>
                 </template>
@@ -367,7 +366,6 @@ defineExpose({
                       v-model:value="record.uidt"
                       class="w-52"
                       show-search
-                      size="large"
                       :options="uiTypeOptions"
                       :filter-option="filterOption"
                     />
@@ -376,7 +374,7 @@ defineExpose({
 
                 <template v-else-if="column.key === 'dtxp'">
                   <a-form-item v-if="isSelect(record)">
-                    <a-input v-model:value="record.dtxp" size="large" />
+                    <a-input v-model:value="record.dtxp" />
                   </a-form-item>
                 </template>
 
@@ -386,9 +384,9 @@ defineExpose({
                       <!-- TODO: i18n -->
                       <span>Primary Value</span>
                     </template>
-                    <span class="mr-3">
+                    <div class="flex items-center float-right mr-4">
                       <MdiKeyStarIcon class="text-lg" />
-                    </span>
+                    </div>
                   </a-tooltip>
                   <a-tooltip v-else>
                     <template #title>
@@ -473,7 +471,10 @@ defineExpose({
     @apply bg-white;
   }
   :deep(.template-form-row) > td {
-    @apply !pb-0;
+    @apply pa-0 mb-0;
+    .ant-form-item {
+      @apply mb-0;
+    }
   }
 }
 </style>

From 14ec15cd3d3431dde4f127ecf6cf6ce05cd30ec1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sun, 31 Jul 2022 16:09:00 +0800
Subject: [PATCH 081/125] fix(gui-v2): set SingleLineText as default

---
 packages/nc-gui-v2/components/template/Editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index 36b72f699c..fa07e64a4c 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -446,7 +446,7 @@ defineExpose({
                   <!-- TODO: i18n -->
                   <span>Add Other Column</span>
                 </template>
-                <a-button @click="addNewColumnRow(table)">
+                <a-button @click="addNewColumnRow(table, 'SingleLineText')">
                   <div class="flex items-center">
                     <MdiPlusIcon class="text-lg" />
                     Column

From cef72313feee53be3c091d9834a6df9668fda532 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 1 Aug 2022 10:24:05 +0530
Subject: [PATCH 082/125] chore: minor changes

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/dlg/QuickImport.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index 3d63482b93..a109a313ce 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -305,7 +305,7 @@ function getAdapter(name: string, val: any) {
           <template #tab>
             <span class="flex items-center gap-2">
               <MdiCodeJSONIcon />
-              Json Editor
+              JSON Editor
             </span>
           </template>
           <div class="pb-3 pt-3">
@@ -316,7 +316,7 @@ function getAdapter(name: string, val: any) {
           <template #tab>
             <span class="flex items-center gap-2">
               <MdiLinkVariantIcon />
-              Url
+              URL
             </span>
           </template>
           <div class="pr-10 pt-5">

From 88631ed5720a3057472dd5794f71038a1acd103e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 13:57:47 +0800
Subject: [PATCH 083/125] fix(gui-v2): show error when createTable fails

---
 .../nc-gui-v2/composables/useTableCreate.ts   | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useTableCreate.ts b/packages/nc-gui-v2/composables/useTableCreate.ts
index 98135d9479..eb1fd749d2 100644
--- a/packages/nc-gui-v2/composables/useTableCreate.ts
+++ b/packages/nc-gui-v2/composables/useTableCreate.ts
@@ -2,6 +2,8 @@ import type { TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
+import { useToast } from 'vue-toastification'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 
 export default (onTableCreate?: (tableMeta: TableType) => void) => {
   const table = reactive<{ title: string; table_name: string; columns: Record<string, boolean> }>({
@@ -16,26 +18,33 @@ export default (onTableCreate?: (tableMeta: TableType) => void) => {
   })
 
   const { sqlUi, project, tables } = useProject()
+
+  const toast = useToast()
+
   const { $api } = useNuxtApp()
 
   const createTable = async () => {
-    if (!sqlUi?.value) return
-    const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
-      if (col.column_name === 'id' && table.columns.id_ag) {
-        Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
-        col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
-        col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
-        return true
-      }
-      return !!table.columns[col.column_name]
-    })
-
-    const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
-      ...table,
-      columns,
-    })
-
-    onTableCreate?.(tableMeta)
+    try {
+      if (!sqlUi?.value) return
+      const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
+        if (col.column_name === 'id' && table.columns.id_ag) {
+          Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
+          col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
+          col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
+          return true
+        }
+        return !!table.columns[col.column_name]
+      })
+
+      const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
+        ...table,
+        columns,
+      })
+
+      onTableCreate?.(tableMeta)
+    } catch (e: any) {
+      toast.error(await extractSdkResponseErrorMsg(e))
+    }
   }
 
   watch(

From aa1a4f90652876ec6873df74da850ae4b67fb205 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 13:58:18 +0800
Subject: [PATCH 084/125] fix(gui-v2): focus on input & move keydown.enter to
 form

---
 .../nc-gui-v2/components/dlg/TableCreate.vue  | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index eb726c3a2e..864fa0ff5d 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -51,8 +51,10 @@ const validateDuplicate = (v: string) => {
   return (tables?.value || []).every((t) => t.table_name.toLowerCase() !== (v || '').toLowerCase()) || 'Duplicate table name'
 }
 
-const inputEl = ref<ComponentPublicInstance>()
+const inputEl = ref<HTMLInputElement>()
+
 const useForm = Form.useForm
+
 const validators = computed(() => {
   return {
     title: [validateTableName, validateDuplicateAlias],
@@ -63,29 +65,18 @@ const { resetFields, validate, validateInfos } = useForm(table, validators)
 
 onMounted(() => {
   generateUniqueTitle()
-
-  nextTick(() => {
-    const el = inputEl.value?.$el
-    el?.querySelector('input')?.focus()
-    el?.querySelector('input')?.select()
-  })
+  inputEl.value?.focus()
 })
 </script>
 
 <template>
-  <a-modal
-    v-model:visible="dialogShow"
-    width="max(30vw, 600px)"
-    :mask-closable="false"
-    @keydown.esc="dialogShow = false"
-    @keydown.enter="$emit('create', table)"
-  >
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" :mask-closable="false" @keydown.esc="dialogShow = false">
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
       <a-button key="submit" size="large" type="primary" @click="createTable()">{{ $t('general.submit') }}</a-button>
     </template>
     <div class="pl-10 pr-10 pt-5">
-      <a-form :model="table" name="create-new-table-form">
+      <a-form :model="table" name="create-new-table-form" @keydown.enter="createTable">
         <!-- Create A New Table -->
         <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
         <!-- hint="Enter table name" -->

From 7d9a9f0b919beb7089fa15549cfce639b2424690 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 14:02:54 +0800
Subject: [PATCH 085/125] fix(gui-v2): hide msg.info.tableNameInDb message

---
 packages/nc-gui-v2/components/dlg/TableCreate.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index 864fa0ff5d..3dfd2daf37 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-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'
@@ -11,7 +10,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue', 'create'])
+const emit = defineEmits(['update:modelValue'])
 
 const dialogShow = useVModel(props, 'modelValue', emit)
 
@@ -20,8 +19,11 @@ const idTypes = [
   { value: 'AG', text: 'Auto generated string' },
 ]
 const toast = useToast()
+
 const valid = ref(false)
+
 const isIdToggleAllowed = ref(false)
+
 const isAdvanceOptVisible = ref(false)
 
 const { addTab } = useTabs()
@@ -100,7 +102,7 @@ onMounted(() => {
         </div>
         <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>
+          <div class="mb-2" v-if="!project.prefix">{{ $t('msg.info.tableNameInDb') }}</div>
           <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>

From 07838a4fe035ae1dc4ed6f94275f6d30aad1fb1e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 14:04:48 +0800
Subject: [PATCH 086/125] refactor(gui-v2): lint

---
 packages/nc-gui-v2/components/dlg/TableCreate.vue | 6 +-----
 packages/nc-gui-v2/composables/useTableCreate.ts  | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index 3dfd2daf37..6148d283f4 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -14,10 +14,6 @@ const emit = defineEmits(['update:modelValue'])
 
 const dialogShow = useVModel(props, 'modelValue', emit)
 
-const idTypes = [
-  { value: 'AI', text: 'Auto increment number' },
-  { value: 'AG', text: 'Auto generated string' },
-]
 const toast = useToast()
 
 const valid = ref(false)
@@ -102,7 +98,7 @@ onMounted(() => {
         </div>
         <div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }">
           <!-- hint="Table name as saved in database" -->
-          <div class="mb-2" v-if="!project.prefix">{{ $t('msg.info.tableNameInDb') }}</div>
+          <div v-if="!project.prefix" class="mb-2">{{ $t('msg.info.tableNameInDb') }}</div>
           <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>
diff --git a/packages/nc-gui-v2/composables/useTableCreate.ts b/packages/nc-gui-v2/composables/useTableCreate.ts
index eb1fd749d2..07ef98cfd5 100644
--- a/packages/nc-gui-v2/composables/useTableCreate.ts
+++ b/packages/nc-gui-v2/composables/useTableCreate.ts
@@ -1,8 +1,8 @@
 import type { TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
+import { useToast } from 'vue-toastification'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
-import { useToast } from 'vue-toastification'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 
 export default (onTableCreate?: (tableMeta: TableType) => void) => {

From 4d63e494e8bbe026f3c465f96005edac105c6e9f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 14:07:56 +0800
Subject: [PATCH 087/125] refactor(gui-v2): use useVModel for dialogShow

---
 .../nc-gui-v2/components/dlg/QuickImport.vue  | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index a109a313ce..16e86c9969 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -18,7 +18,7 @@ interface Props {
   importType: 'csv' | 'json' | 'excel'
 }
 
-const { modelValue, importType } = defineProps<Props>()
+const props = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -55,11 +55,11 @@ const importState = reactive({
   },
 })
 
-const isImportTypeJson = computed(() => importType === 'json')
+const isImportTypeJson = computed(() => props.importType === 'json')
 
-const isImportTypeCsv = computed(() => importType === 'csv')
+const isImportTypeCsv = computed(() => props.importType === 'csv')
 
-const IsImportTypeExcel = computed(() => importType === 'excel')
+const IsImportTypeExcel = computed(() => props.importType === 'excel')
 
 const validators = computed(() => {
   return {
@@ -97,14 +97,7 @@ const importMeta = computed(() => {
   return {}
 })
 
-const dialogShow = computed({
-  get() {
-    return modelValue
-  },
-  set(v) {
-    emit('update:modelValue', v)
-  },
-})
+const dialogShow = useVModel(props, 'modelValue', emit)
 
 const disablePreImportButton = computed(() => {
   if (activeKey.value === 'uploadTab') {
@@ -124,7 +117,7 @@ const disableImportButton = computed(() => {
 const disableFormatJsonButton = computed(() => !jsonEditorRef.value?.isValid)
 
 const modalWidth = computed(() => {
-  if (importType === 'excel' && templateEditorModal.value) {
+  if (props.importType === 'excel' && templateEditorModal.value) {
     return 'max(90vw, 600px)'
   }
   return 'max(60vw, 600px)'

From 2d8525e948547c01150ceac445f698a11ed67036 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 15:45:45 +0800
Subject: [PATCH 088/125] fix(gui-v2): scroll log automatically

---
 packages/nc-gui-v2/components/dlg/AirtableImport.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 27266d5376..46a753e45f 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -208,12 +208,7 @@ onMounted(async () => {
   socket.on('progress', async (d: Record<string, any>) => {
     progress.value.push(d)
 
-    nextTick(() => {
-      if (logRef.value) {
-        const el = logRef.value.$el
-        el.scrollTop = el.scrollHeight
-      }
-    })
+    logRef.value.scrollTop = logRef.value?.scrollHeight
 
     if (d.status === 'COMPLETED') {
       showGoToDashboardButton.value = true

From c3d60ae7d502b6c5c394801ae2a17a4521629266 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 16:06:11 +0800
Subject: [PATCH 089/125] fix(gui-v2): remove prev highlighted item style

---
 packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index f2374f2462..fc964ee1c5 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -149,4 +149,8 @@ function openQuickImportDialog(type: string) {
 :deep(.ant-tabs-nav) {
   @apply !mb-0;
 }
+
+:deep(.ant-menu-item-selected) {
+  @apply text-inherit !bg-inherit
+}
 </style>

From c464277aab8a34082fe0d0fabb0221955c9e1677 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 16:40:00 +0800
Subject: [PATCH 090/125] fix(gui-v2): add@import & emit

---
 packages/nc-gui-v2/components/dlg/QuickImport.vue | 3 ++-
 packages/nc-gui-v2/components/template/Editor.vue | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index 16e86c9969..bfb723632e 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -265,7 +265,8 @@ function getAdapter(name: string, val: any) {
         ref="templateEditorRef"
         :project-template="templateData"
         :import-data="importData"
-        :quick-import-type="importType"
+        :quick-import-type="props.importType"
+        @import="handleImport"
       />
       <a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" :tab-position="top">
         <a-tab-pane key="uploadTab" :closable="false">
diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index fa07e64a4c..157ad46a41 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -28,6 +28,8 @@ interface Option {
 
 const { quickImportType, projectTemplate, importData } = defineProps<Props>()
 
+const emit = defineEmits(['import'])
+
 const useForm = Form.useForm
 
 const { $api } = useNuxtApp()
@@ -73,6 +75,9 @@ const { sqlUi, project, loadTables } = useProject()
 
 onMounted(() => {
   parseAndLoadTemplate()
+  nextTick(() => {
+    inputRefs.value[0]?.focus()
+  })
 })
 
 const validators = computed(() =>
@@ -282,7 +287,7 @@ defineExpose({
 <template>
   <a-spin :spinning="isImporting" :tip="importingTip" size="large">
     <a-card>
-      <a-form :model="data" name="template-editor-form">
+      <a-form :model="data" name="template-editor-form" @keydown.enter="emit('import')">
         <p v-if="data.tables && quickImportType === 'excel'" class="text-center">
           {{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
           available for import

From c37a94612fd15632d67d872ea24fbcac4e7d85d4 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 16:40:06 +0800
Subject: [PATCH 091/125] chore(gui-v2): lint

---
 packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index fc964ee1c5..37df19fa58 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -151,6 +151,6 @@ function openQuickImportDialog(type: string) {
 }
 
 :deep(.ant-menu-item-selected) {
-  @apply text-inherit !bg-inherit
+  @apply text-inherit !bg-inherit;
 }
 </style>

From 4213ad4acf1b94c63cae11dfee04712452cd18b9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 17:22:44 +0800
Subject: [PATCH 092/125] fix(gui-v2): render DlgTableCreate only when
 DlgTableCreate is true

---
 packages/nc-gui-v2/components/dashboard/TreeView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 9c040b6ce1..de0a0c305a 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -297,7 +297,7 @@ const addTableTab = (table: TableType) => {
     </div>
 
     <SettingsModal :show="settingsDlg" @closed="settingsDlg = false" />
-    <DlgTableCreate v-model="tableCreateDlg" />
+    <DlgTableCreate v-if="tableCreateDlg" v-model="tableCreateDlg" />
     <DlgTableRename v-if="renameTableMeta" v-model="renameTableDlg" :table-meta="renameTableMeta" />
   </div>
 </template>

From 8e8edec7f9163ae006ab348f0adea3773eea155d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 17:34:05 +0800
Subject: [PATCH 093/125] fix(gui-v2): add nextTick for scrolling log

---
 packages/nc-gui-v2/components/dlg/AirtableImport.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 46a753e45f..e178330c81 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -208,7 +208,9 @@ onMounted(async () => {
   socket.on('progress', async (d: Record<string, any>) => {
     progress.value.push(d)
 
-    logRef.value.scrollTop = logRef.value?.scrollHeight
+    nextTick(() => {
+      logRef.value.scrollTop = logRef.value?.scrollHeight
+    })
 
     if (d.status === 'COMPLETED') {
       showGoToDashboardButton.value = true

From 6f2eff55bcdc540b3935190845b5a5ce8e362bc9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 1 Aug 2022 17:44:22 +0800
Subject: [PATCH 094/125] chore(gui-v2): add FIXME tag

---
 packages/nc-gui-v2/components/dlg/AirtableImport.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index e178330c81..33c151381e 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -208,6 +208,7 @@ onMounted(async () => {
   socket.on('progress', async (d: Record<string, any>) => {
     progress.value.push(d)
 
+    // FIXME: this doesn't work
     nextTick(() => {
       logRef.value.scrollTop = logRef.value?.scrollHeight
     })

From 28724bba391262b2f7bf30d1ab36b7a6cb7cf0a3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 11:35:10 +0800
Subject: [PATCH 095/125] fix(gui-v2): destructure parts of props

---
 packages/nc-gui-v2/components/dlg/QuickImport.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index bfb723632e..c9ccf6dd6b 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -18,7 +18,7 @@ interface Props {
   importType: 'csv' | 'json' | 'excel'
 }
 
-const props = defineProps<Props>()
+const { importType, ...rest } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -55,11 +55,11 @@ const importState = reactive({
   },
 })
 
-const isImportTypeJson = computed(() => props.importType === 'json')
+const isImportTypeJson = computed(() => importType === 'json')
 
-const isImportTypeCsv = computed(() => props.importType === 'csv')
+const isImportTypeCsv = computed(() => importType === 'csv')
 
-const IsImportTypeExcel = computed(() => props.importType === 'excel')
+const IsImportTypeExcel = computed(() => importType === 'excel')
 
 const validators = computed(() => {
   return {
@@ -97,7 +97,7 @@ const importMeta = computed(() => {
   return {}
 })
 
-const dialogShow = useVModel(props, 'modelValue', emit)
+const dialogShow = useVModel(rest, 'modelValue', emit)
 
 const disablePreImportButton = computed(() => {
   if (activeKey.value === 'uploadTab') {
@@ -117,7 +117,7 @@ const disableImportButton = computed(() => {
 const disableFormatJsonButton = computed(() => !jsonEditorRef.value?.isValid)
 
 const modalWidth = computed(() => {
-  if (props.importType === 'excel' && templateEditorModal.value) {
+  if (importType === 'excel' && templateEditorModal.value) {
     return 'max(90vw, 600px)'
   }
   return 'max(60vw, 600px)'
@@ -265,7 +265,7 @@ function getAdapter(name: string, val: any) {
         ref="templateEditorRef"
         :project-template="templateData"
         :import-data="importData"
-        :quick-import-type="props.importType"
+        :quick-import-type="importType"
         @import="handleImport"
       />
       <a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" :tab-position="top">

From 6d02903efadcce4786217fe273602ac3c6c66814 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 11:35:56 +0800
Subject: [PATCH 096/125] chore(gui-v2): fix formatting

---
 packages/nc-gui-v2/components/dlg/AirtableImport.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index e57da6ea61..01d916e261 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -335,8 +335,7 @@ onBeforeUnmount(() => {
           </div>
         </a-card>
         <div class="flex justify-center items-center">
-          <a-button v-if="showGoToDashboardButton" class="mt-4" size="large" @click="dialogShow = false"
-            >Go to Dashboard</a-button
+          <a-button v-if="showGoToDashboardButton" class="mt-4" size="large" @click="dialogShow = false">Go to Dashboard</a-button
           >
         </div>
       </div>

From 2f3b0fa49eb0eb42db3e336391d63c692c6331d5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 12:31:13 +0800
Subject: [PATCH 097/125] fix(gui-v2): remove border

---
 packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index 8a6fbc4f69..6ff2fa5455 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -156,4 +156,10 @@ function openQuickImportDialog(type: string) {
 :deep(.ant-menu-item-selected) {
   @apply text-inherit !bg-inherit;
 }
+
+:deep(.ant-menu-horizontal),
+:deep(.ant-menu-item::after),
+:deep(.ant-menu-submenu::after) {
+  @apply !border-none;
+}
 </style>

From dbbd67fe34793f43df2123420eaf974a72130279 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 13:54:37 +0800
Subject: [PATCH 098/125] fix(gui-v2): airtable import log scrolling

---
 packages/nc-gui-v2/components/dlg/AirtableImport.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 01d916e261..e76617f704 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -2,6 +2,7 @@
 import io from 'socket.io-client'
 import type { Socket } from 'socket.io-client'
 import { Form } from 'ant-design-vue'
+import type { Card as AntCard } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
 import { fieldRequiredValidator } from '~/utils/validation'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -34,7 +35,7 @@ const step = ref(1)
 
 const progress = ref<Record<string, any>[]>([])
 
-const logRef = ref()
+const logRef = ref<typeof AntCard>()
 
 let socket: Socket | null
 
@@ -208,9 +209,8 @@ onMounted(async () => {
   socket.on('progress', async (d: Record<string, any>) => {
     progress.value.push(d)
 
-    // FIXME: this doesn't work
     nextTick(() => {
-      logRef.value.scrollTop = logRef.value?.scrollHeight
+      ;(logRef.value?.$el as HTMLDivElement).scrollTo()
     })
 
     if (d.status === 'COMPLETED') {

From 0cd44ee36b131d8848e1dcdd4e77d3773f0d9c03 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 13:59:42 +0800
Subject: [PATCH 099/125] fix(gui-v2) update extractSdkResponseErrorMsg import
 path

---
 packages/nc-gui-v2/components/webhook/Test.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index 38530bcb16..bd0ae39c34 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -2,7 +2,7 @@
 import { onMounted } from '@vue/runtime-core'
 import { useToast } from 'vue-toastification'
 import { MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 interface Props {
   hook: Record<string, any>

From 7f648eabab75fca3c39bbde7dd52c06e8929e894 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 09:09:51 +0200
Subject: [PATCH 100/125] refactor(gui-v2): remove success color from global
 loading spinner

---
 packages/nc-gui-v2/app.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index d56cfb3174..9ca0b862d5 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -41,9 +41,9 @@ const toggleSidebar = () => {
           <span class="prose-xl">NocoDB</span>
         </div>
 
-        <div v-show="state.isLoading.value" class="text-gray-400 ml-3">
+        <div v-show="state.isLoading.value" class="flex items-center gap-2 ml-3">
           {{ $t('general.loading') }}
-          <MdiReload :class="{ 'animate-infinite animate-spin !text-success': state.isLoading.value }" />
+          <MdiReload :class="{ 'animate-infinite animate-spin': state.isLoading.value }" />
         </div>
       </div>
 

From 638e304db0e53a7ce0a240bae9668db442f6d643 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 09:10:30 +0200
Subject: [PATCH 101/125] refactor(gui-v2): move sidebar toolbar items to
 separate directory

---
 .../components/smartsheet/sidebar/index.vue    |  4 ++--
 .../sidebar/toolbar}/AddRow.vue                |  0
 .../sidebar/toolbar}/DeleteTable.vue           |  0
 .../sidebar/toolbar}/LockMenu.vue              |  1 +
 .../sidebar/toolbar}/Reload.vue                |  0
 .../sidebar/toolbar}/ToggleDrawer.vue          |  0
 .../sidebar/{Toolbar.vue => toolbar/index.vue} | 18 +++++++++++++-----
 7 files changed, 16 insertions(+), 7 deletions(-)
 rename packages/nc-gui-v2/components/{smartsheet-toolbar => smartsheet/sidebar/toolbar}/AddRow.vue (100%)
 rename packages/nc-gui-v2/components/{smartsheet-toolbar => smartsheet/sidebar/toolbar}/DeleteTable.vue (100%)
 rename packages/nc-gui-v2/components/{smartsheet-toolbar => smartsheet/sidebar/toolbar}/LockMenu.vue (99%)
 rename packages/nc-gui-v2/components/{smartsheet-toolbar => smartsheet/sidebar/toolbar}/Reload.vue (100%)
 rename packages/nc-gui-v2/components/{smartsheet-toolbar => smartsheet/sidebar/toolbar}/ToggleDrawer.vue (100%)
 rename packages/nc-gui-v2/components/smartsheet/sidebar/{Toolbar.vue => toolbar/index.vue} (53%)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index e4e800d936..6f8de8eac4 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -2,8 +2,8 @@
 import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk'
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
-import Toolbar from './Toolbar.vue'
-import { computed, inject, provide, ref, useApi, useViews, watch } from '#imports'
+import Toolbar from './toolbar/index.vue'
+import { computed, inject, provide, ref, useApi, useRoute, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
 import MdiXml from '~icons/mdi/xml'
 import MdiHook from '~icons/mdi/hook'
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
similarity index 100%
rename from packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
similarity index 100%
rename from packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
similarity index 99%
rename from packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
index 2a216287fd..cfa3b57038 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
@@ -54,6 +54,7 @@ const Icon = computed(() => {
     <div class="nc-sidebar-right-item hover:after:bg-indigo-500 group">
       <Icon class="cursor-pointer group-hover:(!text-white)" />
     </div>
+
     <template #overlay>
       <div class="min-w-[350px] max-w-[500px] shadow bg-white">
         <div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
similarity index 100%
rename from packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
similarity index 100%
rename from packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
similarity index 53%
rename from packages/nc-gui-v2/components/smartsheet/sidebar/Toolbar.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index 155c46cc6d..ee85df548f 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -1,24 +1,32 @@
+<script lang="ts" setup>
+import AddRow from './AddRow.vue'
+import DeleteTable from './DeleteTable.vue'
+import LockMenu from './LockMenu.vue'
+import Reload from './Reload.vue'
+import ToggleDrawer from './ToggleDrawer.vue'
+</script>
+
 <template>
   <div class="flex gap-2">
     <slot name="start" />
 
-    <SmartsheetToolbarLockMenu />
+    <LockMenu />
 
     <div class="dot" />
 
-    <SmartsheetToolbarReload />
+    <Reload />
 
     <div class="dot" />
 
-    <SmartsheetToolbarAddRow />
+    <AddRow />
 
     <div class="dot" />
 
-    <SmartsheetToolbarDeleteTable />
+    <DeleteTable />
 
     <div class="dot" />
 
-    <SmartsheetToolbarToggleDrawer />
+    <ToggleDrawer />
 
     <slot name="end" />
   </div>

From f6bfdd262daa99dcc245e8199b0e5250b9739763 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 09:15:17 +0200
Subject: [PATCH 102/125] refactor(gui-v2): show tooltip in bottomEnd when
 sidebar is open

---
 .../components/smartsheet/sidebar/toolbar/AddRow.vue      | 6 +++++-
 .../components/smartsheet/sidebar/toolbar/DeleteTable.vue | 8 +++++---
 .../components/smartsheet/sidebar/toolbar/Reload.vue      | 7 +++++--
 .../smartsheet/sidebar/toolbar/ToggleDrawer.vue           | 2 +-
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
index 9e99331042..c75481f2a8 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import MdiAddIcon from '~icons/mdi/plus-outline'
+import { inject, ref } from '#imports'
+import { RightSidebarInj } from '~/context'
 
 const emits = defineEmits(['addRow'])
+
+const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.addRow') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-primary/75 group">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
index 0a4f7ba450..6f0cdd5a8b 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { inject, useTable } from '#imports'
-import { MetaInj } from '~/context'
+import { inject, ref, useTable } from '#imports'
+import { MetaInj, RightSidebarInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 
 const meta = inject(MetaInj)
 
 const { deleteTable } = useTable()
+
+const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.deleteTable') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-red-500 group">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
index 5a7942b884..fc68b3d577 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ReloadViewDataHookInj } from '~/context'
+import { ReloadViewDataHookInj, RightSidebarInj } from '~/context'
 import MdiReloadIcon from '~icons/mdi/reload'
+import { inject, ref } from '#imports'
 
 const reloadTri = inject(ReloadViewDataHookInj)
+
+const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('general.reload') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-green-500 group">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
index 9854e43b83..4f0c3adf44 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
@@ -8,7 +8,7 @@ const sidebarOpen = inject(RightSidebarInj, ref(false))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-pink-500 group">

From ce5dd5fbb7cfcb819ff7074b24febe9dc44c91ff Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:21:35 +0800
Subject: [PATCH 103/125] fix(gui-v2): replace by useVModel

---
 .../components/api-client/Headers.vue         | 19 ++++++-------------
 .../components/api-client/Params.vue          | 19 ++++++-------------
 2 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui-v2/components/api-client/Headers.vue b/packages/nc-gui-v2/components/api-client/Headers.vue
index 6111e18681..e465ffcdfc 100644
--- a/packages/nc-gui-v2/components/api-client/Headers.vue
+++ b/packages/nc-gui-v2/components/api-client/Headers.vue
@@ -6,18 +6,11 @@ interface Props {
   modelValue: Record<string, any>[]
 }
 
-const { modelValue } = defineProps<Props>()
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
 
-const localState = computed({
-  get() {
-    return modelValue
-  },
-  set(newValue: Record<string, any>[]) {
-    emit('update:modelValue', newValue)
-  },
-})
+const vModel = useVModel(props, 'modelValue', emits)
 
 const headerList = ref([
   'A-IM',
@@ -61,9 +54,9 @@ const headerList = ref([
   'X-CSRF-Token',
 ])
 
-const addHeaderRow = () => localState.value.push({})
+const addHeaderRow = () => vModel.value.push({})
 
-const deleteHeaderRow = (idx: number) => localState.value.splice(idx, 1)
+const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
 </script>
 
 <template>
@@ -86,7 +79,7 @@ const deleteHeaderRow = (idx: number) => localState.value.splice(idx, 1)
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(headerRow, idx) in localState" :key="idx">
+        <tr v-for="(headerRow, idx) in vModel" :key="idx">
           <td class="px-2">
             <a-form-item>
               <a-checkbox v-model:checked="headerRow.enabled" />
diff --git a/packages/nc-gui-v2/components/api-client/Params.vue b/packages/nc-gui-v2/components/api-client/Params.vue
index 7da29f6864..bacdab9b54 100644
--- a/packages/nc-gui-v2/components/api-client/Params.vue
+++ b/packages/nc-gui-v2/components/api-client/Params.vue
@@ -6,22 +6,15 @@ interface Props {
   modelValue: Record<string, any>[]
 }
 
-const { modelValue } = defineProps<Props>()
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
 
-const localState = computed({
-  get() {
-    return modelValue
-  },
-  set(newValue: Record<string, any>[]) {
-    emit('update:modelValue', newValue)
-  },
-})
+const vModel = useVModel(props, 'modelValue', emits)
 
-const addParamRow = () => localState.value.push({})
+const addParamRow = () => vModel.value.push({})
 
-const deleteParamRow = (idx: number) => localState.value.splice(idx, 1)
+const deleteParamRow = (idx: number) => vModel.value.splice(idx, 1)
 </script>
 
 <template>
@@ -44,7 +37,7 @@ const deleteParamRow = (idx: number) => localState.value.splice(idx, 1)
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(paramRow, idx) in localState" :key="idx">
+        <tr v-for="(paramRow, idx) in vModel" :key="idx">
           <td class="px-2">
             <a-form-item>
               <a-checkbox v-model:checked="paramRow.enabled" />

From 7383de40022b8a0053ca8daf3f798040754d129f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:22:29 +0800
Subject: [PATCH 104/125] fix(gui-v2): wrong typing

---
 packages/nc-gui-v2/components/monaco/Editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/monaco/Editor.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
index ddafb8e957..371b466590 100644
--- a/packages/nc-gui-v2/components/monaco/Editor.vue
+++ b/packages/nc-gui-v2/components/monaco/Editor.vue
@@ -9,7 +9,7 @@ import { deepCompare } from '~/utils'
 interface Props {
   modelValue: string
   lang?: string
-  validate?: Boolean
+  validate?: boolean
 }
 
 const { modelValue, lang = 'json', validate = true } = defineProps<Props>()

From 4f73cc14d7f5d7e30302e7f955d96b39136f9964 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:23:38 +0800
Subject: [PATCH 105/125] fix(gui-v2): replace by vModel

---
 packages/nc-gui-v2/components/webhook/Drawer.vue | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
index 65894820e5..ca8083d6d4 100644
--- a/packages/nc-gui-v2/components/webhook/Drawer.vue
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -3,21 +3,15 @@ interface Props {
   modelValue: boolean
 }
 
-const { modelValue } = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
 
 const editOrAdd = ref(false)
 
 const webhookEditorRef = ref()
 
-const dialogShow = computed({
-  get() {
-    return modelValue
-  },
-  set(v: boolean) {
-    emit('update:modelValue', v)
-  },
-})
+const vModel = useVModel(props, 'modelValue', emits)
 
 async function editHook(hook: Record<string, any>) {
   editOrAdd.value = true
@@ -29,7 +23,7 @@ async function editHook(hook: Record<string, any>) {
 </script>
 
 <template>
-  <a-drawer v-model:visible="dialogShow" :closable="false" placement="right" width="700px" @keydown.esc="dialogShow = false">
+  <a-drawer v-model:visible="vModel" :closable="false" placement="right" width="700px" @keydown.esc="vModel = false">
     <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
     <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
     <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">

From 1a2ec5d2c066bcf478084671a6775b98acd69785 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:26:03 +0800
Subject: [PATCH 106/125] fix(gui-v2): type casting in webhook list

---
 packages/nc-gui-v2/components/webhook/List.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index eba0eb09f7..dace3b59d0 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -11,13 +11,14 @@ const { $api, $e } = useNuxtApp()
 
 const toast = useToast()
 
-const hooks = ref([])
+const hooks = ref<Record<string, any>[]>([])
+
 const meta = inject(MetaInj)
 
 async function loadHooksList() {
   try {
-    const hookList = (await $api.dbTableWebhook.list(meta?.value.id as string)).list as any
-    hooks.value = hookList.map((hook: Record<string, any>) => {
+    const hookList = (await $api.dbTableWebhook.list(meta?.value.id as string)).list as Record<string, any>[]
+    hooks.value = hookList.map((hook) => {
       hook.notification = hook.notification && JSON.parse(hook.notification)
       return hook
     })

From d1ad7563b173eb3ef18f75f9dd2d6b3b0811b170 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:55:37 +0800
Subject: [PATCH 107/125] chore(gui-v2): add a FIXME tag

---
 packages/nc-gui-v2/components/dlg/AirtableImport.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index e76617f704..390c4a4511 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -209,6 +209,7 @@ onMounted(async () => {
   socket.on('progress', async (d: Record<string, any>) => {
     progress.value.push(d)
 
+    // FIXME: this doesn't work
     nextTick(() => {
       ;(logRef.value?.$el as HTMLDivElement).scrollTo()
     })

From 6c7d33d16a776f67723009141ada363b4ea90744 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 17:03:43 +0800
Subject: [PATCH 108/125] feat(gui-v2): SingleLineText Cell

---
 packages/nc-gui-v2/components/cell/Text.vue | 89 +++------------------
 1 file changed, 12 insertions(+), 77 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index b1de025b8d..65fac3f5bc 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -1,100 +1,35 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, onMounted, ref } from '#imports'
 
 interface Props {
   modelValue: any
 }
 
-const { modelValue: value } = defineProps<Props>()
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject<boolean>('editEnabled', false)
 
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emits)
 
 onMounted(() => {
   root.value?.focus()
 })
 
-/* export default {
-  name: 'TextCell',
-  props: {
-    value: [String, Object, Number, Boolean, Array],
+watch(
+  () => root.value,
+  (el) => {
+    el?.focus()
   },
-  computed: {
-    localState: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      },
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      if (this.$listeners.cancel) {
-        $listeners.cancel = this.$listeners.cancel
-      }
-
-      return $listeners
-    },
-  },
-  mounted() {
-    this.$el.focus()
-  },
-} */
+)
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" />
-  <span v-else>{{ localState }}</span>
-  <!--  v-on="parentListeners" /> -->
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="h-full w-full outline-none" />
+  <span v-else>{{ vModel }}</span>
 </template>
 
-<style scoped>
-input,
-textarea {
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-  outline: none;
-}
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->
+<style scoped></style>

From 09fce8086140ac6d6b6937455328711a6d1aebf9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 17:18:10 +0800
Subject: [PATCH 109/125] feat(gui-v2): LongText Cell

---
 .../nc-gui-v2/components/cell/TextArea.vue    | 67 ++++++-------------
 1 file changed, 20 insertions(+), 47 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index d27590877d..4552706231 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -5,70 +5,43 @@ interface Props {
   modelValue?: string
 }
 
-const { modelValue: value } = defineProps<Props>()
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject<boolean>('editEnabled', false)
 
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emits)
 
 onMounted(() => {
   root.value?.focus()
 })
 
-/* export default {
-  name: 'TextAreaCell',
-  props: {
-    value: String,
-  },
-  computed: {
-    localState: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      },
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-  created() {
-    this.localState = this.value
-  },
-  mounted() {
-    this.$refs.textarea && this.$refs.textarea.focus()
+watch(
+  () => root.value,
+  (el) => {
+    el?.focus()
   },
-} */
+)
 </script>
 
 <template>
-  <textarea v-if="editEnabled" ref="root" v-model="localState" rows="4" @keydown.alt.enter.stop @keydown.shift.enter.stop />
-  <span v-else>{{ localState }}</span>
+  <textarea
+    v-if="editEnabled"
+    ref="root"
+    v-model="vModel"
+    rows="4"
+    class="h-full w-full min-h-[60px] outline-none"
+    @keydown.alt.enter.stop
+    @keydown.shift.enter.stop
+  />
+  <span v-else>{{ vModel }}</span>
 </template>
 
 <style scoped>
-input,
-textarea {
-  width: 100%;
-  min-height: 60px;
-  height: 100%;
-  color: var(--v-textColor-base);
+textarea:focus {
+  @apply ring-transparent;
 }
 </style>

From 3d2e818601270bf9fa6c28a615fbb521c2bdadad Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 2 Aug 2022 15:13:56 +0530
Subject: [PATCH 110/125] refactor: remove user context information from
 webhook panel

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/webhook/Editor.vue | 7 ++-----
 packages/nc-gui-v2/components/webhook/Test.vue   | 2 --
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 9d646352a4..1539e62a71 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -576,14 +576,11 @@ onMounted(() => {
       <a-row>
         <a-col :span="24">
           <div class="text-gray-600">
-            <em>Available context variables are <strong>data and user</strong></em>
+            <em>Use context variable <strong>data</strong> to refer the record under consideration</em>
 
             <a-tooltip bottom>
               <template #title>
-                <span>
-                  <strong>data</strong> : Row data <br />
-                  <strong>user</strong> : User information<br />
-                </span>
+                <span> <strong>data</strong> : Row data <br /> </span>
               </template>
               <MdiInformationIcon class="ml-2" />
             </a-tooltip>
diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index bd0ae39c34..e1ab3cc54a 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -18,7 +18,6 @@ const meta = inject(MetaInj)
 
 const sampleData = ref({
   data: {},
-  user: {},
 })
 const activeKey = ref(0)
 
@@ -32,7 +31,6 @@ watch(
 async function loadSampleData() {
   sampleData.value = {
     data: await $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation),
-    user: $state.user.value as Record<string, any>,
   }
 }
 

From 8c2e5f24aafdfcad057278015e44fae148ccf672 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 2 Aug 2022 17:02:34 +0530
Subject: [PATCH 111/125] refactor/integrated-value-provide-and-improved-style

---
 packages/nc-gui-v2/components/virtual-cell/Rollup.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
index 2354a64d65..4ffe9ae5b9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-const { value } = defineProps<{ value?: any }>()
+const value = inject('value')
 </script>
 
 <template>
-  <span>
+  <span class="text-center pl-3">
     {{ value }}
   </span>
 </template>

From 2f2e0644e650e287f310d8c8e5422cad85e27b04 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 2 Aug 2022 18:24:17 +0530
Subject: [PATCH 112/125] refactor/gui-v2-added-checkbox

---
 .../nc-gui-v2/components/cell/Checkbox.vue    | 142 ++++++++++--------
 1 file changed, 76 insertions(+), 66 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Checkbox.vue b/packages/nc-gui-v2/components/cell/Checkbox.vue
index 23d2d675b4..5bb5d77197 100644
--- a/packages/nc-gui-v2/components/cell/Checkbox.vue
+++ b/packages/nc-gui-v2/components/cell/Checkbox.vue
@@ -1,17 +1,38 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
+import { inject } from '#imports'
 import { ColumnInj, IsFormInj } from '~/context'
+import MdiCheckBold from '~icons/mdi/check-bold'
+import MdiCropSquare from '~icons/mdi/crop-square'
+import MdiCheckCircleOutline from '~icons/mdi/check-circle-outline'
+import MdiCheckboxBlankCircleOutline from '~icons/mdi/checkbox-blank-circle-outline'
+import MdiStar from '~icons/mdi/star'
+import MdiStarOutline from '~icons/mdi/star-outline'
+import MdiHeart from '~icons/mdi/heart'
+import MdiHeartOutline from '~icons/mdi/heart-outline'
+import MdiMoonFull from '~icons/mdi/moon-full'
+import MdiMoonNew from '~icons/mdi/moon-new'
+import MdiThumbUp from '~icons/mdi/thumb-up'
+import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
+import MdiFlag from '~icons/mdi/flag'
+import MdiFlagOutline from '~icons/mdi/flag-outline'
 
 interface Props {
   modelValue?: boolean | undefined | number
 }
 
-const { modelValue: value } = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
+interface Emits {
+  (event: 'update:modelValue', model: boolean | undefined | number): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+const vModel = $(useVModel(props, 'modelValue', emits))
+
 const column = inject(ColumnInj)
 const isForm = inject(IsFormInj)
 
-const checkboxMeta = computed(() => {
+const checkboxMeta = $computed(() => {
   return {
     icon: {
       checked: 'mdi-check-circle-outline',
@@ -22,70 +43,59 @@ const checkboxMeta = computed(() => {
   }
 })
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
-
-// const checkedIcon = computed(() => {
-//   return defineAsyncComponent( ()=>import('~icons/material-symbols/'+checkboxMeta?.value?.icon?.checked))
-// });
-// const uncheckedIcon = computed(() => {
-//   return defineAsyncComponent(()=>import('~icons/material-symbols/'+checkboxMeta?.value?.icon?.unchecked))
-// });
-
-/* export default {
-  name: 'BooleanCell',
-  props: {
-    column: Object,
-    value: [String, Number, Boolean],
-    isForm: Boolean,
-    readOnly: Boolean,
-  },
-  computed: {
-    checkedIcon() {
-      return (this.checkboxMeta && this.checkboxMeta.icon && this.checkboxMeta.icon.checked) || 'mdi-check-bold'
-    },
-    uncheckedIcon() {
-      return (this.checkboxMeta && this.checkboxMeta.icon && this.checkboxMeta.icon.unchecked) || 'mdi-crop-square'
-    },
-    localState: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      },
-    },
-    parentListeners() {
-      const $listeners = {}
-      return $listeners
-    },
-    checkboxMeta() {
-      return {
-        icon: {
-          checked: 'mdi-check-circle-outline',
-          unchecked: 'mdi-checkbox-blank-circle-outline',
-        },
-        color: 'primary',
-        ...(this.column && this.column.meta ? this.column.meta : {}),
-      }
-    },
-  },
-  methods: {
-    toggle() {
-      this.localState = !this.localState
-    },
-  },
-} */
+const icon = (type: string) => {
+  switch (type) {
+    case 'mdi-check-bold':
+      return MdiCheckBold
+    case 'mdi-crop-square':
+      return MdiCropSquare
+    case 'mdi-check-circle-outline':
+      return MdiCheckCircleOutline
+    case 'mdi-checkbox-blank-circle-outline':
+      return MdiCheckboxBlankCircleOutline
+    case 'mdi-star':
+      return MdiStar
+    case 'mdi-star-outline':
+      return MdiStarOutline
+    case 'mdi-heart':
+      return MdiHeart
+    case 'mdi-heart-outline':
+      return MdiHeartOutline
+    case 'mdi-moon-full':
+      return MdiMoonFull
+    case 'mdi-moon-new':
+      return MdiMoonNew
+    case 'mdi-thumb-up':
+      return MdiThumbUp
+    case 'mdi-thumb-up-outline':
+      return MdiThumbUpOutline
+    case 'mdi-flag':
+      return MdiFlag
+    case 'mdi-flag-outline':
+      return MdiFlagOutline
+  }
+}
 </script>
 
 <template>
-  <div class="d-flex align-center" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !localState }">
-    <!--    <span :is="localState ? checkedIcon : uncheckedIcon" small :color="checkboxMeta.color" @click="toggle"> -->
-    <!--      {{ localState ? checkedIcon : uncheckedIcon }} -->
-    <!--    </span> -->
-
-    <input v-model="localState" type="checkbox" />
+  <div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
+    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel">
+      <component
+        :is="icon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
+        :style="{
+          color: checkboxMeta.color,
+        }"
+      />
+    </div>
   </div>
 </template>
+
+<style scoped lang="scss">
+.nc-cell-hover-show {
+  opacity: 0;
+  transition: 0.3s opacity;
+  &:hover {
+    opacity: 0.7;
+  }
+}
+</style>

From 238bab2ebaff5db29a89e709ecfe4c8dc833f64d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 12:54:05 +0800
Subject: [PATCH 113/125] fix(gui-v2): fix icon precedence issue

---
 packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 0c05c1a8a5..b288da87d3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -54,8 +54,6 @@ const icon = computed(() => {
     return AttachmentIcon
   } else if (additionalColMeta.isDecimal) {
     return DecimalIcon
-  } else if (additionalColMeta.isInt || additionalColMeta.isFloat) {
-    return NumericIcon
   } else if (additionalColMeta.isPhoneNumber) {
     return FilePhoneIcon
   }
@@ -68,6 +66,8 @@ const icon = computed(() => {
     return CurrencyIcon
   } else if (additionalColMeta.isPercent) {
     return PercentIcon
+  } else if (additionalColMeta.isInt || additionalColMeta.isFloat) {
+    return NumericIcon
   } else if (additionalColMeta.isString) {
     return StringIcon
   } else {

From 37e45ac53a05a1e5f101a59f75203d0e7cac2884 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 13:08:15 +0800
Subject: [PATCH 114/125] refactor(gui-v2): use onSetRef

---
 packages/nc-gui-v2/components/cell/Text.vue | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 65fac3f5bc..653842a105 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -15,20 +15,13 @@ const root = ref<HTMLInputElement>()
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-onMounted(() => {
-  root.value?.focus()
-})
-
-watch(
-  () => root.value,
-  (el) => {
-    el?.focus()
-  },
-)
+const onSetRef = (el: HTMLInputElement) => {
+  el.focus()
+}
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="h-full w-full outline-none" />
+  <input v-if="editEnabled" :ref="onSetRef" v-model="vModel" class="h-full w-full outline-none" />
   <span v-else>{{ vModel }}</span>
 </template>
 

From 761cf48ec46104d01fa37492c298d7f0542ac7c6 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:13:16 +0800
Subject: [PATCH 115/125] feat(gui-v2): include Count

---
 packages/nocodb-sdk/src/lib/UITypes.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index c3b315f218..6689b5f6dc 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -50,6 +50,7 @@ export function isVirtualCol(
     UITypes.Formula,
     UITypes.Rollup,
     UITypes.Lookup,
+    UITypes.Count,
   ].includes(<UITypes>(typeof col === 'object' ? col?.uidt : col));
 }
 

From f5c078f7c3e748448d0d7258198315c52df566f9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:13:25 +0800
Subject: [PATCH 116/125] feat(gui-v2): add isCount

---
 packages/nc-gui-v2/composables/useVirtualCell.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui-v2/composables/useVirtualCell.ts b/packages/nc-gui-v2/composables/useVirtualCell.ts
index 06bb61d318..1c8a06c44d 100644
--- a/packages/nc-gui-v2/composables/useVirtualCell.ts
+++ b/packages/nc-gui-v2/composables/useVirtualCell.ts
@@ -20,6 +20,7 @@ export function useVirtualCell(column: ColumnType) {
   const isLookup = computed(() => column.uidt === UITypes.Lookup)
   const isRollup = computed(() => column.uidt === UITypes.Rollup)
   const isFormula = computed(() => column.uidt === UITypes.Formula)
+  const isCount = computed(() => column.uidt === UITypes.Count)
 
   return {
     isHm,
@@ -28,5 +29,6 @@ export function useVirtualCell(column: ColumnType) {
     isLookup,
     isRollup,
     isFormula,
+    isCount,
   }
 }

From b1ec9c189519eb81ca1d699cbd92d77d7c1840b6 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:13:35 +0800
Subject: [PATCH 117/125] feat(gui-v2): add VirtualCellCount

---
 packages/nc-gui-v2/components/smartsheet/VirtualCell.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 4c8a4725ea..47eb8e5cc1 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -15,7 +15,7 @@ const emit = defineEmits(['update:modelValue'])
 provide(ColumnInj, column)
 provide('value', value)
 
-const { isLookup, isBt, isRollup, isMm, isHm, isFormula } = useVirtualCell(column)
+const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
 </script>
 
 <template>
@@ -25,6 +25,7 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula } = useVirtualCell(colum
     <VirtualCellBelongsTo v-else-if="isBt" />
     <VirtualCellRollup v-else-if="isRollup" />
     <VirtualCellFormula v-else-if="isFormula" />
+    <VirtualCellCount v-else-if="isCount" />
 
     <!--    <v-lazy> -->
     <!--      <has-many-cell

From b6e841b5cd62523fd106390f9e2336161ee788aa Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:13:43 +0800
Subject: [PATCH 118/125] feat(gui-v2): add count icon

---
 .../nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 9d91c76f80..bad6fd56b3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -8,6 +8,7 @@ import BTIcon from '~icons/mdi/table-arrow-left'
 import MMIcon from '~icons/mdi/table-network'
 import FormulaIcon from '~icons/mdi/math-integral'
 import RollupIcon from '~icons/mdi/movie-roll'
+import CountIcon from '~icons/mdi/counter'
 
 const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
 
@@ -31,6 +32,8 @@ const icon = computed(() => {
       return GenericIcon
     case UITypes.Rollup:
       return RollupIcon
+    case UITypes.Count:
+      return CountIcon
   }
   return GenericIcon
 })

From af9b9d7c070fd710bdde989f9ef1880da6d2a87c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:13:58 +0800
Subject: [PATCH 119/125] wip(gui-v2): add count draft

---
 packages/nc-gui-v2/components/virtual-cell/Count.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/virtual-cell/Count.vue

diff --git a/packages/nc-gui-v2/components/virtual-cell/Count.vue b/packages/nc-gui-v2/components/virtual-cell/Count.vue
new file mode 100644
index 0000000000..ab28802ee2
--- /dev/null
+++ b/packages/nc-gui-v2/components/virtual-cell/Count.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// TODO: wait for Count Column implementation
+</script>
+
+<template>
+  <span class="prose-sm"></span>
+</template>
+
+<style scoped lang="scss">
+</style>

From f449444103f1e0c67cc42847e6d307e70b12eca5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 15:14:25 +0800
Subject: [PATCH 120/125] chore(gui-v2): lint

---
 packages/nc-gui-v2/components/virtual-cell/Count.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/Count.vue b/packages/nc-gui-v2/components/virtual-cell/Count.vue
index ab28802ee2..29d0c7176a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Count.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Count.vue
@@ -6,5 +6,4 @@
   <span class="prose-sm"></span>
 </template>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

From 77e794bfe9e7e5881fae6c3fb12cdbfa1d39247d Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Wed, 3 Aug 2022 05:18:57 +0000
Subject: [PATCH 121/125] docs: update README.md [skip ci]

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index d6dfb705db..03af937ccd 100644
--- a/README.md
+++ b/README.md
@@ -449,6 +449,7 @@ Our mission is to provide the most powerful no-code interface for databases whic
   </tr>
   <tr>
     <td align="center"><a href="https://yohanboniface.me"><img src="https://avatars.githubusercontent.com/u/146023?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yohan Boniface</b></sub></a><br /><a href="#translation-yohanboniface" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/drsantam"><img src="https://avatars.githubusercontent.com/u/10681456?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Santam Chakraborty</b></sub></a><br /><a href="#translation-drsantam" title="Translation">🌍</a></td>
   </tr>
 </table>
 

From 9407a7038a06a7e242f7ed6cf88d2d1d1f97435d Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Wed, 3 Aug 2022 05:18:58 +0000
Subject: [PATCH 122/125] docs: update .all-contributorsrc [skip ci]

---
 .all-contributorsrc | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 08a707910f..fead53513c 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -837,6 +837,15 @@
       "contributions": [
         "translation"
       ]
+    },
+    {
+      "login": "drsantam",
+      "name": "Santam Chakraborty",
+      "avatar_url": "https://avatars.githubusercontent.com/u/10681456?v=4",
+      "profile": "https://github.com/drsantam",
+      "contributions": [
+        "translation"
+      ]
     }
   ],
   "contributorsPerLine": 7,

From fa11ac70c4b987867f2bfad1950d4bb930a633e9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 13:22:42 +0800
Subject: [PATCH 123/125] refactor(gui-v2): use onSetRef

---
 .../nc-gui-v2/components/cell/TextArea.vue    | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index 4552706231..25a6d98b26 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -11,26 +11,17 @@ const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject<boolean>('editEnabled', false)
 
-const root = ref<HTMLInputElement>()
-
 const vModel = useVModel(props, 'modelValue', emits)
 
-onMounted(() => {
-  root.value?.focus()
-})
-
-watch(
-  () => root.value,
-  (el) => {
-    el?.focus()
-  },
-)
+const onSetRef = (el: HTMLInputElement) => {
+  el.focus()
+}
 </script>
 
 <template>
   <textarea
     v-if="editEnabled"
-    ref="root"
+    :ref="onSetRef"
     v-model="vModel"
     rows="4"
     class="h-full w-full min-h-[60px] outline-none"
@@ -44,4 +35,4 @@ watch(
 textarea:focus {
   @apply ring-transparent;
 }
-</style>
+</style>
\ No newline at end of file

From 8020665e0a9b749943cd41714cb010ea21405626 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 3 Aug 2022 11:01:43 +0530
Subject: [PATCH 124/125] chore/gui-v2-count-cell-added-icon-to-cell-header

---
 packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue | 3 +++
 packages/nc-gui-v2/composables/useColumn.ts                  | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index b288da87d3..4c2be0dd7f 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -6,6 +6,7 @@ import { useColumn } from '#imports'
 import KeyIcon from '~icons/mdi/key-variant'
 import JSONIcon from '~icons/mdi/code-json'
 // import FKIcon from '~icons/mdi/link-variant'
+import CountIcon from '~icons/mdi/counter'
 import TextAreaIcon from '~icons/mdi/card-text-outline'
 import StringIcon from '~icons/mdi/alpha-a-box-outline'
 import BooleanIcon from '~icons/mdi/check-box-outline'
@@ -56,6 +57,8 @@ const icon = computed(() => {
     return DecimalIcon
   } else if (additionalColMeta.isPhoneNumber) {
     return FilePhoneIcon
+  } else if (additionalColMeta.isCount) {
+    return CountIcon
   }
   // else if(additionalColMeta.isForeignKey) {
   //   return FKIcon
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 07d82ea9a5..3bdd4d4934 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -34,6 +34,7 @@ export function useColumn(column: ColumnType) {
   const isDecimal = uiDatatype === UITypes.Decimal
   const isDuration = uiDatatype === UITypes.Duration
   const isPercent = uiDatatype === UITypes.Percent
+  const isCount = uiDatatype === UITypes.Count
   const isAutoSaved = [
     UITypes.SingleLineText,
     UITypes.LongText,
@@ -66,6 +67,7 @@ export function useColumn(column: ColumnType) {
     isEnum,
     isSet,
     isURL,
+    isCount,
     isEmail,
     isAttachment,
     isRating,

From c90c1bab331be31fc51fc220970fd1df15e58070 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 3 Aug 2022 11:07:45 +0530
Subject: [PATCH 125/125] 
 chore/reverted-gui-v2-count-cell-added-icon-to-cell-header

---
 packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue | 3 ---
 packages/nc-gui-v2/composables/useColumn.ts                  | 2 --
 2 files changed, 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 4c2be0dd7f..b288da87d3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -6,7 +6,6 @@ import { useColumn } from '#imports'
 import KeyIcon from '~icons/mdi/key-variant'
 import JSONIcon from '~icons/mdi/code-json'
 // import FKIcon from '~icons/mdi/link-variant'
-import CountIcon from '~icons/mdi/counter'
 import TextAreaIcon from '~icons/mdi/card-text-outline'
 import StringIcon from '~icons/mdi/alpha-a-box-outline'
 import BooleanIcon from '~icons/mdi/check-box-outline'
@@ -57,8 +56,6 @@ const icon = computed(() => {
     return DecimalIcon
   } else if (additionalColMeta.isPhoneNumber) {
     return FilePhoneIcon
-  } else if (additionalColMeta.isCount) {
-    return CountIcon
   }
   // else if(additionalColMeta.isForeignKey) {
   //   return FKIcon
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 3bdd4d4934..07d82ea9a5 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -34,7 +34,6 @@ export function useColumn(column: ColumnType) {
   const isDecimal = uiDatatype === UITypes.Decimal
   const isDuration = uiDatatype === UITypes.Duration
   const isPercent = uiDatatype === UITypes.Percent
-  const isCount = uiDatatype === UITypes.Count
   const isAutoSaved = [
     UITypes.SingleLineText,
     UITypes.LongText,
@@ -67,7 +66,6 @@ export function useColumn(column: ColumnType) {
     isEnum,
     isSet,
     isURL,
-    isCount,
     isEmail,
     isAttachment,
     isRating,