From 045f8d1039eefc932a6fcf8ff1fec8abf34c92a9 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 16 Jul 2022 16:03:28 +0300
Subject: [PATCH 01/26] feat: select options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../spreadsheet/components/EditColumn.vue     |  50 +++--
 .../editColumn/CustomSelectOptions.vue        | 205 ++++++++++++++----
 packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts  |   8 +-
 .../nocodb/src/lib/meta/api/columnApis.ts     |  51 ++++-
 .../lib/meta/helpers/populateSamplePayload.ts |   7 +-
 packages/nocodb/src/lib/models/Column.ts      |  71 ++++--
 .../{MultiSelectColumn.ts => SelectOption.ts} |  48 ++--
 .../src/lib/models/SingleSelectColumn.ts      |  87 --------
 8 files changed, 318 insertions(+), 209 deletions(-)
 rename packages/nocodb/src/lib/models/{MultiSelectColumn.ts => SelectOption.ts} (64%)
 delete mode 100644 packages/nocodb/src/lib/models/SingleSelectColumn.ts

diff --git a/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
index 94969896ed..1f37ed82a3 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
@@ -132,7 +132,12 @@
                   <date-options v-model="newColumn.meta" :column="newColumn" :meta="meta" />
                 </v-col>
                 <v-col v-if="isSelect" cols="12">
-                  <custom-select-options v-model="newColumn.dtxp" @input="newColumn.altered = newColumn.altered || 2" />
+                  <custom-select-options
+                    ref="customselect"
+                    :column="newColumn"
+                    :meta="meta"
+                    v-on="$listeners"
+                  />
                 </v-col>
                 <v-col v-else-if="isRating" cols="12">
                   <rating-options v-model="newColumn.meta" :column="newColumn" :meta="meta" />
