4ce0214ec9
All checks were successful
Auto Tag Develop / tag (push) Successful in 6s
- Add dark mode toggle button in top nav - Add darkMode store with localStorage persistence - Enable Tailwind class-based dark mode - Import dark.css global overrides - Remove inline dark: Tailwind classes (handled by global CSS) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
533 lines
19 KiB
Vue
533 lines
19 KiB
Vue
<script setup lang="ts">
|
|
import type { Task } from '~/services/dto/task'
|
|
import type { TaskStatus } from '~/services/dto/task-status'
|
|
import type { TaskEffort } from '~/services/dto/task-effort'
|
|
import type { TaskPriority } from '~/services/dto/task-priority'
|
|
import type { TaskTag } from '~/services/dto/task-tag'
|
|
import type { TaskGroup } from '~/services/dto/task-group'
|
|
import type { UserData } from '~/services/dto/user-data'
|
|
import type { Project } from '~/services/dto/project'
|
|
import { useTaskService } from '~/services/tasks'
|
|
import { useTaskStatusService } from '~/services/task-statuses'
|
|
import { useTaskEffortService } from '~/services/task-efforts'
|
|
import { useTaskPriorityService } from '~/services/task-priorities'
|
|
import { useTaskTagService } from '~/services/task-tags'
|
|
import { useTaskGroupService } from '~/services/task-groups'
|
|
import { useUserService } from '~/services/users'
|
|
import { useProjectService } from '~/services/projects'
|
|
|
|
const { t } = useI18n()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const auth = useAuthStore()
|
|
|
|
useHead({ title: t('myTasks.title') })
|
|
|
|
const taskService = useTaskService()
|
|
const statusService = useTaskStatusService()
|
|
const effortService = useTaskEffortService()
|
|
const priorityService = useTaskPriorityService()
|
|
const tagService = useTaskTagService()
|
|
const groupService = useTaskGroupService()
|
|
const userService = useUserService()
|
|
const projectService = useProjectService()
|
|
|
|
const tasks = ref<Task[]>([])
|
|
const statuses = ref<TaskStatus[]>([])
|
|
const efforts = ref<TaskEffort[]>([])
|
|
const priorities = ref<TaskPriority[]>([])
|
|
const tags = ref<TaskTag[]>([])
|
|
const groups = ref<TaskGroup[]>([])
|
|
const users = ref<UserData[]>([])
|
|
const projects = ref<Project[]>([])
|
|
const isLoading = ref(true)
|
|
|
|
// Filters
|
|
const selectedProjectId = ref<number | null>(null)
|
|
const selectedGroupId = ref<number | null>(null)
|
|
const selectedTagId = ref<number | null>(null)
|
|
const selectedPriorityId = ref<number | null>(null)
|
|
const selectedEffortId = ref<number | null>(null)
|
|
const selectedAssigneeId = ref<number | null>(auth.user?.id ?? null)
|
|
|
|
// Sort
|
|
type SortOption = 'default' | 'deadline' | 'scheduledStart'
|
|
const sortBy = ref<SortOption>('default')
|
|
|
|
// View toggle
|
|
const viewMode = ref<'kanban' | 'list'>('kanban')
|
|
|
|
// Bulk selection
|
|
const selectedTaskIds = reactive(new Set<number>())
|
|
|
|
// Modal
|
|
const taskModalOpen = ref(false)
|
|
const selectedTask = ref<Task | null>(null)
|
|
|
|
// Timer
|
|
const timerStore = useTimerStore()
|
|
|
|
function isTimerOnTask(task: Task): boolean {
|
|
const entry = timerStore.activeEntry
|
|
if (!entry?.task) return false
|
|
const entryTaskId = typeof entry.task === 'string'
|
|
? entry.task
|
|
: (entry.task['@id'] ?? entry.task.id)
|
|
const taskId = task['@id'] ?? task.id
|
|
return entryTaskId === taskId || entryTaskId === `/api/tasks/${task.id}`
|
|
}
|
|
|
|
// Filter options
|
|
const projectOptions = computed(() =>
|
|
projects.value.map(p => ({ label: p.name, value: p.id }))
|
|
)
|
|
|
|
const groupOptions = computed(() => {
|
|
let g = groups.value.filter(g => !g.archived)
|
|
if (selectedProjectId.value) {
|
|
g = g.filter(g => g.project?.id === selectedProjectId.value)
|
|
}
|
|
return g.map(g => ({ label: g.title, value: g.id }))
|
|
})
|
|
|
|
const tagOptions = computed(() =>
|
|
tags.value.map(t => ({ label: t.label, value: t.id }))
|
|
)
|
|
|
|
const priorityOptions = computed(() =>
|
|
priorities.value.map(p => ({ label: p.label, value: p.id }))
|
|
)
|
|
|
|
const effortOptions = computed(() =>
|
|
efforts.value.map(e => ({ label: e.label, value: e.id }))
|
|
)
|
|
|
|
const assigneeOptions = computed(() =>
|
|
users.value.map(u => ({ label: u.username, value: u.id }))
|
|
)
|
|
|
|
// Kanban helpers
|
|
const sortedStatuses = computed(() =>
|
|
[...statuses.value].sort((a, b) => a.position - b.position)
|
|
)
|
|
|
|
function tasksByStatus(statusId: number): Task[] {
|
|
return tasks.value.filter(t => t.status?.id === statusId)
|
|
}
|
|
|
|
const backlogTasks = computed(() =>
|
|
tasks.value.filter(t => !t.status)
|
|
)
|
|
|
|
// Data loading
|
|
async function loadReferenceData() {
|
|
const [s, e, pr, tg, g, u, p] = await Promise.all([
|
|
statusService.getAll(),
|
|
effortService.getAll(),
|
|
priorityService.getAll(),
|
|
tagService.getAll(),
|
|
groupService.getAll(),
|
|
userService.getAll(),
|
|
projectService.getAll(),
|
|
])
|
|
statuses.value = s
|
|
efforts.value = e
|
|
priorities.value = pr
|
|
tags.value = tg
|
|
groups.value = g
|
|
users.value = u
|
|
projects.value = p
|
|
}
|
|
|
|
async function loadTasks() {
|
|
const params: Record<string, string | number | boolean | string[]> = {
|
|
archived: false,
|
|
}
|
|
if (selectedAssigneeId.value) {
|
|
params.assignee = `/api/users/${selectedAssigneeId.value}`
|
|
}
|
|
if (selectedProjectId.value) {
|
|
params.project = `/api/projects/${selectedProjectId.value}`
|
|
}
|
|
if (selectedGroupId.value) {
|
|
params.group = `/api/task_groups/${selectedGroupId.value}`
|
|
}
|
|
if (selectedPriorityId.value) {
|
|
params.priority = `/api/task_priorities/${selectedPriorityId.value}`
|
|
}
|
|
if (selectedEffortId.value) {
|
|
params.effort = `/api/task_efforts/${selectedEffortId.value}`
|
|
}
|
|
if (selectedTagId.value) {
|
|
params['tags[]'] = `/api/task_tags/${selectedTagId.value}`
|
|
}
|
|
if (sortBy.value === 'deadline') {
|
|
params['order[deadline]'] = 'asc'
|
|
} else if (sortBy.value === 'scheduledStart') {
|
|
params['order[scheduledStart]'] = 'asc'
|
|
}
|
|
tasks.value = await taskService.getFiltered(params)
|
|
}
|
|
|
|
async function loadAll() {
|
|
isLoading.value = true
|
|
try {
|
|
await Promise.all([loadReferenceData(), loadTasks()])
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
// Watch filters and sort to reload tasks
|
|
watch(
|
|
[selectedProjectId, selectedGroupId, selectedTagId, selectedPriorityId, selectedEffortId, selectedAssigneeId, sortBy],
|
|
() => { loadTasks() },
|
|
)
|
|
|
|
// Reset group when project changes
|
|
watch(selectedProjectId, () => {
|
|
selectedGroupId.value = null
|
|
}, { flush: 'sync' })
|
|
|
|
// Drag & drop
|
|
const dragOverStatusId = ref<number | null>(null)
|
|
const dragCounter = ref(0)
|
|
|
|
function onDragEnter(id: number) {
|
|
dragCounter.value++
|
|
dragOverStatusId.value = id
|
|
}
|
|
|
|
function onDragLeave() {
|
|
dragCounter.value--
|
|
if (dragCounter.value === 0) {
|
|
dragOverStatusId.value = null
|
|
}
|
|
}
|
|
|
|
function onDrop(event: DragEvent) {
|
|
dragCounter.value = 0
|
|
dragOverStatusId.value = null
|
|
return Number(event.dataTransfer!.getData('text/plain'))
|
|
}
|
|
|
|
async function onDropStatus(event: DragEvent, status: TaskStatus) {
|
|
const taskId = onDrop(event)
|
|
const task = tasks.value.find(t => t.id === taskId)
|
|
if (!task || task.status?.id === status.id) return
|
|
task.status = status
|
|
await taskService.update(taskId, { status: `/api/task_statuses/${status.id}` })
|
|
}
|
|
|
|
async function onDropBacklog(event: DragEvent) {
|
|
const taskId = onDrop(event)
|
|
const task = tasks.value.find(t => t.id === taskId)
|
|
if (!task || !task.status) return
|
|
task.status = null
|
|
await taskService.update(taskId, { status: null })
|
|
}
|
|
|
|
// Modal
|
|
function openTaskCreate() {
|
|
selectedTask.value = null
|
|
taskModalOpen.value = true
|
|
router.replace({ query: {} })
|
|
}
|
|
|
|
function openTaskEdit(task: Task) {
|
|
selectedTask.value = task
|
|
taskModalOpen.value = true
|
|
if (task.project?.code && task.number) {
|
|
router.replace({ query: { task: `${task.project.code}-${task.number}` } })
|
|
}
|
|
}
|
|
|
|
watch(taskModalOpen, (open) => {
|
|
if (!open) {
|
|
router.replace({ query: {} })
|
|
}
|
|
})
|
|
|
|
async function onSaved() {
|
|
await loadTasks()
|
|
}
|
|
|
|
function toggleTaskSelect(taskId: number) {
|
|
if (selectedTaskIds.has(taskId)) {
|
|
selectedTaskIds.delete(taskId)
|
|
} else {
|
|
selectedTaskIds.add(taskId)
|
|
}
|
|
}
|
|
|
|
function toggleSelectAll(taskList: Task[]) {
|
|
if (selectedTaskIds.size === taskList.length) {
|
|
selectedTaskIds.clear()
|
|
} else {
|
|
taskList.forEach(t => selectedTaskIds.add(t.id))
|
|
}
|
|
}
|
|
|
|
async function onBulkUpdate(field: string, value: number) {
|
|
const ids = [...selectedTaskIds]
|
|
if (ids.length === 0) return
|
|
const payload: Record<string, unknown> = {}
|
|
if (field === 'status') payload.status = `/api/task_statuses/${value}`
|
|
else if (field === 'assignee') payload.assignee = `/api/users/${value}`
|
|
else if (field === 'priority') payload.priority = `/api/task_priorities/${value}`
|
|
else if (field === 'effort') payload.effort = `/api/task_efforts/${value}`
|
|
else if (field === 'group') payload.group = `/api/task_groups/${value}`
|
|
await Promise.all(ids.map(id => taskService.update(id, payload)))
|
|
selectedTaskIds.clear()
|
|
await loadTasks()
|
|
}
|
|
|
|
async function onBulkArchive() {
|
|
const ids = [...selectedTaskIds]
|
|
if (ids.length === 0) return
|
|
await Promise.all(ids.map(id => taskService.update(id, { archived: true })))
|
|
selectedTaskIds.clear()
|
|
await loadTasks()
|
|
}
|
|
|
|
async function onBulkDelete() {
|
|
const ids = [...selectedTaskIds]
|
|
if (ids.length === 0) return
|
|
await Promise.all(ids.map(id => taskService.remove(id)))
|
|
selectedTaskIds.clear()
|
|
await loadTasks()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await loadAll()
|
|
const taskParam = route.query.task as string | undefined
|
|
if (taskParam) {
|
|
const dashIndex = taskParam.lastIndexOf('-')
|
|
if (dashIndex > 0) {
|
|
const code = taskParam.slice(0, dashIndex)
|
|
const num = Number(taskParam.slice(dashIndex + 1))
|
|
if (num) {
|
|
const task = tasks.value.find(t => t.project?.code === code && t.number === num)
|
|
if (task) {
|
|
openTaskEdit(task)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-w-0">
|
|
<!-- Header + Filters -->
|
|
<div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('myTasks.title') }}</h1>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
class="flex items-center gap-1.5 rounded-lg bg-primary-500 px-3 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-secondary-500"
|
|
@click="openTaskCreate"
|
|
>
|
|
<Icon name="mdi:plus" size="18" />
|
|
{{ $t('myTasks.createTask') }}
|
|
</button>
|
|
<button
|
|
class="flex items-center justify-center rounded-md border p-1.5 transition-colors"
|
|
:class="viewMode === 'list'
|
|
? 'border-primary-500 bg-primary-500 text-white'
|
|
: 'border-primary-500 text-primary-500 hover:bg-primary-50'"
|
|
:title="viewMode === 'list' ? $t('myTasks.viewKanban') : $t('myTasks.viewList')"
|
|
@click="viewMode = viewMode === 'kanban' ? 'list' : 'kanban'"
|
|
>
|
|
<Icon name="mdi:format-list-bulleted" size="20" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 flex flex-wrap gap-3">
|
|
<MalioSelect
|
|
v-model="selectedProjectId"
|
|
:options="projectOptions"
|
|
label="Projet"
|
|
:empty-option-label="$t('myTasks.allProjects')"
|
|
min-width="!w-40"
|
|
text-field="text-sm"
|
|
text-value="text-sm"
|
|
/>
|
|
<MalioSelect
|
|
v-model="selectedGroupId"
|
|
:options="groupOptions"
|
|
label="Groupe"
|
|
:empty-option-label="$t('myTasks.allGroups')"
|
|
min-width="!w-40"
|
|
text-field="text-sm"
|
|
text-value="text-sm"
|
|
/>
|
|
<MalioSelect
|
|
v-model="selectedTagId"
|
|
:options="tagOptions"
|
|
label="Type"
|
|
:empty-option-label="$t('myTasks.allTypes')"
|
|
min-width="!w-40"
|
|
text-field="text-sm"
|
|
text-value="text-sm"
|
|
/>
|
|
<MalioSelect
|
|
v-model="selectedPriorityId"
|
|
:options="priorityOptions"
|
|
label="Priorité"
|
|
:empty-option-label="$t('myTasks.allPriorities')"
|
|
min-width="!w-40"
|
|
text-field="text-sm"
|
|
text-value="text-sm"
|
|
/>
|
|
<MalioSelect
|
|
v-model="selectedEffortId"
|
|
:options="effortOptions"
|
|
label="Effort"
|
|
:empty-option-label="$t('myTasks.allEfforts')"
|
|
min-width="!w-40"
|
|
text-field="text-sm"
|
|
text-value="text-sm"
|
|
/>
|
|
<MalioSelect
|
|
v-model="selectedAssigneeId"
|
|
:options="assigneeOptions"
|
|
label="Assigné"
|
|
:empty-option-label="$t('myTasks.allAssignees')"
|
|
min-width="!w-40"
|
|
text-field="text-sm"
|
|
text-value="text-sm"
|
|
/>
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="text-xs font-semibold text-neutral-500">{{ $t('myTasks.sortBy') }}</span>
|
|
<select
|
|
v-model="sortBy"
|
|
class="rounded-lg border border-neutral-300 bg-white px-2 py-1.5 text-sm text-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
>
|
|
<option value="default">{{ $t('myTasks.sortDefault') }}</option>
|
|
<option value="deadline">{{ $t('myTasks.sortDeadline') }}</option>
|
|
<option value="scheduledStart">{{ $t('myTasks.sortScheduledStart') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kanban View -->
|
|
<div v-if="viewMode === 'kanban'">
|
|
<div class="mt-6 flex h-[calc(100vh-260px)] gap-3 overflow-x-auto pb-4">
|
|
<div
|
|
v-for="status in sortedStatuses"
|
|
:key="status.id"
|
|
class="flex min-w-36 flex-1 flex-col rounded-lg transition-colors"
|
|
:class="dragOverStatusId === status.id ? 'bg-neutral-200' : 'bg-neutral-50'"
|
|
@dragover.prevent
|
|
@dragenter.prevent="onDragEnter(status.id)"
|
|
@dragleave="onDragLeave"
|
|
@drop.prevent="onDropStatus($event, status)"
|
|
>
|
|
<div
|
|
class="shrink-0 rounded-t-lg px-4 py-3 text-sm font-bold text-white"
|
|
:style="{ backgroundColor: status.color }"
|
|
>
|
|
{{ status.label }} ({{ tasksByStatus(status.id).length }})
|
|
</div>
|
|
<div class="min-h-0 flex-1 overflow-y-auto p-3">
|
|
<div class="flex flex-col gap-3">
|
|
<TaskCard
|
|
v-for="task in tasksByStatus(status.id)"
|
|
:key="task.id"
|
|
:task="task"
|
|
show-project-color
|
|
@click="openTaskEdit(task)"
|
|
/>
|
|
<p
|
|
v-if="tasksByStatus(status.id).length === 0"
|
|
class="py-4 text-center text-xs text-neutral-400"
|
|
>
|
|
{{ $t('myTasks.noTasks') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backlog below kanban -->
|
|
<div
|
|
class="mt-8 rounded-lg p-4 transition-colors"
|
|
:class="dragOverStatusId === 0 ? 'bg-neutral-200' : 'bg-neutral-50'"
|
|
@dragover.prevent
|
|
@dragenter.prevent="onDragEnter(0)"
|
|
@dragleave="onDragLeave"
|
|
@drop.prevent="onDropBacklog($event)"
|
|
>
|
|
<h2 class="text-lg font-bold text-neutral-900">{{ $t('myTasks.backlog') }} ({{ backlogTasks.length }})</h2>
|
|
<div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
<TaskCard
|
|
v-for="task in backlogTasks"
|
|
:key="task.id"
|
|
:task="task"
|
|
show-project-color
|
|
@click="openTaskEdit(task)"
|
|
/>
|
|
</div>
|
|
<p
|
|
v-if="backlogTasks.length === 0"
|
|
class="py-4 text-center text-xs text-neutral-400"
|
|
>
|
|
{{ $t('myTasks.noTasks') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- List View -->
|
|
<div v-if="viewMode === 'list'" class="mt-6 flex flex-col gap-2.5 rounded-[10px] bg-tertiary-500 p-2.5">
|
|
<TaskBulkActions
|
|
:selected-count="selectedTaskIds.size"
|
|
:total-count="tasks.length"
|
|
:all-selected="tasks.length > 0 && selectedTaskIds.size === tasks.length"
|
|
:some-selected="selectedTaskIds.size > 0 && selectedTaskIds.size < tasks.length"
|
|
:statuses="statuses"
|
|
:users="users"
|
|
:priorities="priorities"
|
|
:efforts="efforts"
|
|
:groups="groups"
|
|
@toggle-all="toggleSelectAll(tasks)"
|
|
@bulk-update="onBulkUpdate"
|
|
@bulk-archive="onBulkArchive"
|
|
@bulk-delete="onBulkDelete"
|
|
/>
|
|
<TaskListItem
|
|
v-for="task in tasks"
|
|
:key="task.id"
|
|
:task="task"
|
|
show-project-color
|
|
:selected="selectedTaskIds.has(task.id)"
|
|
@click="openTaskEdit(task)"
|
|
@toggle-select="toggleTaskSelect"
|
|
/>
|
|
<p
|
|
v-if="tasks.length === 0 && !isLoading"
|
|
class="py-8 text-center text-sm text-neutral-400"
|
|
>
|
|
{{ $t('myTasks.noTasks') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- TaskModal -->
|
|
<TaskModal
|
|
v-model="taskModalOpen"
|
|
:task="selectedTask"
|
|
:project-id="selectedTask?.project?.id ?? 0"
|
|
:statuses="statuses"
|
|
:efforts="efforts"
|
|
:priorities="priorities"
|
|
:tags="tags"
|
|
:groups="selectedTask?.project?.id ? groups.filter(g => g.project?.id === selectedTask?.project?.id) : groups"
|
|
:users="users"
|
|
:projects="projects"
|
|
@saved="onSaved"
|
|
/>
|
|
</div>
|
|
</template>
|