107 lines
3.9 KiB
Vue
107 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { Pencil, Plus, Trash2 } from 'lucide-vue-next';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
import type { BoardColumnModel } from '@/types/models/board-column-model';
|
|
import type { TicketStatusModel } from '@/types/models/ticket-status-model';
|
|
import type { WorkflowEditorTarget } from '@/types/project-workflow';
|
|
|
|
defineProps<{
|
|
column: BoardColumnModel | null;
|
|
statuses: TicketStatusModel[];
|
|
}>();
|
|
defineEmits<{ edit: [target: WorkflowEditorTarget] }>();
|
|
const { t } = useLocalization();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid min-w-0 gap-3">
|
|
<ul
|
|
class="divide-y"
|
|
:aria-label="
|
|
t('workflow.statusesIn', {
|
|
context: column?.name ?? t('workflow.backlog'),
|
|
})
|
|
"
|
|
>
|
|
<li
|
|
v-for="status in statuses"
|
|
:key="status.id"
|
|
class="flex min-w-0 flex-wrap items-center justify-between gap-2 py-3 first:pt-0"
|
|
>
|
|
<span
|
|
class="min-w-0 flex-1 basis-28 break-words text-sm font-medium"
|
|
>{{ status.name }}</span
|
|
>
|
|
<div class="flex shrink-0 gap-1">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
:aria-label="
|
|
t('workflow.renameStatus', { name: status.name })
|
|
"
|
|
@click="
|
|
$emit('edit', {
|
|
kind: 'status',
|
|
action: 'edit',
|
|
column,
|
|
status,
|
|
})
|
|
"
|
|
><Pencil class="size-4" aria-hidden="true"
|
|
/></Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
class="text-destructive"
|
|
:disabled="statuses.length <= 1"
|
|
:aria-label="
|
|
t('workflow.removeStatus', { name: status.name })
|
|
"
|
|
:aria-describedby="
|
|
statuses.length <= 1
|
|
? `status-protection-${column?.id ?? 'backlog'}`
|
|
: undefined
|
|
"
|
|
@click="
|
|
$emit('edit', {
|
|
kind: 'status',
|
|
action: 'delete',
|
|
column,
|
|
status,
|
|
replacement: statuses.find(
|
|
(item) => item.id !== status.id,
|
|
),
|
|
})
|
|
"
|
|
><Trash2 class="size-4" aria-hidden="true"
|
|
/></Button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<p
|
|
v-if="statuses.length <= 1"
|
|
:id="`status-protection-${column?.id ?? 'backlog'}`"
|
|
class="text-caption text-muted-foreground"
|
|
>
|
|
{{ t('workflow.lastStatus') }}
|
|
</p>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
class="w-full sm:w-fit"
|
|
:aria-label="
|
|
t('workflow.addStatusTo', {
|
|
context: column?.name ?? t('workflow.backlog'),
|
|
})
|
|
"
|
|
@click="$emit('edit', { kind: 'status', action: 'create', column })"
|
|
><Plus class="size-4" aria-hidden="true" />{{
|
|
t('workflow.addStatus')
|
|
}}</Button
|
|
>
|
|
</div>
|
|
</template>
|