From 712059f8f460edca1f0011fbd636e6e55f955944 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Nov 2021 13:17:26 +0530
Subject: [PATCH] refactor(gui): ui improvements

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../spreadsheet/components/editColumn.vue     | 550 +++++++++---------
 .../editColumn/linkedToAnotherOptions.vue     |   2 +-
 .../editableCell/editableAttachmentCell.vue   |   2 +-
 .../project/spreadsheet/helpers/uiTypes.js    |  54 +-
 4 files changed, 331 insertions(+), 277 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
index 496ac6904e..3dfc173f44 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
@@ -104,272 +104,286 @@
                   <!--                          </v-list-item>-->
                   <!--                        </v-list>-->
                 </v-col>
-
-                <template v-if="newColumn.uidt !== 'Formula'">
-                  <v-col
-                    v-if="isLookup"
-                    cols="12"
-                  >
-                    <lookup-options
-                      ref="lookup"
-                      :column="newColumn"
-                      :nodes="nodes"
-                      :meta="meta"
-                      :is-s-q-lite="isSQLite"
-                      :alias="newColumn.cn"
-                      :is-m-s-s-q-l="isMSSQL"
-                      v-on="$listeners"
-                    />
-                  </v-col>
-                  <v-col
-                    v-if="isRollup"
-                    cols="12"
-                  >
-                    <rollup-options
-                      ref="rollup"
-                      :column="newColumn"
-                      :nodes="nodes"
-                      :meta="meta"
-                      :is-s-q-lite="isSQLite"
-                      :alias="newColumn.cn"
-                      :is-m-s-s-q-l="isMSSQL"
-                      v-on="$listeners"
-                    />
-                  </v-col>
-                  <v-col
-                    v-if="isLinkToAnotherRecord"
-                    cols="12"
+                <v-col v-if="accordion" cols="12" class="pt-0" :class="{'pb-0': advanceOptions}">
+                  <div
+                    class="pointer grey--text text-right caption nc-more-options"
+                    @click="advanceOptions = !advanceOptions"
                   >
