fix: ui enhancement, tag input improvement (convert all to lowercase)…

…, modal closing bug Signed-off-by: Johannes Groß <mail@gross-johannes.de>
jo-gross · Aug 24, 2024 · da30001 · da30001
1 parent 9f1d655
commit da30001
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 61 deletions.
diff --git a/components/cocktails/CocktailRecipeCardItem.tsx b/components/cocktails/CocktailRecipeCardItem.tsx
@@ -37,20 +37,19 @@ export default function CocktailRecipeCardItem(props: CocktailRecipeOverviewItem
             cocktailRecipe={props.cocktailRecipe}
             image={props.image}
           />
-          <div className={'h-full'}></div>
-          <div className={'bottom-0'}>
+          <>
             {props.showDescription && props.cocktailRecipe.description ? (
               <>
-                <div className={'mb-2 mt-2 border-b border-base-100'}></div>
+                <div className={'border-b border-base-100'}></div>
                 <div className={'font-bold'}>Beschreibung</div>
                 <div className={'whitespace-pre-line text-pretty break-normal text-justify'}>{props.cocktailRecipe.description}</div>
               </>
             ) : (
               <></>
             )}
             {props.showTags && props.cocktailRecipe.tags.length > 0 ? (
-              <div>
-                <div className={'mb-2 mt-2 border-b border-base-100'}></div>
+              <div className={'h-full content-end'}>
+                <div className={'mb-2 border-b border-base-100'}></div>
                 {props.cocktailRecipe.tags.map((tag) => (
                   <span key={`cocktail-overview-item-${props.cocktailRecipe.id}-tag-${tag}`} className={'badge badge-primary badge-outline mr-1'}>
                     {tag}
@@ -99,7 +98,7 @@ export default function CocktailRecipeCardItem(props: CocktailRecipeOverviewItem
             ) : (
               <></>
             )}
-          </div>
+          </>
         </div>
       </div>
     </div>

diff --git 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) => (
                                                 <option key={`steps.${indexStep}.ingredients.${indexIngredient}.units-${value.unitId}`} value={value.unitId}>
                                                   {userContext.getTranslation(value.unit.name, 'de')}
                                                 </option>

diff --git a/components/cocktails/CompactCocktailRecipeInstruction.tsx b/components/cocktails/CompactCocktailRecipeInstruction.tsx
@@ -50,63 +50,58 @@ export function CompactCocktailRecipeInstruction(props: CompactCocktailRecipeIns
         <div>Eis: {userContext.getTranslation(props.cocktailRecipe.ice?.name ?? '<Eis>', 'de')}</div>
       </div>
       <div className={'col-span-4 border-b border-base-100'}></div>
-      <div className={`${props.showImage == true ? 'col-span-3' : 'col-span-4'}`}>
-        {props.cocktailRecipe.steps
-          ?.sort((a, b) => a.stepNumber - b.stepNumber)
-          ?.map((step, index) => (
-            <div key={`step-${step.id}`} className={'break-words pb-2'}>
-              <span className={'font-bold'}>{userContext.getTranslation(step.action.name, 'de')}</span>
-              {step.ingredients
-                ?.sort((a, b) => a.ingredientNumber - b.ingredientNumber)
-                .map((stepIngredient, indexIngredient) => (
-                  <div key={`cocktail-${props.cocktailRecipe.id}-step-${step.id}-ingredient-${stepIngredient.id}-index-${indexIngredient}`}>
-                    {stepIngredient.amount ?? ''} {userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')}{' '}
-                    {stepIngredient.ingredient?.shortName ?? stepIngredient.ingredient?.name ?? ''}{' '}
-                    {indexIngredient < step.ingredients.length - 1 ? <></> : <></>}
+      <div className={`col-span-4 grid grid-cols-6 gap-1`}>
+        <div className={`${props.showImage == true && props.cocktailRecipe._count.CocktailRecipeImage > 0 ? 'col-span-4' : 'col-span-6'}`}>
+          {props.cocktailRecipe.steps
+            ?.sort((a, b) => a.stepNumber - b.stepNumber)
+            ?.map((step, index) => (
+              <div key={`step-${step.id}`} className={'break-words pb-2'}>
+                <span className={'font-bold'}>{userContext.getTranslation(step.action.name, 'de')}</span>
+                {step.ingredients
+                  ?.sort((a, b) => a.ingredientNumber - b.ingredientNumber)
+                  .map((stepIngredient, indexIngredient) => (
+                    <div key={`cocktail-${props.cocktailRecipe.id}-step-${step.id}-ingredient-${stepIngredient.id}-index-${indexIngredient}`}>
+                      {stepIngredient.amount ?? ''} {userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')}{' '}
+                      {stepIngredient.ingredient?.shortName ?? stepIngredient.ingredient?.name ?? ''}{' '}
+                      {indexIngredient < step.ingredients.length - 1 ? <></> : <></>}
+                    </div>
+                  ))}
+              </div>
+            ))}
+
+          {props.cocktailRecipe.garnishes.length == 0 ? <></> : <div className={`border-b border-base-100`}></div>}
+          <div>
+            {props.cocktailRecipe.garnishes.length == 0 ? <></> : <div className={'font-bold'}>Deko</div>}
+            <div>
+              {props.cocktailRecipe.garnishes
+                ?.sort((a, b) => a.garnishNumber - b.garnishNumber)
+                .map((garnish) => (
+                  <div key={`cocktail-${props.cocktailRecipe.id}-garnish-${garnish.garnishNumber}-garnishId-${garnish.garnishId}`}>
+                    {garnish?.garnish?.name}
+                    {garnish.optional ? ' (optional)' : ''}
                   </div>
-                ))}
+                )) ?? 'Keine'}
             </div>
-          ))}
-      </div>
-      {props.showImage == true ? (
-        props.cocktailRecipe._count.CocktailRecipeImage == 0 ? (
+          </div>
+        </div>
+        {props.showImage == true && props.cocktailRecipe._count.CocktailRecipeImage == 0 ? (
           <></>
         ) : (
-          <div className={'row-span-3 h-full self-center justify-self-center pt-2'}>
+          <div className={'col-span-2 h-full w-full items-center self-center justify-self-center'}>
             <Image
               onClick={() =>
                 modalContext.openModal(
                   <ImageModal image={props.image ?? `/api/workspaces/${props.cocktailRecipe.workspaceId}/cocktails/${props.cocktailRecipe.id}/image`} />,
                 )
               }
               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}
             />
           </div>
-        )
-      ) : (
-        <></>
-      )}
-      {props.cocktailRecipe.garnishes.length == 0 ? (
-        <></>
-      ) : (
-        <div className={`border-b border-base-100 ${props.showImage == true && props.image ? 'col-span-3' : 'col-span-4'}`}></div>
-      )}
-      <div className={`${props.showImage == true ? 'col-span-3' : 'col-span-4'}`}>
-        {props.cocktailRecipe.garnishes.length == 0 ? <></> : <div className={'font-bold'}>Deko</div>}
-        <div>
-          {props.cocktailRecipe.garnishes
-            ?.sort((a, b) => a.garnishNumber - b.garnishNumber)
-            .map((garnish) => (
-              <div key={`cocktail-${props.cocktailRecipe.id}-garnish-${garnish.garnishNumber}-garnishId-${garnish.garnishId}`}>
-                {garnish?.garnish?.name}
-                {garnish.optional ? ' (optional)' : ''}
-              </div>
-            )) ?? 'Keine'}
-        </div>
+        )}
       </div>
     </div>
   );

diff --git a/components/ingredients/IngredientForm.tsx b/components/ingredients/IngredientForm.tsx
@@ -341,15 +341,17 @@ export function IngredientForm(props: IngredientFormProps) {
                           <option value={''} disabled>
                             Auswählen...
                           </option>
-                          {allUnits.map((unit) => (
-                            <option
-                              key={`unit-option-${unit.id}`}
-                              value={unit.id}
-                              disabled={(values.units as FormUnitValue[]).find((u) => u.unitId == unit.id) != undefined}
-                            >
-                              {userContext.getTranslation(unit.name, 'de')}
-                            </option>
-                          ))}
+                          {allUnits
+                            .sort((a, b) => userContext.getTranslation(a.name, 'de').localeCompare(userContext.getTranslation(b.name, 'de')))
+                            .map((unit) => (
+                              <option
+                                key={`unit-option-${unit.id}`}
+                                value={unit.id}
+                                disabled={(values.units as FormUnitValue[]).find((u) => u.unitId == unit.id) != undefined}
+                              >
+                                {userContext.getTranslation(unit.name, 'de')}
+                              </option>
+                            ))}
                         </>
                       )}
                     </select>

diff --git a/components/modals/CocktailDetailModal.tsx b/components/modals/CocktailDetailModal.tsx
@@ -66,7 +66,7 @@ export function CocktailDetailModal(props: CocktailDetailModalProps) {
           <>
             {userContext.isUserPermitted(Role.MANAGER) && (
               <Link href={`/workspaces/${workspaceId}/manage/cocktails/${loadedCocktail.id}`}>
-                <div className={'btn btn-square btn-outline btn-secondary btn-sm'} onClick={() => modalContext.closeModal()}>
+                <div className={'btn btn-square btn-outline btn-secondary btn-sm'} onClick={() => modalContext.closeAllModals()}>
                   <FaPencilAlt />
                 </div>
               </Link>

diff --git 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<ModalContextProps>({
   content: [],
   openModal: () => {},
   closeModal: () => {},
+  closeAllModals: () => {},
 });
diff --git a/models/tags/TagUtils.tsx b/models/tags/TagUtils.tsx
@@ -1,17 +1,17 @@
 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);
   });
   return newTags;
 }
 
 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
@@ -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();
+            },
           }}
         >
           <AuthBoundary>