From ba75c65053715f090af8d522d41619b71f66196b Mon Sep 17 00:00:00 2001
From: Pranav C Balan <pranavxc@gmail.com>
Date: Thu, 10 Jun 2021 18:16:06 +0530
Subject: [PATCH] feat(gui): add clear option for singleSelect

Added clear icon for nullable single select columns

re #261

Signed-off-by: Pranav C Balan <pranavxc@gmail.com>
---
 .../editableCell/enumListEditableCell.vue     | 14 ++-------
 .../spreadsheet/helpers/columnStyling.js      |  4 +--
 .../project/spreadsheet/views/xcGridView.vue  | 30 ++++++++++++-------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/editableCell/enumListEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/editableCell/enumListEditableCell.vue
index 72b82dda03..ad748629a1 100644
--- a/packages/nc-gui/components/project/spreadsheet/editableCell/enumListEditableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/editableCell/enumListEditableCell.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-select v-on="parentListeners" v-model="localState" dense flat :items="enumValues" hide-details class="mt-0">
+  <v-select v-on="parentListeners" v-model="localState" dense flat :items="enumValues" hide-details class="mt-0" :clearable="!column.rqd">
     <!--    <option v-for="eVal of enumValues" :key="eVal" :value="eVal">{{ eVal }}</option>-->
     <template v-slot:selection="{item}">
       <div class="d-100  pl-4" :class="{
@@ -69,17 +69,9 @@ 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;
+/deep/ .v-select{
+  min-width: 150px;
 }
-
 </style>
 <!--
 /**
diff --git a/packages/nc-gui/components/project/spreadsheet/helpers/columnStyling.js b/packages/nc-gui/components/project/spreadsheet/helpers/columnStyling.js
index 0eb655d48d..bc3655234b 100644
--- a/packages/nc-gui/components/project/spreadsheet/helpers/columnStyling.js
+++ b/packages/nc-gui/components/project/spreadsheet/helpers/columnStyling.js
@@ -5,8 +5,8 @@ export default {
   'LongText': {w: '400px'},
   'Attachment': {},
   'Checkbox': {},
-  'MultiSelect': {w: '150px'},
-  'SingleSelect': {},
+  'MultiSelect': {w: '200px'},
+  'SingleSelect': {w: '200px'},
   'Collaborator': {},
   'Date': {},
   'Year': {},
diff --git a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
index 884db81133..e1f28f7b86 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
@@ -312,19 +312,23 @@ export default {
     columnsWidth: {type: Object}
   },
   mounted() {
-    setTimeout(() => {
-      const obj = {};
-      this.meta && this.meta.columns && this.meta.columns.forEach(c => {
-        obj[c._cn] = columnStyling[c.uidt] && columnStyling[c.uidt].w || undefined;
-      })
-      Array.from(this.$el.querySelectorAll('th')).forEach(el => {
-        const width = el.getBoundingClientRect().width;
-        obj[el.dataset.col] = obj[el.dataset.col] || ((width < 100 ? 100 : width) + 'px');
-      });
-      this.$emit('update:columnsWidth', {...obj, ...(this.columnWidth || {})})
-    }, 500)
+    this.calculateColumnWidth();
   },
   methods: {
+    calculateColumnWidth() {
+      setTimeout(() => {
+        const obj = {};
+        this.meta && this.meta.columns && this.meta.columns.forEach(c => {
+          debugger
+          obj[c._cn] = columnStyling[c.uidt] && columnStyling[c.uidt].w || undefined;
+        })
+        Array.from(this.$el.querySelectorAll('th')).forEach(el => {
+          const width = el.getBoundingClientRect().width;
+          obj[el.dataset.col] = obj[el.dataset.col] || ((width < 100 ? 100 : width) + 'px');
+        });
+        this.$emit('update:columnsWidth', {...obj, ...(this.columnWidth || {})})
+      }, 500)
+    },
     isCentrallyAligned(col) {
       return !['SingleLineText',
         'LongText',
@@ -796,5 +800,9 @@ th:first-child, td:first-child {
   transform: rotate(90deg);
 }
 
+th{
+  min-width:100px;
+}
+
 
 </style>