From 1d52a65efd6d25ddb0413ebf3252b8d2b3718023 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 6 Jul 2022 23:41:27 +0530
Subject: [PATCH] feat(gui-v2): add single/multi select

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../editable-cell/EnumRadioEditableCell.vue   | 101 ------------------
 .../components/editable-cell/Float.vue        |  37 +++++++
 .../components/editable-cell/FloatCell.vue    |  69 ------------
 .../components/editable-cell/Integer.vue      |  37 +++++++
 .../components/editable-cell/IntegerCell.vue  |  69 ------------
 ...etListCheckboxCell.vue => MultiSelect.vue} |  54 +++++-----
 ...mListEditableCell.vue => SingleSelect.vue} |  73 +++++++------
 .../components/smartsheet/EditableCell.vue    |   5 +-
 .../nc-gui-v2/components/tabs/Smartsheet.vue  |   2 +-
 packages/nc-gui-v2/composables/useColumn.ts   |   4 +
 10 files changed, 151 insertions(+), 300 deletions(-)
 delete mode 100644 packages/nc-gui-v2/components/editable-cell/EnumRadioEditableCell.vue
 create mode 100644 packages/nc-gui-v2/components/editable-cell/Float.vue
 delete mode 100644 packages/nc-gui-v2/components/editable-cell/FloatCell.vue
 create mode 100644 packages/nc-gui-v2/components/editable-cell/Integer.vue
 delete mode 100644 packages/nc-gui-v2/components/editable-cell/IntegerCell.vue
 rename packages/nc-gui-v2/components/editable-cell/{SetListCheckboxCell.vue => MultiSelect.vue} (63%)
 rename packages/nc-gui-v2/components/editable-cell/{EnumListEditableCell.vue => SingleSelect.vue} (65%)

