refactor(gui): linting

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>

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

@@ -1,165 +1,183 @@
 <template>
   <div>
-    <table v-if="data" class="xc-row-table"
-           style=" ">
+    <table
+      v-if="data"
+      class="xc-row-table"
+      style=" "
+    >
       <thead>
-      <tr class="text-left">
-        <th
-          class="grey-border caption"
-          :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4 grey--text text--darken-2'"
-          style="width: 65px">#
-        </th>
-        <th
-          class="grey-border caption font-wight-regular"
-          :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4  grey--text text--darken-2'"
-          v-xc-ver-resize
-          v-for="(col,i) in availableColumns"
-          :key="col._cn"
-          v-show="showFields[col._cn]"
-          @xcresize="onresize(col._cn,$event)"
-          @xcresizing="onXcResizing(col._cn,$event)"
-          @xcresized="resizingCol = null"
-          :data-col="col._cn"
-        >
-          <!--            :style="columnsWidth[col._cn]  ? `min-width:${columnsWidth[col._cn]}; max-width:${columnsWidth[col._cn]}` : ''"
+        <tr class="text-left">
+          <th
+            class="grey-border caption"
+            :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4 grey--text text--darken-2'"
+            style="width: 65px"
+          >
+            #
+          </th>
+          <th
+            v-for="(col) in availableColumns"
+            v-show="showFields[col._cn]"
+            :key="col._cn"
+            v-xc-ver-resize
+            class="grey-border caption font-wight-regular"
+            :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4  grey--text text--darken-2'"
+            :data-col="col._cn"
+            @xcresize="onresize(col._cn,$event)"
+            @xcresizing="onXcResizing(col._cn,$event)"
+            @xcresized="resizingCol = null"
+          >
+            <!--            :style="columnsWidth[col._cn]  ? `min-width:${columnsWidth[col._cn]}; max-width:${columnsWidth[col._cn]}` : ''"
           -->
 
-          <virtual-header-cell v-if="col.virtual"
-                               :column="col"
-                               :nodes="nodes"
-                               :meta="meta"
-                               @saved="onNewColCreation"
-          />
-
-
-          <header-cell
-            v-else
-            :isPublicView="isPublicView"
-            @onRelationDelete="$emit('onRelationDelete')"
-            :nodes="nodes"
-            :value="col._cn"
-            :sql-ui="sqlUi"
-            :meta="meta"
-            :column-index="meta && meta.columns && meta.columns.indexOf(col)"
-            :is-foreign-key="col._cn in belongsTo || col._cn in hasMany"
-            :column="col"
-            :isVirtual="isVirtual"
-            @saved="onNewColCreation"
-          ></header-cell>
-
-        </th>
-
-        <th
-          v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')"
-          @click="addNewColMenu = true"
-          :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4  grey--text text--darken-2'"
-          class="grey-border new-column-header pointer"
-        >
-          <v-menu offset-y z-index="99" left v-model="addNewColMenu"
-                  content-class="elevation-0"
-          >
-            <template v-slot:activator="{on}">
-              <v-icon small v-on="on">mdi-plus</v-icon>
-            </template>
-            <edit-column
-              v-if="addNewColMenu"
-              :meta="meta"
+            <virtual-header-cell
+              v-if="col.virtual"
+              :column="col"
               :nodes="nodes"
-              @close="addNewColMenu = false"
+              :meta="meta"
               @saved="onNewColCreation"
+            />
+
+            <header-cell
+              v-else
+              :is-public-view="isPublicView"
+              :nodes="nodes"
+              :value="col._cn"
               :sql-ui="sqlUi"
-            ></edit-column>
-          </v-menu>
-        </th>
+              :meta="meta"
+              :column-index="meta && meta.columns && meta.columns.indexOf(col)"
+              :is-foreign-key="col._cn in belongsTo || col._cn in hasMany"
+              :column="col"
+              :is-virtual="isVirtual"
+              @onRelationDelete="$emit('onRelationDelete')"
+              @saved="onNewColCreation"
+            />
+          </th>
 
