benny/wishlist-app
1
0
Fork 0
mirror of https://github.com/ThisIsBenny/wishlist-app.git synced 2025-06-07 05:57:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

small changes

Browse source 
Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
This commit is contained in:
Benny Samir Hierl 2022-02-13 11:52:42 +01:00
parent d5aee7ab37
commit cca575e4fe
2 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/composables/useWishlistStore.ts
View file

@ -3,12 +3,15 @@ import { Wishlist, WishlistItem } from '@/types'
import { ref } from 'vue'
const { client } = useAxios()
const state = ref<Wishlist | null>(null)
//@ts-expect-error ...
const state = ref<Wishlist>({})
const isReady = ref(false)
const fetch = async (slugText: string): Promise<void> => {
try {
const { data } = await client.get(`/wishlist/${slugText}`)
state.value = data
isReady.value = true
} catch (e: any) {
if (e.isAxiosError && !(<CustomAxiosError>e.ignore)) {
throw e
@ -43,6 +46,7 @@ const itemBought = async (item: WishlistItem): Promise<void> => {
export const useWishlistStore = () => {
return {
state,
isReady,
fetch,
update,
itemBought,

27
src/views/DetailView.vue
View file

@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n'
import { Wishlist, WishlistItem as WishlistItemType } from '@/types'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useWishlistStore, useModal } from '@/composables'
import { useWishlistStore, useModal, useEditMode } from '@/composables'
import WishlistItem from '@/components/WishlistItem.vue'
import WishlistHeader from '@/components/WishlistHeader.vue'
import { IconNoGift } from '../components/icons'
@ -11,14 +11,25 @@ import { IconNoGift } from '../components/icons'
const route = useRoute()
const router = useRouter()
const modal = useModal()
const { isActive: editModeIsActive } = useEditMode()
const { t } = useI18n()
const { state, fetch, itemBought, update: updateWishlist } = useWishlistStore()
const {
state,
fetch,
isReady,
itemBought,
update: updateWishlist,
} = useWishlistStore()
await fetch(route.params.slug as string)
const notBoughtItems = computed(() => {
return state.value?.items?.filter(
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
)
})
@ -42,14 +53,14 @@ const handleUpdateWishlist = async (values: Wishlist) => {
</script>
<template>
<div v-if="state !== null" class="h-full">
<div v-if="isReady" class="h-full">
<WishlistHeader v-model="state" @update="handleUpdateWishlist" />
<div
v-if="notBoughtItems && notBoughtItems.length > 0"
v-if="filteredItems.length > 0"
class="flex flex-col space-y-14 py-10 md:space-y-8"
>
<WishlistItem
v-for="(item, index) in notBoughtItems"
v-for="(item, index) in filteredItems"
:key="index"
:title="item.title"
:url="item.url"