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">
      <v-col v-if="isEditable" class="h-100 col-md-4 col-lg-3">
        <v-card class="h-100 overflow-auto pa-2 backgroundColor elevation-0 nc-form-left-nav">
          <div class="d-flex grey--text">
            <span class="">Fields</span>
            <v-spacer />
            <span
              class="pointer caption mr-2"
              style="border-bottom: 2px solid rgba(128,128,128,0.67)"
              @click="columns=[...allColumns]"
            >add all</span>
            <span class="pointer caption" style="border-bottom: 2px solid rgba(128,128,128,0.67)" @click="columns=[]">remove all</span>
          </div>
          <draggable
            v-model="hiddenColumns"
            draggable=".item"
            group="form-inputs"
            @start="drag=true"
            @end="drag=false"
          >
            <v-card
              v-for="(col) in hiddenColumns"
              :key="col.alias"
              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._cn}`" class="body-2 text-capitalize flex-grow-1">
                  <virtual-header-cell
                    v-if="col.virtual"
                    class="caption"
                    :column="col"
                    :nodes="nodes"
                    :is-form="true"
                    :meta="meta"
                  />
                  <header-cell
                    v-else
                    class="caption"
                    :is-form="true"
                    :value="col._cn"
                    :column="col"
                    :sql-ui="sqlUi"
                  />

                </label>
                <v-icon color="grey">
                  mdi-drag
                </v-icon>
              </div>
            </v-card>
            <div class="mt-1 nc-drag-n-drop-to-hide py-3 text-center grey--text text--lighter-1">
              Drag and drop field here to hide
            </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 samll color="grey">
                  mdi-plus
                </v-icon>
                Add new field to this table
              </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-10 "
        style="overflow-y: auto"
      >
        <!--        <div class="my-14 d-flex align-center justify-center">-->
        <!--          <v-chip>Add cover image</v-chip>-->
        <!--        </div>-->
        <div class="my-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--text">
                Add cover image
              </v-chip>
            </div>
            <div class="nc-form-logo">
              <div v-ripple class="nc-form-add-logo text-center caption pointer" @click.stop>
                Add a logo
              </div>
            </div>
          </div>

          <editable
            :is="isEditable ? 'editable' : 'h2'"
            v-model.lazy="localParams.name"
            class="display-1 text-center"
            :class="{'nc-meta-inputs': isEditable}"
            placeholder="Form Title"
          >
            {{ localParams.name }}
          </editable>

          <editable
            :is="isEditable ? 'editable' : 'div'"
            v-model.lazy="localParams.description"
            :class="{'nc-meta-inputs': isEditable}"
            class="body-1  text-center"
            placeholder="Add form description"
          >
            {{ localParams.description }}
          </editable>
        </div>

        <div style="max-width:600px" class="mx-auto">
          <draggable
            :is="_isUIAllowed('editFormView') ? 'draggable' : 'div'"
            v-model="columns"
            draggable=".item"
            group="form-inputs"
            class="h-100"
            @start="drag=true"
            @end="drag=false"
          >
            <div

              v-for="(col,i) in columns"
              :key="col.alias"
              class="nc-field-wrapper item px-4 py-4"
              :class="{'nc-editable':isEditable , 'active-row': isActiveRow(col)}"
            >
              <div
                v-click-outside="() => onClickOutside(col)"
                @dblclick="activeRow= col.alias"
              >
                <template
                  v-if="_isUIAllowed('editFormView')"
                >
                  <v-icon small class="nc-field-remove-icon" @click="columns = columns.filter((_,j) => i !== j)">
                    mdi-eye-off-outline
                  </v-icon>
                </template>
                <div
                  v-if="localParams.fields && localParams.fields[col.alias]"
                  :class="{
                    'active-row' : active === col._cn,
                    required: isRequired(col, localState)
                  }"
                >
                  <div v-if="isActiveRow(col)">
                    <div><label class="grey--text caption">Required</label><v-switch color="grey" dense inset /></div>
                    <editable
                      v-model="localParams.fields[col.alias].label"
                      style="width:300px"
                      placeholder=" Enter form input label"
                      class="caption pa-1 backgroundColor darken-1 mb-2 "
                    />
                    <editable
                      v-model="localParams.fields[col.alias].description"
                      style="width:300px"
                      placeholder=" Add some help text"
                      class="caption pa-1 backgroundColor darken-1 mb-2"
                    />
                  </div>
                  <label v-else :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize">
                    <virtual-header-cell
                      v-if="col.virtual"
                      class="caption"
                      :column="{...col, _cn: localParams.fields[col.alias].label || col._cn}"
                      :nodes="nodes"
                      :is-form="true"
                      :meta="meta"
                    />
                    <header-cell
                      v-else
                      class="caption"
                      :is-form="true"
                      :value="localParams.fields[col.alias].label || col._cn"
                      :column="col"
                      :sql-ui="sqlUi"
                    />

                  </label>
                  <virtual-cell
                    v-if="col.virtual"
                    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"
                  />

                  <div
                    v-else-if="col.ai || (col.pk && !isNew) || disabledColumns[col._cn]"
                    style="height:100%; width:100%"
                    class="caption xc-input"
                    @click="col.ai && $toast.info('Auto Increment field is not editable').goAway(3000)"
                  >
                    <input
                      style="height:100%; width: 100%"
                      readonly
                      disabled
                      :value="localState[col._cn]"
                    >
                  </div>

                  <editable-cell
                    v-else
                    :id="`data-table-form-${col._cn}`"
                    v-model="localState[col._cn]"
                    :db-alias="dbAlias"
                    :column="col"
                    class="xc-input body-2"
                    :meta="meta"
                    :sql-ui="sqlUi"
                    is-form
                    @focus="active = col._cn"
                    @blur="active = ''"
                  />
                </div>
                <!--              </div>-->
              </div>

              <div
                v-if="!columns.length"
                class="mt-1 nc-drag-n-drop-to-show py-4 text-center grey--text text--lighter-1"
              >
                Drag and drop field here to add
              </div>
            </div>
          </draggable>
          <div class="my-10 text-center">
            <v-btn color="primary" @click="save">
              Submit
            </v-btn>
            <!--            <span class="caption grey&#45;&#45;text pointer">Edit label</span>-->
          </div>

          <div v-if="isEditable && localParams.submit" style="max-width: 400px" class="mx-auto">
            <!--            <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-4 mb-2">
              After form is submitted:
            </div>
            <label class="caption">Show this message:</label>
            <v-textarea v-model="localParams.submit.message" rows="3" hide-details solo outlined />

            <v-switch v-model="localParams.submit.showAnotherSubmit" dense inset hide-details>
              <template #label>
                <span class="caption">Show "Submit another response" button</span>
              </template>
            </v-switch>
            <v-switch v-model="localParams.submit.showBlankForm" dense inset hide-details>
              <template #label>
                <span class="caption">Show a blank form after 5 seconds</span>
              </template>
            </v-switch>
            <v-switch v-model="localParams.submit.emailMe" dense inset hide-details>
              <template #label>
                <span class="caption">Email me at <span class="font-eright-bold">{{
                  $store.state.users.user.email
                }}</span></span>
              </template>
            </v-switch>
          </div>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>

import draggable from 'vuedraggable'
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'

export default {
  name: 'FormView',
  components: { EditColumn, Editable, EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
  mixins: [form],
  props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams', 'showFields', 'fieldsOrder', 'allColumns', 'dbAlias', 'api'],
  data: () => ({
    localState: {},
    moved: false,
    addNewColMenu: false,
    addNewColModal: false,
    activeRow: null
    // hiddenColumns: []
  }),
  computed: {
    isEditable() {
      return this._isUIAllowed('editFormView')
    },
    localParams: {
      get() {
        return this.formParams || {}
      },
      set(params) {
        this.$emit('update:formParams', params)
      }
    },
    hiddenColumns: {
      get() {
        return this.allColumns.filter(c => !this.showFields[c.alias])
      }
    },
    columns: {
      get() {
        return this.allColumns.filter(c => this.showFields[c.alias]).sort((a, b) => ((this.fieldsOrder.indexOf(a.alias) + 1) || Infinity) - ((this.fieldsOrder.indexOf(b.alias) + 1) || Infinity))
      },
      set(val) {
        const showFields = val.reduce((o, v) => {
          o[v.alias] = true
          return o
        }, this.allColumns.reduce((o, v) => {
          o[v.alias] = false
          return o
        }, {}))
        const fieldsOrder = val.map(v => v.alias)
        this.$emit('update:showFields', showFields)
        this.$emit('update:fieldsOrder', fieldsOrder)
      }
    }
  },
  watch: {
    'meta.columns'() {
      this.meta.columns.forEach((c) => {
        this.localParams.fields[c.alias] = this.localParams.fields[c.alias] || {}
      })
    }
  },
  mounted() {
    const localParams = Object.assign({
      name: this.meta._tn,
      description: 'Form view description',
      submit: {},
      fields: {}
    }, this.localParams)
    this.meta.columns.forEach((c) => {
      localParams.fields[c.alias] = localParams.fields[c.alias] || {}
    })
    this.localParams = localParams
    // this.columns = [...this.availableColumns]
    // this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.cn === c1.cn && c._cn === c1._cn))
  },
  methods: {
    isActiveRow(col) {
      return this.activeRow === col.alias
    },
    onClickOutside(col) {
      this.activeRow = this.activeRow === col.alias ? null : this.activeRow
    },
    handleMouseUp(col) {
      if (!this.moved) {
        this.columns = [...this.columns, col]
      }
    },
    onNewColCreation(col) {
      this.addNewColMenu = false
      this.addNewColModal = false
      this.$emit('onNewColCreation', col)
    },
    async save() {
      try {
        // const id = this.meta.columns.filter(c => c.pk).map(c => this.localState[c._cn]).join('___')

        // const updatedObj = Object.keys(this.changedColumns).reduce((obj, col) => {
        //   obj[col] = this.localState[col]
        //   return obj
        // }, {})

        // if (this.isNew) {
        // const data =
        await this.api.insert(this.localState)
        this.localState = {} // { ...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(this.localState)
            }
          }
        }

        //   await this.reload()
        // }
        // else if (Object.keys(updatedObj).length) {
        //   if (!id) {
        //     return this.$toast.info('Update not allowed for table which doesn\'t have primary Key').goAway(3000)
        //   }
        //   await this.api.update(id, updatedObj, this.oldRow)
        // } else {
        //   return this.$toast.info('No columns to update').goAway(3000)
        // }

        // this.$emit('update:oldRow', { ...this.localState })
        // this.changedColumns = {}
        // this.$emit('input', this.localState)
        // this.$emit('update:isNew', false)

        this.$toast.success(`${this.localState[this.primaryValueColumn]} saved successfully.`, {
          position: 'bottom-right'
        }).goAway(3000)
      } catch (e) {
        console.log(e)
        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
      }
    }
  }
}
</script>

<style scoped lang="scss">

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

  .v-breadcrumbs__item:nth-child(odd) {
    font-size: .72rem;
    color: grey;
  }

  .v-breadcrumbs li:nth-child(even) {
    padding: 0 6px;
    font-size: .72rem;
    color: var(--v-textColor-base);
  }

  .comment-icon {
    position: absolute;
    right: 60px;
    bottom: 60px;
  }

  .nc-field-wrapper {
    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: .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;
    }
  }
}

.required > div > label + * {
  border: 1px solid red;
  border-radius: 4px;
  background: var(--v-backgroundColorDefault-base);
}

.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 dotted #a1a1a1;
  border-radius: 4px;
  font-size: .6rem;
  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;

  .nc-form-logo {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: 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;
    }
  }
}

</style>