-
-      </tr>
+          <th
+            v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')"
+            :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4  grey--text text--darken-2'"
+            class="grey-border new-column-header pointer"
+            @click="addNewColMenu = true"
+          >
+            <v-menu
+              v-model="addNewColMenu"
+              offset-y
+              z-index="99"
+              left
+              content-class="elevation-0"
+            >
+              <template #activator="{on}">
+                <v-icon small v-on="on">
+                  mdi-plus
+                </v-icon>
+              </template>
+              <edit-column
+                v-if="addNewColMenu"
+                :meta="meta"
+                :nodes="nodes"
+                :sql-ui="sqlUi"
+                @close="addNewColMenu = false"
+                @saved="onNewColCreation"
+              />
+            </v-menu>
+          </th>
+        </tr>
       </thead>
       <tbody v-click-outside="onClickOutside">
-      <tr
-        v-for="({row:rowObj, rowMeta, oldRow},row) in data"
-        :key="row"
-        @contextmenu="showRowContextMenu($event,rowObj,rowMeta,row)"
-      >
-        <td
-          style="width: 65px" class="caption">
-          <div class="d-flex align-center">
-            <span v-show="!rowMeta || !rowMeta.selected" class="ml-2 grey--text"
-                  :class="{ 'row-no' : !isPublicView }"
-            >{{ row + 1 }}</span>
-            <template v-if="!isPublicView">
-              <v-checkbox v-if="rowMeta" class="row-checkbox pt-0 align-self-center my-auto"
-                          :class="{active : rowMeta.selected}"
-                          v-model="rowMeta.selected"
-                          dense></v-checkbox>
-              <v-spacer></v-spacer>
-              <v-icon
-                v-if="!groupedAggCount[ids[row]]"
-                color="pink"
-                small
-                class="row-expand-icon mr-1 pointer"
-                @click="expandRow(row,rowMeta)">
-                mdi-arrow-expand
-              </v-icon>
-            </template>
-            <v-chip
-              @click="expandRow(row,rowMeta)"
-              x-small v-if="groupedAggCount[ids[row]]"
-              :color="colors[ groupedAggCount[ids[row]] % colors.length]">
-              {{ groupedAggCount[ids[row]] }}
-            </v-chip>
-          </div>
-        </td>
-        <td
-          class="cell pointer"
-          v-for="(columnObj,col) in availableColumns"
-          :key="row + columnObj._cn + col"
-          :class="{
+        <tr
+          v-for="({row:rowObj, rowMeta},row) in data"
+          :key="row"
+          @contextmenu="showRowContextMenu($event,rowObj,rowMeta,row)"
+        >
+          <td
+            style="width: 65px"
+            class="caption"
+          >
+            <div class="d-flex align-center">
+              <span
+                v-show="!rowMeta || !rowMeta.selected"
+                class="ml-2 grey--text"
+                :class="{ 'row-no' : !isPublicView }"
+              >{{ row + 1 }}</span>
+              <template v-if="!isPublicView">
+                <v-checkbox
+                  v-if="rowMeta"
+                  v-model="rowMeta.selected"
+                  class="row-checkbox pt-0 align-self-center my-auto"
+                  :class="{active : rowMeta.selected}"
+                  dense
+                />
+                <v-spacer />
+                <v-icon
+                  v-if="!groupedAggCount[ids[row]]"
+                  color="pink"
+                  small
+                  class="row-expand-icon mr-1 pointer"
+                  @click="expandRow(row,rowMeta)"
+                >
+                  mdi-arrow-expand
+                </v-icon>
+              </template>
+              <v-chip
+                v-if="groupedAggCount[ids[row]]"
+                x-small
+                :color="colors[ groupedAggCount[ids[row]] % colors.length]"
+                @click="expandRow(row,rowMeta)"
+              >
+                {{ groupedAggCount[ids[row]] }}
+              </v-chip>
+            </div>
+          </td>
+          <td
+            v-for="(columnObj,col) in availableColumns"
+            v-show="showFields[columnObj._cn]"
+            :key="row + columnObj._cn + col"
+            class="cell pointer"
+            :class="{
               'active' : !isPublicView && selected.col === col && selected.row === row && isEditable ,
               'primary-column' : primaryValueColumn === columnObj._cn,
               'text-center': isCentrallyAligned(columnObj),
               'required': isRequired(columnObj,rowObj)
             }"