diff --git a/packages/nc-gui-v2/components/editable-cell/EnumRadioEditableCell.vue b/packages/nc-gui-v2/components/editable-cell/EnumRadioEditableCell.vue
deleted file mode 100644
index cb6ee08fcf..0000000000
--- a/packages/nc-gui-v2/components/editable-cell/EnumRadioEditableCell.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script>
-import { enumColor as colors } from '@/components/project/spreadsheet/helpers/colors'
-
-export default {
-  name: 'EnumRadioEditableCell',
-  props: {
-    value: String,
-    column: Object,
-  },
-  computed: {
-    colors() {
-      return this.$store.state.settings.darkTheme ? colors.dark : colors.light
-    },
-    localState: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-        this.$emit('update')
-      },
-    },
-    enumValues() {
-      if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map((v) => v.replace(/^'|'$/g, ''))
-      }
-      return []
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-      return $listeners
-    },
-  },
-  mounted() {
-    // this.$el.focus();
-    // let event;
-    // event = document.createEvent('MouseEvents');
-    // event.initMouseEvent('mousedown', true, true, window);
-    // this.$el.dispatchEvent(event);
-  },
-}
-</script>
-
-<template>
-  <div class="d-flex align-center">
-    <div>
-      <div v-for="(val, i) of enumValues" :key="val" class="item">
-        <input :id="`key-radio-${val}`" v-model="localState" type="radio" class="orange--text" :value="val" />
-        <label
-          class="py-1 px-3 d-inline-block my-1 label"
-          :for="`key-radio-${val}`"
-          :style="{
-            background: colors[i % colors.length],
-          }"
-          >{{ val }}</label
-        >
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.label {
-  border-radius: 25px;
-}
-
-.item {
-  white-space: nowrap;
-}
-</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/editable-cell/Float.vue b/packages/nc-gui-v2/components/editable-cell/Float.vue
new file mode 100644
index 0000000000..844d706300
--- /dev/null
+++ b/packages/nc-gui-v2/components/editable-cell/Float.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { computed } from "@vue/reactivity";
+import { onMounted } from "vue";
+
+const { modelValue: value } = defineProps<{ modelValue: any }>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const root = ref<HTMLInputElement>()
+
+const localState = computed({
+  get() {
+    return value
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+onMounted(() => {
+  root.value?.focus()
+})
+
+</script>
+
+<template>
+  <input ref="root" v-model="localState" type="number" />
+</template>
+
+<style scoped>
+input {
+  outline: none;
+  width: 100%;
+  height: 100%;
+  color: var(--v-textColor-base);
+}
+</style>
diff --git a/packages/nc-gui-v2/components/editable-cell/FloatCell.vue b/packages/nc-gui-v2/components/editable-cell/FloatCell.vue
deleted file mode 100644
index a4e0ebfc42..0000000000
--- a/packages/nc-gui-v2/components/editable-cell/FloatCell.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-export default {
-  name: 'FloatCell',
-  props: {
-    value: [String, Number],
-  },
-  computed: {
-    localState: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', +val)
-      },
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-  mounted() {
-    this.$el.focus()
-  },
-}
-</script>
-
-<template>
-  <input v-model="localState" type="number" v-on="parentListeners" />
-</template>
-
-<style scoped>
-input {
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-}
-</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/editable-cell/Integer.vue b/packages/nc-gui-v2/components/editable-cell/Integer.vue
new file mode 100644
index 0000000000..80daf55641
--- /dev/null
+++ b/packages/nc-gui-v2/components/editable-cell/Integer.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from "@vue/reactivity";
+import { onMounted } from "vue";
+
+const { modelValue: value } = defineProps<{ modelValue: any }>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const root = ref<HTMLInputElement>()
+
+const localState = computed({
+  get() {
+    return value
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+onMounted(() => {
+  root.value?.focus()
+})
+
+</script>
+
+<template>
+  <input ref="root" v-model="localState" type="number" />
+</template>
+
+<style scoped>
+input {
+  outline: none;
+  width: 100%;
+  height: 100%;
+  color: var(--v-textColor-base);
+}
+</style>
diff --git a/packages/nc-gui-v2/components/editable-cell/IntegerCell.vue b/packages/nc-gui-v2/components/editable-cell/IntegerCell.vue
deleted file mode 100644
index 23eae31208..0000000000
--- a/packages/nc-gui-v2/components/editable-cell/IntegerCell.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-export default {
-  name: 'IntegerCell',
-  props: {
-    value: [String, Number],
-  },
-  computed: {
-    localState: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', parseInt(val, 10))
-      },
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-  mounted() {
-    this.$el.focus()
-  },
-}
-</script>
-
-<template>
-  <input v-model="localState" type="number" v-on="parentListeners" />
-</template>
-
-<style scoped>
-input {
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-}
-</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/editable-cell/SetListCheckboxCell.vue b/packages/nc-gui-v2/components/editable-cell/MultiSelect.vue
similarity index 63%
rename from packages/nc-gui-v2/components/editable-cell/SetListCheckboxCell.vue
rename to packages/nc-gui-v2/components/editable-cell/MultiSelect.vue
index 8fdc28ea5d..170b0605ad 100644
--- a/packages/nc-gui-v2/components/editable-cell/SetListCheckboxCell.vue
+++ b/packages/nc-gui-v2/components/editable-cell/MultiSelect.vue
@@ -1,5 +1,31 @@
 <script>
-import colors from '@/components/project/spreadsheet/helpers/colors'
+
+
+import { computed } from "@vue/reactivity";
+import { ColumnType } from "nocodb-sdk";
+import { inject, Ref } from "vue";
+import {enumColor}from "~/utils/colorsUtils";
+
+const column = inject<ColumnType>("column");
+const isForm = inject<boolean>("isForm");
+
+const { modelValue } = defineProps<{ modelValue: any }>();
+const emit = defineEmits(["update:modelValue"]);
+
+const localState = computed({
+  get() {
+    return modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, "");
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  }
+});
+
+const options = computed<string[]>(() => {
+  return column?.dtxp?.split(",").map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, "")) || [];
+});
+
+/*import colors from '@/components/project/spreadsheet/helpers/colors'
 
 export default {
   name: 'SetListCheckboxCell',
@@ -47,7 +73,7 @@ export default {
     event.initMouseEvent('mousedown', true, true, window)
     this.$el.dispatchEvent(event)
   },
-}
+}*/
 </script>
 
 <template>
@@ -73,27 +99,3 @@ export default {
   border-radius: 25px;
 }
 </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/editable-cell/EnumListEditableCell.vue b/packages/nc-gui-v2/components/editable-cell/SingleSelect.vue
similarity index 65%
rename from packages/nc-gui-v2/components/editable-cell/EnumListEditableCell.vue
rename to packages/nc-gui-v2/components/editable-cell/SingleSelect.vue
index 816e1df02d..aafa534c59 100644
--- a/packages/nc-gui-v2/components/editable-cell/EnumListEditableCell.vue
+++ b/packages/nc-gui-v2/components/editable-cell/SingleSelect.vue
@@ -1,5 +1,31 @@
-<script>
-import colors from '@/mixins/colors'
+<script lang="ts" setup>
+
+import { computed } from "@vue/reactivity";
+import { ColumnType } from "nocodb-sdk";
+import { inject, Ref } from "vue";
+import {enumColor}from "~/utils/colorsUtils";
+
+const column = inject<ColumnType>("column");
+const isForm = inject<boolean>("isForm");
+
+const { modelValue } = defineProps<{ modelValue: any }>();
+const emit = defineEmits(["update:modelValue"]);
+
+const localState = computed({
+  get() {
+    return modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, "");
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  }
+});
+
+const options = computed<string[]>(() => {
+  return column?.dtxp?.split(",").map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, "")) || [];
+});
+
+
+/*import colors from '@/mixins/colors'
 
 export default {
   name: 'EnumListEditableCell',
@@ -11,20 +37,6 @@ export default {
     isForm: Boolean,
   },
   computed: {
-    localState: {
-      get() {
-        return this.value && this.value.replace(/\\'/g, "'").replace(/^'|'$/g, '')
-      },
-      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, ''))
-      }
-      return []
-    },
     parentListeners() {
       const $listeners = {}
 
@@ -38,28 +50,23 @@ export default {
       return $listeners
     },
   },
-  mounted() {
-    // this.$el.focus();
-    // let event;
-    // event = document.createEvent('MouseEvents');
-    // event.initMouseEvent('mousedown', true, true, window);
-    // this.$el.dispatchEvent(event);
-  },
-}
+}*/
 </script>
 
 <template>
