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

fix: added/remove column and added all options in dropdown

Browse Source
This commit is contained in:
Shariq Ansari 2024-06-19 17:05:41 +05:30
parent ce0ebb03a7
commit fb8dfb55d6
2 changed files with 60 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
View File

@ -1,6 +1,6 @@
<template>
<div
class="border rounded-xl h-full inline-block w-full transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
class="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 overflow-y-auto">
<Draggable :list="sections" item-key="label" class="flex flex-col">
@ -16,33 +16,28 @@
>
{{ __(section.label) || __('Untitled') }}
</div>
<div v-else>
<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>
<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>
<Dropdown :options="getOptions(section)">
<template #default>
<Button variant="ghost">
<FeatherIcon name="more-horizontal" class="h-4" />
</Button>
</template>
</Dropdown>
</div>
<div>
<Draggable
@ -145,7 +140,7 @@
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 { Dropdown, createResource } from 'frappe-ui'
import { computed, watch } from 'vue'
const props = defineProps({
@ -182,6 +177,40 @@ function addField(section, field) {
section.fields.push(field)
}
function getOptions(section) {
return [
{
label: 'Edit',
icon: 'edit',
onClick: () => (section.editingLabel = true),
},
{
label: section.hideLabel ? 'Show Label' : 'Hide Label',
icon: section.hideLabel ? 'eye' : 'eye-off',
onClick: () => (section.hideLabel = !section.hideLabel),
},
{
label: 'Add Column',
icon: 'columns',
onClick: () =>
(section.columns = section.columns ? section.columns + 1 : 4),
condition: () => !section.columns || section.columns < 4,
},
{
label: 'Remove Column',
icon: 'columns',
onClick: () =>
(section.columns = section.columns ? section.columns - 1 : 2),
condition: () => !section.columns || section.columns > 1,
},
{
label: 'Remove Section',
icon: 'trash-2',
onClick: () => props.sections.splice(props.sections.indexOf(section), 1),
},
]
}
watch(
() => props.doctype,
() => fields.fetch(params.value),

13
frontend/src/components/Settings/SidebarLayoutBuilder.vue
View File

@ -16,20 +16,27 @@
<div v-if="!section.editingLabel">
{{ __(section.label) || __('Untitled') }}
</div>
<div v-else>
<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.stop="section.editingLabel = false"
/>
</div>
</div>
<div>
<Button
:icon="section.editingLabel ? 'check' : 'edit'"
v-if="!section.editingLabel"
icon="edit"
variant="ghost"
@click="section.editingLabel = !section.editingLabel"
@click="section.editingLabel = true"
/>
<Button
v-if="section.editable !== false"