@@ -644,9 +649,18 @@ export default {
         if (this.newColumn.uidt === 'Formula' && this.$refs.formula) {
           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.isSelect && this.$refs.customselect) {
+          if (this.column) {
+            await this.$refs.customselect.update()
+          } else {
+            await this.$refs.customselect.save()
+          }
+          await this.$emit('saved')
+          return this.$emit('close')
+        }
 
         if (this.editColumn) {
           await this.$api.dbTableColumn.update(this.column.id, this.newColumn);
@@ -678,18 +692,17 @@ export default {
       if (this.newColumn.uidt !== UITypes.ID) {
         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.dtx = 'specificType';
-
-      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.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'
 
       if (this.isCurrency) {
         if (this.column?.uidt === UITypes.Currency) {
@@ -722,11 +735,6 @@ export default {
       this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt);
       this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt);
 
-      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;
-      }
-
       if (columnToValidate.includes(this.newColumn.uidt)) {
         this.newColumn.meta = {
           validate: this.newColumn.meta && this.newColumn.meta.validate,
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
index ed0c393484..a9af26d0d8 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
@@ -1,68 +1,173 @@
 <template>
   <v-container fluid class="wrapper">
-    <div v-for="(op, i) in localState" :key="i" class="d-flex py-1">
-      <v-icon :color="colors[i % colors.length]" class="mr-2" @click="localState.splice(i, 1)">
-        mdi-arrow-down-drop-circle
-      </v-icon>
-      <v-text-field
-        v-model="localState[i]"
-        :autofocus="true"
-        class="caption"
-        dense
+    <draggable v-model="options" handle=".nc-child-draggable-icon">
+      <div v-for="(op,i) in options" :key="`${op.color}-${i}`" class="d-flex py-1">
+        <v-icon
+          small
+          class="nc-child-draggable-icon handle"
+        >
+          mdi-drag-vertical
+        </v-icon>
+        <v-menu
+          v-model="colorMenus[i]"
+          rounded="lg"
+          :close-on-content-click="false"
+          offset-y
+        >
+          <template
+            #activator="{ on }"
+          >
+            <v-icon
+              :color="op.color"
+              class="mr-2"
+              v-on="on"
+            >
+              mdi-arrow-down-drop-circle
+            </v-icon>
+          </template>
+          <color-picker v-model="op.color" @input="colorMenus[i] = false;" />
+        </v-menu>
+        <v-text-field
+          v-model="op.title"
+          :autofocus="true"
+          class="caption"
+          :rules="[enumNotNull, enumNoDuplicate]"
+          dense
+          outlined
+          :disabled="op.id && isMigrated"
+        />
+        <v-icon class="ml-2" color="error lighten-2" size="13" @click="removeOption(op, i)">
+          mdi-close
+        </v-icon>
+      </div>
+      <v-btn
+        slot="footer"
+        x-small
+        color="primary"
         outlined
-        @input="listenForComma(i, $event)"
-      />
-      <v-icon class="ml-2" color="error lighten-2" size="13" @click="localState.splice(i, 1)"> mdi-close </v-icon>
-    </div>
-    <v-btn x-small color="primary" outlined class="d-100 caption mt-2" @click="localState.push('')">
-      <v-icon x-small outlined color="primary" class="mr-2"> mdi-plus </v-icon>
-      Add option
-    </v-btn>
+        class="d-100 caption mt-2"
+        @click="addNewOption()"
+      >
+        <v-icon x-small outlined color="primary" class="mr-2">
+          mdi-plus
+        </v-icon>
+        Add option
+      </v-btn>
+    </draggable>
   </v-container>
 </template>
 
 <script>
-import colors from '@/components/project/spreadsheet/helpers/colors';
+import draggable from 'vuedraggable'
+import ColorPicker from '../ColorPicker.vue'
+import { enumColor } from '@/components/project/spreadsheet/helpers/colors'
 
 export default {
   name: 'CustomSelectOptions',
-  props: ['value'],
+  components: {
+    draggable,
+    ColorPicker
+  },
+  props: ['column', 'meta'],
   data: () => ({
-    localState: [],
+    options: [],
+    colorMenus: {},
+    colors: enumColor.light
   }),
   computed: {
-    colors() {
-      return this.$store.state.settings.darkTheme ? colors.dark : colors.light;
-    },
-  },
-  watch: {
-    localState: {
-      handler(v) {
-        this.$emit('input', v.map(v => `'${v.replace(/'/g, "\\'")}'`).join(','));
-      },
-      deep: true,
-    },
-    value() {
-      this.syncState();
+    alias() {
+      return this.column?.column_name
     },
+    isMigrated() {
+      return ['enum', 'set'].includes(this.column.dt)
+    }
   },
-  mounted() {
-    this.syncState();
+  created() {
+    this.options = this.copyOptions(this.column.colOptions?.options) || []
+    // migrate
+    /*
+    if (this.isMigrated && this.options.length) {
+      this.options.map((el) => {
+        el.title = el.title.replace(/'/g, '')
+        return el
+      })
+    }
+    */
   },
   methods: {
-    syncState() {
-      this.localState = (this.value || '').split(',').map(v => v.replace(/\\'/g, "'").replace(/^'|'$/g, ''));
+    addNewOption() {
+      const tempOption = {
+        title: '',
+        color: this.getNextColor()
+      }
+      this.options.push(tempOption)
+    },
+    async removeOption(option, index) {
+      this.options.splice(index, 1)
     },
-    listenForComma(index, value) {
-      const normalisedValue = value.trim();
-      if (normalisedValue.endsWith(',')) {
-        this.localState.push('');
-        return;
+    getNextColor() {
+      let tempColor = this.colors[0]
+      if (this.options.length && this.options[this.options.length - 1].color) {
+        const lastColor = this.colors.indexOf(this.options[this.options.length - 1].color)
+        tempColor = this.colors[(lastColor + 1) % this.colors.length]
       }
-      this.localState[index] = normalisedValue;
+      return tempColor
     },
-  },
-};
+    async save() {
+      try {
+        const selectCol = {
+          ...this.column,
+          title: this.alias,
+          options: this.options
+        }
+        await this.$api.dbTableColumn.create(this.meta.id, selectCol)
+        this.$toast.success('Select column saved successfully').goAway(3000)
+        return this.$emit('saved', this.alias)
+      } catch (e) {
+        this.$toast.error(e.message).goAway(3000)
+      }
+    },
+    async update() {
+      try {
+        const selectCol = {
+          ...this.column,
+          title: this.alias,
+          options: this.options
+        }
+        if (this.isMigrated) {
+          const enums = this.options.map(el => el.title)
+          selectCol.dtxp = `'${enums.join("','")}'`
+          selectCol.ct = `${this.column.dt}(${selectCol.dtxp})`
+        }
+        await this.$api.dbTableColumn.update(this.column.id, selectCol)
+        return this.$emit('saved', this.alias)
+      } catch (e) {
+        this.$toast.error(e.message).goAway(3000)
+      }
+    },
+    copyOptions(array) {
+      const temp = []
+      if (array && array.length) {
+        for (const el of array) {
+          temp.push({ ...el })
+        }
+      }
+      return temp
+    },
+    enumNotNull(v) {
+      if (this.isMigrated) {
+        return !!v || 'Migrated options can\'t be null'
+      }
+      return true
+    },
+    enumNoDuplicate(v) {
+      if (this.isMigrated) {
+        return this.options.filter(el => el.title === v).length === 1 || 'Migrated options can\'t have duplicates'
+      }
+      return true
+    }
+  }
+}
 </script>
 
 <style scoped>
@@ -74,4 +179,14 @@ export default {
 /deep/ .v-input__control {
   height: 33px;
 }
+
+.handle {
+  cursor: pointer;
+}
+
+/deep/ .v-text-field__details {
+  position: absolute;
+  margin-top: 10px;
+  margin-left: 25px;
+}
 </style>
diff --git a/packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts b/packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts
index 5c8bc82dba..480f5f2eae 100644
--- a/packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts
@@ -254,10 +254,10 @@ export class MysqlUi {
         return '';
 
       case 'enum':
-        return "'a','b'";
+        return '';
 
       case 'set':
-        return "'a','b'";
+        return '';
 
       case 'geometry':
         return '';
@@ -976,10 +976,10 @@ export class MysqlUi {
         colProp.dtxp = 1;
         break;
       case 'MultiSelect':
-        colProp.dt = 'text';
+        colProp.dt = 'set';
         break;
       case 'SingleSelect':
-        colProp.dt = 'text';
+        colProp.dt = 'enum';
         break;
       case 'Collaborator':
         colProp.dt = 'varchar';
diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index 1627e868b7..4c329a69ad 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -509,6 +509,23 @@ export async function columnAdd(req: Request, res: Response<TableType>) {
           // Duration column needs more that that
           colBody.dtxs = '4';
         }
+
+        if (colBody.uidt === UITypes.SingleSelect) {
+          colBody.dtxp = (colBody?.options.length)
+            ? `${colBody.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
+            : '';
+        } else if (colBody.uidt === UITypes.MultiSelect){
+          colBody.dtxp = (colBody?.options.length)
+            ? `${colBody.options.map((o) => {
+                if(o.title.includes(',')) {
+                  NcError.badRequest('Illegal char(\',\') for MultiSelect');
+                  throw new Error('');
+                }
+                return `'${o.title.replace(/'/gi, '\'\'')}'`;
+              }).join(',')}`
+            : '';
+        }
+
         const tableUpdateBody = {
           ...table,
           tn: table.table_name,
@@ -540,13 +557,6 @@ export async function columnAdd(req: Request, res: Response<TableType>) {
         const insertedColumnMeta =
           columns.find((c) => c.cn === colBody.column_name) || ({} as any);
 
-        if (
-          colBody.uidt === UITypes.SingleSelect ||
-          colBody.uidt === UITypes.MultiSelect
-        ) {
-          insertedColumnMeta.dtxp = colBody.dtxp;
-        }
-
         await Column.insert({
           ...colBody,
           ...insertedColumnMeta,
@@ -655,6 +665,23 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
     );
   } else {
     colBody = getColumnPropsFromUIDT(colBody, base);
+
+    if (colBody.uidt === UITypes.SingleSelect) {
+      colBody.dtxp = (colBody?.options.length)
+        ? `${colBody.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
+        : '';
+    } else if (colBody.uidt === UITypes.MultiSelect){
+      colBody.dtxp = (colBody?.options.length)
+        ? `${colBody.options.map((o) => {
+            if(o.title.includes(',')) {
+              NcError.badRequest('Illegal char(\',\') for MultiSelect');
+              throw new Error('');
+            }
+            return `'${o.title.replace(/'/gi, '\'\'')}'`;
+          }).join(',')}`
+        : '';
+    }
+
     const tableUpdateBody = {
       ...table,
       tn: table.table_name,
@@ -706,12 +733,12 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
       ),
     };
 
-    const sqlMgr = await ProjectMgrv2.getSqlMgr({ id: base.project_id });
-    await sqlMgr.sqlOpPlus(base, 'tableUpdate', tableUpdateBody);
-
-    await Column.update(req.params.columnId, {
+      const sqlMgr = await ProjectMgrv2.getSqlMgr({ id: base.project_id });
+      await sqlMgr.sqlOpPlus(base, 'tableUpdate', tableUpdateBody);
+    
+      await Column.update(req.params.columnId, {
       ...colBody,
-    });
+      });
   }
   Audit.insert({
     project_id: base.project_id,
diff --git a/packages/nocodb/src/lib/meta/helpers/populateSamplePayload.ts b/packages/nocodb/src/lib/meta/helpers/populateSamplePayload.ts
index c14006e222..0f0a068a22 100644
--- a/packages/nocodb/src/lib/meta/helpers/populateSamplePayload.ts
+++ b/packages/nocodb/src/lib/meta/helpers/populateSamplePayload.ts
@@ -4,8 +4,7 @@ import { RelationTypes, UITypes } from 'nocodb-sdk';
 import Model from '../../models/Model';
 import LinkToAnotherRecordColumn from '../../models/LinkToAnotherRecordColumn';
 import LookupColumn from '../../models/LookupColumn';
-import MultiSelectColumn from '../../models/MultiSelectColumn';
-import SingleSelectColumn from '../../models/SingleSelectColumn';
+import SelectOption from '../../models/SelectOption';
 
 export default async function populateSamplePayload(
   viewOrModel: View | Model,
@@ -105,7 +104,7 @@ async function getSampleColumnValue(column: Column): Promise<any> {
       break;
     case UITypes.MultiSelect:
       {
-        const colOpt = await column.getColOptions<MultiSelectColumn[]>();
+        const colOpt = await column.getColOptions<SelectOption[]>();
         return (
           colOpt?.[0]?.title ||
           column?.dtxp?.split(',')?.[0]?.replace(/^['"]|['"]$/g, '')
@@ -114,7 +113,7 @@ async function getSampleColumnValue(column: Column): Promise<any> {
       break;
     case UITypes.SingleSelect:
       {
-        const colOpt = await column.getColOptions<SingleSelectColumn[]>();
+        const colOpt = await column.getColOptions<SelectOption[]>();
         return (
           colOpt?.[0]?.title ||
           column?.dtxp?.split(',')?.[0]?.replace(/^['"]|['"]$/g, '')
diff --git a/packages/nocodb/src/lib/models/Column.ts b/packages/nocodb/src/lib/models/Column.ts
index 5589888ef3..2fbad1377c 100644
--- a/packages/nocodb/src/lib/models/Column.ts
+++ b/packages/nocodb/src/lib/models/Column.ts
@@ -2,7 +2,7 @@ import FormulaColumn from './FormulaColumn';
 import LinkToAnotherRecordColumn from './LinkToAnotherRecordColumn';
 import LookupColumn from './LookupColumn';
 import RollupColumn from './RollupColumn';
-import SingleSelectColumn from './SingleSelectColumn';
+import SelectOption from './SelectOption';
 import MultiSelectColumn from './MultiSelectColumn';
 import Model from './Model';
 import NocoCache from '../cache/NocoCache';
@@ -232,26 +232,54 @@ export default class Column<T = any> implements ColumnType {
         break;
       }
       case UITypes.MultiSelect: {
-        for (const option of column.dtxp?.split(',') || []) {
-          await MultiSelectColumn.insert(
-            {
-              fk_column_id: colId,
-              title: option,
-            },
-            ncMeta
-          );
+        if (column.dt === 'set' && !column.altered) {
+          for (const [i, option] of column.dtxp?.split(',').entries() || [].entries()) {
+            await SelectOption.insert(
+              {
+                fk_column_id: colId,
+                title: option,
+                order: i + 1
+              },
+              ncMeta
+            );
+          }
+        } else {
+          for (const [i, option] of column.options.entries() || [].entries()) {
+            await SelectOption.insert(
+              {
+                ...option,
+                fk_column_id: colId,
+                order: i + 1
+              },
+              ncMeta
+            );
+          }
         }
         break;
       }
       case UITypes.SingleSelect: {
-        for (const option of column.dtxp?.split(',') || []) {
-          await SingleSelectColumn.insert(
-            {
-              fk_column_id: colId,
-              title: option,
-            },
-            ncMeta
-          );
+        if (column.dt === 'enum' && !column.altered) {
+          for (const [i, option] of column.dtxp?.split(',').entries() || [].entries()) {
+            await SelectOption.insert(
+              {
+                fk_column_id: colId,
+                title: option,
+                order: i + 1
+              },
+              ncMeta
+            );
+          }
+        } else {
+          for (const [i, option] of column.options.entries() || [].entries()) {
+            await SelectOption.insert(
+              {
+                ...option,
+                fk_column_id: colId,
+                order: i + 1
+              },
+              ncMeta
+            );
+          }
         }
         break;
       }
@@ -322,10 +350,10 @@ export default class Column<T = any> implements ColumnType {
         res = await LinkToAnotherRecordColumn.read(this.id, ncMeta);
         break;
       case UITypes.MultiSelect:
-        res = await MultiSelectColumn.get(this.id, ncMeta);
+        res = await SelectOption.read(this.id, ncMeta);
         break;
       case UITypes.SingleSelect:
-        res = await SingleSelectColumn.get(this.id, ncMeta);
+        res = await SelectOption.read(this.id, ncMeta);
         break;
       case UITypes.Formula:
         res = await FormulaColumn.read(this.id, ncMeta);
@@ -772,10 +800,11 @@ export default class Column<T = any> implements ColumnType {
         await ncMeta.metaDelete(null, null, MetaTable.COL_SELECT_OPTIONS, {
           fk_column_id: colId,
         });
+
         await NocoCache.deepDel(
           CacheScope.COL_SELECT_OPTION,
-          `${CacheScope.COL_SELECT_OPTION}:${colId}`,
-          CacheDelDirection.CHILD_TO_PARENT
+          `${CacheScope.COL_SELECT_OPTION}:${colId}:list`,
+          CacheDelDirection.PARENT_TO_CHILD
         );
         break;
       }
diff --git a/packages/nocodb/src/lib/models/MultiSelectColumn.ts b/packages/nocodb/src/lib/models/SelectOption.ts
similarity index 64%
rename from packages/nocodb/src/lib/models/MultiSelectColumn.ts
rename to packages/nocodb/src/lib/models/SelectOption.ts
index 1fa7c4451a..53a74800e5 100644
--- a/packages/nocodb/src/lib/models/MultiSelectColumn.ts
+++ b/packages/nocodb/src/lib/models/SelectOption.ts
@@ -2,26 +2,25 @@ import Noco from '../Noco';
 import NocoCache from '../cache/NocoCache';
 import { CacheGetType, CacheScope, MetaTable } from '../utils/globals';
 
-export default class MultiSelectColumn {
+export default class SelectOption {
   title: string;
   fk_column_id: string;
+  color: string;
+  order: number;
 
-  constructor(data: Partial<MultiSelectColumn>) {
+  constructor(data: Partial<SelectOption>) {
     Object.assign(this, data);
   }
 
   public static async insert(
-    data: Partial<MultiSelectColumn>,
+    data: Partial<SelectOption>,
     ncMeta = Noco.ncMeta
   ) {
     const { id } = await ncMeta.metaInsert2(
       null,
       null,
       MetaTable.COL_SELECT_OPTIONS,
-      {
-        fk_column_id: data.fk_column_id,
-        title: data.title,
-      }
+      data
     );
 
     await NocoCache.appendToList(
@@ -36,7 +35,7 @@ export default class MultiSelectColumn {
   public static async get(
     selectOptionId: string,
     ncMeta = Noco.ncMeta
-  ): Promise<MultiSelectColumn> {
+  ): Promise<SelectOption> {
     let data =
       selectOptionId &&
       (await NocoCache.get(
@@ -55,33 +54,52 @@ export default class MultiSelectColumn {
         data
       );
     }
-    return data && new MultiSelectColumn(data);
+    return data && new SelectOption(data);
   }
 
-  public static async read(columnId: string, ncMeta = Noco.ncMeta) {
+  public static async read(fk_column_id: string, ncMeta = Noco.ncMeta) {
     let options = await NocoCache.getList(CacheScope.COL_SELECT_OPTION, [
-      columnId,
+      fk_column_id
     ]);
     if (!options.length) {
       options = await ncMeta.metaList2(
         null, //,
         null, //model.db_alias,
         MetaTable.COL_SELECT_OPTIONS,
-        { condition: { fk_column_id: columnId } }
+        { condition: { fk_column_id } }
       );
       await NocoCache.setList(
         CacheScope.COL_SELECT_OPTION,
-        [columnId],
-        options
+        [fk_column_id],
+        options.map(({created_at, updated_at, ...others}) => others)
       );
     }
 
     return options?.length
       ? {
-          options: options.map((c) => new MultiSelectColumn(c)),
+          options: options.map(({created_at, updated_at, ...c}) => new SelectOption(c))
         }
       : null;
   }
 
+  public static async find(
+    fk_column_id: string,
+    title: string,
+    ncMeta = Noco.ncMeta
+  ): Promise<SelectOption> {
+
+    let data = await ncMeta.metaGet2(
+      null,
+      null,
+      MetaTable.COL_SELECT_OPTIONS,
+      {
+        fk_column_id,
+        title
+      }
+    );
+
+    return data && new SelectOption(data);
+  }
+
   id: string;
 }
diff --git a/packages/nocodb/src/lib/models/SingleSelectColumn.ts b/packages/nocodb/src/lib/models/SingleSelectColumn.ts
deleted file mode 100644
index ec85d94942..0000000000
--- a/packages/nocodb/src/lib/models/SingleSelectColumn.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import Noco from '../Noco';
-import NocoCache from '../cache/NocoCache';
-import { CacheGetType, CacheScope, MetaTable } from '../utils/globals';
-
-export default class SingleSelectColumn {
-  title: string;
-  fk_column_id: string;
-
-  constructor(data: Partial<SingleSelectColumn>) {
-    Object.assign(this, data);
-  }
-
-  public static async insert(
-    data: Partial<SingleSelectColumn>,
-    ncMeta = Noco.ncMeta
-  ) {
-    const { id } = await ncMeta.metaInsert2(
-      null,
-      null,
-      MetaTable.COL_SELECT_OPTIONS,
-      {
-        fk_column_id: data.fk_column_id,
-        title: data.title,
-      }
-    );
-
-    await NocoCache.appendToList(
-      CacheScope.COL_SELECT_OPTION,
-      [data.fk_column_id],
-      `${CacheScope.COL_SELECT_OPTION}:${id}`
-    );
-
-    return this.get(id, ncMeta);
-  }
-
-  public static async get(
-    selectOptionId: string,
-    ncMeta = Noco.ncMeta
-  ): Promise<SingleSelectColumn> {
-    let data =
-      selectOptionId &&
-      (await NocoCache.get(
-        `${CacheScope.COL_SELECT_OPTION}:${selectOptionId}`,
-        CacheGetType.TYPE_OBJECT
-      ));
-    if (!data) {
-      data = await ncMeta.metaGet2(
-        null,
-        null,
-        MetaTable.COL_SELECT_OPTIONS,
-        selectOptionId
-      );
-      await NocoCache.set(
-        `${CacheScope.COL_SELECT_OPTION}:${selectOptionId}`,
-        data
-      );
-    }
-    return data && new SingleSelectColumn(data);
-  }
-
-  public static async read(columnId: string, ncMeta = Noco.ncMeta) {
-    let options = await NocoCache.getList(CacheScope.COL_SELECT_OPTION, [
-      columnId,
-    ]);
-    if (!options.length) {
-      options = await ncMeta.metaList2(
-        null, //,
-        null, //model.db_alias,
-        MetaTable.COL_SELECT_OPTIONS,
-        { condition: { fk_column_id: columnId } }
-      );
-      await NocoCache.setList(
-        CacheScope.COL_SELECT_OPTION,
-        [columnId],
-        options
-      );
-    }
-
-    return options?.length
-      ? {
-          options: options.map((c) => new SingleSelectColumn(c)),
-        }
-      : null;
-  }
-
-  id: string;
-}

From cfbd84bac1179693986d4891a92e3dc57cbf7c08 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 19 Jul 2022 00:48:26 +0300
Subject: [PATCH 02/26] feat: editable select options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../spreadsheet/components/EditColumn.vue     |  42 ++--
 .../editColumn/CustomSelectOptions.vue        | 199 ++++++++----------
 .../nocodb/src/lib/meta/api/columnApis.ts     | 182 ++++++++++++++--
 packages/nocodb/src/lib/models/Column.ts      |   7 +-
 4 files changed, 280 insertions(+), 150 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
index 1f37ed82a3..d08afc6a10 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
@@ -132,12 +132,7 @@
                   <date-options v-model="newColumn.meta" :column="newColumn" :meta="meta" />
                 </v-col>
                 <v-col v-if="isSelect" cols="12">
-                  <custom-select-options
-                    ref="customselect"
-                    :column="newColumn"
-                    :meta="meta"
-                    v-on="$listeners"
-                  />
+                  <custom-select-options ref="customselect" :column="newColumn" :meta="meta" v-on="$listeners" />
                 </v-col>
                 <v-col v-else-if="isRating" cols="12">
                   <rating-options v-model="newColumn.meta" :column="newColumn" :meta="meta" />
@@ -649,17 +644,20 @@ export default {
         if (this.newColumn.uidt === 'Formula' && this.$refs.formula) {
           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.isSelect && this.$refs.customselect) {
           if (this.column) {
-            await this.$refs.customselect.update()
-          } else {
-            await this.$refs.customselect.save()
+            if (await this.$refs.customselect.update()) {
+              await this.$emit('saved');
+              return this.$emit('close');
+            }
+          } else if (await this.$refs.customselect.save()) {
+            await this.$emit('saved');
+            return this.$emit('close');
           }
-          await this.$emit('saved')
-          return this.$emit('close')
+          return;
         }
 
         if (this.editColumn) {
@@ -692,17 +690,13 @@ export default {
       if (this.newColumn.uidt !== UITypes.ID) {
         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.dtx = 'specificType'
+      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';
 
       if (this.isCurrency) {
         if (this.column?.uidt === UITypes.Currency) {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
index a9af26d0d8..9e4aac381d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
@@ -1,173 +1,156 @@
 <template>
   <v-container fluid class="wrapper">
     <draggable v-model="options" handle=".nc-child-draggable-icon">
-      <div v-for="(op,i) in options" :key="`${op.color}-${i}`" class="d-flex py-1">
-        <v-icon
-          small
-          class="nc-child-draggable-icon handle"
-        >
-          mdi-drag-vertical
-        </v-icon>
-        <v-menu
-          v-model="colorMenus[i]"
-          rounded="lg"
-          :close-on-content-click="false"
-          offset-y
-        >
-          <template
-            #activator="{ on }"
-          >
-            <v-icon
-              :color="op.color"
-              class="mr-2"
-              v-on="on"
-            >
-              mdi-arrow-down-drop-circle
-            </v-icon>
+      <div v-for="(op, i) in options" :key="`${op.color}-${i}`" class="d-flex py-1">
+        <v-icon small class="nc-child-draggable-icon handle"> mdi-drag-vertical </v-icon>
+        <v-menu v-model="colorMenus[i]" rounded="lg" :close-on-content-click="false" offset-y>
+          <template #activator="{ on }">
+            <v-icon :color="op.color" class="mr-2" v-on="on"> mdi-arrow-down-drop-circle </v-icon>
           </template>
-          <color-picker v-model="op.color" @input="colorMenus[i] = false;" />
+          <color-picker v-model="op.color" @input="colorMenus[i] = false" />
         </v-menu>
-        <v-text-field
-          v-model="op.title"
-          :autofocus="true"
-          class="caption"
-          :rules="[enumNotNull, enumNoDuplicate]"
-          dense
-          outlined
-          :disabled="op.id && isMigrated"
-        />
-        <v-icon class="ml-2" color="error lighten-2" size="13" @click="removeOption(op, i)">
-          mdi-close
-        </v-icon>
+        <v-text-field v-model="op.title" :autofocus="true" class="caption" dense outlined />
+        <v-icon class="ml-2" color="error lighten-2" size="13" @click="removeOption(op, i)"> mdi-close </v-icon>
       </div>
-      <v-btn
-        slot="footer"
-        x-small
-        color="primary"
-        outlined
-        class="d-100 caption mt-2"
-        @click="addNewOption()"
-      >
-        <v-icon x-small outlined color="primary" class="mr-2">
-          mdi-plus
-        </v-icon>
+      <v-btn slot="footer" x-small color="primary" outlined class="d-100 caption mt-2" @click="addNewOption()">
+        <v-icon x-small outlined color="primary" class="mr-2"> mdi-plus </v-icon>
         Add option
       </v-btn>
     </draggable>
+    <div v-show="error" class="px-2 py-1 text-left caption error--text">
+      {{ error }}
+    </div>
   </v-container>
 </template>
 
 <script>
-import draggable from 'vuedraggable'
-import ColorPicker from '../ColorPicker.vue'
-import { enumColor } from '@/components/project/spreadsheet/helpers/colors'
+import draggable from 'vuedraggable';
+import { UITypes } from 'nocodb-sdk';
+import ColorPicker from '../ColorPicker.vue';
+import { enumColor } from '@/components/project/spreadsheet/helpers/colors';
 
 export default {
   name: 'CustomSelectOptions',
   components: {
     draggable,
-    ColorPicker
+    ColorPicker,
   },
   props: ['column', 'meta'],
   data: () => ({
     options: [],
     colorMenus: {},
-    colors: enumColor.light
+    colors: enumColor.light,
+    error: undefined,
   }),
   computed: {
     alias() {
-      return this.column?.column_name
+      return this.column?.column_name;
+    },
+    isEnumOrSet() {
+      return ['enum', 'set'].includes(this.column.dt);
     },
-    isMigrated() {
-      return ['enum', 'set'].includes(this.column.dt)
-    }
   },
   created() {
-    this.options = this.copyOptions(this.column.colOptions?.options) || []
-    // migrate
-    /*
-    if (this.isMigrated && this.options.length) {
-      this.options.map((el) => {
-        el.title = el.title.replace(/'/g, '')
-        return el
-      })
+    this.options = this.copyOptions(this.column.colOptions?.options) || [];
+    // Support for older options
+    for (const op of this.options.filter(el => el.order === null)) {
+      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }
-    */
   },
   methods: {
     addNewOption() {
       const tempOption = {
         title: '',
-        color: this.getNextColor()
-      }
-      this.options.push(tempOption)
+        color: this.getNextColor(),
+      };
+      this.options.push(tempOption);
     },
     async removeOption(option, index) {
-      this.options.splice(index, 1)
+      this.options.splice(index, 1);
     },
     getNextColor() {
-      let tempColor = this.colors[0]
+      let tempColor = this.colors[0];
       if (this.options.length && this.options[this.options.length - 1].color) {
-        const lastColor = this.colors.indexOf(this.options[this.options.length - 1].color)
-        tempColor = this.colors[(lastColor + 1) % this.colors.length]
+        const lastColor = this.colors.indexOf(this.options[this.options.length - 1].color);
+        tempColor = this.colors[(lastColor + 1) % this.colors.length];
       }
-      return tempColor
+      return tempColor;
     },
     async save() {
       try {
-        const selectCol = {
-          ...this.column,
-          title: this.alias,
-          options: this.options
+        if (this.checkOptions()) {
+          const selectCol = {
+            ...this.column,
+            title: this.alias,
+            colOptions: {
+              options: this.options,
+            },
+          };
+          await this.$api.dbTableColumn.create(this.meta.id, selectCol);
+          this.$toast.success('Select column saved successfully').goAway(3000);
+          return true;
         }
-        await this.$api.dbTableColumn.create(this.meta.id, selectCol)
-        this.$toast.success('Select column saved successfully').goAway(3000)
-        return this.$emit('saved', this.alias)
+        return false;
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
+        return false;
       }
     },
     async update() {
       try {
-        const selectCol = {
-          ...this.column,
-          title: this.alias,
-          options: this.options
+        if (this.checkOptions()) {
+          const selectCol = {
+            ...this.column,
+            title: this.alias,
+            colOptions: {
+              options: this.options,
+            },
+          };
+          await this.$api.dbTableColumn.update(this.column.id, selectCol);
+          return true;
         }
-        if (this.isMigrated) {
-          const enums = this.options.map(el => el.title)
-          selectCol.dtxp = `'${enums.join("','")}'`
-          selectCol.ct = `${this.column.dt}(${selectCol.dtxp})`
-        }
-        await this.$api.dbTableColumn.update(this.column.id, selectCol)
-        return this.$emit('saved', this.alias)
+        return false;
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
+        return false;
       }
     },
     copyOptions(array) {
-      const temp = []
+      const temp = [];
       if (array && array.length) {
         for (const el of array) {
-          temp.push({ ...el })
+          temp.push({ ...el });
         }
       }
-      return temp
+      return temp;
     },
-    enumNotNull(v) {
-      if (this.isMigrated) {
-        return !!v || 'Migrated options can\'t be null'
+    checkOptions() {
+      let failed = false;
+      for (const opt of this.options) {
+        if (!opt.title.length) {
+          this.error = "Select options can't be null";
+          failed = true;
+          break;
+        }
+        if (this.column.uidt === UITypes.MultiSelect && opt.title.includes(',')) {
+          this.error = "MultiSelect columns can't have commas(',')";
+          failed = true;
+          break;
+        }
+        if (this.options.filter(el => el.title === opt.title).length !== 1) {
+          this.error = "Select options can't have duplicates";
+          failed = true;
+          break;
+        }
       }
-      return true
-    },
-    enumNoDuplicate(v) {
-      if (this.isMigrated) {
-        return this.options.filter(el => el.title === v).length === 1 || 'Migrated options can\'t have duplicates'
+      if (!failed) {
+        this.error = null;
+        return true;
       }
-      return true
-    }
-  }
-}
+      return false;
+    },
+  },
+};
 </script>
 
 <style scoped>
diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index 4c329a69ad..95900cdc7b 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -511,12 +511,12 @@ export async function columnAdd(req: Request, res: Response<TableType>) {
         }
 
         if (colBody.uidt === UITypes.SingleSelect) {
-          colBody.dtxp = (colBody?.options.length)
-            ? `${colBody.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
+          colBody.dtxp = (colBody.colOptions?.options.length)
+            ? `${colBody.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
             : '';
         } else if (colBody.uidt === UITypes.MultiSelect){
-          colBody.dtxp = (colBody?.options.length)
-            ? `${colBody.options.map((o) => {
+          colBody.dtxp = (colBody.colOptions?.options.length)
+            ? `${colBody.colOptions.options.map((o) => {
                 if(o.title.includes(',')) {
                   NcError.badRequest('Illegal char(\',\') for MultiSelect');
                   throw new Error('');
@@ -663,16 +663,21 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
     NcError.notImplemented(
       `Updating ${colBody.uidt} => ${colBody.uidt} is not implemented`
     );
-  } else {
+  } if(
+    [
+      UITypes.SingleSelect,
+      UITypes.MultiSelect
+    ].includes(colBody.uidt)
+  ) {
     colBody = getColumnPropsFromUIDT(colBody, base);
-
+    
     if (colBody.uidt === UITypes.SingleSelect) {
-      colBody.dtxp = (colBody?.options.length)
-        ? `${colBody.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
+      colBody.dtxp = (colBody.colOptions?.options.length)
+        ? `${colBody.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
         : '';
     } else if (colBody.uidt === UITypes.MultiSelect){
-      colBody.dtxp = (colBody?.options.length)
-        ? `${colBody.options.map((o) => {
+      colBody.dtxp = (colBody.colOptions?.options.length)
+        ? `${colBody.colOptions.options.map((o) => {
             if(o.title.includes(',')) {
               NcError.badRequest('Illegal char(\',\') for MultiSelect');
               throw new Error('');
@@ -682,6 +687,95 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         : '';
     }
 
+    const baseModel = await Model.getBaseModelSQL({
+      id: table.id,
+      dbDriver: NcConnectionMgrv2.get(base)
+    });
+
+    if (column.colOptions?.options) {
+      // Handle migrations
+      for (const op of column.colOptions.options.filter(el => el.order === null)) {
+        op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+      }
+
+      // Handle option delete
+      for (const option of column.colOptions.options.filter(oldOp => colBody.colOptions.options.find(newOp => newOp.id === oldOp.id) ? false : true)) {
+        if (column.uidt === UITypes.SingleSelect) { 
+          await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${option.title})` }, { [column.title]: null });
+        } else if (column.uidt === UITypes.MultiSelect) {
+          const dbDriver = NcConnectionMgrv2.get(base);
+          // TODO find_in_set for MySQL optimization
+          await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), ','))`, [table.table_name, column.title, column.title, option.title]);
+        }
+      }
+
+      // Handle option update
+      for (const option of column.colOptions.options.filter(oldOp => colBody.colOptions.options.find(newOp => newOp.id === oldOp.id && newOp.title !== oldOp.title))) {
+        let newOp = colBody.colOptions.options.find(el => option.id === el.id);
+        column.colOptions.options.push({ title: newOp.title });
+
+        let temp_dtxp = '';
+        if (column.uidt === UITypes.SingleSelect) {
+          temp_dtxp = (column.colOptions?.options.length)
+            ? `${column.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
+            : '';
+        } else if (column.uidt === UITypes.MultiSelect){
+          temp_dtxp = (column.colOptions?.options.length)
+            ? `${column.colOptions.options.map((o) => {
+                if(o.title.includes(',')) {
+                  NcError.badRequest('Illegal char(\',\') for MultiSelect');
+                  throw new Error('');
+                }
+                return `'${o.title.replace(/'/gi, '\'\'')}'`;
+              }).join(',')}`
+            : '';
+        }
+
+        const tableUpdateBody = {
+          ...table,
+          tn: table.table_name,
+          originalColumns: table.columns.map((c) => ({
+            ...c,
+            cn: c.column_name,
+            cno: c.column_name,
+          })),
+          columns: await Promise.all(
+            table.columns.map(async (c) => {
+              if (c.id === req.params.columnId) {
+                const res = {
+                  ...c,
+                  ...column,
+                  cn: column.column_name,
+                  cno: c.column_name,
+                  dtxp: temp_dtxp,
+                  altered: Altered.UPDATE_COLUMN,
+                };
+                return Promise.resolve(res);
+              } else {
+                (c as any).cn = c.column_name;
+              }
+              return Promise.resolve(c);
+            })
+          ),
+        };
+
+        const sqlMgr = await ProjectMgrv2.getSqlMgr({ id: base.project_id });
+        await sqlMgr.sqlOpPlus(base, 'tableUpdate', tableUpdateBody);
+      
+        await Column.update(req.params.columnId, {
+          ...column,
+        });
+
+        if (column.uidt === UITypes.SingleSelect) { 
+          await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${option.title})` }, { [column.title]: newOp.title });
+        } else if (column.uidt === UITypes.MultiSelect) {
+          const dbDriver = NcConnectionMgrv2.get(base);
+          // TODO find_in_set for MySQL optimization
+          await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ',')))`, [table.table_name, column.title, column.title, option.title, newOp.title]);
+        }
+      }
+    }
+
     const tableUpdateBody = {
       ...table,
       tn: table.table_name,
@@ -733,12 +827,72 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
       ),
     };
 
-      const sqlMgr = await ProjectMgrv2.getSqlMgr({ id: base.project_id });
-      await sqlMgr.sqlOpPlus(base, 'tableUpdate', tableUpdateBody);
+    const sqlMgr = await ProjectMgrv2.getSqlMgr({ id: base.project_id });
+    await sqlMgr.sqlOpPlus(base, 'tableUpdate', tableUpdateBody);
+  
+    await Column.update(req.params.columnId, {
+      ...colBody,
+    });
+  } else {
+    colBody = getColumnPropsFromUIDT(colBody, base);
     
-      await Column.update(req.params.columnId, {
+    const tableUpdateBody = {
+      ...table,
+      tn: table.table_name,
+      originalColumns: table.columns.map((c) => ({
+        ...c,
+        cn: c.column_name,
+        cno: c.column_name,
+      })),
+      columns: await Promise.all(
+        table.columns.map(async (c) => {
+          if (c.id === req.params.columnId) {
+            const res = {
+              ...c,
+              ...colBody,
+              cn: colBody.column_name,
+              cno: c.column_name,
+              altered: Altered.UPDATE_COLUMN,
+            };
+
+            // update formula with new column name
+            if (c.column_name != colBody.column_name) {
+              const formulas = await Noco.ncMeta
+                .knex(MetaTable.COL_FORMULA)
+                .where('formula', 'like', `%${c.id}%`);
+              if (formulas) {
+                const new_column = c;
+                new_column.column_name = colBody.column_name;
+                new_column.title = colBody.title;
+                for (const f of formulas) {
+                  // the formula with column IDs only
+                  const formula = f.formula;
+                  // replace column IDs with alias to get the new formula_raw
+                  const new_formula_raw = substituteColumnIdWithAliasInFormula(
+                    formula,
+                    [new_column]
+                  );
+                  await FormulaColumn.update(c.id, {
+                    formula_raw: new_formula_raw,
+                  });
+                }
+              }
+            }
+            return Promise.resolve(res);
+          } else {
+            (c as any).cn = c.column_name;
+          }
+          return Promise.resolve(c);
+        })
+      ),
+    };
+
+    const sqlMgr = await ProjectMgrv2.getSqlMgr({ id: base.project_id });
+    await sqlMgr.sqlOpPlus(base, 'tableUpdate', tableUpdateBody);
+  
+    await Column.update(req.params.columnId, {
       ...colBody,
-      });
+    });
   }
   Audit.insert({
     project_id: base.project_id,
diff --git a/packages/nocodb/src/lib/models/Column.ts b/packages/nocodb/src/lib/models/Column.ts
index 2fbad1377c..39b6473f27 100644
--- a/packages/nocodb/src/lib/models/Column.ts
+++ b/packages/nocodb/src/lib/models/Column.ts
@@ -3,7 +3,6 @@ import LinkToAnotherRecordColumn from './LinkToAnotherRecordColumn';
 import LookupColumn from './LookupColumn';
 import RollupColumn from './RollupColumn';
 import SelectOption from './SelectOption';
-import MultiSelectColumn from './MultiSelectColumn';
 import Model from './Model';
 import NocoCache from '../cache/NocoCache';
 import { ColumnType, UITypes } from 'nocodb-sdk';
@@ -244,7 +243,7 @@ export default class Column<T = any> implements ColumnType {
             );
           }
         } else {
-          for (const [i, option] of column.options.entries() || [].entries()) {
+          for (const [i, option] of column.colOptions.options.entries() || [].entries()) {
             await SelectOption.insert(
               {
                 ...option,
@@ -270,7 +269,7 @@ export default class Column<T = any> implements ColumnType {
             );
           }
         } else {
-          for (const [i, option] of column.options.entries() || [].entries()) {
+          for (const [i, option] of column.colOptions.options.entries() || [].entries()) {
             await SelectOption.insert(
               {
                 ...option,
@@ -850,7 +849,7 @@ export default class Column<T = any> implements ColumnType {
       o = { ...o, ...updateObj };
       // set cache
       await NocoCache.set(key, o);
-    }
+    }    
     // set meta
     await ncMeta.metaUpdate(
       null,

From 04fe13ce0939c7d048116f8a609e2adebabdcf5d Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Jul 2022 11:31:37 +0300
Subject: [PATCH 03/26] feat: cells supporting new select columns

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../spreadsheet/components/cell/EnumCell.vue  | 38 ++++-------
 .../components/cell/SetListCell.vue           | 16 ++---
 .../editableCell/EnumListEditableCell.vue     | 21 +++---
 .../editableCell/SetListEditableCell.vue      | 66 +++++++++++--------
 4 files changed, 70 insertions(+), 71 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
index 0467c0145c..e0506b2852 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
@@ -1,50 +1,40 @@
 <template>
   <div>
-    <span
-      v-for="v in [(value || '').replace(/\\'/g, '\'').replace(/^'|'$/g, '')]"
-      :key="v"
-      :style="{
-        background: colors[v],
-      }"
+    <v-chip
+      v-if="enumValues.find(el => el.title === value)"
+      :color="enumValues.find(el => el.title === value) ? enumValues.find(el => el.title === value).color : ''"
+      small
       class="set-item ma-1 py-1 px-3"
-      >{{ v }}</span
     >
+      {{ enumValues.find(el => el.title === value).title }}
+    </v-chip>
   </div>
 </template>
 
 <script>
-import { enumColor as colors } from '@/components/project/spreadsheet/helpers/colors';
-
 export default {
   name: 'EnumCell',
   props: ['value', 'column'],
   computed: {
-    colors() {
-      const col = this.$store.state.settings.darkTheme ? colors.dark : colors.light;
-      if (this.column && this.column.dtxp) {
-        return this.column.dtxp
-          .split(',')
-          .map(v => v.replace(/\\'/g, "'").replace(/^'|'$/g, ''))
-          .reduce(
-            (obj, v, i) => ({
-              ...obj,
-              [v]: col[i],
-            }),
-            {}
-          );
+    enumValues() {
+      const opts = this.column.colOptions.options || [];
+      for (const op of opts.filter(el => el.order === null)) {
+        op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
-      return {};
-    },
+      return opts;
+    }
   },
 };
 </script>
 
 <style scoped>
+/*
 .set-item {
   display: inline-block;
   border-radius: 25px;
   white-space: nowrap;
 }
+*/
 </style>
 <!--
 /**
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
index 5940b73e48..678391e35e 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
@@ -2,10 +2,10 @@
   <div>
     <v-chip
       v-for="v in selectedValues"
-      v-show="v || setValues.includes(v)"
+      v-show="v && setValues.find(el => el.title === v)"
       :key="v"
       small
-      :color="colors[setValues.indexOf(v) % colors.length]"
+      :color="setValues.find(el => el.title === v) ? setValues.find(el => el.title === v).color : ''"
       class="set-item ma-1 py-1 px-3"
     >
       {{ v }}
@@ -14,21 +14,19 @@
 </template>
 
 <script>
-import colors from '@/mixins/colors';
-
 export default {
   name: 'SetListCell',
-  mixins: [colors],
   props: ['value', 'column'],
   computed: {
     setValues() {
-      if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map(v => v.replace(/\\'/g, "'").replace(/^'|'$/g, ''));
+      const opts = this.column.colOptions.options || [];
+      for (const op of opts.filter(el => el.order === null)) {
+        op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
-      return [];
+      return opts;
     },
     selectedValues() {
-      return this.value ? this.value.split(',').map(v => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) : [];
+      return this.value ? this.value.split(',') : [];
     },
   },
 };
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
index 0c0aa47d3e..b093083d7b 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
@@ -1,10 +1,12 @@
 <template>
   <v-select
     v-model="localState"
+    :items="enumValues"
+    :menu-props="{ bottom: true, offsetY: true }"
+    item-value="title"
     solo
     dense
     flat
-    :items="enumValues"
     hide-details
     class="mt-0"
     :clearable="!column.rqd"
@@ -17,14 +19,14 @@
           'text-center': !isForm,
         }"
       >
-        <v-chip small :color="colors[enumValues.indexOf(item) % colors.length]" class="ma-1">
-          {{ item }}
+        <v-chip small :color="item.color" class="ma-1">
+          {{ item.title }}
         </v-chip>
       </div>
     </template>
     <template #item="{ item }">
-      <v-chip small :color="colors[enumValues.indexOf(item) % colors.length]">
-        {{ item }}
+      <v-chip small :color="item.color">
+        {{ item.title }}
       </v-chip>
     </template>
     <template #append>
@@ -48,17 +50,18 @@ export default {
   computed: {
     localState: {
       get() {
-        return this.value && this.value.replace(/\\'/g, "'").replace(/^'|'$/g, '');
+        return this.value;
       },
       set(val) {
         this.$emit('input', val);
       },
     },
     enumValues() {
-      if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map(v => v.replace(/\\'/g, "'").replace(/^'|'$/g, ''));
+      const opts = this.column.colOptions.options || [];
+      for (const op of opts.filter(el => el.order === null)) {
+        op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
-      return [];
+      return opts;
     },
     parentListeners() {
       const $listeners = {};
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
index f62c568bc9..f6493d0f17 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
-    <v-combobox
+    <v-select
       v-model="localState"
       :items="setValues"
+      :menu-props="{ bottom: true, offsetY: true }"
+      item-value="title"
       multiple
       chips
       flat
@@ -14,34 +16,32 @@
     >
       <template #selection="data">
         <v-chip
-          :key="data.item"
+          :color="data.item.color"
           small
           class="ma-1"
-          :color="colors[setValues.indexOf(data.item) % colors.length]"
           @click:close="data.parent.selectItem(data.item)"
         >
-          {{ data.item }}
+          {{ data.item.title }}
         </v-chip>
       </template>
 
-      <template #item="{ item }">
-        <v-chip small :color="colors[setValues.indexOf(item) % colors.length]">
-          {{ item }}
+      <template #item="{item}">
+        <v-chip small :color="item.color">
+          {{ item.title }}
         </v-chip>
       </template>
       <template #append>
-        <v-icon small class="mt-2"> mdi-menu-down </v-icon>
+        <v-icon small class="mt-1">
+          mdi-menu-down
+        </v-icon>
       </template>
-    </v-combobox>
+    </v-select>
   </div>
 </template>
 
 <script>
-import colors from '@/mixins/colors';
-
 export default {
   name: 'SetListEditableCell',
-  mixins: [colors],
   props: {
     value: String,
     column: Object,
@@ -49,19 +49,18 @@ export default {
   computed: {
     localState: {
       get() {
-        return this.value && this.value.match(/(?:[^',]|\\')+(?='?(?:,|$))/g).map(v => v.replace(/\\'/g, "'"));
+        return typeof this.value === 'string' ? this.value.split(',') : [];
       },
       set(val) {
-        this.$emit('input', val.filter(v => this.setValues.includes(v)).join(','));
+        this.$emit('input', val.filter(v => this.setValues.find(el => el.title === v)).join(','));
       },
     },
     setValues() {
-      if (this.column && this.column.dtxp) {
-        return this.column.dtxp
-          .match(/(?:[^']|\\')+(?='?(?:,|$))/g)
-          .map(v => v.replace(/\\'/g, "'").replace(/^'|'$/g, ''));
+      const opts = this.column.colOptions.options || [];
+      for (const op of opts.filter(el => el.order === null)) {
+        op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
-      return [];
+      return opts;
     },
     parentListeners() {
       const $listeners = {};
@@ -86,17 +85,26 @@ export default {
 };
 </script>
 
-<style scoped>
-select {
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-  -webkit-appearance: menulist;
-  /*webkit browsers */
-  -moz-appearance: menulist;
-  /*Firefox */
-  appearance: menulist;
+<style scoped lang="scss">
+
+::v-deep {
+  .v-select {
+    min-width: 150px;
+    .v-select__selections {
+      min-height: 38px !important;
+    }
+  }
+  .v-input__slot{
+    padding-right: 0 !important;
+  }
+  .v-input__icon.v-input__icon--clear {
+    width: 15px !important;
+    .v-icon {
+      font-size: 13px !important;
+    }
+  }
 }
+
 </style>
 <!--
 /**

From 05bb2b7ea16e2afc754a5c54ba8630447ab65133 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Jul 2022 11:33:16 +0300
Subject: [PATCH 04/26] feat: restrict duplicate select options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb/src/lib/meta/api/columnApis.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index 95900cdc7b..d52d37d9d7 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -519,7 +519,6 @@ export async function columnAdd(req: Request, res: Response<TableType>) {
             ? `${colBody.colOptions.options.map((o) => {
                 if(o.title.includes(',')) {
                   NcError.badRequest('Illegal char(\',\') for MultiSelect');
-                  throw new Error('');
                 }
                 return `'${o.title.replace(/'/gi, '\'\'')}'`;
               }).join(',')}`
@@ -680,7 +679,6 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         ? `${colBody.colOptions.options.map((o) => {
             if(o.title.includes(',')) {
               NcError.badRequest('Illegal char(\',\') for MultiSelect');
-              throw new Error('');
             }
             return `'${o.title.replace(/'/gi, '\'\'')}'`;
           }).join(',')}`
@@ -698,6 +696,16 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '')
       }
 
+      // Restrict duplicates
+      const titles = colBody.colOptions.options.map(el => el.title)
+      if (titles
+        .some( function(item) {
+          return titles.indexOf(item) !== titles.lastIndexOf(item);
+        })
+      ) {
+        NcError.badRequest('Duplicates are not allowed!');
+      }
+
       // Handle option delete
       for (const option of column.colOptions.options.filter(oldOp => colBody.colOptions.options.find(newOp => newOp.id === oldOp.id) ? false : true)) {
         if (column.uidt === UITypes.SingleSelect) { 

From 0c9558cceb54f683aa0b2a3db4ac7230b3146584 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Jul 2022 12:22:08 +0300
Subject: [PATCH 05/26] feat: select option support for pg, mssql, sqlite

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nocodb/src/lib/meta/api/columnApis.ts     | 39 +++++++++++++++----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index d52d37d9d7..86cb4b90ba 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -691,6 +691,8 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
     });
 
     if (column.colOptions?.options) {
+      const supportedDrivers = ['mysql', 'mysql2', 'pg', 'mssql', 'sqlite3'];
+
       // Handle migrations
       for (const op of column.colOptions.options.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '')
@@ -706,19 +708,34 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         NcError.badRequest('Duplicates are not allowed!');
       }
 
+      const dbDriver = NcConnectionMgrv2.get(base);
+      const driverType = dbDriver.clientType();
+
       // Handle option delete
       for (const option of column.colOptions.options.filter(oldOp => colBody.colOptions.options.find(newOp => newOp.id === oldOp.id) ? false : true)) {
+        if (!supportedDrivers.includes(driverType) && column.uidt === UITypes.MultiSelect) {
+          NcError.badRequest('Your database not yet supported for this operation. Please remove option from records manually before dropping.');
+        }
         if (column.uidt === UITypes.SingleSelect) { 
-          await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${option.title})` }, { [column.title]: null });
+          await baseModel.bulkUpdateAll({ where: `(${column.title},like,${option.title})` }, { [column.title]: null });
         } else if (column.uidt === UITypes.MultiSelect) {
-          const dbDriver = NcConnectionMgrv2.get(base);
-          // TODO find_in_set for MySQL optimization
-          await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), ','))`, [table.table_name, column.title, column.title, option.title]);
+          if (driverType === 'mysql' || driverType === 'mysql2') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), ',')) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, option.title, option.title, column.title]);
+          } else if (driverType === 'pg') {
+            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_remove(string_to_array(??, ','), ?), ',')`, [table.table_name, column.title, column.title, option.title]);
+          } else if (driverType === 'mssql') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), ','), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), ',')) - 2)`, [table.table_name, column.title, column.title, option.title, column.title, option.title]);
+          } else if (driverType === 'sqlite3') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ','), ',')`, [table.table_name, column.title, column.title, option.title]);
+          }
         }
       }
 
       // Handle option update
       for (const option of column.colOptions.options.filter(oldOp => colBody.colOptions.options.find(newOp => newOp.id === oldOp.id && newOp.title !== oldOp.title))) {
+        if (!supportedDrivers.includes(driverType) && column.uidt === UITypes.MultiSelect) {
+          NcError.badRequest('Your database not yet supported for this operation. Please remove option from records manually before updating.');
+        }
         let newOp = colBody.colOptions.options.find(el => option.id === el.id);
         column.colOptions.options.push({ title: newOp.title });
 
@@ -775,11 +792,17 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         });
 
         if (column.uidt === UITypes.SingleSelect) { 
-          await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${option.title})` }, { [column.title]: newOp.title });
+          await baseModel.bulkUpdateAll({ where: `(${column.title},like,${option.title})` }, { [column.title]: newOp.title });
         } else if (column.uidt === UITypes.MultiSelect) {
-          const dbDriver = NcConnectionMgrv2.get(base);
-          // TODO find_in_set for MySQL optimization
-          await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ',')))`, [table.table_name, column.title, column.title, option.title, newOp.title]);
+          if (driverType === 'mysql' || driverType === 'mysql2') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, option.title, newOp.title, option.title, column.title]);
+          } else if (driverType === 'pg') {
+            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`, [table.table_name, column.title, column.title, option.title, newOp.title]);
+          } else if (driverType === 'mssql') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ',')), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ','))) - 2)`, [table.table_name, column.title, column.title, option.title, newOp.title, column.title, option.title, newOp.title]);
+          } else if (driverType === 'sqlite3') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ',' || ? || ','), ',')`, [table.table_name, column.title, column.title, option.title, newOp.title]);
+          }
         }
       }
     }

From ce7c65cad42ba2ec612a30de7ff192ebd1d2fe68 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Jul 2022 12:39:23 +0300
Subject: [PATCH 06/26] feat: close button for multiselect records

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/editableCell/SetListEditableCell.vue         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
index f6493d0f17..01d85f2170 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
@@ -18,6 +18,8 @@
         <v-chip
           :color="data.item.color"
           small
+          close
+          close-icon="mdi-close"
           class="ma-1"
           @click:close="data.parent.selectItem(data.item)"
         >
@@ -103,6 +105,10 @@ export default {
       font-size: 13px !important;
     }
   }
+  .mdi-close {
+    font-size: 12px !important;
+    color: gray !important;
+  }
 }
 
 </style>

From 67f50ccfb141dd7eb80d7ba1b1b43f25b912fc52 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Jul 2022 16:55:56 +0300
Subject: [PATCH 07/26] fix: fallback using dtxp if no option provided

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb/src/lib/models/Column.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nocodb/src/lib/models/Column.ts b/packages/nocodb/src/lib/models/Column.ts
index 39b6473f27..f85c987c53 100644
--- a/packages/nocodb/src/lib/models/Column.ts
+++ b/packages/nocodb/src/lib/models/Column.ts
@@ -231,12 +231,12 @@ export default class Column<T = any> implements ColumnType {
         break;
       }
       case UITypes.MultiSelect: {
-        if (column.dt === 'set' && !column.altered) {
+        if (!column.colOptions?.options) {
           for (const [i, option] of column.dtxp?.split(',').entries() || [].entries()) {
             await SelectOption.insert(
               {
                 fk_column_id: colId,
-                title: option,
+                title: option.replace(/^'/, '').replace(/'$/, ''),
                 order: i + 1
               },
               ncMeta
@@ -257,12 +257,12 @@ export default class Column<T = any> implements ColumnType {
         break;
       }
       case UITypes.SingleSelect: {
-        if (column.dt === 'enum' && !column.altered) {
+        if (!column.colOptions?.options) {
           for (const [i, option] of column.dtxp?.split(',').entries() || [].entries()) {
             await SelectOption.insert(
               {
                 fk_column_id: colId,
-                title: option,
+                title: option.replace(/^'/, '').replace(/'$/, ''),
                 order: i + 1
               },
               ncMeta

From 183e0e7fb253a192bb23a1fd2d13f1c94dd03598 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Jul 2022 17:36:52 +0300
Subject: [PATCH 08/26] feat: add colors for fallback

---
 packages/nocodb/src/lib/models/Column.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nocodb/src/lib/models/Column.ts b/packages/nocodb/src/lib/models/Column.ts
index f85c987c53..4a0f2afc9f 100644
--- a/packages/nocodb/src/lib/models/Column.ts
+++ b/packages/nocodb/src/lib/models/Column.ts
@@ -232,12 +232,14 @@ export default class Column<T = any> implements ColumnType {
       }
       case UITypes.MultiSelect: {
         if (!column.colOptions?.options) {
+          const selectColors = [ '#cfdffe', '#d0f1fd', '#c2f5e8', '#ffdaf6', '#ffdce5', '#fee2d5', '#ffeab6', '#d1f7c4', '#ede2fe', '#eeeeee', ];
           for (const [i, option] of column.dtxp?.split(',').entries() || [].entries()) {
             await SelectOption.insert(
               {
                 fk_column_id: colId,
                 title: option.replace(/^'/, '').replace(/'$/, ''),
-                order: i + 1
+                order: i + 1,
+                color: selectColors[i % selectColors.length]
               },
               ncMeta
             );
@@ -258,12 +260,14 @@ export default class Column<T = any> implements ColumnType {
       }
       case UITypes.SingleSelect: {
         if (!column.colOptions?.options) {
+          const selectColors = [ '#cfdffe', '#d0f1fd', '#c2f5e8', '#ffdaf6', '#ffdce5', '#fee2d5', '#ffeab6', '#d1f7c4', '#ede2fe', '#eeeeee', ];
           for (const [i, option] of column.dtxp?.split(',').entries() || [].entries()) {
             await SelectOption.insert(
               {
                 fk_column_id: colId,
                 title: option.replace(/^'/, '').replace(/'$/, ''),
-                order: i + 1
+                order: i + 1,
+                color: selectColors[i % selectColors.length]
               },
               ncMeta
             );

From 8511991fcfd7f32ffe742009512170d71b2c2de6 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 20 Jul 2022 17:38:15 +0300
Subject: [PATCH 09/26] fix: revise at import for select column changes

---
 .../src/lib/meta/api/sync/helpers/job.ts      | 64 +++++++++++++++----
 1 file changed, 52 insertions(+), 12 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
index e9a165efec..a7c05c62f0 100644
--- a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
+++ b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
@@ -15,6 +15,19 @@ import { importData, importLTARData } from './readAndProcessData';
 
 dayjs.extend(utc);
 
+const selectColors = {
+  "blue": "#cfdfff",
+  "cyan": "#d0f0fd",
+  "teal": "#c2f5e9",
+  "green": "#d1f7c4",
+  "orange": "#fee2d5",
+  "yellow": "#ffeab6",
+  "red": "#ffdce5",
+  "pink": "#ffdaf6",
+  "purple": "#ede2fe",
+  "gray": "#eee"
+}
+
 export default async (
   syncDB: AirtableSyncConfig,
   progress: (data: { msg?: string; level?: any }) => void
@@ -383,21 +396,37 @@ export default async (
         // prepare options list in CSV format
         // note: NC doesn't allow comma's in options
         //
-        const opt = [];
+        const options = [];
+        let order = 1;
         for (const [, value] of Object.entries(col.typeOptions.choices)) {
-          opt.push((value as any).name);
+          // replace commas with dot for multiselect
+          if (col.type === 'multiSelect') {
+            (value as any).name = (value as any).name.replace(/,/g, '.');
+          }
+          // we don't allow empty records, placeholder instead
+          if ((value as any).name === '') {
+            (value as any).name = 'nc_empty';
+          }
+          // enumerate duplicates (we don't allow them)
+          // TODO fix record mapping (this causes every record to map first option, we can't handle them using data api as they don't provide option id within data we might instead get the correct mapping from schema file )
+          let dupNo = 1;
+          const defaultName = (value as any).name;
+          while (options.find(el => el.title === (value as any).name)) {
+            (value as any).name = `${defaultName}_${dupNo++}`;
+          }
+          options.push({
+            order: order++,
+            title: (value as any).name,
+            color: selectColors[(value as any).color] ? selectColors[(value as any).color] : null
+          });
+
           sMap.addToMappingTbl(
             (value as any).id,
             undefined,
             (value as any).name
           );
         }
-        // const csvOpt = "'" + opt.join("','") + "'";
-        const optSansDuplicate = [...new Set(opt)];
-        const csvOpt = optSansDuplicate
-          .map((v) => `'${v.replace(/'/g, "\\'").replace(/,/g, '.')}'`)
-          .join(',');
-        return { type: 'select', data: csvOpt };
+        return { type: col.type, data: options };
       }
       default:
         return { type: undefined };
