fix: added draggable fields layout with sections
This commit is contained in:
Shariq Ansari
parent
7e3a2f9fb7
commit
ce0ebb03a7
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div ref="parentRef" class="flex flex-col p-8 overflow-hidden">
|
||||
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
|
||||
<div>{{ __('Quick Entry Layout') }}</div>
|
||||
<Badge
|
||||
v-if="dirty"
|
||||
:label="__('Not Saved')"
|
||||
variant="subtle"
|
||||
theme="orange"
|
||||
/>
|
||||
</h2>
|
||||
<div class="flex-1 flex flex-col justify-between -m-3 p-3 gap-6 overflow-y-auto">
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<div class="flex flex-col gap-2 p-8 pb-5">
|
||||
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
|
||||
<div>{{ __('Quick Entry Layout') }}</div>
|
||||
<Badge
|
||||
v-if="dirty"
|
||||
:label="__('Not Saved')"
|
||||
variant="subtle"
|
||||
theme="orange"
|
||||
/>
|
||||
</h2>
|
||||
<div class="flex gap-6 items-end">
|
||||
<FormControl
|
||||
class="flex-1"
|
||||
@ -29,19 +29,18 @@
|
||||
<Button :label="__('Reset')" @click="reload" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="sections?.data" class="">
|
||||
<QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
|
||||
<QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { Badge, createResource } from 'frappe-ui'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Badge, call, createResource } from 'frappe-ui'
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
|
||||
const parentRef = ref(null)
|
||||
const doctype = ref('CRM Lead')
|
||||
const loading = ref(false)
|
||||
const dirty = ref(false)
|
||||
@ -59,6 +58,15 @@ const sections = createResource({
|
||||
},
|
||||
})
|
||||
|
||||
watch(
|
||||
() => sections?.data,
|
||||
() => {
|
||||
dirty.value =
|
||||
JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
onMounted(() => useDebounceFn(reload, 100)())
|
||||
|
||||
function reload() {
|
||||
@ -67,6 +75,24 @@ function reload() {
|
||||
}
|
||||
|
||||
function saveChanges() {
|
||||
// TODO: Save changes
|
||||
let _sections = JSON.parse(JSON.stringify(sections.data))
|
||||
_sections.forEach((section) => {
|
||||
if (!section.fields) return
|
||||
section.fields = section.fields.map(
|
||||
(field) => field.fieldname || field.name,
|
||||
)
|
||||
})
|
||||
loading.value = true
|
||||
call(
|
||||
'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
|
||||
{
|
||||
doctype: doctype.value,
|
||||
type: 'Quick Entry',
|
||||
layout: JSON.stringify(_sections),
|
||||
},
|
||||
).then(() => {
|
||||
loading.value = false
|
||||
reload()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,33 +1,190 @@
|
||||
<template>
|
||||
<div
|
||||
class="border rounded-xl h-full inline-block w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
|
||||
class="border rounded-xl h-full inline-block w-full transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
|
||||
>
|
||||
<div class="bg-white px-4 pb-6 pt-5 sm:px-6">
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<header>
|
||||
<h3 class="text-2xl font-semibold leading-6 text-gray-900">
|
||||
{{ __('Create Lead') }}
|
||||
</h3>
|
||||
</header>
|
||||
</div>
|
||||
<Button icon="x" disabled variant="ghost" />
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="section in sections">
|
||||
<div>{{ section.label }}</div>
|
||||
<div v-for="field in section.fields">
|
||||
<div>{{ field.label }}</div>
|
||||
<div class="bg-white px-4 pb-6 pt-5 sm:px-6 overflow-y-auto">
|
||||
<Draggable :list="sections" item-key="label" class="flex flex-col">
|
||||
<template #item="{ element: section }">
|
||||
<div class="border-b py-2 first:pt-0">
|
||||
<div class="flex items-center justify-between py-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>
|
||||
<Input
|
||||
v-model="section.label"
|
||||
@keydown.enter="section.editingLabel = false"
|
||||
@blur="section.editingLabel = false"
|
||||
@click.stop
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
:icon="section.hideLabel ? 'eye-off' : 'eye'"
|
||||
variant="ghost"
|
||||
@click="section.hideLabel = !section.hideLabel"
|
||||
/>
|
||||
<Button
|
||||
:icon="section.editingLabel ? 'check' : 'edit'"
|
||||
variant="ghost"
|
||||
@click="section.editingLabel = !section.editingLabel"
|
||||
/>
|
||||
<Button
|
||||
v-if="section.editable !== false"
|
||||
icon="x"
|
||||
variant="ghost"
|
||||
@click="sections.splice(sections.indexOf(section), 1)"
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
<div class="py-2">
|
||||
<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 class="px-4 pb-7 pt-4 sm:px-6">Actions</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
|
||||
import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
import { createResource } from 'frappe-ui'
|
||||
import { computed, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
sections: Object,
|
||||
doctype: String,
|
||||
})
|
||||
|
||||
const restrictedFieldTypes = [
|
||||
'Table',
|
||||
'Geolocation',
|
||||
'Attach',
|
||||
'Attach Image',
|
||||
'HTML',
|
||||
'Signature',
|
||||
]
|
||||
|
||||
const params = computed(() => {
|
||||
return {
|
||||
doctype: props.doctype,
|
||||
restricted_fieldtypes: restrictedFieldTypes,
|
||||
as_array: true,
|
||||
}
|
||||
})
|
||||
|
||||
const fields = createResource({
|
||||
url: 'crm.api.doc.get_fields_meta',
|
||||
params: params.value,
|
||||
cache: ['fieldsMeta', props.doctype],
|
||||
auto: true,
|
||||
})
|
||||
|
||||
function addField(section, field) {
|
||||
if (!field) return
|
||||
section.fields.push(field)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.doctype,
|
||||
() => fields.fetch(params.value),
|
||||
{ immediate: true },
|
||||
)
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user