quirinecker/dwa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

removing entries works extracted formular into component

Browse Source
This commit is contained in:
quirinecker
2024-03-08 14:39:29 +01:00
parent 2cca52fcdc
commit 1d7c55f773
3 changed files with 127 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/pages/Home.vue
View File

@@ -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>