removing entries works extracted formular into component
This commit is contained in:
54
src/components/EntryForm.vue
Normal file
54
src/components/EntryForm.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user