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

Merge pull request #156 from shariquerik/list-onclick-filter-fix

Browse Source 
fix: onlick of text only apply filter
This commit is contained in:
Shariq Ansari 2024-04-30 13:51:02 +05:30 committed by GitHub
commit 9af94873e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 304 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,10 +22,7 @@
v-slot="{ idx, column, item }" v-slot="{ idx, column, item }"
:row="row" :row="row"
> >
<ListRowItem <ListRowItem :item="item">
:item="item"
@click="(event) => emit('applyFilter', { event, idx, column, item })"
>
<template #prefix> <template #prefix>
<div v-if="['caller', 'receiver'].includes(column.key)"> <div v-if="['caller', 'receiver'].includes(column.key)">
<Avatar <Avatar
@ -40,30 +37,47 @@
<FeatherIcon :name="item.icon" class="h-3 w-3" /> <FeatherIcon :name="item.icon" class="h-3 w-3" />
</div> </div>
</template> </template>
<div <template #default="{ label }">
v-if="['modified', 'creation'].includes(column.key)" <div
class="truncate text-base" v-if="['modified', 'creation'].includes(column.key)"
> class="truncate text-base"
<Tooltip :text="item.label"> @click="
<div>{{ item.timeAgo }}</div> (event) => emit('applyFilter', { event, idx, column, item })
</Tooltip> "
</div> >
<div v-else-if="column.key === 'status'" class="truncate text-base"> <Tooltip :text="item.label">
<Badge <div>{{ item.timeAgo }}</div>
:variant="'subtle'" </Tooltip>
:theme="item.color" </div>
size="md" <div v-else-if="column.key === 'status'" class="truncate text-base">
:label="__(item.label)" <Badge
/> :variant="'subtle'"
</div> :theme="item.color"
<div v-else-if="column.type === 'Check'"> size="md"
<FormControl :label="__(item.label)"
type="checkbox" @click="
:modelValue="item" (event) => emit('applyFilter', { event, idx, column, item })
:disabled="true" "
class="text-gray-900" />
/> </div>
</div> <div v-else-if="column.type === 'Check'">
<FormControl
type="checkbox"
:modelValue="item"
:disabled="true"
class="text-gray-900"
/>
</div>
<div
v-else
class="truncate text-base"
@click="
(event) => emit('applyFilter', { event, idx, column, item })
"
>
{{ label }}
</div>
</template>
</ListRowItem> </ListRowItem>
</ListRow> </ListRow>
</ListRows> </ListRows>

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

@ -23,10 +23,7 @@
v-slot="{ idx, column, item }" v-slot="{ idx, column, item }"
:row="row" :row="row"
> >
<ListRowItem <ListRowItem :item="item">
:item="item"
@click="(event) => emit('applyFilter', { event, idx, column, item })"
>
<template #prefix> <template #prefix>
<div v-if="column.key === 'full_name'"> <div v-if="column.key === 'full_name'">
<Avatar <Avatar
@ -50,22 +47,36 @@
<PhoneIcon class="h-4 w-4" /> <PhoneIcon class="h-4 w-4" />
</div> </div>
</template> </template>
<div <template #default="{ label }">
v-if="['modified', 'creation'].includes(column.key)" <div
class="truncate text-base" v-if="['modified', 'creation'].includes(column.key)"
> class="truncate text-base"
<Tooltip :text="item.label"> @click="
<div>{{ item.timeAgo }}</div> (event) => emit('applyFilter', { event, idx, column, item })
</Tooltip> "
</div> >
<div v-else-if="column.type === 'Check'"> <Tooltip :text="item.label">
<FormControl <div>{{ item.timeAgo }}</div>
type="checkbox" </Tooltip>
:modelValue="item" </div>
:disabled="true" <div v-else-if="column.type === 'Check'">
class="text-gray-900" <FormControl
/> type="checkbox"
</div> :modelValue="item"
:disabled="true"
class="text-gray-900"
/>
</div>
<div
v-else
class="truncate text-base"
@click="
(event) => emit('applyFilter', { event, idx, column, item })
"
>
{{ label }}
</div>
</template>
</ListRowItem> </ListRowItem>
</ListRow> </ListRow>
</ListRows> </ListRows>

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

