refactor(gui): ui improvements

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

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

@@ -104,7 +104,19 @@
                   <!--                          </v-list-item>-->
                   <!--                        </v-list>-->
                 </v-col>
-
+                <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"
+                  >
+                    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"
@@ -370,6 +382,8 @@
                       </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)
     },

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>

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

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
  *