-          @dblclick="makeEditable(col,row,columnObj.ai)"
-          @click="makeSelected(col,row);"
-          v-show="showFields[columnObj._cn]"
-          :data-col="columnObj._cn"
-        >
-          <virtual-cell
-            v-if="columnObj.virtual"
-            :column="columnObj"
-            :row="rowObj"
-            :nodes="nodes"
-            :meta="meta"
-            :api="api"
-            :active="selected.col === col && selected.row === row"
-            :sql-ui="sqlUi"
-            :is-new="rowMeta.new"
-            v-on="$listeners"
-            @updateCol="(...args) => updateCol(...args, columnObj.bt && meta.columns.find( c => c.cn === columnObj.bt.cn), col, row)"
-          ></virtual-cell>
+            :data-col="columnObj._cn"
+            @dblclick="makeEditable(col,row,columnObj.ai)"
+            @click="makeSelected(col,row);"
+          >
+            <virtual-cell
+              v-if="columnObj.virtual"
+              :column="columnObj"
+              :row="rowObj"
+              :nodes="nodes"
+              :meta="meta"
+              :api="api"
+              :active="selected.col === col && selected.row === row"
+              :sql-ui="sqlUi"
+              :is-new="rowMeta.new"
+              v-on="$listeners"
+              @updateCol="(...args) => updateCol(...args, columnObj.bt && meta.columns.find( c => c.cn === columnObj.bt.cn), col, row)"
+            />
 
-          <editable-cell
-            v-else-if="
-              !isLocked
-              && !isPublicView
-              && (editEnabled.col === col && editEnabled.row === row)
-              || enableEditable(columnObj)
-            "
-            :column="columnObj"
-            :meta="meta"
-            :active="selected.col === col && selected.row === row"
-            v-model="rowObj[columnObj._cn]"
-            @save="editEnabled = {}"
-            @cancel="editEnabled = {}"
-            @update="onCellValueChange(col, row, columnObj)"
-            @blur="onCellValueChange(col, row, columnObj,'blur')"
-            @change="onCellValueChange(col, row, columnObj)"
-            :sql-ui="sqlUi"
-            :db-alias="nodes.dbAlias"
-          />
+            <editable-cell
+              v-else-if="
+                !isLocked
+                  && !isPublicView
+                  && (editEnabled.col === col && editEnabled.row === row)
+                  || enableEditable(columnObj)
+              "
+              v-model="rowObj[columnObj._cn]"
+              :column="columnObj"
+              :meta="meta"
+              :active="selected.col === col && selected.row === row"
+              :sql-ui="sqlUi"
+              :db-alias="nodes.dbAlias"
+              @save="editEnabled = {}"
+              @cancel="editEnabled = {}"
+              @update="onCellValueChange(col, row, columnObj)"
+              @blur="onCellValueChange(col, row, columnObj,'blur')"
+              @change="onCellValueChange(col, row, columnObj)"
+            />
 
-          <!--
+            <!--
                     <div v-else-if="columnObj.cn in hasMany" class="hasmany-col d-flex ">
                       {{ rowObj[columnObj._cn] }}
                       <v-spacer></v-spacer>
@@ -232,7 +250,6 @@
                             <template v-for="(hm,idCol) in hasMany">
                               <template v-for="(rel,i) in hm">
 
-
                                 <v-divider
                                   :key="i + '_' +  idCol + '_div'"></v-divider>
                                 <v-list-item
@@ -273,56 +290,59 @@
                     </template>
           -->
 
