From ce7ff76e943858b76bba6f938355e8ae06b84513 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 6 Jul 2022 10:52:05 +0530
Subject: [PATCH 1/3] fix/Fixed dark mode styling bug with edit column and
 styling issues with toggle comments button

---
 .../spreadsheet/components/EditColumn.vue     | 277 +++++++++---------
 .../spreadsheet/components/ExpandedForm.vue   |   9 +-
 2 files changed, 151 insertions(+), 135 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
index 55d08f07f0..b5db4942db 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
@@ -46,9 +46,13 @@
             <v-row>
               <v-col v-if="relation" cols="12">
                 <div class="caption">
-                  <p class="mb-1">Foreign Key</p>
+                  <p class="mb-1">
+                    Foreign Key
+                  </p>
 
-                  <v-icon small class="mt-n1"> mdi-table </v-icon>
+                  <v-icon small class="mt-n1">
+                    mdi-table
+                  </v-icon>
                   <span class="text-capitalize font-weight-bold body-1"> {{ relation._rtn }}</span>
                   <v-icon
                     v-ge="['columns', 'fk-delete']"
@@ -71,7 +75,7 @@
                     item-value="name"
                     item-text="name"
                     class="caption ui-type nc-ui-dt-dropdown"
-                    :class="{ 'primary lighten-5': newColumn.uidt }"
+                    :class="{ 'primary lighten-5': newColumn.uidt && !isDark }"
                     :label="$t('labels.columnType')"
                     dense
                     outlined
@@ -80,10 +84,15 @@
                   >
                     <template #selection="{ item }">
                       <div>
-                        <v-icon color="grey darken-4" small class="mr-1">
+                        <v-icon color="isDark? 'white'? 'grey darken-4'" small class="mr-1">
                           {{ item.icon }}
                         </v-icon>
-                        <span class="caption grey--text text--darken-4"> {{ item.name }}</span>
+                        <span
+                          class="caption"
+                          :class="{ 'grey--text text--darken-4': !isDark }"
+                        >
+                          {{ item.name }}
+                        </span>
                       </div>
                     </template>
 
@@ -120,7 +129,9 @@
                     outlined
                   >
                     <template #prepend>
-                      <v-icon small class="mx-2" color="warning"> mdi-alert-outline </v-icon>
+                      <v-icon small class="mx-2" color="warning">
+                        mdi-alert-outline
+                      </v-icon>
                     </template>
                     Changing MultiSelect to SingleSelect can lead to errors when there are multiple values associated
                     with a cell
@@ -145,7 +156,9 @@
                     @click="advanceOptions = !advanceOptions"
                   >
                     {{ advanceOptions ? $t('general.hideAll') : $t('general.showMore') }}
-                    <v-icon x-small color="grey"> mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline </v-icon>
+                    <v-icon x-small color="grey">
+                      mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline
+                    </v-icon>
                   </div>
                 </v-col>
 
@@ -420,7 +433,7 @@
 
               <div class="disabled-info" :class="{ 'd-none': !isEditDisabled }">
                 <v-alert dense type="warning" icon="info" class="caption mx-2" outlined>
-                  This spreadsheet is connected to an SQLite DB.<br />
+                  This spreadsheet is connected to an SQLite DB.<br>
                   For production please see
                   <a href="https://github.com/nocodb/nocodb#production-setup" target="_blank">here</a>.
                 </v-alert>
@@ -452,23 +465,23 @@
 </template>
 
 <script>
