editing now and resetting works

src/components/EntryForm.vue

@@ -5,6 +5,7 @@ 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';
+import { Entry } from '@/data/entries';
 
 const emit = defineEmits<{
   submit: [value: CreateEntrySchema]
@@ -12,6 +13,7 @@ const emit = defineEmits<{
 
 const props = defineProps<{
 	action: 'create' | 'edit'
+	inputEntry?: Entry | undefined
 }>()
 
 
@@ -31,7 +33,7 @@ const createEntrySchema = toTypedSchema(createEntryZodSchema)
 		<FormField v-slot="{ componentField }" name="name">
 			<FormItem>
 				<FormControl>
-					<Input placeholder="Name" v-bind="componentField" />
+					<Input placeholder="Name" v-bind="componentField" :model-value="inputEntry ? inputEntry.name : ''" />
 				</FormControl>
 				<FormMessage />
 			</FormItem>
@@ -40,7 +42,7 @@ const createEntrySchema = toTypedSchema(createEntryZodSchema)
 			<FormItem>
 				<FormLabel></FormLabel>
 				<FormControl>
-					<Textarea placeholder="Text" v-bind="componentField" />
+					<Textarea placeholder="Text" v-bind="componentField" :model-value="inputEntry ? inputEntry.text : ''" />
 				</FormControl>
 				<FormDescription />
 				<FormMessage />

src/pages/Detail.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Card, CardTitle, CardDescription } from '@/components/ui/card';
-import { Entry, entries, getDifferenceToToday, save } from '@/data/entries';
+import { entries, getDifferenceToToday, save } from '@/data/entries';
 import { ArrowBigLeft, MenuIcon, TrashIcon } from 'lucide-vue-next';
 import {
 	DropdownMenu,
@@ -8,18 +8,31 @@ import {
 	DropdownMenuItem,
 	DropdownMenuContent
 } from '@/components/ui/dropdown-menu';
+import { Drawer, DrawerHeader, DrawerTitle, DrawerContent, DrawerDescription } from '@/components/ui/drawer';
+import { Dialog, DialogHeader, DialogTitle, DialogContent, DialogDescription } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
+import moment from 'moment';
+import { useMediaQuery } from '@vueuse/core';
+import { CreateEntrySchema } from '@/components/EntryForm.vue';
+import EntryForm from '@/components/EntryForm.vue';
 
 const probs = defineProps<{ name: string }>()
 const router = useRouter()
 const entry = ref(entries.value.find(entry => entry.name === probs.name))
+const confirmDialogState = ref(false)
+const isDesktop = useMediaQuery('(min-width: 768px)')
+const editEntryDialog = ref(false)
 
+function deleteEntry() {
+	if (entry.value === undefined) {
+		toast('Deletion failed')
+		return
+	}
 
-function deleteEntry(entry: Entry) {
+	const index = entries.value.indexOf(entry.value)
-	const index = entries.value.indexOf(entry)
 
 	if (index === undefined) {
 		toast('Deletion failed')
@@ -31,6 +44,30 @@ function deleteEntry(entry: Entry) {
 	router.back()
 }
 
+function resetDate() {
+	if (entry.value === undefined) {
+		toast('reset failed')
+		return
+	}
+
+	entry.value.last_reset = moment()
+	confirmDialogState.value = false
+	save()
+}
+
+function editEntry(val: CreateEntrySchema) {
+	console.log(val)
+	if (entry.value === undefined) {
+		toast('edit failed')
+		return
+	}
+
+	entry.value.name = val.name
+	entry.value.text = val.text
+	editEntryDialog.value = false
+	save()
+}
+
 </script>
 
 <template>
@@ -56,7 +93,7 @@ function deleteEntry(entry: Entry) {
 				</DropdownMenuTrigger>
 
 				<DropdownMenuContent class="mr-2">
-					<DropdownMenuItem @click="() => deleteEntry(entry)">
+					<DropdownMenuItem @click="() => deleteEntry()">
 						<TrashIcon color="#ef4444"/>
 						<span color="#ef4444">Delete</span>
 					</DropdownMenuItem>
@@ -65,9 +102,54 @@ function deleteEntry(entry: Entry) {
 
 		</nav>
 		<div id="content" class="w-full flex flex-col gap-5 items-center mt-20">
-			<Button class="w-full">Edit</Button>
+			<Button class="w-full" @click="editEntryDialog = true">Edit</Button>
-			<Button class="w-full" variant="destructive">Reset</Button>
+			<Button class="w-full" variant="destructive" @click="confirmDialogState = true">Reset</Button>
 		</div>
+
+		<Dialog v-if="isDesktop" v-model:open="confirmDialogState">
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Confirm Reset</DialogTitle>
+					<DialogDescription> Are you sure you want to reset the counter ? </DialogDescription>
+					<Button variant="destructive" @click="resetDate">Confirm Reset</Button>
+				</DialogHeader>
+			</DialogContent>
+		</Dialog>
+
+		<Drawer v-else v-model:open="confirmDialogState">
+			<DrawerContent>
+				<DrawerHeader>
+					<DrawerTitle>Confirm Reset</DrawerTitle>
+					<DrawerDescription> Are you sure you want to reset the counter ? </DrawerDescription>
+					<Button variant="destructive" @click="resetDate">Confirm Reset</Button>
+				</DrawerHeader>
+			</DrawerContent>
+		</Drawer>
+
+
+		<Dialog v-if="isDesktop" v-model:open="editEntryDialog">
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle> Edit Entry </DialogTitle>
+				</DialogHeader>
+				<div class="p-5">
+					<EntryForm action="edit" @submit="(val) => editEntry(val)" :input-entry="entry"> </EntryForm>
+				</div>
+			</DialogContent>
+		</Dialog>
+
+		<Drawer v-else v-model:open="editEntryDialog">
+			<DrawerContent>
+				<DrawerHeader>
+					<DrawerTitle> Edit Entry </DrawerTitle>
+				</DrawerHeader>
+				<div class="p-5">
+					<EntryForm action="edit" @submit="(val) => editEntry(val)" :input-entry="entry"> </EntryForm>
+				</div>
+			</DrawerContent>
+		</Drawer>
+
+
 	</main>
 </template>