Browse Source

fix: links in forms

pull/6360/head
DarkPhoenix2704 1 year ago
parent
commit
b23c9b109a
  1. 8
      packages/nc-gui/components/virtual-cell/Links.vue
  2. 48
      packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
  3. 2
      packages/nc-gui/components/virtual-cell/components/ListItem.vue
  4. 2
      packages/nc-gui/components/virtual-cell/components/ListItems.vue

8
packages/nc-gui/components/virtual-cell/Links.vue

@ -21,6 +21,8 @@ const isLocked = inject(IsLockedInj, ref(false))
const isUnderLookup = inject(IsUnderLookupInj, ref(false))
const colTitle = computed(() => column.value?.title || '')
const listItemsDlg = ref(false)
const childListDlg = ref(false)
@ -43,6 +45,10 @@ const relatedTableDisplayColumn = computed(
loadRelatedTableMeta()
const textVal = computed(() => {
if (isForm?.value) {
return state.value?.[colTitle.value]?.length ? `${state.value?.[colTitle.value]?.length} records Linked` : 'No records linked'
}
const parsedValue = +value?.value || 0
if (!parsedValue) {
@ -90,7 +96,7 @@ const localCellValue = computed<any[]>(() => {
:is="isLocked || isUnderLookup ? 'span' : 'a'"
:title="textVal"
class="text-center pl-3 nc-datatype-link underline-transparent"
:class="{ '!text-gray-300': !value }"
:class="{ '!text-gray-300': !textVal }"
@click.stop.prevent="openChildList"
>
{{ textVal }}

48
packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@ -103,6 +103,13 @@ const relation = computed(() => {
return injectedColumn!.value?.colOptions?.type
})
watch(
() => props.cellValue,
() => {
if (!isNew.value) loadChildrenList()
},
)
watch(expandedFormDlg, () => {
loadChildrenList()
})
@ -114,20 +121,21 @@ watch(expandedFormDlg, () => {
:class="{ active: vModel }"
:footer="null"
:closable="false"
:width="840"
:body-style="{ 'padding': 0, 'margin': 0, 'min-height': '500px' }"
:width="isForm ? 600 : 800"
:body-style="{ 'padding': 0, 'margin': 0, 'min-height': isForm ? '300px' : '500px' }"
wrap-class-name="nc-modal-child-list"
>
<LazyVirtualCellComponentsHeader
v-if="!isForm"
:relation="relation"
:linked-records="childrenListCount"
:table-title="meta?.title"
:related-table-title="relatedTableMeta?.title"
:display-value="row.row[displayValueProp]"
/>
<div class="m-4 bg-gray-50 border-gray-50 border-b-2"></div>
<div v-if="!isForm" class="m-4 bg-gray-50 border-gray-50 border-b-2"></div>
<div class="flex mt-2 mb-2 items-center gap-2">
<div v-if="!isForm" class="flex mt-2 mb-2 items-center gap-2">
<div
class="flex items-center border-1 p-1 rounded-md w-full border-gray-200"
:class="{ '!border-primary': childrenListPagination.query.length !== 0 || isFocused }"
@ -150,7 +158,13 @@ watch(expandedFormDlg, () => {
<template v-if="(isNew && state?.[colTitle]?.length) || childrenList?.pageInfo?.totalRows">
<div class="mt-2 mb-2">
<div class="h-[420px] overflow-scroll nc-scrollbar-md cursor-pointer pr-1">
<div
:class="{
'h-[420px]': !isForm,
'h-[250px]': isForm,
}"
class="overflow-scroll nc-scrollbar-md cursor-pointer pr-1"
>
<LazyVirtualCellComponentsListItem
v-for="(refRow, id) in childrenList?.list ?? state?.[colTitle] ?? []"
:key="id"
@ -159,14 +173,14 @@ watch(expandedFormDlg, () => {
data-testid="nc-child-list-item"
:attachment="attachmentCol"
:related-table-display-value-prop="relatedTableDisplayValueProp"
:is-linked="isChildrenListLinked[Number.parseInt(id)]"
:is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
:is-loading="isChildrenListLoading[Number.parseInt(id)]"
@expand="onClick(refRow)"
@click="
() => {
if (isPublic) return
isChildrenListLinked[Number.parseInt(id)]
isNew
? unlinkRow(refRow, Number.parseInt(id))
: isChildrenListLinked[Number.parseInt(id)]
? unlinkRow(refRow, Number.parseInt(id))
: linkRow(refRow, Number.parseInt(id))
}
@ -175,7 +189,14 @@ watch(expandedFormDlg, () => {
</div>
</div>
</template>
<div v-else class="pt-1 h-[420px] flex flex-col items-center justify-center text-gray-500">
<div
v-else
:class="{
'h-[420px]': !isForm,
'h-[250px]': isForm,
}"
class="pt-1 flex flex-col items-center justify-center text-gray-500"
>
<InboxIcon class="w-16 h-16 mx-auto" />
<p>There are no records in table</p>
</div>
@ -183,9 +204,12 @@ watch(expandedFormDlg, () => {
<div class="my-2 bg-gray-50 border-gray-50 border-b-2"></div>
<div class="flex flex-row justify-between bg-white relative pt-1">
<div class="flex items-center justify-center px-2 rounded-md text-brand-500 bg-brand-50">
<div v-if="!isForm" class="flex items-center justify-center px-2 rounded-md text-brand-500 bg-brand-50">
{{ childrenListCount || 0 }} records {{ childrenListCount !== 0 ? 'are' : '' }} linked
</div>
<div v-else class="flex items-center justify-center px-2 rounded-md text-brand-500 bg-brand-50">
{{ state?.[colTitle]?.length || 0 }} records {{ state?.[colTitle]?.length !== 0 ? 'are' : '' }} linked
</div>
<div class="flex absolute items-center py-2 justify-center w-full">
<a-pagination
v-if="!isNew && childrenList?.pageInfo"
@ -203,7 +227,7 @@ watch(expandedFormDlg, () => {
<NcButton v-if="!readonly" type="ghost" data-testid="nc-child-list-button-link-to" @click="emit('attachRecord')">
<MdiPlus /> Link more records
</NcButton>
<NcButton type="primary" class="nc-close-btn" @click="vModel = false"> Close </NcButton>
<NcButton v-if="!isForm" type="primary" class="nc-close-btn" @click="vModel = false"> Close </NcButton>
</div>
</div>

2
packages/nc-gui/components/virtual-cell/components/ListItem.vue

@ -115,7 +115,7 @@ const attachments: Attachment[] = computed(() => {
</div>
</div>
<NcButton
v-if="!isPublic"
v-if="!isForm && !isPublic"
type="text"
size="lg"
class="!px-2 nc-expand-item !group-hover:block !hidden !absolute right-1 bottom-1"

2
packages/nc-gui/components/virtual-cell/components/ListItems.vue

@ -149,7 +149,7 @@ watch(expandedFormDlg, () => {
v-model:visible="vModel"
:class="{ active: vModel }"
:footer="null"
:width="840"
:width="isForm ? 600 : 800"
:closable="false"
:body-style="{ 'padding': 0, 'margin': 0, 'min-height': '500px' }"
wrap-class-name="nc-modal-link-record"

Loading…
Cancel
Save