From 636fb89c15d3c51359012b86f218c5df4e3009ef Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 12:52:34 +0530
Subject: [PATCH 1/6] feat(gui-v2): add column resize in grid view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 44 ++++++++++++--
 .../composables/useGridViewColumnWidth.ts     | 58 ++++++++++++++++++
 packages/nc-gui-v2/plugins/directives.ts      | 59 +++++++++++++++++++
 4 files changed, 157 insertions(+), 5 deletions(-)
 create mode 100644 packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
 create mode 100644 packages/nc-gui-v2/plugins/directives.ts

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 692c3f667c..10a50bc8e7 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
     AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 624049a0a4..edafe9bf84 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { computed } from '@vue/reactivity'
-import { ColumnType, isVirtualCol } from 'nocodb-sdk'
-import { inject, onKeyStroke, onMounted, provide } from '#imports'
+import { isVirtualCol } from 'nocodb-sdk'
+import { getCurrentInstance, inject, onKeyStroke, onMounted, provide } from '#imports'
+import useGridViewColumnWidth from '~/composables/useGridViewColumnWidth'
 import {
   ActiveViewInj,
   ChangePageInj,
@@ -26,7 +26,15 @@ const isPublicView = false
 const selected = reactive<{ row?: number | null; col?: number | null }>({})
 const editEnabled = ref(false)
 
+const instance: any = getCurrentInstance()
+
 const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta, view)
+console.log(instance)
+const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(
+  view,
+  instance.ctx.$options.__scopeId,
+)
+onMounted(loadGridViewColumns)
 
 provide(IsFormInj, false)
 provide(IsGridInj, true)
@@ -59,6 +67,14 @@ watch(
   { immediate: true },
 )
 
+const onresize = (colID: string, event: any) => {
+  updateWidth(colID, event.detail)
+}
+const onXcResizing = (cn: string, event: any) => {
+  resizingCol.value = cn
+  resizingColWidth.value = event.detail
+}
+
 defineExpose({
   loadData,
 })