-                    <linked-to-another-options
-                      ref="relation"
-                      :column="newColumn"
-                      :nodes="nodes"
-                      :meta="meta"
-                      :is-s-q-lite="isSQLite"
-                      :alias="newColumn.cn"
-                      :is-m-s-s-q-l="isMSSQL"
-                      @onColumnSelect="onRelColumnSelect"
-                    />
-                  </v-col>
-                  <v-col
-                    v-if="isRelation"
-                    cols="12"
-                  >
-                    <relation-options
-                      ref="relation"
-                      :alias="alias"
-                      :column="newColumn"
-                      :nodes="nodes"
-                      :is-m-s-s-q-l="isMSSQL"
-                      :is-s-q-lite="isSQLite"
-                      @onColumnSelect="onRelColumnSelect"
-                    />
-                  </v-col>
-
-                  <v-col v-if="isSelect" cols="12">
-                    <custom-select-options
-                      v-model="newColumn.dtxp"
-                      @input="newColumn.altered = newColumn.altered || 2"
-                    />
-                  </v-col>
-
-                  <template v-if="newColumn.cn && newColumn.uidt && !isVirtual">
-                    <v-col cols="12">
-                      <v-container fluid class="wrapper">
-                        <v-row>
-                          <v-col cols="12">
-                            <div class="d-flex justify-space-between caption">
-                              <v-tooltip bottom z-index="99999">
-                                <template #activator="{on}">
-                                  <div v-on="on">
-                                    <v-checkbox
-                                      v-model="newColumn.rqd"
-                                      :disabled="newColumn.pk || !sqlUi.columnEditable(newColumn)"
-                                      class="mr-2 mt-0"
-                                      dense
-                                      hide-details
-                                      label="NN"
-                                      @input="newColumn.altered = newColumn.altered || 2"
-                                    >
-                                      <template #label>
-                                        <span class="caption font-weight-bold">NN</span>
-                                      </template>
-                                    </v-checkbox>
-                                  </div>
-                                </template>
-                                <span>Not Null</span>
-                              </v-tooltip>
-                              <v-tooltip bottom z-index="99999">
-                                <template #activator="{on}">
-                                  <div v-on="on">
-                                    <v-checkbox
-
-                                      v-model="newColumn.pk"
-                                      :disabled="!sqlUi.columnEditable(newColumn)"
-                                      class="mr-2 mt-0"
-                                      dense
-                                      hide-details
-                                      label="PK"
-                                      @input="newColumn.altered = newColumn.altered || 2"
-                                    >
-                                      <template #label>
-                                        <span class="caption font-weight-bold">PK</span>
-                                      </template>
-                                    </v-checkbox>
-                                  </div>
-                                </template>
-                                <span>Primary Key</span>
-                              </v-tooltip>
-
-                              <v-tooltip bottom z-index="99999">
-                                <template #activator="{on}">
-                                  <div v-on="on">
-                                    <v-checkbox
-                                      v-model="newColumn.ai"
-                                      :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-                                      class="mr-2 mt-0"
-                                      dense
-                                      hide-details
-                                      label="AI"
-                                      @input="newColumn.altered = newColumn.altered || 2"
-                                    >
-                                      <template #label>
-                                        <span class="caption font-weight-bold">AI</span>
-                                      </template>
-                                    </v-checkbox>
-                                  </div>
-                                </template>
-                                <span>Auto Increment</span>
-                              </v-tooltip>
-
-                              <v-tooltip bottom z-index="99999">
-                                <template #activator="{on}">
-                                  <div v-on="on">
-                                    <v-checkbox
-                                      v-model="newColumn.un"
-                                      class="mr-2 mt-0"
-                                      dense
-                                      hide-details
-                                      label="UN"
-                                      :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-                                      @input="newColumn.altered = newColumn.altered || 2"
-                                    >
-                                      <template #label>
-                                        <span class="caption font-weight-bold">UN</span>
-                                      </template>
-                                    </v-checkbox>
-                                  </div>
-                                </template>
-                                <span>Unsigned</span>
-                              </v-tooltip>
-
-                              <v-tooltip bottom z-index="99999">
-                                <template #activator="{on}">
-                                  <div v-on="on">
-                                    <v-checkbox
-                                      v-model="newColumn.au"
-                                      class="mr-2 mt-0"
-                                      dense
-                                      hide-details
-                                      label="UN"
-                                      :disabled=" sqlUi.colPropAuDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-                                      @input="newColumn.altered = newColumn.altered || 2"
-                                    >
-                                      <template #label>
-                                        <span class="caption font-weight-bold">AU</span>
-                                      </template>
-                                    </v-checkbox>
-                                  </div>
-                                </template>
-                                <span>Auto Update Timestamp</span>
-                              </v-tooltip>
-                            </div>
-                          </v-col>
-                          <v-col cols="12">
-                            <v-autocomplete
-                              v-model="newColumn.dt"
-                              hide-details
-                              class="caption data-type"
-                              label="Type in Database"
-                              dense
-                              outlined
-                              :items="dataTypes"
-                              @change="onDataTypeChange"
-                            />
-                          </v-col>
-
-                          <v-col :cols="sqlUi.showScale(newColumn) && !isSelect ? 6 : 12">
-                            <v-text-field
-                              v-if="!isSelect"
-                              v-model="newColumn.dtxp"
-                              dense
-                              :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
-                              class="caption"
-                              label="Length / Values"
-                              outlined
-                              hide-details
-                              @input="newColumn.altered = newColumn.altered || 2"
-                            />
-                          </v-col>
-                          <v-col v-if="sqlUi.showScale(newColumn)" :cols="isSelect ?12 : 6">
-                            <v-text-field
-                              v-model="newColumn.dtxs"
-                              dense
-                              :disabled=" !sqlUi.columnEditable(newColumn)"
-                              class="caption"
-                              label="Scale"
-                              outlined
-                              hide-details
-                              @input="newColumn.altered = newColumn.altered || 2"
-                            />
-                          </v-col>
-
-                          <v-col cols="12">
-                            <v-textarea
-                              v-model="newColumn.cdf"
-                              label="Default value"
-                              :hint="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
-                              persistent-hint
-                              rows="3"
-                              outlined
-                              dense
-                              class="caption"
-                              @input="newColumn.altered = newColumn.altered || 2"
-                            />
-                          </v-col>
-                        </v-row>
-                      </v-container>
-                    </v-col>
-                  </template>
-                </template>
-                <template v-else>
-                  <v-col cols="12">
-                    <formula-options
-                      ref="formula"
-                      :column="newColumn"
-                      :nodes="nodes"
-                      :meta="meta"
-                      :is-s-q-lite="isSQLite"
-                      :alias="newColumn.cn"
-                      :is-m-s-s-q-l="isMSSQL"
-                      :sql-ui="sqlUi"
-                      v-on="$listeners"
-                    />
-
-                    <!--                  <v-autocomplete
-                      label="Formula"
-                      hide-details
-                      class="caption formula-type"
-                      outlined
-                      dense
-                      :items="formulas"
-                    >
-                      <template #item="{item}">
-                        <span class="green&#45;&#45;text text&#45;&#45;darken-2 caption font-weight-regular">{{ item }}</span>
+                    More options
+                    <v-icon small>
+                      mdi-menu-{{ advanceOptions ? 'up' : 'down' }}
+                    </v-icon>
+                  </div>
+                </v-col>
+                <v-col v-show="advanceOptions || !accordion" cols="12">
+                  <v-row>
+                    <template v-if="newColumn.uidt !== 'Formula'">
+                      <v-col
+                        v-if="isLookup"
+                        cols="12"
+                      >
+                        <lookup-options
+                          ref="lookup"
+                          :column="newColumn"
+                          :nodes="nodes"
+                          :meta="meta"
+                          :is-s-q-lite="isSQLite"
+                          :alias="newColumn.cn"
+                          :is-m-s-s-q-l="isMSSQL"
+                          v-on="$listeners"
+                        />
+                      </v-col>
+                      <v-col
+                        v-if="isRollup"
+                        cols="12"
+                      >
+                        <rollup-options
+                          ref="rollup"
+                          :column="newColumn"
+                          :nodes="nodes"
+                          :meta="meta"
+                          :is-s-q-lite="isSQLite"
+                          :alias="newColumn.cn"
+                          :is-m-s-s-q-l="isMSSQL"
+                          v-on="$listeners"
+                        />
+                      </v-col>
+                      <v-col
+                        v-if="isLinkToAnotherRecord"
+                        cols="12"
+                      >
+                        <linked-to-another-options
+                          ref="relation"
+                          :column="newColumn"
+                          :nodes="nodes"
+                          :meta="meta"
+                          :is-s-q-lite="isSQLite"
+                          :alias="newColumn.cn"
+                          :is-m-s-s-q-l="isMSSQL"
+                          @onColumnSelect="onRelColumnSelect"
+                        />
+                      </v-col>
+                      <v-col
+                        v-if="isRelation"
+                        cols="12"
+                      >
+                        <relation-options
+                          ref="relation"
+                          :alias="alias"
+                          :column="newColumn"
+                          :nodes="nodes"
+                          :is-m-s-s-q-l="isMSSQL"
+                          :is-s-q-lite="isSQLite"
+                          @onColumnSelect="onRelColumnSelect"
+                        />
+                      </v-col>
+
+                      <v-col v-if="isSelect" cols="12">
+                        <custom-select-options
+                          v-model="newColumn.dtxp"
+                          @input="newColumn.altered = newColumn.altered || 2"
+                        />
+                      </v-col>
+
+                      <template v-if="newColumn.cn && newColumn.uidt && !isVirtual">
+                        <v-col cols="12">
+                          <v-container fluid class="wrapper">
+                            <v-row>
+                              <v-col cols="12">
+                                <div class="d-flex justify-space-between caption">
+                                  <v-tooltip bottom z-index="99999">
+                                    <template #activator="{on}">
+                                      <div v-on="on">
+                                        <v-checkbox
+                                          v-model="newColumn.rqd"
+                                          :disabled="newColumn.pk || !sqlUi.columnEditable(newColumn)"
+                                          class="mr-2 mt-0"
+                                          dense
+                                          hide-details
+                                          label="NN"
+                                          @input="newColumn.altered = newColumn.altered || 2"
+                                        >
+                                          <template #label>
+                                            <span class="caption font-weight-bold">NN</span>
+                                          </template>
+                                        </v-checkbox>
+                                      </div>
+                                    </template>
+                                    <span>Not Null</span>
+                                  </v-tooltip>
+                                  <v-tooltip bottom z-index="99999">
+                                    <template #activator="{on}">
+                                      <div v-on="on">
+                                        <v-checkbox
+
+                                          v-model="newColumn.pk"
+                                          :disabled="!sqlUi.columnEditable(newColumn)"
+                                          class="mr-2 mt-0"
+                                          dense
+                                          hide-details
+                                          label="PK"
+                                          @input="newColumn.altered = newColumn.altered || 2"
+                                        >
+                                          <template #label>
+                                            <span class="caption font-weight-bold">PK</span>
+                                          </template>
+                                        </v-checkbox>
+                                      </div>
+                                    </template>
+                                    <span>Primary Key</span>
+                                  </v-tooltip>
+
+                                  <v-tooltip bottom z-index="99999">
+                                    <template #activator="{on}">
+                                      <div v-on="on">
+                                        <v-checkbox
+                                          v-model="newColumn.ai"
+                                          :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
+                                          class="mr-2 mt-0"
+                                          dense
+                                          hide-details
+                                          label="AI"
+                                          @input="newColumn.altered = newColumn.altered || 2"
+                                        >
+                                          <template #label>
+                                            <span class="caption font-weight-bold">AI</span>
+                                          </template>
+                                        </v-checkbox>
+                                      </div>
+                                    </template>
+                                    <span>Auto Increment</span>
+                                  </v-tooltip>
+
+                                  <v-tooltip bottom z-index="99999">
+                                    <template #activator="{on}">
+                                      <div v-on="on">
+                                        <v-checkbox
+                                          v-model="newColumn.un"
+                                          class="mr-2 mt-0"
+                                          dense
+                                          hide-details
+                                          label="UN"
+                                          :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
+                                          @input="newColumn.altered = newColumn.altered || 2"
+                                        >
+                                          <template #label>
+                                            <span class="caption font-weight-bold">UN</span>
+                                          </template>
+                                        </v-checkbox>
+                                      </div>
+                                    </template>
+                                    <span>Unsigned</span>
+                                  </v-tooltip>
+
+                                  <v-tooltip bottom z-index="99999">
+                                    <template #activator="{on}">
+                                      <div v-on="on">
+                                        <v-checkbox
+                                          v-model="newColumn.au"
+                                          class="mr-2 mt-0"
+                                          dense
+                                          hide-details
+                                          label="UN"
+                                          :disabled=" sqlUi.colPropAuDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
+                                          @input="newColumn.altered = newColumn.altered || 2"
+                                        >
+                                          <template #label>
+                                            <span class="caption font-weight-bold">AU</span>
+                                          </template>
+                                        </v-checkbox>
+                                      </div>
+                                    </template>
+                                    <span>Auto Update Timestamp</span>
+                                  </v-tooltip>
+                                </div>
+                              </v-col>
+                              <v-col cols="12">
+                                <v-autocomplete
+                                  v-model="newColumn.dt"
+                                  hide-details
+                                  class="caption data-type"
+                                  label="Type in Database"
+                                  dense
+                                  outlined
+                                  :items="dataTypes"
+                                  @change="onDataTypeChange"
+                                />
+                              </v-col>
+
+                              <v-col :cols="sqlUi.showScale(newColumn) && !isSelect ? 6 : 12">
+                                <v-text-field
+                                  v-if="!isSelect"
+                                  v-model="newColumn.dtxp"
+                                  dense
+                                  :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
+                                  class="caption"
+                                  label="Length / Values"
+                                  outlined
+                                  hide-details
+                                  @input="newColumn.altered = newColumn.altered || 2"
+                                />
+                              </v-col>
+                              <v-col v-if="sqlUi.showScale(newColumn)" :cols="isSelect ?12 : 6">
+                                <v-text-field
+                                  v-model="newColumn.dtxs"
+                                  dense
+                                  :disabled=" !sqlUi.columnEditable(newColumn)"
+                                  class="caption"
+                                  label="Scale"
+                                  outlined
+                                  hide-details
+                                  @input="newColumn.altered = newColumn.altered || 2"
+                                />
+                              </v-col>
+
+                              <v-col cols="12">
+                                <v-textarea
+                                  v-model="newColumn.cdf"
+                                  label="Default value"
+                                  :hint="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
+                                  persistent-hint
+                                  rows="3"
+                                  outlined
+                                  dense
+                                  class="caption"
+                                  @input="newColumn.altered = newColumn.altered || 2"
+                                />
+                              </v-col>
+                            </v-row>
+                          </v-container>
+                        </v-col>
                       </template>
