From bd317e063633d216526d002119eb552624f12a18 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 21 Sep 2021 17:17:19 +0530
Subject: [PATCH] feat: form view v1

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/spreadsheetNavDrawer.vue       | 178 +++++++++---------
 .../project/spreadsheet/rowsXcDataTable.vue   |  17 ++
 .../project/spreadsheet/views/formView.vue    | 122 ++++++++++++
 3 files changed, 229 insertions(+), 88 deletions(-)
 create mode 100644 packages/nc-gui/components/project/spreadsheet/views/formView.vue

diff --git a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
index a6fae341d1..1f7575c79d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
@@ -189,94 +189,94 @@
                 {{ $t('nav_drawer.virtual_views.gallery.create') }}
               </v-tooltip>
 
-<!--              <v-tooltip bottom>-->
-<!--                <template #activator="{ on }">-->
-<!--                  <v-list-item-->
-<!--                    dense-->
-<!--                    class="body-2"-->
-<!--                    v-on="on"-->
-<!--                    @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"-->
-<!--                  >-->
-<!--                    <v-list-item-icon class="mr-n1">-->
-<!--                      <v-icon x-small>-->
-<!--                        mdi-calendar-->
-<!--                      </v-icon>-->
-<!--                    </v-list-item-icon>-->
-<!--                    <v-list-item-title>-->
-<!--                      <span class="font-weight-regular">-->
-<!--                        &lt;!&ndash; Calendar &ndash;&gt;-->
-<!--                        {{ $t('nav_drawer.virtual_views.calendar.title') }}-->
-<!--                      </span>-->
-<!--                    </v-list-item-title>-->
-
-<!--                    <v-spacer />-->
-<!--                    <v-icon class="mr-1" small>-->
-<!--                      mdi-plus-->
-<!--                    </v-icon>-->
-<!--                  </v-list-item>-->
-<!--                </template>-->
-<!--                &lt;!&ndash; Add Calendar View &ndash;&gt;-->
-<!--                {{ $t('nav_drawer.virtual_views.calendar.create') }}-->
-<!--              </v-tooltip>-->
-<!--              <v-tooltip bottom>-->
-<!--                <template #activator="{ on }">-->
-<!--                  <v-list-item-->
-<!--                    dense-->
-<!--                    open-class="body-2"-->
-<!--                    v-on="on"-->
-<!--                    @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"-->
-<!--                  >-->
-<!--                    <v-list-item-icon class="mr-n1">-->
-<!--                      <v-icon x-small>-->
-<!--                        mdi-tablet-dashboard-->
-<!--                      </v-icon>-->
-<!--                    </v-list-item-icon>-->
-<!--                    <v-list-item-title>-->
-<!--                      <span class="font-weight-regular">-->
-<!--                        &lt;!&ndash; Kanban &ndash;&gt;-->
-<!--                        {{ $t('nav_drawer.virtual_views.kanban.title') }}-->
-<!--                      </span>-->
-<!--                    </v-list-item-title>-->
-
-<!--                    <v-spacer />-->
-<!--                    <v-icon class="mr-1" small>-->
-<!--                      mdi-plus-->
-<!--                    </v-icon>-->
-<!--                  </v-list-item>-->
-<!--                </template>-->
-<!--                &lt;!&ndash; Add Kanban View &ndash;&gt;-->
-<!--                {{ $t('nav_drawer.virtual_views.kanban.create') }}-->
-<!--              </v-tooltip>-->
-<!--              <v-tooltip bottom>-->
-<!--                <template #activator="{ on }">-->
-<!--                  <v-list-item-->
-<!--                    dense-->
-<!--                    class="body-2"-->
-<!--                    v-on="on"-->
-<!--                    @click="$toast.info('Coming soon').goAway(3000)"-->
-<!--                  >-->
-<!--                    <v-list-item-icon class="mr-n1">-->
-<!--                      <v-icon x-small class="mt-n1">-->
-<!--                        mdi-form-select-->
-<!--                      </v-icon>-->
-<!--                    </v-list-item-icon>-->
-<!--                    <v-list-item-title>-->
-<!--                      <span class="font-weight-regular">-->
-<!--                        &lt;!&ndash; Form &ndash;&gt;-->
-
-<!--                        {{ $t('nav_drawer.virtual_views.form.title') }}-->
-<!--                      </span>-->
-<!--                    </v-list-item-title>-->
-
-<!--                    <v-spacer />-->
-<!--                    <v-icon class="mr-1" small>-->
-<!--                      mdi-plus-->
-<!--                    </v-icon>-->
-<!--                  </v-list-item>-->
-<!--                </template>-->
-<!--                &lt;!&ndash; Add Form View &ndash;&gt;-->
-<!--                {{ $t('nav_drawer.virtual_views.form.create') }}-->
-<!--              </v-tooltip>-->
+              <!--              <v-tooltip bottom>-->
+              <!--                <template #activator="{ on }">-->
+              <!--                  <v-list-item-->
+              <!--                    dense-->
+              <!--                    class="body-2"-->
+              <!--                    v-on="on"-->
+              <!--                    @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"-->
+              <!--                  >-->
+              <!--                    <v-list-item-icon class="mr-n1">-->
+              <!--                      <v-icon x-small>-->
+              <!--                        mdi-calendar-->
+              <!--                      </v-icon>-->
+              <!--                    </v-list-item-icon>-->
+              <!--                    <v-list-item-title>-->
+              <!--                      <span class="font-weight-regular">-->
+              <!--                        &lt;!&ndash; Calendar &ndash;&gt;-->
+              <!--                        {{ $t('nav_drawer.virtual_views.calendar.title') }}-->
+              <!--                      </span>-->
+              <!--                    </v-list-item-title>-->
+
+              <!--                    <v-spacer />-->
+              <!--                    <v-icon class="mr-1" small>-->
+              <!--                      mdi-plus-->
+              <!--                    </v-icon>-->
+              <!--                  </v-list-item>-->
+              <!--                </template>-->
+              <!--                &lt;!&ndash; Add Calendar View &ndash;&gt;-->
+              <!--                {{ $t('nav_drawer.virtual_views.calendar.create') }}-->
+              <!--              </v-tooltip>-->
+              <!--              <v-tooltip bottom>-->
+              <!--                <template #activator="{ on }">-->
+              <!--                  <v-list-item-->
+              <!--                    dense-->
+              <!--                    open-class="body-2"-->
+              <!--                    v-on="on"-->
+              <!--                    @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"-->
+              <!--                  >-->
+              <!--                    <v-list-item-icon class="mr-n1">-->
+              <!--                      <v-icon x-small>-->
+              <!--                        mdi-tablet-dashboard-->
+              <!--                      </v-icon>-->
+              <!--                    </v-list-item-icon>-->
+              <!--                    <v-list-item-title>-->
+              <!--                      <span class="font-weight-regular">-->
+              <!--                        &lt;!&ndash; Kanban &ndash;&gt;-->
+              <!--                        {{ $t('nav_drawer.virtual_views.kanban.title') }}-->
+              <!--                      </span>-->
+              <!--                    </v-list-item-title>-->
+
+              <!--                    <v-spacer />-->
+              <!--                    <v-icon class="mr-1" small>-->
+              <!--                      mdi-plus-->
+              <!--                    </v-icon>-->
+              <!--                  </v-list-item>-->
+              <!--                </template>-->
+              <!--                &lt;!&ndash; Add Kanban View &ndash;&gt;-->
+              <!--                {{ $t('nav_drawer.virtual_views.kanban.create') }}-->
+              <!--              </v-tooltip>-->
+              <v-tooltip bottom>
+                <template #activator="{ on }">
+                  <v-list-item
+                    dense
+                    class="body-2"
+                    v-on="on"
+                    @click="openCreateViewDlg('form')"
+                  >
+                    <v-list-item-icon class="mr-n1">
+                      <v-icon x-small class="mt-n1">
+                        mdi-form-select
+                      </v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>
+                      <span class="font-weight-regular">
+                        <!-- Form -->
+
+                        {{ $t('nav_drawer.virtual_views.form.title') }}
+                      </span>
+                    </v-list-item-title>
+
+                    <v-spacer />
+                    <v-icon class="mr-1" small>
+                      mdi-plus
+                    </v-icon>
+                  </v-list-item>
+                </template>
+                <!-- Add Form View -->
+                {{ $t('nav_drawer.virtual_views.form.create') }}
+              </v-tooltip>
             </v-list>
           </template>
         </div>
