feat: form view

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/project/spreadsheet/components/editable.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    ref="editable"
+    contenteditable
+    v-on="listeners"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    listeners() {
+      return { ...this.$listeners, input: this.onInput }
+    }
+  },
+  mounted() {
+    this.$refs.editable.innerText = this.value
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.innerText)
+    }
+  }
+}
+</script>

packages/nc-gui/components/project/spreadsheet/components/editableCell.vue

@@ -151,7 +151,8 @@ export default {
     meta: Object,
     ignoreFocus: Boolean,
     isForm: Boolean,
-    active: Boolean
+    active: Boolean,
+    dummy: Boolean
   },
   data: () => ({
     changed: false,

packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue

@@ -247,9 +247,13 @@
               <!--                &lt;!&ndash; Add Kanban View &ndash;&gt;-->
               <!--                {{ $t('nav_drawer.virtual_views.kanban.create') }}-->
               <!--              </v-tooltip>-->
-              <v-tooltip bottom>
+              <v-tooltip
+                v-if="enableDummyFeat"
+                bottom
+              >
                 <template #activator="{ on }">
                   <v-list-item
+                    v-if="enableDummyFeat"
                     dense
                     class="body-2"
                     v-on="on"

packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js

@@ -83,23 +83,9 @@ export default {
     availableRealColumns() {
       return this.availableColumns && this.availableColumns.filter(c => !c.virtual)
     },
-    availableColumns() {
-      let columns = []
-
-      if (!this.meta) { return [] }
-      // todo: generate hideCols based on default values
-      const hideCols = ['created_at', 'updated_at']
-
-      if (this.showSystemFields) {
-        columns = this.meta.columns || []
-      } else if (this.data && this.data.length) {
-        columns = (this.meta.columns.filter(c => !(c.pk && c.ai) &&
-          !((this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn)) &&
-          !hideCols.includes(c.cn))) || []
-      } else {
-        columns = (this.meta && this.meta.columns && this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.cn))) || []
-      }
 
+    allColumns() {
+      let columns = this.meta.columns
       if (this.meta && this.meta.v) {
         columns = [...columns, ...this.meta.v.map(v => ({ ...v, virtual: 1 }))]
       }
@@ -119,6 +105,25 @@ export default {
           }
         })
       }