+  {{options}}
   <v-select
     v-model="localState"
     solo
     dense
     flat
-    :items="enumValues"
+    :items="options"
     hide-details
     class="mt-0"
     :clearable="!column.rqd"
-    v-on="parentListeners"
   >
+
+<!--    v-on="parentListeners"
     <template #selection="{ item }">
       <div
         class="d-100"
@@ -67,31 +74,33 @@ export default {
           'text-center': !isForm,
         }"
       >
-        <v-chip small :color="colors[enumValues.indexOf(item) % colors.length]" class="ma-1">
-          {{ item }}
+        <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="colors[enumValues.indexOf(item) % colors.length]">
+      <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-icon small class="mt-1"> mdi-menu-down</v-icon>
+    </template>-->
   </v-select>
 </template>
 
 <style scoped lang="scss">
-::v-deep {
+: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;
diff --git a/packages/nc-gui-v2/components/smartsheet/EditableCell.vue b/packages/nc-gui-v2/components/smartsheet/EditableCell.vue
index 1ac1924823..30ffefc8d8 100644
--- a/packages/nc-gui-v2/components/smartsheet/EditableCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/EditableCell.vue
@@ -19,8 +19,6 @@ const localState = computed({
 })
 
 const {
-  isSet,
-  isEnum,
   isURL,
   isEmail,
   isJSON,
@@ -34,6 +32,8 @@ const {
   isAttachment,
   isTextArea,
   isString,
+  isSingleSelect,
+  isMultiSelect
 } = useColumn(column)
 </script>
 
@@ -164,6 +164,7 @@ const {
     <!--    />&ndash;&gt; -->
 
     <EditableCellAttachment v-if="isAttachment" v-model="localState" />
+    <EditableCellSingleSelect v-if="isSingleSelect" v-model="localState" />
     <!--      v-model="localState"
           :active="active"
           :db-alias="dbAlias"
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 7a00d3f67c..cf372d335c 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -29,7 +29,7 @@ watch(
 
 <template>
   <div class="overflow-auto">
-    <v-toolbar height="32" dense class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom mx-1" style="z-index: 7" />
+<!--    <v-toolbar height="32" dense class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom mx-1" style="z-index: 7" />-->
     <template v-if="meta && tabMeta">
       <SmartsheetGrid />
     </template>
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 333ff9d080..0cf4be09ad 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -21,7 +21,9 @@ export default (column: ColumnType) => {
   const isDateTime = abstractType === 'datetime' || uiDatatype === 'DateTime'
   const isJSON = uiDatatype === 'JSON'
   const isEnum = uiDatatype === 'SingleSelect'
+  const isSingleSelect = uiDatatype === 'SingleSelect'
   const isSet = uiDatatype === 'MultiSelect'
+  const isMultiSelect = uiDatatype === 'MultiSelect'
   const isURL = uiDatatype === 'URL'
   const isEmail = uiDatatype === UITypes.Email
   const isAttachment = uiDatatype === 'Attachment'
@@ -66,5 +68,7 @@ export default (column: ColumnType) => {
     isDuration,
     isAutoSaved,
     isManualSaved,
+    isSingleSelect,
+    isMultiSelect
   }
 }