Add mail dialog component, work on #12

2025-11-11 11:29:17 +01:00
parent 26cb144151
commit 2f9397abea
3 changed files with 126 additions and 28 deletions
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import type { PrimitiveProps } from "reka-ui"
+import { type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+const props = defineProps<DialogRootProps & {
+    title: string,
+    description?: string,
+    recipient?: string
+}>()
+const recipient = ref<string | undefined>(props.recipient)
+const emits = defineEmits<DialogRootEmits & {
+    send: [recipient: string | undefined]
+}>()
+const forwarded = useForwardPropsEmits(props, emits)
+
+watch(() => props.open,
+    (newValue, oldValue) => {
+        recipient.value = props.recipient
+    }
+)
+</script>
+
+<template>
+    <Dialog v-bind="forwarded" :open="open">
+        <DialogContent class="sm:max-w-[425px]">
+            <DialogHeader>
+                <DialogTitle>{{ props.title }}</DialogTitle>
+                <DialogDescription v-if="props.description" v-html="props.description" />
+            </DialogHeader>
+            <div class="grid grid-cols-[min-content_1fr] gap-4 py-4">
+                <Label for="email" class="text-right text-muted-foreground">
+                    An
+                </Label>
+                <Input id="email" required v-model="recipient" type="email" placeholder="E-Mail" />
+
+                <Label for="email" class="text-right text-muted-foreground">
+                    Kopie
+                </Label>
+                <Input id="email" required :value="'buchhaltung@tooloop.de'" type="email" placeholder="E-Mail" />
+            </div>
+            <DialogFooter>
+                <DialogClose as-child>
+                    <Button>
+                        Abbrechen
+                    </Button>
+                </DialogClose>
+                <Button variant="destructive" @click="$emit('send', recipient)">
+                    E-Mail senden
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>
+
+<style>
+/* Remove close X */
+[data-slot=dialog-content] button.ring-offset-background {
+    display: none;
+}
+</style>