@ -1,5 +1,6 @@
< script lang = "ts" setup >
import { type ColumnType , isLinksOrLTAR , isSystemColumn } from 'nocodb-sdk'
import type { ColumnType , LinkToAnotherRecordType } from 'nocodb-sdk'
import { RelationTypes , isLinksOrLTAR , isSystemColumn } from 'nocodb-sdk'
import {
ColumnInj ,
IsFormInj ,
@ -30,10 +31,14 @@ const vModel = useVModel(props, 'modelValue', emit)
const { isMobileMode } = useGlobal ( )
const { t } = useI18n ( )
const isForm = inject ( IsFormInj , ref ( false ) )
const isPublic = inject ( IsPublicInj , ref ( false ) )
const isExpandedFormCloseAfterSave = ref ( false )
const injectedColumn = inject ( ColumnInj , ref ( ) )
const readOnly = inject ( ReadonlyInj , ref ( false ) )
@ -58,7 +63,7 @@ const {
relatedTableMeta ,
link ,
meta ,
headerDisplayValue ,
row ,
resetChildrenListOffsetCount ,
} = useLTARStoreOrThrow ( )
@ -68,7 +73,7 @@ watch(
[ vModel , isForm ] ,
( nextVal ) => {
if ( ( nextVal [ 0 ] || nextVal [ 1 ] ) && ! isNew . value ) {
loadChildrenList ( )
loadChildrenList ( true )
}
/ / r e s e t o f f s e t c o u n t w h e n c l o s i n g m o d a l
@ -102,20 +107,96 @@ const attachmentCol = computedInject(FieldsInj, (_fields) => {
const fields = computedInject ( FieldsInj , ( _fields ) => {
return ( relatedTableMeta . value . columns ? ? [ ] )
. filter ( ( col ) => ! isSystemColumn ( col ) && ! isPrimary ( col ) && ! isLinksOrLTAR ( col ) && ! isAttachment ( col ) )
. slice ( 0 , isMobileMode . value ? 1 : 4 )
. sort ( ( a , b ) => {
if ( a . meta ? . defaultViewColOrder !== undefined && b . meta ? . defaultViewColOrder !== undefined ) {
return a . meta . defaultViewColOrder - b . meta . defaultViewColOrder
}
return 0
} )
. slice ( 0 , isMobileMode . value ? 1 : 3 )
} )
const expandedFormDlg = ref ( false )
const expandedFormRow = ref ( { } )
/** populate initial state for a new row which is parent/child of current record */
const newRowState = computed ( ( ) => {
if ( isNew . value ) return { }
const colOpt = ( injectedColumn ? . value as ColumnType ) ? . colOptions as LinkToAnotherRecordType
const colInRelatedTable : ColumnType | undefined = relatedTableMeta ? . value ? . columns ? . find ( ( col ) => {
/ / L i n k s a s f o r t h e c a s e o f ' m m ' w e n e e d t h e ' L i n k s ' c o l u m n
if ( ! isLinksOrLTAR ( col ) ) return false
const colOpt1 = col ? . colOptions as LinkToAnotherRecordType
if ( colOpt1 ? . fk _related _model _id !== meta . value . id ) return false
if ( colOpt . type === RelationTypes . MANY _TO _MANY && colOpt1 ? . type === RelationTypes . MANY _TO _MANY ) {
return (
colOpt . fk _parent _column _id === colOpt1 . fk _child _column _id && colOpt . fk _child _column _id === colOpt1 . fk _parent _column _id
)
} else {
return (
colOpt . fk _parent _column _id === colOpt1 . fk _parent _column _id && colOpt . fk _child _column _id === colOpt1 . fk _child _column _id
)
}
} )
if ( ! colInRelatedTable ) return { }
const relatedTableColOpt = colInRelatedTable ? . colOptions as LinkToAnotherRecordType
if ( ! relatedTableColOpt ) return { }
if ( relatedTableColOpt . type === RelationTypes . BELONGS _TO ) {
return {
[ colInRelatedTable . title as string ] : row ? . value ? . row ,
}
} else {
return {
[ colInRelatedTable . title as string ] : row ? . value && [ row . value . row ] ,
}
}
} )
const colTitle = computed ( ( ) => injectedColumn . value ? . title || '' )
const onClick = ( row : Row ) => {
if ( readOnly . value ) return
if ( readOnly . value || isForm . value ) return
expandedFormRow . value = row
expandedFormDlg . value = true
}
const addNewRecord = ( ) => {
expandedFormRow . value = { }
expandedFormDlg . value = true
isExpandedFormCloseAfterSave . value = true
}
const onCreatedRecord = ( record : any ) => {
const msgVNode = h (
'div' ,
{
class : 'ml-1 inline-flex flex-col gap-1 items-start' ,
} ,
[
h (
'span' ,
{
class : 'font-semibold' ,
} ,
t ( 'activity.recordCreatedLinked' ) ,
) ,
h (
'span' ,
{
class : 'text-gray-500' ,
} ,
t ( 'activity.gotSavedLinkedSuccessfully' , {
tableName : relatedTableMeta . value ? . title ,
recordTitle : record [ relatedTableDisplayValueProp . value ] ,
} ) ,
) ,
] ,
)
message . success ( msgVNode )
}
const relation = computed ( ( ) => {
return injectedColumn ! . value ? . colOptions ? . type
@ -129,6 +210,9 @@ watch(
)
watch ( expandedFormDlg , ( ) => {
if ( ! expandedFormDlg . value ) {
isExpandedFormCloseAfterSave . value = false
}
childrenExcludedOffsetCount . value = 0
childrenListOffsetCount . value = 0
} )
@ -154,6 +238,10 @@ const skeletonCount = computed(() => {
} )
const totalItemsToShow = computed ( ( ) => {
if ( isForm . value || isNew . value ) {
return state . value ? . [ colTitle . value ] ? . length
}
if ( isChildrenLoading . value ) {
return props . items
}
@ -204,6 +292,10 @@ const linkedShortcuts = (e: KeyboardEvent) => {
onMounted ( ( ) => {
window . addEventListener ( 'keydown' , linkedShortcuts )
setTimeout ( ( ) => {
filterQueryRef . value ? . focus ( )
} , 100 )
} )
const childrenListRef = ref < HTMLDivElement > ( )
@ -226,167 +318,151 @@ const onFilterChange = () => {
< / script >
< template >
< NcModal
v - model : visible = "vModel"
: body - style = "{ 'max-height': '640px', 'height': '85vh' }"
: class = "{ active: vModel }"
: closable = "false"
: footer = "null"
: width = "isForm ? 600 : 800"
size = "medium"
wrap - class - name = "nc-modal-child-list"
>
< LazyVirtualCellComponentsHeader
v - if = "!isForm"
: display - value = "headerDisplayValue"
: header = "$t('activity.linkedRecords')"
: linked - records = "childrenListCount"
: related - table - title = "relatedTableMeta?.title"
: relation = "relation"
: table - title = "meta?.title"
/ >
< 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 !focus-within:border-primary" >
< MdiMagnify class = "w-5 h-5 ml-2 text-gray-500" / >
< a -input
ref = "filterQueryRef"
v - model : value = "childrenListPagination.query"
: bordered = "false"
: placeholder = "`Search in ${relatedTableMeta?.title}`"
class = "w-full !sm:rounded-md xs:min-h-8 !xs:rounded-xl"
size = "small"
@ change = "onFilterChange"
@ keydown . capture . stop = "
( e ) => {
if ( e . key === 'Escape' ) {
filterQueryRef ? . blur ( )
< div class = "nc-modal-child-list h-full w-full" : class = "{ active: vModel }" @ keydown.enter.stop >
< div class = "flex flex-col h-full" >
< div class = "nc-dropdown-link-record-header bg-gray-100 py-2 rounded-t-md flex justify-between pl-3 pr-2 gap-2" >
< div v-if ="!isForm" class="flex-1 nc-dropdown-link-record-search-wrapper flex items-center py-0.5 rounded-md" >
< MdiMagnify class = "nc-search-icon w-5 h-5" / >
< a -input
ref = "filterQueryRef"
v - model : value = "childrenListPagination.query"
: bordered = "false"
placeholder = "Search linked records..."
class = "w-full min-h-4"
size = "small"
@ change = "onFilterChange"
@ keydown . capture . stop = "
( e ) => {
if ( e . key === 'Escape' ) {
filterQueryRef ? . blur ( )
}
}
}
"
>
< / a - i n p u t >
"
>
< / a - i n p u t >
< / div >
< div v-else > & nbsp ; < / div >
< LazyVirtualCellComponentsHeader
data - testid = "nc-link-count-info"
: linked - records = "totalItemsToShow"
: related - table - title = "relatedTableMeta?.title"
: relation = "relation"
: table - title = "meta?.title"
/ >
< / div >
< / div >
< div ref = "childrenListRef" class = "flex flex-col flex-grow nc-scrollbar-md cursor-pointer pr-1" >
< div v-if ="isDataExist || isChildrenLoading" class="mt-2 mb-2" >
< div class = "cursor-pointer pr-1" >
< template v-if ="isChildrenLoading" >
< div
v - for = "(_x, i) in Array.from({ length: skeletonCount })"
: key = "i"
class = "!border-2 flex flex-row gap-2 mb-2 transition-all !rounded-xl relative !border-gray-200 hover:bg-gray-50"
>
< a -skeleton -image class = "h-24 w-24 !rounded-xl" / >
< div class = "flex flex-col m-[.5rem] gap-2 flex-grow justify-center" >
< a -skeleton -input active class = "!w-48 !rounded-xl" size = "small" / >
< div class = "flex flex-row gap-6 w-10/12" >
< div class = "flex flex-col gap-0.5" >
< a -skeleton -input active class = "!h-4 !w-12" size = "small" / >
< a -skeleton -input active class = "!h-4 !w-24" size = "small" / >
< / div >
< div class = "flex flex-col gap-0.5" >
< a -skeleton -input active class = "!h-4 !w-12" size = "small" / >
< a -skeleton -input active class = "!h-4 !w-24" size = "small" / >
< / div >
< div class = "flex flex-col gap-0.5" >
< a -skeleton -input active class = "!h-4 !w-12" size = "small" / >
< a -skeleton -input active class = "!h-4 !w-24" size = "small" / >
< / div >
< div class = "flex flex-col gap-0.5" >
< a -skeleton -input active class = "!h-4 !w-12" size = "small" / >
< a -skeleton -input active class = "!h-4 !w-24" size = "small" / >
< div ref = "childrenListRef" class = "flex-1 overflow-auto nc-scrollbar-thin" >
< div v-if ="isDataExist || isChildrenLoading" >
< div class = "cursor-pointer" >
< template v-if ="isChildrenLoading" >
< div
v - for = "(_x, i) in Array.from({ length: skeletonCount })"
: key = "i"
class = "flex flex-row gap-2 mb-2 transition-all relative !border-gray-200 hover:bg-gray-50"
>
< div class = "flex items-center" >
< a -skeleton -image class = "h-14 w-14 !rounded-xl children:!h-full" / >
< / div >
< div class = "flex flex-col gap-2 flex-grow justify-center" >
< a -skeleton -input active class = "h-3 !w-48 !rounded-xl" size = "small" / >
< div class = "flex flex-row gap-6 w-10/12" >
< div class = "flex flex-col gap-0.5" >
< a -skeleton -input active class = "!h-2 !w-12" size = "small" / >
< a -skeleton -input active class = "!h-2 !w-24" size = "small" / >
< / div >
< div class = "flex flex-col gap-0.5" >
< a -skeleton -input active class = "!h-2 !w-12" size = "small" / >
< a -skeleton -input active class = "!h-2 !w-24" size = "small" / >
< / div >
< div class = "flex flex-col gap-0.5" >
< a -skeleton -input active class = "!h-2 !w-12" size = "small" / >
< a -skeleton -input active class = "!h-2 !w-24" size = "small" / >
< / div >
< / div >
< / div >
< / div >
< / div >
< / template >
< template v-else >
< LazyVirtualCellComponentsListItem
v - for = "(refRow, id) in childrenList?.list ?? state?.[colTitle] ?? []"
: key = "id"
: attachment = "attachmentCol"
: display - value - type - and - format - prop = "displayValueTypeAndFormatProp"
: fields = "fields"
: is - linked = "childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
: is - loading = "isChildrenListLoading[Number.parseInt(id)]"
: related - table - display - value - prop = "relatedTableDisplayValueProp"
: row = "refRow"
data - testid = "nc-child-list-item"
@ click = "linkOrUnLink(refRow, id)"
@ expand = "onClick(refRow)"
@ keydown . space . prevent = "linkOrUnLink(refRow, id)"
@ keydown . enter . prevent = "() => onClick(refRow, id)"
/ >
< / template >
< / div >
< / div >
< div v -else class = "pt-1 flex flex-col gap-4 my-auto items-center justify-center text-gray-500 text-center" >
< img
: alt = "$t('msg.clickLinkRecordsToAddLinkFromTable', { tableName: relatedTableMeta?.title })"
class = "!w-[18.5rem] flex-none"
src = "~assets/img/placeholder/link-records.png"
/ >
< div class = "text-2xl text-gray-700 font-bold" > { { $t ( 'msg.noLinkedRecords' ) } } < / div >
< div class = "text-gray-700" >
{ { $t ( 'msg.clickLinkRecordsToAddLinkFromTable' , { tableName : relatedTableMeta ? . title } ) } }
< / template >
< template v-else >
< LazyVirtualCellComponentsListItem
v - for = "(refRow, id) in childrenList?.list ?? state?.[colTitle] ?? []"
: key = "id"
: attachment = "attachmentCol"
: display - value - type - and - format - prop = "displayValueTypeAndFormatProp"
: fields = "fields"
: is - linked = "childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
: is - loading = "isChildrenListLoading[Number.parseInt(id)]"
: related - table - display - value - prop = "relatedTableDisplayValueProp"
: row = "refRow"
data - testid = "nc-child-list-item"
@ link - or - unlink = "linkOrUnLink(refRow, id)"
@ expand = "onClick(refRow)"
@ keydown . space . prevent . stop = "linkOrUnLink(refRow, id)"
@ keydown . enter . prevent . stop = "() => onClick(refRow, id)"
/ >
< / template >
< / div >
< / div >
< div v -else class = "h-full flex flex-col gap-2 my-auto items-center justify-center text-gray-500 text-center" >
< img
: alt = "$t('msg.clickLinkRecordsToAddLinkFromTable')"
class = "!w-[158px] flex-none"
src = "~assets/img/placeholder/link-records.png"
/ >
< div class = "text-base text-gray-700 font-bold" > { { $t ( 'msg.noLinkedRecords' ) } } < / div >
< div class = "text-gray-700" >
{ { $t ( 'msg.clickLinkRecordsToAddLinkFromTable' ) } }
< / div >
< NcButton
v - if = "!readOnly && childrenListCount < 1"
v - e = "['c:links:link']"
data - testid = "nc-child-list-button-link-to"
@ click = "emit('attachRecord')"
>
< div class = "flex items-center gap-1" > < MdiPlus / > { { $t ( 'title.linkRecords' ) } } < / div >
< / NcButton >
< NcButton
v - if = "!readOnly && (childrenListCount < 1 || (childrenList?.list ?? state?.[colTitle] ?? []).length > 0)"
v - e = "['c:links:link']"
data - testid = "nc-child-list-button-link-to"
size = "small"
@ click = "emit('attachRecord')"
>
< div class = "flex items-center gap-1" > < MdiPlus / > { { $t ( 'title.linkRecords' ) } } < / div >
< / NcButton >
< / div >
< / div >
< / div >
< div v-if ="isMobileMode" class="flex flex-row justify-center items-center w-full my-2" >
< NcPagination
v - if = "!isNew && childrenList?.pageInfo"
v - model : current = "childrenListPagination.page"
v - model : page - size = "childrenListPagination.size"
: total = "+childrenList.pageInfo.totalRows!"
/ >
< / div >
< 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 v-if ="!isForm" class="flex items-center justify-center px-2 rounded-md text-gray-500 bg-brand-50" >
{ { totalItemsToShow || 0 } } { { ! isMobileMode ? $t ( 'objects.records' ) : '' } }
{ { ! isMobileMode && totalItemsToShow !== 0 ? $t ( 'general.are' ) : '' } }
{ { $t ( 'general.linked' ) } }
< / div >
< div v -else class = "flex items-center justify-center px-2 rounded-md text-gray-500 bg-brand-50" >
< span class = "" >
{ { state ? . [ colTitle ] ? . length || 0 } } { { $t ( 'objects.records' ) } }
{ { state ? . [ colTitle ] ? . length !== 0 ? $t ( 'general.are' ) : '' } }
{ { $t ( 'general.linked' ) } }
< / span >
< / div >
< div class = "!xs:hidden flex absolute -mt-0.75 items-center py-2 justify-center w-full" >
< NcPagination
v - if = "!isNew && childrenList?.pageInfo"
v - model : current = "childrenListPagination.page"
v - model : page - size = "childrenListPagination.size"
: total = "+childrenList.pageInfo.totalRows!"
mode = "simple"
/ >
< / div >
< div class = "flex flex-row gap-2" >
< NcButton v-if ="!isForm" class="nc-close-btn" type="ghost" @click="vModel = false" > {{ $ t ( ' general.finish ' ) }} < / NcButton >
< NcButton
v - if = "!readOnly && childrenListCount > 0"
v - e = "['c:links:link']"
data - testid = "nc-child-list-button-link-to"
@ click = "emit('attachRecord')"
>
< div class = "flex items-center gap-1" >
< MdiPlus class = "!xs:hidden" / > { { isMobileMode ? $t ( 'title.linkMore' ) : $t ( 'title.linkMoreRecords' ) } }
< div class = "bg-gray-100 px-3 py-2 rounded-b-md flex items-center justify-between gap-3 min-h-12" >
< div class = "flex items-center gap-2" >
< NcButton
v - if = "!isPublic"
v - e = "['c:row-expand:open']"
size = "small"
class = "!hover:(bg-white text-brand-500)"
type = "secondary"
@ click = "addNewRecord"
>
< div class = "flex items-center gap-1" >
< MdiPlus v -if = " ! isMobileMode " class = "h-4 w-4" / > { { $t ( 'activity.newRecord' ) } }
< / div >
< / NcButton >
< NcButton
v - if = "!readOnly && (childrenListCount > 0 || (childrenList?.list ?? state?.[colTitle] ?? []).length > 0)"
v - e = "['c:links:link']"
data - testid = "nc-child-list-button-link-to"
class = "!hover:(bg-white text-brand-500)"
size = "small"
type = "secondary"
@ click = "emit('attachRecord')"
>
< div class = "flex items-center gap-1" >
< GeneralIcon icon = "link2" class = "!xs:hidden h-4 w-4" / >
{ { isMobileMode ? $t ( 'title.linkMore' ) : $t ( 'title.linkMoreRecords' ) } }
< / div >
< / NcButton >
< / div >
< template v-if ="!isNew && childrenList?.pageInfo && +childrenList.pageInfo.totalRows! > childrenListPagination.size" >
< div class = "flex justify-center items-center" >
< NcPagination
v - model : current = "childrenListPagination.page"
v - model : page - size = "childrenListPagination.size"
: total = "+childrenList.pageInfo.totalRows!"
mode = "simple"
/ >
< / div >
< / NcButton >
< / template >
< / div >
< / div >
@ -394,7 +470,15 @@ const onFilterChange = () => {
< LazySmartsheetExpandedForm
v - if = "expandedFormRow && expandedFormDlg"
v - model = "expandedFormDlg"
: close - after - save = "isExpandedFormCloseAfterSave"
: meta = "relatedTableMeta"
: new - record - header = "
isExpandedFormCloseAfterSave
? $t ( 'activity.tableNameCreateNewRecord' , {
tableName : relatedTableMeta ? . title ,
} )
: undefined
"
: row = " {
row : expandedFormRow ,
oldRow : expandedFormRow ,
@ -405,11 +489,13 @@ const onFilterChange = () => {
new : true ,
} ,
} "
: state = "newRowState"
: row - id = "extractPkFromRow(expandedFormRow, relatedTableMeta.columns as ColumnType[])"
use - meta - fields
@ created - record = "onCreatedRecord"
/ >
< / Suspense >
< / NcModal >
< / div >
< / template >
< style lang = "scss" scoped >
@ -420,10 +506,22 @@ const onFilterChange = () => {
: deep ( . ant - modal - content ) {
@ apply ! p - 0 ;
}
: deep ( . ant - skeleton - element . ant - skeleton - image ) {
@ apply ! h - full ;
}
< / style >
< style lang = "scss" >
. nc - modal - child - list > . ant - modal > . ant - modal - content {
@ apply ! p - 0 ;
. nc - dropdown - link - record - search - wrapper {
. nc - search - icon {
@ apply flex - none text - gray - 500 ;
}
& : focus - within {
. nc - search - icon {
@ apply text - gray - 600 ;
}
}
}
< / style >
Ramesh Mane
5 months ago
committed by
GitHub