-                    </v-autocomplete>-->
-                  </v-col>
-                </template>
+                    </template>
+                    <template v-else>
+                      <v-col cols="12">
+                        <formula-options
+                          ref="formula"
+                          :column="newColumn"
+                          :nodes="nodes"
+                          :meta="meta"
+                          :is-s-q-lite="isSQLite"
+                          :alias="newColumn.cn"
+                          :is-m-s-s-q-l="isMSSQL"
+                          :sql-ui="sqlUi"
+                          v-on="$listeners"
+                        />
+
+                      <!--                  <v-autocomplete
+                        label="Formula"
+                        hide-details
+                        class="caption formula-type"
+                        outlined
+                        dense
+                        :items="formulas"
+                      >
+                        <template #item="{item}">
+                          <span class="green&#45;&#45;text text&#45;&#45;darken-2 caption font-weight-regular">{{ item }}</span>
+                        </template>
+                      </v-autocomplete>-->
+                      </v-col>
+                    </template>
+                  </v-row>
+                </v-col>
               </template>
 
               <div class="disabled-info" :class="{'d-none':!isEditDisabled}">
@@ -397,7 +411,7 @@
 </template>
 
 <script>
-import { uiTypes } from '../helpers/uiTypes'
+import { UITypes, uiTypes } from '../helpers/uiTypes'
 import RollupOptions from './editColumn/rollupOptions'
 import FormulaOptions from '@/components/project/spreadsheet/components/editColumn/formulaOptions'
 import LookupOptions from '@/components/project/spreadsheet/components/editColumn/lookupOptions'