@@ -71,7 +87,15 @@ defineExpose({
         <thead>
           <tr>
             <th>#</th>
-            <th v-for="col in fields" :key="col.title">
+            <th
+              v-for="col in fields"
+              :key="col.title"
+              v-xc-ver-resize
+              :data-col="col.title"
+              @xcresize="onresize(col.id, $event)"
+              @xcresizing="onXcResizing(col.title, $event)"
+              @xcresized="resizingCol = null"
+            >
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
               <SmartsheetHeaderCell v-else :column="col" />
             </th>
@@ -204,7 +228,6 @@ defineExpose({
     min-height: 31px !important;
     position: relative;
     padding: 0 5px !important;
-    min-width: 200px;
   }
 
   table,
@@ -220,6 +243,7 @@ defineExpose({
   }
 
   td {
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -246,4 +270,14 @@ defineExpose({
     opacity: 0.1;
   }
 }
+
+:deep {
+  .resizer:hover,
+  .resizer:active,
+  .resizer:focus {
+    // todo: replace with primary color
+    @apply bg-blue-500/50;
+    cursor: col-resize;
+  }
+}
 </style>
diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
new file mode 100644
index 0000000000..aebf747ce8
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -0,0 +1,58 @@
+import { useStyleTag } from '@vueuse/core'
+import type { ColumnType, GridColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import type GridView from '../../nocodb/src/lib/models/GridView'
+import useMetas from '~/composables/useMetas'
+
+// todo: update swagger
+export default (view: Ref<(GridView & { id?: string }) | undefined>, scopeId: string) => {
+  const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
+
+  const gridViewCols = ref<Record<string, GridColumnType>>({})
+  const resizingCol = ref('')
+  const resizingColWidth = ref('200px')
+
+  const { $api } = useNuxtApp()
+
+  const { metas } = useMetas()
+
+  const columns = computed<ColumnType[]>(() => metas?.value?.[(view?.value as any)?.fk_model_id as string]?.columns)
+
+  watch(
+    // todo : update type in swagger
+    () => [gridViewCols, resizingCol, resizingColWidth],
+    () => {
+      let style = ''
+      for (const c of columns?.value || []) {
+        const val = gridViewCols?.value?.[c?.id as string]?.width || '200px'
+
+        if (val && c.title !== resizingCol?.value) {
+          style += `[${scopeId}] [data-col="${c.title}"]{min-width:${val};max-width:${val};width: ${val};}`
+        } else {
+          style += `[${scopeId}] [data-col="${c.title}"]{min-width:${resizingColWidth?.value};max-width:${resizingColWidth?.value};width: ${resizingColWidth?.value};}`
+        }
+      }
+      css.value = style
+    },
+    { deep: true, immediate: true },
+  )
+
+  const loadGridViewColumns = async () => {
+    if (!view.value?.id) return
+    const colsData: GridColumnType[] = await $api.dbView.gridColumnsList(view.value.id)
+    gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
+      (o, col) => ({
+        ...o,
+        [col.fk_column_id as string]: col,
+      }),
+      {},
+    )
+    loadCss()
+  }
+
+  const updateWidth = (id: string, width: string) => {
+    if (gridViewCols?.value?.[id]) gridViewCols.value[id].width = width
+  }
+
+  return { loadGridViewColumns, updateWidth, resizingCol, resizingColWidth, loadCss, unloadCss }
+}
diff --git a/packages/nc-gui-v2/plugins/directives.ts b/packages/nc-gui-v2/plugins/directives.ts
new file mode 100644
index 0000000000..d36a1396ca
--- /dev/null
+++ b/packages/nc-gui-v2/plugins/directives.ts
@@ -0,0 +1,59 @@
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive('xc-ver-resize', {
+    created: (el: Element) => {
+      // create resizer element
+      const resizer = document.createElement('div')
+      resizer.className = 'resizer'
+      resizer.style.position = 'absolute'
+      resizer.style.height = '100%'
+      resizer.style.width = '3px'
+      resizer.style.top = '0'
+      resizer.style.right = '-1px'
+      resizer.style.zIndex = '999'
+
+      // add resizer to element
+      el.appendChild(resizer)
+      resizer.addEventListener('mousedown', initDrag, false)
+
+      const instance = getCurrentInstance()
+      const emit =
+        instance?.emit ??
+        ((arg, data) => {
+          const event = new CustomEvent(arg, { detail: data })
+          ;(<HTMLElement>el).dispatchEvent(event)
+        })
+
+      let startX: number
+      let startWidth: number
+
+      // bind event handlers
+      function initDrag(e: MouseEvent) {
+        document.body.style.cursor = 'col-resize'
+        startX = e.clientX
+        startWidth = parseInt(document.defaultView?.getComputedStyle(el)?.width || '0', 10)
+        document.documentElement.addEventListener('mousemove', doDrag, false)
+        document.documentElement.addEventListener('mouseup', stopDrag, false)
+      }
+
+      let width: number | string
+
+      // emit event on dragging
+      function doDrag(e: MouseEvent) {
+        width = `${startWidth + e.clientX - startX}px`
+        emit('xcresizing', width)
+      }
+
+      // remove handlers and emit events on drag end
+      function stopDrag() {
+        resizer.classList.remove('primary')
+        document.body.style.cursor = ''
+        document.documentElement.removeEventListener('mousemove', doDrag, false)
+        document.documentElement.removeEventListener('mouseup', stopDrag, false)
+        emit('xcresize', width)
+        emit('xcresized')
+      }
+    },
+  })
+})

From 9358b4fbd480dda23173ba9ffaa9bece7b2e1543 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 13:07:13 +0530
Subject: [PATCH 2/6] refactor(gui-v2): use id as data-col attribute value to
 make it unique across tabs

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue      | 10 +++-------
 .../nc-gui-v2/composables/useGridViewColumnWidth.ts    |  6 +++---
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index edafe9bf84..19256e4a8c 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -26,13 +26,9 @@ const isPublicView = false
 const selected = reactive<{ row?: number | null; col?: number | null }>({})
 const editEnabled = ref(false)
 
-const instance: any = getCurrentInstance()
-
 const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta, view)
-console.log(instance)
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(
-  view,
-  instance.ctx.$options.__scopeId,
+  view
 )
 onMounted(loadGridViewColumns)
 
@@ -91,7 +87,7 @@ defineExpose({
               v-for="col in fields"
               :key="col.title"
               v-xc-ver-resize
-              :data-col="col.title"
+              :data-col="col.id"
               @xcresize="onresize(col.id, $event)"
               @xcresizing="onXcResizing(col.title, $event)"
               @xcresized="resizingCol = null"
@@ -118,7 +114,7 @@ defineExpose({
                 // 'text-center': isCentrallyAligned(columnObj),
                 // 'required': isRequired(columnObj, rowObj),
               }"
-              :data-col="columnObj.title"
+              :data-col="columnObj.id"
               @click="selectCell(rowIndex, colIndex)"
               @dblclick="editEnabled = true"
             >
diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index aebf747ce8..a5d7078185 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -5,7 +5,7 @@ import type GridView from '../../nocodb/src/lib/models/GridView'
 import useMetas from '~/composables/useMetas'
 
 // todo: update swagger
-export default (view: Ref<(GridView & { id?: string }) | undefined>, scopeId: string) => {
+export default (view: Ref<(GridView & { id?: string }) | undefined>) => {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
 
   const gridViewCols = ref<Record<string, GridColumnType>>({})
@@ -27,9 +27,9 @@ export default (view: Ref<(GridView & { id?: string }) | undefined>, scopeId: st
         const val = gridViewCols?.value?.[c?.id as string]?.width || '200px'
 
         if (val && c.title !== resizingCol?.value) {
-          style += `[${scopeId}] [data-col="${c.title}"]{min-width:${val};max-width:${val};width: ${val};}`
+          style += `[data-col="${c.id}"]{min-width:${val};max-width:${val};width: ${val};}`
         } else {
-          style += `[${scopeId}] [data-col="${c.title}"]{min-width:${resizingColWidth?.value};max-width:${resizingColWidth?.value};width: ${resizingColWidth?.value};}`
+          style += `[data-col="${c.id}"]{min-width:${resizingColWidth?.value};max-width:${resizingColWidth?.value};width: ${resizingColWidth?.value};}`
         }
       }
       css.value = style

From 322e73e253f05b8c3292df5d5372d866fb7ac7ce Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 13:07:42 +0530
Subject: [PATCH 3/6] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/dashboard/settings/AuditTab.vue     |  9 ++++++++-
 .../components/dashboard/settings/Metadata.vue     |  2 +-
 .../components/dashboard/settings/UIAcl.vue        |  4 ++--
 .../nc-gui-v2/components/dlg/AirtableImport.vue    | 14 ++++++++++++--
 packages/nc-gui-v2/components/smartsheet/Grid.vue  |  4 +---
 5 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
index 45a109f5fe..91e5cd56af 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue
@@ -96,6 +96,13 @@ const columns = [
       />
     </div>
 
-    <a-table class="w-full" size="small" :data-source="audits ?? []" :columns="columns" :pagination="false" :loading="isLoading" />
+    <a-table
+      class="w-full"
+      size="small"
+      :data-source="audits ?? []"
+      :columns="columns"
+      :pagination="false"
+      :loading="isLoading"
+    />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue b/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
index fc66c3e353..91b385b0d6 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
@@ -88,7 +88,7 @@ const columns = [
       </div>
       <a-table
         class="w-full"
-        :customRow="
+        :custom-row="
           (record) => ({
             class: `nc-metasync-row nc-metasync-row-${record.title}`,
           })
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
index 2a1970ddd8..41c4d41f93 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
@@ -13,7 +13,7 @@ const toast = useToast()
 const roles = $ref<string[]>(['editor', 'commenter', 'viewer'])
 let isLoading = $ref(false)
 let tables = $ref<any[]>([])
-let searchInput = $ref('')
+const searchInput = $ref('')
 
 const filteredTables = computed(() =>
   tables.filter(
@@ -123,7 +123,7 @@ const columns = [
         :pagination="false"
         :loading="isLoading"
         bordered
-        :customRow="
+        :custom-row="
           (record) => ({
             class: `nc-acl-table-row nc-acl-table-row-${record.title}`,
           })
diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 28c808e539..673e93d3c7 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -240,10 +240,20 @@ onBeforeUnmount(() => {
         </div>
         <a-form ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="ma-0">
           <a-form-item v-bind="validateInfos['details.apiKey']">
-            <a-input-password v-model:value="syncSource.details.apiKey" class="nc-input-api-key" placeholder="Api Key" size="large" />
+            <a-input-password
+              v-model:value="syncSource.details.apiKey"
+              class="nc-input-api-key"
+              placeholder="Api Key"
+              size="large"
+            />
           </a-form-item>
           <a-form-item v-bind="validateInfos['details.syncSourceUrlOrId']">
-            <a-input v-model:value="syncSource.details.syncSourceUrlOrId" class="nc-input-shared-base" placeholder="Shared Base ID / URL" size="large" />
+            <a-input
+              v-model:value="syncSource.details.syncSourceUrlOrId"
+              class="nc-input-shared-base"
+              placeholder="Shared Base ID / URL"
+              size="large"
+            />
           </a-form-item>
           <span class="prose-xl font-bold self-center my-4">Advanced Settings</span>
           <a-divider class="mt-2 mb-5" />
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 19256e4a8c..b704481b6f 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -27,9 +27,7 @@ const selected = reactive<{ row?: number | null; col?: number | null }>({})
 const editEnabled = ref(false)
 
 const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta, view)
-const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(
-  view
-)
+const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, false)

From 8f9152bff28ea8540f2fdaef0408a9237de9b325 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 13:49:07 +0530
Subject: [PATCH 4/6] feat(gui-v2): sync column width with server

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../composables/useGridViewColumnWidth.ts     | 19 ++++++++++++++-----
 .../composables/useUIPermission/index.ts      |  8 ++------
 .../useUIPermission/rolePermissions.ts        |  4 +++-
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index a5d7078185..f7510323b6 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -3,19 +3,19 @@ import type { ColumnType, GridColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import type GridView from '../../nocodb/src/lib/models/GridView'
 import useMetas from '~/composables/useMetas'
+import useUIPermission from '~/composables/useUIPermission'
 
 // todo: update swagger
 export default (view: Ref<(GridView & { id?: string }) | undefined>) => {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
+  const { isUIAllowed } = useUIPermission()
+  const { $api } = useNuxtApp()
+  const { metas } = useMetas()
 
   const gridViewCols = ref<Record<string, GridColumnType>>({})
   const resizingCol = ref('')
   const resizingColWidth = ref('200px')
 
-  const { $api } = useNuxtApp()
-
-  const { metas } = useMetas()
-
   const columns = computed<ColumnType[]>(() => metas?.value?.[(view?.value as any)?.fk_model_id as string]?.columns)
 
   watch(
@@ -51,7 +51,16 @@ export default (view: Ref<(GridView & { id?: string }) | undefined>) => {
   }
 
   const updateWidth = (id: string, width: string) => {
-    if (gridViewCols?.value?.[id]) gridViewCols.value[id].width = width
+    if (gridViewCols?.value?.[id]) {
+      gridViewCols.value[id].width = width
+    }
+
+    // sync with server if allowed
+    if (isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
+      $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
+        width,
+      })
+    }
   }
 
   return { loadGridViewColumns, updateWidth, resizingCol, resizingColWidth, loadCss, unloadCss }
diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index e8fa8e6b5b..8ac272f97a 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -6,7 +6,7 @@ export default () => {
   const { $state } = useNuxtApp()
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
-  const isUIAllowed = (permission: keyof typeof rolePermissions[keyof typeof rolePermissions], _skipPreviewAs = false) => {
+  const isUIAllowed = (permission: string, _skipPreviewAs = false) => {
     const user = $state.user
     let userRoles = user?.value?.roles || {}
 
@@ -32,11 +32,7 @@ export default () => {
     // }
 
     return Object.entries(roles).some(([role, hasRole]) => {
-      return (
-        hasRole &&
-        (rolePermissions[role as keyof typeof rolePermissions] === '*' ||
-          rolePermissions[role as keyof typeof rolePermissions]?.[permission])
-      )
+      return hasRole && (rolePermissions[role] === '*' || (rolePermissions[role] as Record<string, boolean>)?.[permission])
     })
   }
 
diff --git a/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts b/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
index cd717b3278..8fedbaddd0 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
@@ -1,4 +1,4 @@
-export default {
+const permissions: Record<string, Record<string, boolean> | '*'> = {
   creator: '*',
   owner: '*',
   guest: {},
@@ -35,3 +35,5 @@ export default {
     projectSettings: true,
   },
 }
+
+export default permissions

From 8d49080cde213e4cb5055f1e64385940e73897e4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 17:04:55 +0530
Subject: [PATCH 5/6] refactor(gui-v2): import statement correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useGridViewColumnWidth.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index f7510323b6..4116df08b3 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -1,12 +1,11 @@
 import { useStyleTag } from '@vueuse/core'
-import type { ColumnType, GridColumnType } from 'nocodb-sdk'
+import type { ColumnType, GridColumnType, GridType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import type GridView from '../../nocodb/src/lib/models/GridView'
 import useMetas from '~/composables/useMetas'
 import useUIPermission from '~/composables/useUIPermission'
 
 // todo: update swagger
-export default (view: Ref<(GridView & { id?: string }) | undefined>) => {
+export default (view: Ref<(GridType & { id?: string }) | undefined>) => {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
   const { isUIAllowed } = useUIPermission()
   const { $api } = useNuxtApp()

From 1c19c91c7c53364629d3de32c27bf4a04cf3f427 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 17:06:03 +0530
Subject: [PATCH 6/6] refactor(gui-v2): rename plugin with more relevant name

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/plugins/{directives.ts => resizeDirective.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/nc-gui-v2/plugins/{directives.ts => resizeDirective.ts} (100%)

diff --git a/packages/nc-gui-v2/plugins/directives.ts b/packages/nc-gui-v2/plugins/resizeDirective.ts
similarity index 100%
rename from packages/nc-gui-v2/plugins/directives.ts
rename to packages/nc-gui-v2/plugins/resizeDirective.ts