|
|
|
|
@ -379,19 +379,11 @@ export default {
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<div class="flex align-center gap-1 w-full chips-wrapper group" :class="{ active }"> |
|
|
|
|
<div class="flex align-center gap-1 w-full chips-wrapper group"> |
|
|
|
|
<!-- <template v-if="!isForm"> --> |
|
|
|
|
<div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden"> |
|
|
|
|
<template v-if="value || localState"> |
|
|
|
|
<ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" /> |
|
|
|
|
|
|
|
|
|
<!-- |
|
|
|
|
:active="active" :item="ch" |
|
|
|
|
:value="getCellValue(ch)" |
|
|
|
|
:readonly="isLocked || isPublic" |
|
|
|
|
@edit="editChild" |
|
|
|
|
@unlink="unlinkChild " --> |
|
|
|
|
|
|
|
|
|
<template v-if="value"> |
|
|
|
|
<ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" /> |
|
|
|
|
<span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
@ -401,210 +393,5 @@ export default {
|
|
|
|
|
<ListItems v-model="listItemsDlg" /> |
|
|
|
|
<ListChildItems v-model="childListDlg" /> |
|
|
|
|
|
|
|
|
|
<!-- <div --> |
|
|
|
|
<!-- v-if="!isLocked" --> |
|
|
|
|
<!-- class="actions align-center justify-center px-1 flex-shrink-1" --> |
|
|
|
|
<!-- :class="{ 'd-none': !active, 'd-flex': active }" --> |
|
|
|
|
<!-- > --> |
|
|
|
|
<!-- <x-icon --> |
|
|
|
|
<!-- v-if="_isUIAllowed('xcDatatableEditable') && (isForm || !isPublic)" --> |
|
|
|
|
<!-- small --> |
|
|
|
|
<!-- :color="['primary', 'grey']" --> |
|
|
|
|
<!-- @click="showNewRecordModal" --> |
|
|
|
|
<!-- > --> |
|
|
|
|
<!-- mdi-plus --> |
|
|
|
|
<!-- </x-icon> --> |
|
|
|
|
<!-- <x-icon x-small :color="['primary', 'grey']" class="ml-2" @click="showChildListModal"> mdi-arrow-expand </x-icon> --> |
|
|
|
|
<!-- </div> --> |
|
|
|
|
<!-- </template> --> |
|
|
|
|
|
|
|
|
|
<!-- <ListItems |
|
|
|
|
v-if="newRecordModal" |
|
|
|
|
v-model="newRecordModal" |
|
|
|
|
:size="10" |
|
|
|
|
:meta="childMeta" |
|
|
|
|
:primary-col="childPrimaryCol" |
|
|
|
|
:primary-key="childPrimaryKey" |
|
|
|
|
:api="childApi" |
|
|
|
|
:parent-meta="meta" |
|
|
|
|
:column="column" |
|
|
|
|
:query-params="{ |
|
|
|
|
...childQueryParams, |
|
|
|
|
// check if it needs to bypass to |
|
|
|
|
// avoid foreign key constraint violation in real relation |
|
|
|
|
isByPass, |
|
|
|
|
where: |
|
|
|
|
// show all for new record |
|
|
|
|
isNew |
|
|
|
|
? null |
|
|
|
|
: // filter out those selected items |
|
|
|
|
`~not(${childForeignKey},eq,${parentId})` + |
|
|
|
|
// allow the child with empty key |
|
|
|
|
`~or(${childForeignKey},is,null)`, |
|
|
|
|
}" |
|
|
|
|
:is-public="isPublic" |
|
|
|
|
:password="password" |
|
|
|
|
:row-id="parentId" |
|
|
|
|
@add-new-record="insertAndAddNewChildRecord" |
|
|
|
|
@add="addChildToParent" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<ListChildItems |
|
|
|
|
:is="isForm ? 'list-child-items' : 'list-child-items-modal'" |
|
|
|
|
v-if="childMeta && (childListModal || isForm)" |
|
|
|
|
ref="childList" |
|
|
|
|
v-model="childListModal" |
|
|
|
|
v-model:local-state="localState" |
|
|
|
|
:is-form="isForm" |
|
|
|
|
:is-new="isNew" |
|
|
|
|
:size="10" |
|
|
|
|
:meta="childMeta" |
|
|
|
|
:parent-meta="meta" |
|
|
|
|
:password="password" |
|
|
|
|
:primary-col="childPrimaryCol" |
|
|
|
|
:primary-key="childPrimaryKey" |
|
|
|
|
:api="childApi" |
|
|
|
|
:column="column" |
|
|
|
|
:query-params="{ |
|
|
|
|
...childQueryParams, |
|
|
|
|
where: `(${childForeignKey},eq,${parentId})`, |
|
|
|
|
}" |
|
|
|
|
:is-public="isPublic" |
|
|
|
|
:row-id="parentId" |
|
|
|
|
type="hm" |
|
|
|
|
@new-record="showNewRecordModal" |
|
|
|
|
@edit="editChild" |
|
|
|
|
@unlink="unlinkChild" |
|
|
|
|
@delete="deleteChild" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<DlgLabelSubmitCancel |
|
|
|
|
v-if="dialogShow" |
|
|
|
|
type="primary" |
|
|
|
|
:actions-mtd="confirmAction" |
|
|
|
|
:dialog-show="dialogShow" |
|
|
|
|
:heading="confirmMessage" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<v-dialog v-model="expandFormModal" :overlay-opacity="0.8" width="1000px" max-width="100%" class="mx-auto"> |
|
|
|
|
<component |
|
|
|
|
:is="form" |
|
|
|
|
v-if="selectedChild" |
|
|
|
|
ref="expandedForm" |
|
|
|
|
v-model="selectedChild" |
|
|
|
|
:db-alias="nodes.dbAlias" |
|
|
|
|
:has-many="childMeta.hasMany" |
|
|
|
|
:belongs-to="childMeta.belongsTo" |
|
|
|
|
:table="childMeta.table_name" |
|
|
|
|
v-model:is-new="isNewChild" |
|
|
|
|
:old-row="{ ...selectedChild }" |
|
|
|
|
:meta="childMeta" |
|
|
|
|
:primary-value-column="childPrimaryCol" |
|
|
|
|
:api="childApi" |
|
|
|
|
:available-columns="childAvailableColumns" |
|
|
|
|
icon-color="warning" |
|
|
|
|
:nodes="nodes" |
|
|
|
|
:query-params="childQueryParams" |
|
|
|
|
:disabled-columns="disabledChildColumns" |
|
|
|
|
:breadcrumbs="breadcrumbs" |
|
|
|
|
@cancel=" |
|
|
|
|
selectedChild = null |
|
|
|
|
expandFormModal = false |
|
|
|
|
" |
|
|
|
|
@input="onChildSave" |
|
|
|
|
/> |
|
|
|
|
</v-dialog> |
|
|
|
|
--> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
/*.items-container { |
|
|
|
|
overflow-x: visible; |
|
|
|
|
max-height: min(500px, 60vh); |
|
|
|
|
overflow-y: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.primary-value { |
|
|
|
|
.primary-key { |
|
|
|
|
display: none; |
|
|
|
|
margin-left: 0.5em; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:hover .primary-key { |
|
|
|
|
display: inline; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.child-card { |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0 0 0.2em var(--v-textColor-lighten5); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.hm-items { |
|
|
|
|
//min-width: 200px; |
|
|
|
|
//max-width: 400px; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
row-gap: 3px; |
|
|
|
|
gap: 3px; |
|
|
|
|
margin: 3px auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::v-deep { |
|
|
|
|
.unlink-icon { |
|
|
|
|
padding: 0px 1px 2px 1px; |
|
|
|
|
margin-top: 2px; |
|
|
|
|
margin-right: -2px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.search-field { |
|
|
|
|
input { |
|
|
|
|
max-height: 28px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.v-input__slot { |
|
|
|
|
min-height: auto !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.chips-wrapper { |
|
|
|
|
.chips { |
|
|
|
|
max-width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
.chips { |
|
|
|
|
max-width: calc(100% - 44px); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}*/ |
|
|
|
|
</style> |
|
|
|
|
<!-- |
|
|
|
|
/** |
|
|
|
|
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
|
|
|
|
* |
|
|
|
|
* @author Naveen MR <oof1lab@gmail.com> |
|
|
|
|
* @author Pranav C Balan <pranavxc@gmail.com> |
|
|
|
|
* @author Wing-Kam Wong <wingkwong.code@gmail.com> |
|
|
|
|
* |
|
|
|
|
* @license GNU AGPL version 3 or any later version |
|
|
|
|
* |
|
|
|
|
* This program is free software: you can redistribute it and/or modify |
|
|
|
|
* it under the terms of the GNU Affero General Public License as |
|
|
|
|
* published by the Free Software Foundation, either version 3 of the |
|
|
|
|
* License, or (at your option) any later version. |
|
|
|
|
* |
|
|
|
|
* This program is distributed in the hope that it will be useful, |
|
|
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
|
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
|
|
|
* GNU Affero General Public License for more details. |
|
|
|
|
* |
|
|
|
|
* You should have received a copy of the GNU Affero General Public License |
|
|
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
|
|
|
* |
|
|
|
|
*/ |
|
|
|
|
--> |
|
|
|
|
|
Pranav C
2 years ago