feat(cocktails): filter cocktails by ingredient (#199)

Author: anton-gustafsson

src/components/dialogs/cocktail-filter-dialog.html

@@ -1,7 +1,8 @@
 <template>
-    <ux-dialog class="small-dialog">
-        <div>
-            <div class="bg-base-200 modal-box relative" style="padding: 0.5em">
+    <ux-dialog class="au-animate cocktail-dialog" data-cy="cocktail-dialog">
+        <div class="drawer">
+            <label click.trigger="cancel()" for="my-drawer" class="drawer-overlay"></label>
+            <div class="menu p-3 bg-base-100 text-base-content w-full relative">
                 <label class="btn btn-sm btn-circle absolute right-2 top-2" click.trigger="cancel()">✕</label>
 
                 <h3 class="text-lg font-bold" t="filter"></h3>
@@ -35,6 +36,21 @@ <h3 class="text-lg font-bold" t="filter"></h3>
                     </select>
                 </div>
 
+                <div class="form-control w-full">
+                    <label class="label">
+                        <span class="label-text" t="ingredient"></span>
+                    </label>
+                    <select
+                        value.bind="ingredientFilter"
+                        class="select select-bordered select-sm"
+                        data-cy="select-ingredient-filter">
+                        <option model.bind="null" t="all-ingredients"></option>
+                        <option repeat.for="ingredient of ingredients" model.bind="ingredient.id">
+                            ${ingredient.name}
+                        </option>
+                    </select>
+                </div>
+
                 <div class="form-control w-full mt-2">
                     <label class="label cursor-pointer">
                         <span class="label-text" t="show-only-favorites"></span>
@@ -46,8 +62,8 @@ <h3 class="text-lg font-bold" t="filter"></h3>
                     </label>
                 </div>
 
-                <div class="modal-action">
-                    <label class="btn" click.trigger="ok()" t="apply" data-cy="filter-dialog-close"></label>
+                <div class="absolute bottom-4 right-4">
+                    <label class="btn btn-primary" click.trigger="ok()" t="apply" data-cy="filter-dialog-close"></label>
                 </div>
             </div>
         </div>

src/components/dialogs/cocktail-filter-dialog.ts

@@ -2,29 +2,36 @@ import { inject } from 'aurelia-framework';
 import { DialogController } from 'aurelia-dialog';
 import { DrinkCategory, getDrinkCategories } from 'domain/enums/drink-category';
 import { getSpiritTypeFilters, SpiritType } from 'domain/enums/spirit-type';
+import { Ingredient } from 'domain/entities/ingredient';
+import { IngredientService } from 'services/ingredient-service';
 
-@inject(DialogController)
+@inject(DialogController, IngredientService)
 export class CocktailFilterDialog {
     public drinkCategories = getDrinkCategories();
     public spirits = getSpiritTypeFilters();
+    public ingredients: Ingredient[];
 
     public categoryFilter: DrinkCategory;
     public spiritFilter: SpiritType;
+    public ingredientFilter: string;
     public favoriteFilter: boolean;
 
-    constructor(private _dialogContoller: DialogController) {}
+    constructor(private _dialogContoller: DialogController, private _ingredientService: IngredientService) {}
 
     activate(model: CocktailFilterDialogModel) {
+        this.ingredients = this._ingredientService.getIngredients();
         this.categoryFilter = model.categoryFilter;
         this.spiritFilter = model.spiritFilter;
         this.favoriteFilter = model.favoriteFilter;
+        this.ingredientFilter = model.ingredientFilter;
     }
 
     ok() {
         const response: CocktailFilterDialogModel = {
             spiritFilter: this.spiritFilter,
             categoryFilter: this.categoryFilter,
-            favoriteFilter: this.favoriteFilter === true ? true : null
+            favoriteFilter: this.favoriteFilter === true ? true : null,
+            ingredientFilter: this.ingredientFilter
         };
 
         this._dialogContoller.ok(response);
@@ -37,5 +44,6 @@ export class CocktailFilterDialog {
 export class CocktailFilterDialogModel {
     categoryFilter: DrinkCategory;
     spiritFilter: SpiritType;
+    ingredientFilter: string;
     favoriteFilter: boolean;
 }

src/dialog.scss

@@ -1,10 +1,10 @@
 ux-dialog-container {
     display: block;
     width: 100%;
-    transition: opacity 0.2s linear;
     opacity: 0;
-    position: fixed;
+    transition: opacity 0.2s linear;
     background: hsl(0deg 0% 25% / 90%);
+    position: fixed;
     &.active {
         opacity: 1;
     }
@@ -17,7 +17,7 @@ ux-dialog-container {
 ux-dialog {
     width: 100%;
     display: block;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+
     height: 100vh;
 }
 

src/locales/ca/translation.json

@@ -93,5 +93,6 @@
         "cognac-brandy": "Conyac / Brandi"
     },
     "or": "O",
-    "show-mocktails": "Mostra Mocktails"
+    "show-mocktails": "Mostra Mocktails",
+    "all-ingredients": "Tots els ingredients"
 }

src/locales/de/translation.json

@@ -93,5 +93,6 @@
         "cognac-brandy": "Conyac / Schnaps"
     },
     "or": "Oder",
-    "show-mocktails": "Mocktails anzeigen"
+    "show-mocktails": "Mocktails anzeigen",
+    "all-ingredients": "Alle Zutaten"
 }

src/locales/en/translation.json

@@ -93,5 +93,6 @@
         "cognac-brandy": "Cognac / Brandy"
     },
     "or": "Or",
-    "show-mocktails": "Show Mocktails"
+    "show-mocktails": "Show Mocktails",
+    "all-ingredients": "All Ingredients"
 }