-import { MssqlUi, SqliteUi } from 'nocodb-sdk';
-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';
-import CustomSelectOptions from '~/components/project/spreadsheet/components/editColumn/CustomSelectOptions';
-import RelationOptions from '~/components/project/spreadsheet/components/editColumn/RelationOptions';
-import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel';
-import LinkedToAnotherOptions from '~/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions';
-import { validateColumnName } from '~/helpers';
-import RatingOptions from '~/components/project/spreadsheet/components/editColumn/RatingOptions';
-import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/CheckboxOptions';
-import CurrencyOptions from '@/components/project/spreadsheet/components/editColumn/CurrencyOptions';
-import DurationOptions from '@/components/project/spreadsheet/components/editColumn/DurationOptions';
-import DateOptions from '@/components/project/spreadsheet/components/editColumn/DateOptions';
-
-const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber];
+import { MssqlUi, SqliteUi } from 'nocodb-sdk'
+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'
+import CustomSelectOptions from '~/components/project/spreadsheet/components/editColumn/CustomSelectOptions'
+import RelationOptions from '~/components/project/spreadsheet/components/editColumn/RelationOptions'
+import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
+import LinkedToAnotherOptions from '~/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions'
+import { validateColumnName } from '~/helpers'
+import RatingOptions from '~/components/project/spreadsheet/components/editColumn/RatingOptions'
+import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/CheckboxOptions'
+import CurrencyOptions from '@/components/project/spreadsheet/components/editColumn/CurrencyOptions'
+import DurationOptions from '@/components/project/spreadsheet/components/editColumn/DurationOptions'
+import DateOptions from '@/components/project/spreadsheet/components/editColumn/DateOptions'
+
+const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
 export default {
   name: 'EditColumn',
@@ -484,7 +497,7 @@ export default {
     CustomSelectOptions,
     CurrencyOptions,
     DurationOptions,
-    DateOptions,
+    DateOptions
   },
   props: {
     nodes: Object,
@@ -493,7 +506,7 @@ export default {
     editColumn: Boolean,
     column: Object,
     columnIndex: Number,
-    value: Boolean,
+    value: Boolean
   },
   data: () => ({
     columnToValidate,
@@ -504,12 +517,12 @@ export default {
     idType: null,
     idTypes: [
       { value: 'AI', text: 'Auto increment number' },
-      { value: 'AG', text: 'Auto generated string' },
-    ],
+      { value: 'AG', text: 'Auto generated string' }
+    ]
   }),
   computed: {
     isIDCol() {
-      return this.column && this.column.uidt === UITypes.ID;
+      return this.column && this.column.uidt === UITypes.ID
     },
     accordion() {
       return ![
@@ -518,8 +531,8 @@ export default {
         UITypes.Rollup,
         UITypes.SpecificDBType,
         UITypes.Formula,
-        UITypes.Duration,
-      ].includes(this.newColumn && this.newColumn.uidt);
+        UITypes.Duration
+      ].includes(this.newColumn && this.newColumn.uidt)
     },
     uiTypes() {
       return [
@@ -528,44 +541,44 @@ export default {
           ? [
               {
                 name: 'ID',
-                icon: 'mdi-identifier',
-              },
+                icon: 'mdi-identifier'
+              }
             ]
-          : []),
-      ];
+          : [])
+      ]
     },
     isEditDisabled() {
-      return this.editColumn && this.sqlUi === SqliteUi && this.column.uidt !== UITypes.Duration;
+      return this.editColumn && this.sqlUi === SqliteUi && this.column.uidt !== UITypes.Duration
     },
     isSQLite() {
-      return this.sqlUi === SqliteUi;
+      return this.sqlUi === SqliteUi
     },
     isMSSQL() {
-      return this.sqlUi === MssqlUi;
+      return this.sqlUi === MssqlUi
     },
     dataTypes() {
-      return this.sqlUi.getDataTypeListForUiType(this.newColumn, this.idType);
+      return this.sqlUi.getDataTypeListForUiType(this.newColumn, this.idType)
     },
     isSelect() {
-      return this.newColumn && (this.newColumn.uidt === 'MultiSelect' || this.newColumn.uidt === 'SingleSelect');
+      return this.newColumn && (this.newColumn.uidt === 'MultiSelect' || this.newColumn.uidt === 'SingleSelect')
     },
     isRelation() {
-      return this.newColumn && this.newColumn.uidt === 'ForeignKey';
+      return this.newColumn && this.newColumn.uidt === 'ForeignKey'
     },
     isLinkToAnotherRecord() {
-      return this.newColumn && this.newColumn.uidt === 'LinkToAnotherRecord';
+      return this.newColumn && this.newColumn.uidt === 'LinkToAnotherRecord'
     },
     isLookup() {
-      return this.newColumn && this.newColumn.uidt === 'Lookup';
+      return this.newColumn && this.newColumn.uidt === 'Lookup'
     },
     isRating() {
-      return this.newColumn && this.newColumn.uidt === UITypes.Rating;
+      return this.newColumn && this.newColumn.uidt === UITypes.Rating
     },
     isCheckbox() {
-      return this.newColumn && this.newColumn.uidt === UITypes.Checkbox;
+      return this.newColumn && this.newColumn.uidt === UITypes.Checkbox
     },
     isRollup() {
-      return this.newColumn && this.newColumn.uidt === 'Rollup';
+      return this.newColumn && this.newColumn.uidt === 'Rollup'
     },
     relation() {
       return (
@@ -573,138 +586,138 @@ export default {
         this.column &&
         this.meta.belongsTo &&
         this.meta.belongsTo.find(bt => bt.column_name === this.column.column_name)
-      );
+      )
     },
     isVirtual() {
-      return this.isLinkToAnotherRecord || this.isLookup || this.isRollup;
+      return this.isLinkToAnotherRecord || this.isLookup || this.isRollup
     },
     isCurrency() {
-      return this.newColumn && this.newColumn.uidt === UITypes.Currency;
+      return this.newColumn && this.newColumn.uidt === UITypes.Currency
     },
     isDate() {
-      return this.newColumn && this.newColumn.uidt === UITypes.Date;
-    },
+      return this.newColumn && this.newColumn.uidt === UITypes.Date
+    }
   },
   watch: {
     column() {
-      this.genColumnData();
-    },
+      this.genColumnData()
+    }
   },
   async created() {
-    this.genColumnData();
+    this.genColumnData()
   },
   mounted() {
-    this.focusInput();
+    this.focusInput()
   },
   methods: {
     validateColumnName(v) {
-      return validateColumnName(v, this.$store.getters['project/GtrProjectIsGraphql']);
+      return validateColumnName(v, this.$store.getters['project/GtrProjectIsGraphql'])
     },
     onRelColumnSelect(colMeta) {
       Object.assign(this.newColumn, {
         dt: colMeta.dt,
         dtxp: colMeta.dtxp,
         dtxs: colMeta.dtxs,
-        un: colMeta.un,
-      });
+        un: colMeta.un
+      })
     },
     genColumnData() {
       this.newColumn = this.column
         ? { ...this.column }
-        : this.sqlUi.getNewColumn([...this.meta.columns, ...(this.meta.v || [])].length + 1);
-      this.newColumn.cno = this.newColumn.column_name;
+        : this.sqlUi.getNewColumn([...this.meta.columns, ...(this.meta.v || [])].length + 1)
+      this.newColumn.cno = this.newColumn.column_name
     },
     close() {
-      this.$emit('close');
-      this.newColumn = {};
+      this.$emit('close')
+      this.newColumn = {}
     },
     async save() {
       if (!this.$refs.form.validate()) {
-        return;
+        return
       }
       try {
         if (this.newColumn.uidt === 'Formula') {
-          await this.$refs.formula.save();
-          return this.$emit('saved');
+          await this.$refs.formula.save()
+          return this.$emit('saved')
           // return this.$toast.info('Coming Soon...').goAway(3000)
         }
 
         if (this.isLinkToAnotherRecord && this.$refs.relation) {
-          await this.$refs.relation.saveRelation();
-          return this.$emit('saved');
+          await this.$refs.relation.saveRelation()
+          return this.$emit('saved')
         }
         if (this.isLookup && this.$refs.lookup) {
-          return await this.$refs.lookup.save();
+          return await this.$refs.lookup.save()
         }
         if (this.isRollup && this.$refs.rollup) {
-          return await this.$refs.rollup.save();
+          return await this.$refs.rollup.save()
         }
         if (this.newColumn.uidt === 'Formula' && this.$refs.formula) {
-          return await this.$refs.formula.save();
+          return await this.$refs.formula.save()
         }
 
-        this.newColumn.table_name = this.nodes.table_name;
-        this.newColumn.title = this.newColumn.column_name;
+        this.newColumn.table_name = this.nodes.table_name
+        this.newColumn.title = this.newColumn.column_name
 
         if (this.editColumn) {
-          await this.$api.dbTableColumn.update(this.column.id, this.newColumn);
+          await this.$api.dbTableColumn.update(this.column.id, this.newColumn)
         } else {
           if (this.newColumn.uidt === UITypes.ID) {
             // based on id column type set autogenerated meta prop
             if (this.isAutoGenId) {
               this.newColumn.meta = {
-                ag: 'nc',
-              };
+                ag: 'nc'
+              }
             }
           }
-          await this.$api.dbTableColumn.create(this.meta.id, this.newColumn);
+          await this.$api.dbTableColumn.create(this.meta.id, this.newColumn)
         }
 
-        this.$emit('saved', this.newColumn.title, this.editColumn ? this.meta.columns[this.columnIndex].title : null);
+        this.$emit('saved', this.newColumn.title, this.editColumn ? this.meta.columns[this.columnIndex].title : null)
       } catch (e) {
-        console.log(e);
-        this.$toast.error('Failed to save column: ' + e).goAway(3000);
-        throw e;
+        console.log(e)
+        this.$toast.error('Failed to save column: ' + e).goAway(3000)
+        throw e
       }
 