-
-          <table-cell v-else
-                      :class="{'primary--text' : primaryValueColumn === columnObj._cn}"
-                      :selected="selected.col === col && selected.row === row"
-                      :isLocked="isLocked"
-                      @enableedit="makeSelected(col,row);makeEditable(col,row,columnObj.ai)"
-                      :column="columnObj"
-                      :meta="meta"
-                      :db-alias="nodes.dbAlias"
-                      :value="rowObj[columnObj._cn]"
-                      :sql-ui="sqlUi"
-          ></table-cell>
-        </td>
-      </tr>
-      <tr v-if="!isLocked && !isPublicView && isEditable && relationType !== 'bt'">
-        <td :colspan="visibleColLength + 1" class="text-left pointer" @click="insertNewRow(true)">
-          <v-tooltip top>
-            <template v-slot:activator="{on}">
-              <v-icon v-on="on" small color="pink">mdi-plus</v-icon>
-              <span class="ml-1 caption grey--text ">New Row</span>
-            </template>
-            <span class="caption"> Add new row</span>
-          </v-tooltip>
-        </td>
-      </tr>
+            <table-cell
+              v-else
+              :class="{'primary--text' : primaryValueColumn === columnObj._cn}"
+              :selected="selected.col === col && selected.row === row"
+              :is-locked="isLocked"
+              :column="columnObj"
+              :meta="meta"
+              :db-alias="nodes.dbAlias"
+              :value="rowObj[columnObj._cn]"
+              :sql-ui="sqlUi"
+              @enableedit="makeSelected(col,row);makeEditable(col,row,columnObj.ai)"
+            />
+          </td>
+        </tr>
+        <tr v-if="!isLocked && !isPublicView && isEditable && relationType !== 'bt'">
+          <td :colspan="visibleColLength + 1" class="text-left pointer" @click="insertNewRow(true)">
+            <v-tooltip top>
+              <template #activator="{on}">
+                <v-icon small color="pink" v-on="on">
+                  mdi-plus
+                </v-icon>
+                <span class="ml-1 caption grey--text ">New Row</span>
+              </template>
+              <span class="caption"> Add new row</span>
+            </v-tooltip>
+          </td>
+        </tr>
       </tbody>
     </table>
 
-    <div is="style" v-html="style"></div>
-
+    <div is="style" v-html="style" />
   </div>
 </template>
 
 <script>
