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

Merge pull request #75 from shariquerik/apply-listview-resize-column

Browse Source 
fix: update column width on column resize by dragging and remove tooltip from listviews
This commit is contained in:
Shariq Ansari 2024-02-19 14:28:53 +05:30 committed by GitHub
commit 01b7aad776
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 119 additions and 45 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'

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

@ -8,6 +8,7 @@
params: { callLogId: row.name },
}),
selectable: options.selectable,
showTooltip: options.showTooltip,
}"
row-key="name"
>
@ -35,12 +36,13 @@
<FeatherIcon :name="item.icon" class="h-3 w-3" />
</div>
</template>
<div
<Tooltip
:text="item.label"
v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base"
>
{{ item.timeAgo }}
</div>
</Tooltip>
<div v-else-if="column.key === 'status'" class="truncate text-base">
<Badge
:variant="'subtle'"
@ -82,6 +84,7 @@ import {
ListSelectBanner,
ListRowItem,
ListFooter,
Tooltip,
} from 'frappe-ui'
import { watch } from 'vue'
@ -98,6 +101,7 @@ const props = defineProps({
type: Object,
default: () => ({
selectable: true,
showTooltip: true,
totalCount: 0,
rowCount: 0,
}),

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

@ -9,6 +9,7 @@
params: { contactId: row.name },
}),
selectable: options.selectable,
showTooltip: options.showTooltip,
}"
row-key="name"
>
@ -45,12 +46,13 @@
<PhoneIcon class="h-4 w-4" />
</div>
</template>
<div
<Tooltip
:text="item.label"
v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base"
>
{{ item.timeAgo }}
</div>
</Tooltip>
<div v-else-if="column.type === 'Check'">
<FormControl
type="checkbox"
@ -64,7 +66,11 @@
</ListRows>
<ListSelectBanner>
<template #actions="{ selections, unselectAll }">
<Button variant="subtle" label="Edit" @click="editValues(selections, unselectAll)">
<Button
variant="subtle"
label="Edit"
@click="editValues(selections, unselectAll)"
>
<template #prefix>
<EditIcon class="h-3 w-3" />
</template>
@ -103,6 +109,7 @@ import {
ListSelectBanner,
ListRowItem,
ListFooter,
Tooltip,
} from 'frappe-ui'
import { ref, watch } from 'vue'
@ -119,6 +126,7 @@ const props = defineProps({
type: Object,
default: () => ({
selectable: true,
showTooltip: true,
totalCount: 0,
rowCount: 0,
}),

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

@ -6,6 +6,7 @@
:options="{
getRowRoute: (row) => ({ name: 'Deal', params: { dealId: row.name } }),
selectable: options.selectable,
showTooltip: options.showTooltip,
}"
row-key="name"
>
@ -48,7 +49,8 @@
<PhoneIcon class="h-4 w-4" />
</div>
</template>
<div
<Tooltip
:text="item.label"
v-if="
[
'modified',
@ -61,7 +63,7 @@
class="truncate text-base"
>
{{ item.timeAgo }}
</div>
</Tooltip>
<div
v-else-if="column.key === 'sla_status'"
class="truncate text-base"
@ -135,6 +137,7 @@ import {
ListFooter,
Dropdown,
call,
Tooltip,
} from 'frappe-ui'
import { setupBulkActions, createToast } from '@/utils'
import { globalStore } from '@/stores/global'
@ -154,6 +157,7 @@ const props = defineProps({
type: Object,
default: () => ({
selectable: true,
showTooltip: true,
totalCount: 0,
rowCount: 0,
}),

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

@ -5,6 +5,7 @@
:options="{
onRowClick: (row) => emit('showEmailTemplate', row.name),
selectable: options.selectable,
showTooltip: options.showTooltip,
}"
row-key="name"
>
@ -21,12 +22,13 @@
<!-- <template #prefix>
</template> -->
<div
<Tooltip
:text="item.label"
v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base"
>
{{ item.timeAgo }}
</div>
</Tooltip>
<div v-else-if="column.key === 'status'" class="truncate text-base">
<Badge
:variant="'subtle'"
@ -98,6 +100,7 @@ import {
ListRowItem,
ListFooter,
call,
Tooltip,
} from 'frappe-ui'
import { ref, watch } from 'vue'
@ -114,6 +117,7 @@ const props = defineProps({
type: Object,
default: () => ({
selectable: true,
showTooltip: true,
totalCount: 0,
rowCount: 0,
}),

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

@ -6,6 +6,7 @@
:options="{
getRowRoute: (row) => ({ name: 'Lead', params: { leadId: row.name } }),
selectable: options.selectable,
showTooltip: options.showTooltip,
}"
row-key="name"
>
@ -57,7 +58,8 @@
<PhoneIcon class="h-4 w-4" />
</div>
</template>
<div
<Tooltip
:text="item.label"
v-if="
[
'modified',
@ -70,7 +72,7 @@
class="truncate text-base"
>
{{ item.timeAgo }}
</div>
</Tooltip>
<div
v-else-if="column.key === 'sla_status'"
class="truncate text-base"
@ -144,6 +146,7 @@ import {
ListFooter,
Dropdown,
call,
Tooltip,
} from 'frappe-ui'
import { setupBulkActions, createToast } from '@/utils'
import { globalStore } from '@/stores/global'
@ -163,6 +166,7 @@ const props = defineProps({
type: Object,
default: () => ({
selectable: true,
showTooltip: true,
totalCount: 0,
rowCount: 0,
}),

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

@ -8,6 +8,7 @@
params: { organizationId: row.name },
}),
selectable: options.selectable,
showTooltip: options.showTooltip,
}"
row-key="name"
>
@ -32,12 +33,13 @@
/>
</div>
</template>
<div
<Tooltip
:text="item.label"
v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base"
>
{{ item.timeAgo }}
</div>
</Tooltip>
<div v-else-if="column.type === 'Check'">
<FormControl
type="checkbox"
@ -51,7 +53,11 @@
</ListRows>
<ListSelectBanner>
<template #actions="{ selections, unselectAll }">
<Button variant="subtle" label="Edit" @click="editValues(selections, unselectAll)">
<Button
variant="subtle"
label="Edit"
@click="editValues(selections, unselectAll)"
>
<template #prefix>
<EditIcon class="h-3 w-3" />
</template>
@ -88,6 +94,7 @@ import {
ListSelectBanner,
ListRowItem,
ListFooter,
Tooltip,
} from 'frappe-ui'
import { ref, watch } from 'vue'
@ -104,6 +111,7 @@ const props = defineProps({
type: Object,
default: () => ({
selectable: true,
showTooltip: true,
totalCount: 0,
rowCount: 0,
}),

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

@ -5,6 +5,7 @@
:options="{
onRowClick: (row) => emit('showTask', row.name),
selectable: options.selectable,
showTooltip: options.showTooltip,
}"
row-key="name"
>
@ -47,12 +48,13 @@
/>
</div>
</template>
<div
<Tooltip
:text="item.label"
v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base"
>
{{ item.timeAgo }}
</div>
</Tooltip>
<div v-else-if="column.type === 'Check'">
<FormControl
type="checkbox"
@ -138,6 +140,7 @@ const props = defineProps({
type: Object,
default: () => ({
selectable: true,
showTooltip: true,
totalCount: 0,
rowCount: 0,
}),

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

@ -16,6 +16,7 @@
:rows="rows"
:columns="callLogs.data.columns"
:options="{
showTooltip: false,
rowCount: callLogs.data.row_count,
totalCount: callLogs.data.total_count,
}"

2
frontend/src/pages/Contact.vue
View File

@ -175,7 +175,7 @@
class="mt-4"
:rows="rows"
:columns="columns"
:options="{ selectable: false }"
:options="{ selectable: false, showTooltip: false }"
/>
<div
v-if="!rows.length"

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

@ -21,6 +21,7 @@
:rows="rows"
:columns="contacts.data.columns"
:options="{
showTooltip: false,
rowCount: contacts.data.row_count,
totalCount: contacts.data.total_count,
}"

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

@ -22,6 +22,7 @@
:rows="rows"
:columns="deals.data.columns"
:options="{
showTooltip: false,
rowCount: deals.data.row_count,
totalCount: deals.data.total_count,
}"

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

@ -21,6 +21,7 @@
:rows="rows"
:columns="emailTemplates.data.columns"
:options="{
showTooltip: false,
rowCount: emailTemplates.data.row_count,
totalCount: emailTemplates.data.total_count,
}"

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

@ -23,6 +23,7 @@
:rows="rows"
:columns="leads.data.columns"
:options="{
showTooltip: false,
rowCount: leads.data.row_count,
totalCount: leads.data.total_count,
}"

4
frontend/src/pages/Organization.vue
View File

@ -184,14 +184,14 @@
v-if="tab.label === 'Deals' && rows.length"
:rows="rows"
:columns="columns"
:options="{ selectable: false }"
:options="{ selectable: false, showTooltip: false }"
/>
<ContactsListView
class="mt-4"
v-if="tab.label === 'Contacts' && rows.length"
:rows="rows"
:columns="columns"
:options="{ selectable: false }"
:options="{ selectable: false, showTooltip: false, }"
/>
<div
v-if="!rows.length"

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

@ -25,6 +25,7 @@
:rows="rows"
:columns="organizations.data.columns"
:options="{
showTooltip: false,
rowCount: organizations.data.row_count,
totalCount: organizations.data.total_count,
}"

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

@ -21,6 +21,7 @@
:rows="rows"
:columns="tasks.data.columns"
:options="{
showTooltip: false,
rowCount: tasks.data.row_count,
totalCount: tasks.data.total_count,
}"