wishlist-app/src/views/DetailView.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { Wishlist, WishlistItem as WishlistItemType } from '@/types'
import { useRoute, useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { useWishlistStore, useModal, useEditMode } from '@/composables'
import { useToast } from 'vue-toastification'
import { computed } from 'vue'

const route = useRoute()
const router = useRouter()
const modal = useModal()
const { t } = useI18n()
const toast = useToast()
const { isActive: editModeIsActive } = useEditMode()
const {
  fetch,
  state,
  isFinished,
  update,
  createItem,
  updateItem,
  itemBought,
  itemDelete,
  filteredItems,
} = useWishlistStore()
fetch(route.params.slug as string)

const title = computed(() => {
  return state.value?.title
    ? t('common.title.text', { title: state.value.title })
    : t('common.loading.text')
})

useTitle(title)

const handleUpdateWishlist = async (wishlist: Wishlist): Promise<void> => {
  try {
    await update(wishlist)
    toast.success(t('common.saved.text'))
    router.push(`/${wishlist.slugUrlText}`)
  } catch (error) {
    toast.error(t('common.saving-failed.text'))
  }
}

const handleCreateItem = async (values: WishlistItemType): Promise<void> => {
  try {
    await createItem(values)
    toast.success(t('common.saved.text'))
  } catch (error) {
    toast.error(t('common.saving-failed.text'))
  }
}

const handleUpdateItem = async (
  currentValues: WishlistItemType,
  newValues: WishlistItemType
): Promise<void> => {
  try {
    await updateItem(currentValues, newValues)
    toast.success(t('common.saved.text'))
  } catch (error) {
    toast.error(t('common.saving-failed.text'))
  }
}

const handleBought = async (item: WishlistItemType): Promise<void> => {
  const confirmed = await modal.show(
    t('pages.detail-view.modal-bought-item.title.text'),
    t('pages.detail-view.modal-bought-item.confirm-button.text'),
    t('pages.detail-view.modal-bought-item.cancel-button.text'),
    t('pages.detail-view.modal-bought-item.body.text')
  )
  if (confirmed) {
    itemBought(item)
  }
}
const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
  const confirmed = await modal.show(
    t('pages.detail-view.modal-delete-item.title.text'),
    t('pages.detail-view.modal-delete-item.confirm-button.text'),
    t('pages.detail-view.modal-delete-item.cancel-button.text')
  )
  if (confirmed) {
    itemDelete(item)
  }
}
</script>

<template>
  <div class="h-full">
    <div
      v-if="!isFinished"
      class="m-20 flex flex-row content-center items-center justify-center space-x-2"
    >
      <IconSpinner class="h-4 w-4" />
      <span> {{ t('common.loading.text') }} </span>
    </div>
    <div v-else-if="state !== undefined" class="h-full">
      <div
        class="flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
      >
        <ImageTile :image-src="state.imageSrc" class="shrink-0"></ImageTile>
        <div v-if="!editModeIsActive">
          <h1 class="mb-2 text-center text-2xl font-bold md:text-left">
            {{ state.title }}
          </h1>
          <p class="text-lg">
            {{ state.description }}
          </p>
        </div>
        <FormWishlist v-else :wishlist="state" @update="handleUpdateWishlist" />
      </div>

      <div
        v-if="!editModeIsActive && filteredItems.length === 0"
        class="flex h-1/2 w-full justify-center"
      >
        <div
          class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
        >
          <IconNoGift class="h-10 w-10 fill-gray-600/75 dark:fill-white/70" />
          <span>{{ t('pages.detail-view.main.empty-list.text') }}</span>
        </div>
      </div>

      <div v-else class="flex flex-col space-y-14 py-10 md:space-y-8">
        <FormWishlistItem
          v-if="editModeIsActive"
          mode="create"
          @create="handleCreateItem"
        />
        <div v-for="item in filteredItems" :key="item.id">
          <WishlistItem
            v-if="!editModeIsActive"
            :item="item"
            @bought="handleBought(item)"
          />
          <FormWishlistItem
            v-else
            :item="item"
            mode="update"
            @update="(updateValues) => handleUpdateItem(item, updateValues)"
            @delete="handleDeleteItem(item)"
          />
        </div>
      </div>
    </div>
  </div>
</template>