Merge pull request #7 from ckapps/feature/desktop-ui-basics

feature/ingredient-amount pipe

data/example-1/app/recipes/recipe-3.recipe.yaml

@@ -11,10 +11,10 @@ recipe:
       name: Pita
     - amount: 4
       name: Tomatoes
-    - amount: ½
+    - amount: 0.5
       name: Onions
     - name: Rucola
-    - amount: ¼
+    - amount: 0.25
       name: Cucumber
     - name: Chilliflocks
   steps:

packages/domain/src/portion-quantifier.ts

@@ -33,7 +33,7 @@ export interface QuantityPortionQuantifier extends IPortionQuantifier {
 export interface SpringformPortionQuantifier extends IPortionQuantifier {
   kind: PortionKind.Springform;
   /**
-   * The diameter in meter
+   * The diameter in centimeter
    */
   diameter: number;
 }

packages/frontend/src/app/modules/domain/domain.module.ts

@@ -4,10 +4,16 @@ import { CommonModule } from '@angular/common';
 // Domain modules
 import { RecipeModule } from './recipe/recipe.module';
 import { RecipeCollectionModule } from './recipe-collection/recipe-collection.module';
+import { IngredientModule } from './ingredient/ingredient.module';
 
 @NgModule({
   declarations: [],
-  imports: [CommonModule, RecipeModule, RecipeCollectionModule],
-  exports: [RecipeModule, RecipeCollectionModule],
+  imports: [
+    CommonModule,
+    RecipeModule,
+    RecipeCollectionModule,
+    IngredientModule,
+  ],
+  exports: [RecipeModule, RecipeCollectionModule, IngredientModule],
 })
 export class DomainModule {}

packages/frontend/src/app/modules/domain/ingredient/ingredient.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IngredientAmountPipe } from './pipes/ingredient-amount.pipe';
+
+@NgModule({
+  declarations: [IngredientAmountPipe],
+  imports: [CommonModule],
+  exports: [IngredientAmountPipe],
+})
+export class IngredientModule {}

packages/frontend/src/app/modules/domain/ingredient/pipes/ingredient-amount.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { IngredientAmountPipe } from './ingredient-amount.pipe';
+
+describe('IngredientAmountPipe', () => {
+  it('create an instance', () => {
+    const pipe = new IngredientAmountPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

packages/frontend/src/app/modules/domain/ingredient/pipes/ingredient-amount.pipe.ts

@@ -0,0 +1,66 @@
+import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';
+import { formatNumber } from '@angular/common';
+
+import { Ingredient } from '@overckd/domain';
+
+/**
+ * Formats the amount for an ingredient
+ */
+@Pipe({
+  name: 'ingredientAmount',
+})
+export class IngredientAmountPipe implements PipeTransform {
+  /**
+   * The format to use for rendering numbers
+   */
+  private readonly digitFormat = '0.0-2';
+
+  constructor(@Inject(LOCALE_ID) private locale: string) {}
+
+  transform(value: Ingredient, ...args: unknown[]): string {
+    const { amount } = value;
+
+    // Nothing to do, if amount isn't a number
+    if (typeof amount !== 'number') {
+      return amount;
+    }
+
+    // Let's see if we can render some fancy fraction
+    const fraction = this.getNiceFraction(amount);
+
+    return fraction
+      ? this.formatWithFractionSymbol(amount, fraction)
+      : formatNumber(amount, this.locale, this.digitFormat);
+  }
+
+  private formatWithFractionSymbol(amount: number, fraction: string) {
+    const formattedValue = formatNumber(amount, this.locale, '0.2-2');
+
+    const integer = formattedValue.substring(0, formattedValue.length - 3);
+
+    return integer === '0' ? fraction : `${integer}${fraction}`;
+  }
+
+  /**
+   * Tries to resolve the fraction for the given `value`
+   * with a single fraction symbol.
+   *
+   * @param value THe numeric value
+   */
+  private getNiceFraction(value: number) {
+    // Use 'en' here, so that we are sure about the fraction
+    return this.getFraction(formatNumber(value, 'en', '0.0-2'));
+  }
+
+  private getFraction(value: string) {
+    if (value.endsWith('.25')) {
+      return '¼';
+    } else if (value.endsWith('.5')) {
+      return '½';
+    } else if (value.endsWith('.75')) {
+      return '¾';
+    }
+
+    return undefined;
+  }
+}

packages/frontend/src/app/modules/domain/recipe/components/ingredient/ingredient.component.html

@@ -3,7 +3,7 @@
     <span *ngIf="_ingredient.optional"> optional: </span>
 
     <span *ngIf="_ingredient.amount !== undefined" class="font-weight-bold">
-      {{ _ingredient.amount }}
+      {{ _ingredient | ingredientAmount }}
     </span>
 
     <span *ngIf="_ingredient.unit"> {{ _ingredient.unit }} </span>

packages/frontend/src/app/modules/domain/recipe/components/portion-converter/portion-converter.component.html

@@ -3,15 +3,25 @@
     {{ this.labelPortionQuantifier.label }}
   </div>
 
-  <div *ngSwitchCase="this.PortionKind.Quantity">
-    <label class="">
+  <div
+    *ngSwitchCase="this.PortionKind.Quantity"
+    class="portion-converter portion-converter--quantity"
+  >
+    <label class="portion-converter__label">
       {{ 'For' }}
       <input
         type="number"
         min="1"
         [(ngModel)]="this.amount"
-        class="form-control"
+        class="form-control portion-converter__input"
       />
+
+      <span
+        *ngIf="this.quantityPortionQuantifier.label as label"
+        class="portion-converter__additional-label"
+      >
+        {{ label }}
+      </span>
     </label>
   </div>
 

packages/frontend/src/app/modules/domain/recipe/components/portion-converter/portion-converter.component.scss

@@ -1,13 +1,21 @@
 :host {
   font-size: 1rem;
 
-  label {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
+  .portion-converter {
+    $hspacing: 0.25rem;
 
-    > input {
-      margin-left: 0.25rem;
+    &__label {
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+    }
+
+    &__input {
+      margin-left: $hspacing;
+    }
+
+    &__additional-label {
+      margin-left: $hspacing;
     }
   }
 }

packages/frontend/src/app/modules/domain/recipe/recipe.module.ts

@@ -15,6 +15,7 @@ import { IngredientGroupComponent } from './components/ingredient-group/ingredie
 import { ImprovementNotesComponent } from './components/improvement-notes/improvement-notes.component';
 import { RecipeTipsComponent } from './components/recipe-tips/recipe-tips.component';
 import { PortionConverterComponent } from './components/portion-converter/portion-converter.component';
+import { IngredientModule } from '../ingredient/ingredient.module';
 
 @NgModule({
   declarations: [
@@ -27,7 +28,7 @@ import { PortionConverterComponent } from './components/portion-converter/portio
     RecipeTipsComponent,
     PortionConverterComponent,
   ],
-  imports: [CommonModule, FormsModule, UiModule],
+  imports: [CommonModule, FormsModule, UiModule, IngredientModule],
   exports: [RecipeComponent],
 })
 export class RecipeModule {}