create wishlist added

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

src/components/FormWishlist.vue

@@ -3,25 +3,25 @@
     <InputText
       name="title"
       type="text"
-      :value="wishlist.title"
+      :value="wishlist?.title"
       :label="t('components.form-wishlist.title.label')"
     />
     <InputToggle
       name="public"
-      :value="wishlist.public"
+      :value="wishlist?.public"
       :label="t('components.form-wishlist.public.label')"
     />
     <InputTextArea
       name="description"
       type="text"
-      :value="wishlist.description"
+      :value="wishlist?.description"
       height-class="h-20"
       :label="t('components.form-wishlist.description.label')"
     />
     <InputText
       name="imageSrc"
       type="text"
-      :value="wishlist.imageSrc"
+      :value="wishlist?.imageSrc"
       :label="t('components.form-wishlist.image-src.label')"
     />
     <InputFile
@@ -31,7 +31,7 @@
     <InputText
       name="slugUrlText"
       type="text"
-      :value="wishlist.slugUrlText"
+      :value="wishlist?.slugUrlText"
       :label="t('components.form-wishlist.slug-text.label')"
     />
     <ButtonBase
@@ -51,11 +51,11 @@ import { useForm } from 'vee-validate'
 import IconSave from '@/components/icons/IconSave.vue'
 import { object, string, boolean } from 'yup'
 
-defineProps<{
+const props = defineProps<{
-  wishlist: Wishlist
+  wishlist?: Wishlist
 }>()
 
-const emits = defineEmits(['update'])
+const emits = defineEmits(['create', 'update'])
 
 const { t } = useI18n()
 
@@ -96,6 +96,10 @@ const { handleSubmit, meta } = useForm({
 
 const onSubmit = handleSubmit((values) => {
   values.imageSrc = values.imageFile || values.imageSrc
-  emits('update', values)
+  if (props.wishlist?.id) {
+    emits('update', values)
+  } else {
+    emits('create', values)
+  }
 })
 </script>

src/composables/useWishlistStore.ts

@@ -3,7 +3,6 @@ import { Wishlist, WishlistItem } from '@/types'
 import { useEditMode } from './useEditMode'
 const { isActive: editModeIsActive } = useEditMode()
 import { useFetch } from './useFetch'
-import { syncRef } from '@vueuse/core'
 
 const state = ref<Wishlist>()
 const isFinished = ref<boolean>(false)
@@ -16,6 +15,15 @@ const fetch = async (slugText: string) => {
   error.value = request.error.value
 }
 
+const create = async (wishlist: Wishlist): Promise<void> => {
+  const { data, error } = await useFetch('/wishlist/')
+    .post(unref(wishlist))
+    .json()
+  if (error.value) {
+    throw error.value
+  }
+  state.value = <Wishlist>data.value
+}
 const update = async (updatedData: Wishlist): Promise<void> => {
   const id = state.value?.id
   const payload = {
@@ -106,6 +114,7 @@ export const useWishlistStore = () => {
     state,
     isFinished,
     error,
+    create,
     update,
     createItem,
     updateItem,

src/config/locales/de-DE.json

@@ -10,10 +10,10 @@
       "text": "Lade..."
     },
     "saved": {
-      "text": "Wunschliste gespeichert"
+      "text": "Gespeichert"
     },
     "saving-failed": {
-      "text": "Wunschliste konnte nicht gespeichert werden"
+      "text": "Speichern ist fehlgeschlagen!"
     }
   },
   "errors": {
@@ -48,6 +48,14 @@
         }
       }
     },
+    "create-wishlist-view": {
+      "title": {
+        "text": "Wunschliste erstellen"
+      },
+      "headline": {
+        "text": "Erstelle eine Wunschliste"
+      }
+    },
     "detail-view": {
       "main": {
         "empty-list": {

src/config/locales/en-US.json

@@ -10,10 +10,10 @@
       "text": "Loading..."
     },
     "saved": {
-      "text": "Wishlist saved"
+      "text": "Saved"
     },
     "saving-failed": {
-      "text": "Saving wishlist failed"
+      "text": "Saving failed"
     }
   },
   "errors": {
@@ -48,6 +48,14 @@
         }
       }
     },
+    "create-wishlist-view": {
+      "title": {
+        "text": "Create a wishlist"
+      },
+      "headline": {
+        "text": "Create a wishlist"
+      }
+    },
     "detail-view": {
       "main": {
         "empty-list": {

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import LoginView from '@/views/LoginView.vue'
+import CreateWishlistView from '@/views/CreateWishlistView.vue'
 import DetailView from '@/views/DetailView.vue'
 
 const router = createRouter({
@@ -16,6 +17,11 @@ const router = createRouter({
       name: 'login',
       component: LoginView,
     },
+    {
+      path: '/create-wishlist',
+      name: 'create-wishlist',
+      component: CreateWishlistView,
+    },
     {
       path: '/:slug',
       name: 'detail',

src/views/CreateWishlistView.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { Wishlist } from '@/types'
+import { useRouter } from 'vue-router'
+import { useTitle } from '@vueuse/core'
+import { useWishlistStore } from '@/composables'
+import { useToast } from 'vue-toastification'
+
+const router = useRouter()
+const { t } = useI18n()
+const toast = useToast()
+const { create } = useWishlistStore()
+
+useTitle(t('pages.create-wishlist-view.title.text'))
+
+const handleCreateWishlist = async (wishlist: Wishlist): Promise<void> => {
+  try {
+    await create(wishlist)
+    toast.success(t('common.saved.text'))
+    router.push(`/${wishlist.slugUrlText}`)
+  } catch (error) {
+    toast.error(t('common.saving-failed.text'))
+  }
+}
+</script>
+
+<template>
+  <div class="h-full">
+    <h1 class="mb-6 text-xl font-bold">
+      {{ t('pages.create-wishlist-view.headline.text') }}
+    </h1>
+    <FormWishlist @create="handleCreateWishlist" />
+  </div>
+</template>