feat: add ability to add or remove ingredients from within a cocktail…

… recipe (#408)

* feat: add ability to add or remove ingredients from within a cocktail recipe

* fix

* fix

.eslintrc.json

@@ -4,12 +4,15 @@
     "plugins": ["@typescript-eslint"],
     "extends": [
         "eslint:recommended",
-        "plugin:@typescript-eslint/strict",
+        "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/stylistic",
         "prettier"
     ],
     "rules": {
-        "@typescript-eslint/consistent-type-definitions": [1, "type"]
+        "@typescript-eslint/consistent-type-definitions": [1, "type"],
+        "@typescript-eslint/no-unused-vars": [1],
+        "@typescript-eslint/no-empty-function": [1],
+        "@typescript-eslint/no-inferrable-types": [1]
     },
 
     "overrides": [

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "com.moimob.drinkable"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 14000
-        versionName "1.40.0"
+        versionCode 14100
+        versionName "1.41.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-app')
+    implementation project(':capacitor-clipboard')
     implementation project(':capacitor-preferences')
 
 }

android/app/src/main/assets/capacitor.plugins.json

@@ -3,6 +3,10 @@
 		"pkg": "@capacitor/app",
 		"classpath": "com.capacitorjs.plugins.app.AppPlugin"
 	},
+	{
+		"pkg": "@capacitor/clipboard",
+		"classpath": "com.capacitorjs.plugins.clipboard.ClipboardPlugin"
+	},
 	{
 		"pkg": "@capacitor/preferences",
 		"classpath": "com.capacitorjs.plugins.preferences.PreferencesPlugin"

android/capacitor.settings.gradle

@@ -5,5 +5,8 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
 
+include ':capacitor-clipboard'
+project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacitor/clipboard/android')
+
 include ':capacitor-preferences'
 project(':capacitor-preferences').projectDir = new File('../node_modules/@capacitor/preferences/android')

cypress/e2e/manage-ingredient-row.cy.ts

@@ -0,0 +1,47 @@
+describe('Manage Ingredient Row', () => {
+    beforeEach(() => {
+        window.localStorage.clear();
+        window.localStorage.setItem('CapacitorStorage.messuarement-system', 'Metric');
+    });
+
+    it('Add to Saved Ingredients', () => {
+        cy.visit('#/cocktails');
+
+        cy.dataCy('cocktails-wrapper').children().first().click();
+
+        cy.dataCy(['ingredient-group-0', 'ingredient-group-checkmark']).should('not.exist');
+
+        cy.dataCy('ingredient-group-0').trigger('mousedown');
+        cy.dataCy('manage-ingredient-row-dialog').should('be.visible');
+
+        cy.dataCy('toggle-ingredient-storage-status-button').should('include.text', 'Add to Bar');
+        cy.dataCy('toggle-ingredient-storage-status-button').click();
+
+        cy.dataCy('manage-ingredient-row-dialog').should('not.exist');
+
+        cy.dataCy(['ingredient-group-0', 'ingredient-group-checkmark']).should('be.visible');
+    });
+
+    it('Remove from Saved Ingredients', () => {
+        window.localStorage.setItem(
+            'CapacitorStorage.ingredient-lists',
+            JSON.stringify([{ id: 0, ingredients: ['1'], name: 'My Bar' }])
+        );
+
+        cy.visit('#/cocktails');
+
+        cy.dataCy('cocktails-wrapper').children().first().click();
+
+        cy.dataCy(['ingredient-group-0', 'ingredient-group-checkmark']).should('be.visible');
+
+        cy.dataCy('ingredient-group-0').trigger('mousedown');
+        cy.dataCy('manage-ingredient-row-dialog').should('be.visible');
+
+        cy.dataCy('toggle-ingredient-storage-status-button').should('include.text', 'Remove from Bar');
+        cy.dataCy('toggle-ingredient-storage-status-button').click();
+
+        cy.dataCy('manage-ingredient-row-dialog').should('not.exist');
+
+        cy.dataCy(['ingredient-group-0', 'ingredient-group-checkmark']).should('not.exist');
+    });
+});

cypress/support/commands.ts

@@ -1,3 +1,9 @@
-Cypress.Commands.add('dataCy', value => {
-    return cy.get(`[data-cy=${value}]`);
+Cypress.Commands.add('dataCy', input => {
+    if (typeof input === 'string') {
+        return cy.get(`[data-cy=${input}]`);
+    }
+
+    const dataCySelectorArray = input.map(x => `[data-cy=${x}]`);
+    const stringValue = dataCySelectorArray.join(' ');
+    return cy.get(stringValue);
 });

cypress/support/index.d.ts

@@ -1,6 +1,6 @@
 declare namespace Cypress {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/consistent-type-definitions
     interface Chainable<Subject> {
-        dataCy(value: string): Chainable<unknown>;
+        dataCy(value: string | string[]): Chainable<unknown>;
     }
 }

fastlane/metadata/android/en-US/changelogs/14100.txt

@@ -0,0 +1,5 @@
+• You can now add or remove ingredients from selected bar within a cocktail recipe. A new menu will appear after a long press the ingredient
+• Added more ingredients
+
+• Updated swedish translations
+• Updated german translations

fastlane/metadata/android/en-US/full_description.txt

@@ -1,18 +1,17 @@
 Drinkable is an app which help you find cocktails that you could make today with ingredients from home. You can also explore new great cocktails to make. The app will always let you know what ingredents is missing. 
 
 Features: 
-
-- Includes 100+ cocktails.
-- Also includes mocktails and cocktail ingredients.
-- Ability to add your own cocktails and ingredients within the app.
+- Includes 150+ cocktails and 150+ ingredients.
+- Also includes Shots, Mocktails and Cocktail Ingredients.
+- Available in 10+ languages.
+- Ability to create your own cocktails, ingredients and tags in the app.
 - Lets you know what cocktails you can make with the ingredients you have at home.
 - 1 missing ingredient list. So you can easily pick up that last item and make a new cocktail.
 - Save favorite cocktails.
 - Rate cocktails with stars from zero to five. 
 - Supports both Imperial and Metric measurement system.
 - Offline support, this app will work even if you dont have internet connection.
 - Simple User Interface.
-- 8+ languages. English, Spanish, French, German and more.
 - Open source, code is avaliable on Github. 
 
 Please reach out to anton@moimob.com if you have any questions or wish for a specific cocktail or feature to be added.

package.json

@@ -10,6 +10,7 @@
     "dependencies": {
         "@capacitor/android": "^5.0.0",
         "@capacitor/app": "^5.0.0",
+        "@capacitor/clipboard": "^5.0.6",
         "@capacitor/core": "^5.0.0",
         "@capacitor/preferences": "^5.0.0",
         "@moimob/common": "^0.1.0",
@@ -20,6 +21,7 @@
         "aurelia-event-aggregator": "1.0.3",
         "aurelia-hotjar": "1.0.1",
         "aurelia-i18n": "4.0.4",
+        "aurelia-long-click-event": "^1.0.5",
         "aurelia-validation": "2.0.0",
         "base64-arraybuffer": "1.0.2",
         "compressorjs": "1.2.1",
@@ -52,9 +54,9 @@
         "cssnano": "^6.0.0",
         "duplicate-package-checker-webpack-plugin": "3.0.0",
         "eslint": "8.51.0",
+        "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-cypress": "^2.14.0",
         "eslint-webpack-plugin": "^4.0.1",
-        "eslint-config-prettier": "^9.0.0",
         "html-loader": "4.2.0",
         "html-webpack-plugin": "5.5.3",
         "jest": "29.7.0",

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

@@ -221,7 +221,9 @@ <h6 class="text-sm" t="unit"></h6>
                     </div>
                     <div
                         repeat.for="ingredientGroup of extendedIngredientGroup"
-                        click.delegate="checkIngredient(ingredientGroup)">
+                        click.delegate="checkIngredient(ingredientGroup)"
+                        long-click.delegate="longClick(ingredientGroup)"
+                        data-cy="ingredient-group-${$index}">
                         <div if.bind="!isEditMode" class="${ingredientGroup.isChecked ? 'opacity-50' : ''}">
                             <h5>
                                 <span
@@ -247,7 +249,8 @@ <h6 if.bind="ingredientGroup.substituteNames" class="text-sm opacity-75">
                                 xmlns="http://www.w3.org/2000/svg"
                                 class="w-6 h-6 text-success ${ingredientGroup.isChecked ? 'opacity-50' : ''}"
                                 stroke="currentColor"
-                                viewBox="0 0 512 512">
+                                viewBox="0 0 512 512"
+                                data-cy="ingredient-group-checkmark">
                                 <title>Checkmark</title>
                                 <path
                                     fill="none"

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

@@ -16,6 +16,7 @@ import { getTagsFromIds } from 'data/tags-data';
 import { EditTagsDrawer } from './../edit-tags-drawer';
 import { TagModel } from 'domain/entities/cocktail-tag';
 import { CocktailAlcoholInformation } from 'domain/cocktail-alcohol-information';
+import { ManageIngredientRow } from './manage-ingredient-row';
 @inject(
     DialogController,
     LocalStorageService,
@@ -199,6 +200,14 @@ export class CocktailDialog {
         this.displayAddIngredients = false;
     }
 
+    longClick(group: ExtendedIngredientGroup) {
+        this._dialogService.open({ viewModel: ManageIngredientRow, model: group, lock: false }).whenClosed(response => {
+            if (!response.wasCancelled) {
+                group.isInStorage = response.output.isInStorage;
+            }
+        });
+    }
+
     selectItem(ingredient: Ingredient) {
         const ingredientGroup = this.extendedIngredientGroup[this._clickedIngredientIndex];
 

src/components/dialogs/cocktail-dialog/manage-ingredient-row.html

@@ -0,0 +1,27 @@
+<template>
+    <ux-dialog class="small-dialog" data-cy="manage-ingredient-row-dialog">
+        <div click.delegate="cancel()">
+            <div click.delegate="$event.stopPropagation()" class="bg-base-100 modal-box relative m-auto p-4">
+                <label class="btn btn-sm btn-circle absolute right-2 top-2" click.trigger="cancel()">✕</label>
+                <h3 class="text-lg font-bold">${name}</h3>
+                <p if.bind="showBarName" class="text-sm text-base-content text-opacity-75">${selectedBarName}</p>
+
+                <div class="divider mt-2"></div>
+
+                <button
+                    click.delegate="toggleIngredientStorageStatus()"
+                    class="btn w-full"
+                    data-cy="toggle-ingredient-storage-status-button">
+                    <p if.bind="isInStorage" t="remove-from-bar"></p>
+                    <p else t="add-to-bar"></p>
+                </button>
+
+                <button click.delegate="copyToClipboard()" class="btn w-full mt-4" data-cy="copy-to-clipboard-button">
+                    <p if.bind="!textCopied" t="copy-ingredient-name-to-clipboard"></p>
+                    <p else class="text-success" t="copied-to-clipboard"></p>
+                    <icon-clipboard class="h-6 w-6 ${textCopied ? 'text-success' : ''}"></icon-clipboard>
+                </button>
+            </div>
+        </div>
+    </ux-dialog>
+</template>

src/components/dialogs/cocktail-dialog/manage-ingredient-row.ts

@@ -0,0 +1,76 @@
+import { DialogController } from 'aurelia-dialog';
+import { autoinject } from 'aurelia-framework';
+import { ExtendedIngredientGroup } from 'domain/entities/cocktail';
+import { LocalStorageService } from 'services/local-storage-service';
+import { Clipboard } from '@capacitor/clipboard';
+
+@autoinject
+export class ManageIngredientRow {
+    constructor(
+        private dialogController: DialogController,
+        private localStorageService: LocalStorageService
+    ) {}
+
+    public name: string;
+    public isInStorage: boolean;
+    public selectedBarName: string;
+    public showBarName: boolean;
+    public textCopied = false;
+    private _ingredientId: string;
+    private _savedIngredientIds: string[] = [];
+
+    activate(params: ExtendedIngredientGroup) {
+        this.isInStorage = params.isInStorage;
+        this.name = params.ingredient.name;
+
+        const selectedBar = this.localStorageService.getIngredientList();
+        this.selectedBarName = selectedBar.name;
+        this._savedIngredientIds = selectedBar.ingredients;
+
+        this.showBarName = this.localStorageService.getIngredientLists().length > 1;
+
+        this._ingredientId = params.ingredient.id;
+    }
+
+    cancel() {
+        this.dialogController.cancel();
+    }
+
+    async toggleIngredientStorageStatus() {
+        this.isInStorage = !this.isInStorage;
+
+        if (this.isInStorage === true) {
+            this._savedIngredientIds.push(this._ingredientId);
+        } else {
+            this._savedIngredientIds = this._savedIngredientIds.filter(x => x !== this._ingredientId);
+        }
+
+        await this.localStorageService.updateSavedIngredients(this._savedIngredientIds);
+
+        const response: ManageIngredientRowResponse = {
+            isInStorage: this.isInStorage
+        };
+
+        this.dialogController.ok(response);
+    }
+
+    async copyToClipboard() {
+        if (this.textCopied === true) {
+            return;
+        }
+
+        await Clipboard.write({
+            string: this.name
+        });
+
+        this.textCopied = true;
+
+        setTimeout(() => {
+            this.textCopied = false;
+        }, 3000);
+    }
+}
+
+export type ManageIngredientRowResponse = {
+    isInStorage: boolean;
+};

src/components/icons/icon-clipboard.html

@@ -0,0 +1,21 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path
+            d="M336 64h32a48 48 0 0148 48v320a48 48 0 01-48 48H144a48 48 0 01-48-48V112a48 48 0 0148-48h32"
+            fill="none"
+            stroke="currentColor"
+            stroke-linejoin="round"
+            stroke-width="32" />
+        <rect
+            x="176"
+            y="32"
+            width="160"
+            height="64"
+            rx="26.13"
+            ry="26.13"
+            fill="none"
+            stroke="currentColor"
+            stroke-linejoin="round"
+            stroke-width="32" />
+    </svg>
+</template>