Browse Source

feat: make Links column similar to LTAR

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5848/head
Pranav C 1 year ago
parent
commit
0bd165b67e
  1. 79
      packages/nc-gui/components/virtual-cell/Link.vue
  2. 14
      packages/nc-gui/package-lock.json
  3. 1
      packages/nc-gui/package.json

79
packages/nc-gui/components/virtual-cell/Link.vue

@ -1,22 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { CellValueInj, inject, useShowNotEditableWarning } from '#imports' import { computed } from '@vue/reactivity'
import { Ref } from 'vue' import { inflect } from 'inflection'
import type { ColumnType } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { CellValueInj, inject } from '#imports'
import { pluralize, singularize } from 'inflection'
const value = inject(CellValueInj) const value = inject(CellValueInj)
const column = inject(ColumnInj)! const column = inject(ColumnInj)!
const relColumn = computed(() => { const meta = inject(MetaInj, ref())
return column.value?.related_column
}
const relColumn = computed(() => {
return meta.value.columns.find((c: ColumnType) => c.id === column.value?.colOptions?.fk_relation_column_id)
})
const cellValue = inject(CellValueInj)! const cellValue = inject(CellValueInj)!
@ -41,35 +39,64 @@ const { isUIAllowed } = useUIPermission()
const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow() const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
const { relatedTableMeta, loadRelatedTableMeta, relatedTableDisplayValueProp, unlink } = useProvideLTARStore( const { relatedTableMeta, loadRelatedTableMeta, relatedTableDisplayValueProp, unlink } = useProvideLTARStore(
column as Ref<Required<ColumnType>>, relColumn as Ref<Required<ColumnType>>,
row, row,
isNew, isNew,
reloadRowTrigger.trigger, reloadRowTrigger.trigger,
) )
</script>
<template>
<div>
<span class="text-center pl-3">
{{ value }}
</span>
const relatedTableDisplayColumn = computed(
() =>
relatedTableMeta.value?.columns?.find((c: any) => c.title === relatedTableDisplayValueProp.value) as ColumnType | undefined,
)
loadRelatedTableMeta()
<LazyVirtualCellComponentsListItems v-model="listItemsDlg" :column="relColumn" /> const textVal = computed(() => {
if (!value.value) {
return 'Empty'
} else if (value.value === 1) {
return `1 ${singularize(relatedTableMeta.value?.title ?? '')}`
} else {
return `${value.value} ${pluralize(relatedTableMeta.value?.title ?? '')}`
}
})
</script>
<template>
<div class="flex w-full items-center">
<a @click.stop.prevent="childListDlg = true" class="text-center pl-3 flex-grow block"
:class="{'!text-gray-300': !value}">
{{ textVal }}
</a>
<div v-if="!isLocked && !isUnderLookup" class="flex justify-end gap-1 min-h-[30px] items-center">
<!-- <GeneralIcon-->
<!-- icon="expand"-->
<!-- class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"-->
<!-- @click.stop="childListDlg = true"-->
<!-- />-->
<GeneralIcon
v-if="!readOnly && isUIAllowed('xcDatatableEditable')"
icon="plus"
class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
@click.stop="listItemsDlg = true"
/>
</div>
<LazyVirtualCellComponentsListItems v-model="listItemsDlg" :column="relatedTableDisplayColumn" />
<LazyVirtualCellComponentsListChildItems <LazyVirtualCellComponentsListChildItems
v-model="childListDlg" v-model="childListDlg"
:cell-value="localCellValue" :cell-value="localCellValue"
:column="relColumn" :column="relatedTableDisplayColumn"
@attach-record="onAttachRecord" @attach-record="onAttachRecord"
/> />
</div> </div>
</template> </template>

14
packages/nc-gui/package-lock.json generated

@ -23,6 +23,7 @@
"dayjs": "^1.11.3", "dayjs": "^1.11.3",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"httpsnippet": "^2.0.0", "httpsnippet": "^2.0.0",
"inflection": "^2.0.1",
"jsbarcode": "^3.11.5", "jsbarcode": "^3.11.5",
"jsep": "^1.3.6", "jsep": "^1.3.6",
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
@ -9967,6 +9968,14 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/inflection": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/inflection/-/inflection-2.0.1.tgz",
"integrity": "sha512-wzkZHqpb4eGrOKBl34xy3umnYHx8Si5R1U4fwmdxLo5gdH6mEK8gclckTj/qWqy4Je0bsDYe/qazZYuO7xe3XQ==",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/inflight": { "node_modules/inflight": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@ -25648,6 +25657,11 @@
"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
"dev": true "dev": true
}, },
"inflection": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/inflection/-/inflection-2.0.1.tgz",
"integrity": "sha512-wzkZHqpb4eGrOKBl34xy3umnYHx8Si5R1U4fwmdxLo5gdH6mEK8gclckTj/qWqy4Je0bsDYe/qazZYuO7xe3XQ=="
},
"inflight": { "inflight": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",

1
packages/nc-gui/package.json

@ -47,6 +47,7 @@
"dayjs": "^1.11.3", "dayjs": "^1.11.3",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"httpsnippet": "^2.0.0", "httpsnippet": "^2.0.0",
"inflection": "^2.0.1",
"jsbarcode": "^3.11.5", "jsbarcode": "^3.11.5",
"jsep": "^1.3.6", "jsep": "^1.3.6",
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",

Loading…
Cancel
Save