refactor: quick entry layout builder modal
This commit is contained in:
Shariq Ansari
parent
4848b09022
commit
01604ca5bd
@ -1,14 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Draggable :list="sections" item-key="label" class="flex flex-col">
|
<Draggable :list="sections" item-key="label" class="flex flex-col gap-5.5">
|
||||||
<template #item="{ element: section }">
|
<template #item="{ element: section }">
|
||||||
<div
|
<div class="flex flex-col gap-1.5 p-2.5 bg-gray-50 rounded">
|
||||||
class="py-2 first:pt-0"
|
<div class="flex items-center justify-between">
|
||||||
:class="section.hideBorder ? '' : 'border-t first:border-t-0'"
|
|
||||||
>
|
|
||||||
<div class="flex items-center justify-between pb-2">
|
|
||||||
<div
|
<div
|
||||||
class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
|
class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-medium leading-4"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="!section.editingLabel"
|
v-if="!section.editingLabel"
|
||||||
@ -39,81 +36,71 @@
|
|||||||
</template>
|
</template>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<Draggable
|
||||||
<Draggable
|
:list="section.fields"
|
||||||
:list="section.fields"
|
group="fields"
|
||||||
group="fields"
|
item-key="label"
|
||||||
item-key="label"
|
class="grid gap-1.5"
|
||||||
class="grid gap-2"
|
:class="
|
||||||
:class="
|
section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
|
||||||
section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
|
"
|
||||||
"
|
handle=".cursor-grab"
|
||||||
handle=".cursor-grab"
|
>
|
||||||
>
|
<template #item="{ element: field }">
|
||||||
<template #item="{ element: field }">
|
<div
|
||||||
<div
|
class="px-2.5 py-2 border rounded text-base bg-white text-gray-800 flex items-center leading-4 justify-between gap-2"
|
||||||
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">
|
||||||
<div class="flex items-center gap-2">
|
<DragVerticalIcon class="h-3.5 cursor-grab" />
|
||||||
<DragVerticalIcon class="h-3.5 cursor-grab" />
|
<div>{{ field.label }}</div>
|
||||||
<div>{{ field.label }}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
icon="x"
|
|
||||||
@click="
|
|
||||||
section.fields.splice(section.fields.indexOf(field), 1)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<Button
|
||||||
</Draggable>
|
variant="ghost"
|
||||||
<Autocomplete
|
class="!size-4 rounded-sm"
|
||||||
v-if="fields.data"
|
icon="x"
|
||||||
value=""
|
@click="
|
||||||
:options="fields.data"
|
section.fields.splice(section.fields.indexOf(field), 1)
|
||||||
@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'
|
|
||||||
"
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Draggable>
|
||||||
|
<Autocomplete
|
||||||
|
v-if="fields.data"
|
||||||
|
value=""
|
||||||
|
:options="fields.data"
|
||||||
|
@change="(e) => addField(section, e)"
|
||||||
|
>
|
||||||
|
<template #target="{ togglePopover }">
|
||||||
|
<div class="gap-2 w-full">
|
||||||
|
<Button
|
||||||
|
class="w-full !h-8 !border-gray-200 hover:!border-gray-300"
|
||||||
|
variant="outline"
|
||||||
|
@click="togglePopover()"
|
||||||
|
:label="__('Add Field')"
|
||||||
>
|
>
|
||||||
<Button
|
<template #prefix>
|
||||||
class="mt-2 w-full !h-[38px] !border-gray-200"
|
<FeatherIcon name="plus" class="h-4" />
|
||||||
variant="outline"
|
</template>
|
||||||
@click="togglePopover()"
|
</Button>
|
||||||
:label="__('Add Field')"
|
</div>
|
||||||
>
|
</template>
|
||||||
<template #prefix>
|
<template #item-label="{ option }">
|
||||||
<FeatherIcon name="plus" class="h-4" />
|
<div class="flex flex-col gap-1">
|
||||||
</template>
|
<div>{{ option.label }}</div>
|
||||||
</Button>
|
<div class="text-gray-500 text-sm">
|
||||||
|
{{ `${option.fieldname} - ${option.fieldtype}` }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<template #item-label="{ option }">
|
</template>
|
||||||
<div class="flex flex-col gap-1">
|
</Autocomplete>
|
||||||
<div>{{ option.label }}</div>
|
|
||||||
<div class="text-gray-500 text-sm">
|
|
||||||
{{ `${option.fieldname} - ${option.fieldtype}` }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Autocomplete>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Draggable>
|
</Draggable>
|
||||||
<div class="py-2 border-t">
|
<div class="mt-5.5">
|
||||||
<Button
|
<Button
|
||||||
class="w-full !h-[38px] !border-gray-200"
|
class="w-full h-8"
|
||||||
variant="outline"
|
variant="subtle"
|
||||||
:label="__('Add Section')"
|
:label="__('Add Section')"
|
||||||
@click="
|
@click="
|
||||||
sections.push({
|
sections.push({
|
||||||
|
|||||||
@ -1,62 +1,62 @@
|
|||||||
<template>
|
<template>
|
||||||
<Dialog v-model="show" :options="{ size: '3xl' }">
|
<Dialog v-model="show" :options="{ size: '3xl' }">
|
||||||
<template #body>
|
<template #body-title>
|
||||||
<div class="flex flex-col overflow-hidden h-[calc(100vh_-_8rem)]">
|
<h3
|
||||||
<div class="flex flex-col gap-2 p-8 pb-5">
|
class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900"
|
||||||
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
|
>
|
||||||
<div>{{ __('Edit Quick Entry Layout') }}</div>
|
<div>{{ __('Edit Quick Entry Layout') }}</div>
|
||||||
<Badge
|
<Badge
|
||||||
v-if="dirty"
|
v-if="dirty"
|
||||||
:label="__('Not Saved')"
|
:label="__('Not Saved')"
|
||||||
variant="subtle"
|
variant="subtle"
|
||||||
theme="orange"
|
theme="orange"
|
||||||
/>
|
/>
|
||||||
</h2>
|
</h3>
|
||||||
<div class="flex gap-6 items-end">
|
</template>
|
||||||
<FormControl
|
<template #body-content>
|
||||||
class="flex-1"
|
<div class="flex flex-col gap-3">
|
||||||
type="select"
|
<div class="flex justify-between gap-2">
|
||||||
v-model="_doctype"
|
<FormControl
|
||||||
:label="__('DocType')"
|
type="select"
|
||||||
:options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
|
class="w-1/4"
|
||||||
@change="reload"
|
v-model="_doctype"
|
||||||
/>
|
:options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
|
||||||
<div class="flex flex-row-reverse gap-2">
|
@change="reload"
|
||||||
<Button
|
/>
|
||||||
:loading="loading"
|
<Switch
|
||||||
:label="__('Save')"
|
v-model="preview"
|
||||||
variant="solid"
|
:label="preview ? __('Hide preview') : __('Show preview')"
|
||||||
@click="saveChanges"
|
size="sm"
|
||||||
/>
|
/>
|
||||||
<Button :label="__('Reset')" @click="reload" />
|
|
||||||
<Button
|
|
||||||
:label="preview ? __('Hide Preview') : __('Show Preview')"
|
|
||||||
@click="preview = !preview"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
|
<div v-if="sections?.data">
|
||||||
<div
|
<QuickEntryLayoutBuilder
|
||||||
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"
|
v-if="!preview"
|
||||||
>
|
:sections="sections.data"
|
||||||
<QuickEntryLayoutBuilder
|
:doctype="_doctype"
|
||||||
v-if="!preview"
|
/>
|
||||||
:sections="sections.data"
|
<Fields v-else :sections="sections.data" :data="{}" />
|
||||||
:doctype="_doctype"
|
|
||||||
/>
|
|
||||||
<Fields v-else :sections="sections.data" :data="{}" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<div class="flex flex-row-reverse gap-2">
|
||||||
|
<Button
|
||||||
|
:loading="loading"
|
||||||
|
:label="__('Save')"
|
||||||
|
variant="solid"
|
||||||
|
@click="saveChanges"
|
||||||
|
/>
|
||||||
|
<Button :label="__('Reset')" @click="reload" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import Fields from '@/components/Fields.vue'
|
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 { Dialog, Badge, call, createResource } from 'frappe-ui'
|
import { Dialog, Badge, Switch, call, createResource } from 'frappe-ui'
|
||||||
import { ref, watch, onMounted, nextTick } from 'vue'
|
import { ref, watch, onMounted, nextTick } from 'vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -121,6 +121,7 @@ function saveChanges() {
|
|||||||
},
|
},
|
||||||
).then(() => {
|
).then(() => {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
show.value = false
|
||||||
reload()
|
reload()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@ -62,22 +62,20 @@
|
|||||||
>
|
>
|
||||||
<template #item="{ element: field }">
|
<template #item="{ element: field }">
|
||||||
<div
|
<div
|
||||||
class="px-2.5 py-2 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
|
class="px-2.5 py-2 border rounded text-base leading-4 text-gray-800 flex items-center justify-between gap-2"
|
||||||
>
|
>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<DragVerticalIcon class="h-3.5 cursor-grab" />
|
<DragVerticalIcon class="h-3.5 cursor-grab" />
|
||||||
<div>{{ field.label }}</div>
|
<div>{{ field.label }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<Button
|
||||||
<Button
|
variant="ghost"
|
||||||
variant="ghost"
|
icon="x"
|
||||||
icon="x"
|
class="!size-4 rounded-sm"
|
||||||
class="!size-4 rounded-sm"
|
@click="
|
||||||
@click="
|
section.fields.splice(section.fields.indexOf(field), 1)
|
||||||
section.fields.splice(section.fields.indexOf(field), 1)
|
"
|
||||||
"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Draggable>
|
</Draggable>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user