test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: hide first visible sections border in fields layout

Browse Source
This commit is contained in:
Shariq Ansari 2025-01-02 14:35:27 +05:30
parent af53e81553
commit 0092b8506d
1 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/components/FieldLayout.vue
View File

@ -19,9 +19,10 @@
class="sections overflow-hidden" class="sections overflow-hidden"
:class="{ 'my-4 sm:my-6': hasTabs }" :class="{ 'my-4 sm:my-6': hasTabs }"
> >
<template v-for="section in tab.sections" :key="section.name"> <template v-for="(section, i) in tab.sections" :key="section.name">
<div v-if="!section.hidden" class="section" :data-name="section.name"> <div v-if="section.visible" class="section" :data-name="section.name">
<div <div
v-if="i !== firstVisibleIndex(tab.sections)"
class="w-full section-border" class="w-full section-border"
:class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']" :class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
/> />
@ -31,10 +32,7 @@
'px-3 sm:px-5': hasTabs, 'px-3 sm:px-5': hasTabs,
'mt-6': section.label && !section.hideLabel, 'mt-6': section.label && !section.hideLabel,
}" }"
:labelClass="[ :labelClass="['text-lg font-medium', { 'px-3 sm:px-5': hasTabs }]"
'text-lg font-medium',
{ 'px-3 sm:px-5': hasTabs },
]"
:label="section.label" :label="section.label"
:hideLabel="section.hideLabel || !section.label" :hideLabel="section.hideLabel || !section.label"
:opened="section.opened" :opened="section.opened"
@ -54,16 +52,7 @@
{{ column.label }} {{ column.label }}
</div> </div>
<template v-for="field in column.fields" :key="field.name"> <template v-for="field in column.fields" :key="field.name">
<div <div v-if="field.visible" class="field">
v-if="
(field.type == 'Check' ||
(field.read_only && data[field.name]) ||
!field.read_only) &&
(!field.depends_on || field.display_via_depends_on) &&
!field.hidden
"
class="field"
>
<div <div
v-if="field.type != 'Check'" v-if="field.type != 'Check'"
class="mb-2 text-sm text-ink-gray-5" class="mb-2 text-sm text-ink-gray-5"
@ -305,7 +294,7 @@ const _tabs = computed(() => {
if (field.type == 'Link' && field.options == 'User') { if (field.type == 'Link' && field.options == 'User') {
field.type = 'User' field.type = 'User'
} }
return { let _field = {
...field, ...field,
display_via_depends_on: evaluateDependsOnValue( display_via_depends_on: evaluateDependsOnValue(
field.depends_on, field.depends_on,
@ -316,15 +305,39 @@ const _tabs = computed(() => {
props.data, props.data,
), ),
} }
_field.visible = isFieldVisible(_field)
return _field
}) })
return column return column
}) })
section.visible = section.columns.some((column) =>
column.fields.some((field) => field.visible),
)
// to handle special case
if (section.hidden) {
section.visible = false
}
return section return section
}) })
return tab return tab
}) })
}) })
function isFieldVisible(field) {
return (
(field.type == 'Check' ||
(field.read_only && props.data[field.name]) ||
!field.read_only) &&
(!field.depends_on || field.display_via_depends_on) &&
!field.hidden
)
}
function firstVisibleIndex(sections) {
return sections.findIndex((section) => section.visible)
}
const tabIndex = ref(0) const tabIndex = ref(0)
const getPlaceholder = (field) => { const getPlaceholder = (field) => {
@ -343,16 +356,4 @@ const getPlaceholder = (field) => {
:deep(.form-control.prefix select) { :deep(.form-control.prefix select) {
padding-left: 2rem; padding-left: 2rem;
} }
.section {
display: none;
}
.section:has(.field) {
display: block;
}
.sections .section:first-of-type .section-border {
display: none;
}
</style> </style>