-      this.$emit('close');
+      this.$emit('close')
 
-      this.$e('a:column:add', { datatype: this.newColumn.uidt });
+      this.$e('a:column:add', { datatype: this.newColumn.uidt })
     },
     onDataTypeChange() {
-      this.newColumn.rqd = false;
+      this.newColumn.rqd = false
       if (this.newColumn.uidt !== UITypes.ID) {
-        this.newColumn.primaryKey = false;
+        this.newColumn.primaryKey = false
       }
-      this.newColumn.ai = false;
-      this.newColumn.cdf = null;
-      this.newColumn.un = false;
-      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt);
-      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt);
+      this.newColumn.ai = false
+      this.newColumn.cdf = null
+      this.newColumn.un = false
+      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt)
+      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt)
 
-      this.newColumn.dtx = 'specificType';
+      this.newColumn.dtx = 'specificType'
 
-      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect];
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
       if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) {
-        this.newColumn.dtxp = this.column.dtxp;
+        this.newColumn.dtxp = this.column.dtxp
       }
 
       if (this.isCurrency) {
         if (this.column?.uidt === UITypes.Currency) {
-          this.newColumn.dtxp = this.column.dtxp;
-          this.newColumn.dtxs = this.column.dtxs;
+          this.newColumn.dtxp = this.column.dtxp
+          this.newColumn.dtxs = this.column.dtxs
         } else {
-          this.newColumn.dtxp = 19;
-          this.newColumn.dtxs = 2;
+          this.newColumn.dtxp = 19
+          this.newColumn.dtxs = 2
         }
       }
 
       // this.$set(this.newColumn, 'uidt', this.sqlUi.getUIType(this.newColumn));
 
-      this.newColumn.altered = this.newColumn.altered || 2;
+      this.newColumn.altered = this.newColumn.altered || 2
     },
     onUiOrIdTypeChange() {
-      const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn, this.idType);
+      const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn, this.idType)
       this.newColumn = {
         ...this.newColumn,
         meta: null,
@@ -714,77 +727,77 @@ export default {
         cdf: null,
         un: false,
         dtx: 'specificType',
-        ...colProp,
-      };
+        ...colProp
+      }
 
