test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: do not show empty read_only fields & hidden fields

Browse Source
This commit is contained in:
Shariq Ansari 2024-07-01 19:15:20 +05:30
parent 07a008a600
commit 2afe23de67
1 changed files with 158 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/Fields.vue
View File

@ -21,19 +21,35 @@
" "
> >
<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"> <div
v-if="
field.type == 'Check' ||
(field.read_only && data[field.name]) ||
!field.read_only || !field.hidden
"
>
<div
v-if="field.type != 'Check'"
class="mb-2 text-sm text-gray-600"
>
{{ __(field.label) }} {{ __(field.label) }}
<span class="text-red-500" v-if="field.mandatory">*</span> <span class="text-red-500" v-if="field.mandatory">*</span>
</div> </div>
<FormControl <FormControl
v-if="field.type === 'Select'" v-if="field.read_only && field.type !== 'Check'"
type="text"
:placeholder="__(field.placeholder || field.label)"
v-model="data[field.name]"
:disabled="true"
/>
<FormControl
v-else-if="field.type === 'Select'"
type="select" type="select"
class="form-control" class="form-control"
:class="field.prefix ? 'prefix' : ''" :class="field.prefix ? 'prefix' : ''"
:options="field.options" :options="field.options"
v-model="data[field.name]" v-model="data[field.name]"
:placeholder="__(field.placeholder || field.label)" :placeholder="__(field.placeholder || field.label)"
:disabled="Boolean(field.read_only)"
> >
<template v-if="field.prefix" #prefix> <template v-if="field.prefix" #prefix>
<IndicatorIcon :class="field.prefix" /> <IndicatorIcon :class="field.prefix" />
@ -66,7 +82,6 @@
@change="(v) => (data[field.name] = v)" @change="(v) => (data[field.name] = v)"
:placeholder="__(field.placeholder || field.label)" :placeholder="__(field.placeholder || field.label)"
:onCreate="field.create" :onCreate="field.create"
:disabled="Boolean(field.read_only)"
/> />
<Link <Link
v-else-if="field.type === 'User'" v-else-if="field.type === 'User'"
@ -76,7 +91,6 @@
@change="(v) => (data[field.name] = v)" @change="(v) => (data[field.name] = v)"
:placeholder="__(field.placeholder || field.label)" :placeholder="__(field.placeholder || field.label)"
:hideMe="true" :hideMe="true"
:disabled="Boolean(field.read_only)"
> >
<template #prefix> <template #prefix>
<UserAvatar class="mr-2" :user="data[field.name]" size="sm" /> <UserAvatar class="mr-2" :user="data[field.name]" size="sm" />
@ -146,28 +160,26 @@
v-model="data[field.name]" v-model="data[field.name]"
:placeholder="__(field.placeholder || field.label)" :placeholder="__(field.placeholder || field.label)"
input-class="border-none" input-class="border-none"
:disabled="Boolean(field.read_only)"
/> />
<DatePicker <DatePicker
v-else-if="field.type === 'Date'" v-else-if="field.type === 'Date'"
v-model="data[field.name]" v-model="data[field.name]"
:placeholder="__(field.placeholder || field.label)" :placeholder="__(field.placeholder || field.label)"
input-class="border-none" input-class="border-none"
:disabled="Boolean(field.read_only)"
/> />
<FormControl <FormControl
v-else-if="['Small Text', 'Text', 'Long Text'].includes(field.type)" v-else-if="
['Small Text', 'Text', 'Long Text'].includes(field.type)
"
type="textarea" type="textarea"
:placeholder="__(field.placeholder || field.label)" :placeholder="__(field.placeholder || field.label)"
v-model="data[field.name]" v-model="data[field.name]"
:disabled="Boolean(field.read_only)"
/> />
<FormControl <FormControl
v-else-if="['Int'].includes(field.type)" v-else-if="['Int'].includes(field.type)"
type="number" type="number"
:placeholder="__(field.placeholder || field.label)" :placeholder="__(field.placeholder || field.label)"
v-model="data[field.name]" v-model="data[field.name]"
:disabled="Boolean(field.read_only)"
/> />
<FormControl <FormControl
v-else v-else
@ -180,6 +192,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>