test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: update column width on column resize by dragging

Browse Source
This commit is contained in:
Shariq Ansari 2024-02-19 13:55:13 +05:30
parent 21283fa213
commit 16778bc313
2 changed files with 58 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/ColumnItem.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<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>{{ column.label }}</div>
</div>
<div class="flex cursor-pointer items-center gap-1">
<Button
variant="ghost"
class="!h-5 w-5 !p-1"
@click="emit('edit', column)"
>
<EditIcon class="h-3.5" />
</Button>
<Button
variant="ghost"
class="!h-5 w-5 !p-1"
@click="emit('remove', column)"
>
<FeatherIcon name="x" class="h-3.5" />
</Button>
</div>
</div>
</template>
<script setup>
import EditIcon from '@/components/Icons/EditIcon.vue'
import DragIcon from '@/components/Icons/DragIcon.vue'
import { watchDebounced } from '@vueuse/core'
const props = defineProps({
column: {
type: Object,
required: true,
},
})
const emit = defineEmits(['edit', 'remove', 'update'])
watchDebounced(
() => props.column.width,
(val, old_val) => {
val = val.replace(/[^\d.]/g, '')
old_val = old_val.replace(/[^\d.]/g, '')
if (Math.abs(val - old_val) > 1) return
emit('update')
},
{ debounce: 1000 }
)
</script>

33
frontend/src/components/ColumnSettings.vue
View File

@ -19,30 +19,12 @@
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"
@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>
<ColumnItem
:column="element"
@edit="editColumn"
@remove="removeColumn"
@update="apply"
/>
</template>
</Draggable>
<div class="mt-1.5 flex flex-col gap-1 border-t pt-1.5">
@ -135,8 +117,7 @@
<script setup>
import ColumnsIcon from '@/components/Icons/ColumnsIcon.vue'
import EditIcon from '@/components/Icons/EditIcon.vue'
import DragIcon from '@/components/Icons/DragIcon.vue'
import ColumnItem from '@/components/ColumnItem.vue'
import ReloadIcon from '@/components/Icons/ReloadIcon.vue'
import NestedPopover from '@/components/NestedPopover.vue'
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'