From f2d82f5a0bc07af9af3d7227d99eea6b5975ade5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 18:19:16 +0800
Subject: [PATCH] feat(gui-v2): basic form view layout

---
 .../nc-gui-v2/components/smartsheet/Form.vue  | 1075 +----------------
 1 file changed, 35 insertions(+), 1040 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index c679f384e2..073e778488 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -1,1053 +1,48 @@
 <script setup lang="ts">
-/* import draggable from 'vuedraggable'
-import { validationMixin } from 'vuelidate'
-import { minLength, required } from 'vuelidate/lib/validators'
-import { RelationTypes, UITypes, getSystemColumns, isVirtualCol } from 'nocodb-sdk'
-import VirtualHeaderCell from '../components/VirtualHeaderCell'
-import HeaderCell from '../components/HeaderCell'
-import VirtualCell from '../components/VirtualCell'
-import EditableCell from '../components/EditableCell'
-import Editable from '../components/Editable'
-import EditColumn from '../components/EditColumn'
-import form from '../mixins/form'
+import { computed, inject } from '#imports'
+import { MetaInj } from '~/context'
 
-// todo: generate hideCols based on default values
-const hiddenCols = ['created_at', 'updated_at']
+// TODO: get editEnabled
+const editEnabled = ref(true)
 
-export default {
-  name: 'FormView',
-  components: {
-    EditColumn,
-    Editable,
-    EditableCell,
-    VirtualCell,
-    HeaderCell,
-    VirtualHeaderCell,
-    Draggable: draggable,
-  },
-  mixins: [form, validationMixin],
-  props: [
-    'meta',
-    'availableColumns',
-    'nodes',
-    'sqlUi',
-    'formParams',
-    'showFields',
-    'fieldsOrder',
-    'allColumns',
-    'dbAlias',
-    'api',
-    'id',
-    'viewId',
-    'viewTitle',
-  ],
-  data: () => ({
-    isVirtualCol,
-    localState: {},
-    moved: false,
-    addNewColMenu: false,
-    addNewColModal: false,
-    activeRow: null,
-    active: null,
-    isNew: true,
-    submitted: false,
-    secondsRemain: null,
-    loading: false,
-    virtual: {},
-    formColumns: [],
-    fields: [],
-    view: {},
-    // hiddenColumns: []
-  }),
-  validations() {
-    const obj = {
-      localState: {},
-      virtual: {},
-    }
-    for (const column of this.columns) {
-      if (!this.localParams || !this.localParams.fields || !this.localParams.fields[column.title]) {
-        continue
-      }
-      if (
-        !isVirtualCol(column) &&
-        (((column.rqd || column.notnull) && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || column.required)
-      ) {
-        obj.localState[column.title] = { required }
-      } else if (
-        column.uidt === UITypes.LinkToAnotherRecord &&
-        column.colOptions &&
-        column.colOptions.type === RelationTypes.BELONGS_TO
-      ) {
-        const col = this.meta.columns.find((c) => c.id === column.colOptions.fk_child_column_id)
+const meta = inject(MetaInj)
 
-        if ((col && col.rqd && !col.cdf) || column.required) {
-          if (col) {
-            obj.virtual[column.title] = { required }
-          }
-        }
-      } else if (isVirtualCol(column) && column.required) {
-        obj.virtual[column.title] = {
-          minLength: minLength(1),
-          required,
-        }
-      }
-    }
-    return obj
-  },
-  computed: {
-    systemFieldsIds() {
-      return getSystemColumns(this.fields).map((c) => c.fk_column_id)
-    },
-    emailMe: {
-      get() {
-        try {
-          const data = JSON.parse(this.view.email)
-          return data[this.$store.state.users.user.email]
-        } catch (e) {}
-        return false
-      },
-      set(v) {
-        let data = {}
-        try {
-          data = JSON.parse(this.view.email) || {}
-        } catch (e) {}
-        data[this.$store.state.users.user.email] = v
-        this.view.email = JSON.stringify(data)
-        this.updateView()
-        this.checkSMTPStatus()
-      },
-    },
-    allColumnsLoc() {
-      return this.fields // this.mets.columns.filter(c => !hiddenCols.includes(c.column_name) && !(c.pk && c.ai) && this.meta.belongsTo.every(bt => c.column_name !== bt.column_name))
-    },
-    isEditable() {
-      return this._isUIAllowed('editFormView')
-    },
-    localParams: {
-      get() {
-        return this.formParams || {}
-      },
-      set(params) {
-        this.$emit('update:formParams', params)
-      },
-    },
-    hiddenColumns: {
-      get() {
-        return this.fields.filter((f) => !f.show && !this.systemFieldsIds.includes(f.fk_column_id))
-      },
-      set(v) {},
-    },
-    columns: {
-      get() {
-        return this.fields
-          .filter((f) => f.show && f.uidt != UITypes.Rollup && f.uidt != UITypes.Lookup)
-          .sort((a, b) => a.order - b.order)
-      },
-      set(v) {},
-    },
-  },
-  watch: {
-    'meta.columns': function () {
-      this.meta.columns.forEach((c) => {
-        this.localParams.fields[c.title] = this.localParams.fields[c.title] || {}
-      })
-    },
-    'submitted': function (val) {
-      if (val && this.view.show_blank_form) {
-        this.secondsRemain = 5
-        const intvl = setInterval(() => {
-          if (--this.secondsRemain < 0) {
-            this.submitted = false
-            clearInterval(intvl)
-          }
-        }, 1000)
-      }
-    },
-  },
-  created() {
-    this.loadView()
-  },
-  mounted() {
-    const localParams = Object.assign(
-      {
-        name: this.meta.title,
-        description: 'Form view description',
-        submit: {},
-        emailMe: {},
-        fields: {},
-      },
-      this.localParams,
-    )
-    this.availableColumns.forEach((c) => {
-      localParams.fields[c.title] = localParams.fields[c.title] || {}
-    })
-    this.localParams = localParams
-    // this.columns = [...this.availableColumns]
-    // this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.column_name === c1.column_name && c.title === c1.title))
-  },
-  methods: {
-    onMove(event) {
-      const { newIndex, element, oldIndex } = event.added || event.moved || event.removed
+const columns = computed(() => meta?.value?.columns || [])
 
-      if (event.added) {
-        this.$set(element, 'show', true)
-      }
+const hiddenColumns = computed(() => [])
 
-      if (event.removed) {
-        this.$set(element, 'show', false)
-        this.saveOrUpdateOrderOrVisibility(element, oldIndex)
-      } else {
-        if (!this.columns.length || this.columns.length === 1) {
-          this.$set(element, 'order', 1)
-        } else if (this.columns.length - 1 === newIndex) {
-          this.$set(element, 'order', this.columns[newIndex - 1].order + 1)
-        } else if (newIndex === 0) {
-          this.$set(element, 'order', this.columns[1].order / 2)
-        } else {
-          this.$set(element, 'order', (this.columns[newIndex - 1].order + this.columns[newIndex + 1].order) / 2)
-        }
-        this.saveOrUpdateOrderOrVisibility(element, newIndex)
-      }
+function addAllColumns() {}
 
-      this.$e('a:form-view:reorder')
-    },
-
-    async saveOrUpdateOrderOrVisibility(field, i) {
-      const { fk_view_id, fk_column_id, order, show, id } = field
-
-      if (id) {
-        await this.$api.dbViewColumn.update(this.viewId, field.id, {
-          fk_view_id,
-          fk_column_id,
-          order,
-          show,
-        })
-      } else {
-        field.id = (
-          await this.$api.dbViewColumn.create(this.viewId, {
-            fk_view_id,
-            fk_column_id,
-            order,
-            show,
-          })
-        ).id
-      }
-      this.$emit(
-        'update:fieldsOrder',
-        this.fields.map((c) => c.title),
-      )
-    },
-    async updateColMeta(col, i) {
-      // todo: introduce debounce to avoid consecutive api call
-      if (col.id) {
-        await this.$api.dbView.formColumnUpdate(col.id, col)
-      }
-    },
-    async updateView() {
-      if (this.view.subheading?.length > 255) {
-        this.$toast.error('Data too long for Form Description').goAway(3000)
-        return
-      }
-      await this.$api.dbView.formUpdate(this.viewId, this.view)
-    },
-    async loadView() {
-      const { columns, ...view } = await this.$api.dbView.formRead(this.viewId)
-      this.view = view
-      this.formColumns = columns
-      let order = 1
-      const fieldById = this.formColumns.reduce(
-        (o, f) => ({
-          ...o,
-          [f.fk_column_id]: f,
-        }),
-        {},
-      )
-
-      const meta = this.$store.state.meta.metas[this.meta.id]
-      this.fields = meta.columns
-        .map((c) => ({
-          ...c,
-          fk_column_id: c.id,
-          fk_view_id: this.viewId,
-          ...(fieldById[c.id] ? fieldById[c.id] : {}),
-          order: (fieldById[c.id] && fieldById[c.id].order) || order++,
-          id: fieldById[c.id] && fieldById[c.id].id,
-        }))
-        .sort((a, b) => a.order - b.order)
-    },
-    hideColumn(i) {
-      if (this.isDbRequired(this.columns[i])) {
-        this.$toast.info("Required field can't be removed").goAway(3000)
-        return
-      }
-
-      this.saveOrUpdateOrderOrVisibility(
-        {
-          ...this.columns[i],
-          show: false,
-        },
-        i,
-      )
-      this.$set(this.columns[i], 'show', false)
-
-      this.$e('a:form-view:hide-columns')
-      // this.columns = this.columns.filter((_, j) => i !== j)
-    },
-    async addAllColumns() {
-      for (const col of this.fields) {
-        if (!this.systemFieldsIds.includes(col.fk_column_id)) {
-          this.$set(col, 'show', true)
-        }
-      }
-      await this.$api.dbView.showAllColumn(this.viewId, {
-        ignoreIds: this.systemFieldsIds,
-      })
-      // this.columns = [...this.allColumnsLoc]
-      this.$e('a:form-view:add-all')
-    },
-    async removeAllColumns() {
-      for (const col of this.fields) {
-        if (this.isDbRequired(col)) {
-          continue
-        }
-        this.$set(col, 'show', false)
-      }
-      await this.$api.dbView.hideAllColumn(this.viewId, {
-        ignoreIds: this.fields.filter(this.isDbRequired).map((f) => f.fk_column_id),
-      })
-      this.$e('a:form-view:remove-all')
-    },
-    isDbRequired(column) {
-      if (hiddenCols.includes(column.fk_column_id)) {
-        return false
-      }
-
-      let isRequired =
-        // confirm column is not virtual
-        (!isVirtualCol(column) &&
-          // column required / not null
-          column.rqd &&
-          // column default value
-          !column.cdf &&
-          // confirm it's not foreign key
-          !this.meta.columns.some(
-            (c) =>
-              c.uidt === UITypes.LinkToAnotherRecord &&
-              c.colOptions.type === RelationTypes.BELONGS_TO &&
-              column.fk_column_id === c.colOptions.fk_child_column_id,
-          )) ||
-        // primary column
-        (column.pk && !column.ai && !column.cdf)
-      if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) {
-        const col = this.meta.columns.find((c) => c.id === column.colOptions.fk_child_column_id)
-        if ((col.rqd && !col.default) || this.localParams.fields[column.title].required) {
-          isRequired = true
-        }
-      }
-
-      return isRequired
-    },
-    async checkSMTPStatus() {
-      if (this.emailMe) {
-        const emailPluginActive = await this.$api.plugin.status('SMTP')
-        if (!emailPluginActive) {
-          this.emailMe = false
-          this.$toast.info('Please activate SMTP plugin in App store for enabling email notification').goAway(5000)
-        }
-      }
-    },
-    updateCol(_, column, id) {
-      this.$set(this.localState, column, id)
-    },
-    isActiveRow(col) {
-      return this.activeRow === col.title
-    },
-    onClickOutside(col) {
-      this.activeRow = this.activeRow === col.title ? null : this.activeRow
-    },
-    handleMouseUp(col) {
-      if (!this.moved) {
-        const index = this.columns.length
-        // this.columns = [...this.columns, col]
-        col.order = (index ? this.columns[index - 1].order : 0) + 1
-        this.$set(col, 'show', true)
-        this.$nextTick(() => {
-          this.saveOrUpdateOrderOrVisibility(col, index)
-        })
-      }
-    },
-    async onNewColCreation(col) {
-      this.addNewColMenu = false
-      this.addNewColModal = false
-      this.$emit('onNewColCreation', col)
-      await this.$store.dispatch('meta/ActLoadMeta', {
-        env: this.nodes.env,
-        dbAlias: this.nodes.dbAlias,
-        id: this.meta.id,
-        force: true,
-      })
-
-      await this.loadView()
-
-      this.$e('a:form-view:add-new-field')
-    },
-    async save() {
-      try {
-        this.$v.$touch()
-        if (this.$v.localState.$invalid) {
-          this.$toast.error('Provide values of all required field').goAway(3000)
-
-          return
-        }
-
-        this.loading = true
-
-        let data = await this.$api.dbViewRow.create('noco', this.projectName, this.meta.title, this.viewTitle, this.localState)
-
-        data = { ...this.localState, ...data }
-
-        // save hasmany and manytomany relations from local state
-        if (this.$refs.virtual && Array.isArray(this.$refs.virtual)) {
-          for (const vcell of this.$refs.virtual) {
-            if (vcell.save) {
-              await vcell.save(data)
-            }
-          }
-        }
-
-        this.virtual = {}
-        this.localState = {}
-
-        this.submitted = true
-
-        this.$toast
-          .success(this.localParams.submit.message || 'Saved successfully.', {
-            position: 'bottom-right',
-          })
-          .goAway(3000)
-      } catch (e) {
-        console.log(e)
-        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
-      }
-      this.loading = false
-    },
-  },
-} */
+function removeAllColumns() {}
 </script>
 
 <template>
