344 lines
12 KiB
Vue
344 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-2xl font-bold text-primary-500">{{ project?.name ?? '' }}</h1>
|
|
<button
|
|
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
|
|
@click="openTaskCreate"
|
|
>
|
|
+ Ajouter un ticket
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-4 flex flex-wrap gap-3">
|
|
<MalioSelect
|
|
v-model="selectedGroupId"
|
|
:options="groupFilterOptions"
|
|
label="Groupe"
|
|
empty-option-label="Tous les groupes"
|
|
min-width="!w-40"
|
|
text-field="text-sm"
|
|
text-value="text-sm"
|
|
/>
|
|
<MalioSelect
|
|
v-model="selectedTagId"
|
|
:options="tagFilterOptions"
|
|
label="Tags"
|
|
empty-option-label="Tous les tags"
|
|
min-width="!w-40"
|
|
text-field="text-sm"
|
|
text-value="text-sm"
|
|
/>
|
|
<MalioSelect
|
|
v-model="selectedAssigneeId"
|
|
:options="userFilterOptions"
|
|
label="User"
|
|
empty-option-label="Tous les users"
|
|
min-width="!w-40"
|
|
text-field="text-sm"
|
|
text-value="text-sm"
|
|
/>
|
|
<MalioSelect
|
|
v-model="selectedStatusId"
|
|
:options="statusFilterOptions"
|
|
label="Status"
|
|
empty-option-label="Tous les status"
|
|
min-width="!w-40"
|
|
text-field="text-sm"
|
|
text-value="text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Kanban -->
|
|
<div class="mt-6 flex gap-4 overflow-x-auto pb-4">
|
|
<div
|
|
v-for="status in statuses"
|
|
:key="status.id"
|
|
class="flex w-72 shrink-0 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="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="flex flex-col gap-3 p-3">
|
|
<TaskCard
|
|
v-for="task in tasksByStatus(status.id)"
|
|
:key="task.id"
|
|
:task="task"
|
|
@click="openTaskEdit(task)"
|
|
/>
|
|
<p
|
|
v-if="tasksByStatus(status.id).length === 0"
|
|
class="py-4 text-center text-xs text-neutral-400"
|
|
>
|
|
Aucun ticket
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backlog -->
|
|
<div
|
|
class="mt-8 rounded-lg p-4 transition-colors"
|
|
:class="dragOverStatusId === 0 ? 'bg-tertiary-600' : 'bg-tertiary-500'"
|
|
@dragover.prevent
|
|
@dragenter.prevent="onDragEnter(0)"
|
|
@dragleave="onDragLeave"
|
|
@drop.prevent="onDropBacklog($event)"
|
|
>
|
|
<h2 class="text-lg font-bold text-neutral-900">Backlog</h2>
|
|
<div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
|
|
<div
|
|
v-for="task in backlogTasks"
|
|
:key="task.id"
|
|
class="flex cursor-pointer items-center justify-between rounded-lg border border-neutral-200 bg-white px-4 py-3 hover:shadow-sm"
|
|
draggable="true"
|
|
@dragstart="onBacklogDragStart($event, task)"
|
|
@dragend="onBacklogDragEnd"
|
|
@click="openTaskEdit(task)"
|
|
>
|
|
<span class="text-sm font-semibold text-neutral-900">{{ task.title }}</span>
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
v-for="tag in task.tags"
|
|
:key="tag.id"
|
|
class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
|
|
:style="{ backgroundColor: tag.color }"
|
|
>
|
|
{{ tag.label }}
|
|
</span>
|
|
<span
|
|
v-if="task.priority"
|
|
class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
|
|
:style="{ backgroundColor: task.priority.color }"
|
|
>
|
|
{{ task.priority.label }}
|
|
</span>
|
|
<span
|
|
v-if="task.effort"
|
|
class="text-sm font-bold text-neutral-700"
|
|
>
|
|
{{ task.effort.label }}
|
|
</span>
|
|
<span
|
|
v-if="task.assignee"
|
|
class="flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-[10px] font-bold text-white"
|
|
:title="task.assignee.username"
|
|
>
|
|
{{ task.assignee.username.substring(0, 2).toUpperCase() }}
|
|
</span>
|
|
<span
|
|
v-else
|
|
class="flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400"
|
|
>
|
|
<Icon name="mdi:account-outline" size="14" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<TaskModal
|
|
v-model="taskDrawerOpen"
|
|
:task="selectedTask"
|
|
:project-id="projectId"
|
|
:statuses="statuses"
|
|
:efforts="efforts"
|
|
:priorities="priorities"
|
|
:tags="tags"
|
|
:groups="groups"
|
|
:users="users"
|
|
@saved="onSaved"
|
|
/>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Project } from '~/services/dto/project'
|
|
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 { useProjectService } from '~/services/projects'
|
|
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'
|
|
|
|
const route = useRoute()
|
|
const projectId = computed(() => Number(route.params.id))
|
|
|
|
useHead({ title: 'Projet' })
|
|
|
|
const projectService = useProjectService()
|
|
const taskService = useTaskService()
|
|
const statusService = useTaskStatusService()
|
|
const effortService = useTaskEffortService()
|
|
const priorityService = useTaskPriorityService()
|
|
const tagService = useTaskTagService()
|
|
const groupService = useTaskGroupService()
|
|
const userService = useUserService()
|
|
|
|
const project = ref<Project | null>(null)
|
|
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 isLoading = ref(true)
|
|
|
|
const selectedGroupId = ref<number | null>(null)
|
|
const selectedTagId = ref<number | null>(null)
|
|
const selectedAssigneeId = ref<number | null>(null)
|
|
const selectedStatusId = ref<number | null>(null)
|
|
const dragOverStatusId = ref<number | null>(null)
|
|
const dragCounter = ref(0)
|
|
const taskDrawerOpen = ref(false)
|
|
const selectedTask = ref<Task | null>(null)
|
|
|
|
const groupFilterOptions = computed(() =>
|
|
groups.value.filter(g => !g.archived).map(g => ({ label: g.title, value: g.id }))
|
|
)
|
|
|
|
const tagFilterOptions = computed(() =>
|
|
tags.value.map(t => ({ label: t.label, value: t.id }))
|
|
)
|
|
|
|
const userFilterOptions = computed(() =>
|
|
users.value.map(u => ({ label: u.username, value: u.id }))
|
|
)
|
|
|
|
const statusFilterOptions = computed(() =>
|
|
statuses.value.map(s => ({ label: s.label, value: s.id }))
|
|
)
|
|
|
|
const filteredTasks = computed(() => {
|
|
let result = tasks.value.filter(t => !t.archived)
|
|
if (selectedGroupId.value) {
|
|
result = result.filter(t => t.group?.id === selectedGroupId.value)
|
|
}
|
|
if (selectedTagId.value) {
|
|
result = result.filter(t => t.tags?.some(tag => tag.id === selectedTagId.value))
|
|
}
|
|
if (selectedAssigneeId.value) {
|
|
result = result.filter(t => t.assignee?.id === selectedAssigneeId.value)
|
|
}
|
|
if (selectedStatusId.value) {
|
|
result = result.filter(t => t.status?.id === selectedStatusId.value)
|
|
}
|
|
return result
|
|
})
|
|
|
|
function tasksByStatus(statusId: number): Task[] {
|
|
return filteredTasks.value.filter(t => t.status?.id === statusId)
|
|
}
|
|
|
|
const backlogTasks = computed(() =>
|
|
filteredTasks.value.filter(t => !t.status)
|
|
)
|
|
|
|
async function loadData() {
|
|
isLoading.value = true
|
|
try {
|
|
const [p, t, s, e, pr, ty, g, u] = await Promise.all([
|
|
projectService.getById(projectId.value),
|
|
taskService.getByProject(projectId.value),
|
|
statusService.getAll(),
|
|
effortService.getAll(),
|
|
priorityService.getAll(),
|
|
tagService.getAll(),
|
|
groupService.getByProject(projectId.value),
|
|
userService.getAll(),
|
|
])
|
|
project.value = p
|
|
tasks.value = t
|
|
statuses.value = s
|
|
efforts.value = e
|
|
priorities.value = pr
|
|
tags.value = ty
|
|
groups.value = g
|
|
users.value = u
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
function openTaskCreate() {
|
|
selectedTask.value = null
|
|
taskDrawerOpen.value = true
|
|
}
|
|
|
|
function openTaskEdit(task: Task) {
|
|
selectedTask.value = task
|
|
taskDrawerOpen.value = true
|
|
}
|
|
|
|
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'))
|
|
}
|
|
|
|
function onBacklogDragStart(event: DragEvent, task: Task) {
|
|
event.dataTransfer!.effectAllowed = 'move'
|
|
event.dataTransfer!.setData('text/plain', String(task.id))
|
|
;(event.target as HTMLElement).classList.add('opacity-50')
|
|
}
|
|
|
|
function onBacklogDragEnd(event: DragEvent) {
|
|
;(event.target as HTMLElement).classList.remove('opacity-50')
|
|
}
|
|
|
|
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 })
|
|
}
|
|
|
|
async function onSaved() {
|
|
await loadData()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadData()
|
|
})
|
|
</script>
|