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

feat: edit column label & width

Browse Source
This commit is contained in:
Shariq Ansari 2023-11-28 12:15:41 +05:30
parent 2b6e16a934
commit 87862c9603
1 changed files with 126 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
frontend/src/components/ViewSettings.vue
View File

@ -11,54 +11,99 @@
<div
class="my-2 rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
>
<Draggable
:list="columns"
@end="onEnd"
item-key="key"
class="list-group"
>
<template #item="{ element }">
<div
class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-100"
>
<div class="flex items-center gap-2">
<DragIcon class="h-3.5" />
<div>{{ element.label }}</div>
</div>
<div class="flex cursor-pointer items-center gap-1">
<Button variant="ghost" class="!h-5 w-5 !p-1">
<EditIcon class="h-3.5" />
</Button>
<Button
variant="ghost"
class="!h-5 w-5 !p-1"
@click="removeColumn(element)"
>
<FeatherIcon name="x" class="h-3.5" />
</Button>
</div>
</div>
</template>
</Draggable>
<div class="mt-1.5 border-t pt-1.5">
<Autocomplete
value=""
:options="fields"
@change="(e) => addColumn(e)"
<div v-if="!edit">
<Draggable
:list="columns"
@end="updateColumnDetails"
item-key="key"
class="list-group"
>
<template #target="{ togglePopover }">
<Button
class="w-full !justify-start !text-gray-600"
variant="ghost"
@click="togglePopover()"
label="Add Column"
<template #item="{ element }">
<div
class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-100"
>
<template #prefix>
<FeatherIcon name="plus" class="h-4" />
</template>
</Button>
<div class="flex items-center gap-2">
<DragIcon class="h-3.5" />
<div>{{ element.label }}</div>
</div>
<div class="flex cursor-pointer items-center gap-1">
<Button
variant="ghost"
class="!h-5 w-5 !p-1"
@click="editColumn(element)"
>
<EditIcon class="h-3.5" />
</Button>
<Button
variant="ghost"
class="!h-5 w-5 !p-1"
@click="removeColumn(element)"
>
<FeatherIcon name="x" class="h-3.5" />
</Button>
</div>
</div>
</template>
</Autocomplete>
</Draggable>
<div class="mt-1.5 border-t pt-1.5">
<Autocomplete
value=""
:options="fields"
@change="(e) => addColumn(e)"
>
<template #target="{ togglePopover }">
<Button
class="w-full !justify-start !text-gray-600"
variant="ghost"
@click="togglePopover()"
label="Add Column"
>
<template #prefix>
<FeatherIcon name="plus" class="h-4" />
</template>
</Button>
</template>
</Autocomplete>
</div>
</div>
<div v-else>
<div
class="flex flex-col items-center justify-between gap-2 rounded px-2 py-1.5 text-base text-gray-800"
>
<div class="flex flex-col items-center gap-3">
<FormControl
type="text"
size="md"
label="Label"
v-model="column.label"
class="w-full"
placeholder="Column Label"
/>
<FormControl
type="text"
size="md"
label="Width"
class="w-full"
v-model="column.width"
placeholder="Column Width"
description="Width can be in number, pixel or rem (eg. 3, 30px, 10rem)"
/>
</div>
<div class="flex w-full gap-2 border-t pt-2">
<Button
variant="subtle"
label="Cancel"
class="w-full flex-1"
@click="cancelUpdate"
/>
<Button
variant="solid"
label="Update"
class="w-full flex-1"
@click="updateColumn(column)"
/>
</div>
</div>
</div>
</div>
</template>
@ -72,8 +117,8 @@ import DragIcon from '@/components/Icons/DragIcon.vue'
import NestedPopover from '@/components/NestedPopover.vue'
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
import Draggable from 'vuedraggable'
import { computed, defineModel } from 'vue'
import { FeatherIcon, call } from 'frappe-ui'
import { computed, defineModel, ref } from 'vue'
import { FeatherIcon, FormControl, call } from 'frappe-ui'
const props = defineProps({
doctype: {
@ -83,6 +128,13 @@ const props = defineProps({
})
const list = defineModel()
const edit = ref(false)
const column = ref({
old: {},
label: '',
key: '',
width: '10rem',
})
const columns = computed({
get: () => list.value?.data?.columns,
@ -108,24 +160,46 @@ const fields = computed(() => {
})
async function addColumn(c) {
let column = {
let _column = {
label: c.label,
key: c.value,
width: '10rem',
}
columns.value.push(column)
columns.value.push(_column)
rows.value.push(c.value)
await onEnd()
await updateColumnDetails()
list.value.reload()
}
function removeColumn(c) {
columns.value = columns.value.filter((column) => column.key !== c.key)
rows.value = rows.value.filter((row) => row !== c.key)
onEnd()
updateColumnDetails()
}
async function onEnd() {
function editColumn(c) {
edit.value = true
column.value = c
column.value.old = { ...c }
}
function updateColumn(c) {
edit.value = false
let index = columns.value.findIndex((column) => column.key === c.key)
columns.value[index].label = c.label
columns.value[index].width = c.width
updateColumnDetails()
}
function cancelUpdate() {
edit.value = false
column.value = {
...column.value.old,
old: {},
}
}
async function updateColumnDetails() {
await call(
'crm.fcrm.doctype.crm_list_view_settings.crm_list_view_settings.update',
{