component refactored

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

src/components/WishlistHeader.vue

@@ -61,19 +61,22 @@
 </template>
 
 <script setup lang="ts">
-import { Form } from 'vee-validate'
-import { object, string, boolean } from 'yup'
-import { useI18n } from 'vue-i18n'
-import ImageTile from '@/components/ImageTile.vue'
-import BaseButton from '@/components/BaseButton.vue'
-import InputText from '@/components/InputText.vue'
-import InputCheckbox from '@/components/InputCheckbox.vue'
-import InputTextArea from '@/components/InputTextArea.vue'
-import { IconSave } from '@/components/icons'
-import { useEditMode } from '@/composables'
 import { Wishlist } from '@/types'
 import { PropType } from 'vue'
-const { isActive: editModeIsActive } = useEditMode()
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { Form } from 'vee-validate'
+import { object, string, boolean } from 'yup'
+import { useToast } from 'vue-toastification'
+import {
+  BaseButton,
+  ImageTile,
+  InputText,
+  InputCheckbox,
+  InputTextArea,
+} from '@/components'
+import { IconSave } from '@/components/icons'
+import { useEditMode, useWishlistStore } from '@/composables'
 
 defineProps({
   modelValue: {
@@ -81,7 +84,12 @@ defineProps({
     requried: true,
   },
 })
-const emit = defineEmits(['update'])
+
+const router = useRouter()
+const toast = useToast()
+
+const { isActive: editModeIsActive } = useEditMode()
+const { update } = useWishlistStore()
 
 const { t } = useI18n()
 
@@ -104,7 +112,13 @@ const schema = object({
     .url(t('components.wishlist-header.main.form.image-src.error-url')),
 })
 
-const onSubmit = (values: any): void => {
-  emit('update', values)
+const onSubmit = async (values: any): Promise<void> => {
+  try {
+    await update(values)
+    toast.success(t('common.wishlist.saved.text'))
+    router.push(`/${values.slugUrlText}`)
+  } catch (error) {
+    toast.error(t('common.wishlist.saving-failed.text'))
+  }
 }
 </script>

src/components/index.ts

@@ -0,0 +1,10 @@
+export { default as BaseButton } from './BaseButton.vue'
+export { default as Header } from './Header.vue'
+export { default as ImagePreview } from './ImagePreview.vue'
+export { default as ImageTile } from './ImageTile.vue'
+export { default as InputCheckbox } from './InputCheckbox.vue'
+export { default as InputText } from './InputText.vue'
+export { default as InputTextArea } from './InputTextArea.vue'
+export { default as Modal } from './Modal.vue'
+export { default as WishlistHeader } from './WishlistHeader.vue'
+export { default as WishlistItem } from './WishlistItem.vue'

src/composables/useWishlistStore.ts

@@ -1,7 +1,9 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import useAxios, { CustomAxiosError } from '@/composables/useAxios'
 import { Wishlist, WishlistItem } from '@/types'
+import { useEditMode } from './useEditMode'
 const { client } = useAxios()
+const { isActive: editModeIsActive } = useEditMode()
 
 //@ts-expect-error ...
 const state = ref<Wishlist>({})
@@ -43,6 +45,15 @@ const itemBought = async (item: WishlistItem): Promise<void> => {
   item.bought = true
 }
 
+const filteredItems = computed(() => {
+  if (!state.value || !state.value.items) {
+    return []
+  } else if (editModeIsActive.value) {
+    return state.value.items
+  }
+  return state.value.items.filter((item: WishlistItem) => item.bought === false)
+})
+
 export const useWishlistStore = () => {
   return {
     state,
@@ -50,5 +61,6 @@ export const useWishlistStore = () => {
     fetch,
     update,
     itemBought,
+    filteredItems,
   }
 }

src/views/DetailView.vue

@@ -1,41 +1,19 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { useToast } from 'vue-toastification'
-import { Wishlist, WishlistItem as WishlistItemType } from '@/types'
-import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useWishlistStore, useModal, useEditMode } from '@/composables'
+import { WishlistItem as WishlistItemType } from '@/types'
+import { useRoute } from 'vue-router'
+import { useWishlistStore, useModal } from '@/composables'
 import WishlistItem from '@/components/WishlistItem.vue'
 import WishlistHeader from '@/components/WishlistHeader.vue'
 import { IconNoGift } from '../components/icons'
 
 const route = useRoute()
-const router = useRouter()
 const modal = useModal()
-const { isActive: editModeIsActive } = useEditMode()
 const { t } = useI18n()
-const toast = useToast()
 
-const {
-  state,
-  fetch,
-  isReady,
-  itemBought,
-  update: updateWishlist,
-} = useWishlistStore()
+const { state, fetch, isReady, itemBought, filteredItems } = useWishlistStore()
 await fetch(route.params.slug as string)
 
-const filteredItems = computed(() => {
-  if (!state.value || !state.value.items) {
-    return []
-  } else if (editModeIsActive.value) {
-    return state.value.items
-  }
-  return state.value.items.filter(
-    (item: WishlistItemType) => item.bought === false
-  )
-})
-
 const bought = async (item: WishlistItemType): Promise<void> => {
   const confirmed = await modal.show(
     t('pages.detail-view.confirmation-modal.title.text'),
@@ -47,21 +25,11 @@ const bought = async (item: WishlistItemType): Promise<void> => {
     itemBought(item)
   }
 }
-
-const handleUpdateWishlist = async (values: Wishlist) => {
-  try {
-    await updateWishlist(values)
-    toast.success(t('common.wishlist.saved.text'))
-    router.push(`/${state.value?.slugUrlText}`)
-  } catch (error) {
-    toast.error(t('common.wishlist.saving-failed.text'))
-  }
-}
 </script>
 
 <template>
   <div v-if="isReady" class="h-full">
-    <WishlistHeader v-model="state" @update="handleUpdateWishlist" />
+    <WishlistHeader v-model="state" />
     <div
       v-if="filteredItems.length > 0"
       class="flex flex-col space-y-14 py-10 md:space-y-8"