-import HeaderCell from "@/components/project/spreadsheet/components/headerCell";
-import EditableCell from "@/components/project/spreadsheet/components/editableCell";
-import EditColumn from "@/components/project/spreadsheet/components/editColumn";
-import TableCell from "@/components/project/spreadsheet/components/cell";
-import colors from "@/mixins/colors";
-import columnStyling from "@/components/project/spreadsheet/helpers/columnStyling";
-import HasManyCell from "@/components/project/spreadsheet/components/virtualCell/hasManyCell";
-import BelongsToCell from "@/components/project/spreadsheet/components/virtualCell/belogsToCell";
-import ManyToMany from "@/components/project/spreadsheet/components/virtualCell/manyToManyCell";
-import VirtualCell from "@/components/project/spreadsheet/components/virtualCell";
-import VirtualHeaderCell from "@/components/project/spreadsheet/components/virtualHeaderCell";
+import HeaderCell from '@/components/project/spreadsheet/components/headerCell'
+import EditableCell from '@/components/project/spreadsheet/components/editableCell'
+import EditColumn from '@/components/project/spreadsheet/components/editColumn'
+import TableCell from '@/components/project/spreadsheet/components/cell'
+import colors from '@/mixins/colors'
+import columnStyling from '@/components/project/spreadsheet/helpers/columnStyling'
+import VirtualCell from '@/components/project/spreadsheet/components/virtualCell'
+import VirtualHeaderCell from '@/components/project/spreadsheet/components/virtualHeaderCell'
 
 export default {
+  name: 'XcGridView',
   components: {
     VirtualHeaderCell,
-    VirtualCell, ManyToMany, BelongsToCell, HasManyCell, TableCell, EditColumn, EditableCell, HeaderCell
+    VirtualCell,
+    TableCell,
+    EditColumn,
+    EditableCell,
+    HeaderCell
   },
   mixins: [colors],
   props: {
@@ -343,212 +363,7 @@ export default {
     table: String,
     isVirtual: Boolean,
     isLocked: Boolean,
-    columnsWidth: {type: Object}
-  },
-  mounted() {
-    this.calculateColumnWidth();
-  },
-  methods: {
-    isRequired(_columnObj, rowObj) {
-      let columnObj = _columnObj;
-      if (columnObj.bt) {
-        columnObj = this.meta.columns.find(c => c.cn === columnObj.bt.cn);
-      }
-
-      return columnObj && (columnObj.rqd
-        && (rowObj[columnObj._cn] === undefined || rowObj[columnObj._cn] === null)
-        && !columnObj.default);
-    },
-    updateCol(row, column, value, columnObj, colIndex, rowIndex) {
-      this.$set(row, column, value);
-      this.onCellValueChange(colIndex, rowIndex, columnObj)
-    },
-    calculateColumnWidth() {
-      setTimeout(() => {
-        const obj = {};
-        this.meta && this.meta.columns && this.meta.columns.forEach(c => {
-          obj[c._cn] = columnStyling[c.uidt] && columnStyling[c.uidt].w || undefined;
-        })
-        this.meta && this.meta.v && this.meta.v.forEach(v => {
-          obj[v._cn] = v.bt ? '100px' : '200px';
-        })
-        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',
-        'Attachment',
-        'Date',
-        'Time',
-        'Email',
-        'URL',
-        'DateTime',
-        'CreateTime',
-        'LastModifiedTime'].includes(col.uidt)
-    },
-    async xcAuditModelCommentsCount() {
-      if (this.isPublicView || !this.data || !this.data.length) return;
-      const aggCount = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-        dbAlias: this.nodes.dbAlias
-      }, 'xcAuditModelCommentsCount', {
-        model_name: this.meta._tn,
-        ids: this.data.map(({row: r}) => {
-          return this.meta.columns.filter((c) => c.pk).map(c => r[c._cn]).join('___')
-        })
-      }])
-
-      this.aggCount = aggCount;
-    },
-
-    onKeyDown(e) {
-      if (this.selected.col === null || this.selected.row === null) return;
-      switch (e.keyCode) {
-        // left
-        case 37:
-          if (this.selected.col > 0) this.selected.col--;
-          break;
-        // right
-        case 39:
-          if (this.selected.col < this.colLength - 1) this.selected.col++;
-          break;
-        // up
-        case 38:
-          if (this.selected.row > 0) this.selected.row--;
-          break;
-        // down
-        case 40:
-          if (this.selected.row < this.rowLength - 1) this.selected.row++;
-          break;
-        // enter
-        case 13:
-          this.makeEditable(this.selected.col, this.selected.row)
-          break;
-        default: {
-          if (this.editEnabled.col != null && this.editEnabled.row != null) {
-            return;
-          }
-          if (e.key && e.key.length === 1) {
-            this.$set(this.data[this.selected.row].row, this.availableColumns[this.selected.col]._cn, e.key)
-            this.editEnabled = {...this.selected}
-          }
-        }
-      }
-    },
-    onClickOutside() {
-      if (
-        this.meta.columns
-        && this.meta.columns[this.selected.col]
-        && this.meta.columns[this.selected.col].virtual
-      ) return
-      this.selected.col = null;
-      this.selected.row = null
-    },
-    onNewColCreation() {
-      this.addNewColMenu = false;
-      this.addNewColModal = false;
-      this.$emit('onNewColCreation')
-    },
-    expandRow(...args) {
-      this.$emit('expandRow', ...args)
-    },
-    showRowContextMenu($event, rowObj, rowMeta, row) {
-      this.$emit('showRowContextMenu', $event, rowObj, rowMeta, row)
-    },
-    onCellValueChange(col, row, column, ev) {
-      this.$emit('onCellValueChange', col, row, column, ev);
-    },
-    addNewRelationTab(...args) {
-      this.$emit('addNewRelationTab', ...args)
-    },
-    makeSelected(col, row) {
-      if (this.selected.col !== col || this.selected.row !== row) {
-        this.selected = {col, row};
-        this.editEnabled = {};
-      }
-    },
-    makeEditable(col, row) {
-      if (this.isPublicView || !this.isEditable) return;
-      if (this.availableColumns[col].ai) {
-        return this.$toast.info('Auto Increment field is not editable').goAway(3000)
-      }
-      if (this.availableColumns[col].pk && !this.data[row].rowMeta.new) {
-        return this.$toast.info('Editing primary key not supported').goAway(3000)
-      }
-      if (this.editEnabled.col !== col || this.editEnabled.row !== row) {
-        this.editEnabled = {col, row};
-      }
-    },
-    enableEditable(column) {
-      return (column && column.uidt === 'Attachment') ||
-        (column && column.uidt === 'SingleSelect') ||
-        (column && column.uidt === 'MultiSelect') ||
-        (column && column.uidt === 'DateTime') ||
-        (column && column.uidt === 'Date') ||
-        (column && column.uidt === 'Time') ||
-        (this.sqlUi && this.sqlUi.getAbstractType(column) === 'boolean');
-    },
-    insertNewRow(atEnd = false, expand = false) {
-      this.$emit('insertNewRow', atEnd, expand)
-    },
-    onresize(col, size) {
-      this.$emit('update:columnsWidth', {...this.columnsWidth, [col]: size});
-    },
-    onXcResizing(_cn, width) {
-      this.resizingCol = _cn;
-      this.resizingColWidth = width;
-    }
-  },
-  computed: {
-    ids() {
-      return this.data.map(({oldRow}) => this.meta.columns.filter((c) => c.pk).map(c => oldRow[c._cn]).join('___'))
-    },
-    haveHasManyrelation() {
-      return !!Object.keys(this.hasMany).length;
-    },
-    colLength() {
-      return (this.availableColumns && this.availableColumns.length) || 0
-    },
-    // visibleColLength() {
-    //   return (this.availableColumns && this.availableColumns.length) || 0
-    // },
-    rowLength() {
-      return (this.data && this.data.length) || 0
-    },
-    availColNames() {
-      return (this.availableColumns && this.availableColumns.map(c => c._cn)) || [];
-    },
-    groupedAggCount() {
-      return this.aggCount ? this.aggCount.reduce((o, {model_id, count}) => ({...o, [model_id]: count}), {}) : {};
-    },
-    style() {
-      let style = '';
-      for (const [key, val] of Object.entries(this.columnsWidth || {})) {
-        if (val && key !== this.resizingCol) {
-          style += `
-            [data-col="${key}"]{
-              min-width: ${val};
-              max-width: ${val};
-              width: ${val};
-            }
-        `;
-        } else if (key === this.resizingCol) {
-          style += `
-            [data-col="${key}"]{
-              min-width: ${this.resizingColWidth};
-              max-width: ${this.resizingColWidth};
-              width: ${this.resizingColWidth};
-            }
-        `;
-        }
-      }
-
-      return style;
-    },
+    columnsWidth: { type: Object }
   },
   data: () => ({
     resizingCol: null,
@@ -566,17 +381,222 @@ export default {
     },
     aggCount: []
   }),