-      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt);
-      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt);
+      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt)
+      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt)
 
-      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect];
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
       if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) {
-        this.newColumn.dtxp = this.column.dtxp;
+        this.newColumn.dtxp = this.column.dtxp
       }
 
       if (columnToValidate.includes(this.newColumn.uidt)) {
         this.newColumn.meta = {
-          validate: this.newColumn.meta && this.newColumn.meta.validate,
-        };
+          validate: this.newColumn.meta && this.newColumn.meta.validate
+        }
       }
 
       if (this.isCurrency) {
         if (this.column?.uidt === UITypes.Currency) {
-          this.newColumn.dtxp = this.column.dtxp;
-          this.newColumn.dtxs = this.column.dtxs;
+          this.newColumn.dtxp = this.column.dtxp
+          this.newColumn.dtxs = this.column.dtxs
         } else {
-          this.newColumn.dtxp = 19;
-          this.newColumn.dtxs = 2;
+          this.newColumn.dtxp = 19
+          this.newColumn.dtxs = 2
         }
       }
 
-      this.newColumn.altered = this.newColumn.altered || 2;
+      this.newColumn.altered = this.newColumn.altered || 2
     },
     focusInput() {
       setTimeout(() => {
         if (this.$refs.column && this.$refs.column.$el) {
-          const el = this.$refs.column.$el.querySelector('input');
-          el.focus();
-          el.select();
+          const el = this.$refs.column.$el.querySelector('input')
+          el.focus()
+          el.select()
         }
-      }, 100);
+      }, 100)
     },
     async deleteRelation(action = '', column) {
       try {
         if (action === 'showDialog') {
-          this.relationDeleteDlg = true;
+          this.relationDeleteDlg = true
         } else if (action === 'hideDialog') {
-          this.relationDeleteDlg = false;
+          this.relationDeleteDlg = false
         } else {
           const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
             {
               env: this.nodes.env,
-              dbAlias: this.nodes.dbAlias,
+              dbAlias: this.nodes.dbAlias
             },
             this.relation.type === 'virtual' ? 'xcVirtualRelationDelete' : 'relationDelete',
             {
               childColumn: this.relation.column_name,
               childTable: this.nodes.table_name,
               parentTable: this.relation.rtn,
-              parentColumn: this.relation.rcn,
-            },
-          ]);
-          this.relationDeleteDlg = false;
-          this.relation = null;
-          this.$toast.success('Foreign Key deleted successfully').goAway(3000);
-          this.$emit('onRelationDelete');
+              parentColumn: this.relation.rcn
+            }
+          ])
+          this.relationDeleteDlg = false
+          this.relation = null
+          this.$toast.success('Foreign Key deleted successfully').goAway(3000)
+          this.$emit('onRelationDelete')
         }
       } catch (e) {
-        console.log(e);
-        this.$toast.error('Foreign key relation delete failed' + e).goAway(3000);
-        throw e;
+        console.log(e)
+        this.$toast.error('Foreign key relation delete failed' + e).goAway(3000)
+        throw e
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue b/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
index d47094331f..c7ba552753 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card width="1000" max-width="100%">
     <v-toolbar height="55" class="elevation-1">
-      <div class="d-100 d-flex">
+      <div class="header d-100 d-flex">
         <h5 class="title text-center">
           <v-icon :color="iconColor"> mdi-table-arrow-right </v-icon>
 
@@ -17,10 +17,9 @@
         <v-btn small text @click="reload">
           <v-icon small> mdi-reload </v-icon>
         </v-btn>
-
         <x-icon
           v-if="!isNew && _isUIAllowed('rowComments')"
-          icon-class="mr-2"
+          icon-class="ml-1 mr-2 px-1 py-1"
           tooltip="Toggle comments"
           small
           text
@@ -671,6 +670,10 @@ h5 {
   background: var(--v-backgroundColorDefault-base);
 }
 
+.header {
+  display: flex;
+  align-items: center;
+}
 .nc-chip {
   padding: 8px;
   border-radius: 8px;

From 56901319b74b09a6e9be63334e854e7a920166b4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 6 Jul 2022 17:28:36 +0530
Subject: [PATCH 2/3] fix/Fixed duration option and rating option styles

---
 .../components/editColumn/DurationOptions.vue | 26 ++++++++++---------
 .../components/editColumn/RatingOptions.vue   |  1 +
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue
index 7d53c118f5..08239ee857 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue
@@ -1,6 +1,8 @@
 <template>
   <v-row class="duration-wrapper">
-    <div class="caption">A duration of time in minutes or seconds (e.g. 1:23).</div>
+    <div class="caption">
+      A duration of time in minutes or seconds (e.g. 1:23).
+    </div>
     <!-- TODO: i18n -->
     <v-autocomplete
       v-model="colMeta.duration"
@@ -15,7 +17,7 @@
     >
       <template #selection="{ item }">
         <div>
-          <span class="caption grey--text text--darken-4">
+          <span class="caption" color="text">
             {{ item.title }}
           </span>
         </div>
@@ -30,7 +32,7 @@
 </template>
 
 <script>
-import { durationOptions } from '~/helpers/durationHelper';
+import { durationOptions } from '~/helpers/durationHelper'
 
 export default {
   name: 'DurationOptions',
@@ -39,24 +41,24 @@ export default {
     durationOptionList: durationOptions.map(o => ({
       ...o,
       // h:mm:ss (e.g. 3:45, 1:23:40)
-      title: `${o.title} ${o.example}`,
+      title: `${o.title} ${o.example}`
     })),
     colMeta: {
-      duration: 0,
-    },
+      duration: 0
+    }
   }),
   watch: {
     value() {
-      this.colMeta = this.value || {};
+      this.colMeta = this.value || {}
     },
     colMeta(v) {
-      this.$emit('input', v);
-    },
+      this.$emit('input', v)
+    }
   },
   created() {
-    this.colMeta = this.value ? { ...this.value } : { ...this.colMeta };
-  },
-};
+    this.colMeta = this.value ? { ...this.value } : { ...this.colMeta }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue
index 4a63e64a1d..3c6f977f05 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue
@@ -42,6 +42,7 @@
     <color-picker
       v-model="colMeta.color"
       row-size="8"