+      return columns
+    },
+    availableColumns() {
+      let columns = []
+
+      if (!this.meta) { return [] }
+      // todo: generate hideCols based on default values
+      const hideCols = ['created_at', 'updated_at']
+
+      if (this.showSystemFields) {
+        columns = this.meta.columns || []
+      } else if (this.data && this.data.length) {
+        columns = (this.meta.columns.filter(c => !(c.pk && c.ai) &&
+          !((this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn)) &&
+          !hideCols.includes(c.cn))) || []
+      } else {
+        columns = (this.meta && this.meta.columns && this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.cn))) || []
+      }
+
       if (this.fieldsOrder.length) {
         return [...columns].sort((c1, c2) => {
           const i1 = this.fieldsOrder.indexOf(c1.alias)
@@ -283,6 +288,11 @@ export default {
         this.syncDataDebounce(this)
       }
     },
+    extraViewParams(v) {
+      if (!this.loadingMeta || !this.loadingData) {
+        this.syncDataDebounce(this)
+      }
+    },
     fieldsOrder: {
       handler(v) {
         if (!this.loadingMeta || !this.loadingData) {

packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container class="h-100 j-excel-container pa-0 ma-0" fluid>
     <v-toolbar height="32" dense class="elevation-0 xc-toolbar xc-border-bottom" style="z-index: 7">
-      <div class="d-flex xc-border align-center search-box">
+      <div v-if="!isForm" class="d-flex xc-border align-center search-box">
         <v-menu bottom offset-y>
           <template #activator="{on}">
             <div v-on="on">
@@ -72,62 +72,65 @@
         </span>
       </v-tooltip>
       <lock-menu v-if="_isUIAllowed('view-type')" v-model="viewStatus.type" />
-      <x-btn tooltip="Reload view data" outlined small text @click="reload">
-        <v-icon small class="mr-1" color="grey  darken-3">
-          mdi-reload
-        </v-icon>
-      </x-btn>
-      <x-btn
-        v-if="isEditable && relationType !== 'bt'"
-        tooltip="Add new row"
-        :disabled="isLocked"
-        outlined
-        small
-        text
-        btn.class="nc-add-new-row-btn"
-        @click="insertNewRow(true,true)"
-      >
-        <v-icon small class="mr-1" color="grey  darken-3">
-          mdi-plus
-        </v-icon>
-      </x-btn>
-      <x-btn
-        small
-        text
-        outlined
-        tooltip="Save new rows"
-        :disabled="!edited || isLocked"
-        @click="save"
-      >
-        <v-icon small class="mr-1" color="grey  darken-3">
-          save
-        </v-icon>
-        Save
-      </x-btn>
 
-      <fields
+      <template v-if="!isForm">
-        v-model="showFields"
+        <x-btn tooltip="Reload view data" outlined small text @click="reload">
-        :field-list="fieldList"
+          <v-icon small class="mr-1" color="grey  darken-3">
-        :meta="meta"
+            mdi-reload
-        :is-locked="isLocked"
+          </v-icon>
-        :fields-order.sync="fieldsOrder"
+        </x-btn>
-        :sql-ui="sqlUi"
+        <x-btn
-        :show-system-fields.sync="showSystemFields"
+          v-if="isEditable && relationType !== 'bt'"
-        :cover-image-field.sync="coverImageField"
+          tooltip="Add new row"
-        :is-gallery="isGallery"
+          :disabled="isLocked"
-      />
+          outlined
+          small
+          text
+          btn.class="nc-add-new-row-btn"
+          @click="insertNewRow(true,true)"
+        >
+          <v-icon small class="mr-1" color="grey  darken-3">
+            mdi-plus
+          </v-icon>
+        </x-btn>
+        <x-btn
+          small
+          text
+          outlined
+          tooltip="Save new rows"
+          :disabled="!edited || isLocked"
+          @click="save"
+        >
+          <v-icon small class="mr-1" color="grey  darken-3">
+            save
+          </v-icon>
+          Save
+        </x-btn>
+
+        <fields
+          v-model="showFields"
+          :field-list="fieldList"
+          :meta="meta"
+          :is-locked="isLocked"
+          :fields-order.sync="fieldsOrder"
+          :sql-ui="sqlUi"
+          :show-system-fields.sync="showSystemFields"
+          :cover-image-field.sync="coverImageField"
+          :is-gallery="isGallery"
+        />
 
-      <sort-list
+        <sort-list
-        v-model="sortList"
+          v-model="sortList"
-        :is-locked="isLocked"
+          :is-locked="isLocked"
-        :field-list="[...realFieldList, ...formulaFieldList]"
+          :field-list="[...realFieldList, ...formulaFieldList]"
-      />
+        />
-      <column-filter
+        <column-filter
-        v-model="filters"
+          v-model="filters"
-        :is-locked="isLocked"
+          :is-locked="isLocked"
-        :field-list="[...realFieldList, ...formulaFieldList]"
+          :field-list="[...realFieldList, ...formulaFieldList]"
-        dense
+          dense
-      />
+        />
+      </template>
       <v-tooltip
         v-if="_isUIAllowed('table-delete')"
         bottom
@@ -273,21 +276,25 @@
               @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
             />
           </template>
-          <template v-else-if="selectedView && selectedView.show_as === 'form' ">
+          <template v-else-if="isForm">
             <form-view
               :nodes="nodes"
               :table="table"
-              :show-fields="showFields"
               :available-columns="availableColumns"
               :meta="meta"
               :data="data"
+              :show-fields.sync="showFields"
+              :all-columns="allColumns"
+              :field-list="fieldList"
+              :is-locked="isLocked"
+              :fields-order.sync="fieldsOrder"
               :primary-value-column="primaryValueColumn"
               :form-params.sync="extraViewParams.formParams"
               @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
             />
           </template>
         </div>
-        <template v-if="data">
+        <template v-if="data && !isForm">
           <pagination
             v-model="page"
             :count="count"
@@ -709,7 +716,8 @@ export default {
           fieldsOrder: this.fieldsOrder,
           viewStatus: this.viewStatus,
           columnsWidth: this.columnsWidth,
-          showSystemFields: this.showSystemFields
+          showSystemFields: this.showSystemFields,
+          extraViewParams: this.extraViewParams
         }
 
         if (this.isGallery) {
@@ -1055,6 +1063,9 @@ export default {
     isGallery() {
       return this.selectedView && this.selectedView.show_as === 'gallery'
     },
+    isForm() {
+      return this.selectedView && this.selectedView.show_as === 'form'
+    },
     meta() {
       return this.$store.state.meta.metas[this.table]
     },

packages/nc-gui/components/project/spreadsheet/views/formView.vue

@@ -1,53 +1,31 @@
 <template>
-  <v-container fluid class="h-100">
+  <v-container fluid class="h-100 backgroundColor">
     <v-row class="h-100">
-      <v-col cols="4">
+      <v-col cols="3">
-        <v-card class="h-100 pa-2" outlined>
+        <v-card class="h-100 pa-2 backgroundColor elevation-0">
+          <div class="d-flex grey--text">
+            <span class="">Fields</span>
+            <v-spacer />
+            <span class="caption mr-2 font-weight-bold" style="border-bottom: 2px solid grey">add all</span>
+            <span class="caption font-weight-bold" style="border-bottom: 2px solid grey">remove all</span>
+          </div>
           <draggable
             v-model="hiddenColumns"
             draggable=".item"
             group="form-inputs"
-            class="h-100"
             @start="drag=true"
             @end="drag=false"
           >
             <v-card
               v-for="(col) in hiddenColumns"
               :key="col.alias"
-              outlined
+              class="pa-2 my-2 item pointer elevation-0"
-              class="pa-2 my-2 item"
+              @mousedown="moved=false"
-            >
+              @mousemove="moved=false"
-              {{ col.alias }}
+              @mouseup="handleMouseUp(col)"
-            </v-card>
-          </draggable>
-        </v-card>
-      </v-col>
-      <v-col class="h-100 px-10" style="overflow-y: auto" cols="8">
-        <draggable
-          v-model="columns"
-          draggable=".item"
-          group="form-inputs"
-          class="h-100"
-          @start="drag=true"
-          @end="drag=false"
-        >
-          <v-card
-            v-for="(col,i) in columns"
-            :key="col.alias"
-            outlined
-            class="pa-2 my-2 item"
-          >
-            <v-overlay absolute />
-            <div
-              v-if="!col.lk"
-              :key="i"
-              :class="{
-                'active-row' : active === col._cn
-              }"
-              class="row-col  my-4"
             >
-              <div>
+              <div class="d-flex">
-                <label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize">
+                <label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize flex-grow-1">
                   <virtual-header-cell
                     v-if="col.virtual"
                     :column="col"
@@ -64,35 +42,128 @@
                   />
 
                 </label>
-                <virtual-cell
+                <v-icon color="grey">
-                  v-if="col.virtual"
+                  mdi-drag
-                  ref="virtual"
+                </v-icon>
-                  :column="col"
+              </div>
-                  :row="localState"
+            </v-card>
-                  :nodes="nodes"
+            <div class="nc-drag-n-drop-to-hide py-3 text-center grey--text text--lighter-1">
-                  :meta="meta"
+              Drag and drop field here to hide
-                  :api="api"
+            </div>
-                  :active="true"
+          </draggable>
-                  :sql-ui="sqlUi"
+          <div class="grey--text caption text-center mt-4">
-                  :is-form="true"
+            <v-icon samll color="grey">
-                />
+              mdi-plus
-                <editable-cell
+            </v-icon>
-                  v-else
+            Add new field to this table
-                  :id="`data-table-form-${col._cn}`"
+          </div>
-                  v-model="localState[col._cn]"
+        </v-card>
-                  :db-alias="dbAlias"
+      </v-col>
-                  :column="col"
+      <v-col class="h-100 px-10 backgroundColor darken-1" style="overflow-y: auto" cols="9">
-                  class="xc-input body-2"
+        <!--        <div class="my-14 d-flex align-center justify-center">-->
-                  :meta="meta"
+        <!--          <v-chip>Add cover image</v-chip>-->
-                  :sql-ui="sqlUi"
+        <!--        </div>-->
-                  is-form
+        <div class="my-10 d-flex align-center justify-center flex-column">
-                  @focus="active = col._cn"
+          <editable
-                  @blur="active = ''"
+            v-model="localParams.name"
-                />
+            class="title nc-meta-inputs text-center"
+          />
+
+          <editable
+            v-model="localParams.description"
+            class="caption nc-meta-inputs text-center"
+          />
+        </div>
+
+        <div style="max-width:600px" class="mx-auto">
+          <draggable
+            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 pa-2"
+            >
+              <v-overlay
+                :value="true"
+                absolute
+                :color="$store.state.windows.darkTheme ? 'black': 'white'"
+                opacity="0.1"
+              />
+              <v-icon small class="nc-field-remove-icon" @click="columns = columns.filter((_,j) => i !== j)">
+                mdi-eye-off-outline
+              </v-icon>
+              <!--            <v-card-->
+              <!--              outlined-->
+              <!--              class="pa-2 my-2  "-->
+              <!--            >-->
+              <div
+                v-if="!col.lk"
+                :key="i"
+                :class="{
+                  'active-row' : active === col._cn
+                }"
+                class="row-col  my-4"
+              >
+                <div>
+                  <label :for="`data-table-form-${col._cn}`" class="body-2  mt-n1 text-capitalize">
+                    <virtual-header-cell
+                      v-if="col.virtual"
+                      :column="col"
+                      :nodes="nodes"
+                      :is-form="true"
+                      :meta="meta"
+                    />
+                    <header-cell
+                      v-else
+                      :is-form="true"
+                      :value="col._cn"
+                      :column="col"
+                      :sql-ui="sqlUi"
+                    />
+
+                  </label>
+                  <virtual-cell
+                    v-if="col.virtual"
+                    ref="virtual"
+                    :column="col"
+                    :row="localState"
+                    :nodes="nodes"
+                    :meta="meta"
+                    :api="api"
+                    :active="false"
+                    :sql-ui="sqlUi"
+                    :is-form="true"
+                    :dummy="true"
+                  />
+                  <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
+                    :dummy="true"
+                  />
+                </div>
               </div>
+              <!--            </v-card>-->
             </div>
-          </v-card>
+          </draggable>
-        </draggable>
+          <div class="my-10 text-center">
+            <v-btn color="primary">
+              Submit
+            </v-btn>
+          </div>
+        </div>
       </v-col>
     </v-row>
   </v-container>
@@ -105,18 +176,184 @@ 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'
 
 export default {
   name: 'FormView',
-  components: { EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
+  components: { Editable, EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
-  props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams'],
+  props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams', 'showFields', 'fieldsOrder', 'allColumns'],
-  data: () => ({ localState: {}, columns: [], hiddenColumns: [] }),
+  data: () => ({
-  computed: {},
+    localState: {},
+    moved: false
+    // hiddenColumns: []
+  }),
+  computed: {
+    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])
+      },
+      set(val) {
+        const showFields = val.reduce((o, v) => {
+          o[v.alias] = true
+          return o
+        }, {})
+        console.log(showFields, this.showFields)
+        const fieldsOrder = val.map(v => v.alias)
+        // debugger
+        this.$emit('update:showFields', showFields)
+        this.$emit('update:fieldsOrder', fieldsOrder)
+      }
+    }
+  },
+  watch: {
+    // visibleColumns: {
+    //   handler(val) {
+    //
+    //   },
+    //   deep: true
+    // }
+  },
   mounted() {
-    this.columns = [...this.availableColumns]
+    this.localParams = Object.assign({ name: this.meta._tn, description: 'Form view description' }, this.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: {
+    handleMouseUp(col) {
+      if (!this.moved) {
+        this.columns = [...this.columns, col]
+      }
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
+
+.nc-field-wrapper {
+
+  position: relative;
+
+  .nc-field-remove-icon {
+    opacity: 0;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    transition: 200ms opacity;
+    z-index: 9
+  }
+
+  &:hover {
+    background: var(--v-backgroundColorDefault-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);
+  }
+
+  position: relative;
+
+  .comment-icon {
+    position: absolute;
+    right: 60px;
+    bottom: 60px;
+  }
+
+  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);
+  }
+
+}
+
+.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 {
+  border: 2px dotted #a1a1a1;
+  border-radius: 4px;
+  font-size: .6rem;
+  color: grey
+}
+
 </style>

packages/nc-gui/mixins/device.js

@@ -44,7 +44,9 @@ export default {
       return process.env.EE
     },
     _isZh() {
-      return ['zh', 'zh-cn', 'zh-hk', 'zh-mo', 'zh-sg', 'zh-tw'].includes((navigator.language || navigator.userLanguage || 'en').toLowerCase())
+      const zhLan = ['zh', 'zh-cn', 'zh-hk', 'zh-mo', 'zh-sg', 'zh-tw']
+      const browserLan = (navigator.languages || [navigator.language || navigator.userLanguage || 'en']).map(v => v.toLowerCase())
+      return zhLan.some(l => browserLan.includes(l))
     },
     ...mapGetters({
       _isUIAllowed: 'users/GtrIsUIAllowed'