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

Merge pull request #76 from shariquerik/fix-resize-column

Browse Source 
refactor: Resize column width
This commit is contained in:
Shariq Ansari 2024-02-19 18:38:09 +05:30 committed by GitHub
commit 33feaad503
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 96 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frappe-ui

@ -1 +1 @@
Subproject commit 05e331df9e568a2f3f1d904230333baa1f7cc7be
Subproject commit 388c8706d0f96d918651018ca58d85a56d2bf5cb

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

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

4
frontend/src/components/ListViews/CallLogsListView.vue
View File

@ -12,7 +12,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" />
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
<ListRows id="list-rows">
<ListRow
class="mx-5"
@ -108,7 +108,7 @@ const props = defineProps({
},
})
const emit = defineEmits(['loadMore', 'updatePageCount'])
const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
const pageLengthCount = defineModel()

9
frontend/src/components/ListViews/ContactsListView.vue
View File

@ -13,7 +13,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" />
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
<ListRows id="list-rows">
<ListRow
class="mx-5"
@ -133,7 +133,12 @@ const props = defineProps({
},
})
const emit = defineEmits(['loadMore', 'updatePageCount', 'reload'])
const emit = defineEmits([
'loadMore',
'updatePageCount',
'reload',
'columnWidthUpdated',
])
const pageLengthCount = defineModel()

4
frontend/src/components/ListViews/DealsListView.vue
View File

@ -10,7 +10,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" />
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
<ListRows id="list-rows">
<ListRow
class="mx-5"
@ -164,7 +164,7 @@ const props = defineProps({
},
})
const emit = defineEmits(['loadMore', 'updatePageCount'])
const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
const pageLengthCount = defineModel()
const list = defineModel('list')

3
frontend/src/components/ListViews/EmailTemplatesListView.vue
View File

@ -9,7 +9,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" />
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
<ListRows id="list-rows">
<ListRow
class="mx-5"
@ -129,6 +129,7 @@ const emit = defineEmits([
'updatePageCount',
'showEmailTemplate',
'reload',
'columnWidthUpdated',
])
const pageLengthCount = defineModel()

4
frontend/src/components/ListViews/LeadsListView.vue
View File

@ -10,7 +10,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" />
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
<ListRows id="list-rows">
<ListRow
class="mx-5"
@ -173,7 +173,7 @@ const props = defineProps({
},
})
const emit = defineEmits(['loadMore', 'updatePageCount'])
const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
const pageLengthCount = defineModel()
const list = defineModel('list')

9
frontend/src/components/ListViews/OrganizationsListView.vue
View File

@ -12,7 +12,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" />
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
<ListRows id="list-rows">
<ListRow
class="mx-5"
@ -118,7 +118,12 @@ const props = defineProps({
},
})
const emit = defineEmits(['loadMore', 'updatePageCount', 'reload'])
const emit = defineEmits([
'loadMore',
'updatePageCount',
'reload',
'columnWidthUpdated',
])
const pageLengthCount = defineModel()

10
frontend/src/components/ListViews/TasksListView.vue
View File

@ -9,7 +9,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" />
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
<ListRows id="list-rows">
<ListRow
class="mx-5"
@ -147,7 +147,13 @@ const props = defineProps({
},
})
const emit = defineEmits(['loadMore', 'updatePageCount', 'showTask', 'reload'])
const emit = defineEmits([
'loadMore',
'updatePageCount',
'showTask',
'reload',
'columnWidthUpdated',
])
const pageLengthCount = defineModel()

19
frontend/src/components/ViewControls.vue
View File