+      class="backgroundColorDefault"
       :colors="['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']"
     />
   </div>

From 86587ac73c3820b6ea2879fa5649c8cd5e5241b7 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 7 Jul 2022 10:00:38 +0530
Subject: [PATCH 3/3] fix/formatting fix

---
 .../spreadsheet/components/EditColumn.vue     | 271 +++++++++---------
 .../components/editColumn/DurationOptions.vue |  24 +-
 2 files changed, 141 insertions(+), 154 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
index b5db4942db..94969896ed 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
@@ -46,13 +46,9 @@
             <v-row>
               <v-col v-if="relation" cols="12">
                 <div class="caption">
-                  <p class="mb-1">
-                    Foreign Key
-                  </p>
+                  <p class="mb-1">Foreign Key</p>
 
-                  <v-icon small class="mt-n1">
-                    mdi-table
-                  </v-icon>
+                  <v-icon small class="mt-n1"> mdi-table </v-icon>
                   <span class="text-capitalize font-weight-bold body-1"> {{ relation._rtn }}</span>
                   <v-icon
                     v-ge="['columns', 'fk-delete']"
@@ -87,10 +83,7 @@
                         <v-icon color="isDark? 'white'? 'grey darken-4'" small class="mr-1">
                           {{ item.icon }}
                         </v-icon>
-                        <span
-                          class="caption"
-                          :class="{ 'grey--text text--darken-4': !isDark }"
-                        >
+                        <span class="caption" :class="{ 'grey--text text--darken-4': !isDark }">
                           {{ item.name }}
                         </span>
                       </div>
@@ -129,9 +122,7 @@
                     outlined
                   >
                     <template #prepend>
-                      <v-icon small class="mx-2" color="warning">
-                        mdi-alert-outline
-                      </v-icon>
+                      <v-icon small class="mx-2" color="warning"> mdi-alert-outline </v-icon>
                     </template>
                     Changing MultiSelect to SingleSelect can lead to errors when there are multiple values associated
                     with a cell
@@ -156,9 +147,7 @@
                     @click="advanceOptions = !advanceOptions"
                   >
                     {{ advanceOptions ? $t('general.hideAll') : $t('general.showMore') }}
-                    <v-icon x-small color="grey">
-                      mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline
-                    </v-icon>
+                    <v-icon x-small color="grey"> mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline </v-icon>
                   </div>
                 </v-col>
 
@@ -433,7 +422,7 @@
 
               <div class="disabled-info" :class="{ 'd-none': !isEditDisabled }">
                 <v-alert dense type="warning" icon="info" class="caption mx-2" outlined>
-                  This spreadsheet is connected to an SQLite DB.<br>
+                  This spreadsheet is connected to an SQLite DB.<br />
                   For production please see
                   <a href="https://github.com/nocodb/nocodb#production-setup" target="_blank">here</a>.
                 </v-alert>
@@ -465,23 +454,23 @@
 </template>
 
 <script>
