KanbanGit/resources/js/components/projects/WorkflowEditorDialog.vue

<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { computed, watch } from 'vue';
import {
    destroy,
    destroyStatus,
    store,
    storeStatus,
    update,
    updateStatus,
} from '@/actions/App/Http/Controllers/ProjectBoardSettingsController';
import FormFeedback from '@/components/FormFeedback.vue';
import InputError from '@/components/InputError.vue';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useFormProtection } from '@/composables/useFormProtection';
import { useLocalization } from '@/composables/useLocalization';
import type { WorkflowEditorTarget } from '@/types/project-workflow';

const props = defineProps<{
    projectId: number;
    columnCount: number;
    target: WorkflowEditorTarget | null;
}>();
const emit = defineEmits<{ close: [] }>();
const { t } = useLocalization();
const form = useForm({ name: '', position: 1 });
const protection = useFormProtection(form, {
    isDirty: () => props.target !== null && form.isDirty,
});
const deleting = computed(() => props.target?.action === 'delete');
const title = computed(() => {
    if (props.target?.kind === 'column') {
        return t(
            props.target.action === 'create'
                ? 'workflow.addColumn'
                : props.target.action === 'edit'
                  ? 'workflow.editColumn'
                  : 'workflow.deleteColumn',
        );
    }
    return t(
        props.target?.action === 'create'
            ? 'workflow.addStatus'
            : props.target?.action === 'edit'
              ? 'workflow.editStatus'
              : 'workflow.deleteStatus',
    );
});
const description = computed(() => {
    const target = props.target;
    if (!target) {
        return '';
    }
    if (target.kind === 'column') {
        return t(
            target.action === 'delete'
                ? 'workflow.deleteColumnDescription'
                : target.action === 'create'
                  ? 'workflow.addColumnDescription'
                  : 'workflow.editColumnDescription',
            { name: target.column?.name ?? '' },
        );
    }
    return t(
        target.action === 'delete'
            ? 'workflow.deleteStatusDescription'
            : 'workflow.statusContext',
        {
            name: target.status?.name ?? '',
            context: target.column?.name ?? t('workflow.backlog'),
            replacement: target.replacement?.name ?? '',
        },
    );
});
const otherErrors = computed(() =>
    Object.entries(form.errors)
        .filter(([key]) => !['name', 'position'].includes(key))
        .map(([, message]) => message),
);
watch(
    () => props.target,
    (target) => {
        if (!target) {
            return;
        }
        form.defaults({
            name:
                target.kind === 'column'
                    ? (target.column?.name ?? '')
                    : (target.status?.name ?? ''),
            position: target.column?.position ?? 1,
        });
        form.resetAndClearErrors();
        protection.clearFeedback();
    },
);
function close(open: boolean): void {
    if (open || form.processing || !protection.confirmLeave()) {
        return;
    }
    form.resetAndClearErrors();
    protection.clearFeedback();
    emit('close');
}
function submit(): void {
    const target = props.target;
    if (
        !target ||
        form.processing ||
        (target.kind === 'status' &&
            target.action === 'delete' &&
            !target.replacement)
    ) {
        return;
    }
    const route =
        target.kind === 'column'
            ? target.action === 'create'
                ? store(props.projectId)
                : target.action === 'edit'
                  ? update([props.projectId, target.column.id])
                  : destroy([props.projectId, target.column.id])
            : target.action === 'create'
              ? storeStatus(props.projectId)
              : target.action === 'edit'
                ? updateStatus([props.projectId, target.status.id])
                : destroyStatus([props.projectId, target.status.id]);
    form.transform((data) =>
        target.action === 'delete'
            ? {}
            : target.kind === 'column' && target.action === 'edit'
              ? data
              : target.kind === 'status' && target.action === 'create'
                ? {
                      name: data.name,
                      board_column_id: target.column?.id ?? null,
                  }
                : { name: data.name },
    );
    protection.submit(route, {
        preserveScroll: true,
        onSuccess: () => {
            form.resetAndClearErrors();
            emit('close');
        },
    });
}
</script>

<template>
    <Dialog :open="target !== null" @update:open="close">
        <DialogContent
            :show-close-button="!form.processing"
            @escape-key-down="form.processing && $event.preventDefault()"
            @interact-outside="form.processing && $event.preventDefault()"
        >
            <DialogHeader>
                <DialogTitle>{{ title }}</DialogTitle>
                <DialogDescription class="break-words">{{
                    description
                }}</DialogDescription>
            </DialogHeader>
            <form
                class="gap-column grid min-w-0"
                :aria-busy="form.processing"
                @submit.prevent="submit"
            >
                <FormFeedback :state="protection.state.value" @retry="submit" />
                <InputError
                    v-for="message in otherErrors"
                    :key="message"
                    :message="message"
                />
                <fieldset
                    v-if="!deleting"
                    :disabled="form.processing"
                    class="grid min-w-0 gap-4"
                >
                    <div class="grid gap-2">
                        <Label for="workflow-name">{{
                            t(
                                target?.kind === 'column'
                                    ? 'workflow.columnName'
                                    : 'workflow.statusName',
                            )
                        }}</Label>
                        <Input
                            id="workflow-name"
                            v-model="form.name"
                            name="name"
                            required
                            maxlength="255"
                            :aria-invalid="!!form.errors.name"
                            :aria-describedby="
                                form.errors.name
                                    ? 'workflow-name-error'
                                    : undefined
                            "
                        />
                        <InputError
                            id="workflow-name-error"
                            :message="form.errors.name"
                        />
                    </div>
                    <div
                        v-if="
                            target?.kind === 'column' &&
                            target.action === 'edit'
                        "
                        class="grid gap-2"
                    >
                        <Label for="workflow-position">{{
                            t('workflow.position')
                        }}</Label>
                        <Input
                            id="workflow-position"
                            v-model="form.position"
                            name="position"
                            type="number"
                            min="1"
                            :max="columnCount"
                            step="1"
                            required
                            :aria-invalid="!!form.errors.position"
                            aria-describedby="workflow-position-help workflow-position-error"
                        />
                        <p
                            id="workflow-position-help"
                            class="text-caption text-muted-foreground"
                        >
                            {{
                                t('workflow.positionHelp', {
                                    count: columnCount,
                                })
                            }}
                        </p>
                        <InputError
                            id="workflow-position-error"
                            :message="form.errors.position"
                        />
                    </div>
                </fieldset>
                <DialogFooter>
                    <Button
                        type="button"
                        variant="outline"
                        :disabled="form.processing"
                        @click="close(false)"
                        >{{ t('common.cancel') }}</Button
                    >
                    <Button
                        type="submit"
                        :variant="deleting ? 'destructive' : 'default'"
                        :loading="form.processing"
                        >{{
                            deleting
                                ? t('workflow.confirmDelete')
                                : target?.action === 'create'
                                  ? title
                                  : t('common.save')
                        }}</Button
                    >
                </DialogFooter>
            </form>
        </DialogContent>
    </Dialog>
</template>