allow to delete wishlist

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

src/components/FormWishlist.vue

@@ -1,47 +1,57 @@
 <template>
-  <form @submit="onSubmit" class="w-full flex-col">
-    <InputText
-      name="title"
-      type="text"
-      :value="wishlist?.title"
-      :label="t('components.form-wishlist.title.label')"
-    />
-    <InputToggle
-      name="public"
-      :value="wishlist?.public"
-      :label="t('components.form-wishlist.public.label')"
-    />
-    <InputTextArea
-      name="description"
-      type="text"
-      :value="wishlist?.description"
-      height-class="h-20"
-      :label="t('components.form-wishlist.description.label')"
-    />
-    <InputText
-      name="imageSrc"
-      type="text"
-      :value="wishlist?.imageSrc"
-      :label="t('components.form-wishlist.image-src.label')"
-    />
-    <InputFile
-      name="imageFile"
-      :label="t('components.form-wishlist.image-file.label')"
-    />
-    <InputText
-      name="slugUrlText"
-      type="text"
-      :value="wishlist?.slugUrlText"
-      :label="t('components.form-wishlist.slug-text.label')"
-    />
+  <div class="flex w-full flex-col justify-between space-y-2">
+    <form @submit="onSubmit" class="w-full flex-col">
+      <InputText
+        name="title"
+        type="text"
+        :value="wishlist?.title"
+        :label="t('components.form-wishlist.title.label')"
+      />
+      <InputToggle
+        name="public"
+        :value="wishlist?.public"
+        :label="t('components.form-wishlist.public.label')"
+      />
+      <InputTextArea
+        name="description"
+        type="text"
+        :value="wishlist?.description"
+        height-class="h-20"
+        :label="t('components.form-wishlist.description.label')"
+      />
+      <InputText
+        name="imageSrc"
+        type="text"
+        :value="wishlist?.imageSrc"
+        :label="t('components.form-wishlist.image-src.label')"
+      />
+      <InputFile
+        name="imageFile"
+        :label="t('components.form-wishlist.image-file.label')"
+      />
+      <InputText
+        name="slugUrlText"
+        type="text"
+        :value="wishlist?.slugUrlText"
+        :label="t('components.form-wishlist.slug-text.label')"
+      />
+      <ButtonBase
+        class="h-12 w-full"
+        mode="primary"
+        :disabled="!meta.valid"
+        :icon="IconSave"
+        >{{ t('components.form-wishlist.submit.text') }}</ButtonBase
+      >
+    </form>
     <ButtonBase
+      v-if="wishlist?.id"
       class="h-12 w-full"
-      mode="primary"
-      :disabled="!meta.valid"
-      :icon="IconSave"
-      >{{ t('components.form-wishlist.submit.text') }}</ButtonBase
+      mode="danger"
+      @click.prevent="() => emits('delete')"
+      :icon="IconDelete"
+      >{{ t('components.form-wishlist.delete-button.text') }}</ButtonBase
     >
-  </form>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -49,13 +59,14 @@ import { Wishlist } from '@/types'
 import { useI18n } from 'vue-i18n'
 import { useForm } from 'vee-validate'
 import IconSave from '@/components/icons/IconSave.vue'
+import IconDelete from '@/components/icons/IconDelete.vue'
 import { object, string, boolean } from 'yup'
 
 const props = defineProps<{
   wishlist?: Wishlist
 }>()
 
-const emits = defineEmits(['create', 'update'])
+const emits = defineEmits(['create', 'update', 'delete'])
 
 const { t } = useI18n()
 

src/components/FormWishlistItem.vue

@@ -64,7 +64,7 @@
         mode="danger"
         @click.prevent="() => emits('delete')"
         :icon="IconDelete"
-        >{{ t('components.wishlist-item.delete-button.text') }}</ButtonBase
+        >{{ t('components.form-wishlist-item.delete-button.text') }}</ButtonBase
       >
     </div>
   </div>

src/composables/useWishlistStore.ts

@@ -15,7 +15,7 @@ const fetch = async (slugText: string) => {
   error.value = request.error.value
 }
 
