fix: do not show empty read_only fields & hidden fields
This commit is contained in:
Shariq Ansari
parent
07a008a600
commit
2afe23de67
@ -21,161 +21,174 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div v-for="field in section.fields" :key="field.name">
|
<div v-for="field in section.fields" :key="field.name">
|
||||||
<div v-if="field.type != 'Check'" class="mb-2 text-sm text-gray-600">
|
|
||||||
{{ __(field.label) }}
|
|
||||||
<span class="text-red-500" v-if="field.mandatory">*</span>
|
|
||||||
</div>
|
|
||||||
<FormControl
|
|
||||||
v-if="field.type === 'Select'"
|
|
||||||
type="select"
|
|
||||||
class="form-control"
|
|
||||||
:class="field.prefix ? 'prefix' : ''"
|
|
||||||
:options="field.options"
|
|
||||||
v-model="data[field.name]"
|
|
||||||
:placeholder="__(field.placeholder || field.label)"
|
|
||||||
:disabled="Boolean(field.read_only)"
|
|
||||||
>
|
|
||||||
<template v-if="field.prefix" #prefix>
|
|
||||||
<IndicatorIcon :class="field.prefix" />
|
|
||||||
</template>
|
|
||||||
</FormControl>
|
|
||||||
<div
|
<div
|
||||||
v-else-if="field.type == 'Check'"
|
v-if="
|
||||||
class="flex items-center gap-2"
|
field.type == 'Check' ||
|
||||||
|
(field.read_only && data[field.name]) ||
|
||||||
|
!field.read_only || !field.hidden
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<FormControl
|
<div
|
||||||
class="form-control"
|
v-if="field.type != 'Check'"
|
||||||
type="checkbox"
|
class="mb-2 text-sm text-gray-600"
|
||||||
v-model="data[field.name]"
|
|
||||||
@change="(e) => (data[field.name] = e.target.checked)"
|
|
||||||
:disabled="Boolean(field.read_only)"
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
class="text-sm text-gray-600"
|
|
||||||
@click="data[field.name] = !data[field.name]"
|
|
||||||
>
|
>
|
||||||
{{ __(field.label) }}
|
{{ __(field.label) }}
|
||||||
<span class="text-red-500" v-if="field.mandatory">*</span>
|
<span class="text-red-500" v-if="field.mandatory">*</span>
|
||||||
</label>
|
</div>
|
||||||
</div>
|
<FormControl
|
||||||
<Link
|
v-if="field.read_only && field.type !== 'Check'"
|
||||||
v-else-if="field.type === 'Link'"
|
type="text"
|
||||||
class="form-control"
|
:placeholder="__(field.placeholder || field.label)"
|
||||||
:value="data[field.name]"
|
v-model="data[field.name]"
|
||||||
:doctype="field.options"
|
:disabled="true"
|
||||||
@change="(v) => (data[field.name] = v)"
|
/>
|
||||||
:placeholder="__(field.placeholder || field.label)"
|
<FormControl
|
||||||
:onCreate="field.create"
|
v-else-if="field.type === 'Select'"
|
||||||
:disabled="Boolean(field.read_only)"
|
type="select"
|
||||||
/>
|
class="form-control"
|
||||||
<Link
|
:class="field.prefix ? 'prefix' : ''"
|
||||||
v-else-if="field.type === 'User'"
|
:options="field.options"
|
||||||
class="form-control"
|
v-model="data[field.name]"
|
||||||
:value="getUser(data[field.name]).full_name"
|
:placeholder="__(field.placeholder || field.label)"
|
||||||
:doctype="field.options"
|
>
|
||||||
@change="(v) => (data[field.name] = v)"
|
<template v-if="field.prefix" #prefix>
|
||||||
:placeholder="__(field.placeholder || field.label)"
|
<IndicatorIcon :class="field.prefix" />
|
||||||
:hideMe="true"
|
|
||||||
:disabled="Boolean(field.read_only)"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
<div v-else-if="field.type === 'Dropdown'">
|
|
||||||
<NestedPopover>
|
|
||||||
<template #target="{ open }">
|
|
||||||
<Button
|
|
||||||
:label="data[field.name]"
|
|
||||||
class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
|
|
||||||
>
|
|
||||||
<div class="truncate">{{ data[field.name] }}</div>
|
|
||||||
<template #suffix>
|
|
||||||
<FeatherIcon
|
|
||||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
|
||||||
class="h-4 text-gray-600"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</template>
|
</template>
|
||||||
<template #body>
|
</FormControl>
|
||||||
<div
|
<div
|
||||||
class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
|
v-else-if="field.type == 'Check'"
|
||||||
>
|
class="flex items-center gap-2"
|
||||||
<div>
|
>
|
||||||
<DropdownItem
|
<FormControl
|
||||||
v-if="field.options?.length"
|
class="form-control"
|
||||||
v-for="option in field.options"
|
type="checkbox"
|
||||||
:key="option.name"
|
v-model="data[field.name]"
|
||||||
:option="option"
|
@change="(e) => (data[field.name] = e.target.checked)"
|
||||||
/>
|
:disabled="Boolean(field.read_only)"
|
||||||
<div v-else>
|
/>
|
||||||
<div class="p-1.5 px-7 text-base text-gray-500">
|
<label
|
||||||
{{ __('No {0} Available', [field.label]) }}
|
class="text-sm text-gray-600"
|
||||||
|
@click="data[field.name] = !data[field.name]"
|
||||||
|
>
|
||||||
|
{{ __(field.label) }}
|
||||||
|
<span class="text-red-500" v-if="field.mandatory">*</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
v-else-if="field.type === 'Link'"
|
||||||
|
class="form-control"
|
||||||
|
:value="data[field.name]"
|
||||||
|
:doctype="field.options"
|
||||||
|
@change="(v) => (data[field.name] = v)"
|
||||||
|
:placeholder="__(field.placeholder || field.label)"
|
||||||
|
:onCreate="field.create"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
v-else-if="field.type === 'User'"
|
||||||
|
class="form-control"
|
||||||
|
:value="getUser(data[field.name]).full_name"
|
||||||
|
:doctype="field.options"
|
||||||
|
@change="(v) => (data[field.name] = v)"
|
||||||
|
:placeholder="__(field.placeholder || field.label)"
|
||||||
|
: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>
|
||||||
|
<div v-else-if="field.type === 'Dropdown'">
|
||||||
|
<NestedPopover>
|
||||||
|
<template #target="{ open }">
|
||||||
|
<Button
|
||||||
|
:label="data[field.name]"
|
||||||
|
class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
|
||||||
|
>
|
||||||
|
<div class="truncate">{{ data[field.name] }}</div>
|
||||||
|
<template #suffix>
|
||||||
|
<FeatherIcon
|
||||||
|
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||||
|
class="h-4 text-gray-600"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
<template #body>
|
||||||
|
<div
|
||||||
|
class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<DropdownItem
|
||||||
|
v-if="field.options?.length"
|
||||||
|
v-for="option in field.options"
|
||||||
|
:key="option.name"
|
||||||
|
:option="option"
|
||||||
|
/>
|
||||||
|
<div v-else>
|
||||||
|
<div class="p-1.5 px-7 text-base text-gray-500">
|
||||||
|
{{ __('No {0} Available', [field.label]) }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pt-1.5">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
class="w-full !justify-start"
|
||||||
|
:label="__('Create New')"
|
||||||
|
@click="field.create()"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<FeatherIcon name="plus" class="h-4" />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-1.5">
|
</template>
|
||||||
<Button
|
</NestedPopover>
|
||||||
variant="ghost"
|
</div>
|
||||||
class="w-full !justify-start"
|
<DateTimePicker
|
||||||
:label="__('Create New')"
|
v-else-if="field.type === 'Datetime'"
|
||||||
@click="field.create()"
|
v-model="data[field.name]"
|
||||||
>
|
:placeholder="__(field.placeholder || field.label)"
|
||||||
<template #prefix>
|
input-class="border-none"
|
||||||
<FeatherIcon name="plus" class="h-4" />
|
/>
|
||||||
</template>
|
<DatePicker
|
||||||
</Button>
|
v-else-if="field.type === 'Date'"
|
||||||
</div>
|
v-model="data[field.name]"
|
||||||
</div>
|
:placeholder="__(field.placeholder || field.label)"
|
||||||
</template>
|
input-class="border-none"
|
||||||
</NestedPopover>
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="
|
||||||
|
['Small Text', 'Text', 'Long Text'].includes(field.type)
|
||||||
|
"
|
||||||
|
type="textarea"
|
||||||
|
:placeholder="__(field.placeholder || field.label)"
|
||||||
|
v-model="data[field.name]"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="['Int'].includes(field.type)"
|
||||||
|
type="number"
|
||||||
|
:placeholder="__(field.placeholder || field.label)"
|
||||||
|
v-model="data[field.name]"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else
|
||||||
|
type="text"
|
||||||
|
:placeholder="__(field.placeholder || field.label)"
|
||||||
|
v-model="data[field.name]"
|
||||||
|
:disabled="Boolean(field.read_only)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<DateTimePicker
|
|
||||||
v-else-if="field.type === 'Datetime'"
|
|
||||||
v-model="data[field.name]"
|
|
||||||
:placeholder="__(field.placeholder || field.label)"
|
|
||||||
input-class="border-none"
|
|
||||||
:disabled="Boolean(field.read_only)"
|
|
||||||
/>
|
|
||||||
<DatePicker
|
|
||||||
v-else-if="field.type === 'Date'"
|
|
||||||
v-model="data[field.name]"
|
|
||||||
:placeholder="__(field.placeholder || field.label)"
|
|
||||||
input-class="border-none"
|
|
||||||
:disabled="Boolean(field.read_only)"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="['Small Text', 'Text', 'Long Text'].includes(field.type)"
|
|
||||||
type="textarea"
|
|
||||||
:placeholder="__(field.placeholder || field.label)"
|
|
||||||
v-model="data[field.name]"
|
|
||||||
:disabled="Boolean(field.read_only)"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="['Int'].includes(field.type)"
|
|
||||||
type="number"
|
|
||||||
:placeholder="__(field.placeholder || field.label)"
|
|
||||||
v-model="data[field.name]"
|
|
||||||
:disabled="Boolean(field.read_only)"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else
|
|
||||||
type="text"
|
|
||||||
:placeholder="__(field.placeholder || field.label)"
|
|
||||||
v-model="data[field.name]"
|
|
||||||
:disabled="Boolean(field.read_only)"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user