@@ -507,9 +536,12 @@ export default async (
 
         switch (colOptions.type) {
           case 'select':
-            ncCol.dtxp = colOptions.data;
+          case 'multiSelect':
+            ncCol.colOptions = {
+              options: [...colOptions.data]
+            }
+            ncCol.dtxp = colOptions.data.map(el => `'${el.title}'`).join(',');
             break;
-
           case undefined:
             break;
         }
@@ -1320,11 +1352,19 @@ export default async (
           break;
 
         case UITypes.SingleSelect:
-          rec[key] = value.replace(/,/g, '.');
+          if (value === '') {
+            rec[key] = 'nc_empty';
+          }
+          rec[key] = value;
           break;
 
         case UITypes.MultiSelect:
-          rec[key] = value.map((v) => `${v.replace(/,/g, '.')}`).join(',');
+          rec[key] = value.map((v) => {
+            if (v === '') {
+              return 'nc_empty';
+            }
+            return `${v.replace(/,/g, '.')}`;
+          }).join(',');
           break;
 
         case UITypes.Attachment:

From 85335ee4f5a19d9535faebc91681d133856d4e4f Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 22 Jul 2022 12:47:55 +0300
Subject: [PATCH 10/26] fix: commenter/viewer roles view of select column

Re #2767

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../project/spreadsheet/components/EditableCell.vue           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
index 3a17c47868..dd8e261652 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
@@ -64,7 +64,7 @@
     <date-time-picker-cell v-else-if="isDateTime" v-model="localState" ignore-focus v-on="parentListeners" />
 
     <enum-cell
-      v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))"
+      v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm) || !_isUIAllowed('tableRowUpdate'))"
       v-model="localState"
       :column="column"
       v-on="parentListeners"
