From da30001ba43f3be197da8e48aee2b518d817d7ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johannes=20Gro=C3=9F?= Date: Sat, 24 Aug 2024 14:09:16 +0200 Subject: [PATCH] fix: ui enhancement, tag input improvement (convert all to lowercase), modal closing bug MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Johannes Groß --- .../cocktails/CocktailRecipeCardItem.tsx | 11 ++- components/cocktails/CocktailRecipeForm.tsx | 5 +- .../CompactCocktailRecipeInstruction.tsx | 77 +++++++++---------- components/ingredients/IngredientForm.tsx | 20 ++--- components/modals/CocktailDetailModal.tsx | 2 +- lib/context/ModalContextProvider.tsx | 3 + models/tags/TagUtils.tsx | 6 +- pages/_app.tsx | 7 ++ 8 files changed, 70 insertions(+), 61 deletions(-) diff --git a/components/cocktails/CocktailRecipeCardItem.tsx b/components/cocktails/CocktailRecipeCardItem.tsx index 7be0d1af..cb841c4a 100644 --- a/components/cocktails/CocktailRecipeCardItem.tsx +++ b/components/cocktails/CocktailRecipeCardItem.tsx @@ -37,11 +37,10 @@ export default function CocktailRecipeCardItem(props: CocktailRecipeOverviewItem cocktailRecipe={props.cocktailRecipe} image={props.image} /> -
-
+ <> {props.showDescription && props.cocktailRecipe.description ? ( <> -
+
Beschreibung
{props.cocktailRecipe.description}
@@ -49,8 +48,8 @@ export default function CocktailRecipeCardItem(props: CocktailRecipeOverviewItem <> )} {props.showTags && props.cocktailRecipe.tags.length > 0 ? ( -
-
+
+
{props.cocktailRecipe.tags.map((tag) => ( {tag} @@ -99,7 +98,7 @@ export default function CocktailRecipeCardItem(props: CocktailRecipeOverviewItem ) : ( <> )} -
+
diff --git a/components/cocktails/CocktailRecipeForm.tsx b/components/cocktails/CocktailRecipeForm.tsx index 01cc2e41..b3fa631c 100644 --- a/components/cocktails/CocktailRecipeForm.tsx +++ b/components/cocktails/CocktailRecipeForm.tsx @@ -1010,7 +1010,10 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) { )} {ingredients .find((ingredient) => ingredient.id == values.steps[indexStep].ingredients[indexIngredient]?.ingredientId) - ?.IngredientVolume?.map((value) => ( + ?.IngredientVolume?.sort((a, b) => + userContext.getTranslation(a.unit.name, 'de').localeCompare(userContext.getTranslation(b.unit.name, 'de')), + ) + ?.map((value) => ( diff --git a/components/cocktails/CompactCocktailRecipeInstruction.tsx b/components/cocktails/CompactCocktailRecipeInstruction.tsx index df5122a4..11e2a98e 100644 --- a/components/cocktails/CompactCocktailRecipeInstruction.tsx +++ b/components/cocktails/CompactCocktailRecipeInstruction.tsx @@ -50,29 +50,44 @@ export function CompactCocktailRecipeInstruction(props: CompactCocktailRecipeIns
Eis: {userContext.getTranslation(props.cocktailRecipe.ice?.name ?? '', 'de')}
-
- {props.cocktailRecipe.steps - ?.sort((a, b) => a.stepNumber - b.stepNumber) - ?.map((step, index) => ( -
- {userContext.getTranslation(step.action.name, 'de')} - {step.ingredients - ?.sort((a, b) => a.ingredientNumber - b.ingredientNumber) - .map((stepIngredient, indexIngredient) => ( -
- {stepIngredient.amount ?? ''} {userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')}{' '} - {stepIngredient.ingredient?.shortName ?? stepIngredient.ingredient?.name ?? ''}{' '} - {indexIngredient < step.ingredients.length - 1 ? <> : <>} +
+
0 ? 'col-span-4' : 'col-span-6'}`}> + {props.cocktailRecipe.steps + ?.sort((a, b) => a.stepNumber - b.stepNumber) + ?.map((step, index) => ( +
+ {userContext.getTranslation(step.action.name, 'de')} + {step.ingredients + ?.sort((a, b) => a.ingredientNumber - b.ingredientNumber) + .map((stepIngredient, indexIngredient) => ( +
+ {stepIngredient.amount ?? ''} {userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')}{' '} + {stepIngredient.ingredient?.shortName ?? stepIngredient.ingredient?.name ?? ''}{' '} + {indexIngredient < step.ingredients.length - 1 ? <> : <>} +
+ ))} +
+ ))} + + {props.cocktailRecipe.garnishes.length == 0 ? <> :
} +
+ {props.cocktailRecipe.garnishes.length == 0 ? <> :
Deko
} +
+ {props.cocktailRecipe.garnishes + ?.sort((a, b) => a.garnishNumber - b.garnishNumber) + .map((garnish) => ( +
+ {garnish?.garnish?.name} + {garnish.optional ? ' (optional)' : ''}
- ))} + )) ?? 'Keine'}
- ))} -
- {props.showImage == true ? ( - props.cocktailRecipe._count.CocktailRecipeImage == 0 ? ( +
+
+ {props.showImage == true && props.cocktailRecipe._count.CocktailRecipeImage == 0 ? ( <> ) : ( -
+
modalContext.openModal( @@ -80,33 +95,13 @@ export function CompactCocktailRecipeInstruction(props: CompactCocktailRecipeIns ) } src={props.image ?? `/api/workspaces/${props.cocktailRecipe.workspaceId}/cocktails/${props.cocktailRecipe.id}/image`} - className={'h-full w-fit cursor-pointer rounded-xl object-cover'} + className={'h-full w-full cursor-pointer rounded-xl object-cover'} alt={''} width={300} height={300} />
- ) - ) : ( - <> - )} - {props.cocktailRecipe.garnishes.length == 0 ? ( - <> - ) : ( -
- )} -
- {props.cocktailRecipe.garnishes.length == 0 ? <> :
Deko
} -
- {props.cocktailRecipe.garnishes - ?.sort((a, b) => a.garnishNumber - b.garnishNumber) - .map((garnish) => ( -
- {garnish?.garnish?.name} - {garnish.optional ? ' (optional)' : ''} -
- )) ?? 'Keine'} -
+ )}
); diff --git a/components/ingredients/IngredientForm.tsx b/components/ingredients/IngredientForm.tsx index 202f4cff..c0715f9a 100644 --- a/components/ingredients/IngredientForm.tsx +++ b/components/ingredients/IngredientForm.tsx @@ -341,15 +341,17 @@ export function IngredientForm(props: IngredientFormProps) { - {allUnits.map((unit) => ( - - ))} + {allUnits + .sort((a, b) => userContext.getTranslation(a.name, 'de').localeCompare(userContext.getTranslation(b.name, 'de'))) + .map((unit) => ( + + ))} )} diff --git a/components/modals/CocktailDetailModal.tsx b/components/modals/CocktailDetailModal.tsx index ca4d4db0..878afbc9 100644 --- a/components/modals/CocktailDetailModal.tsx +++ b/components/modals/CocktailDetailModal.tsx @@ -66,7 +66,7 @@ export function CocktailDetailModal(props: CocktailDetailModalProps) { <> {userContext.isUserPermitted(Role.MANAGER) && ( -
modalContext.closeModal()}> +
modalContext.closeAllModals()}>
diff --git a/lib/context/ModalContextProvider.tsx b/lib/context/ModalContextProvider.tsx index 362e2b17..c4e6abd1 100644 --- a/lib/context/ModalContextProvider.tsx +++ b/lib/context/ModalContextProvider.tsx @@ -6,10 +6,13 @@ interface ModalContextProps { openModal: (content: JSX.Element) => void; closeModal(): void; + + closeAllModals(): void; } export const ModalContext = createContext({ content: [], openModal: () => {}, closeModal: () => {}, + closeAllModals: () => {}, }); diff --git a/models/tags/TagUtils.tsx b/models/tags/TagUtils.tsx index 684cd7ef..7b91213d 100644 --- a/models/tags/TagUtils.tsx +++ b/models/tags/TagUtils.tsx @@ -1,7 +1,7 @@ const tagRegex = new RegExp('^([a-zäöüß]+)$'); export function updateTags(localTags: string[], setTagValidation: (validation: string | null) => void): string[] { - const newTags = localTags.map((tag) => tag.trim()); + const newTags = localTags.map((tag) => tag.trim().toLowerCase()); newTags.forEach((tag) => { validateTag(tag, setTagValidation); }); @@ -9,9 +9,9 @@ export function updateTags(localTags: string[], setTagValidation: (validation: s } export function validateTag(tag: string, setTagValidation: (validation: string | null) => void) { - const valid = tagRegex.test(tag); + const valid = tagRegex.test(tag.toLowerCase()); if (!valid) { - setTagValidation('Tag darf nur Kleinbuchstaben haben und keine Leerzeichen (z.B. "sour")'); + setTagValidation('Der Tag darf nur Kleinbuchstaben, keine Leerzeichen und keine Sonderzeichen enthalten (z.B. "sour")'); } else { setTagValidation(null); } diff --git a/pages/_app.tsx b/pages/_app.tsx index a51d13a0..ef23b2bc 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -45,6 +45,13 @@ const App = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => { forceUpdate(); }, + closeAllModals() { + setModalContentStack([]); + if ((document.getElementById('globalModal') as HTMLDialogElement | null)?.open == true) { + (document.getElementById('globalModal') as HTMLDialogElement).close(); + } + forceUpdate(); + }, }} >