@ -20,18 +20,16 @@
v-slot="{ idx, column, item }" v-slot="{ idx, column, item }"
:row="row" :row="row"
> >
<div <div v-if="column.key === '_assign'" class="flex items-center">
v-if="column.key === '_assign'" <MultipleAvatar
class="flex items-center" :avatars="item"
@click="(event) => emit('applyFilter', { event, idx, column, item })" size="sm"
> @click="
<MultipleAvatar :avatars="item" size="sm" /> (event) => emit('applyFilter', { event, idx, column, item })
"
/>
</div> </div>
<ListRowItem <ListRowItem v-else :item="item">
v-else
:item="item"
@click="(event) => emit('applyFilter', { event, idx, column, item })"
>
<template #prefix> <template #prefix>
<div v-if="column.key === 'status'"> <div v-if="column.key === 'status'">
<IndicatorIcon :class="item.color" /> <IndicatorIcon :class="item.color" />
@ -58,42 +56,59 @@
<PhoneIcon class="h-4 w-4" /> <PhoneIcon class="h-4 w-4" />
</div> </div>
</template> </template>
<div <template #default="{ label }">
v-if=" <div
[ v-if="
'modified', [
'creation', 'modified',
'first_response_time', 'creation',
'first_responded_on', 'first_response_time',
'response_by', 'first_responded_on',
].includes(column.key) 'response_by',
" ].includes(column.key)
class="truncate text-base" "
> class="truncate text-base"
<Tooltip :text="item.label"> @click="
<div>{{ item.timeAgo }}</div> (event) => emit('applyFilter', { event, idx, column, item })
</Tooltip> "
</div> >
<div <Tooltip :text="item.label">
v-else-if="column.key === 'sla_status'" <div>{{ item.timeAgo }}</div>
class="truncate text-base" </Tooltip>
> </div>
<Badge <div
v-if="item.value" v-else-if="column.key === 'sla_status'"
:variant="'subtle'" class="truncate text-base"
:theme="item.color" >
size="md" <Badge
:label="item.value" v-if="item.value"
/> :variant="'subtle'"
</div> :theme="item.color"
<div v-else-if="column.type === 'Check'"> size="md"
<FormControl :label="item.value"
type="checkbox" @click="
:modelValue="item" (event) => emit('applyFilter', { event, idx, column, item })
:disabled="true" "
class="text-gray-900" />
/> </div>
</div> <div v-else-if="column.type === 'Check'">
<FormControl
type="checkbox"
:modelValue="item"
:disabled="true"
class="text-gray-900"
/>
</div>
<div
v-else
class="truncate text-base"
@click="
(event) => emit('applyFilter', { event, idx, column, item })
"
>
{{ label }}
</div>
</template>
</ListRowItem> </ListRowItem>
</ListRow> </ListRow>
</ListRows> </ListRows>

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

@ -19,37 +19,51 @@
v-slot="{ idx, column, item }" v-slot="{ idx, column, item }"
:row="row" :row="row"
> >
<ListRowItem <ListRowItem :item="item">
:item="item"
@click="(event) => emit('applyFilter', { event, idx, column, item })"
>
<!-- <template #prefix> <!-- <template #prefix>
</template> --> </template> -->
<div <template #default="{ label }">
v-if="['modified', 'creation'].includes(column.key)" <div
class="truncate text-base" v-if="['modified', 'creation'].includes(column.key)"
> class="truncate text-base"
<Tooltip :text="item.label"> @click="
<div>{{ item.timeAgo }}</div> (event) => emit('applyFilter', { event, idx, column, item })
</Tooltip> "
</div> >
<div v-else-if="column.key === 'status'" class="truncate text-base"> <Tooltip :text="item.label">
<Badge <div>{{ item.timeAgo }}</div>
:variant="'subtle'" </Tooltip>
:theme="item.color" </div>
size="md" <div v-else-if="column.key === 'status'" class="truncate text-base">
:label="item.label" <Badge
/> :variant="'subtle'"
</div> :theme="item.color"
<div v-else-if="column.type === 'Check'"> size="md"
<FormControl :label="item.label"
type="checkbox" @click="
:modelValue="item" (event) => emit('applyFilter', { event, idx, column, item })
:disabled="true" "
class="text-gray-900" />
/> </div>
</div> <div v-else-if="column.type === 'Check'">
<FormControl
type="checkbox"
:modelValue="item"
:disabled="true"
class="text-gray-900"
/>
</div>
<div
v-else
class="truncate text-base"
@click="
(event) => emit('applyFilter', { event, idx, column, item })
"
>
{{ label }}
</div>
</template>
</ListRowItem> </ListRowItem>
</ListRow> </ListRow>
</ListRows> </ListRows>

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

@ -20,18 +20,16 @@
v-slot="{ idx, column, item }" v-slot="{ idx, column, item }"
:row="row" :row="row"
> >
<div <div v-if="column.key === '_assign'" class="flex items-center">
v-if="column.key === '_assign'" <MultipleAvatar
class="flex items-center" :avatars="item"
@click="(event) => emit('applyFilter', { event, idx, column, item })" size="sm"
> @click="
<MultipleAvatar :avatars="item" size="sm" /> (event) => emit('applyFilter', { event, idx, column, item })
"
/>
</div> </div>
<ListRowItem <ListRowItem v-else :item="item">
v-else
:item="item"
@click="(event) => emit('applyFilter', { event, idx, column, item })"
>
<template #prefix> <template #prefix>
<div v-if="column.key === 'status'"> <div v-if="column.key === 'status'">
<IndicatorIcon :class="item.color" /> <IndicatorIcon :class="item.color" />
@ -67,42 +65,59 @@
<PhoneIcon class="h-4 w-4" /> <PhoneIcon class="h-4 w-4" />
</div> </div>
</template> </template>
<div <template #default="{ label }">
v-if=" <div
[ v-if="
'modified', [
'creation', 'modified',
'first_response_time', 'creation',
'first_responded_on', 'first_response_time',
'response_by', 'first_responded_on',
].includes(column.key) 'response_by',
" ].includes(column.key)
class="truncate text-base" "
> class="truncate text-base"
<Tooltip :text="item.label"> @click="
<div>{{ item.timeAgo }}</div> (event) => emit('applyFilter', { event, idx, column, item })
</Tooltip> "
</div> >
<div <Tooltip :text="item.label">
v-else-if="column.key === 'sla_status'" <div>{{ item.timeAgo }}</div>
class="truncate text-base" </Tooltip>
> </div>
<Badge <div
v-if="item.value" v-else-if="column.key === 'sla_status'"
:variant="'subtle'" class="truncate text-base"
:theme="item.color" >
size="md" <Badge
:label="item.value" v-if="item.value"
/> :variant="'subtle'"
</div> :theme="item.color"
<div v-else-if="column.type === 'Check'"> size="md"
<FormControl :label="item.value"
type="checkbox" @click="
:modelValue="item" (event) => emit('applyFilter', { event, idx, column, item })
:disabled="true" "
class="text-gray-900" />
/> </div>
</div> <div v-else-if="column.type === 'Check'">
<FormControl
type="checkbox"
:modelValue="item"
:disabled="true"
class="text-gray-900"
/>
</div>
<div
v-else
class="truncate text-base"
@click="
(event) => emit('applyFilter', { event, idx, column, item })
"
>
{{ label }}
</div>
</template>
</ListRowItem> </ListRowItem>
</ListRow> </ListRow>
</ListRows> </ListRows>
@ -213,7 +228,9 @@ function editValues(selections, unselectAll) {
function deleteValues(selections, unselectAll) { function deleteValues(selections, unselectAll) {
$dialog({ $dialog({
title: __('Delete'), title: __('Delete'),
message: __('Are you sure you want to delete {0} item(s)?', [selections.size]), message: __('Are you sure you want to delete {0} item(s)?', [
selections.size,
]),
variant: 'danger', variant: 'danger',
actions: [ actions: [
{ {

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

@ -22,10 +22,7 @@
v-slot="{ idx, column, item }" v-slot="{ idx, column, item }"
:row="row" :row="row"
> >
<ListRowItem <ListRowItem :item="item">
:item="item"
@click="(event) => emit('applyFilter', { event, idx, column, item })"
>
<template #prefix> <template #prefix>
<div v-if="column.key === 'organization_name'"> <div v-if="column.key === 'organization_name'">
<Avatar <Avatar
@ -37,22 +34,36 @@
/> />
</div> </div>
</template> </template>
<div <template #default="{ label }">
v-if="['modified', 'creation'].includes(column.key)" <div
class="truncate text-base" v-if="['modified', 'creation'].includes(column.key)"
> class="truncate text-base"
<Tooltip :text="item.label"> @click="
<div>{{ item.timeAgo }}</div> (event) => emit('applyFilter', { event, idx, column, item })
</Tooltip> "
</div> >
<div v-else-if="column.type === 'Check'"> <Tooltip :text="item.label">
<FormControl <div>{{ item.timeAgo }}</div>
type="checkbox" </Tooltip>
:modelValue="item" </div>
:disabled="true" <div v-else-if="column.type === 'Check'">
class="text-gray-900" <FormControl
/> type="checkbox"
</div> :modelValue="item"
:disabled="true"
class="text-gray-900"
/>
</div>
<div
v-else
class="truncate text-base"
@click="
(event) => emit('applyFilter', { event, idx, column, item })
"
>
{{ label }}
</div>
</template>
</ListRowItem> </ListRowItem>
</ListRow> </ListRow>
</ListRows> </ListRows>

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

@ -29,11 +29,7 @@
</div> </div>
</Tooltip> </Tooltip>
</div> </div>
<ListRowItem <ListRowItem v-else :item="item">
v-else
:item="item"
@click="(event) => emit('applyFilter', { event, idx, column, item })"
>
<template #prefix> <template #prefix>
<div v-if="column.key === 'status'"> <div v-if="column.key === 'status'">
<TaskStatusIcon :status="item" /> <TaskStatusIcon :status="item" />
@ -51,22 +47,36 @@
/> />
</div> </div>
</template> </template>
<div <template #default="{ label }">
v-if="['modified', 'creation'].includes(column.key)" <div
class="truncate text-base" v-if="['modified', 'creation'].includes(column.key)"
> class="truncate text-base"
<Tooltip :text="item.label"> @click="
<div>{{ item.timeAgo }}</div> (event) => emit('applyFilter', { event, idx, column, item })
</Tooltip> "
</div> >
<div v-else-if="column.type === 'Check'"> <Tooltip :text="item.label">
<FormControl <div>{{ item.timeAgo }}</div>
type="checkbox" </Tooltip>
:modelValue="item" </div>
:disabled="true" <div v-else-if="column.type === 'Check'">
class="text-gray-900" <FormControl
/> type="checkbox"
</div> :modelValue="item"
:disabled="true"
class="text-gray-900"
/>
</div>
<div
v-else
class="truncate text-base"
@click="
(event) => emit('applyFilter', { event, idx, column, item })
"
>
{{ label }}
</div>
</template>
</ListRowItem> </ListRowItem>
</ListRow> </ListRow>
</ListRows> </ListRows>