-  created() {
-    document.addEventListener('keydown', this.onKeyDown);
-    this.xcAuditModelCommentsCount();
+  computed: {
+    ids () {
+      return this.data.map(({ oldRow }) => this.meta.columns.filter(c => c.pk).map(c => oldRow[c._cn]).join('___'))
+    },
+    haveHasManyrelation () {
+      return !!Object.keys(this.hasMany).length
+    },
+    colLength () {
+      return (this.availableColumns && this.availableColumns.length) || 0
+    },
+    // visibleColLength() {
+    //   return (this.availableColumns && this.availableColumns.length) || 0
+    // },
+    rowLength () {
+      return (this.data && this.data.length) || 0
+    },
+    availColNames () {
+      return (this.availableColumns && this.availableColumns.map(c => c._cn)) || []
+    },
+    groupedAggCount () {
+      // eslint-disable-next-line camelcase
+      return this.aggCount ? this.aggCount.reduce((o, { model_id, count }) => ({ ...o, [model_id]: count }), {}) : {}
+    },
+    style () {
+      let style = ''
+      for (const [key, val] of Object.entries(this.columnsWidth || {})) {
+        if (val && key !== this.resizingCol) {
+          style += `
+            [data-col="${key}"]{
+              min-width: ${val};
+              max-width: ${val};
+              width: ${val};
+            }
+        `
+        } else if (key === this.resizingCol) {
+          style += `
+            [data-col="${key}"]{
+              min-width: ${this.resizingColWidth};
+              max-width: ${this.resizingColWidth};
+              width: ${this.resizingColWidth};
+            }
+        `
+        }
+      }
+
+      return style
+    }
   },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.onKeyDown);