-import { MssqlUi, SqliteUi } from 'nocodb-sdk'
-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'
-import CustomSelectOptions from '~/components/project/spreadsheet/components/editColumn/CustomSelectOptions'
-import RelationOptions from '~/components/project/spreadsheet/components/editColumn/RelationOptions'
-import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
-import LinkedToAnotherOptions from '~/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions'
-import { validateColumnName } from '~/helpers'
-import RatingOptions from '~/components/project/spreadsheet/components/editColumn/RatingOptions'
-import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/CheckboxOptions'
-import CurrencyOptions from '@/components/project/spreadsheet/components/editColumn/CurrencyOptions'
-import DurationOptions from '@/components/project/spreadsheet/components/editColumn/DurationOptions'
-import DateOptions from '@/components/project/spreadsheet/components/editColumn/DateOptions'
-
-const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
+import { MssqlUi, SqliteUi } from 'nocodb-sdk';
+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';
+import CustomSelectOptions from '~/components/project/spreadsheet/components/editColumn/CustomSelectOptions';
+import RelationOptions from '~/components/project/spreadsheet/components/editColumn/RelationOptions';
+import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel';
+import LinkedToAnotherOptions from '~/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions';
+import { validateColumnName } from '~/helpers';
+import RatingOptions from '~/components/project/spreadsheet/components/editColumn/RatingOptions';
+import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/CheckboxOptions';
+import CurrencyOptions from '@/components/project/spreadsheet/components/editColumn/CurrencyOptions';
+import DurationOptions from '@/components/project/spreadsheet/components/editColumn/DurationOptions';
+import DateOptions from '@/components/project/spreadsheet/components/editColumn/DateOptions';
+
+const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber];
 
 export default {
   name: 'EditColumn',
@@ -497,7 +486,7 @@ export default {
     CustomSelectOptions,
     CurrencyOptions,
     DurationOptions,
-    DateOptions
+    DateOptions,
   },
   props: {
     nodes: Object,
@@ -506,7 +495,7 @@ export default {
     editColumn: Boolean,
     column: Object,
     columnIndex: Number,
-    value: Boolean
+    value: Boolean,
   },
   data: () => ({
     columnToValidate,
@@ -517,12 +506,12 @@ export default {
     idType: null,
     idTypes: [
       { value: 'AI', text: 'Auto increment number' },
-      { value: 'AG', text: 'Auto generated string' }
-    ]
+      { value: 'AG', text: 'Auto generated string' },
+    ],
   }),
   computed: {
     isIDCol() {
-      return this.column && this.column.uidt === UITypes.ID
+      return this.column && this.column.uidt === UITypes.ID;
     },
     accordion() {
       return ![
@@ -531,8 +520,8 @@ export default {
         UITypes.Rollup,
         UITypes.SpecificDBType,
         UITypes.Formula,
-        UITypes.Duration
-      ].includes(this.newColumn && this.newColumn.uidt)
+        UITypes.Duration,
+      ].includes(this.newColumn && this.newColumn.uidt);
     },
     uiTypes() {
       return [
@@ -541,44 +530,44 @@ export default {
           ? [
               {
                 name: 'ID',
-                icon: 'mdi-identifier'
-              }
+                icon: 'mdi-identifier',
+              },
             ]
-          : [])
-      ]
+          : []),
+      ];
     },
     isEditDisabled() {
-      return this.editColumn && this.sqlUi === SqliteUi && this.column.uidt !== UITypes.Duration
+      return this.editColumn && this.sqlUi === SqliteUi && this.column.uidt !== UITypes.Duration;
     },
     isSQLite() {
-      return this.sqlUi === SqliteUi
+      return this.sqlUi === SqliteUi;
     },
     isMSSQL() {
-      return this.sqlUi === MssqlUi
+      return this.sqlUi === MssqlUi;
     },
     dataTypes() {
-      return this.sqlUi.getDataTypeListForUiType(this.newColumn, this.idType)
+      return this.sqlUi.getDataTypeListForUiType(this.newColumn, this.idType);
     },
     isSelect() {
-      return this.newColumn && (this.newColumn.uidt === 'MultiSelect' || this.newColumn.uidt === 'SingleSelect')
+      return this.newColumn && (this.newColumn.uidt === 'MultiSelect' || this.newColumn.uidt === 'SingleSelect');
     },
     isRelation() {
-      return this.newColumn && this.newColumn.uidt === 'ForeignKey'
+      return this.newColumn && this.newColumn.uidt === 'ForeignKey';
     },
     isLinkToAnotherRecord() {
-      return this.newColumn && this.newColumn.uidt === 'LinkToAnotherRecord'
+      return this.newColumn && this.newColumn.uidt === 'LinkToAnotherRecord';
     },
     isLookup() {
-      return this.newColumn && this.newColumn.uidt === 'Lookup'
+      return this.newColumn && this.newColumn.uidt === 'Lookup';
     },
     isRating() {
-      return this.newColumn && this.newColumn.uidt === UITypes.Rating
+      return this.newColumn && this.newColumn.uidt === UITypes.Rating;
     },
     isCheckbox() {
-      return this.newColumn && this.newColumn.uidt === UITypes.Checkbox
+      return this.newColumn && this.newColumn.uidt === UITypes.Checkbox;
     },
     isRollup() {
-      return this.newColumn && this.newColumn.uidt === 'Rollup'
+      return this.newColumn && this.newColumn.uidt === 'Rollup';
     },
     relation() {
       return (
@@ -586,138 +575,138 @@ export default {
         this.column &&
         this.meta.belongsTo &&
         this.meta.belongsTo.find(bt => bt.column_name === this.column.column_name)
-      )
+      );
     },
     isVirtual() {
-      return this.isLinkToAnotherRecord || this.isLookup || this.isRollup
+      return this.isLinkToAnotherRecord || this.isLookup || this.isRollup;
     },
     isCurrency() {
-      return this.newColumn && this.newColumn.uidt === UITypes.Currency
+      return this.newColumn && this.newColumn.uidt === UITypes.Currency;
     },
     isDate() {
-      return this.newColumn && this.newColumn.uidt === UITypes.Date
-    }
+      return this.newColumn && this.newColumn.uidt === UITypes.Date;
+    },
   },
   watch: {
     column() {
-      this.genColumnData()
-    }
+      this.genColumnData();
+    },
   },
   async created() {
-    this.genColumnData()
+    this.genColumnData();
   },
   mounted() {
-    this.focusInput()
+    this.focusInput();
   },
   methods: {
     validateColumnName(v) {
-      return validateColumnName(v, this.$store.getters['project/GtrProjectIsGraphql'])
+      return validateColumnName(v, this.$store.getters['project/GtrProjectIsGraphql']);
     },
     onRelColumnSelect(colMeta) {
       Object.assign(this.newColumn, {
         dt: colMeta.dt,
         dtxp: colMeta.dtxp,
         dtxs: colMeta.dtxs,
-        un: colMeta.un
-      })
+        un: colMeta.un,
+      });
     },
     genColumnData() {
       this.newColumn = this.column
         ? { ...this.column }
-        : this.sqlUi.getNewColumn([...this.meta.columns, ...(this.meta.v || [])].length + 1)
-      this.newColumn.cno = this.newColumn.column_name
+        : this.sqlUi.getNewColumn([...this.meta.columns, ...(this.meta.v || [])].length + 1);
+      this.newColumn.cno = this.newColumn.column_name;
     },
     close() {
-      this.$emit('close')
-      this.newColumn = {}
+      this.$emit('close');
+      this.newColumn = {};
     },
     async save() {
       if (!this.$refs.form.validate()) {
-        return
+        return;
       }
       try {
         if (this.newColumn.uidt === 'Formula') {
-          await this.$refs.formula.save()
-          return this.$emit('saved')
+          await this.$refs.formula.save();
+          return this.$emit('saved');
           // return this.$toast.info('Coming Soon...').goAway(3000)
         }
 
         if (this.isLinkToAnotherRecord && this.$refs.relation) {
-          await this.$refs.relation.saveRelation()
-          return this.$emit('saved')
+          await this.$refs.relation.saveRelation();
+          return this.$emit('saved');
         }
         if (this.isLookup && this.$refs.lookup) {
-          return await this.$refs.lookup.save()
+          return await this.$refs.lookup.save();
         }
         if (this.isRollup && this.$refs.rollup) {
-          return await this.$refs.rollup.save()
+          return await this.$refs.rollup.save();
         }
         if (this.newColumn.uidt === 'Formula' && this.$refs.formula) {
-          return await this.$refs.formula.save()
+          return await this.$refs.formula.save();
         }
 
-        this.newColumn.table_name = this.nodes.table_name
-        this.newColumn.title = this.newColumn.column_name
+        this.newColumn.table_name = this.nodes.table_name;
+        this.newColumn.title = this.newColumn.column_name;
 
         if (this.editColumn) {
-          await this.$api.dbTableColumn.update(this.column.id, this.newColumn)
+          await this.$api.dbTableColumn.update(this.column.id, this.newColumn);
         } else {
           if (this.newColumn.uidt === UITypes.ID) {
             // based on id column type set autogenerated meta prop
             if (this.isAutoGenId) {
               this.newColumn.meta = {
-                ag: 'nc'
-              }
+                ag: 'nc',
+              };
             }
           }
-          await this.$api.dbTableColumn.create(this.meta.id, this.newColumn)
+          await this.$api.dbTableColumn.create(this.meta.id, this.newColumn);
         }
 
-        this.$emit('saved', this.newColumn.title, this.editColumn ? this.meta.columns[this.columnIndex].title : null)
+        this.$emit('saved', this.newColumn.title, this.editColumn ? this.meta.columns[this.columnIndex].title : null);
       } catch (e) {
-        console.log(e)
-        this.$toast.error('Failed to save column: ' + e).goAway(3000)
-        throw e
+        console.log(e);
+        this.$toast.error('Failed to save column: ' + e).goAway(3000);
+        throw e;
       }
 
