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] 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>
 <!--
 /**