fix: show/hide preview quick entry & sidebar fields
This commit is contained in:
Shariq Ansari
parent
a6fdf4cec3
commit
3e4680abb9
@ -36,7 +36,7 @@
|
|||||||
<FormControl
|
<FormControl
|
||||||
v-else-if="
|
v-else-if="
|
||||||
['email', 'number', 'date', 'password', 'textarea'].includes(
|
['email', 'number', 'date', 'password', 'textarea'].includes(
|
||||||
field.type
|
field.type,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
@ -137,7 +137,10 @@ const _fields = computed(() => {
|
|||||||
props.fields?.forEach((field) => {
|
props.fields?.forEach((field) => {
|
||||||
let df = field.all_properties
|
let df = field.all_properties
|
||||||
if (df?.depends_on) evaluate_depends_on(df.depends_on, field)
|
if (df?.depends_on) evaluate_depends_on(df.depends_on, field)
|
||||||
all_fields.push(field)
|
all_fields.push({
|
||||||
|
...field,
|
||||||
|
placeholder: field.placeholder || field.label,
|
||||||
|
})
|
||||||
})
|
})
|
||||||
return all_fields
|
return all_fields
|
||||||
})
|
})
|
||||||
|
|||||||
@ -27,15 +27,29 @@
|
|||||||
@click="saveChanges"
|
@click="saveChanges"
|
||||||
/>
|
/>
|
||||||
<Button :label="__('Reset')" @click="reload" />
|
<Button :label="__('Reset')" @click="reload" />
|
||||||
|
<Button
|
||||||
|
:label="preview ? __('Hide Preview') : __('Show Preview')"
|
||||||
|
@click="preview = !preview"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
|
<div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
|
||||||
<QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
|
<div
|
||||||
|
class="rounded-xl h-full inline-block w-full px-4 pb-6 pt-5 sm:px-6 transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
|
||||||
|
>
|
||||||
|
<QuickEntryLayoutBuilder
|
||||||
|
v-if="!preview"
|
||||||
|
:sections="sections.data"
|
||||||
|
:doctype="doctype"
|
||||||
|
/>
|
||||||
|
<Fields v-else :sections="sections.data" :data="{}" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import Fields from '@/components/Fields.vue'
|
||||||
import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
|
import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
|
||||||
import { useDebounceFn } from '@vueuse/core'
|
import { useDebounceFn } from '@vueuse/core'
|
||||||
import { Badge, call, createResource } from 'frappe-ui'
|
import { Badge, call, createResource } from 'frappe-ui'
|
||||||
@ -44,6 +58,7 @@ import { ref, watch, onMounted } from 'vue'
|
|||||||
const doctype = ref('CRM Lead')
|
const doctype = ref('CRM Lead')
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const dirty = ref(false)
|
const dirty = ref(false)
|
||||||
|
const preview = ref(false)
|
||||||
|
|
||||||
function getParams() {
|
function getParams() {
|
||||||
return { doctype: doctype.value, type: 'Quick Entry' }
|
return { doctype: doctype.value, type: 'Quick Entry' }
|
||||||
|
|||||||
@ -1,141 +1,132 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div>
|
||||||
class="rounded-xl h-full inline-block w-full transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
|
<Draggable :list="sections" item-key="label" class="flex flex-col">
|
||||||
>
|
<template #item="{ element: section }">
|
||||||
<div class="bg-white px-4 pb-6 pt-5 sm:px-6 overflow-y-auto">
|
<div
|
||||||
<Draggable :list="sections" item-key="label" class="flex flex-col">
|
class="py-2 first:pt-0"
|
||||||
<template #item="{ element: section }">
|
:class="section.hideBorder ? '' : 'border-t first:border-t-0'"
|
||||||
<div
|
|
||||||
class="py-2 first:pt-0"
|
|
||||||
:class="section.hideBorder ? '' : 'border-t first:border-t-0'"
|
|
||||||
>
|
|
||||||
<div class="flex items-center justify-between pb-2">
|
|
||||||
<div
|
|
||||||
class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="!section.editingLabel"
|
|
||||||
:class="section.hideLabel ? 'text-gray-400' : ''"
|
|
||||||
>
|
|
||||||
{{ __(section.label) || __('Untitled') }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="flex gap-2 items-center">
|
|
||||||
<Input
|
|
||||||
v-model="section.label"
|
|
||||||
@keydown.enter="section.editingLabel = false"
|
|
||||||
@blur="section.editingLabel = false"
|
|
||||||
@click.stop
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
v-if="section.editingLabel"
|
|
||||||
icon="check"
|
|
||||||
variant="ghost"
|
|
||||||
@click="section.editingLabel = false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Dropdown :options="getOptions(section)">
|
|
||||||
<template #default>
|
|
||||||
<Button variant="ghost">
|
|
||||||
<FeatherIcon name="more-horizontal" class="h-4" />
|
|
||||||
</Button>
|
|
||||||
</template>
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Draggable
|
|
||||||
:list="section.fields"
|
|
||||||
group="fields"
|
|
||||||
item-key="label"
|
|
||||||
class="grid gap-2"
|
|
||||||
:class="
|
|
||||||
section.columns
|
|
||||||
? 'grid-cols-' + section.columns
|
|
||||||
: 'grid-cols-3'
|
|
||||||
"
|
|
||||||
handle=".cursor-grab"
|
|
||||||
>
|
|
||||||
<template #item="{ element: field }">
|
|
||||||
<div
|
|
||||||
class="px-1.5 py-1 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
|
|
||||||
>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<DragVerticalIcon class="h-3.5 cursor-grab" />
|
|
||||||
<div>{{ field.label }}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
icon="x"
|
|
||||||
@click="
|
|
||||||
section.fields.splice(
|
|
||||||
section.fields.indexOf(field),
|
|
||||||
1,
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Draggable>
|
|
||||||
<Autocomplete
|
|
||||||
v-if="fields.data"
|
|
||||||
value=""
|
|
||||||
:options="fields.data"
|
|
||||||
@change="(e) => addField(section, e)"
|
|
||||||
>
|
|
||||||
<template #target="{ togglePopover }">
|
|
||||||
<div
|
|
||||||
class="grid gap-2 w-full"
|
|
||||||
:class="
|
|
||||||
section.columns
|
|
||||||
? 'grid-cols-' + section.columns
|
|
||||||
: 'grid-cols-3'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
class="mt-2 w-full !h-[38px] !border-gray-200"
|
|
||||||
variant="outline"
|
|
||||||
@click="togglePopover()"
|
|
||||||
:label="__('Add Field')"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<FeatherIcon name="plus" class="h-4" />
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #item-label="{ option }">
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
<div>{{ option.label }}</div>
|
|
||||||
<div class="text-gray-500 text-sm">
|
|
||||||
{{ `${option.fieldname} - ${option.fieldtype}` }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Autocomplete>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Draggable>
|
|
||||||
<div class="py-2 border-t">
|
|
||||||
<Button
|
|
||||||
class="w-full !h-[38px] !border-gray-200"
|
|
||||||
variant="outline"
|
|
||||||
:label="__('Add Section')"
|
|
||||||
@click="
|
|
||||||
sections.push({
|
|
||||||
label: __('New Section'),
|
|
||||||
opened: true,
|
|
||||||
fields: [],
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<div class="flex items-center justify-between pb-2">
|
||||||
<FeatherIcon name="plus" class="h-4" />
|
<div
|
||||||
</template>
|
class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
|
||||||
</Button>
|
>
|
||||||
</div>
|
<div
|
||||||
|
v-if="!section.editingLabel"
|
||||||
|
:class="section.hideLabel ? 'text-gray-400' : ''"
|
||||||
|
>
|
||||||
|
{{ __(section.label) || __('Untitled') }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="flex gap-2 items-center">
|
||||||
|
<Input
|
||||||
|
v-model="section.label"
|
||||||
|
@keydown.enter="section.editingLabel = false"
|
||||||
|
@blur="section.editingLabel = false"
|
||||||
|
@click.stop
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
v-if="section.editingLabel"
|
||||||
|
icon="check"
|
||||||
|
variant="ghost"
|
||||||
|
@click="section.editingLabel = false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Dropdown :options="getOptions(section)">
|
||||||
|
<template #default>
|
||||||
|
<Button variant="ghost">
|
||||||
|
<FeatherIcon name="more-horizontal" class="h-4" />
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Draggable
|
||||||
|
:list="section.fields"
|
||||||
|
group="fields"
|
||||||
|
item-key="label"
|
||||||
|
class="grid gap-2"
|
||||||
|
:class="
|
||||||
|
section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
|
||||||
|
"
|
||||||
|
handle=".cursor-grab"
|
||||||
|
>
|
||||||
|
<template #item="{ element: field }">
|
||||||
|
<div
|
||||||
|
class="px-1.5 py-1 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
|
||||||
|
>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<DragVerticalIcon class="h-3.5 cursor-grab" />
|
||||||
|
<div>{{ field.label }}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
icon="x"
|
||||||
|
@click="
|
||||||
|
section.fields.splice(section.fields.indexOf(field), 1)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Draggable>
|
||||||
|
<Autocomplete
|
||||||
|
v-if="fields.data"
|
||||||
|
value=""
|
||||||
|
:options="fields.data"
|
||||||
|
@change="(e) => addField(section, e)"
|
||||||
|
>
|
||||||
|
<template #target="{ togglePopover }">
|
||||||
|
<div
|
||||||
|
class="grid gap-2 w-full"
|
||||||
|
:class="
|
||||||
|
section.columns
|
||||||
|
? 'grid-cols-' + section.columns
|
||||||
|
: 'grid-cols-3'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
class="mt-2 w-full !h-[38px] !border-gray-200"
|
||||||
|
variant="outline"
|
||||||
|
@click="togglePopover()"
|
||||||
|
:label="__('Add Field')"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<FeatherIcon name="plus" class="h-4" />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #item-label="{ option }">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<div>{{ option.label }}</div>
|
||||||
|
<div class="text-gray-500 text-sm">
|
||||||
|
{{ `${option.fieldname} - ${option.fieldtype}` }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Autocomplete>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Draggable>
|
||||||
|
<div class="py-2 border-t">
|
||||||
|
<Button
|
||||||
|
class="w-full !h-[38px] !border-gray-200"
|
||||||
|
variant="outline"
|
||||||
|
:label="__('Add Section')"
|
||||||
|
@click="
|
||||||
|
sections.push({
|
||||||
|
label: __('New Section'),
|
||||||
|
opened: true,
|
||||||
|
fields: [],
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<FeatherIcon name="plus" class="h-4" />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -27,6 +27,10 @@
|
|||||||
@click="saveChanges"
|
@click="saveChanges"
|
||||||
/>
|
/>
|
||||||
<Button :label="__('Reset')" @click="reload" />
|
<Button :label="__('Reset')" @click="reload" />
|
||||||
|
<Button
|
||||||
|
:label="preview ? __('Hide Preview') : __('Show Preview')"
|
||||||
|
@click="preview = !preview"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Resizer
|
<Resizer
|
||||||
@ -37,13 +41,30 @@
|
|||||||
>
|
>
|
||||||
<div class="flex flex-1 flex-col justify-between overflow-hidden">
|
<div class="flex flex-1 flex-col justify-between overflow-hidden">
|
||||||
<div class="flex flex-col overflow-y-auto">
|
<div class="flex flex-col overflow-y-auto">
|
||||||
<SidebarLayoutBuilder :sections="sections.data" :doctype="doctype" />
|
<SidebarLayoutBuilder
|
||||||
|
v-if="!preview"
|
||||||
|
:sections="sections.data"
|
||||||
|
:doctype="doctype"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
v-for="(section, i) in sections.data"
|
||||||
|
:key="section.label"
|
||||||
|
class="flex flex-col p-3"
|
||||||
|
:class="{ 'border-b': i !== sections.data.length - 1 }"
|
||||||
|
>
|
||||||
|
<Section :is-opened="section.opened" :label="section.label">
|
||||||
|
<SectionFields :fields="section.fields" v-model="data" />
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Resizer>
|
</Resizer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import Section from '@/components/Section.vue'
|
||||||
|
import SectionFields from '@/components/SectionFields.vue'
|
||||||
import Resizer from '@/components/Resizer.vue'
|
import Resizer from '@/components/Resizer.vue'
|
||||||
import SidebarLayoutBuilder from '@/components/Settings/SidebarLayoutBuilder.vue'
|
import SidebarLayoutBuilder from '@/components/Settings/SidebarLayoutBuilder.vue'
|
||||||
import { useDebounceFn } from '@vueuse/core'
|
import { useDebounceFn } from '@vueuse/core'
|
||||||
@ -54,6 +75,8 @@ const parentRef = ref(null)
|
|||||||
const doctype = ref('CRM Lead')
|
const doctype = ref('CRM Lead')
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const dirty = ref(false)
|
const dirty = ref(false)
|
||||||
|
const preview = ref(false)
|
||||||
|
const data = ref({})
|
||||||
|
|
||||||
function getParams() {
|
function getParams() {
|
||||||
return { doctype: doctype.value, type: 'Side Panel' }
|
return { doctype: doctype.value, type: 'Side Panel' }
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user