wip(gui-v2): virtual column header tooltip

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

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

@@ -1,143 +1,82 @@
 <script setup lang="ts">
+import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
+import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import { toRef } from 'vue'
-import type { ColumnType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
+import { $computed } from 'vue/macros'
+import { useMetas } from '~/composables'
 import { ColumnInj, MetaInj } from '~/context'
-import { provide } from '#imports'
+import type { TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { provide, useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any } }>()
 const column = toRef(props, 'column')
-
 provide(ColumnInj, column)
-
+const { metas } = useMetas()
 const meta = inject(MetaInj)
 
-useProvideColumnCreateStore(meta as Ref<TableType>, column)
+const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
+
+const colOptions = $computed(() => column.value?.colOptions)
+const tableTile = $computed(() => meta?.value?.title)
+const relationColumn = $computed<LinkToAnotherRecordType | null>(() => {
+  if (isMm || isHm || isBt) {
+    return column.value?.colOptions as LinkToAnotherRecordType
+  } else if ((column?.value?.colOptions as LookupType | RollupType)?.fk_relation_column_id) {
+    return meta?.value?.columns?.find(
+      (c) => c.id === (column?.value?.colOptions as LookupType | RollupType)?.fk_relation_column_id,
+    )?.colOptions as LinkToAnotherRecordType
+  }
+  return null
+})
 
-// 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)
-//       }
-//     }
-//   }
-// }
+const relatedTableMeta = $computed(
+  () => relationColumn && relationColumn?.fk_related_model_id && metas.value?.[relationColumn?.fk_related_model_id as string],
+)
+
+const relatedTableTitle = $computed(() => relatedTableMeta?.title)
+
+const childColumn = $computed(() => {
+  if (relatedTableMeta?.columns) {
+    if (isRollup) {
+      const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as RollupType).fk_rollup_column_id)
+      return ch
+    }
+    if (isLookup) {
+      const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as LookupType).fk_lookup_column_id)
+      return ch
+    }
+  }
+  return ''
+})
+
+const tooltipMsg = computed(() => {
+  if (!column.value) {
+    return ''
+  }
+  if (isHm.value) {
+    return `'${tableTile}' has many '${relatedTableTitle}'`
+  } else if (isMm.value) {
+    return `'${tableTile}' & '${relatedTableTitle}' have many to many relation`
+  } else if (isBt.value) {
+    return `'${column?.value?.title}' belongs to '${relatedTableTitle}'`
+  } else if (isLookup.value) {
+    return `'${childColumn.title}' from '${relatedTableTitle}' (${childColumn.uidt})`
+  } else if (isFormula.value) {
+    const formula = substituteColumnIdWithAliasInFormula(
+      (column.value?.colOptions as FormulaType)?.formula,
+      meta?.value?.columns as ColumnType[],
+      (column.value?.colOptions as any)?.formula_raw,
+    )
+    return `Formula - ${formula}`
+  } else if (isRollup.value) {
+    return `'${childColumn.title}' of '${relatedTableTitle}' (${childColumn.uidt})`
+  }
+  return ''
+})
+
+
+useProvideColumnCreateStore(meta as Ref<TableType>, column)
 </script>
 
 <template>
@@ -147,7 +86,12 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
           todo: bring tooltip
           -->
     <SmartsheetHeaderVirtualCellIcon v-if="column" />
-    <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
+    <a-tooltip placement="bottom">
+      <template #title>
+        {{ tooltipMsg }}
+      </template>
+      <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
+    </a-tooltip>
     <span v-if="column.rqd" class="error--text text--lighten-1">&nbsp;*</span>
 
     <!--    <span class="caption" v-html="tooltipMsg" /> -->

scripts/sdk/swagger.json

@@ -6778,7 +6778,7 @@
         }
       },
       "Formula": {
-        "title": "Lookup",
+        "title": "Formula",
         "type": "object",
         "properties": {
           "id": {
@@ -6796,6 +6796,9 @@
           "formula": {
             "type": "string"
           },
+          "formula_raw": {
+            "type": "string"
+          },
           "deleted": {
             "type": "string"
           },