From 1d7c55f773ed5804b585a7dee655c8920edc6565 Mon Sep 17 00:00:00 2001
From: quirinecker <quirin.ecker@bajupa.com>
Date: Fri, 8 Mar 2024 14:39:29 +0100
Subject: [PATCH] removing entries works extracted formular into component

---
 src/components/EntryForm.vue |  54 +++++++++++++
 src/pages/Detail.vue         |  20 ++++-
 src/pages/Home.vue           | 142 ++++++++++++++---------------------
 3 files changed, 127 insertions(+), 89 deletions(-)
 create mode 100644 src/components/EntryForm.vue

diff --git a/src/components/EntryForm.vue b/src/components/EntryForm.vue
new file mode 100644
index 0000000..94df8ec
--- /dev/null
+++ b/src/components/EntryForm.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Input } from '@/components/ui/input';
+import { Form, FormItem, FormLabel, FormField, FormControl, FormMessage, FormDescription } from '@/components/ui/form';
+import { Button } from './ui/button';
+import { Textarea } from '@/components/ui/textarea';
+
+const emit = defineEmits<{
+  submit: [value: CreateEntrySchema]
+}>()
+
+const props = defineProps<{
+	action: 'create' | 'edit'
+}>()
+
+
+const createEntryZodSchema = z.object({
+	name: z.string(),
+	text: z.string().optional()
+})
+
+export type CreateEntrySchema = z.infer<typeof createEntryZodSchema>
+
+const createEntrySchema = toTypedSchema(createEntryZodSchema)
+
+</script>
+
+<template>
+	<Form :validation-schema="createEntrySchema" @submit="(val) => emit('submit', val as CreateEntrySchema)">
+		<FormField v-slot="{ componentField }" name="name">
+			<FormItem>
+				<FormControl>
+					<Input placeholder="Name" v-bind="componentField" />
+				</FormControl>
+				<FormMessage />
+			</FormItem>
+		</FormField>
+		<FormField v-slot="{ componentField }" name="text">
+			<FormItem>
+				<FormLabel></FormLabel>
+				<FormControl>
+					<Textarea placeholder="Text" v-bind="componentField" />
+				</FormControl>
+				<FormDescription />
+				<FormMessage />
+			</FormItem>
+		</FormField>
+		<Button type="submit" class="w-full" v-if="props.action === 'create'">Create</Button>
+		<Button type="submit" class="w-full" v-else>Edit</Button>
+	</Form>
+</template>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/pages/Detail.vue b/src/pages/Detail.vue
index bd1f8e7..4b2fca6 100644
--- a/src/pages/Detail.vue
+++ b/src/pages/Detail.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Card, CardTitle, CardDescription } from '@/components/ui/card';
-import { entries, getDifferenceToToday } from '@/data/entries';
+import { Entry, entries, getDifferenceToToday, save } from '@/data/entries';
 import { ArrowBigLeft, MenuIcon, TrashIcon } from 'lucide-vue-next';
 import {
 	DropdownMenu,
@@ -11,11 +11,26 @@ import {
 import { Button } from '@/components/ui/button';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
 
 const probs = defineProps<{ name: string }>()
 const router = useRouter()
 const entry = ref(entries.value.find(entry => entry.name === probs.name))
 
+
+function deleteEntry(entry: Entry) {
+	const index = entries.value.indexOf(entry)
+
+	if (index === undefined) {
+		toast('Deletion failed')
+		return
+	}
+
+	entries.value.splice(index, 1)
+	save()
+	router.back()
+}
+
 </script>
 
 <template>
@@ -41,12 +56,13 @@ const entry = ref(entries.value.find(entry => entry.name === probs.name))
 				</DropdownMenuTrigger>
 
 				<DropdownMenuContent class="mr-2">
-					<DropdownMenuItem>
+					<DropdownMenuItem @click="() => deleteEntry(entry)">
 						<TrashIcon color="#ef4444"/>
 						<span color="#ef4444">Delete</span>
 					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
+
 		</nav>
 		<div id="content" class="w-full flex flex-col gap-5 items-center mt-20">
 			<Button class="w-full">Edit</Button>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 2499e1a..0614669 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -2,115 +2,83 @@
 import { Button } from '@/components/ui/button';
 import { Plus } from 'lucide-vue-next';
 import { entries, save } from '@/data/entries';
-import { Drawer, DrawerHeader, DrawerTitle, DrawerTrigger, DrawerContent, DrawerFooter, DrawerClose } from '@/components/ui/drawer';
-import { Form, FormItem, FormLabel, FormField, FormControl, FormMessage, FormDescription } from '@/components/ui/form';
+import { Drawer, DrawerHeader, DrawerTitle, DrawerContent, DrawerClose } from '@/components/ui/drawer';
 import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import EntryForm from '@/components/EntryForm.vue'
+import { CreateEntrySchema } from '@/components/EntryForm.vue'
 import { getDifferenceToToday } from '@/data/entries';
-import { toTypedSchema } from '@vee-validate/zod';
-import * as z from 'zod'
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 import moment from 'moment';
+import { ref } from 'vue';
 
+const createDrawerState = ref(false)
 const router = useRouter()
-const createEntryZodSchema = z.object({
-    name: z.string(),
-    text: z.string().optional()
-})
 
-type CreateEntrySchema = z.infer<typeof createEntryZodSchema>
+async function createEntry(value: CreateEntrySchema) {
+	if (entries.value.map(entry => entry.name).includes(value.name)) {
+		toast('Accident Entry allready exists', {
+			important: true,
+			description: 'please use a unique name'
+		})
 
-const createEntrySchema = toTypedSchema(createEntryZodSchema)
+		return
+	}
 
+	entries.value.push({
+		last_reset: moment(),
+		name: value.name,
+		text: value.text && value.text.trim() !== ''
+			? value.text : undefined
+	})
 
-function createEntry(value: CreateEntrySchema) {
-    if (entries.value.map(entry => entry.name).includes(value.name)) {
-        toast('Accident Entry allready exists', {
-            important: true,
-            description: 'please use a unique name'
-        })
-
-        return
-    }
-
-    entries.value.push({
-        last_reset: moment(),
-        name: value.name,
-        text: value.text && value.text.trim() !== ''
-            ? value.text : undefined
-    })
-
-    save()
+	save()
+	createDrawerState.value = false
 }
 
 function openDetailWithName(name: string) {
-    console.log('opening', name)
-    router.push({
-        path: `${name}`,
-    })
+	console.log('opening', name)
+	router.push({
+		path: `${name}`,
+	})
 }
 
 </script>
 
 <template>
-    <ScrollArea class="w-full">
-        <div class="w-full flex justify-center flex-col items-center">
-            <header id="title" class="flex w-full h-56 justify-center items-center flex-row">Accident Board</header>
-            <main class="wrapper sm:w-3/4 w-11/12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                <Button v-for="entry in entries" class="w-full p-10 flex flex-col items-center gap-2"
-                    @click="openDetailWithName(entry.name)">
-                    <span>{{ entry.name }}</span>
-                    <Badge variant="secondary">{{ getDifferenceToToday(entry.last_reset) }} days</Badge>
-                </Button>
-            </main>
-        </div>
-    </ScrollArea>
+	<ScrollArea class="w-full">
+		<div class="w-full flex justify-center flex-col items-center">
+			<header id="title" class="flex w-full h-56 justify-center items-center flex-row">Accident Board</header>
+			<main class="wrapper sm:w-3/4 w-11/12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+				<Button v-for="entry in entries" class="w-full p-10 flex flex-col items-center gap-2"
+					@click="openDetailWithName(entry.name)">
+					<span>{{ entry.name }}</span>
+					<Badge variant="secondary">{{ getDifferenceToToday(entry.last_reset) }} days</Badge>
+				</Button>
+			</main>
+		</div>
+	</ScrollArea>
 
-    <Drawer>
-        <DrawerTrigger as-child>
-            <div class="fixed bottom-0 w-full h-28 flex justify-center items-center">
-                <Button size="icon" class="h-20  sm:w-3/4 w-11/12">
-                    <Plus />
-                </Button>
-            </div>
-        </DrawerTrigger>
 
-        <DrawerContent>
-            <DrawerHeader>
-                <DrawerTitle>Create new Entry</DrawerTitle>
-            </DrawerHeader>
-            <div id="content" class="p-5">
-                <Form :validation-schema="createEntrySchema" @submit="(val) => createEntry(val as CreateEntrySchema)">
-                    <FormField v-slot="{ componentField }" name="name">
-                        <FormItem>
-                            <FormControl>
-                                <Input placeholder="Name" v-bind="componentField" />
-                            </FormControl>
-                            <FormMessage/>
-                        </FormItem>
-                    </FormField>
-                    <FormField v-slot="{ componentField }" name="text">
-                        <FormItem>
-                            <FormLabel></FormLabel>
-                            <FormControl>
-                                <Textarea placeholder="Text" v-bind="componentField" />
-                            </FormControl>
-                            <FormDescription />
-                            <FormMessage />
-                        </FormItem>
-                    </FormField>
-                    <DrawerFooter>
-                        <DrawerClose>
-                            <Button type="submit">Create</Button>
-                        </DrawerClose>
-                    </DrawerFooter>
-                </Form>
-            </div>
-        </DrawerContent>
-    </Drawer>
+	<div id="placeholder" class="h-32"></div>
+
+	<div class="fixed bottom-0 w-full h-28 flex justify-center items-center shadow-2xl shadow-black bg-white">
+		<Button size="icon" class="h-20  sm:w-3/4 w-11/12" @click="createDrawerState = true">
+			<Plus />
+		</Button>
+	</div>
+
+	<Drawer v-model:open="createDrawerState">
+		<DrawerContent>
+			<DrawerHeader>
+				<DrawerTitle>Create new Entry</DrawerTitle>
+			</DrawerHeader>
+			<div id="content" class="p-5">
+				<EntryForm action="create" @submit="(val) => createEntry(val)"> </EntryForm>
+			</div>
+		</DrawerContent>
+	</Drawer>
 </template>
 
 <style scoped></style>
\ No newline at end of file