@@ -430,9 +444,13 @@ export default {
   data: () => ({
     valid: false,
     relationDeleteDlg: false,
-    newColumn: {}
+    newColumn: {},
+    advanceOptions: false
   }),
   computed: {
+    accordion() {
+      return ![UITypes.LinkToAnotherRecord, UITypes.Lookup, UITypes.Rollup, UITypes.SpecificDBType].includes(this.newColumn && this.newColumn.uidt)
+    },
     uiTypes() {
       return uiTypes.filter(t => !this.editColumn || !t.virtual)
     },
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions.vue
index 805a034202..2c7ee1609b 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions.vue
@@ -13,7 +13,7 @@
           >
             <v-radio value="hm" label="Has Many" />
             <v-radio value="mm" label="Many To Many" />
-            <v-radio disabled value="oo" label="One To One" />
+            <!--            <v-radio disabled value="oo" label="One To One" />-->
           </v-radio-group>
         </v-col>
       </v-row>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
index 814cc9c925..aec58d9c62 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
@@ -34,7 +34,7 @@
               contain
               :src="item.url || item.data"
               v-on="on"
-              @click="selectImage(item.url || item.data,i)"
+              @click="selectImage(item.url || item.data, i)"
             >
               <template #placeholder>
                 <v-skeleton-loader
diff --git a/packages/nc-gui/components/project/spreadsheet/helpers/uiTypes.js b/packages/nc-gui/components/project/spreadsheet/helpers/uiTypes.js
index 6e80195caa..0df4b9f9ff 100644
--- a/packages/nc-gui/components/project/spreadsheet/helpers/uiTypes.js
+++ b/packages/nc-gui/components/project/spreadsheet/helpers/uiTypes.js
@@ -8,11 +8,11 @@ const uiTypes = [
     icon: 'mdi-link-variant',
     virtual: 1
   },
-  {
-    name: 'ForeignKey',
-    icon: 'mdi-link-variant',
-    virtual: 1
-  },
+  // {
+  //   name: 'ForeignKey',
+  //   icon: 'mdi-link-variant',
+  //   virtual: 1
+  // },
   {
     name: 'Lookup',
     icon: 'mdi-table-column-plus-before',
@@ -116,10 +116,10 @@ const uiTypes = [
     name: 'DateTime',
     icon: 'mdi-calendar-clock'
   },
-  {
-    name: 'CreateTime',
-    icon: 'mdi-calendar-clock'
-  },
+  // {
+  //   name: 'CreateTime',
+  //   icon: 'mdi-calendar-clock'
+  // },
   // {
   //   name: 'LastModifiedTime',
   //   icon: 'mdi-calendar-clock',
@@ -192,6 +192,42 @@ export default [
   'SpecificDBType'
 ]
 
+export const UITypes = {
+  ID: 'ID',
+  ForeignKey: 'ForeignKey',
+  SingleLineText: 'SingleLineText',
+  LongText: 'LongText',
+  Attachment: 'Attachment',
+  Checkbox: 'Checkbox',
+  MultiSelect: 'MultiSelect',
+  SingleSelect: 'SingleSelect',
+  Collaborator: 'Collaborator',
+  Date: 'Date',
+  Year: 'Year',
+  Time: 'Time',
+  PhoneNumber: 'PhoneNumber',
+  Email: 'Email',
+  URL: 'URL',
+  Number: 'Number',
+  Decimal: 'Decimal',
+  Currency: 'Currency',
+  Percent: 'Percent',
+  Duration: 'Duration',
+  Rating: 'Rating',
+  Formula: 'Formula',
+  Rollup: 'Rollup',
+  Count: 'Count',
+  Lookup: 'Lookup',
+  DateTime: 'DateTime',
+  CreateTime: 'CreateTime',
+  LastModifiedTime: 'LastModifiedTime',
+  AutoNumber: 'AutoNumber',
+  Barcode: 'Barcode',
+  Button: 'Button',
+  SpecificDBType: 'SpecificDBType',
+  LinkToAnotherRecord: 'LinkToAnotherRecord'
+}
+
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
  *