From 58b6b9aedc544d9fd9e60b9c422217855edcf276 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 5 Aug 2022 19:16:01 +0300
Subject: [PATCH] feat(gui-v2): single/multi select cells

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |   1 +
 .../nc-gui-v2/components/cell/MultiSelect.vue | 131 ++++++++++--------
 .../components/cell/SingleSelect.vue          |  74 ++++------
 packages/nocodb-sdk/src/lib/Api.ts            |   8 +-
 scripts/sdk/swagger.json                      |  39 ++++--
 5 files changed, 135 insertions(+), 118 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index e41983c665..c83503cfa4 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -57,6 +57,7 @@ declare module '@vue/runtime-core' {
     ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
+    ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index d33373e547..b80b76e870 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,76 +1,97 @@
 <script lang="ts" setup>
+import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
 import { ColumnInj } from '~/context'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | string[] | undefined
 }
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { isMysql } = useProject()
+
 const column = inject(ColumnInj)
 
-const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => {
+  if (column?.colOptions) {
+    const opts = column.colOptions ? column.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || [] : []
+    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+    }
+    return opts
+  }
+  return []
+})
 
-const localState = computed({
-  get() {
-    return modelValue?.match(/(?:[^',]|\\')+(?='?(?:,|$))/g)?.map((v: string) => v.replace(/\\'/g, "'"))
-  },
-  set(val?: string[]) {
-    emit('update:modelValue', val?.filter((v) => options.value.includes(v)).join(','))
-  },
+const vModel = computed({
+  get: () =>
+    modelValue
+      ? typeof modelValue === 'string'
+        ? isMysql
+          ? modelValue.split(',').sort((a, b) => {
+              const opa = options.value.find((el: SelectOptionType) => el.title === a)
+              const opb = options.value.find((el: SelectOptionType) => el.title === b)
+              return opa.order - opb.order
+            })
+          : modelValue.split(',')
+        : modelValue
+      : [],
+  set: (val) => emit('update:modelValue', val.join(',')),
 })
 </script>
 
 <template>
-  <!--
-  <v-select
-    v-model="localState"
-    :items="options"
-    hide-details
-    :clearable="!column.rqd"
-    variation="outlined"
-    multiple
-  />
--->
-
-  <v-combobox
-    v-model="localState"
-    :items="options"
-    multiple
-    chips
-    flat
-    dense
-    solo
-    hide-details
-    deletable-chips
-    class="text-center mt-0"
+  <a-select
+    v-model:value="vModel"
+    mode="multiple"
+    class="w-full"
+    placeholder="Select an option"
+    :bordered="false"
+    show-arrow
+    :show-search="false"
   >
-    <!--    <template #selection="data"> -->
-    <!--      <v-chip -->
-    <!--        :key="data.item" -->
-    <!--        small -->
-    <!--        class="ma-1 " -->
-    <!--        :color="colors[setValues.indexOf(data.item) % colors.length]" -->
-    <!--        @click:close="data.parent.selectItem(data.item)" -->
-    <!--      > -->
-    <!--        {{ data.item }} -->
-    <!--      </v-chip> -->
-    <!--    </template> -->
-
-    <!--    <template #item="{item}"> -->
-    <!--      <v-chip small :color="colors[setValues.indexOf(item) % colors.length]"> -->
-    <!--        {{ item }} -->
-    <!--      </v-chip> -->
-    <!--    </template> -->
-    <!--    <template #append> -->
-    <!--      <v-icon small class="mt-2"> -->
-    <!--        mdi-menu-down -->
-    <!--      </v-icon> -->
-    <!--    </template> -->
-  </v-combobox>
+    <a-select-option v-for="op of options" :key="op.title" style="cursor: pointer">
+      <a-tag :color="op.color">
+        <span class="text-slate-500">{{ op.title }}</span>
+      </a-tag>
+    </a-select-option>
+    <template #tagRender="{ value: val, label, onClose }">
+      <a-tag :color="label[0].props.color" :closable="true" @close="onClose">
+        <span class="text-slate-500">{{ val }}</span>
+      </a-tag>
+    </template>
+  </a-select>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.ant-tag-close-icon) {
+  @apply "text-slate-500";
+}
+</style>
+<!--
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Naveen MR <oof1lab@gmail.com>
+ * @author Pranav C Balan <pranavxc@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+-->
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 75821474b8..2fd15c71a4 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
 import { ColumnInj } from '~/context'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | undefined
 }
 
 const { modelValue } = defineProps<Props>()
@@ -13,60 +14,39 @@ const emit = defineEmits(['update:modelValue'])
 const column = inject(ColumnInj)!
 
 const vModel = computed({
-  get: () => modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, ''),
+  get: () => modelValue,
   set: (val) => emit('update:modelValue', val),
 })
 