@@ -80,7 +80,7 @@
     />
 
     <set-list-editable-cell
-      v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)"
+      v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm) && _isUIAllowed('tableRowUpdate')"
       v-model="localState"
       :column="column"
       v-on="parentListeners"

From 66525a8769cc36202646232ba44968ed8d01d797 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 22 Jul 2022 20:16:47 +0300
Subject: [PATCH 11/26] fix: form view for select column

Re #2767

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../spreadsheet/components/EditableCell.vue   |  1 +
 .../editableCell/EnumListEditableCell.vue     | 78 ++++++++++---------
 .../editableCell/SetListEditableCell.vue      | 11 ++-
 3 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
index dd8e261652..31e88d48fc 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
@@ -83,6 +83,7 @@
       v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm) && _isUIAllowed('tableRowUpdate')"
       v-model="localState"
       :column="column"
+      :is-form="isForm"
       v-on="parentListeners"
     />
     <set-list-cell v-else-if="isSet" v-model="localState" :column="column" v-on="parentListeners" />
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
index b093083d7b..f536cecf81 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
@@ -1,47 +1,45 @@
 <template>
-  <v-select
-    v-model="localState"
-    :items="enumValues"
-    :menu-props="{ bottom: true, offsetY: true }"
-    item-value="title"
-    solo
-    dense
-    flat
-    hide-details
-    class="mt-0"
-    :clearable="!column.rqd"
-    v-on="parentListeners"
-  >
-    <template #selection="{ item }">
-      <div
-        class="d-100"
-        :class="{
-          'text-center': !isForm,
-        }"
-      >
-        <v-chip small :color="item.color" class="ma-1">
+  <div>
+    <v-select
+      v-model="localState"
+      :items="enumValues"
+      :menu-props="{ bottom: true, offsetY: true }"
+      item-value="title"
+      solo
+      dense
+      flat
+      hide-details
+      :class="`mt-0 ${isForm ? 'form-select': ''}`"
+      :clearable="!column.rqd"
+      v-on="parentListeners"
+    >
+      <template #selection="{ item }">
+        <div
+          class="d-100"
+          :class="{
+            'text-center': !isForm,
+          }"
+        >
+          <v-chip small :color="item.color" class="ma-1">
+            {{ item.title }}
+          </v-chip>
+        </div>
+      </template>
+      <template #item="{ item }">
+        <v-chip small :color="item.color">
           {{ item.title }}
         </v-chip>
