fix(gui): table header cell styling and column width

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

packages/nc-gui/components/project/spreadsheet/components/headerCell.vue

@@ -41,7 +41,7 @@
       mdi-card-text-outline
     </v-icon>
 
-    <span class="name" style="white-space: pre-wrap" :title="value">{{ value }}</span>
+    <span class="name" style="white-space: nowrap" :title="value">{{ value }}</span>
 
     <span v-if="(column.rqd && !column.default) || required" class="error--text text--lighten-1">&nbsp;*</span>
 

packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue

@@ -770,7 +770,8 @@ export default {
             showFields: this.showFields,
             fieldsOrder: this.fieldsOrder,
             extraViewParams: this.extraViewParams,
-            selectedViewId: this.selectedViewId
+            selectedViewId: this.selectedViewId,
+            columnsWidth: this.columnsWidth
           },
           view_name: this.selectedView.title,
           type: this.selectedView.type,

packages/nc-gui/components/project/spreadsheet/components/virtualCell/manyToManyCell.vue

@@ -17,7 +17,7 @@
         <span v-if="!isLocked && value && value.length === 10" class="caption pointer ml-1 grey--text" @click="showChildListModal">more...</span>
       </div>
       <div
-        v-if="!isActive && !isLocked"
+        v-if="!active && !isLocked"
         class="actions align-center justify-center px-1 flex-shrink-1"
         :class="{'d-none': !active, 'd-flex':active }"
       >

packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue

@@ -37,7 +37,7 @@
           </v-icon>
         </template>
         <span v-on="on">
-          <span class="name  flex-grow-1" style="white-space: pre-wrap" :title="column._cn" v-html="alias" />
+          <span class="name  flex-grow-1" style="white-space: nowrap" :title="column._cn" v-html="alias" />
           <span v-if="column.rqd || required" class="error--text text--lighten-1">&nbsp;*</span>
         </span>
       </template>

packages/nc-gui/components/project/spreadsheet/public/xcTable.vue

@@ -128,6 +128,7 @@
             :has-many="hasMany"
             :nodes="{dbAlias:''}"
             :sql-ui="sqlUi"
+            :columns-width="columnsWidth"
           />
         </div>
 
@@ -197,6 +198,7 @@ export default {
     relationPrimaryValue: [String, Number]
   },
   data: () => ({
+    columnsWidth: {},
     metas: {},
     fieldsOrder: [],
     password: null,
@@ -246,7 +248,7 @@ export default {
     },
     filteredData: [],
     showFields: {},
-    fieldList: [],
+    // fieldList: [],
 
     cellHeights: [{
       size: 'small',
@@ -488,6 +490,9 @@ export default {
           view_id: this.$route.params.id,
           password: this.password
         }])
+
+        this.columnsWidth = qp.columnsWidth || {}
+
         this.client = client
         this.meta = meta
         this.query_params = JSON.parse(qp)
@@ -496,7 +501,7 @@ export default {
 
         this.showFields = this.query_params.showFields || {}
 
-        this.fieldList = Object.keys(this.showFields)
+        // this.fieldList = Object.keys(this.showFields)
 
         let fields = this.query_params.fieldsOrder || []
         if (!fields.length) { fields = Object.keys(this.showFields) }
@@ -547,7 +552,7 @@ export default {
       this.loadingData = true
       try {
         // eslint-disable-next-line camelcase
-        const { data: list, count, meta, model_name, client, queryParams } = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
+        const { data: list, count, model_name, client } = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
           query: this.queryParams
         }, 'getSharedViewData', {
           view_id: this.$route.params.id,