-  <v-container fluid class="h-100 py-0">
-    <!--    <v-row class="h-100 my-0" :class="{ 'd-flex justify-center': submitted }">
-      <template v-if="submitted">
-        <v-col class="d-flex justify-center">
-          <div v-if="view" style="min-width: 350px">
-            <v-alert type="success" outlined>
-              <span class="title">{{ view.success_msg || 'Successfully submitted form data' }}</span>
-            </v-alert>
-            <p v-if="view.show_blank_form" class="caption grey&#45;&#45;text text-center">
-              New form will be loaded after {{ secondsRemain }} seconds
-            </p>
-            <div v-if="view.submit_another_form" class="text-center">
-              <v-btn color="primary" @click="submitted = false"> Submit Another Form </v-btn>
-            </div>
-          </div>
-        </v-col>
-      </template>
-      <template v-else>
-        <v-col v-if="isEditable" class="h-100 col-md-4 col-lg-3">
-          <v-card class="h-100 overflow-auto pa-4 pa-md-6 backgroundColor elevation-0 nc-form-left-nav">
-            <div class="d-flex grey&#45;&#45;text">
-              <span class="">
-                &lt;!&ndash; Fields &ndash;&gt;
-                {{ $t('objects.fields') }}
-              </span>
-              <v-spacer />
-              <span
-                v-if="hiddenColumns.length"
-                class="pointer caption mr-2"
-                style="border-bottom: 2px solid rgb(218, 218, 218)"
-                @click="addAllColumns()"
-              >
-                &lt;!&ndash; Add all &ndash;&gt;
-                {{ $t('general.addAll') }}
-              </span>
-              <span
-                v-if="columns.length"
-                class="pointer caption"
-                style="border-bottom: 2px solid rgb(218, 218, 218)"
-                @click="removeAllColumns"
-              >
-                &lt;!&ndash; Remove all &ndash;&gt;
-                {{ $t('general.removeAll') }}
-              </span>
-            </div>
-            <Draggable
-              v-if="showFields"
-              v-model="hiddenColumns"
-              draggable=".item"
-              group="form-inputs"
-              @start="drag = true"
-              @end="drag = false"
-            >
-              <v-card
-                v-for="col in hiddenColumns"
-                :key="col.title"
-                class="pa-2 my-2 item pointer elevation-0"
-                @mousedown="moved = false"
-                @mousemove="moved = false"
-                @mouseup="handleMouseUp(col)"
-              >
-                <div class="d-flex">
-                  <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize flex-grow-1">
-                    <VirtualHeaderCell
-                      v-if="isVirtualCol(col)"
-                      class="caption"
-                      :column="col"
-                      :nodes="nodes"
-                      :is-form="true"
-                      :meta="meta"
-                    />
-                    <HeaderCell v-else class="caption" :is-form="true" :value="col.title" :column="col" :sql-ui="sqlUi" />
-                  </label>
-                  <v-icon color="grey"> mdi-drag </v-icon>
-                </div>
-              </v-card>
-              <div class="mt-4 nc-drag-n-drop-to-hide py-3 text-center grey&#45;&#45;text text&#45;&#45;lighter-1">
-                &lt;!&ndash; Drag and drop fields here to hide &ndash;&gt;
-                {{ $t('msg.info.dragDropHide') }}
-              </div>
-            </Draggable>
-
-            <v-menu v-model="addNewColMenu" fixed z-index="99" content-class="elevation-0">
-              <template #activator="{ on }">
-                <div class="grey&#45;&#45;text caption text-center mt-4" v-on="on">
-                  <v-icon size="20" color="grey"> mdi-plus </v-icon>
-                  &lt;!&ndash; Add new field to this table &ndash;&gt;
-                  {{ $t('activity.addField') }}
-                </div>
-              </template>
-              <EditColumn
-                v-if="addNewColMenu"
-                :meta="meta"
-                :nodes="nodes"
-                :sql-ui="sqlUi"
-                @close="addNewColMenu = false"
-                @saved="onNewColCreation"
-              />
-            </v-menu>
-          </v-card>
-        </v-col>
-        <v-col
-          :class="{ 'col-12': !isEditable, 'col-lg-9 col-md-8': isEditable }"
-          class="h-100 px-sm-1 px-md-10"
-          style="overflow-y: auto"
-        >
-          &lt;!&ndash;        <pre class="caption">{{ fields }}</pre> &ndash;&gt;
-
-          &lt;!&ndash;        <div class="my-14 d-flex align-center justify-center"> &ndash;&gt;
-          &lt;!&ndash;          <v-chip>Add cover image</v-chip> &ndash;&gt;
-          &lt;!&ndash;        </div> &ndash;&gt;
-          <div class="nc-form-wrapper elevation-3 ma-3 pb-10">
-            <div class="mt-10 d-flex align-center justify-center flex-column">
-              <div class="nc-form-banner backgroundColor darken-1 flex-column justify-center d-flex">
-                <div class="d-flex align-center justify-center flex-grow-1">
-                  &lt;!&ndash;                  <v-chip small color="backgroundColorDefault caption grey&#45;&#45;text">
-                    Add cover image
-                  </v-chip> &ndash;&gt;
-                </div>
-              </div>
-            </div>
-            <div class="mx-auto nc-form elevation-3 pa-2">
-              <div class="nc-form-logo py-8">
-                &lt;!&ndash;                <div v-ripple class="nc-form-add-logo text-center caption pointer" @click.stop> &ndash;&gt;
-                &lt;!&ndash;                  Add a logo &ndash;&gt;
-                &lt;!&ndash;                </div> &ndash;&gt;
-              </div>
-              <Editable
-                :is="isEditable ? 'editable' : 'h2'"
-                v-model="view.heading"
-                class="display-1 font-weight-bold text-left mx-4 mb-3 px-1 text&#45;&#45;text text&#45;&#45;lighten-1"
-                :class="{ 'nc-meta-inputs': isEditable }"
-                placeholder="Form Title"
-                @input="updateView"
-              >
-                {{ view.heading }}
-              </Editable>
-              &lt;!&ndash; placeholder="Add form description" &ndash;&gt;
-              <Editable
-                :is="isEditable ? 'editable' : 'div'"
-                v-model="view.subheading"
-                :class="{ 'nc-meta-inputs': isEditable }"
-                class="body-1 text-left mx-4 py-2 px-1 text&#45;&#45;text text&#45;&#45;lighten-2"
-                :placeholder="$t('msg.info.formDesc')"
-                @input="updateView"
-              >
-                {{ view.subheading }}
-              </Editable>
-              <Draggable
-                v-model="columns"
-                draggable=".item"
-                group="form-inputs"
-                class="h-100"
-                @start="drag = true"
-                @end="drag = false"
-                @change="onMove($event)"
-              >
-                <div
-                  v-for="(col, i) in columns"
-                  :key="col.title"
-                  class="nc-field-wrapper item px-4 my-3 pointer"
-                  :class="{
-                    'nc-editable': isEditable,
-                    'active-row': isActiveRow(col),
-                    'py-4': !isActiveRow(col),
-                    'pb-4': isActiveRow(col),
-                  }"
-                >
-                  <div v-click-outside="() => onClickOutside(col)" @click="activeRow = col.title">
-                    <template v-if="_isUIAllowed('editFormView')">
-                      <v-icon small class="nc-field-remove-icon" @click.stop="hideColumn(i)"> mdi-eye-off-outline </v-icon>
-                    </template>
-
-                    <div
-                      v-if="localParams.fields && localParams.fields[col.title]"
-                      :class="{
-                        'active-row': active === col.title,
-                        'required': isRequired(col, localState, localParams.fields[col.title].required),
-                      }"
-                    >
-                      <div class="nc-field-editables" :class="{ 'nc-show': isActiveRow(col) }">
-                        <div class="d-flex align-center pb-2 mt-2">
-                          <v-icon small color="grey"> mdi-drag </v-icon>
-
-                          <label class="grey&#45;&#45;text caption ml-2" @click=";(col.required = !col.required), updateColMeta(col, i)">
-                            &lt;!&ndash; Required &ndash;&gt;
-                            {{ $t('general.required') }}
-                          </label>
-                          <v-switch
-                            v-model="col.required"
-                            v-t="['a:form-view:field:mark-required']"
-                            class="nc-required-switch ml-1 mt-0"
-                            hide-details
-                            flat
-                            color="primary"
-                            dense
-                            inset
-                            @change="updateColMeta(col, i)"
-                          />
-                        </div>
-                        &lt;!&ndash; placeholder=" Enter form input label" &ndash;&gt;
-                        <Editable
-                          v-model.lazy="col.label"
-                          style="width: 300px; white-space: pre-wrap"
-                          :placeholder="$t('msg.info.formInput')"
-                          class="caption pa-1 backgroundColor darken-1 mb-2"
-                          @input="updateColMeta(col, i)"
-                        />
-                        &lt;!&ndash; placeholder=" Add some help text" &ndash;&gt;
-                        <Editable
-                          v-model.lazy="col.description"
-                          style="width: 300px; white-space: pre-wrap"
-                          :placeholder="$t('msg.info.formHelpText')"
-                          class="caption pa-1 backgroundColor darken-1 mb-2"
-                          @input="updateColMeta(col, i)"
-                          @keydown.enter.prevent
-                        />
-                      </div>
-                      <label
-                        :class="{ 'nc-show': !isActiveRow(col) }"
-                        :for="`data-table-form-${col.title}`"
-                        class="body-2 text-capitalize nc-field-labels"
-                      >
-                        <VirtualHeaderCell
-                          v-if="isVirtualCol(col)"
-                          class="caption"
-                          :column="{ ...col, _cn: col.label || col.title }"
-                          :nodes="nodes"
-                          :is-form="true"
-                          :meta="meta"
-                          :required="isRequired(col, localState, localParams.fields[col.title].required)"
-                        />
-                        <HeaderCell
-                          v-else
-                          class="caption"
-                          :is-form="true"
-                          :value="col.label || col.title"
-                          :column="col"
-                          :sql-ui="sqlUi"
-                          :required="isRequired(col, localState, localParams.fields[col.title].required)"
-                        />
-                      </label>
-                      <div v-if="isVirtualCol(col)" @click.stop>
-                        <VirtualCell
-                          ref="virtual"
-                          :disabled-columns="{}"
-                          :column="col"
-                          :row="localState"
-                          :nodes="nodes"
-                          :meta="meta"
-                          :api="api"
-                          :active="true"
-                          :sql-ui="sqlUi"
-                          :is-new="true"
-                          :is-form="true"
-                          :hint="col.description"
-                          :required="col.required"
-                          @update:localState="(state) => $set(virtual, col.title, state)"
-                          @updateCol="updateCol"
-                        />
-                        <div
-                          v-if="
-                            $v.virtual &&
-                            $v.virtual.$dirty &&
-                            $v.virtual[col.title] &&
-                            (!$v.virtual[col.title].required || !$v.virtual[col.alias].minLength)
-                          "
-                          class="error&#45;&#45;text caption"
-                        >
-                          Field is required.
-                        </div>
-
-                        &lt;!&ndash; todo: optimize &ndash;&gt;
-                        <template
-                          v-if="
-                            col.bt &&
-                            $v.localState &&
-                            $v.localState.$dirty &&
-                            $v.localState[meta.columns.find((c) => c.column_name === col.bt.column_name).title]
-                          "
-                        >
-                          <div
-                            v-if="!$v.localState[meta.columns.find((c) => c.column_name === col.bt.column_name).title].required"
-                            class="error&#45;&#45;text caption"
-                          >
-                            Field is required.
-                          </div>
-                        </template>
-                      </div>
-                      <template v-else>
-                        <div
-                          v-if="col.ai || (col.pk && !isNew) || disabledColumns[col.title]"
-                          style="height: 100%; width: 100%"
-                          class="caption xc-input"
-                          @click.stop
-                          @click="col.ai && $toast.info('Auto Increment field is not editable').goAway(3000)"
-                        >
-                          <input style="height: 100%; width: 100%" readonly disabled :value="localState[col.title]" />
-                        </div>
-
-                        <div v-else @click.stop>
-                          <EditableCell
-                            :id="`data-table-form-${col.title}`"
-                            v-model="localState[col.title]"
-                            :db-alias="dbAlias"
-                            :column="col"
-                            class="xc-input body-2"
-                            :meta="meta"
-                            :sql-ui="sqlUi"
-                            is-form
-                            :hint="col.description"
-                            @focus="active = col.title"
-                            @blur="active = ''"
-                          />
-                        </div>
-                        <template v-if="$v.localState && $v.localState.$dirty && $v.localState[col.title]">
-                          <div v-if="!$v.localState[col.title].required" class="error&#45;&#45;text caption">Field is required.</div>
-                        </template>
-                      </template>
-                    </div>
-                    &lt;!&ndash;              </div> &ndash;&gt;
-                  </div>
-                </div>
-                <div v-if="!columns.length" class="nc-drag-n-drop-to-show py-4 mx-8 my-10 text-center grey&#45;&#45;text text&#45;&#45;lighter-1">
-                  Drag and drop fields here to add
-                </div>
-              </Draggable>
-              <div class="my-10 text-center">
-                <v-btn color="primary" :loading="loading" :disabled="loading" @click="save">
-                  &lt;!&ndash; Submit &ndash;&gt;
-                  {{ $t('general.submit') }}
-                </v-btn>
-                &lt;!&ndash;            <span class="caption grey&#45;&#45;text pointer">Edit label</span> &ndash;&gt;
-              </div>
-              <div v-if="isEditable && localParams.submit" style="max-width: 700px" class="mx-auto mt-4 px-4 mb-4">
-                &lt;!&ndash;            <v-switch v-model="localParams.nocoBranding" dense inset hide-details>
-                <template #label>
-                  <span class="caption">Show NocoDB branding</span>
-                </template>
-              </v-switch>
-              <v-switch v-model="localParams.submitRedirectUrl" dense inset hide-details>
-                <template #label>
-                  <span class="caption">Redirect to URL after form submission</span>
-                </template>
-              </v-switch> &ndash;&gt;
-
-                <div class="caption grey&#45;&#45;text mt-10 mb-2">
-                  &lt;!&ndash; After form is submitted: &ndash;&gt;
-                  {{ $t('msg.info.afterFormSubmitted') }}
-                </div>
-                <label class="caption grey&#45;&#45;text font-weight-bold">
-                  &lt;!&ndash; Show this message: &ndash;&gt;
-                  {{ $t('msg.info.showMessage') }}:
-                </label>
-                <v-textarea v-model="view.success_msg" rows="3" hide-details solo class="caption" @input="updateView" />
-
-                <v-switch
-                  v-model="view.submit_another_form"
-                  v-t="[`a:form-view:submit-another-form`]"
-                  dense
-                  inset
-                  hide-details
-                  class="nc-switch"
-                  @change="updateView"
-                >
-                  <template #label>
-                    <span class="font-weight-bold grey&#45;&#45;text caption">
-                      &lt;!&ndash; Show "Submit Another Form" button &ndash;&gt;
-                      {{ $t('msg.info.submitAnotherForm') }}
-                    </span>
-                  </template>
-                </v-switch>
-                <v-switch
-                  v-model="view.show_blank_form"
-                  v-t="[`a:form-view:show-blank-form`]"
-                  dense
-                  inset
-                  hide-details
-                  class="nc-switch"
-                  @change="updateView"
-                >
-                  <template #label>
-                    <span class="font-weight-bold grey&#45;&#45;text caption">
-                      &lt;!&ndash; Show a blank form after 5 seconds &ndash;&gt;
-                      {{ $t('msg.info.showBlankForm') }}
-                    </span>
-                  </template>
-                </v-switch>
-                <v-switch v-model="emailMe" v-t="[`a:form-view:email-me`]" dense inset hide-details class="nc-switch">
-                  <template #label>
-                    <span class="caption font-weight-bold grey&#45;&#45;text">
-                      {{ $t('msg.info.emailForm') }}
-                      <span class="font-eright-bold">{{ $store.state.users.user.email }}</span>
-                    </span>
-                  </template>
-                </v-switch>
-              </div>
-            </div>
+  <a-row class="h-full">
+    <a-col v-if="editEnabled" :span="6" class="bg-[#f7f7f7] shadow-md pa-5">
+      <div class="flex">
+        <div class="flex flex-row flex-1 text-lg">
+          <span>
+            <!-- Fields -->
+            {{ $t('objects.fields') }}
+          </span>
+        </div>
+        <div class="flex flex-row">
+          <div class="cursor-pointer mr-2">
+            <span v-if="hiddenColumns.length" style="border-bottom: 2px solid rgb(218, 218, 218)" @click="addAllColumns()">
+              <!-- Add all -->
+              {{ $t('general.addAll') }}
+            </span>
+            <span v-if="columns.length" style="border-bottom: 2px solid rgb(218, 218, 218)" @click="removeAllColumns">
+              <!-- Remove all -->
+              {{ $t('general.removeAll') }}
+            </span>
           </div>
