fix: reactive field layout
This commit is contained in:
Shariq Ansari
parent
beedb11cd1
commit
12b93c9a74
@ -26,8 +26,15 @@
|
||||
:class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
|
||||
/>
|
||||
<Section
|
||||
class="text-lg font-medium"
|
||||
:class="{ 'px-3 sm:px-5': hasTabs }"
|
||||
class="flex gap-4 text-lg font-medium"
|
||||
:class="{
|
||||
'px-3 sm:px-5': hasTabs,
|
||||
'mt-6': section.label && !section.hideLabel,
|
||||
}"
|
||||
:labelClass="[
|
||||
'text-lg font-medium',
|
||||
{ 'px-3 sm:px-5': hasTabs },
|
||||
]"
|
||||
:label="section.label"
|
||||
:hideLabel="section.hideLabel || !section.label"
|
||||
:opened="section.opened"
|
||||
@ -35,216 +42,215 @@
|
||||
collapseIconPosition="right"
|
||||
>
|
||||
<div
|
||||
class="flex gap-4"
|
||||
:class="[
|
||||
{
|
||||
'px-3 sm:px-5': hasTabs,
|
||||
'mt-6': section.label && !section.hideLabel,
|
||||
},
|
||||
]"
|
||||
class="column flex flex-col gap-4 w-full"
|
||||
v-for="column in section.columns"
|
||||
:key="column.name"
|
||||
:data-name="column.name"
|
||||
>
|
||||
<div
|
||||
class="column flex flex-col gap-4 w-full"
|
||||
v-for="column in section.columns"
|
||||
:key="column.name"
|
||||
:data-name="column.name"
|
||||
v-if="column.label && !column.hideLabel"
|
||||
class="text-ink-gray-9 max-w-fit text-base"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
<template v-for="field in column.fields" :key="field.name">
|
||||
<div
|
||||
v-if="column.label && !column.hideLabel"
|
||||
class="text-ink-gray-9 max-w-fit text-base"
|
||||
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"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
<div v-for="field in column.fields" :key="field.name">
|
||||
<div class="settings-field">
|
||||
<div
|
||||
v-if="field.type != 'Check'"
|
||||
class="mb-2 text-sm text-ink-gray-5"
|
||||
<div
|
||||
v-if="field.type != 'Check'"
|
||||
class="mb-2 text-sm text-ink-gray-5"
|
||||
>
|
||||
{{ __(field.label) }}
|
||||
<span
|
||||
class="text-ink-red-3"
|
||||
v-if="
|
||||
field.mandatory ||
|
||||
(field.mandatory_depends_on &&
|
||||
field.mandatory_via_depends_on)
|
||||
"
|
||||
>*</span
|
||||
>
|
||||
</div>
|
||||
<FormControl
|
||||
v-if="field.read_only && field.type !== 'Check'"
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
:disabled="true"
|
||||
/>
|
||||
<Grid
|
||||
v-else-if="field.type === 'Table'"
|
||||
v-model="data[field.name]"
|
||||
:doctype="field.options"
|
||||
:parentDoctype="doctype"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Select'"
|
||||
type="select"
|
||||
class="form-control"
|
||||
:class="field.prefix ? 'prefix' : ''"
|
||||
:options="field.options"
|
||||
v-model="data[field.name]"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
>
|
||||
<template v-if="field.prefix" #prefix>
|
||||
<IndicatorIcon :class="field.prefix" />
|
||||
</template>
|
||||
</FormControl>
|
||||
<div
|
||||
v-else-if="field.type == 'Check'"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<FormControl
|
||||
class="form-control"
|
||||
type="checkbox"
|
||||
v-model="data[field.name]"
|
||||
@change="(e) => (data[field.name] = e.target.checked)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
<label
|
||||
class="text-sm text-ink-gray-5"
|
||||
@click="
|
||||
() => {
|
||||
if (!Boolean(field.read_only)) {
|
||||
data[field.name] = !data[field.name]
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ __(field.label) }}
|
||||
<span
|
||||
class="text-ink-red-3"
|
||||
v-if="
|
||||
field.mandatory ||
|
||||
(field.mandatory_depends_on &&
|
||||
field.mandatory_via_depends_on)
|
||||
"
|
||||
<span class="text-ink-red-3" v-if="field.mandatory"
|
||||
>*</span
|
||||
>
|
||||
</div>
|
||||
<FormControl
|
||||
v-if="field.read_only && field.type !== 'Check'"
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
:disabled="true"
|
||||
/>
|
||||
<Grid
|
||||
v-else-if="field.type === 'Table'"
|
||||
v-model="data[field.name]"
|
||||
:doctype="field.options"
|
||||
:parentDoctype="doctype"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Select'"
|
||||
type="select"
|
||||
class="form-control"
|
||||
:class="field.prefix ? 'prefix' : ''"
|
||||
:options="field.options"
|
||||
v-model="data[field.name]"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
>
|
||||
<template v-if="field.prefix" #prefix>
|
||||
<IndicatorIcon :class="field.prefix" />
|
||||
</template>
|
||||
</FormControl>
|
||||
<div
|
||||
v-else-if="field.type == 'Check'"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<FormControl
|
||||
class="form-control"
|
||||
type="checkbox"
|
||||
v-model="data[field.name]"
|
||||
@change="(e) => (data[field.name] = e.target.checked)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
<label
|
||||
class="text-sm text-ink-gray-5"
|
||||
@click="
|
||||
() => {
|
||||
if (!Boolean(field.read_only)) {
|
||||
data[field.name] = !data[field.name]
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ __(field.label) }}
|
||||
<span class="text-ink-red-3" v-if="field.mandatory"
|
||||
>*</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex gap-1" v-else-if="field.type === 'Link'">
|
||||
<Link
|
||||
class="form-control flex-1 truncate"
|
||||
:value="data[field.name]"
|
||||
:doctype="field.options"
|
||||
:filters="field.filters"
|
||||
@change="(v) => (data[field.name] = v)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:onCreate="field.create"
|
||||
/>
|
||||
<Button
|
||||
v-if="data[field.name] && field.edit"
|
||||
class="shrink-0"
|
||||
:label="__('Edit')"
|
||||
@click="field.edit(data[field.name])"
|
||||
>
|
||||
<template #prefix>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex gap-1" v-else-if="field.type === 'Link'">
|
||||
<Link
|
||||
v-else-if="field.type === 'User'"
|
||||
class="form-control"
|
||||
:value="getUser(data[field.name]).full_name"
|
||||
class="form-control flex-1 truncate"
|
||||
:value="data[field.name]"
|
||||
:doctype="field.options"
|
||||
:filters="field.filters"
|
||||
@change="(v) => (data[field.name] = v)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:hideMe="true"
|
||||
:onCreate="field.create"
|
||||
/>
|
||||
<Button
|
||||
v-if="data[field.name] && field.edit"
|
||||
class="shrink-0"
|
||||
:label="__('Edit')"
|
||||
@click="field.edit(data[field.name])"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="data[field.name]"
|
||||
size="sm"
|
||||
/>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
</template>
|
||||
<template #item-prefix="{ option }">
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="option.value"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #item-label="{ option }">
|
||||
<Tooltip :text="option.value">
|
||||
<div class="cursor-pointer">
|
||||
{{ getUser(option.value).full_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
<DateTimePicker
|
||||
v-else-if="field.type === 'Datetime'"
|
||||
v-model="data[field.name]"
|
||||
icon-left=""
|
||||
:formatter="(date) => getFormat(date, '', true, true)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<DatePicker
|
||||
v-else-if="field.type === 'Date'"
|
||||
icon-left=""
|
||||
v-model="data[field.name]"
|
||||
:formatter="(date) => getFormat(date, '', true)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="
|
||||
['Small Text', 'Text', 'Long Text', 'Code'].includes(
|
||||
field.type,
|
||||
)
|
||||
"
|
||||
type="textarea"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="['Int'].includes(field.type)"
|
||||
type="number"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Percent'"
|
||||
type="text"
|
||||
:value="getFormattedPercent(field.name, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.name] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Float'"
|
||||
type="text"
|
||||
:value="getFormattedFloat(field.name, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.name] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Currency'"
|
||||
type="text"
|
||||
:value="getFormattedCurrency(field.name, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.name] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
v-else-if="field.type === 'User'"
|
||||
class="form-control"
|
||||
:value="getUser(data[field.name]).full_name"
|
||||
:doctype="field.options"
|
||||
:filters="field.filters"
|
||||
@change="(v) => (data[field.name] = v)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:hideMe="true"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="data[field.name]"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #item-prefix="{ option }">
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="option.value"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #item-label="{ option }">
|
||||
<Tooltip :text="option.value">
|
||||
<div class="cursor-pointer">
|
||||
{{ getUser(option.value).full_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
<DateTimePicker
|
||||
v-else-if="field.type === 'Datetime'"
|
||||
v-model="data[field.name]"
|
||||
icon-left=""
|
||||
:formatter="(date) => getFormat(date, '', true, true)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<DatePicker
|
||||
v-else-if="field.type === 'Date'"
|
||||
icon-left=""
|
||||
v-model="data[field.name]"
|
||||
:formatter="(date) => getFormat(date, '', true)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="
|
||||
['Small Text', 'Text', 'Long Text', 'Code'].includes(
|
||||
field.type,
|
||||
)
|
||||
"
|
||||
type="textarea"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="['Int'].includes(field.type)"
|
||||
type="number"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Percent'"
|
||||
type="text"
|
||||
:value="getFormattedPercent(field.name, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.name] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Float'"
|
||||
type="text"
|
||||
:value="getFormattedFloat(field.name, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.name] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Currency'"
|
||||
type="text"
|
||||
:value="getFormattedCurrency(field.name, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.name] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.name]"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
@ -295,32 +301,22 @@ const _tabs = computed(() => {
|
||||
return props.tabs.map((tab) => {
|
||||
tab.sections = tab.sections.map((section) => {
|
||||
section.columns = section.columns.map((column) => {
|
||||
column.fields = column.fields
|
||||
.map((field) => {
|
||||
if (field.type == 'Link' && field.options == 'User') {
|
||||
field.type = 'User'
|
||||
}
|
||||
return {
|
||||
...field,
|
||||
display_via_depends_on: evaluateDependsOnValue(
|
||||
field.depends_on,
|
||||
props.data,
|
||||
),
|
||||
mandatory_via_depends_on: evaluateDependsOnValue(
|
||||
field.mandatory_depends_on,
|
||||
props.data,
|
||||
),
|
||||
}
|
||||
})
|
||||
.filter((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
|
||||
)
|
||||
})
|
||||
column.fields = column.fields.map((field) => {
|
||||
if (field.type == 'Link' && field.options == 'User') {
|
||||
field.type = 'User'
|
||||
}
|
||||
return {
|
||||
...field,
|
||||
display_via_depends_on: evaluateDependsOnValue(
|
||||
field.depends_on,
|
||||
props.data,
|
||||
),
|
||||
mandatory_via_depends_on: evaluateDependsOnValue(
|
||||
field.mandatory_depends_on,
|
||||
props.data,
|
||||
),
|
||||
}
|
||||
})
|
||||
return column
|
||||
})
|
||||
return section
|
||||
@ -352,7 +348,7 @@ const getPlaceholder = (field) => {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section:has(.settings-field) {
|
||||
.section:has(.field) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
}"
|
||||
>
|
||||
<Section
|
||||
class="p-2"
|
||||
labelClass="p-2"
|
||||
:label="section.label"
|
||||
:opened="section.opened"
|
||||
>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<slot name="header" v-bind="{ opened, hide, open, close, toggle }">
|
||||
<div v-if="!hide" class="flex items-center justify-between">
|
||||
<div v-if="!hide" class="column-header flex items-center justify-between">
|
||||
<div
|
||||
class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
|
||||
v-bind="$attrs"
|
||||
:class="labelClass"
|
||||
@click="collapsible && toggle()"
|
||||
>
|
||||
<FeatherIcon
|
||||
@ -34,7 +34,7 @@
|
||||
enter-from-class="max-h-0 overflow-hidden"
|
||||
leave-to-class="max-h-0 overflow-hidden"
|
||||
>
|
||||
<div v-show="opened">
|
||||
<div class="columns" v-bind="$attrs" v-show="opened">
|
||||
<slot v-bind="{ opened, open, close, toggle }" />
|
||||
</div>
|
||||
</transition>
|
||||
@ -64,6 +64,10 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: 'left',
|
||||
},
|
||||
labelClass: {
|
||||
type: [String, Object, Array],
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const hide = ref(props.hideLabel)
|
||||
|
||||
@ -127,7 +127,11 @@
|
||||
class="flex flex-col p-3"
|
||||
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
|
||||
>
|
||||
<Section :label="section.label" :opened="section.opened">
|
||||
<Section
|
||||
labelClass="px-2 font-semibold"
|
||||
:label="section.label"
|
||||
:opened="section.opened"
|
||||
>
|
||||
<template #actions>
|
||||
<Button
|
||||
v-if="i == 0 && isManager()"
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
|
||||
>
|
||||
<Section
|
||||
class="px-2 font-semibold"
|
||||
labelClass="px-2 font-semibold"
|
||||
:label="section.label"
|
||||
:opened="section.opened"
|
||||
>
|
||||
|
||||
@ -178,7 +178,7 @@
|
||||
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
|
||||
>
|
||||
<Section
|
||||
class="px-2 font-semibold"
|
||||
labelClass="px-2 font-semibold"
|
||||
:label="section.label"
|
||||
:opened="section.opened"
|
||||
>
|
||||
|
||||
@ -112,7 +112,11 @@
|
||||
class="flex flex-col p-3"
|
||||
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
|
||||
>
|
||||
<Section :label="section.label" :opened="section.opened">
|
||||
<Section
|
||||
labelClass="px-2 font-semibold"
|
||||
:label="section.label"
|
||||
:opened="section.opened"
|
||||
>
|
||||
<template #actions>
|
||||
<Button
|
||||
v-if="i == 0 && isManager()"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user