-      </div>
-    </template>
-    <template #item="{ item }">
-      <v-chip small :color="item.color">
-        {{ item.title }}
-      </v-chip>
-    </template>
-    <template #append>
-      <v-icon small class="mt-1"> mdi-menu-down </v-icon>
-    </template>
-  </v-select>
+      </template>
+      <template #append>
+        <v-icon small class="mt-1"> mdi-menu-down </v-icon>
+      </template>
+    </v-select>
+  </div>
 </template>
 
 <script>
-import colors from '@/mixins/colors';
-
 export default {
   name: 'EnumListEditableCell',
-  mixins: [colors],
-
   props: {
     value: String,
     column: Object,
@@ -103,6 +101,14 @@ export default {
       font-size: 13px !important;
     }
   }
+  .form-select {
+    .v-select__selections {
+      border: 1px solid rgba(127,130,139,0.2);
+    }
+    input {
+      z-index: -1;
+    }
+  }
 }
 </style>
 <!--
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
index 01d85f2170..7e3b3ef062 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
@@ -12,7 +12,7 @@
       solo
       hide-details
       deletable-chips
-      class="text-center mt-0"
+      :class="`text-center mt-0 ${isForm ? 'form-select': ''}`"
     >
       <template #selection="data">
         <v-chip
@@ -47,6 +47,7 @@ export default {
   props: {
     value: String,
     column: Object,
+    isForm: Boolean,
   },
   computed: {
     localState: {
@@ -109,6 +110,14 @@ export default {
     font-size: 12px !important;
     color: gray !important;
   }
+  .form-select {
+    .v-select__selections {
+      border: 1px solid rgba(127,130,139,0.2);
+    }
+    input {
+      z-index: -1;
+    }
+  }
 }
 
 </style>

From 974d435e19f70554f9de1636310aba313318bf46 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 22 Jul 2022 23:06:32 +0300
Subject: [PATCH 12/26] fix: lookup fails after option update

Re #2767

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/editColumn/CustomSelectOptions.vue      | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
index 9e4aac381d..02eb1abbd9 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
@@ -87,6 +87,11 @@ export default {
             },
           };
           await this.$api.dbTableColumn.create(this.meta.id, selectCol);
+          if (this.column.colOptions) {
+            this.$store
+              .dispatch('meta/ActLoadMeta', { force: true, id: this.column.fk_model_id })
+              .then(() => {});
+          }
           this.$toast.success('Select column saved successfully').goAway(3000);
           return true;
         }