src/locales/es/translation.json

@@ -93,5 +93,6 @@
         "cognac-brandy": "Coñac  / Brandy"
     },
     "or": "O",
-    "show-mocktails": "Mostrar mocktails"
+    "show-mocktails": "Mostrar mocktails",
+    "all-ingredients": "Todos los ingredientes"
 }

src/locales/fr/translation.json

@@ -93,5 +93,6 @@
         "cognac-brandy": "Cognac / Brandy"
     },
     "or": "Ou",
-    "show-mocktails": "Afficher mocktails"
+    "show-mocktails": "Afficher mocktails",
+    "all-ingredients": "Tous les ingrédients"
 }

src/locales/it/translation.json

@@ -93,5 +93,6 @@
         "cognac-brandy": "Cognac / Brandy"
     },
     "or": "O",
-    "show-mocktails": "Mostra Mocktail"
+    "show-mocktails": "Mostra Mocktail",
+    "all-ingredients": "Tutti gli ingredienti"
 }

src/locales/nl/translation.json

@@ -93,5 +93,6 @@
         "cognac-brandy": "Cognac / Brandewijn"
     },
     "or": "Of",
-    "show-mocktails": "Laat mocktails zien"
+    "show-mocktails": "Laat mocktails zien",
+    "all-ingredients": "Alle ingrediënten"
 }

src/locales/sv/translation.json

@@ -93,5 +93,6 @@
         "cognac-brandy": "Konjac / Brännvin"
     },
     "or": "eller",
-    "show-mocktails": "Visa Mocktails"
+    "show-mocktails": "Visa Mocktails",
+    "all-ingredients": "Alla ingredienser"
 }

src/modules/cocktails/all-cocktails/all-cocktails.ts

@@ -18,7 +18,8 @@ export class AllCocktails {
     private _filterDialogModel: CocktailFilterDialogModel = {
         categoryFilter: null,
         spiritFilter: null,
-        favoriteFilter: null
+        favoriteFilter: null,
+        ingredientFilter: null
     };
 
     constructor(
@@ -74,6 +75,13 @@ export class AllCocktails {
             filterCount++;
         }
 
+        if (this._filterDialogModel.ingredientFilter !== null) {
+            cocktails = cocktails.filter(x =>
+                x.ingredientGroups.some(y => y.ingredientId === this._filterDialogModel.ingredientFilter)
+            );
+            filterCount++;
+        }
+
         if (this._filterDialogModel.favoriteFilter !== null) {
             cocktails = cocktails.filter(x => x.isFavorite === true);
             filterCount++;