file uploads

frontend/components/actions/CreateDirectoryDialog.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import {
+    Dialog,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+} from '@/components/ui/dialog';
+import { createDirectory } from '~/lib/api/warrens';
+
+const warrenRoute = useWarrenRoute();
+
+const creating = ref(false);
+const open = ref(false);
+const directoryName = ref('');
+
+async function submit() {
+    creating.value = true;
+
+    const { success } = await createDirectory(
+        warrenRoute.value,
+        directoryName.value
+    );
+
+    creating.value = false;
+
+    if (success) {
+        directoryName.value = '';
+        open.value = false;
+    }
+}
+</script>
+
+<template>
+    <Dialog v-model:open="open">
+        <DialogTrigger as-child>
+            <slot />
+        </DialogTrigger>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Create a directory</DialogTitle>
+                <DialogDescription
+                    >Give your directory a memorable name</DialogDescription
+                >
+            </DialogHeader>
+
+            <Input
+                v-model="directoryName"
+                type="text"
+                name="directory-name"
+                placeholder="my-awesome-directory"
+                minlength="20"
+                maxlength="30"
+                aria-required="true"
+                autocomplete="off"
+                required
+            />
+
+            <DialogFooter>
+                <Button :disabled="creating" @click="submit">Create</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>