-        </v-col>
-      </template>
-    </v-row> -->
-  </v-container>
+        </div>
+      </div>
+      TODO: Draggable
+    </a-col>
+    <a-col :span="editEnabled ? 18 : 24"> TODO: Form </a-col>
+  </a-row>
 </template>
 
-<style scoped lang="scss">
-/*.nc-form-wrapper {
-  border-radius: 4px;
-
-  .nc-form {
-    position: relative;
-    border-radius: 4px;
-    z-index: 2;
-    background: var(--v-backgroundColorDefault-base);
-    width: 80%;
-    max-width: 600px;
-    margin: 0 auto;
-    margin-top: -100px;
-  }
-}
-
-.nc-field-wrapper {
-  &.active-row {
-    border-radius: 4px;
-    border: 1px solid var(--v-backgroundColor-darken1);
-  }
-
-  position: relative;
-
-  .nc-field-remove-icon {
-    opacity: 0;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    transition: 200ms opacity;
-    z-index: 9;
-  }
-
-  &.nc-editable:hover {
-    background: var(--v-backgroundColor-base);
-
-    .nc-field-remove-icon {
-      opacity: 1;
-    }
-  }
-}
-
-.row-col > label {
-  color: grey;
-  font-weight: 700;
-}
-
-.row-col:focus > label,
-.active-row > label {
-  color: var(--v-primary-base);
-}
-
-.title.text-center {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-::v-deep {
-  .nc-hint {
-    padding-left: 3px;
-  }
-
-  .nc-required-switch,
-  .nc-switch {
-    .v-input--selection-controls__input {
-      transform: scale(0.65) !important;
-    }
-  }
-
-  .v-breadcrumbs__item:nth-child(odd) {
-    font-size: 0.72rem;
-    color: grey;
-  }
-
-  .v-breadcrumbs li:nth-child(even) {
-    padding: 0 6px;
-    font-size: 0.72rem;
-    color: var(--v-textColor-base);
-  }
-
-  .comment-icon {
-    position: absolute;
-    right: 60px;
-    bottom: 60px;
-  }
-
-  .nc-field-wrapper {
-    //.required {
-    //  & > input,
-    //  .xc-input > input,
-    //  .xc-input .v-input__slot input,
-    //  .xc-input > div > input,
-    //  & > select,
-    //  .xc-input > select,
-    //  textarea:not(.inputarea) {
-    //    border: 1px solid rgba(255, 0, 0, 0.98);
-    //    border-radius: 4px;
-    //    background: var(--v-backgroundColorDefault-base);
-    //  }
-    //}
-
-    div > input,
-    div > .xc-input > input,
-    div > .xc-input > div > input,
-    div > select,
-    div > .xc-input > select,
-    div textarea:not(.inputarea) {
-      border: 1px solid #7f828b33;
-      padding: 1px 5px;
-      font-size: 0.8rem;
-      border-radius: 4px;
-      min-height: 44px;
-
-      &:focus {
-        border: 1px solid var(--v-primary-base);
-      }
-
-      &:hover:not(:focus) {
-        box-shadow: 0 0 2px dimgrey;
-      }
-
-      background: var(--v-backgroundColorDefault-base);
-    }
-
-    .v-input__slot {
-      padding: 0 !important;
-    }
-  }
-}
-
-.nc-meta-inputs {
-  //width: 400px;
-  min-height: 40px;
-  border-radius: 4px;
-  //display: flex;
-  //align-items: center;
-  //justify-content: center;
-
-  &:hover {
-    background: var(--v-backgroundColor-base);
-  }
-
-  &:active,
-  &:focus {
-    border: 1px solid #7f828b33;
-  }
-}
-
-.nc-drag-n-drop-to-hide,
-.nc-drag-n-drop-to-show {
-  border: 2px dashed #c4c4c4;
-  border-radius: 4px;
-  font-size: 0.62rem;
-
-  color: grey;
-}
-
-.nc-form-left-nav {
-  max-height: 100%;
-}
-
-.required > div > label + * {
-  border: 1px solid red;
-  border-radius: 4px;
-  background: var(--v-backgroundColorDefault-base);
-}
-
-.nc-form-banner {
-  width: 100%;
-  height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  padding-bottom: 100px;
-
-  .nc-form-logo {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    width: 70%;
-    padding: 0 20px;
-    background: var(--v-backgroundColorDefault-base);
-
-    .nc-form-add-logo {
-      border-radius: 4px;
-      color: grey;
-      border: 2px dashed var(--v-backgroundColor-darken1);
-      padding: 15px 15px;
-    }
-  }
-}
-
-//.nc-field-labels,
-.nc-field-editables {
-  max-height: 0;
-  transition: 0.4s max-height;
-  overflow-y: hidden;
-  display: block;
-
-  &.nc-show {
-    max-height: 500px;
-  }
-}*/
-</style>
+<style scoped lang="scss"></style>