-const create = async (wishlist: Wishlist): Promise<void> => {
+const createWishlist = async (wishlist: Wishlist): Promise<void> => {
   const { data, error } = await useFetch('/wishlist/')
     .post(unref(wishlist))
     .json()
@@ -24,7 +24,7 @@ const create = async (wishlist: Wishlist): Promise<void> => {
   }
   state.value = <Wishlist>data.value
 }
-const update = async (updatedData: Wishlist): Promise<void> => {
+const updateWishlist = async (updatedData: Wishlist): Promise<void> => {
   const id = state.value?.id
   const payload = {
     ...state.value,
@@ -40,6 +40,13 @@ const update = async (updatedData: Wishlist): Promise<void> => {
   }
 }
 
+const deleteWishlist = async (): Promise<void> => {
+  const { error } = await useFetch(`/wishlist/${state.value.id}`).delete()
+  if (error.value) {
+    throw error.value
+  }
+}
+
 const createItem = async (values: WishlistItem): Promise<void> => {
   const id = state.value?.id
   const payload = {
@@ -114,8 +121,9 @@ export const useWishlistStore = () => {
     state,
     isFinished,
     error,
-    create,
-    update,
+    createWishlist,
+    updateWishlist,
+    deleteWishlist,
     createItem,
     updateItem,
     itemBought,

src/config/locales/de-DE.json

@@ -14,6 +14,12 @@
     },
     "saving-failed": {
       "text": "Speichern ist fehlgeschlagen!"
+    },
+    "deleted": {
+      "text": "Gelöscht"
+    },
+    "deleting-failed": {
+      "text": "Löschen ist fehlgeschlagen!"
     }
   },
   "errors": {
@@ -62,6 +68,17 @@
           "text": "Diese Wunschliste ist leer."
         }
       },
+      "modal-delete-wishlist": {
+        "title": {
+          "text": "Möchten Sie die Wunschliste löschen?"
+        },
+        "confirm-button": {
+          "text": "Ja"
+        },
+        "cancel-button": {
+          "text": "Nein"
+        }
+      },
       "modal-bought-item": {
         "title": {
           "text": "Möchten Sie den Gegenstand von der Liste nehmen?"
@@ -103,9 +120,6 @@
       },
       "bought-button": {
         "text": "Gekauft"
-      },
-      "delete-button": {
-        "text": "Löschen"
       }
     },
     "form-wishlist": {
@@ -137,6 +151,9 @@
       },
       "submit": {
         "text": "Speichern"
+      },
+      "delete-button": {
+        "text": "Löschen"
       }
     },
     "form-wishlist-item": {
@@ -168,6 +185,9 @@
       },
       "submit": {
         "text": "Speichern"
+      },
+      "delete-button": {
+        "text": "Löschen"
       }
     },
     "header": {

src/config/locales/en-US.json

@@ -13,7 +13,13 @@
       "text": "Saved"
     },
     "saving-failed": {
-      "text": "Saving failed"
+      "text": "Saving failed!"
+    },
+    "deleted": {
+      "text": "Deleted"
+    },
+    "deleting-failed": {
+      "text": "Deleting faild!"
     }
   },
   "errors": {
@@ -62,6 +68,17 @@
           "text": "This wishlist is empty."
         }
       },
+      "modal-delete-wishlist": {
+        "title": {
+          "text": "Do you want delete the wishlist?"
+        },
+        "confirm-button": {
+          "text": "Yes"
+        },
+        "cancel-button": {
+          "text": "No"
+        }
+      },
       "modal-bought-item": {
         "title": {
           "text": "Do you want to remove the item from the list?"
@@ -103,9 +120,6 @@
       },
       "bought-button": {
         "text": "Bought"
-      },
-      "delete-button": {
-        "text": "Delete"
       }
     },
     "form-wishlist": {
@@ -134,6 +148,9 @@
       },
       "submit": {
         "text": "Save"
+      },
+      "delete-button": {
+        "text": "Delete"
       }
     },
     "form-wishlist-item": {
@@ -165,6 +182,9 @@
       },
       "submit": {
         "text": "Save"
+      },
+      "delete-button": {
+        "text": "Delete"
       }
     },
     "header": {

src/views/CreateWishlistView.vue

@@ -9,13 +9,13 @@ import { useToast } from 'vue-toastification'
 const router = useRouter()
 const { t } = useI18n()
 const toast = useToast()
-const { create } = useWishlistStore()
+const { createWishlist } = useWishlistStore()
 
 useTitle(t('pages.create-wishlist-view.title.text'))
 
 const handleCreateWishlist = async (wishlist: Wishlist): Promise<void> => {
   try {
-    await create(wishlist)
+    await createWishlist(wishlist)
     toast.success(t('common.saved.text'))
     router.push(`/${wishlist.slugUrlText}`)
   } catch (error) {

src/views/DetailView.vue

@@ -17,7 +17,8 @@ const {
   fetch,
   state,
   isFinished,
-  update,
+  updateWishlist,
+  deleteWishlist,
   createItem,
   updateItem,
   itemBought,
@@ -36,7 +37,7 @@ useTitle(title)
 
 const handleUpdateWishlist = async (wishlist: Wishlist): Promise<void> => {
   try {
-    await update(wishlist)
+    await updateWishlist(wishlist)
     toast.success(t('common.saved.text'))
     router.push(`/${wishlist.slugUrlText}`)
   } catch (error) {
@@ -44,6 +45,23 @@ const handleUpdateWishlist = async (wishlist: Wishlist): Promise<void> => {
   }
 }
 
+const handleDelete = async (): Promise<void> => {
+  const confirmed = await modal.show(
+    t('pages.detail-view.modal-delete-wishlist.title.text'),
+    t('pages.detail-view.modal-delete-wishlist.confirm-button.text'),
+    t('pages.detail-view.modal-delete-wishlist.cancel-button.text')
+  )
+  if (confirmed) {
+    try {
+      await deleteWishlist()
+      toast.success(t('common.deleted.text'))
+      router.push('/')
+    } catch (error) {
+      toast.error(t('common.deleting-failed.text'))
+    }
+  }
+}
+
 const handleCreateItem = async (values: WishlistItemType): Promise<void> => {
   try {
     await createItem(values)
@@ -83,7 +101,12 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
     t('pages.detail-view.modal-delete-item.cancel-button.text')
   )
   if (confirmed) {
-    itemDelete(item)
+    try {
+      await itemDelete(item)
+      toast.success(t('common.deleted.text'))
+    } catch (error) {
+      toast.error(t('common.deleting-failed.text'))
+    }
   }
 }
 </script>
@@ -110,7 +133,12 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
             {{ state.description }}
           </p>
         </div>
-        <FormWishlist v-else :wishlist="state" @update="handleUpdateWishlist" />
+        <FormWishlist
+          v-else
+          :wishlist="state"
+          @update="handleUpdateWishlist"
+          @delete="handleDelete"
+        />
       </div>
 
       <div