warren creation / edit / deletion

frontend/components/admin/DeleteWarrenDialog.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { Input } from '@/components/ui/input';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { deleteWarren } from '~/lib/api/admin/deleteWarren';
+import type { AdminWarrenData } from '~/shared/types/warrens';
+
+const adminStore = useAdminStore();
+// We'll only update this value if there is a warren to prevent layout shifts on close
+const warren = ref<AdminWarrenData>();
+const deleting = ref(false);
+
+const confirmPath = ref<string>('');
+const confirmPathInput = ref<InstanceType<typeof Input>>();
+
+const pathMatches = computed(
+    () => warren.value != null && warren.value.path === confirmPath.value
+);
+
+adminStore.$subscribe(async (_mutation, state) => {
+    if (state.deleteWarrenDialog != null) {
+        warren.value = state.deleteWarrenDialog?.warren;
+        setTimeout(() => confirmPathInput.value?.domRef?.focus(), 25);
+    }
+});
+
+function close() {
+    confirmPath.value = '';
+    adminStore.closeDeleteWarrenDialog();
+}
+
+async function submit() {
+    if (deleting.value || adminStore.deleteWarrenDialog == null) {
+        return;
+    }
+
+    deleting.value = true;
+
+    const { success } = await deleteWarren(
+        adminStore.deleteWarrenDialog.warren.id
+    );
+
+    if (success) {
+        close();
+    }
+
+    deleting.value = false;
+}
+</script>
+
+<template>
+    <AlertDialog :open="adminStore.deleteWarrenDialog != null">
+        <AlertDialogTrigger as-child>
+            <slot />
+        </AlertDialogTrigger>
+        <AlertDialogContent @escape-key-down="close">
+            <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription class="space-y-1">
+                    <p>
+                        This action cannot be undone. This will permanently
+                        delete the warren. The contained files will be left
+                        unchanged.
+                    </p>
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlterDialogContent v-if="warren != null">
+                <div class="flex flex-col gap-4">
+                    <AdminWarrenListing :warren />
+                    <div class="flex flex-col gap-1">
+                        <p
+                            :class="[
+                                'tight text-sm',
+                                pathMatches
+                                    ? 'text-muted-foreground'
+                                    : 'text-destructive-foreground',
+                            ]"
+                        >
+                            Enter the warren's path to continue
+                        </p>
+                        <Input
+                            ref="confirmPathInput"
+                            v-model="confirmPath"
+                            type="text"
+                            :placeholder="warren.path"
+                            autocomplete="off"
+                            data-1p-ignore
+                            data-protonpass-ignore
+                            data-bwignore
+                        />
+                    </div>
+                </div>
+            </AlterDialogContent>
+            <AlertDialogFooter class="gap-y-0">
+                <AlertDialogCancel @click="close">Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                    :disabled="!pathMatches || deleting"
+                    @click="submit"
+                    >Delete</AlertDialogAction
+                >
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>