fix: Fixed number localization and cocktail queue mobile layout

Signed-off-by: Johannes Groß <[email protected]>
jo-gross · Jan 17, 2025 · 51541af · 51541af
1 parent 3cd8824
commit 51541af
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 46 deletions.
diff --git a/components/cocktails/CocktailRecipeForm.tsx b/components/cocktails/CocktailRecipeForm.tsx
@@ -837,13 +837,20 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                                     ?.IngredientVolume.find((volumeUnits) => volumeUnits.unitId == stepIngredient.unitId) != undefined ? (
                                     <>
                                       <div>
-                                        {stepIngredient.amount ?? 0} {userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')} x{' '}
+                                        {stepIngredient.amount?.toLocaleString(undefined, {
+                                          minimumFractionDigits: 0,
+                                          maximumFractionDigits: 2,
+                                        }) ?? 0}{' '}
+                                        {userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')} x{' '}
                                         {(
                                           (stepIngredient.ingredient?.price ?? 0) /
                                           (ingredients
                                             .find((ingredient) => ingredient.id == stepIngredient.ingredientId)
                                             ?.IngredientVolume.find((volumeUnits) => volumeUnits.unitId == stepIngredient.unitId)?.volume ?? 1)
-                                        ).toFixed(2)}{' '}
+                                        ).toLocaleString(undefined, {
+                                          minimumFractionDigits: 2,
+                                          maximumFractionDigits: 2,
+                                        })}{' '}
                                         €/{userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')}
                                       </div>
                                       <div className={'text-end'}>
@@ -854,7 +861,10 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                                               .find((ingredient) => ingredient.id == stepIngredient.ingredientId)
                                               ?.IngredientVolume.find((volumeUnits) => volumeUnits.unitId == stepIngredient.unitId)?.volume ?? 1)) *
                                           (stepIngredient.amount ?? 0)
-                                        ).toFixed(2)}
+                                        ).toLocaleString(undefined, {
+                                          minimumFractionDigits: 2,
+                                          maximumFractionDigits: 2,
+                                        })}
                                         €
                                       </div>
                                     </>
@@ -882,10 +892,20 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                         <>
                           <div key={`price-calculation-step-garnish-name`}>{garnish?.garnish?.name}</div>
                           <div key={`price-calculation-step-garnish-price`} className={'grid grid-cols-2'}>
-                            <div>1 x {(garnish?.garnish?.price ?? 0).toFixed(2)}</div>
+                            <div>
+                              1 x{' '}
+                              {(garnish?.garnish?.price ?? 0).toLocaleString(undefined, {
+                                minimumFractionDigits: 2,
+                                maximumFractionDigits: 2,
+                              })}
+                            </div>
                             <div className={'text-end'}>
                               {(values.steps as CocktailRecipeStepFull[]).some((step) => step.ingredients.length > 0) ? '+ ' : ''}
-                              {(garnish?.garnish?.price ?? 0).toFixed(2)}€
+                              {(garnish?.garnish?.price ?? 0).toLocaleString(undefined, {
+                                minimumFractionDigits: 2,
+                                maximumFractionDigits: 2,
+                              })}
+                              €
                             </div>
                           </div>
                         </>
@@ -896,7 +916,12 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                     <div className={'grid grid-cols-3'}>
                       <div></div>
                       <div></div>
-                      <div className={'text-end font-bold'}>{calcCocktailTotalPrice(values, ingredients).toFixed(2) + ' €'}</div>
+                      <div className={'text-end font-bold'}>
+                        {calcCocktailTotalPrice(values, ingredients).toLocaleString(undefined, {
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2,
+                        }) + ' €'}
+                      </div>
                     </div>
                   </div>
                 </div>

