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 -----------------------------------------------------
|
----- 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
|
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)
|
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 ingredientsStore = useIngredientsStore()
|
||||||
const editingId = ref<number | null>(null)
|
const editingId = ref<number | null>(null)
|
||||||
const saving = ref(false)
|
const saving = ref(false)
|
||||||
|
const formMode = ref<'hidden' | 'create' | 'edit'>('hidden')
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
@ -25,14 +26,17 @@ const editingIngredient = computed<Ingredient | null>(() => {
|
|||||||
|
|
||||||
const startCreate = () => {
|
const startCreate = () => {
|
||||||
editingId.value = null
|
editingId.value = null
|
||||||
|
formMode.value = 'create'
|
||||||
}
|
}
|
||||||
|
|
||||||
const startEdit = (ingredientId: number) => {
|
const startEdit = (ingredientId: number) => {
|
||||||
editingId.value = ingredientId
|
editingId.value = ingredientId
|
||||||
|
formMode.value = 'edit'
|
||||||
}
|
}
|
||||||
|
|
||||||
const cancelEdit = () => {
|
const cancelEdit = () => {
|
||||||
editingId.value = null
|
editingId.value = null
|
||||||
|
formMode.value = 'hidden'
|
||||||
}
|
}
|
||||||
|
|
||||||
const saveIngredient = async (payload: {
|
const saveIngredient = async (payload: {
|
||||||
@ -52,6 +56,7 @@ const saveIngredient = async (payload: {
|
|||||||
await ingredientsStore.createIngredient(payload)
|
await ingredientsStore.createIngredient(payload)
|
||||||
}
|
}
|
||||||
editingId.value = null
|
editingId.value = null
|
||||||
|
formMode.value = 'hidden'
|
||||||
} finally {
|
} finally {
|
||||||
saving.value = false
|
saving.value = false
|
||||||
}
|
}
|
||||||
@ -61,6 +66,7 @@ const removeIngredient = async (ingredientId: number) => {
|
|||||||
await ingredientsStore.deleteIngredient(ingredientId)
|
await ingredientsStore.deleteIngredient(ingredientId)
|
||||||
if (editingId.value === ingredientId) {
|
if (editingId.value === ingredientId) {
|
||||||
editingId.value = null
|
editingId.value = null
|
||||||
|
formMode.value = 'hidden'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -68,6 +74,7 @@ const removeIngredient = async (ingredientId: number) => {
|
|||||||
<template>
|
<template>
|
||||||
<section class="page">
|
<section class="page">
|
||||||
<IngredientForm
|
<IngredientForm
|
||||||
|
v-if="formMode !== 'hidden'"
|
||||||
:initial="editingIngredient"
|
:initial="editingIngredient"
|
||||||
:submit-label="saving ? t('common.saving') : t('common.save')"
|
:submit-label="saving ? t('common.saving') : t('common.save')"
|
||||||
@save="saveIngredient"
|
@save="saveIngredient"
|
||||||
|
|||||||
Reference in New Issue
Block a user