warren creation / edit / deletion

frontend/components/admin/CreateWarrenDialog.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/yup';
+import { useForm } from 'vee-validate';
+import { createWarren } from '~/lib/api/admin/createWarren';
+import { createWarrenSchema } from '~/lib/schemas/admin';
+
+const adminStore = useAdminStore();
+const creating = ref(false);
+
+function close() {
+    adminStore.closeCreateWarrenDialog();
+    form.resetForm();
+}
+
+const form = useForm({
+    validationSchema: toTypedSchema(createWarrenSchema),
+});
+
+const onSubmit = form.handleSubmit(async (values) => {
+    if (creating.value) {
+        return;
+    }
+
+    creating.value = true;
+
+    const result = await createWarren(values.name, values.path);
+
+    creating.value = false;
+
+    if (result.success) {
+        close();
+    }
+});
+</script>
+<template>
+    <AlertDialog :open="adminStore.createWarrenDialogOpen">
+        <AlertDialogTrigger><slot /></AlertDialogTrigger>
+        <AlertDialogContent @escape-key-down="close">
+            <AlertDialogHeader>
+                <AlertDialogTitle>Create warren</AlertDialogTitle>
+                <AlertDialogDescription>
+                    Enter a name and an absolute file path to create a new
+                    warren
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+
+            <form
+                id="create-warren-form"
+                class="flex flex-col gap-2"
+                @submit.prevent="onSubmit"
+            >
+                <FormField v-slot="{ componentField }" name="name">
+                    <FormItem>
+                        <FormLabel>Name</FormLabel>
+                        <FormControl>
+                            <Input
+                                v-bind="componentField"
+                                id="name"
+                                type="text"
+                                placeholder="my-warren"
+                                autocomplete="off"
+                                data-1p-ignore
+                                data-protonpass-ignore
+                                data-bwignore
+                            />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="path">
+                    <FormItem>
+                        <FormLabel>File path</FormLabel>
+                        <FormControl>
+                            <Input
+                                v-bind="componentField"
+                                id="path"
+                                type="text"
+                                placeholder="/mywarren"
+                                autocomplete="off"
+                                data-1p-ignore
+                                data-protonpass-ignore
+                                data-bwignore
+                            />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+            </form>
+
+            <AlertDialogFooter class="gap-y-0">
+                <AlertDialogCancel variant="outline" @click="close">
+                    Cancel
+                </AlertDialogCancel>
+                <AlertDialogAction
+                    type="submit"
+                    form="create-warren-form"
+                    :disabled="creating"
+                    >Create</AlertDialogAction
+                >
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>