-      this.$emit('close')
+      this.$emit('close');
 
-      this.$e('a:column:add', { datatype: this.newColumn.uidt })
+      this.$e('a:column:add', { datatype: this.newColumn.uidt });
     },
     onDataTypeChange() {
-      this.newColumn.rqd = false
+      this.newColumn.rqd = false;
       if (this.newColumn.uidt !== UITypes.ID) {
-        this.newColumn.primaryKey = false
+        this.newColumn.primaryKey = false;
       }
-      this.newColumn.ai = false
-      this.newColumn.cdf = null
-      this.newColumn.un = false
-      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt)
-      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt)
+      this.newColumn.ai = false;
+      this.newColumn.cdf = null;
+      this.newColumn.un = false;
+      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt);
+      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt);
 
-      this.newColumn.dtx = 'specificType'
+      this.newColumn.dtx = 'specificType';
 
-      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect];
       if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) {
-        this.newColumn.dtxp = this.column.dtxp
+        this.newColumn.dtxp = this.column.dtxp;
       }
 
       if (this.isCurrency) {
         if (this.column?.uidt === UITypes.Currency) {
-          this.newColumn.dtxp = this.column.dtxp
-          this.newColumn.dtxs = this.column.dtxs
+          this.newColumn.dtxp = this.column.dtxp;
+          this.newColumn.dtxs = this.column.dtxs;
         } else {
-          this.newColumn.dtxp = 19
-          this.newColumn.dtxs = 2
+          this.newColumn.dtxp = 19;
+          this.newColumn.dtxs = 2;
         }
       }
 
       // this.$set(this.newColumn, 'uidt', this.sqlUi.getUIType(this.newColumn));
 