@@ -107,6 +112,11 @@ export default {
             },
           };
           await this.$api.dbTableColumn.update(this.column.id, selectCol);
+          if (this.column.colOptions) {
+            this.$store
+              .dispatch('meta/ActLoadMeta', { force: true, id: this.column.fk_model_id })
+              .then(() => {});
+          }
           return true;
         }
         return false;

From 9afa64b1bccde534913cb3119982f64786297c31 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 23 Jul 2022 17:20:19 +0300
Subject: [PATCH 13/26] fix: typo on ActLoadMeta

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/project/spreadsheet/RowsXcDataTable.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue
index 26e19fa7ea..9050b33055 100644
--- a/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue
@@ -889,7 +889,7 @@ export default {
       this.$store.dispatch('meta/ActLoadMeta', {
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias,
-        tn: this.table,
+        table_name: this.table,
         force: true,
       });
       if (this.selectedView && this.selectedView.show_as === 'kanban') {

From cfe77987c096c25fa0d075583ee32c847c0b7631 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 23 Jul 2022 17:33:33 +0300
Subject: [PATCH 14/26] fix: add missing else statement

Re #2776

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb/src/lib/meta/api/columnApis.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index 86cb4b90ba..5672b8026a 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -662,7 +662,7 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
     NcError.notImplemented(
       `Updating ${colBody.uidt} => ${colBody.uidt} is not implemented`
     );
-  } if(
+  } else if(
     [
       UITypes.SingleSelect,
       UITypes.MultiSelect
@@ -866,7 +866,6 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
     });
   } else {
     colBody = getColumnPropsFromUIDT(colBody, base);
-    
     const tableUpdateBody = {
       ...table,
       tn: table.table_name,
@@ -920,7 +919,7 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
 
     const sqlMgr = await ProjectMgrv2.getSqlMgr({ id: base.project_id });
     await sqlMgr.sqlOpPlus(base, 'tableUpdate', tableUpdateBody);
-  
+
     await Column.update(req.params.columnId, {
       ...colBody,
     });

From 81bc459835e7a1d4ffe4b60826ba29b48c8a8f5d Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 24 Jul 2022 12:21:31 +0300
Subject: [PATCH 15/26] fix(ui): allow select columns with no options

Re #2764

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../project/spreadsheet/components/cell/EnumCell.vue          | 4 +++-
 .../project/spreadsheet/components/cell/SetListCell.vue       | 4 +++-
 .../components/editableCell/EnumListEditableCell.vue          | 4 +++-
 .../components/editableCell/SetListEditableCell.vue           | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
index e0506b2852..cacbb43ee7 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
@@ -17,7 +17,9 @@ export default {
   props: ['value', 'column'],
   computed: {
     enumValues() {
-      const opts = this.column.colOptions.options || [];
+      const opts = (this.column.colOptions)
+        ? this.column.colOptions.options.filter(el => el.title !== '') || []
+        : [];
       for (const op of opts.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
index 678391e35e..717554417b 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
@@ -19,7 +19,9 @@ export default {
   props: ['value', 'column'],
   computed: {
     setValues() {
-      const opts = this.column.colOptions.options || [];
+      const opts = (this.column.colOptions)
+        ? this.column.colOptions.options.filter(el => el.title !== '') || []
+        : [];
       for (const op of opts.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
index f536cecf81..e9f1dd000f 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
@@ -55,7 +55,9 @@ export default {
       },
     },
     enumValues() {
-      const opts = this.column.colOptions.options || [];
+      const opts = (this.column.colOptions)
+        ? this.column.colOptions.options.filter(el => el.title !== '') || []
+        : [];
       for (const op of opts.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
index 7e3b3ef062..8ff31570a3 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
@@ -59,7 +59,9 @@ export default {
       },
     },
     setValues() {
-      const opts = this.column.colOptions.options || [];
+      const opts = (this.column.colOptions)
+        ? this.column.colOptions.options.filter(el => el.title !== '') || []
+        : [];
       for (const op of opts.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }

From 673f552d9f917d81dfaccb7270d39316b85dbd39 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 24 Jul 2022 12:25:53 +0300
Subject: [PATCH 16/26] fix: handle select columns with no options

Re #2764

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nocodb/src/lib/meta/api/columnApis.ts     | 78 +++++++++++++++----
 1 file changed, 63 insertions(+), 15 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index 5672b8026a..3fd3300f10 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -510,20 +510,52 @@ export async function columnAdd(req: Request, res: Response<TableType>) {
           colBody.dtxs = '4';
         }
 
-        if (colBody.uidt === UITypes.SingleSelect) {
-          colBody.dtxp = (colBody.colOptions?.options.length)
-            ? `${colBody.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
-            : '';
-        } else if (colBody.uidt === UITypes.MultiSelect){
-          colBody.dtxp = (colBody.colOptions?.options.length)
-            ? `${colBody.colOptions.options.map((o) => {
-                if(o.title.includes(',')) {
-                  NcError.badRequest('Illegal char(\',\') for MultiSelect');
-                }
-                return `'${o.title.replace(/'/gi, '\'\'')}'`;
-              }).join(',')}`
-            : '';
+        if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(colBody.uidt)) {
+          const dbDriver = NcConnectionMgrv2.get(base);
+          const driverType = dbDriver.clientType();
+          
+          // Restrict duplicates
+          const titles = colBody.colOptions.options.map(el => el.title)
+          if (titles
+            .some( function(item) {
+              return titles.indexOf(item) !== titles.lastIndexOf(item);
+            })
+          ) {
+            NcError.badRequest('Duplicates are not allowed!');
+          }
+
+          // Restrict empty options
+          if (titles
+            .some( function(item) {
+              return item === '';
+            })
+          ) {
+            NcError.badRequest('Empty options are not allowed!');
+          }
+
+          // Handle empty enum/set for mysql (we restrict empty user options beforehand)
+          if (driverType === 'mysql' || driverType === 'mysql2') {
+            if (!colBody.colOptions.options.length && (!colBody.dtxp || colBody.dtxp === '')) {
+              colBody.colOptions.options.push({ title: '' });
+            }
+          }
+          
+          if (colBody.uidt === UITypes.SingleSelect) {
+            colBody.dtxp = (colBody.colOptions?.options.length)
+              ? `${colBody.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
+              : '';
+          } else if (colBody.uidt === UITypes.MultiSelect){
+            colBody.dtxp = (colBody.colOptions?.options.length)
+              ? `${colBody.colOptions.options.map((o) => {
+                  if(o.title.includes(',')) {
+                    NcError.badRequest('Illegal char(\',\') for MultiSelect');
+                  }
+                  return `'${o.title.replace(/'/gi, '\'\'')}'`;
+                }).join(',')}`
+              : '';
+          }
         }
+        
 
         const tableUpdateBody = {
           ...table,
@@ -692,7 +724,10 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
 
     if (column.colOptions?.options) {
       const supportedDrivers = ['mysql', 'mysql2', 'pg', 'mssql', 'sqlite3'];
+      const dbDriver = NcConnectionMgrv2.get(base);
+      const driverType = dbDriver.clientType();
 
+      
       // Handle migrations
       for (const op of column.colOptions.options.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '')
@@ -708,8 +743,21 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         NcError.badRequest('Duplicates are not allowed!');
       }
 
-      const dbDriver = NcConnectionMgrv2.get(base);
-      const driverType = dbDriver.clientType();
+      // Restrict empty options
+      if (titles
+        .some( function(item) {
+          return item === '';
+        })
+      ) {
+        NcError.badRequest('Empty options are not allowed!');
+      }
+
+      // Handle empty enum/set for mysql (we restrict empty user options beforehand)
+      if (driverType === 'mysql' || driverType === 'mysql2') {
+        if (!colBody.colOptions.options.length && (!colBody.dtxp || colBody.dtxp === '')) {
+          colBody.dtxp = '\'\'';
+        }
+      }
 
       // Handle option delete
       for (const option of column.colOptions.options.filter(oldOp => colBody.colOptions.options.find(newOp => newOp.id === oldOp.id) ? false : true)) {

From 866d10ab18fd04420e07cd6ceb8dfce11e611c4f Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 24 Jul 2022 14:17:30 +0300
Subject: [PATCH 17/26] fix: handle interchange of options

Re #2774

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nocodb/src/lib/meta/api/columnApis.ts     | 154 ++++++++++++------
 1 file changed, 101 insertions(+), 53 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index 3fd3300f10..598817a16e 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -765,7 +765,11 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
           NcError.badRequest('Your database not yet supported for this operation. Please remove option from records manually before dropping.');
         }
         if (column.uidt === UITypes.SingleSelect) { 
-          await baseModel.bulkUpdateAll({ where: `(${column.title},like,${option.title})` }, { [column.title]: null });
+          if (driverType === 'mssql') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = NULL WHERE ?? LIKE ?`, [table.table_name, column.title, column.title, option.title]);
+          } else {
+            await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${option.title})` }, { [column.title]: null });
+          }
         } else if (column.uidt === UITypes.MultiSelect) {
           if (driverType === 'mysql' || driverType === 'mysql2') {
             await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), ',')) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, option.title, option.title, column.title]);
@@ -779,68 +783,91 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         }
       }
 
+      let interchange = [];
+
       // Handle option update
+      const old_titles = column.colOptions.options.map(el => el.title);
       for (const option of column.colOptions.options.filter(oldOp => colBody.colOptions.options.find(newOp => newOp.id === oldOp.id && newOp.title !== oldOp.title))) {
         if (!supportedDrivers.includes(driverType) && column.uidt === UITypes.MultiSelect) {
           NcError.badRequest('Your database not yet supported for this operation. Please remove option from records manually before updating.');
         }
-        let newOp = colBody.colOptions.options.find(el => option.id === el.id);
-        column.colOptions.options.push({ title: newOp.title });
-
-        let temp_dtxp = '';
-        if (column.uidt === UITypes.SingleSelect) {
-          temp_dtxp = (column.colOptions?.options.length)
-            ? `${column.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
-            : '';
-        } else if (column.uidt === UITypes.MultiSelect){
-          temp_dtxp = (column.colOptions?.options.length)
-            ? `${column.colOptions.options.map((o) => {
-                if(o.title.includes(',')) {
-                  NcError.badRequest('Illegal char(\',\') for MultiSelect');
-                  throw new Error('');
-                }
-                return `'${o.title.replace(/'/gi, '\'\'')}'`;
-              }).join(',')}`
-            : '';
+
+        let newOp = { ...colBody.colOptions.options.find(el => option.id === el.id) };
+        if (old_titles.includes(newOp.title)) {
+          let def_option = { ...newOp };
+          let title_counter = 1;
+          while (old_titles.includes(newOp.title)) {
+            newOp.title = `${def_option.title}_${title_counter++}`;
+          }
+          interchange.push( {
+            def_option,
+            temp_title: newOp.title
+          } );
         }
+        
+        // Append new option before editing
+        if ((driverType === 'mysql' || driverType === 'mysql2') && (column.dt === 'enum' || column.dt === 'set')) {
+          column.colOptions.options.push({ title: newOp.title });
+
+          let temp_dtxp = '';
+          if (column.uidt === UITypes.SingleSelect) {
+            temp_dtxp = (column.colOptions?.options.length)
+              ? `${column.colOptions.options.map(o => `'${o.title.replace(/'/gi, '\'\'')}'`).join(',')}`
+              : '';
+          } else if (column.uidt === UITypes.MultiSelect){
+            temp_dtxp = (column.colOptions?.options.length)
+              ? `${column.colOptions.options.map((o) => {
+                  if(o.title.includes(',')) {
+                    NcError.badRequest('Illegal char(\',\') for MultiSelect');
+                    throw new Error('');
+                  }
+                  return `'${o.title.replace(/'/gi, '\'\'')}'`;
+                }).join(',')}`
+              : '';
+          }
 
-        const tableUpdateBody = {
-          ...table,
-          tn: table.table_name,
-          originalColumns: table.columns.map((c) => ({
-            ...c,
-            cn: c.column_name,
-            cno: c.column_name,
-          })),
-          columns: await Promise.all(
-            table.columns.map(async (c) => {
-              if (c.id === req.params.columnId) {
-                const res = {
-                  ...c,
-                  ...column,
-                  cn: column.column_name,
-                  cno: c.column_name,
-                  dtxp: temp_dtxp,
-                  altered: Altered.UPDATE_COLUMN,
-                };
-                return Promise.resolve(res);
-              } else {
-                (c as any).cn = c.column_name;
-              }
-              return Promise.resolve(c);
-            })
-          ),
-        };
+          const tableUpdateBody = {
+            ...table,
+            tn: table.table_name,
+            originalColumns: table.columns.map((c) => ({
+              ...c,
+              cn: c.column_name,
+              cno: c.column_name,
+            })),
+            columns: await Promise.all(
+              table.columns.map(async (c) => {
+                if (c.id === req.params.columnId) {
+                  const res = {
+                    ...c,
+                    ...column,
+                    cn: column.column_name,
+                    cno: c.column_name,
+                    dtxp: temp_dtxp,
+                    altered: Altered.UPDATE_COLUMN,
+                  };
+                  return Promise.resolve(res);
+                } else {
+                  (c as any).cn = c.column_name;
+                }
+                return Promise.resolve(c);
+              })
+            ),
+          };
 
-        const sqlMgr = await ProjectMgrv2.getSqlMgr({ id: base.project_id });
-        await sqlMgr.sqlOpPlus(base, 'tableUpdate', tableUpdateBody);
-      
-        await Column.update(req.params.columnId, {
-          ...column,
-        });
+          const sqlMgr = await ProjectMgrv2.getSqlMgr({ id: base.project_id });
+          await sqlMgr.sqlOpPlus(base, 'tableUpdate', tableUpdateBody);
+        
+          await Column.update(req.params.columnId, {
+            ...column,
+          });
+        }
 
         if (column.uidt === UITypes.SingleSelect) { 
-          await baseModel.bulkUpdateAll({ where: `(${column.title},like,${option.title})` }, { [column.title]: newOp.title });
+          if (driverType === 'mssql') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = ? WHERE ?? LIKE ?`, [table.table_name, column.title, newOp.title, column.title, option.title]);
+          } else {
+            await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${option.title})` }, { [column.title]: newOp.title });
+          }
         } else if (column.uidt === UITypes.MultiSelect) {
           if (driverType === 'mysql' || driverType === 'mysql2') {
             await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, option.title, newOp.title, option.title, column.title]);
@@ -853,6 +880,27 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
           }
         }
       }
+
+      for (const ch of interchange) {
+        let newOp = ch.def_option;
+        if (column.uidt === UITypes.SingleSelect) { 
+          if (driverType === 'mssql') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = ? WHERE ?? LIKE ?`, [table.table_name, column.title, newOp.title, column.title, ch.temp_title]);
+          } else {
+            await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${ch.temp_title})` }, { [column.title]: newOp.title });
+          }
+        } else if (column.uidt === UITypes.MultiSelect) {
+          if (driverType === 'mysql' || driverType === 'mysql2') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title, ch.temp_title, column.title]);
+          } else if (driverType === 'pg') {
+            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title]);
+          } else if (driverType === 'mssql') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ',')), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ','))) - 2)`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title, column.title, ch.temp_title, newOp.title]);
+          } else if (driverType === 'sqlite3') {
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ',' || ? || ','), ',')`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title]);
+          }
+        }
+      }
     }
 
     const tableUpdateBody = {

From 283d8637fbdcee801b5dcc1fadb800c4a85fc052 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 24 Jul 2022 14:51:28 +0300
Subject: [PATCH 18/26] fix: handle multiselect to singleselect

Re #2770

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb/src/lib/meta/api/columnApis.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index 598817a16e..aa034d4a6d 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -727,7 +727,19 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
       const dbDriver = NcConnectionMgrv2.get(base);
       const driverType = dbDriver.clientType();
 
-      
+      // MultiSelect to SingleSelect
+      if (column.uidt === UITypes.MultiSelect && colBody.uidt === UITypes.SingleSelect) {
+        if (driverType === 'mysql' || driverType === 'mysql2') {
+          await dbDriver.raw(`UPDATE ?? SET ?? = SUBSTRING_INDEX(??, ',', 1) WHERE ?? LIKE '%,%';`, [table.table_name, column.title, column.title, column.title]);
+        } else if (driverType === 'pg') {
+          await dbDriver.raw(`UPDATE ?? SET ?? = split_part(??, ',', 1);`, [table.table_name, column.title, column.title]);
+        } else if (driverType === 'mssql') {
+          await dbDriver.raw(`UPDATE ?? SET ?? = LEFT(cast(?? as varchar(max)), CHARINDEX(',', ??) - 1) WHERE CHARINDEX(',', ??) > 0;`, [table.table_name, column.title, column.title, column.title, column.title]);
+        } else if (driverType === 'sqlite3') {
+          await dbDriver.raw(`UPDATE ?? SET ?? = substr(??, 1, instr(??, ',') - 1) WHERE ?? LIKE '%,%';`, [table.table_name, column.title, column.title, column.title, column.title]);
+        }
+      }
+
       // Handle migrations
       for (const op of column.colOptions.options.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '')

From adb659589ae9d5d71d1f42462a7b6b59d91d3596 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 24 Jul 2022 17:17:50 +0300
Subject: [PATCH 19/26] fix: default value containing comma breaks drop column
 for sqlite

Re #2766

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nocodb/src/lib/db/sql-client/lib/sqlite/SqliteClient.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nocodb/src/lib/db/sql-client/lib/sqlite/SqliteClient.ts b/packages/nocodb/src/lib/db/sql-client/lib/sqlite/SqliteClient.ts
index dd44df14d2..ea5224cb9d 100644
--- a/packages/nocodb/src/lib/db/sql-client/lib/sqlite/SqliteClient.ts
+++ b/packages/nocodb/src/lib/db/sql-client/lib/sqlite/SqliteClient.ts
@@ -1965,13 +1965,13 @@ class SqliteClient extends KnexClient {
       query = existingQuery ? ',' : '';
       query += this.genQuery(`?? ${n.dt}`, [n.cn], shouldSanitize);
       query += n.dtxp && n.dt !== 'text' ? `(${n.dtxp})` : '';
-      query += n.cdf ? ` DEFAULT ${n.cdf}` : ' ';
+      query += n.cdf ? (n.cdf.includes(',') ? ` DEFAULT ('${n.cdf}')` : ` DEFAULT ${n.cdf}`) : ' ';
       query += n.rqd ? ` NOT NULL` : ' ';
     } else if (change === 1) {
       shouldSanitize = true;
       query += this.genQuery(` ADD ?? ${n.dt}`, [n.cn], shouldSanitize);
       query += n.dtxp && n.dt !== 'text' ? `(${n.dtxp})` : '';
-      query += n.cdf ? ` DEFAULT ${n.cdf}` : ' ';
+      query += n.cdf ? (n.cdf.includes(',') ? ` DEFAULT ('${n.cdf}')` : ` DEFAULT ${n.cdf}`) : ' ';
       query += n.rqd ? ` NOT NULL` : ' ';
       query = this.genQuery(`ALTER TABLE ?? ${query};`, [t], shouldSanitize);
     } else {

From 54e5cb8e873dfb42fb5e7a97d9c1a57343cf266c Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 24 Jul 2022 18:03:44 +0300
Subject: [PATCH 20/26] fix: mssql default value query fails for text & ntext

Re #2766

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nocodb/src/lib/db/sql-client/lib/mssql/MssqlClient.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nocodb/src/lib/db/sql-client/lib/mssql/MssqlClient.ts b/packages/nocodb/src/lib/db/sql-client/lib/mssql/MssqlClient.ts
index 43c87d66ca..6b76897da1 100644
--- a/packages/nocodb/src/lib/db/sql-client/lib/mssql/MssqlClient.ts
+++ b/packages/nocodb/src/lib/db/sql-client/lib/mssql/MssqlClient.ts
@@ -2379,13 +2379,13 @@ class MssqlClient extends KnexClient {
     return this.schema ? `${this.schema}.${t}` : t;
   }
 
-  alterTableRemoveColumn(t, n, o, existingQuery) {
+  alterTableRemoveColumn(t, n, _o, existingQuery) {
     const shouldSanitize = true;
     let query = existingQuery ? ';' : '';
     if (n.cdf) {
       query += this.genQuery(
         `\nALTER TABLE ?? DROP CONSTRAINT ??;`,
-        [this.getTnPath(t), o.default_constraint_name || `DF_${t}_${n.cn}`],
+        [this.getTnPath(t), n.default_constraint_name || `DF_${t}_${n.cn}`],
         shouldSanitize
       );
     }
@@ -2625,6 +2625,10 @@ function getDefaultValue(n) {
       }
       return JSON.stringify(n.cdf);
       break;
+    case 'text':
+    case 'ntext':
+      return `'${n.cdf}'`;
+      break;
     default:
       return JSON.stringify(n.cdf);
       break;

From 718499846a403d1844fafc2a1ad1f9b19ed5c17b Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 24 Jul 2022 18:13:06 +0300
Subject: [PATCH 21/26] fix: unified default value for select columns

Re #2766

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../spreadsheet/components/EditColumn.vue     | 10 +++++-
 .../nocodb/src/lib/meta/api/columnApis.ts     | 35 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
index d08afc6a10..d08e227d18 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
@@ -399,7 +399,7 @@
                                 <v-textarea
                                   v-model="newColumn.cdf"
                                   :label="$t('placeholder.defaultValue')"
-                                  :hint="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
+                                  :hint="defaultValueHint"
                                   persistent-hint
                                   rows="3"
                                   outlined
@@ -586,6 +586,14 @@ export default {
     isDate() {
       return this.newColumn && this.newColumn.uidt === UITypes.Date;
     },
+    defaultValueHint() {
+      if (this.newColumn.uidt === UITypes.MultiSelect) {
+        return 'eg : a,b,c';
+      } else if (this.newColumn.uidt === UITypes.SingleSelect) {
+        return 'eg : a';
+      }
+      return this.sqlUi.getDefaultValueForDatatype(this.newColumn.dt);
+    },
   },
   watch: {
     column() {
diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index aa034d4a6d..cc441c0cb4 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -513,7 +513,25 @@ export async function columnAdd(req: Request, res: Response<TableType>) {
         if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(colBody.uidt)) {
           const dbDriver = NcConnectionMgrv2.get(base);
           const driverType = dbDriver.clientType();
-          
+          const optionTitles = colBody.colOptions.options.map(el => el.title);
+          // Handle default values
+          if (colBody.cdf) {
+            if (colBody.uidt === UITypes.SingleSelect) {
+              if (!optionTitles.includes(colBody.cdf)) {
+                NcError.badRequest(`Default value '${colBody.cdf}' is not a select option.`);
+              }
+            } else {
+              for (const cdf of colBody.cdf.split(',')) {
+                if (!optionTitles.includes(cdf)) {
+                  NcError.badRequest(`Default value '${cdf}' is not a select option.`);
+                }
+              }
+            }
+            if (driverType === 'pg') {
+              colBody.cdf = `'${colBody.cdf}'`;
+            }
+          }
+
           // Restrict duplicates
           const titles = colBody.colOptions.options.map(el => el.title)
           if (titles
@@ -745,6 +763,21 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '')
       }
 
+      // Handle default values
+      if (colBody.cdf) {
+        
+        if (driverType === 'mysql' || driverType === 'mysql2') {
+          
+        } else if (driverType === 'pg') {
+          
+        } else if (driverType === 'mssql') {
+          
+        } else if (driverType === 'sqlite3') {
+          
+        }
+      }
+      
+
       // Restrict duplicates
       const titles = colBody.colOptions.options.map(el => el.title)
       if (titles

From bb861efe9793d00e181b4e97b366f2778ef4e230 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 24 Jul 2022 18:13:28 +0300
Subject: [PATCH 22/26] chore: fix prettier

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../spreadsheet/components/EditableCell.vue    |  4 +++-
 .../spreadsheet/components/cell/EnumCell.vue   |  6 ++----
 .../components/cell/SetListCell.vue            |  4 +---
 .../editColumn/CustomSelectOptions.vue         | 10 +++-------
 .../editableCell/EnumListEditableCell.vue      |  8 +++-----
 .../editableCell/SetListEditableCell.vue       | 18 ++++++------------
 6 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
index 31e88d48fc..c1264d780c 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue
@@ -64,7 +64,9 @@
     <date-time-picker-cell v-else-if="isDateTime" v-model="localState" ignore-focus v-on="parentListeners" />
 
     <enum-cell
-      v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm) || !_isUIAllowed('tableRowUpdate'))"
+      v-else-if="
+        isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm) || !_isUIAllowed('tableRowUpdate'))
+      "
       v-model="localState"
       :column="column"
       v-on="parentListeners"
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
index cacbb43ee7..8c3757fe27 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/EnumCell.vue
@@ -17,14 +17,12 @@ export default {
   props: ['value', 'column'],
   computed: {
     enumValues() {
-      const opts = (this.column.colOptions)
-        ? this.column.colOptions.options.filter(el => el.title !== '') || []
-        : [];
+      const opts = this.column.colOptions ? this.column.colOptions.options.filter(el => el.title !== '') || [] : [];
       for (const op of opts.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
       return opts;
-    }
+    },
   },
 };
 </script>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
index 717554417b..77bfe9816d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/SetListCell.vue
@@ -19,9 +19,7 @@ export default {
   props: ['value', 'column'],
   computed: {
     setValues() {
-      const opts = (this.column.colOptions)
-        ? this.column.colOptions.options.filter(el => el.title !== '') || []
-        : [];
+      const opts = this.column.colOptions ? this.column.colOptions.options.filter(el => el.title !== '') || [] : [];
       for (const op of opts.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
index 02eb1abbd9..7827e21ecd 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue
@@ -54,7 +54,7 @@ export default {
     this.options = this.copyOptions(this.column.colOptions?.options) || [];
     // Support for older options
     for (const op of this.options.filter(el => el.order === null)) {
-      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+      op.title = op.title.replace(/^'/, '').replace(/'$/, '');
     }
   },
   methods: {
@@ -88,9 +88,7 @@ export default {
           };
           await this.$api.dbTableColumn.create(this.meta.id, selectCol);
           if (this.column.colOptions) {
-            this.$store
-              .dispatch('meta/ActLoadMeta', { force: true, id: this.column.fk_model_id })
-              .then(() => {});
+            this.$store.dispatch('meta/ActLoadMeta', { force: true, id: this.column.fk_model_id }).then(() => {});
           }
           this.$toast.success('Select column saved successfully').goAway(3000);
           return true;
@@ -113,9 +111,7 @@ export default {
           };
           await this.$api.dbTableColumn.update(this.column.id, selectCol);
           if (this.column.colOptions) {
-            this.$store
-              .dispatch('meta/ActLoadMeta', { force: true, id: this.column.fk_model_id })
-              .then(() => {});
+            this.$store.dispatch('meta/ActLoadMeta', { force: true, id: this.column.fk_model_id }).then(() => {});
           }
           return true;
         }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
index e9f1dd000f..8f501b6f93 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue
@@ -9,7 +9,7 @@
       dense
       flat
       hide-details
-      :class="`mt-0 ${isForm ? 'form-select': ''}`"
+      :class="`mt-0 ${isForm ? 'form-select' : ''}`"
       :clearable="!column.rqd"
       v-on="parentListeners"
     >
@@ -55,9 +55,7 @@ export default {
       },
     },
     enumValues() {
-      const opts = (this.column.colOptions)
-        ? this.column.colOptions.options.filter(el => el.title !== '') || []
-        : [];
+      const opts = this.column.colOptions ? this.column.colOptions.options.filter(el => el.title !== '') || [] : [];
       for (const op of opts.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
@@ -105,7 +103,7 @@ export default {
   }
   .form-select {
     .v-select__selections {
-      border: 1px solid rgba(127,130,139,0.2);
+      border: 1px solid rgba(127, 130, 139, 0.2);
     }
     input {
       z-index: -1;
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
index 8ff31570a3..6305e1cd24 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue
@@ -12,7 +12,7 @@
       solo
       hide-details
       deletable-chips
-      :class="`text-center mt-0 ${isForm ? 'form-select': ''}`"
+      :class="`text-center mt-0 ${isForm ? 'form-select' : ''}`"
     >
       <template #selection="data">
         <v-chip
@@ -27,15 +27,13 @@
         </v-chip>
       </template>
 
-      <template #item="{item}">
+      <template #item="{ item }">
         <v-chip small :color="item.color">
           {{ item.title }}
         </v-chip>
       </template>
       <template #append>
-        <v-icon small class="mt-1">
-          mdi-menu-down
-        </v-icon>
+        <v-icon small class="mt-1"> mdi-menu-down </v-icon>
       </template>
     </v-select>
   </div>
@@ -59,9 +57,7 @@ export default {
       },
     },
     setValues() {
-      const opts = (this.column.colOptions)
-        ? this.column.colOptions.options.filter(el => el.title !== '') || []
-        : [];
+      const opts = this.column.colOptions ? this.column.colOptions.options.filter(el => el.title !== '') || [] : [];
       for (const op of opts.filter(el => el.order === null)) {
         op.title = op.title.replace(/^'/, '').replace(/'$/, '');
       }
@@ -91,7 +87,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
 ::v-deep {
   .v-select {
     min-width: 150px;
@@ -99,7 +94,7 @@ export default {
       min-height: 38px !important;
     }
   }
-  .v-input__slot{
+  .v-input__slot {
     padding-right: 0 !important;
   }
   .v-input__icon.v-input__icon--clear {
@@ -114,14 +109,13 @@ export default {
   }
   .form-select {
     .v-select__selections {
-      border: 1px solid rgba(127,130,139,0.2);
+      border: 1px solid rgba(127, 130, 139, 0.2);
     }
     input {
       z-index: -1;
     }
   }
 }
-
 </style>
 <!--
 /**

From eb473e012a7281dc71336ca585149c1ae2d96a51 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 24 Jul 2022 18:45:20 +0300
Subject: [PATCH 23/26] fix: use option values when sorted by select columns

Re #2779

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../lib/db/sql-data-mapper/lib/sql/sortV2.ts  | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/sortV2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/sortV2.ts
index 574c19359d..d199fb9372 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/sortV2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/sortV2.ts
@@ -207,6 +207,30 @@ export default async function sortV2(
           qb.orderBy(selectQb, sort.direction || 'asc');
         }
         break;
+      case UITypes.SingleSelect:
+        {
+          const clientType = knex.clientType();
+          if (clientType === 'mysql' || clientType === 'mysql2') {
+            qb.orderBy(sanitize(knex.raw('CONCAT(??)', [column.column_name])), sort.direction || 'asc');
+          } else if (clientType === 'mssql') {
+            qb.orderBy(sanitize(knex.raw('CAST(?? AS VARCHAR(MAX))', [column.column_name])), sort.direction || 'asc');
+          } else {
+            qb.orderBy(sanitize(column.column_name), sort.direction || 'asc');
+          }
+          break;
+        }
+      case UITypes.MultiSelect:
+        {
+          const clientType = knex.clientType();
+          if (clientType === 'mysql' || clientType === 'mysql2') {
+            qb.orderBy(sanitize(knex.raw('CONCAT(??)', [column.column_name])), sort.direction || 'asc');
+          } else if (clientType === 'mssql') {
+            qb.orderBy(sanitize(knex.raw('CAST(?? AS VARCHAR(MAX))', [column.column_name])), sort.direction || 'asc');
+          } else {
+            qb.orderBy(sanitize(column.column_name), sort.direction || 'asc');
+          }
+          break;
+        }
       default:
         qb.orderBy(sanitize(column.column_name), sort.direction || 'asc');
         break;

From b2648acd8f653881000fe6ee08dd9c46c6c9b1e7 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 5 Aug 2022 12:05:48 +0200
Subject: [PATCH 24/26] feat(gui-v2): add icons resolver to component
 auto-loader

---
 packages/nc-gui-v2/nuxt.config.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 18ff65ac2b..c2060d7c0b 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -2,6 +2,7 @@ import path from 'path'
 import { defineNuxtConfig } from 'nuxt'
 import vueI18n from '@intlify/vite-plugin-vue-i18n'
 import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 import monacoEditorPlugin from 'vite-plugin-monaco-editor'
@@ -68,6 +69,9 @@ export default defineNuxtConfig({
           AntDesignVueResolver({
             importStyle: 'less',
           }),
+          IconsResolver({
+            prefix: false,
+          }),
         ],
       }),
       monacoEditorPlugin({

From 60d0a2a939952ce49d167576f9b422870b5ca6a6 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 5 Aug 2022 12:13:34 +0200
Subject: [PATCH 25/26] chore(gui-v2): replace icons in app.vue with autoloaded
 ones

---
 packages/nc-gui-v2/app.vue         | 20 ++++++++------------
 packages/nc-gui-v2/components.d.ts |  5 +++++
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 9ca0b862d5..5ae49b4f84 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -1,9 +1,4 @@
 <script lang="ts" setup>
-import MdiAt from '~icons/mdi/at'
-import MdiLogout from '~icons/mdi/logout'
-import MdiDotsVertical from '~icons/mdi/dots-vertical'
-import MaterialSymbolsMenu from '~icons/material-symbols/menu'
-import MdiReload from '~icons/mdi/reload'
 import { navigateTo } from '#app'
 import { useGlobal } from '#imports'
 
@@ -31,7 +26,7 @@ const toggleSidebar = () => {
 <template>
   <a-layout class="min-h-[100vh]">
     <a-layout-header class="flex !bg-primary items-center text-white px-4 shadow-md">
-      <MaterialSymbolsMenu v-if="state.signedIn.value" class="text-xl cursor-pointer" @click="toggleSidebar" />
+      <material-symbols-menu v-if="state.signedIn.value" class="text-xl cursor-pointer" @click="toggleSidebar" />
 
       <div class="flex-1" />
 
@@ -43,7 +38,7 @@ const toggleSidebar = () => {
 
         <div v-show="state.isLoading.value" class="flex items-center gap-2 ml-3">
           {{ $t('general.loading') }}
-          <MdiReload :class="{ 'animate-infinite animate-spin': state.isLoading.value }" />
+          <mdi-reload :class="{ 'animate-infinite animate-spin': state.isLoading.value }" />
         </div>
       </div>
 
@@ -54,7 +49,7 @@ const toggleSidebar = () => {
 
         <template v-if="state.signedIn.value">
           <a-dropdown :trigger="['click']">
-            <MdiDotsVertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />
+            <mdi-dots-vertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />
 
             <template #overlay>
               <a-menu class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded">
@@ -69,10 +64,11 @@ const toggleSidebar = () => {
 
                 <a-menu-item key="1" class="!rounded-b">
                   <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="signOut">
-                    <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
-                    <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">{{
-                      $t('general.signOut')
-                    }}</span>
+                    <mdi-logout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
+
+                    <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
+                      {{ $t('general.signOut') }}
+                    </span>
                   </div>
                 </a-menu-item>
               </a-menu>
diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 41b227464c..ca9f1693ce 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -61,6 +61,11 @@ declare module '@vue/runtime-core' {
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
+    MaterialSymbolsMenu: typeof import('~icons/material-symbols/menu')['default']
+    MdiAt: typeof import('~icons/mdi/at')['default']
+    MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
+    MdiLogout: typeof import('~icons/mdi/logout')['default']
+    MdiReload: typeof import('~icons/mdi/reload')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

From 50eab8093a3483a428a8eadfd0e20642b5ae545a Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Sat, 6 Aug 2022 13:43:13 +0530
Subject: [PATCH 26/26] refactor: cy marker for spreadshet cell read

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index ca531d1c26..da6c1fa2f6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -270,6 +270,7 @@ const onNavigate = (dir: NavigateDir) => {
                   active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
                 }"
                 :data-col="columnObj.id"
+                :data-title="columnObj.title"
                 @click="selectCell(rowIndex, colIndex)"
                 @dblclick="editEnabled = true"
                 @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"