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