added show/hide for ingrediens form
This commit is contained in:
@ -41,5 +41,9 @@ Výstup: konkrétny návrh + ukážky kódu, nie všeobecné rady.
|
||||
----- 2026-02-14 07:16:25 -----------------------------------------------------
|
||||
dopln kluce pre UI texty pre preklad, pre kluce pouzivaj anglictinu, dopln potom aj vsetky preklady vo frontend/src/locales/*.json
|
||||
|
||||
----- 2026-02-14 07:33:30 -----------------------------------------------------
|
||||
----- 2026-02-14 08:05:38 -----------------------------------------------------
|
||||
na zobrazeni app/ingredients sprav aby formular pre pridanie novej suroviny sa zobrazil az ked kliknem na tlacitko Nova surovina, a po uspesnom ulozeni ten formular pre pridanie novej suroviny skry, nezabudni vynulovat udaje vo formulari po ulozeni
|
||||
|
||||
|
||||
---
|
||||
doplniť jemnejší UX flow (toasty, confirm modaly pri delete, loading/error states per card)
|
||||
@ -8,6 +8,7 @@ import type { Ingredient } from '@/types/domain'
|
||||
const ingredientsStore = useIngredientsStore()
|
||||
const editingId = ref<number | null>(null)
|
||||
const saving = ref(false)
|
||||
const formMode = ref<'hidden' | 'create' | 'edit'>('hidden')
|
||||
const { t } = useI18n()
|
||||
|
||||
onMounted(async () => {
|
||||
@ -25,14 +26,17 @@ const editingIngredient = computed<Ingredient | null>(() => {
|
||||
|
||||
const startCreate = () => {
|
||||
editingId.value = null
|
||||
formMode.value = 'create'
|
||||
}
|
||||
|
||||
const startEdit = (ingredientId: number) => {
|
||||
editingId.value = ingredientId
|
||||
formMode.value = 'edit'
|
||||
}
|
||||
|
||||
const cancelEdit = () => {
|
||||
editingId.value = null
|
||||
formMode.value = 'hidden'
|
||||
}
|
||||
|
||||
const saveIngredient = async (payload: {
|
||||
@ -52,6 +56,7 @@ const saveIngredient = async (payload: {
|
||||
await ingredientsStore.createIngredient(payload)
|
||||
}
|
||||
editingId.value = null
|
||||
formMode.value = 'hidden'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
@ -61,6 +66,7 @@ const removeIngredient = async (ingredientId: number) => {
|
||||
await ingredientsStore.deleteIngredient(ingredientId)
|
||||
if (editingId.value === ingredientId) {
|
||||
editingId.value = null
|
||||
formMode.value = 'hidden'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -68,6 +74,7 @@ const removeIngredient = async (ingredientId: number) => {
|
||||
<template>
|
||||
<section class="page">
|
||||
<IngredientForm
|
||||
v-if="formMode !== 'hidden'"
|
||||
:initial="editingIngredient"
|
||||
:submit-label="saving ? t('common.saving') : t('common.save')"
|
||||
@save="saveIngredient"
|
||||
|
||||
Reference in New Issue
Block a user