feat(workflow) : admin UI - WorkflowDrawer + AdminWorkflowTab + remplacement onglet Statuts, suppression composants obsolètes
This commit is contained in:
@@ -1,140 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h2 class="text-lg font-bold text-neutral-900">Statuts</h2>
|
|
||||||
<MalioButton
|
|
||||||
icon-name="mdi:plus"
|
|
||||||
icon-position="left"
|
|
||||||
button-class="w-auto px-4"
|
|
||||||
label="Ajouter un statut"
|
|
||||||
@click="openCreate"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DataTable
|
|
||||||
:columns="columns"
|
|
||||||
:items="items"
|
|
||||||
:loading="isLoading"
|
|
||||||
empty-message="Aucun statut trouvé."
|
|
||||||
deletable
|
|
||||||
@row-click="openEdit"
|
|
||||||
@delete="requestDelete"
|
|
||||||
>
|
|
||||||
<template #cell-color="{ item }">
|
|
||||||
<span
|
|
||||||
class="inline-block h-6 w-6 rounded-full"
|
|
||||||
:style="{ backgroundColor: item.color }"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</DataTable>
|
|
||||||
|
|
||||||
<TaskStatusDrawer
|
|
||||||
v-model="drawerOpen"
|
|
||||||
:item="selectedItem"
|
|
||||||
@saved="onSaved"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ConfirmDeleteStatusModal
|
|
||||||
v-model="confirmModalOpen"
|
|
||||||
:status-label="statusToDelete?.label ?? ''"
|
|
||||||
:task-count="affectedTaskCount"
|
|
||||||
:available-statuses="reassignTargets"
|
|
||||||
@confirm="onConfirmDelete"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { TaskStatus } from '~/services/dto/task-status'
|
|
||||||
import type { Task } from '~/services/dto/task'
|
|
||||||
import { useTaskStatusService } from '~/services/task-statuses'
|
|
||||||
import { useTaskService } from '~/services/tasks'
|
|
||||||
|
|
||||||
import type { DataTableColumn } from '~/components/ui/DataTable.vue'
|
|
||||||
|
|
||||||
const columns: DataTableColumn[] = [
|
|
||||||
{ key: 'label', label: 'Libellé', primary: true },
|
|
||||||
{ key: 'color', label: 'Couleur' },
|
|
||||||
{ key: 'position', label: 'Position', class: 'text-neutral-700' },
|
|
||||||
]
|
|
||||||
|
|
||||||
const statusService = useTaskStatusService()
|
|
||||||
const taskService = useTaskService()
|
|
||||||
|
|
||||||
const items = ref<TaskStatus[]>([])
|
|
||||||
const tasks = ref<Task[]>([])
|
|
||||||
const isLoading = ref(true)
|
|
||||||
const drawerOpen = ref(false)
|
|
||||||
const selectedItem = ref<TaskStatus | null>(null)
|
|
||||||
const confirmModalOpen = ref(false)
|
|
||||||
const statusToDelete = ref<TaskStatus | null>(null)
|
|
||||||
|
|
||||||
const affectedTaskCount = computed(() => {
|
|
||||||
if (!statusToDelete.value) return 0
|
|
||||||
return tasks.value.filter(t => t.status?.id === statusToDelete.value!.id).length
|
|
||||||
})
|
|
||||||
|
|
||||||
const reassignTargets = computed(() => {
|
|
||||||
if (!statusToDelete.value) return items.value
|
|
||||||
return items.value.filter(s => s.id !== statusToDelete.value!.id)
|
|
||||||
})
|
|
||||||
|
|
||||||
async function loadItems() {
|
|
||||||
isLoading.value = true
|
|
||||||
try {
|
|
||||||
const [statuses, allTasks] = await Promise.all([
|
|
||||||
statusService.getAll(),
|
|
||||||
taskService.getAll(),
|
|
||||||
])
|
|
||||||
items.value = statuses
|
|
||||||
tasks.value = allTasks
|
|
||||||
} finally {
|
|
||||||
isLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function openCreate() {
|
|
||||||
selectedItem.value = null
|
|
||||||
drawerOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
function openEdit(item: TaskStatus) {
|
|
||||||
selectedItem.value = item
|
|
||||||
drawerOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
async function requestDelete(item: TaskStatus) {
|
|
||||||
statusToDelete.value = item
|
|
||||||
const count = tasks.value.filter(t => t.status?.id === item.id).length
|
|
||||||
if (count === 0) {
|
|
||||||
await statusService.remove(item.id)
|
|
||||||
await loadItems()
|
|
||||||
} else {
|
|
||||||
confirmModalOpen.value = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function onConfirmDelete(targetStatusId: number | null) {
|
|
||||||
if (!statusToDelete.value) return
|
|
||||||
|
|
||||||
const affectedTasks = tasks.value.filter(t => t.status?.id === statusToDelete.value!.id)
|
|
||||||
const statusIri = targetStatusId ? `/api/task_statuses/${targetStatusId}` : null
|
|
||||||
|
|
||||||
await Promise.all(
|
|
||||||
affectedTasks.map(t => taskService.update(t.id, { status: statusIri }))
|
|
||||||
)
|
|
||||||
|
|
||||||
await statusService.remove(statusToDelete.value.id)
|
|
||||||
confirmModalOpen.value = false
|
|
||||||
statusToDelete.value = null
|
|
||||||
await loadItems()
|
|
||||||
}
|
|
||||||
|
|
||||||
async function onSaved() {
|
|
||||||
await loadItems()
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
loadItems()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
100
frontend/components/admin/AdminWorkflowTab.vue
Normal file
100
frontend/components/admin/AdminWorkflowTab.vue
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h2 class="text-lg font-bold text-neutral-900">{{ $t('workflows.title') }}</h2>
|
||||||
|
<MalioButton
|
||||||
|
icon-name="mdi:plus"
|
||||||
|
icon-position="left"
|
||||||
|
button-class="w-auto px-4"
|
||||||
|
:label="$t('workflows.addWorkflow')"
|
||||||
|
@click="openCreate"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
:columns="columns"
|
||||||
|
:items="items"
|
||||||
|
:loading="isLoading"
|
||||||
|
empty-message="Aucun workflow trouvé."
|
||||||
|
deletable
|
||||||
|
@row-click="openEdit"
|
||||||
|
@delete="requestDelete"
|
||||||
|
>
|
||||||
|
<template #cell-isDefault="{ item }">
|
||||||
|
<span
|
||||||
|
v-if="item.isDefault"
|
||||||
|
class="rounded bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700"
|
||||||
|
>
|
||||||
|
{{ $t('workflows.isDefault') }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<template #cell-statusCount="{ item }">
|
||||||
|
{{ item.statuses.length }}
|
||||||
|
</template>
|
||||||
|
</DataTable>
|
||||||
|
|
||||||
|
<WorkflowDrawer
|
||||||
|
v-model="drawerOpen"
|
||||||
|
:item="selectedItem"
|
||||||
|
@saved="onSaved"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { Workflow } from '~/services/dto/workflow'
|
||||||
|
import { useWorkflowService } from '~/services/workflows'
|
||||||
|
import type { DataTableColumn } from '~/components/ui/DataTable.vue'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const columns: DataTableColumn[] = [
|
||||||
|
{ key: 'name', label: t('workflows.name'), primary: true },
|
||||||
|
{ key: 'isDefault', label: t('workflows.isDefault') },
|
||||||
|
{ key: 'statusCount', label: t('workflows.statuses') },
|
||||||
|
{ key: 'position', label: 'Position' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const workflowService = useWorkflowService()
|
||||||
|
|
||||||
|
const items = ref<Workflow[]>([])
|
||||||
|
const isLoading = ref(true)
|
||||||
|
const drawerOpen = ref(false)
|
||||||
|
const selectedItem = ref<Workflow | null>(null)
|
||||||
|
|
||||||
|
async function loadItems() {
|
||||||
|
isLoading.value = true
|
||||||
|
try {
|
||||||
|
items.value = await workflowService.getAll()
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
selectedItem.value = null
|
||||||
|
drawerOpen.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(item: Workflow) {
|
||||||
|
selectedItem.value = item
|
||||||
|
drawerOpen.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function requestDelete(item: Workflow) {
|
||||||
|
try {
|
||||||
|
await workflowService.remove(item.id)
|
||||||
|
await loadItems()
|
||||||
|
} catch {
|
||||||
|
// Toast d'erreur déjà émis par useApi
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSaved() {
|
||||||
|
await loadItems()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadItems()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
259
frontend/components/admin/WorkflowDrawer.vue
Normal file
259
frontend/components/admin/WorkflowDrawer.vue
Normal file
@@ -0,0 +1,259 @@
|
|||||||
|
<template>
|
||||||
|
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('workflows.editWorkflow') : $t('workflows.addWorkflow')">
|
||||||
|
<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
|
||||||
|
<MalioInputText
|
||||||
|
v-model="form.name"
|
||||||
|
:label="$t('workflows.name')"
|
||||||
|
input-class="w-full"
|
||||||
|
:error="touched.name && !form.name.trim() ? $t('workflows.name') + ' requis' : ''"
|
||||||
|
@blur="touched.name = true"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
id="isDefault"
|
||||||
|
v-model="form.isDefault"
|
||||||
|
type="checkbox"
|
||||||
|
class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
|
||||||
|
/>
|
||||||
|
<label for="isDefault" class="text-sm font-medium text-neutral-700">
|
||||||
|
{{ $t('workflows.isDefault') }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-2">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h3 class="text-sm font-bold text-neutral-900">{{ $t('workflows.statuses') }}</h3>
|
||||||
|
<MalioButton
|
||||||
|
type="button"
|
||||||
|
icon-name="mdi:plus"
|
||||||
|
icon-position="left"
|
||||||
|
button-class="w-auto px-3 py-1 text-xs"
|
||||||
|
:label="$t('workflows.addStatus')"
|
||||||
|
@click="addStatus"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3 flex flex-col gap-3">
|
||||||
|
<div
|
||||||
|
v-for="(s, idx) in form.statuses"
|
||||||
|
:key="idx"
|
||||||
|
class="rounded border border-neutral-200 p-3"
|
||||||
|
>
|
||||||
|
<div class="flex items-end gap-2">
|
||||||
|
<MalioInputText
|
||||||
|
v-model="s.label"
|
||||||
|
label="Libellé"
|
||||||
|
input-class="w-full"
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
v-model="s.category"
|
||||||
|
class="h-10 rounded border border-neutral-300 px-2 text-sm"
|
||||||
|
aria-label="Catégorie"
|
||||||
|
>
|
||||||
|
<option v-for="c in categoryOptions" :key="c.value" :value="c.value">
|
||||||
|
{{ c.label }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="h-10 px-2 text-red-600 hover:text-red-800"
|
||||||
|
aria-label="Supprimer"
|
||||||
|
@click="removeStatus(idx)"
|
||||||
|
>
|
||||||
|
<Icon name="mdi:delete" size="20" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 flex items-center gap-3">
|
||||||
|
<ColorPicker v-model="s.color" />
|
||||||
|
<label class="ml-auto flex items-center gap-1 text-xs text-neutral-700">
|
||||||
|
<input v-model="s.isFinal" type="checkbox" class="h-3 w-3" />
|
||||||
|
{{ $t('archive.statusFinal') }}
|
||||||
|
</label>
|
||||||
|
<MalioInputText
|
||||||
|
v-model.number="s.position"
|
||||||
|
label="Position"
|
||||||
|
input-class="!w-16"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4 flex justify-end">
|
||||||
|
<MalioButton
|
||||||
|
label="Enregistrer"
|
||||||
|
button-class="w-auto px-6"
|
||||||
|
:disabled="isSubmitting"
|
||||||
|
@click="handleSubmit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</MalioDrawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { Workflow, StatusCategory } from '~/services/dto/workflow'
|
||||||
|
import type { TaskStatusWrite } from '~/services/dto/task-status'
|
||||||
|
import { useWorkflowService } from '~/services/workflows'
|
||||||
|
import { useTaskStatusService } from '~/services/task-statuses'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
modelValue: boolean
|
||||||
|
item: Workflow | null
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:modelValue', value: boolean): void
|
||||||
|
(e: 'saved'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const isOpen = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: v => emit('update:modelValue', v),
|
||||||
|
})
|
||||||
|
|
||||||
|
const isEditing = computed(() => !!props.item)
|
||||||
|
const isSubmitting = ref(false)
|
||||||
|
|
||||||
|
type StatusForm = {
|
||||||
|
id?: number
|
||||||
|
label: string
|
||||||
|
color: string
|
||||||
|
position: number
|
||||||
|
isFinal: boolean
|
||||||
|
category: StatusCategory
|
||||||
|
}
|
||||||
|
|
||||||
|
const form = reactive<{
|
||||||
|
name: string
|
||||||
|
isDefault: boolean
|
||||||
|
statuses: StatusForm[]
|
||||||
|
}>({
|
||||||
|
name: '',
|
||||||
|
isDefault: false,
|
||||||
|
statuses: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
const touched = reactive({ name: false })
|
||||||
|
|
||||||
|
const categoryOptions: { value: StatusCategory, label: string }[] = [
|
||||||
|
{ value: 'todo', label: t('workflows.categories.todo') },
|
||||||
|
{ value: 'in_progress', label: t('workflows.categories.in_progress') },
|
||||||
|
{ value: 'blocked', label: t('workflows.categories.blocked') },
|
||||||
|
{ value: 'review', label: t('workflows.categories.review') },
|
||||||
|
{ value: 'done', label: t('workflows.categories.done') },
|
||||||
|
]
|
||||||
|
|
||||||
|
watch(() => props.modelValue, (open) => {
|
||||||
|
if (!open) return
|
||||||
|
if (props.item) {
|
||||||
|
form.name = props.item.name
|
||||||
|
form.isDefault = props.item.isDefault
|
||||||
|
form.statuses = props.item.statuses.map(s => ({
|
||||||
|
id: s.id,
|
||||||
|
label: s.label,
|
||||||
|
color: s.color,
|
||||||
|
position: s.position,
|
||||||
|
isFinal: s.isFinal,
|
||||||
|
category: s.category,
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
form.name = ''
|
||||||
|
form.isDefault = false
|
||||||
|
form.statuses = []
|
||||||
|
}
|
||||||
|
touched.name = false
|
||||||
|
})
|
||||||
|
|
||||||
|
function addStatus() {
|
||||||
|
form.statuses.push({
|
||||||
|
label: '',
|
||||||
|
color: '#222783',
|
||||||
|
position: form.statuses.length,
|
||||||
|
isFinal: false,
|
||||||
|
category: 'todo',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeStatus(idx: number) {
|
||||||
|
form.statuses.splice(idx, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const workflowService = useWorkflowService()
|
||||||
|
const statusService = useTaskStatusService()
|
||||||
|
|
||||||
|
async function handleSubmit() {
|
||||||
|
touched.name = true
|
||||||
|
if (!form.name.trim()) return
|
||||||
|
|
||||||
|
isSubmitting.value = true
|
||||||
|
try {
|
||||||
|
if (isEditing.value && props.item) {
|
||||||
|
await workflowService.update(props.item.id, {
|
||||||
|
name: form.name.trim(),
|
||||||
|
isDefault: form.isDefault,
|
||||||
|
position: props.item.position,
|
||||||
|
})
|
||||||
|
await syncStatuses(props.item)
|
||||||
|
} else {
|
||||||
|
const created = await workflowService.create({
|
||||||
|
name: form.name.trim(),
|
||||||
|
isDefault: form.isDefault,
|
||||||
|
position: 0,
|
||||||
|
})
|
||||||
|
for (const s of form.statuses) {
|
||||||
|
const payload: TaskStatusWrite = {
|
||||||
|
label: s.label,
|
||||||
|
color: s.color,
|
||||||
|
position: s.position,
|
||||||
|
isFinal: s.isFinal,
|
||||||
|
category: s.category,
|
||||||
|
workflow: `/api/workflows/${created.id}`,
|
||||||
|
}
|
||||||
|
await statusService.create(payload)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
emit('saved')
|
||||||
|
isOpen.value = false
|
||||||
|
} finally {
|
||||||
|
isSubmitting.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function syncStatuses(workflow: Workflow) {
|
||||||
|
const existingIds = new Set(workflow.statuses.map(s => s.id))
|
||||||
|
const keptIds = new Set<number>()
|
||||||
|
|
||||||
|
for (const s of form.statuses) {
|
||||||
|
if (s.id) {
|
||||||
|
keptIds.add(s.id)
|
||||||
|
await statusService.update(s.id, {
|
||||||
|
label: s.label,
|
||||||
|
color: s.color,
|
||||||
|
position: s.position,
|
||||||
|
isFinal: s.isFinal,
|
||||||
|
category: s.category,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
await statusService.create({
|
||||||
|
label: s.label,
|
||||||
|
color: s.color,
|
||||||
|
position: s.position,
|
||||||
|
isFinal: s.isFinal,
|
||||||
|
category: s.category,
|
||||||
|
workflow: `/api/workflows/${workflow.id}`,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const id of existingIds) {
|
||||||
|
if (id && !keptIds.has(id)) {
|
||||||
|
await statusService.remove(id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
<template>
|
|
||||||
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('taskStatuses.editStatus') : $t('taskStatuses.addStatus')">
|
|
||||||
<form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
|
|
||||||
<MalioInputText
|
|
||||||
v-model="form.label"
|
|
||||||
label="Libellé"
|
|
||||||
input-class="w-full"
|
|
||||||
:error="touched.label && !form.label.trim() ? 'Le libellé est requis' : ''"
|
|
||||||
@blur="touched.label = true"
|
|
||||||
/>
|
|
||||||
<MalioInputText
|
|
||||||
v-model="form.position"
|
|
||||||
label="Position"
|
|
||||||
input-class="w-full"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
<div class="mt-4">
|
|
||||||
<ColorPicker v-model="form.color" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4 flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
id="isFinal"
|
|
||||||
v-model="form.isFinal"
|
|
||||||
type="checkbox"
|
|
||||||
class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
|
|
||||||
/>
|
|
||||||
<label for="isFinal" class="text-sm font-medium text-neutral-700">
|
|
||||||
{{ $t('archive.statusFinal') }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-6 flex justify-end">
|
|
||||||
<MalioButton
|
|
||||||
label="Enregistrer"
|
|
||||||
button-class="w-auto px-6"
|
|
||||||
:disabled="isSubmitting"
|
|
||||||
@click="handleSubmit"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</MalioDrawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { TaskStatus, TaskStatusWrite } from '~/services/dto/task-status'
|
|
||||||
import { useTaskStatusService } from '~/services/task-statuses'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue: boolean
|
|
||||||
item: TaskStatus | null
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', value: boolean): void
|
|
||||||
(e: 'saved'): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const isOpen = computed({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (v) => emit('update:modelValue', v),
|
|
||||||
})
|
|
||||||
|
|
||||||
const isEditing = computed(() => !!props.item)
|
|
||||||
const isSubmitting = ref(false)
|
|
||||||
|
|
||||||
const form = reactive({
|
|
||||||
label: '',
|
|
||||||
position: '0',
|
|
||||||
color: '#222783',
|
|
||||||
isFinal: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const touched = reactive({
|
|
||||||
label: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(() => props.modelValue, (open) => {
|
|
||||||
if (open) {
|
|
||||||
if (props.item) {
|
|
||||||
form.label = props.item.label ?? ''
|
|
||||||
form.position = String(props.item.position ?? 0)
|
|
||||||
form.color = props.item.color ?? '#222783'
|
|
||||||
form.isFinal = props.item.isFinal ?? false
|
|
||||||
} else {
|
|
||||||
form.label = ''
|
|
||||||
form.position = '0'
|
|
||||||
form.color = '#222783'
|
|
||||||
form.isFinal = false
|
|
||||||
}
|
|
||||||
touched.label = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const { create, update } = useTaskStatusService()
|
|
||||||
|
|
||||||
async function handleSubmit() {
|
|
||||||
touched.label = true
|
|
||||||
if (!form.label.trim()) return
|
|
||||||
|
|
||||||
isSubmitting.value = true
|
|
||||||
try {
|
|
||||||
const payload: TaskStatusWrite = {
|
|
||||||
label: form.label.trim(),
|
|
||||||
position: Number(form.position),
|
|
||||||
color: form.color,
|
|
||||||
isFinal: form.isFinal,
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isEditing.value && props.item) {
|
|
||||||
await update(props.item.id, payload)
|
|
||||||
} else {
|
|
||||||
await create(payload)
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('saved')
|
|
||||||
isOpen.value = false
|
|
||||||
} finally {
|
|
||||||
isSubmitting.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Teleport v-if="modelValue" to="body">
|
|
||||||
<Transition name="modal" appear>
|
|
||||||
<div class="fixed inset-0 z-50 flex items-center justify-center">
|
|
||||||
<div class="absolute inset-0 bg-black/30" @click="cancel" />
|
|
||||||
<div class="relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
|
|
||||||
<h3 class="text-lg font-bold text-neutral-900">{{ $t('taskStatuses.deleteStatus', { label: statusLabel }) }}</h3>
|
|
||||||
|
|
||||||
<p class="mt-3 text-sm text-neutral-600">
|
|
||||||
{{ taskCount > 1 ? $t('taskStatuses.linkedTasksPlural', { count: taskCount }) : $t('taskStatuses.linkedTasks', { count: taskCount }) }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="mt-4">
|
|
||||||
<MalioSelect
|
|
||||||
v-model="targetStatusId"
|
|
||||||
:options="targetOptions"
|
|
||||||
:label="$t('taskStatuses.moveTo')"
|
|
||||||
:empty-option-label="$t('taskStatuses.backlog')"
|
|
||||||
min-width="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-6 flex justify-end gap-3">
|
|
||||||
<MalioButton
|
|
||||||
variant="tertiary"
|
|
||||||
:label="$t('common.cancel')"
|
|
||||||
button-class="w-auto px-4"
|
|
||||||
@click="cancel"
|
|
||||||
/>
|
|
||||||
<MalioButton
|
|
||||||
variant="danger"
|
|
||||||
:label="$t('common.delete')"
|
|
||||||
button-class="w-auto px-4"
|
|
||||||
:disabled="isProcessing"
|
|
||||||
@click="confirm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Transition>
|
|
||||||
</Teleport>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { TaskStatus } from '~/services/dto/task-status'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue: boolean
|
|
||||||
statusLabel: string
|
|
||||||
taskCount: number
|
|
||||||
availableStatuses: TaskStatus[]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', value: boolean): void
|
|
||||||
(e: 'confirm', targetStatusId: number | null): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const targetStatusId = ref<number | null>(null)
|
|
||||||
const isProcessing = ref(false)
|
|
||||||
|
|
||||||
const targetOptions = computed(() =>
|
|
||||||
props.availableStatuses.map(s => ({ label: s.label, value: s.id }))
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(() => props.modelValue, (open) => {
|
|
||||||
if (open) {
|
|
||||||
targetStatusId.value = null
|
|
||||||
isProcessing.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
function cancel() {
|
|
||||||
emit('update:modelValue', false)
|
|
||||||
}
|
|
||||||
|
|
||||||
function confirm() {
|
|
||||||
isProcessing.value = true
|
|
||||||
emit('confirm', targetStatusId.value)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.modal-enter-active,
|
|
||||||
.modal-leave-active {
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-enter-from,
|
|
||||||
.modal-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<AdminClientTab v-if="activeTab === 'clients'" />
|
<AdminClientTab v-if="activeTab === 'clients'" />
|
||||||
<AdminStatusTab v-if="activeTab === 'statuses'" />
|
<AdminWorkflowTab v-if="activeTab === 'workflows'" />
|
||||||
<AdminEffortTab v-if="activeTab === 'efforts'" />
|
<AdminEffortTab v-if="activeTab === 'efforts'" />
|
||||||
<AdminPriorityTab v-if="activeTab === 'priorities'" />
|
<AdminPriorityTab v-if="activeTab === 'priorities'" />
|
||||||
<AdminTagTab v-if="activeTab === 'tags'" />
|
<AdminTagTab v-if="activeTab === 'tags'" />
|
||||||
@@ -40,7 +40,7 @@ useHead({ title: 'Administration' })
|
|||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{ key: 'clients', label: 'Clients' },
|
{ key: 'clients', label: 'Clients' },
|
||||||
{ key: 'statuses', label: 'Statuts' },
|
{ key: 'workflows', label: 'Workflows' },
|
||||||
{ key: 'efforts', label: 'Efforts' },
|
{ key: 'efforts', label: 'Efforts' },
|
||||||
{ key: 'priorities', label: 'Priorités' },
|
{ key: 'priorities', label: 'Priorités' },
|
||||||
{ key: 'tags', label: 'Tags' },
|
{ key: 'tags', label: 'Tags' },
|
||||||
|
|||||||
Reference in New Issue
Block a user