added show/hide for ingrediens form

This commit is contained in:
2026-02-14 08:08:26 +01:00
parent 276cc21c5a
commit 072f44c213
2 changed files with 12 additions and 1 deletions

View File

@ -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)

View File

@ -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"