mirror of
https://github.com/ThisIsBenny/wishlist-app.git
synced 2025-04-19 23:37:41 +00:00
allow to change wishlist item
Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
This commit is contained in:
parent
b291a09590
commit
dd388bebf2
7 changed files with 265 additions and 116 deletions
|
@ -9,42 +9,42 @@
|
|||
name="title"
|
||||
type="text"
|
||||
:value="wishlist.title"
|
||||
:label="t('components.wishlist-header.main.form.title.label')"
|
||||
:label="t('components.form-wishlist.title.label')"
|
||||
/>
|
||||
<InputCheckbox
|
||||
name="public"
|
||||
:value="wishlist.public"
|
||||
:label="t('components.wishlist-header.main.form.public.label')"
|
||||
:label="t('components.form-wishlist.public.label')"
|
||||
/>
|
||||
<InputTextArea
|
||||
name="description"
|
||||
type="text"
|
||||
:value="wishlist.description"
|
||||
height-class="h-20"
|
||||
:label="t('components.wishlist-header.main.form.description.label')"
|
||||
:label="t('components.form-wishlist.description.label')"
|
||||
/>
|
||||
<InputText
|
||||
name="imageSrc"
|
||||
type="text"
|
||||
:value="wishlist.imageSrc"
|
||||
:label="t('components.wishlist-header.main.form.image-src.label')"
|
||||
:label="t('components.form-wishlist.image-src.label')"
|
||||
/>
|
||||
<InputFile
|
||||
name="imageFile"
|
||||
:label="t('components.wishlist-header.main.form.image-file.label')"
|
||||
:label="t('components.form-wishlist.image-file.label')"
|
||||
/>
|
||||
<InputText
|
||||
name="slugUrlText"
|
||||
type="text"
|
||||
:value="wishlist.slugUrlText"
|
||||
:label="t('components.wishlist-header.main.form.slug-text.label')"
|
||||
:label="t('components.form-wishlist.slug-text.label')"
|
||||
/>
|
||||
<ButtonBase
|
||||
class="h-12 w-full"
|
||||
mode="primary"
|
||||
:disabled="!meta.valid"
|
||||
:icon="IconSave"
|
||||
>{{ t('components.wishlist-header.main.form.submit.text') }}</ButtonBase
|
||||
>{{ t('components.form-wishlist.submit.text') }}</ButtonBase
|
||||
>
|
||||
</Form>
|
||||
</template>
|
||||
|
@ -74,26 +74,26 @@ const { t } = useI18n()
|
|||
const schema = object().shape(
|
||||
{
|
||||
title: string().required(
|
||||
t('components.wishlist-header.main.form.title.error-requried')
|
||||
t('components.form-wishlist.title.error-requried')
|
||||
),
|
||||
public: boolean(),
|
||||
description: string().max(
|
||||
300,
|
||||
t('components.wishlist-header.main.form.description.error-max')
|
||||
t('components.form-wishlist.description.error-max')
|
||||
),
|
||||
slugUrlText: string().required(
|
||||
t('components.wishlist-header.main.form.slug-text.error-requried')
|
||||
t('components.form-wishlist.slug-text.error-requried')
|
||||
),
|
||||
imageSrc: string().when('imageFile', {
|
||||
is: (imageFile: string) => !imageFile || imageFile.length === 0,
|
||||
then: string().required(
|
||||
t('components.wishlist-header.main.form.image-src.error-requried')
|
||||
t('components.form-wishlist.image-src.error-requried')
|
||||
),
|
||||
}),
|
||||
imageFile: string().when('imageSrc', {
|
||||
is: (imageSrc: string) => !imageSrc || imageSrc.length === 0,
|
||||
then: string().required(
|
||||
t('components.wishlist-header.main.form.image-file.error-requried')
|
||||
t('components.form-wishlist.image-file.error-requried')
|
||||
),
|
||||
}),
|
||||
},
|
||||
|
|
|
@ -1,20 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import ImagePreview from './ImagePreview.vue'
|
||||
import { ButtonBase } from './'
|
||||
import IconDelete from './icons/IconDelete.vue'
|
||||
import { WishlistItem } from '@/types'
|
||||
defineProps<{
|
||||
item: WishlistItem
|
||||
}>()
|
||||
const { t } = useI18n()
|
||||
|
||||
const emits = defineEmits(['delete'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex h-fit flex-col space-x-0 overflow-hidden rounded-md border-2 border-stone-200 dark:border-stone-700 sm:h-40 sm:flex-row sm:space-x-2"
|
||||
class="flex h-fit flex-col space-x-0 overflow-hidden rounded-md border-2 border-stone-200 dark:border-stone-700 sm:flex-row sm:space-x-2"
|
||||
>
|
||||
<ImagePreview
|
||||
class="max-h-44 flex-shrink-0 flex-grow-0 object-cover sm:aspect-[3/2]"
|
||||
|
@ -22,8 +8,51 @@ const emits = defineEmits(['delete'])
|
|||
:alt="item.title"
|
||||
/>
|
||||
|
||||
<div class="flex w-full flex-col justify-between p-2">
|
||||
<span></span>
|
||||
<div class="flex w-full flex-col justify-between space-y-2 p-2">
|
||||
<Form
|
||||
@submit="onSubmit"
|
||||
:validation-schema="schema"
|
||||
v-slot="{ meta }"
|
||||
class="w-full flex-col"
|
||||
>
|
||||
<InputText
|
||||
name="title"
|
||||
type="text"
|
||||
:value="item.title"
|
||||
:label="t('components.form-wishlist-item.title.label')"
|
||||
/>
|
||||
<InputTextArea
|
||||
name="description"
|
||||
type="text"
|
||||
:value="item.description"
|
||||
height-class="h-20"
|
||||
:label="t('components.form-wishlist-item.description.label')"
|
||||
/>
|
||||
<InputText
|
||||
name="url"
|
||||
type="text"
|
||||
:value="item.url"
|
||||
:label="t('components.form-wishlist-item.url.label')"
|
||||
/>
|
||||
<InputText
|
||||
name="imageSrc"
|
||||
type="text"
|
||||
:value="item.imageSrc"
|
||||
:label="t('components.form-wishlist-item.image-src.label')"
|
||||
/>
|
||||
<InputCheckbox
|
||||
name="bought"
|
||||
:value="item.bought"
|
||||
:label="t('components.form-wishlist-item.bought.label')"
|
||||
/>
|
||||
<ButtonBase
|
||||
class="h-12 w-full"
|
||||
mode="primary"
|
||||
:disabled="!meta.valid"
|
||||
:icon="IconSave"
|
||||
>{{ t('components.form-wishlist-item.submit.text') }}</ButtonBase
|
||||
>
|
||||
</Form>
|
||||
<ButtonBase
|
||||
class="h-12 w-full"
|
||||
mode="danger"
|
||||
|
@ -34,3 +63,41 @@ const emits = defineEmits(['delete'])
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Form } from 'vee-validate'
|
||||
import ImagePreview from './ImagePreview.vue'
|
||||
import { object, string, boolean } from 'yup'
|
||||
import {
|
||||
ButtonBase,
|
||||
InputText,
|
||||
InputCheckbox,
|
||||
InputTextArea,
|
||||
} from '@/components'
|
||||
import { IconSave, IconDelete } from '@/components/icons'
|
||||
import { WishlistItem } from '@/types'
|
||||
defineProps<{
|
||||
item: WishlistItem
|
||||
}>()
|
||||
const { t } = useI18n()
|
||||
|
||||
const emits = defineEmits(['update', 'delete'])
|
||||
|
||||
const schema = object({
|
||||
title: string().required(
|
||||
t('components.form-wishlist-item.title.error-requried')
|
||||
),
|
||||
description: string()
|
||||
.required(t('components.form-wishlist-item.description.error-requried'))
|
||||
.max(300, t('components.form-wishlist-item.description.error-max')),
|
||||
url: string().url(t('components.form-wishlist-item.url.error-url')),
|
||||
imageSrc: string().url(
|
||||
t('components.form-wishlist-item.image-src.error-url')
|
||||
),
|
||||
bought: boolean(),
|
||||
})
|
||||
|
||||
const onSubmit = async (values: any): Promise<void> => {
|
||||
emits('update', values)
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -16,19 +16,15 @@
|
|||
</div>
|
||||
<div>
|
||||
<i18n-t
|
||||
keypath="components.wishlist-header.main.form.image-file.text-dropzone"
|
||||
keypath="components.file.text-dropzone"
|
||||
tag="p"
|
||||
for="components.wishlist-header.main.form.image-file.text-dropzone-link"
|
||||
for="components.file.text-dropzone-link"
|
||||
>
|
||||
<button
|
||||
class="cursor-pointer text-cyan-600"
|
||||
@click.prevent="fileInput.click()"
|
||||
>
|
||||
{{
|
||||
t(
|
||||
'components.wishlist-header.main.form.image-file.text-dropzone-link'
|
||||
)
|
||||
}}
|
||||
{{ t('components.file.text-dropzone-link') }}
|
||||
</button>
|
||||
</i18n-t>
|
||||
<input
|
||||
|
|
|
@ -40,6 +40,32 @@ const update = async (updatedData: Wishlist): Promise<void> => {
|
|||
}
|
||||
}
|
||||
|
||||
const updateItem = async (
|
||||
currentValues: WishlistItem,
|
||||
newValues: WishlistItem
|
||||
): Promise<void> => {
|
||||
const id = state.value?.id
|
||||
const payload = {
|
||||
...currentValues,
|
||||
...newValues,
|
||||
}
|
||||
try {
|
||||
const { data } = await client.put(
|
||||
`/wishlist/${id}/item/${currentValues.id}`,
|
||||
payload
|
||||
)
|
||||
state.value?.items?.splice(
|
||||
state.value.items.indexOf(currentValues),
|
||||
1,
|
||||
data
|
||||
)
|
||||
} catch (e: any) {
|
||||
if (e.isAxiosError && !(<CustomAxiosError>e.ignore)) {
|
||||
throw e
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const itemBought = async (item: WishlistItem): Promise<void> => {
|
||||
await client.post(`/wishlist/${item.wishlistId}/item/${item.id}/bought`)
|
||||
item.bought = true
|
||||
|
@ -65,6 +91,7 @@ export const useWishlistStore = () => {
|
|||
isReady,
|
||||
fetch,
|
||||
update,
|
||||
updateItem,
|
||||
itemBought,
|
||||
itemDelete,
|
||||
filteredItems,
|
||||
|
|
|
@ -6,13 +6,11 @@
|
|||
"loading": {
|
||||
"text": "Lade..."
|
||||
},
|
||||
"wishlist": {
|
||||
"saved": {
|
||||
"text": "Wunschliste gespeichert"
|
||||
},
|
||||
"saving-failed": {
|
||||
"text": "Wunschliste konnte nicht gespeichert werden"
|
||||
}
|
||||
"saved": {
|
||||
"text": "Wunschliste gespeichert"
|
||||
},
|
||||
"saving-failed": {
|
||||
"text": "Wunschliste konnte nicht gespeichert werden"
|
||||
}
|
||||
},
|
||||
"errors": {
|
||||
|
@ -81,6 +79,10 @@
|
|||
}
|
||||
},
|
||||
"components": {
|
||||
"file": {
|
||||
"text-dropzone-link": "hier",
|
||||
"text-dropzone": "Ziehen Sie ein beliebiges Bild hierher oder klicken Sie {0}, um den Dialog zu öffnen."
|
||||
},
|
||||
"wishlist-item": {
|
||||
"external-product-page-link": {
|
||||
"text": "Produktseite öffnen"
|
||||
|
@ -92,39 +94,60 @@
|
|||
"text": "Löschen"
|
||||
}
|
||||
},
|
||||
"wishlist-header": {
|
||||
"main": {
|
||||
"form": {
|
||||
"title": {
|
||||
"label": "Titel",
|
||||
"error-requried": "Titel wird benötigt"
|
||||
},
|
||||
"public": {
|
||||
"label": "Auf der Startseite anzeigen?"
|
||||
},
|
||||
"description": {
|
||||
"label": "Beschreibung",
|
||||
"error-max": "Die maximale Länge beträgt 300 Zeichen"
|
||||
},
|
||||
"slug-text": {
|
||||
"label": "URL Slug-Text",
|
||||
"error-requried": "URL Slug-Text wird benötigt"
|
||||
},
|
||||
"image-src": {
|
||||
"label": "Bild-URL",
|
||||
"error-requried": "Bild-URL wird benötigt"
|
||||
},
|
||||
"image-file": {
|
||||
"label": "Bild-Datei",
|
||||
"text-dropzone-link": "hier",
|
||||
"text-dropzone": "Ziehen Sie ein beliebiges Bild hierher oder klicken Sie {0}, um den Dialog zu öffnen.",
|
||||
"error-requried": "Bild-Datei wird benötigt",
|
||||
"error-image-size": "Höhe und Breite dürfen 200px nicht überschreiten."
|
||||
},
|
||||
"submit": {
|
||||
"text": "Speichern"
|
||||
}
|
||||
}
|
||||
"form-wishlist": {
|
||||
"title": {
|
||||
"label": "Titel",
|
||||
"error-requried": "Titel wird benötigt."
|
||||
},
|
||||
"public": {
|
||||
"label": "Auf der Startseite anzeigen?"
|
||||
},
|
||||
"description": {
|
||||
"label": "Beschreibung",
|
||||
"error-max": "Die maximale Länge beträgt 300 Zeichen."
|
||||
},
|
||||
"slug-text": {
|
||||
"label": "URL Slug-Text",
|
||||
"error-requried": "URL Slug-Text wird benötigt."
|
||||
},
|
||||
"image-src": {
|
||||
"label": "Bild-URL",
|
||||
"error-requried": "Bild-URL wird benötigt."
|
||||
},
|
||||
"image-file": {
|
||||
"label": "Bild-Datei",
|
||||
"text-dropzone-link": "hier",
|
||||
"text-dropzone": "Ziehen Sie ein beliebiges Bild hierher oder klicken Sie {0}, um den Dialog zu öffnen.",
|
||||
"error-requried": "Bild-Datei wird benötigt.",
|
||||
"error-image-size": "Höhe und Breite dürfen 200px nicht überschreiten."
|
||||
},
|
||||
"submit": {
|
||||
"text": "Speichern"
|
||||
}
|
||||
},
|
||||
"form-wishlist-item": {
|
||||
"title": {
|
||||
"label": "Titel",
|
||||
"error-requried": "Titel wird benötigt."
|
||||
},
|
||||
"description": {
|
||||
"label": "Beschreibung",
|
||||
"error-requried": "Beschreibung wird benötigt.",
|
||||
"error-max": "Die maximale Länge beträgt 300 Zeichen."
|
||||
},
|
||||
"url": {
|
||||
"label": "Produkt-URL",
|
||||
"error-url": "Keine gültige URL."
|
||||
},
|
||||
"image-src": {
|
||||
"label": "Bild-URL",
|
||||
"error-url": "Keine gültige URL."
|
||||
},
|
||||
"bought": {
|
||||
"label": "Gekauft?"
|
||||
},
|
||||
"submit": {
|
||||
"text": "Speichern"
|
||||
}
|
||||
},
|
||||
"header": {
|
||||
|
|
|
@ -6,13 +6,11 @@
|
|||
"loading": {
|
||||
"text": "Loading..."
|
||||
},
|
||||
"wishlist": {
|
||||
"saved": {
|
||||
"text": "Wishlist saved"
|
||||
},
|
||||
"saving-failed": {
|
||||
"text": "Saving wishlist failed"
|
||||
}
|
||||
"saved": {
|
||||
"text": "Wishlist saved"
|
||||
},
|
||||
"saving-failed": {
|
||||
"text": "Saving wishlist failed"
|
||||
}
|
||||
},
|
||||
"errors": {
|
||||
|
@ -81,6 +79,10 @@
|
|||
}
|
||||
},
|
||||
"components": {
|
||||
"file": {
|
||||
"text-dropzone-link": "click here",
|
||||
"text-dropzone": "drag and drop any image here or {0} to open dialog."
|
||||
},
|
||||
"wishlist-item": {
|
||||
"external-product-page-link": {
|
||||
"text": "Open product page"
|
||||
|
@ -92,37 +94,57 @@
|
|||
"text": "Delete"
|
||||
}
|
||||
},
|
||||
"wishlist-header": {
|
||||
"main": {
|
||||
"form": {
|
||||
"title": {
|
||||
"label": "Title"
|
||||
},
|
||||
"public": {
|
||||
"label": "Show on startpage?"
|
||||
},
|
||||
"description": {
|
||||
"label": "Description",
|
||||
"error-max": "The max. length is 300 chars."
|
||||
},
|
||||
"slug-text": {
|
||||
"label": "URL Slug-Text"
|
||||
},
|
||||
"image-src": {
|
||||
"label": "Image-URL",
|
||||
"error-requried": "Image-URL is required"
|
||||
},
|
||||
"image-file": {
|
||||
"label": "Image-File",
|
||||
"text-dropzone-link": "click here",
|
||||
"text-dropzone": "drag and drop any image here or {0} to open dialog.",
|
||||
"error-requried": "Image-File is required",
|
||||
"error-image-size": "Height and Width must not exceed 200px."
|
||||
},
|
||||
"submit": {
|
||||
"text": "Save"
|
||||
}
|
||||
}
|
||||
"form-wishlist": {
|
||||
"title": {
|
||||
"label": "Title",
|
||||
"error-requried": "Titel is required."
|
||||
},
|
||||
"public": {
|
||||
"label": "Show on startpage?"
|
||||
},
|
||||
"description": {
|
||||
"label": "Description",
|
||||
"error-max": "The max. length is 300 chars."
|
||||
},
|
||||
"slug-text": {
|
||||
"label": "URL Slug-Text"
|
||||
},
|
||||
"image-src": {
|
||||
"label": "Image-URL",
|
||||
"error-requried": "Image-URL is required."
|
||||
},
|
||||
"image-file": {
|
||||
"label": "Image-File",
|
||||
"error-requried": "Image-File is required.",
|
||||
"error-image-size": "Height and Width must not exceed 200px."
|
||||
},
|
||||
"submit": {
|
||||
"text": "Save"
|
||||
}
|
||||
},
|
||||
"form-wishlist-item": {
|
||||
"title": {
|
||||
"label": "Title",
|
||||
"error-requried": "Title is required."
|
||||
},
|
||||
"description": {
|
||||
"label": "Description",
|
||||
"error-requried": "Description is required.",
|
||||
"error-max": "The max. length is 300 chars."
|
||||
},
|
||||
"url": {
|
||||
"label": "Produkt-URL",
|
||||
"error-url": "Invalid URL"
|
||||
},
|
||||
"image-src": {
|
||||
"label": "Bild-URL",
|
||||
"error-url": "Invalid URL"
|
||||
},
|
||||
"bought": {
|
||||
"label": "Bought?"
|
||||
},
|
||||
"submit": {
|
||||
"text": "Save"
|
||||
}
|
||||
},
|
||||
"header": {
|
||||
|
|
|
@ -24,6 +24,7 @@ const {
|
|||
fetch,
|
||||
isReady,
|
||||
update,
|
||||
updateItem,
|
||||
itemBought,
|
||||
itemDelete,
|
||||
filteredItems,
|
||||
|
@ -33,10 +34,22 @@ await fetch(route.params.slug as string)
|
|||
const handleUpdateWishlist = async (wishlist: Wishlist): Promise<void> => {
|
||||
try {
|
||||
await update(wishlist)
|
||||
toast.success(t('common.wishlist.saved.text'))
|
||||
toast.success(t('common.saved.text'))
|
||||
router.push(`/${wishlist.slugUrlText}`)
|
||||
} catch (error) {
|
||||
toast.error(t('common.wishlist.saving-failed.text'))
|
||||
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'))
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -93,6 +106,7 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
|
|||
<FormWishlistItem
|
||||
v-else
|
||||
:item="item"
|
||||
@update="(updateValues) => handleUpdateItem(item, updateValues)"
|
||||
@delete="handleDeleteItem(item)"
|
||||
/>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Reference in a new issue