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>

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 {
+/deep/ .v-select{
-  width: 100%;
+  min-width: 150px;
-  height: 100%;
-  color: var(--v-textColor-base);
-  -webkit-appearance: menulist;
-  /*webkit browsers */
-  -moz-appearance: menulist;
-  /*Firefox */
-  appearance: menulist;
 }
-
 </style>
 <!--
 /**

packages/nc-gui/components/project/spreadsheet/helpers/columnStyling.js

@@ -5,8 +5,8 @@ export default {
   'LongText': {w: '400px'},
   'Attachment': {},
   'Checkbox': {},
-  'MultiSelect': {w: '150px'},
+  'MultiSelect': {w: '200px'},
-  'SingleSelect': {},
+  'SingleSelect': {w: '200px'},
   'Collaborator': {},
   'Date': {},
   'Year': {},

packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

@@ -312,19 +312,23 @@ export default {
     columnsWidth: {type: Object}
   },
   mounted() {
-    setTimeout(() => {
+    this.calculateColumnWidth();
-      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)
   },
   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>