@ -113,6 +113,7 @@ const { isManager } = usersStore()
const list = defineModel()
const loadMore = defineModel('loadMore')
const resizeColumn = defineModel('resizeColumn')
const updatedPageCount = defineModel('updatedPageCount')
const route = useRoute()
@ -151,6 +152,11 @@ watch(loadMore, (value) => {
updatePageLength(value, true)
})
watch(resizeColumn, (value) => {
if (!value) return
updateColumns()
})
watch(updatedPageCount, (value) => {
if (!value) return
updatePageLength(value)
@ -330,6 +336,14 @@ function updateSort(order_by) {
}
function updateColumns(obj) {
if (!obj) {
obj = {
columns: list.value.data.columns,
rows: list.value.data.rows,
isDefault: false,
}
}
if (!defaultParams.value) {
defaultParams.value = getParams()
}
@ -363,7 +377,10 @@ function create_or_update_default_view() {
{
view: view.value,
}
).then(() => reloadView())
).then(() => {
reloadView()
viewUpdated.value = false
})
}
function updatePageLength(value, loadMore = false) {

3
frontend/src/pages/CallLogs.vue
View File

@ -7,6 +7,7 @@
<ViewControls
v-model="callLogs"
v-model:loadMore="loadMore"
v-model:resizeColumn="triggerResize"
v-model:updatedPageCount="updatedPageCount"
doctype="CRM Call Log"
/>
@ -21,6 +22,7 @@
totalCount: callLogs.data.total_count,
}"
@loadMore="() => loadMore++"
@columnWidthUpdated="() => triggerResize++"
@updatePageCount="(count) => (updatedPageCount = count)"
@reload="callLogs.reload()"
/>
@ -61,6 +63,7 @@ const breadcrumbs = [{ label: 'Call Logs', route: { name: 'Call Logs' } }]
// callLogs data is loaded in the ViewControls component
const callLogs = ref({})
const loadMore = ref(1)
const triggerResize = ref(1)
const updatedPageCount = ref(20)
const rows = computed(() => {

3
frontend/src/pages/Contacts.vue
View File

@ -12,6 +12,7 @@
<ViewControls
v-model="contacts"
v-model:loadMore="loadMore"
v-model:resizeColumn="triggerResize"
v-model:updatedPageCount="updatedPageCount"
doctype="Contact"
/>
@ -26,6 +27,7 @@
totalCount: contacts.data.total_count,
}"
@loadMore="() => loadMore++"
@columnWidthUpdated="() => triggerResize++"
@updatePageCount="(count) => (updatedPageCount = count)"
@reload="contacts.reload()"
/>
@ -85,6 +87,7 @@ const breadcrumbs = computed(() => {
// contacts data is loaded in the ViewControls component
const contacts = ref({})
const loadMore = ref(1)
const triggerResize = ref(1)
const updatedPageCount = ref(20)
const rows = computed(() => {

3
frontend/src/pages/Deals.vue
View File

@ -12,6 +12,7 @@
<ViewControls
v-model="deals"
v-model:loadMore="loadMore"
v-model:resizeColumn="triggerResize"
v-model:updatedPageCount="updatedPageCount"
doctype="CRM Deal"
/>
@ -27,6 +28,7 @@
totalCount: deals.data.total_count,
}"
@loadMore="() => loadMore++"
@columnWidthUpdated="() => triggerResize++"
@updatePageCount="(count) => (updatedPageCount = count)"
/>
<div v-else-if="deals.data" class="flex h-full items-center justify-center">
@ -90,6 +92,7 @@ const router = useRouter()
// deals data is loaded in the ViewControls component
const deals = ref({})
const loadMore = ref(1)
const triggerResize = ref(1)
const updatedPageCount = ref(20)
// Rows

3
frontend/src/pages/EmailTemplates.vue
View File

@ -12,6 +12,7 @@
<ViewControls
v-model="emailTemplates"
v-model:loadMore="loadMore"
v-model:resizeColumn="triggerResize"
v-model:updatedPageCount="updatedPageCount"
doctype="Email Template"
/>
@ -26,6 +27,7 @@
totalCount: emailTemplates.data.total_count,
}"
@loadMore="() => loadMore++"
@columnWidthUpdated="() => triggerResize++"
@updatePageCount="(count) => (updatedPageCount = count)"
@showEmailTemplate="showEmailTemplate"
@reload="emailTemplates.reload()"
@ -65,6 +67,7 @@ const breadcrumbs = [
// emailTemplates data is loaded in the ViewControls component
const emailTemplates = ref({})
const loadMore = ref(1)
const triggerResize = ref(1)
const updatedPageCount = ref(20)
const rows = computed(() => {

3
frontend/src/pages/Leads.vue
View File

@ -12,6 +12,7 @@
<ViewControls
v-model="leads"
v-model:loadMore="loadMore"
v-model:resizeColumn="triggerResize"
v-model:updatedPageCount="updatedPageCount"
doctype="CRM Lead"
:filters="{ converted: 0 }"
@ -28,6 +29,7 @@
totalCount: leads.data.total_count,
}"
@loadMore="() => loadMore++"
@columnWidthUpdated="() => triggerResize++"
@updatePageCount="(count) => (updatedPageCount = count)"
/>
<div v-else-if="leads.data" class="flex h-full items-center justify-center">
@ -85,6 +87,7 @@ const router = useRouter()
// leads data is loaded in the ViewControls component
const leads = ref({})
const loadMore = ref(1)
const triggerResize = ref(1)
const updatedPageCount = ref(20)
// Rows

3
frontend/src/pages/Organizations.vue
View File

@ -16,6 +16,7 @@
<ViewControls
v-model="organizations"
v-model:loadMore="loadMore"
v-model:resizeColumn="triggerResize"
v-model:updatedPageCount="updatedPageCount"
doctype="CRM Organization"
/>
@ -30,6 +31,7 @@
totalCount: organizations.data.total_count,
}"
@loadMore="() => loadMore++"
@columnWidthUpdated="() => triggerResize++"
@updatePageCount="(count) => (updatedPageCount = count)"
@reload="organizations.reload()"
/>
@ -91,6 +93,7 @@ const breadcrumbs = computed(() => {
// organizations data is loaded in the ViewControls component
const organizations = ref({})
const loadMore = ref(1)
const triggerResize = ref(1)
const updatedPageCount = ref(20)
const rows = computed(() => {

3
frontend/src/pages/Tasks.vue
View File

@ -12,6 +12,7 @@
<ViewControls
v-model="tasks"
v-model:loadMore="loadMore"
v-model:resizeColumn="triggerResize"
v-model:updatedPageCount="updatedPageCount"
doctype="CRM Task"
/>
@ -26,6 +27,7 @@
totalCount: tasks.data.total_count,
}"
@loadMore="() => loadMore++"
@columnWidthUpdated="() => triggerResize++"
@updatePageCount="(count) => (updatedPageCount = count)"
@showTask="showTask"
@reload="tasks.reload()"
@ -59,6 +61,7 @@ const { getUser } = usersStore()
// tasks data is loaded in the ViewControls component
const tasks = ref({})
const loadMore = ref(1)
const triggerResize = ref(1)
const updatedPageCount = ref(20)
const rows = computed(() => {