-      this.newColumn.altered = this.newColumn.altered || 2
+      this.newColumn.altered = this.newColumn.altered || 2;
     },
     onUiOrIdTypeChange() {
-      const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn, this.idType)
+      const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn, this.idType);
       this.newColumn = {
         ...this.newColumn,
         meta: null,
@@ -727,77 +716,77 @@ export default {
         cdf: null,
         un: false,
         dtx: 'specificType',
-        ...colProp
-      }
+        ...colProp,
+      };
 
-      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt)
-      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt)
+      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt);
+      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt);
 
-      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect];
       if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) {
-        this.newColumn.dtxp = this.column.dtxp
+        this.newColumn.dtxp = this.column.dtxp;
       }
 
       if (columnToValidate.includes(this.newColumn.uidt)) {
         this.newColumn.meta = {
-          validate: this.newColumn.meta && this.newColumn.meta.validate
-        }
+          validate: this.newColumn.meta && this.newColumn.meta.validate,
+        };
       }
 
       if (this.isCurrency) {
         if (this.column?.uidt === UITypes.Currency) {
-          this.newColumn.dtxp = this.column.dtxp
-          this.newColumn.dtxs = this.column.dtxs
+          this.newColumn.dtxp = this.column.dtxp;
+          this.newColumn.dtxs = this.column.dtxs;
         } else {
-          this.newColumn.dtxp = 19
-          this.newColumn.dtxs = 2
+          this.newColumn.dtxp = 19;
+          this.newColumn.dtxs = 2;
         }
       }
 
-      this.newColumn.altered = this.newColumn.altered || 2
+      this.newColumn.altered = this.newColumn.altered || 2;
     },
     focusInput() {
       setTimeout(() => {
         if (this.$refs.column && this.$refs.column.$el) {
-          const el = this.$refs.column.$el.querySelector('input')
-          el.focus()
-          el.select()
+          const el = this.$refs.column.$el.querySelector('input');
+          el.focus();
+          el.select();
         }
-      }, 100)
+      }, 100);
     },
     async deleteRelation(action = '', column) {
       try {
         if (action === 'showDialog') {
-          this.relationDeleteDlg = true
+          this.relationDeleteDlg = true;
         } else if (action === 'hideDialog') {
-          this.relationDeleteDlg = false
+          this.relationDeleteDlg = false;
         } else {
           const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
             {
               env: this.nodes.env,
-              dbAlias: this.nodes.dbAlias
+              dbAlias: this.nodes.dbAlias,
             },
             this.relation.type === 'virtual' ? 'xcVirtualRelationDelete' : 'relationDelete',
             {
               childColumn: this.relation.column_name,
               childTable: this.nodes.table_name,
               parentTable: this.relation.rtn,
-              parentColumn: this.relation.rcn
-            }
-          ])
-          this.relationDeleteDlg = false
-          this.relation = null
-          this.$toast.success('Foreign Key deleted successfully').goAway(3000)
-          this.$emit('onRelationDelete')
+              parentColumn: this.relation.rcn,
+            },
+          ]);
+          this.relationDeleteDlg = false;
+          this.relation = null;
+          this.$toast.success('Foreign Key deleted successfully').goAway(3000);
+          this.$emit('onRelationDelete');
         }
       } catch (e) {
-        console.log(e)
-        this.$toast.error('Foreign key relation delete failed' + e).goAway(3000)
-        throw e
+        console.log(e);
+        this.$toast.error('Foreign key relation delete failed' + e).goAway(3000);
+        throw e;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue
index 08239ee857..495c2f7a3a 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue
@@ -1,8 +1,6 @@
 <template>
   <v-row class="duration-wrapper">
-    <div class="caption">
-      A duration of time in minutes or seconds (e.g. 1:23).
-    </div>
+    <div class="caption">A duration of time in minutes or seconds (e.g. 1:23).</div>
     <!-- TODO: i18n -->
     <v-autocomplete
       v-model="colMeta.duration"
@@ -32,7 +30,7 @@
 </template>
 
 <script>
-import { durationOptions } from '~/helpers/durationHelper'
+import { durationOptions } from '~/helpers/durationHelper';
 
 export default {
   name: 'DurationOptions',
@@ -41,24 +39,24 @@ export default {
     durationOptionList: durationOptions.map(o => ({
       ...o,
       // h:mm:ss (e.g. 3:45, 1:23:40)
-      title: `${o.title} ${o.example}`
+      title: `${o.title} ${o.example}`,
     })),
     colMeta: {
-      duration: 0
-    }
+      duration: 0,
+    },
   }),
   watch: {
     value() {
-      this.colMeta = this.value || {}
+      this.colMeta = this.value || {};
     },
     colMeta(v) {
-      this.$emit('input', v)
-    }
+      this.$emit('input', v);
+    },
   },
   created() {
-    this.colMeta = this.value ? { ...this.value } : { ...this.colMeta }
-  }
-}
+    this.colMeta = this.value ? { ...this.value } : { ...this.colMeta };
+  },
+};
 </script>
 
 <style scoped>