-const options = computed(() => column.value.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => {
+  if (column?.colOptions) {
+    const opts = column.colOptions ? column.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || [] : []
+    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+    }
+    return opts
+  }
+  return []
+})
 </script>
 
 <template>
-  <v-select v-model="vModel" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
-    <!--    v-on="parentListeners"
-    <template #selection="{ item }">
-      <div
-        class="d-100"
-        :class="{
-          'text-center': !isForm,
-        }"
-      >
-        <v-chip small :color="enumColor.light[options.indexOf(item) % enumColor.light.length]" class="ma-1">
-          {{ item.text }}
-        </v-chip>
-      </div>
-    </template>
-    <template #item="{ item }">
-      <v-chip small :color="enumColor.light[options.indexOf(item) % enumColor.light.length]">
-        {{ item }}
-      </v-chip>
-    </template>
-    <template #append>
-      <v-icon small class="mt-1"> mdi-menu-down</v-icon>
-    </template> -->
-  </v-select>
+  <a-select
+    v-model:value="vModel"
+    class="w-full fill"
+    :allow-clear="!column.rqd"
+    placeholder="Select an option"
+    :bordered="false"
+  >
+    <a-select-option v-for="op of options" :key="op.title">
+      <a-tag :color="op.color">
+        <span class="text-slate-500">{{ op.title }}</span>
+      </a-tag>
+    </a-select-option>
+  </a-select>
 </template>
 
-<style scoped lang="scss">
-/*:deep {
-  .v-select {
-    min-width: 150px;
-  }
-
-  .v-input__slot {
-    padding-right: 0 !important;
-    padding-left: 35px !important;
-  }
-
-  .v-input__icon.v-input__icon--clear {
-    width: 15px !important;
-    min-width: 13px !important;
-
-    .v-icon {
-      font-size: 13px !important;
-    }
-  }
-}*/
-</style>
+<style scoped lang="scss"></style>
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index f3d6548d06..fe836437d6 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -242,7 +242,7 @@ export interface ColumnType {
     | FormulaType
     | RollupType
     | LookupType
-    | SelectOptionsType[]
+    | SelectOptionsType
     | object;
 }
 
@@ -303,9 +303,11 @@ export interface FormulaType {
 }
 
 export interface SelectOptionsType {
+  options: SelectOptionType;
+}
+
+export interface SelectOptionType {
   id?: string;
-  type?: string;
-  virtual?: boolean;
   fk_column_id?: string;
   title?: string;
   color?: string;
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 97f7a52a62..f0d7eda0b9 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -6605,10 +6605,7 @@
                 "$ref": "#/components/schemas/Lookup"
               },
               {
-                "type": "array",
-                "items": {
-                  "$ref": "#/components/schemas/SelectOptions"
-                }
+                "$ref": "#/components/schemas/SelectOptions"
               },
               {
                 "type": "object"
@@ -6821,16 +6818,34 @@
       "SelectOptions": {
         "title": "SelectOptions",
         "type": "object",
+        "properties": {
+          "options": {
+            "type": "array",
+            "required": true,
+            "$ref": "#/components/schemas/SelectOption"
+          }
+        },
+        "examples": [
+          {
+            "options": [
+              {
+                "id": "string",
+                "fk_column_id": "string",
+                "title": "string",
+                "color": "string",
+                "order": 1
+              }
+            ]
+          }
+        ]
+      },
+      "SelectOption": {
+        "title": "SelectOption",
+        "type": "object",
         "properties": {
           "id": {
             "type": "string"
           },
-          "type": {
-            "type": "string"
-          },
-          "virtual": {
-            "type": "boolean"
-          },
           "fk_column_id": {
             "type": "string"
           },
@@ -6847,12 +6862,10 @@
         "examples": [
           {
             "id": "string",
-            "type": "string",
-            "virtual": true,
             "fk_column_id": "string",
             "title": "string",
             "color": "string",
-            "order": 0
+            "order": 1
           }
         ]
       },