feat(gui-v2): add virtual header cell with icon

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

packages/nc-gui-v2/components/smartsheet-header/Cell.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { inject } from 'vue'
 import { ColumnInj } from '../index'
 
 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
@@ -97,7 +96,7 @@ export default {
     <!--    <span v-if="(column.rqd && !column.cdf) || required" class="error&#45;&#45;text text&#45;&#45;lighten-1">&nbsp;*</span> -->
 
     <v-spacer />
-    <!--
+    <!--  todo: implement delete or edit column
     <v-menu
       v-if="!isLocked && !isPublicView && _isUIAllowed('edit-column') && !isForm"
       open-on-hover

packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue

@@ -1,9 +1,222 @@
-<script>
+<script setup lang="ts">
-export default {
+import type { ColumnType } from 'nocodb-sdk'
-  name: 'VirtualCell',
+import { ColumnInj } from '../index'
-}
+import { provide } from '#imports'
+
+const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
+provide(ColumnInj, column)
+// import { UITypes } from 'nocodb-sdk'
+// import { getUIDTIcon } from '../helpers/uiTypes'
+// import EditVirtualColumn from '~/components/project/spreadsheet/components/EditVirtualColumn'
+//
+// export default {
+//   name: 'VirtualHeaderCell',
+//   components: { EditVirtualColumn },
+//   props: ['column', 'nodes', 'meta', 'isForm', 'isPublicView', 'sqlUi', 'required', 'isLocked', 'isVirtual'],
+//   data: () => ({
+//     columnDeleteDialog: false,
+//     editColumnMenu: false,
+//     rollupIcon: getUIDTIcon('Rollup'),
+//     rels: ['bt', 'hm', 'mm']
+//   }),
+//   computed: {
+//     alias() {
+//       // return this.column.lk ? `${this.column.lk._lcn} <small class="grey--text text--darken-1">(from ${this.column.lk._ltn})</small>` : this.column.title
+//       return this.column.title
+//     },
+//     type() {
+//       if (this.column?.colOptions?.type) {
+//         return this.column.colOptions.type
+//       }
+//       if (this.column?.colOptions?.formula) {
+//         return 'formula'
+//       }
+//       if (this.column.uidt === UITypes.Lookup) {
+//         return 'lk'
+//       }
+//       if (this.column.uidt === UITypes.Rollup) {
+//         return 'rl'
+//       }
+//       return ''
+//     },
+//     relation() {
+//       if (this.rels.includes(this.type)) {
+//         return this.column
+//       } else if (this.column.colOptions?.fk_relation_column_id) {
+//         return this.meta.columns.find(c => c.id === this.column.colOptions?.fk_relation_column_id)
+//       }
+//       return undefined
+//     },
+//     relationType() {
+//       return this.relation?.colOptions?.type
+//     },
+//     relationMeta() {
+//       if (this.rels.includes(this.type)) {
+//         return this.getMeta(this.column.colOptions.fk_related_model_id)
+//       } else if (this.relation) {
+//         return this.getMeta(this.relation.colOptions.fk_related_model_id)
+//       }
+//       return undefined
+//     },
+//     childColumn() {
+//       if (this.relationMeta?.columns) {
+//         if (this.type === 'rl') {
+//           const ch = this.relationMeta.columns.find(c => c.id === this.column.colOptions.fk_rollup_column_id)
+//           return ch
+//         }
+//         if (this.type === 'lk') {
+//           const ch = this.relationMeta.columns.find(c => c.id === this.column.colOptions.fk_lookup_column_id)
+//           return ch
+//         }
+//       }
+//       return ''
+//     },
+//     childTable() {
+//       if (this.relationMeta?.title) {
+//         return this.relationMeta.title
+//       }
+//       return ''
+//     },
+//     parentTable() {
+//       if (this.rels.includes(this.type)) {
+//         return this.meta.title
+//       }
+//       return ''
+//     },
+//     parentColumn() {
+//       if (this.rels.includes(this.type)) {
+//         return this.column.title
+//       }
+//       return ''
+//     },
+//     tooltipMsg() {
+//       if (!this.column) {
+//         return ''
+//       }
+//       if (this.type === 'hm') {
+//         return `'${this.parentTable}' has many '${this.childTable}'`
+//       } else if (this.type === 'mm') {
+//         return `'${this.childTable}' & '${this.parentTable}' have <br>many to many relation`
+//       } else if (this.type === 'bt') {
+//         return `'${this.column.title}' belongs to '${this.childTable}'`
+//       } else if (this.type === 'lk') {
+//         return `'${this.childColumn.title}' from '${this.childTable}' (${this.childColumn.uidt})`
+//       } else if (this.type === 'formula') {
+//         return `Formula - ${this.column.colOptions.formula}`
+//       } else if (this.type === 'rl') {
+//         return `'${this.childColumn.title}' of '${this.childTable}' (${this.childColumn.uidt})`
+//       }
+//       return ''
+//     }
+//   },
+//   methods: {
+//     getMeta(id) {
+//       return this.$store.state.meta.metas[id] || {}
+//     },
+//     async deleteColumn() {
+//       try {
+//         await this.$api.dbTableColumn.delete(this.column.id)
+//
+//         if (this.column.uidt === UITypes.LinkToAnotherRecord && this.column.colOptions) {
+//           this.$store.dispatch('meta/ActLoadMeta', { force: true, id: this.column.colOptions.fk_related_model_id }).then(() => {})
+//         }
+//
+//         this.$emit('saved')
+//         this.columnDeleteDialog = false
+//       } catch (e) {
+//         this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
+//       }
+//     }
+//   }
+// }
 </script>
 
-<template></template>
+<template>
+  <div class="d-flex align-center">
+    <!--    <v-tooltip bottom>
+          <template #activator="{ on }">
+          todo: bring tooltip
+          -->
+    <SmartsheetHeaderVirtualCellIcon v-if="column" />
+    <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
+    <span v-if="column.rqd" class="error--text text--lighten-1">&nbsp;*</span>
+
+    <!--    <span class="caption" v-html="tooltipMsg" /> -->
+
+    <!--    </v-tooltip> -->
+    <v-spacer />
+    <!--
+      todo: implement delete or edit column
 
-<style scoped></style>
+          <v-menu
+            v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('edit-column') && !isForm"
+            offset-y
+            open-on-hover
+            left
+            transition="slide-y-transition"
+          >
+            <template #activator="{ on }">
+              <v-icon v-if="!isLocked && !isForm" small v-on="on"> mdi-menu-down </v-icon>
+            </template>
+            <v-list dense>
+              <v-list-item dense @click="editColumnMenu = true">
+                <x-icon small class="mr-1 nc-column-edit" color="primary"> mdi-pencil </x-icon>
+                <span class="caption">
+                  &lt;!&ndash; Edit &ndash;&gt;
+                  {{ $t('general.edit') }}
+                </span>
+              </v-list-item>
+              <v-list-item @click="columnDeleteDialog = true">
+                <x-icon small class="mr-1 nc-column-delete" color="error"> mdi-delete-outline </x-icon>
+                <span class="caption">
+                  &lt;!&ndash; Delete &ndash;&gt;
+                  {{ $t('general.delete') }}
+                </span>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+
+          <v-dialog v-model="columnDeleteDialog" max-width="500" persistent>
+            <v-card>
+              <v-card-title class="grey darken-2 subheading white&#45;&#45;text"> Confirm </v-card-title>
+              <v-divider />
+              <v-card-text class="mt-4 title">
+                Do you want to delete <span class="font-weight-bold">'{{ column.title }}'</span> column ?
+              </v-card-text>
+              <v-divider />
+              <v-card-actions class="d-flex pa-4">
+                <v-spacer />
+                <v-btn small @click="columnDeleteDialog = false">
+                  &lt;!&ndash; Cancel &ndash;&gt;
+                  {{ $t('general.cancel') }}
+                </v-btn>
+                <v-btn v-t="['a:column:delete']" small color="error" @click="deleteColumn"> Confirm </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+
+          <v-menu v-model="editColumnMenu" offset-y content-class="" left transition="slide-y-transition">
+            <template #activator="{ on }">
+              <span v-on="on" />
+            </template>
+            <edit-virtual-column
+              v-if="editColumnMenu"
+              v-model="editColumnMenu"
+              :nodes="nodes"
+              :edit-column="true"
+              :column="column"
+              :meta="meta"
+              :sql-ui="sqlUi"
+              v-on="$listeners"
+            />
+          </v-menu> -->
+  </div>
+</template>
+
+<style scoped>
+.name {
+  max-width: calc(100% - 40px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { LinkToAnotherRecordType, RelationTypes, UITypes } from "nocodb-sdk";
+import { ColumnInj } from '~/components'
+import GenericIcon from '~icons/mdi/square-rounded'
+import HMIcon from '~icons/mdi/table-arrow-right'
+import BTIcon from '~icons/mdi/table-arrow-left'
+import MMIcon from '~icons/mdi/table-network'
+import FormulaIcon from '~icons/mdi/math-integral'
+import RollupIcon from '~icons/mdi/movie-roll'
+
+const column = inject(ColumnInj)
+
+const icon = computed(() => {
+  switch (column?.uidt) {
+    case UITypes.LinkToAnotherRecord:
+      switch ((<LinkToAnotherRecordType>column?.colOptions)?.type) {
+        case RelationTypes.MANY_TO_MANY:
+          return MMIcon
+        case RelationTypes.HAS_MANY:
+          return HMIcon
+        case RelationTypes.BELONGS_TO:
+          return BTIcon
+      }
+      break
+    case UITypes.Formula:
+      return FormulaIcon
+    case UITypes.Lookup:
+      return GenericIcon
+    case UITypes.Rollup:
+      return RollupIcon
+  }
+  return GenericIcon
+})
+
+/*
+*
+        <v-icon v-else-if="type === 'formula'" x-small class="mr-1" v-on="on">
+          mdi-math-integral
+        </v-icon>
+        <template v-else-if="type === 'lk'">
+          <v-icon v-if="relationType === 'hm'" color="warning" x-small class="mr-1" v-on="on">
+            mdi-table-column-plus-before
+          </v-icon>
+          <v-icon v-else-if="relationType === 'bt'" color="info" x-small class="mr-1" v-on="on">
+            mdi-table-column-plus-before
+          </v-icon>
+          <v-icon v-else-if="relationType === 'mm'" color="pink" x-small class="mr-1" v-on="on">
+            mdi-table-column-plus-before
+          </v-icon>
+        </template>
+        <template v-else-if="type === 'rl'">
+          <v-icon v-if="relationType === 'hm'" color="warning" x-small class="mr-1" v-on="on">
+            {{ rollupIcon }}
+          </v-icon>
+          <v-icon v-else-if="relationType === 'bt'" color="info" x-small class="mr-1" v-on="on">
+            {{ rollupIcon }}
+          </v-icon>
+          <v-icon v-else-if="relationType === 'mm'" color="pink" x-small class="mr-1" v-on="on">
+            {{ rollupIcon }}
+          </v-icon>
+        </template>
+* */
+</script>
+
+<template>
+  <component :is="icon" class="text-grey mx-1" />
+</template>

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -50,8 +50,7 @@ watch(
         <tr>
           <th>#</th>
           <th v-for="col in meta.columns" :key="col.title">
-            <span v-if="isVirtualCol(col)"> {{ col.title }}</span>
+            <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
-
             <SmartsheetHeaderCell v-else :column="col" />
           </th>
         </tr>