fix: added task listview and dialog
This commit is contained in:
Shariq Ansari
parent
e06d110cbc
commit
531e5710b8
@ -6,4 +6,55 @@ from frappe.model.document import Document
|
|||||||
|
|
||||||
|
|
||||||
class CRMTask(Document):
|
class CRMTask(Document):
|
||||||
pass
|
@staticmethod
|
||||||
|
def default_list_data():
|
||||||
|
columns = [
|
||||||
|
{
|
||||||
|
'label': 'Title',
|
||||||
|
'type': 'Data',
|
||||||
|
'key': 'title',
|
||||||
|
'width': '12rem',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'label': 'Status',
|
||||||
|
'type': 'Select',
|
||||||
|
'key': 'status',
|
||||||
|
'width': '8rem',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'label': 'Priority',
|
||||||
|
'type': 'Select',
|
||||||
|
'key': 'priority',
|
||||||
|
'width': '8rem',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'label': 'Due Date',
|
||||||
|
'type': 'Date',
|
||||||
|
'key': 'due_date',
|
||||||
|
'width': '8rem',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'label': 'Assigned To',
|
||||||
|
'type': 'Link',
|
||||||
|
'key': 'assigned_to',
|
||||||
|
'width': '10rem',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'label': 'Last Modified',
|
||||||
|
'type': 'Datetime',
|
||||||
|
'key': 'modified',
|
||||||
|
'width': '8rem',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
rows = [
|
||||||
|
"name",
|
||||||
|
"title",
|
||||||
|
"description",
|
||||||
|
"assigned_to",
|
||||||
|
"due_date",
|
||||||
|
"status",
|
||||||
|
"priority",
|
||||||
|
"modified",
|
||||||
|
]
|
||||||
|
return {'columns': columns, 'rows': rows}
|
||||||
|
|||||||
164
frontend/src/components/ListViews/TasksListView.vue
Normal file
164
frontend/src/components/ListViews/TasksListView.vue
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
<template>
|
||||||
|
<ListView
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:options="{
|
||||||
|
onRowClick: (row) => emit('showTask', row.name),
|
||||||
|
selectable: options.selectable,
|
||||||
|
}"
|
||||||
|
row-key="name"
|
||||||
|
>
|
||||||
|
<ListHeader class="mx-5" />
|
||||||
|
<ListRows id="list-rows">
|
||||||
|
<ListRow
|
||||||
|
class="mx-5"
|
||||||
|
v-for="row in rows"
|
||||||
|
:key="row.name"
|
||||||
|
v-slot="{ column, item }"
|
||||||
|
:row="row"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="column.key === 'due_date'"
|
||||||
|
class="flex items-center gap-2 text-base"
|
||||||
|
>
|
||||||
|
<CalendarIcon />
|
||||||
|
<div v-if="item">
|
||||||
|
<Tooltip :text="dateFormat(item, 'ddd, MMM D, YYYY')">
|
||||||
|
{{ dateFormat(item, 'D MMM') }}
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ListRowItem v-else :item="item">
|
||||||
|
<template #prefix>
|
||||||
|
<div v-if="column.key === 'status'">
|
||||||
|
<TaskStatusIcon :status="item" />
|
||||||
|
</div>
|
||||||
|
<div v-else-if="column.key === 'priority'">
|
||||||
|
<TaskPriorityIcon :priority="item" />
|
||||||
|
</div>
|
||||||
|
<div v-else-if="column.key === 'assigned_to'">
|
||||||
|
<Avatar
|
||||||
|
v-if="item.full_name"
|
||||||
|
class="flex items-center"
|
||||||
|
:image="item.user_image"
|
||||||
|
:label="item.full_name"
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div
|
||||||
|
v-if="['modified', 'creation'].includes(column.key)"
|
||||||
|
class="truncate text-base"
|
||||||
|
>
|
||||||
|
{{ item.timeAgo }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="column.type === 'Check'">
|
||||||
|
<FormControl
|
||||||
|
type="checkbox"
|
||||||
|
:modelValue="item"
|
||||||
|
:disabled="true"
|
||||||
|
class="text-gray-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ListRowItem>
|
||||||
|
</ListRow>
|
||||||
|
</ListRows>
|
||||||
|
<ListSelectBanner>
|
||||||
|
<template #actions="{ selections, unselectAll }">
|
||||||
|
<Button
|
||||||
|
theme="red"
|
||||||
|
variant="subtle"
|
||||||
|
label="Delete"
|
||||||
|
@click="deleteTask(selections, unselectAll)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</ListSelectBanner>
|
||||||
|
</ListView>
|
||||||
|
<ListFooter
|
||||||
|
class="border-t px-5 py-2"
|
||||||
|
v-model="pageLengthCount"
|
||||||
|
:options="{
|
||||||
|
rowCount: options.rowCount,
|
||||||
|
totalCount: options.totalCount,
|
||||||
|
}"
|
||||||
|
@loadMore="emit('loadMore')"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
|
||||||
|
import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
|
||||||
|
import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
|
||||||
|
import { dateFormat } from '@/utils'
|
||||||
|
import { globalStore } from '@/stores/global'
|
||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
ListView,
|
||||||
|
ListHeader,
|
||||||
|
ListRows,
|
||||||
|
ListRow,
|
||||||
|
ListSelectBanner,
|
||||||
|
ListRowItem,
|
||||||
|
ListFooter,
|
||||||
|
call,
|
||||||
|
Tooltip,
|
||||||
|
} from 'frappe-ui'
|
||||||
|
import { defineModel } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
rows: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
selectable: true,
|
||||||
|
totalCount: 0,
|
||||||
|
rowCount: 0,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['loadMore', 'showTask', 'reload'])
|
||||||
|
|
||||||
|
const pageLengthCount = defineModel()
|
||||||
|
|
||||||
|
const { $dialog } = globalStore()
|
||||||
|
|
||||||
|
function deleteTask(selections, unselectAll) {
|
||||||
|
let title = 'Delete task'
|
||||||
|
let message = 'Are you sure you want to delete this task?'
|
||||||
|
|
||||||
|
if (selections.size > 1) {
|
||||||
|
title = 'Delete tasks'
|
||||||
|
message = 'Are you sure you want to delete these tasks?'
|
||||||
|
}
|
||||||
|
|
||||||
|
$dialog({
|
||||||
|
title: title,
|
||||||
|
message: message,
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
theme: 'red',
|
||||||
|
variant: 'solid',
|
||||||
|
async onClick(close) {
|
||||||
|
for (const selection of selections) {
|
||||||
|
await call('frappe.client.delete', {
|
||||||
|
doctype: 'CRM Task',
|
||||||
|
name: selection,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
close()
|
||||||
|
unselectAll()
|
||||||
|
emit('reload')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
106
frontend/src/pages/Tasks.vue
Normal file
106
frontend/src/pages/Tasks.vue
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
<template>
|
||||||
|
<LayoutHeader>
|
||||||
|
<template #left-header>
|
||||||
|
<Breadcrumbs :items="breadcrumbs" />
|
||||||
|
</template>
|
||||||
|
<template #right-header>
|
||||||
|
<Button variant="solid" label="Create" @click="showTaskModal = true">
|
||||||
|
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</LayoutHeader>
|
||||||
|
<ViewControls
|
||||||
|
v-model="tasks"
|
||||||
|
v-model:loadMore="loadMore"
|
||||||
|
doctype="CRM Task"
|
||||||
|
/>
|
||||||
|
<TasksListView
|
||||||
|
v-if="tasks.data && rows.length"
|
||||||
|
v-model="tasks.data.page_length_count"
|
||||||
|
:rows="rows"
|
||||||
|
:columns="tasks.data.columns"
|
||||||
|
:options="{
|
||||||
|
rowCount: tasks.data.row_count,
|
||||||
|
totalCount: tasks.data.total_count,
|
||||||
|
}"
|
||||||
|
@loadMore="() => loadMore++"
|
||||||
|
@showTask="showTask"
|
||||||
|
@reload="() => tasks.reload()"
|
||||||
|
/>
|
||||||
|
<div v-else-if="tasks.data" class="flex h-full items-center justify-center">
|
||||||
|
<div
|
||||||
|
class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
|
||||||
|
>
|
||||||
|
<EmailIcon class="h-10 w-10" />
|
||||||
|
<span>No Tasks Found</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<TaskModal v-model="showTaskModal" v-model:reloadTasks="tasks" :task="task" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import EmailIcon from '@/components/Icons/EmailIcon.vue'
|
||||||
|
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||||
|
import ViewControls from '@/components/ViewControls.vue'
|
||||||
|
import TasksListView from '@/components/ListViews/TasksListView.vue'
|
||||||
|
import TaskModal from '@/components/Modals/TaskModal.vue'
|
||||||
|
import { usersStore } from '@/stores/users'
|
||||||
|
import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
|
||||||
|
import { Breadcrumbs } from 'frappe-ui'
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
|
const breadcrumbs = [{ label: 'Tasks', route: { name: 'Tasks' } }]
|
||||||
|
|
||||||
|
const { getUser } = usersStore()
|
||||||
|
|
||||||
|
// tasks data is loaded in the ViewControls component
|
||||||
|
const tasks = ref({})
|
||||||
|
const loadMore = ref(1)
|
||||||
|
|
||||||
|
const rows = computed(() => {
|
||||||
|
if (!tasks.value?.data?.data) return []
|
||||||
|
return tasks.value?.data.data.map((task) => {
|
||||||
|
let _rows = {}
|
||||||
|
tasks.value?.data.rows.forEach((row) => {
|
||||||
|
_rows[row] = task[row]
|
||||||
|
|
||||||
|
if (['modified', 'creation'].includes(row)) {
|
||||||
|
_rows[row] = {
|
||||||
|
label: dateFormat(task[row], dateTooltipFormat),
|
||||||
|
timeAgo: timeAgo(task[row]),
|
||||||
|
}
|
||||||
|
} else if (row == 'assigned_to') {
|
||||||
|
_rows[row] = {
|
||||||
|
label: task.assigned_to && getUser(task.assigned_to).full_name,
|
||||||
|
...(task.assigned_to && getUser(task.assigned_to)),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return _rows
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const showTaskModal = ref(false)
|
||||||
|
|
||||||
|
const task = ref({
|
||||||
|
title: '',
|
||||||
|
description: '',
|
||||||
|
assigned_to: '',
|
||||||
|
due_date: '',
|
||||||
|
status: 'Backlog',
|
||||||
|
priority: 'Low',
|
||||||
|
})
|
||||||
|
|
||||||
|
function showTask(name) {
|
||||||
|
let t = rows.value?.find((row) => row.name === name)
|
||||||
|
task.value = {
|
||||||
|
title: t.title,
|
||||||
|
description: t.description,
|
||||||
|
assigned_to: t.assigned_to?.email || '',
|
||||||
|
due_date: t.due_date,
|
||||||
|
status: t.status,
|
||||||
|
priority: t.priority,
|
||||||
|
}
|
||||||
|
showTaskModal.value = true
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user