refactor(gui): render ant select component only when cell is active or in editable state

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/cell/MultiSelect.vue

@@ -313,11 +313,35 @@ const handleClose = (e: MouseEvent) => {
 }
 
 useEventListener(document, 'click', handleClose, true)
+
+// todo: maintain order
+const selectedOpts = computed(() => {
+  return options.value.filter((o) => vModel.value.includes(o.value!))
+})
 </script>
 
 <template>
   <div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
+    <div v-if="!editable && !active" class="flex flex-nowrap">
+      <template v-for="selectedOpt of selectedOpts" :key="selectedOpt.value">
+        <a-tag class="rounded-tag" :color="selectedOpt.color">
+          <span
+            :style="{
+              'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                ? '#fff'
+                : tinycolor.mostReadable(selectedOpt.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+              'font-size': '13px',
+            }"
+            :class="{ 'text-sm': isKanban }"
+          >
+            {{ selectedOpt.title }}
+          </span>
+        </a-tag>
+      </template>
+    </div>
+
     <a-select
+      v-else
       ref="aselect"
       v-model:value="vModel"
       mode="multiple"

packages/nc-gui/components/cell/SingleSelect.vue

@@ -242,11 +242,36 @@ const handleClose = (e: MouseEvent) => {
 }
 
 useEventListener(document, 'click', handleClose, true)
+
+const selectedOpt = computed(() => {
+  return options.value.find((o) => o.value === vModel.value)
+})
+
+onMounted(() => {
+  console.log('mounted')
+})
 </script>
 
 <template>
   <div class="h-full w-full flex items-center nc-single-select" :class="{ 'read-only': readOnly }" @click="toggleMenu">
+    <div v-if="!editable && !active">
+      <a-tag v-if="selectedOpt" class="rounded-tag" :color="selectedOpt.color">
+        <span
+          :style="{
+            'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+              ? '#fff'
+              : tinycolor.mostReadable(selectedOpt.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+            'font-size': '13px',
+          }"
+          :class="{ 'text-sm': isKanban }"
+        >
+          {{ selectedOpt.title }}
+        </span>
+      </a-tag>
+    </div>
+
     <a-select
+      v-else
       ref="aselect"
       v-model:value="vModel"
       class="w-full overflow-hidden"