@@ -490,6 +490,7 @@ export default {
   name: 'SpreadsheetNavDrawer',
   components: { Extras, CreateViewDialog },
   props: {
+    extraViewParams: Object,
     showAdvanceOptions: Boolean,
     hideViews: Boolean,
     primaryValueColumn: [Number, String],
@@ -565,6 +566,7 @@ export default {
         this.$emit('update:fieldsOrder', queryParams.fieldsOrder || [])
         this.$emit('update:viewStatus', queryParams.viewStatus || {})
         this.$emit('update:columnsWidth', queryParams.columnsWidth || {})
+        this.$emit('update:extraViewParams', queryParams.extraViewParams || {})
         this.$emit('update:coverImageField', queryParams.coverImageField)
         this.$emit('update:showSystemFields', queryParams.showSystemFields)
         if (queryParams.showFields) {
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 96139a41c8..58b6bea729 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -273,6 +273,19 @@
               @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
             />
           </template>
+          <template v-else-if="selectedView && selectedView.show_as === 'form' ">
+            <form-view
+              :nodes="nodes"
+              :table="table"
+              :show-fields="showFields"
+              :available-columns="availableColumns"
+              :meta="meta"
+              :data="data"
+              :primary-value-column="primaryValueColumn"
+              :form-params.sync="extraViewParams.formParams"
+              @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
+            />
+          </template>
         </div>
         <template v-if="data">
           <pagination
@@ -307,6 +320,7 @@
         :view-status.sync="viewStatus"
         :columns-width.sync="columnsWidth"
         :show-system-fields.sync="showSystemFields"
+        :extra-view-params.sync="extraViewParams"
         @mapFieldsAndShowFields="mapFieldsAndShowFields"
         @loadTableData="loadTableData"
         @showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)"
@@ -487,6 +501,7 @@
 
 import { mapActions } from 'vuex'
 import debounce from 'debounce'
+import FormView from './views/formView'
 import DebugMetas from '@/components/project/spreadsheet/components/debugMetas'
 
 import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures'
@@ -507,6 +522,7 @@ import ColumnFilter from '~/components/project/spreadsheet/components/columnFilt
 export default {
   name: 'RowsXcDataTable',
   components: {
+    FormView,
     DebugMetas,
     Pagination,
     ExpandedForm,
@@ -535,6 +551,7 @@ export default {
     showTabs: [Boolean, Number]
   },
   data: () => ({
+    extraViewParams: {},
     debug: false,
     key: 1,
     dataLoaded: false,
diff --git a/packages/nc-gui/components/project/spreadsheet/views/formView.vue b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
new file mode 100644
index 0000000000..b331249ed6
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
@@ -0,0 +1,122 @@
+<template>
+  <v-container fluid class="h-100">
+    <v-row class="h-100">
+      <v-col cols="4">
+        <v-card class="h-100 pa-2" outlined>
+          <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"
+            >
+              {{ col.alias }}
+            </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>
+                <label :for="`data-table-form-${col._cn}`" class="body-2 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="true"
+                  :sql-ui="sqlUi"
+                  :is-form="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
+                  @focus="active = col._cn"
+                  @blur="active = ''"
+                />
+              </div>
+            </div>
+          </v-card>
+        </draggable>
+      </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'
+
+export default {
+  name: 'FormView',
+  components: { EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
+  props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams'],
+  data: () => ({ localState: {}, columns: [], hiddenColumns: [] }),
+  computed: {},
+  mounted() {
+    this.columns = [...this.availableColumns]
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>