-  },
-  name: "xcGridView",
   watch: {
-    data() {
-      this.xcAuditModelCommentsCount();
+    data () {
+      this.xcAuditModelCommentsCount()
+    }
+  },
+  mounted () {
+    this.calculateColumnWidth()
+  },
+  created () {
+    document.addEventListener('keydown', this.onKeyDown)
+    this.xcAuditModelCommentsCount()
+  },
+  beforeDestroy () {
+    document.removeEventListener('keydown', this.onKeyDown)
+  },
+  methods: {
+    isRequired (_columnObj, rowObj) {
+      let columnObj = _columnObj
+      if (columnObj.bt) {
+        columnObj = this.meta.columns.find(c => c.cn === columnObj.bt.cn)
+      }
+
+      return columnObj && (columnObj.rqd &&
+        (rowObj[columnObj._cn] === undefined || rowObj[columnObj._cn] === null) &&
+        !columnObj.default)
+    },
+    updateCol (row, column, value, columnObj, colIndex, rowIndex) {
+      this.$set(row, column, value)
+      this.onCellValueChange(colIndex, rowIndex, columnObj)
+    },
+    calculateColumnWidth () {
+      setTimeout(() => {
+        const obj = {}
+        this.meta && this.meta.columns && this.meta.columns.forEach((c) => {
+          obj[c._cn] = (columnStyling[c.uidt] && columnStyling[c.uidt].w) || undefined
+        })
+        this.meta && this.meta.v && this.meta.v.forEach((v) => {
+          obj[v._cn] = v.bt ? '100px' : '200px'
+        })
+        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',
+        'Attachment',
+        'Date',
+        'Time',
+        'Email',
+        'URL',
+        'DateTime',
+        'CreateTime',
+        'LastModifiedTime'].includes(col.uidt)
+    },
+    async xcAuditModelCommentsCount () {
+      if (this.isPublicView || !this.data || !this.data.length) { return }
+      const aggCount = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
+        dbAlias: this.nodes.dbAlias
+      }, 'xcAuditModelCommentsCount', {
+        model_name: this.meta._tn,
+        ids: this.data.map(({ row: r }) => {
+          return this.meta.columns.filter(c => c.pk).map(c => r[c._cn]).join('___')
+        })
+      }])
+
+      this.aggCount = aggCount
+    },
+
+    onKeyDown (e) {
+      if (this.selected.col === null || this.selected.row === null) { return }
+      switch (e.keyCode) {
+        // left
+        case 37:
+          if (this.selected.col > 0) { this.selected.col-- }
+          break
+        // right
+        case 39:
+          if (this.selected.col < this.colLength - 1) { this.selected.col++ }
+          break
+        // up
+        case 38:
+          if (this.selected.row > 0) { this.selected.row-- }
+          break
+        // down
+        case 40:
+          if (this.selected.row < this.rowLength - 1) { this.selected.row++ }
+          break
+        // enter
+        case 13:
+          this.makeEditable(this.selected.col, this.selected.row)
+          break
+        default: {
+          if (this.editEnabled.col != null && this.editEnabled.row != null) {
+            return
+          }
+          if (e.key && e.key.length === 1) {
+            this.$set(this.data[this.selected.row].row, this.availableColumns[this.selected.col]._cn, e.key)
+            this.editEnabled = { ...this.selected }
+          }
+        }
+      }
+    },
+    onClickOutside () {
+      if (
+        this.meta.columns &&
+        this.meta.columns[this.selected.col] &&
+        this.meta.columns[this.selected.col].virtual
+      ) { return }
+      this.selected.col = null
+      this.selected.row = null
+    },
+    onNewColCreation () {
+      this.addNewColMenu = false
+      this.addNewColModal = false
+      this.$emit('onNewColCreation')
+    },
+    expandRow (...args) {
+      this.$emit('expandRow', ...args)
+    },
+    showRowContextMenu ($event, rowObj, rowMeta, row) {
+      this.$emit('showRowContextMenu', $event, rowObj, rowMeta, row)
+    },
+    onCellValueChange (col, row, column, ev) {
+      this.$emit('onCellValueChange', col, row, column, ev)
+    },
+    addNewRelationTab (...args) {
+      this.$emit('addNewRelationTab', ...args)
+    },
+    makeSelected (col, row) {
+      if (this.selected.col !== col || this.selected.row !== row) {
+        this.selected = { col, row }
+        this.editEnabled = {}
+      }
+    },
+    makeEditable (col, row) {
+      if (this.isPublicView || !this.isEditable) { return }
+      if (this.availableColumns[col].ai) {
+        return this.$toast.info('Auto Increment field is not editable').goAway(3000)
+      }
+      if (this.availableColumns[col].pk && !this.data[row].rowMeta.new) {
+        return this.$toast.info('Editing primary key not supported').goAway(3000)
+      }
+      if (this.editEnabled.col !== col || this.editEnabled.row !== row) {
+        this.editEnabled = { col, row }
+      }
+    },
+    enableEditable (column) {
+      return (column && column.uidt === 'Attachment') ||
+        (column && column.uidt === 'SingleSelect') ||
+        (column && column.uidt === 'MultiSelect') ||
+        (column && column.uidt === 'DateTime') ||
+        (column && column.uidt === 'Date') ||
+        (column && column.uidt === 'Time') ||
+        (this.sqlUi && this.sqlUi.getAbstractType(column) === 'boolean')
+    },
+    insertNewRow (atEnd = false, expand = false) {
+      this.$emit('insertNewRow', atEnd, expand)
+    },
+    onresize (col, size) {
+      this.$emit('update:columnsWidth', { ...this.columnsWidth, [col]: size })
+    },
+    onXcResizing (_cn, width) {
+      this.resizingCol = _cn
+      this.resizingColWidth = width
     }
   }
 }