diff --git a/components/cocktails/CompactCocktailRecipeInstruction.tsx b/components/cocktails/CompactCocktailRecipeInstruction.tsx
@@ -29,7 +29,16 @@ export function CompactCocktailRecipeInstruction(props: CompactCocktailRecipeIns
       </div>
       {props.showPrice == true ? (
         <div className={'col-span-1 text-right text-xl font-bold'}>
-          {(props.specialPrice ?? props.cocktailRecipe.price) != undefined ? (props.specialPrice ?? props.cocktailRecipe.price + ' €') : ''}
+          {(props.specialPrice ?? props.cocktailRecipe.price) != undefined
+            ? (props.specialPrice?.toLocaleString(undefined, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 2,
+              }) ??
+              props.cocktailRecipe.price?.toLocaleString(undefined, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 2,
+              }) + ' €')
+            : ''}
         </div>
       ) : (
         <></>
@@ -65,7 +74,10 @@ export function CompactCocktailRecipeInstruction(props: CompactCocktailRecipeIns
                   {(props.showRating.ratings.length > 0
                     ? props.showRating.ratings.reduce((acc, rating) => acc + rating.rating, 0) / props.showRating.ratings.length
                     : 0
-                  ).toFixed(1)}
+                  ).toLocaleString(undefined, {
+                    minimumFractionDigits: 1,
+                    maximumFractionDigits: 1,
+                  })}
                   <StarsComponent
                     rating={
                       props.showRating.ratings.length > 0
@@ -103,7 +115,12 @@ export function CompactCocktailRecipeInstruction(props: CompactCocktailRecipeIns
                       className={`flex flex-row gap-2 pl-2 ${stepIngredient.optional && 'italic'}`}
                     >
                       <div className={'flex flex-row gap-1'}>
-                        <div>{stepIngredient.amount ?? ''}</div>
+                        <div>
+                          {stepIngredient.amount?.toLocaleString(undefined, {
+                            minimumFractionDigits: 0,
+                            maximumFractionDigits: 2,
+                          }) ?? ''}
+                        </div>
                         <div>{userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')}</div>
                       </div>
                       <div>

diff --git a/components/ingredients/IngredientForm.tsx b/components/ingredients/IngredientForm.tsx
@@ -411,7 +411,12 @@ export function IngredientForm(props: IngredientFormProps) {
                       ) : (
                         (values.units as FormUnitValue[]).map((unit, index) => (
                           <tr key={`selected-units-${unit.unitId}`}>
-                            <td>{unit.volume.toFixed(2)}</td>
+                            <td>
+                              {unit.volume.toLocaleString(undefined, {
+                                minimumFractionDigits: 0,
+                                maximumFractionDigits: 2,
+                              })}
+                            </td>
                             <td>{userContext.getTranslation(allUnits.find((availableUnit) => availableUnit.id == unit.unitId)?.name ?? 'N/A', 'de')}</td>
                             <td>
                               {values.price != undefined ? (values.price / unit.volume).toFixed(2).replace(/\D00(?=\D*$)/, '') : '-'} €/

diff --git a/components/modals/CocktailDetailModal.tsx b/components/modals/CocktailDetailModal.tsx
@@ -75,7 +75,12 @@ export function CocktailDetailModal(props: CocktailDetailModalProps) {
               {loadedCocktail.price != undefined ? (
                 <>
                   {' - '}
-                  <span className={'font-bold'}>{loadedCocktail.price + ' €'}</span>
+                  <span className={'font-bold'}>
+                    {loadedCocktail.price.toLocaleString(undefined, {
+                      minimumFractionDigits: 0,
+                      maximumFractionDigits: 2,
+                    }) + ' €'}
+                  </span>
                 </>
               ) : (
                 <></>
@@ -169,7 +174,12 @@ export function CocktailDetailModal(props: CocktailDetailModalProps) {
                               key={`cocktail-details-step-ingredient-${stepIngredient.id}`}
                               className={`flex flex-row gap-2 pl-3 ${stepIngredient.optional ? 'italic' : ''}`}
                             >
-                              <div className={'font-bold'}>{stepIngredient.amount}</div>
+                              <div className={'font-bold'}>
+                                {stepIngredient.amount?.toLocaleString(undefined, {
+                                  minimumFractionDigits: 0,
+                                  maximumFractionDigits: 2,
+                                })}
+                              </div>
                               <div className={'font-bold'}>{userContext.getTranslation(stepIngredient.unit?.name ?? '', 'de')}</div>
                               <div>{stepIngredient.ingredient?.shortName ?? stepIngredient.ingredient?.name}</div>
                               {stepIngredient.optional && <div>(optional)</div>}
@@ -259,7 +269,10 @@ export function CocktailDetailModal(props: CocktailDetailModalProps) {
                       {ratingsLoading ? (
                         <Loading />
                       ) : (cocktailRatings ?? []).length > 0 ? (
-                        (cocktailRatings.reduce((acc, rating) => acc + rating.rating, 0) / cocktailRatings.length).toFixed(1)
+                        (cocktailRatings.reduce((acc, rating) => acc + rating.rating, 0) / cocktailRatings.length).toLocaleString(undefined, {
+                          minimumFractionDigits: 1,
+                          maximumFractionDigits: 1,
+                        })
                       ) : (
                         'Keine Bewertungen'
                       )}
@@ -424,7 +437,12 @@ export function CocktailDetailModal(props: CocktailDetailModalProps) {
               {userContext.isUserPermitted(Role.MANAGER) && ingredients && (
                 <>
                   <div className={'font-bold'}>Materialkosten</div>
-                  <div>{calcCocktailTotalPrice(loadedCocktail, ingredients).toFixed(2) + ' €'}</div>
+                  <div>
+                    {calcCocktailTotalPrice(loadedCocktail, ingredients).toLocaleString(undefined, {
+                      minimumFractionDigits: 0,
+                      maximumFractionDigits: 2,
+                    }) + ' €'}
+                  </div>
                 </>
               )}
             </div>

diff --git a/components/modals/CocktailRatingsModal.tsx b/components/modals/CocktailRatingsModal.tsx
@@ -66,7 +66,13 @@ export default function CocktailRatingsModal(props: CocktailRatingModalProps) {
   return (
     <div className={'flex flex-col gap-2'}>
       <div className={'flex flex-row items-center gap-1 text-2xl font-bold'}>
-        {props.cocktailName} - {cocktailRatings.length > 0 ? parseFloat(avgRating.toFixed(1).toString()).toLocaleString() : 'N/A'}{' '}
+        {props.cocktailName} -{' '}
+        {cocktailRatings.length > 0
+          ? avgRating.toLocaleString(undefined, {
+              minimumFractionDigits: 1,
+              maximumFractionDigits: 1,
+            })
+          : 'N/A'}{' '}
         <StarsComponent rating={avgRating} /> ({cocktailRatings.length})<div className={'flex-grow'}></div>
         <button
           type={'button'}

diff --git a/pages/workspaces/[workspaceId]/index.tsx b/pages/workspaces/[workspaceId]/index.tsx
@@ -359,18 +359,18 @@ export default function OverviewPage() {
                     .sortBy(['cocktailName', (item) => -(item.notes ?? '')]) // Sortiere nach cocktailName (asc) und notes (desc)
                     .value()
                     .map((cocktailQueueItem, index) => (
-                      <div key={`cocktailQueue-item-${index}`} className={'flex w-full flex-row justify-between gap-2 pb-1 pt-1 lg:flex-col'}>
-                        <div className={'flex flex-row items-center justify-between'}>
-                          <div className={'flex flex-row items-center gap-1'}>
-                            <div className={'font-bold'}>
-                              <strong>{cocktailQueueItem.count}x</strong> {cocktailQueueItem.cocktailName}
-                            </div>
+                      <div key={`cocktailQueue-item-${index}`} className={'flex w-full flex-row flex-wrap justify-between gap-2 pb-1 pt-1 lg:flex-col'}>
+                        <div className={'flex flex-row flex-wrap items-center justify-between gap-1'}>
+                          <div className={'font-bold'}>
+                            <strong>{cocktailQueueItem.count}x</strong> {cocktailQueueItem.cocktailName}
+                          </div>
+                          <span className={'flex flex-wrap gap-1'}>
                             {cocktailQueueItem.notes && <span className={'italic'}>mit Notiz</span>}
                             (seit {new Date(cocktailQueueItem.oldestTimestamp).toFormatTimeString()} Uhr)
-                          </div>
+                          </span>
                         </div>
-                        {cocktailQueueItem.notes && <span className={'pb-1 italic'}>Notiz: {cocktailQueueItem.notes}</span>}
-                        <div className={'space between flex flex-row gap-2'}>
+                        {cocktailQueueItem.notes && <span className={'italic lg:pb-1'}>Notiz: {cocktailQueueItem.notes}</span>}
+                        <div className={'flex w-full flex-row gap-2'}>
                           <div
                             className={'btn btn-square btn-outline btn-sm'}
                             onClick={() =>