nocodb/packages/nc-gui/components/project/spreadsheet/views/FormView.vue

<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--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--text">
              <span class="">
                <!--Fields-->
                {{ $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()"
              >
                <!--Add all-->
                {{ $t("general.addAll") }}
              </span>
              <span
                v-if="columns.length"
                class="pointer caption"
                style="border-bottom: 2px solid rgb(218, 218, 218)"
                @click="removeAllColumns"
              >
                <!--Remove all-->
                {{ $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"
                  >
                    <virtual-header-cell
                      v-if="isVirtualCol(col)"
                      class="caption"
                      :column="col"
                      :nodes="nodes"
                      :is-form="true"
                      :meta="meta"
                    />
                    <header-cell
                      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--text text--lighter-1"
              >
                <!--Drag and drop fields here to hide-->
                {{ $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--text caption text-center mt-4" v-on="on">
                  <v-icon size="20" color="grey">
                    mdi-plus
                  </v-icon>
                  <!--Add new field to this table-->
                  {{ $t("activity.addField") }}
                </div>
              </template>
              <edit-column
                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"
        >
          <!--        <pre class="caption">{{ fields }}</pre>-->

          <!--        <div class="my-14 d-flex align-center justify-center">-->
          <!--          <v-chip>Add cover image</v-chip>-->
          <!--        </div>-->
          <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">
                  <!--                  <v-chip small color="backgroundColorDefault caption grey&#45;&#45;text">
                    Add cover image
                  </v-chip>-->
                </div>
              </div>
            </div>
            <div class="mx-auto nc-form elevation-3 pa-2">
              <div class="nc-form-logo py-8">
                <!--                <div v-ripple class="nc-form-add-logo text-center caption pointer" @click.stop>-->
                <!--                  Add a logo-->
                <!--                </div>-->
              </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--text text--lighten-1"
                :class="{ 'nc-meta-inputs': isEditable }"
                placeholder="Form Title"
                @input="updateView"
              >
                {{ view.heading }}
              </editable>
              <!--placeholder="Add form description"-->
              <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--text text--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--text caption ml-2"
                            @click="
                              (col.required = !col.required),
                              updateColMeta(col, i)
                            "
                          >
                            <!--Required-->
                            {{ $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>
                        <!--placeholder=" Enter form input label"-->
                        <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)"
                        />
                        <!--placeholder=" Add some help text"-->
                        <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"
                      >
                        <virtual-header-cell
                          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
                            )
                          "
                        />
                        <header-cell
                          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>
                        <virtual-cell
                          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--text caption"
                        >
                          Field is required.
                        </div>

                        <!-- todo: optimize -->
                        <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--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>
                          <editable-cell
                            :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--text caption"
                          >
                            Field is required.
                          </div>
                        </template>
                      </template>
                    </div>
                    <!--              </div>-->
                  </div>
                </div>
                <div
                  v-if="!columns.length"
                  class="nc-drag-n-drop-to-show py-4 mx-8 my-10 text-center grey--text text--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"
                >
                  <!--Submit-->
                  {{ $t("general.submit") }}
                </v-btn>
                <!--            <span class="caption grey&#45;&#45;text pointer">Edit label</span>-->
              </div>
              <div
                v-if="isEditable && localParams.submit"
                style="max-width: 700px"
                class="mx-auto mt-4 px-4 mb-4"
              >
                <!--            <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>-->

                <div class="caption grey--text mt-10 mb-2">
                  <!--After form is submitted:-->
                  {{ $t("msg.info.afterFormSubmitted") }}
                </div>
                <label class="caption grey--text font-weight-bold">
                  <!--Show this message:-->
                  {{ $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--text caption">
                      <!--Show "Submit Another Form" button-->
                      {{ $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--text caption">
                      <!--Show a blank form after 5 seconds-->
                      {{ $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--text">
                      {{ $t("msg.info.emailForm") }}
                      <span class="font-eright-bold">{{
                        $store.state.users.user.email
                      }}</span>
                    </span>
                  </template>
                </v-switch>
              </div>
            </div>
          </div>
        </v-col>
      </template>
    </v-row>
  </v-container>
</template>

<script>
import draggable from 'vuedraggable'
import { validationMixin } from 'vuelidate'
import { required, minLength } from 'vuelidate/lib/validators'
import {
  UITypes,
  isVirtualCol,
  RelationTypes,
  getSystemColumns
} 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'

// todo: generate hideCols based on default values
const hiddenCols = ['created_at', 'updated_at']

export default {
  name: 'FormView',
  components: {
    EditColumn,
    Editable,
    EditableCell,
    VirtualCell,
    HeaderCell,
    VirtualHeaderCell,
    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)

        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'() {
      this.meta.columns.forEach((c) => {
        this.localParams.fields[c.title] =
          this.localParams.fields[c.title] || {}
      })
    },
    submitted(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

      if (event.added) {
        this.$set(element, 'show', true)
      }

      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)
      }

      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
    }
  }
}
</script>

<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>