@@ -619,7 +639,6 @@ export default {
     height: 24px !important;
   }
 
-
   tr:hover .xc-bt-chip {
     margin-right: 0;
     padding-right: 0 !important;
@@ -630,7 +649,6 @@ export default {
     transition: .4s margin-right, .4s padding-right;
   }
 
-
   .theme--light tbody tr:hover {
     background: #eeeeee22;
   }
@@ -657,7 +675,6 @@ export default {
     min-height: auto;
   }
 
-
   .view .view-icon {
     display: none;
     transition: .3s display;
@@ -671,7 +688,6 @@ export default {
     display: none;
   }
 
-
   .v-input__control label {
     font-size: inherit;
   }
@@ -723,12 +739,10 @@ td.active::before {
   z-index: 6;
 }
 
-
 .row-expand-icon, .row-checkbox {
   opacity: 0;
 }
 
-
 tr:hover .row-expand-icon, tr:hover .row-checkbox, tr .row-checkbox.active {
   opacity: 1;
 }
@@ -737,7 +751,6 @@ tr:hover .row-no {
   display: none;
 }
 
-
 td, tr {
   min-height: 31px !important;
   /*height: 31px !important;*/
@@ -762,7 +775,6 @@ td, tr {
   /*max-height: 50px !important;*/
 }
 
-
 .belongsto-col {
   text-decoration: underline;
 }
@@ -776,7 +788,6 @@ td, tr {
   transition: .4s opacity, .4s max-width;
 }
 
-
 .hasmany-col-menu-icon.pv {
   /*display: none ;*/
   max-width: 0;
@@ -789,7 +800,6 @@ tr:hover .hasmany-col-menu-icon {
   max-width: 24px;
 }
 
-
 tbody tr:nth-of-type(odd) {
   background-color: transparent;
 }
@@ -802,7 +812,6 @@ tbody tr:hover {
   transition: .4s max-width, .4s min-width;
 }
 
-
 .cell {
   font-size: 13px;
 
@@ -825,7 +834,6 @@ td.primary-column {
   border-right-width: 2px !important;
 }
 
-
 .share-link-box {
   position: relative;
   z-index: 2;
@@ -853,7 +861,6 @@ td.primary-column {
   min-width: 70px;
 }
 
-
 .advance-menu-divider {
   width: calc(100% - 26px);
   margin-left: 13px;
@@ -890,5 +897,4 @@ th {
   min-width: 100px;
 }
 
-
 </style>