update date prepare dialog

* update info text / add link to help text
* improve date picker
* implement  #135

frontend/src/app/application/_dialoges/meal-prepare/meal-prepare.component.html

@@ -1,34 +1,47 @@
 <h3>Mahlzeit an einem anderen Tag vorbereiten</h3>
 
-<div class="infos">
-  <p class="info">Mahlzeiten können an einem anderen Tag vorbereitet werden.<br />
-    Die Zutaten werden in diesem Fall bereits am Tag der Vorbereitung aufgeführt.
+<div class="mat-dialog-content">
+  <p>Gewisse Mahlzeiten müssen bereits am Vortag vorbereitet werden. In diesem Fall werden die Zutaten bereits am Tag
+    der Vorbereitung in der Tageseinkaufsliste aufgeführt. Mahlzeiten können nur an Tagen vorbereitet werden, die auch
+    in deiner Woche-Übersicht enthalten sind
+    (<a (click)="helpService.openHelpPopup('mahlzeit-vorbereiten')">mehr Erfahren</a>).
   </p>
 
-  <p *ngIf="prepareForm.value.hasPrepareDate">Die Mahlzeit wird am
-    {{swissDateAdapter.format(prepareForm.value.prepareDate)}} vorbereitet.
+  <br>
+
+  <p *ngIf="prepareForm.value.hasPrepareDate">
+    <b>Vorbereiten: </b>Diese Mahlzeit ({{data.specificMeal.weekTitle}}) wird vorbereitet.
+  </p>
+  <p *ngIf="!prepareForm.value.hasPrepareDate">
+    <b>Vorbereiten: </b>Diese Mahlzeit ({{data.specificMeal.weekTitle}}) muss nicht vorbereitet werden.
   </p>
-  <p *ngIf="!prepareForm.value.hasPrepareDate">Die Mahlzeit muss nicht vorbereitet werden.</p>
 
   <form [formGroup]="prepareForm">
 
-    <mat-checkbox formControlName="hasPrepareDate" class="checkbox">
-      Mahlzeit an einem anderen Tag vorbereiten.
+    <mat-checkbox formControlName="hasPrepareDate" class="checkbox full-width">
+      Mahlzeit an einem anderen Tag vorbereiten
+      <ng-container *ngIf="dayBeforeDate == undefined">(Diese Mahlzeit kann nicht vorbereitet werden).</ng-container>
     </mat-checkbox>
 
-    <mat-form-field class="full-width" *ngIf="prepareForm.value.hasPrepareDate">
-      <input matInput [matDatepicker]="picker" [matDatepickerFilter]="dateFilter" placeholder="Vorbereitungsdatum"
-        formControlName="prepareDate">
-      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-datepicker #picker></mat-datepicker>
-    </mat-form-field>
+    <ng-container *ngIf="prepareForm.value.hasPrepareDate">
+      <mat-form-field class="date-picker">
+        <input matInput [matDatepicker]="matDatePicker" [matDatepickerFilter]="dateFilter"
+               placeholder="Vorbereitungsdatum" (click)="matDatePicker.open()"
+               formControlName="prepareDate">
+        <mat-datepicker-toggle matSuffix [for]="matDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #matDatePicker></mat-datepicker>
+      </mat-form-field>
+    </ng-container>
 
   </form>
 
 </div>
 
 <div mat-dialog-actions class="custom-mat-buttons">
-  <p></p>
-  <button mat-stroked-button [mat-dialog-close]="null"> Abbrechen </button>
-  <button mat-raised-button [mat-dialog-close]="returnsSpecificMeal()" [disabled]="valueHasNotChanged" color="save">Speichern</button>
+  <p><a (click)="helpService.openHelpPopup('mahlzeit-vorbereiten')">Hilfe zum Vorbereiten</a></p>
+  <button mat-stroked-button [mat-dialog-close]="null"> Abbrechen</button>
+  <button mat-raised-button [mat-dialog-close]="returnsSpecificMeal()"
+          [disabled]="dataHasNotChanged || !prepareForm.valid" color="save">
+    Speichern
+  </button>
 </div>

frontend/src/app/application/_dialoges/meal-prepare/meal-prepare.component.sass

@@ -4,3 +4,15 @@
   display: grid
   grid-template-rows: 50px auto 50px
   grid-template-areas: "header" "body" "buttons"
+
+.mat-dialog-content
+  p
+    font-size: 16px
+    line-height: 26px
+
+  .date-picker
+    max-width: 250px
+    width: 100%
+
+    .mat-input-element:disabled
+      color: black

frontend/src/app/application/_dialoges/meal-prepare/meal-prepare.component.ts

@@ -1,10 +1,10 @@
 import {Component, Inject} from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
-import {SwissDateAdapter} from 'src/app/utils/format-datapicker';
+import {AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn} from '@angular/forms';
 
 import {SpecificMeal} from '../../_class/specific-meal';
 import {Day} from '../../_class/day';
 import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {HelpService} from "../../_service/help.service";
 
 @Component({
   selector: 'app-meal-prepare',
@@ -14,83 +14,69 @@ import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 export class MealPrepareComponent {
 
   public prepareForm: FormGroup;
-  public specificMeal: SpecificMeal;
-  public valueHasNotChanged = true;
+  public dataHasNotChanged = true;
+  public readonly dayBeforeDate: Date | undefined;
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) private data: { specificMeal: SpecificMeal, days: Day[] },
-    public swissDateAdapter: SwissDateAdapter,
-    private formBuilder: FormBuilder) {
+    @Inject(MAT_DIALOG_DATA) public readonly data: { specificMeal: SpecificMeal, days: Day[] },
+    private formBuilder: FormBuilder,
+    public helpService: HelpService) {
 
-    this.specificMeal = data.specificMeal;
+    // Select the day before the current day. Only days in the week view are considered
+    this.dayBeforeDate = this.data.days.filter(day =>
+      day.dateAsTypeDate.getTime() < this.data.specificMeal.date.toDate().getTime()).slice(-1)[0]?.getTimestamp().toDate()
 
-    if (data.specificMeal.prepareAsDate !== undefined) {
 
-      this.prepareForm = this.formBuilder.group({
-        hasPrepareDate: data.specificMeal.prepare,
-        prepareDate: data.specificMeal.prepareAsDate
-      });
-
-    } else {
-
-      this.prepareForm = this.formBuilder.group({
-        hasPrepareDate: false,
-        prepareDate: new Date()
-      });
-
-    }
-
-
-    const originalValues = JSON.stringify({
-
-      hasPrepareDate: false,
-      prepareDate: new Date()
+    const hasPrepareDate = data.specificMeal.prepare;
+    const defaultPrepareDate = this.dayBeforeDate !== undefined ? this.dayBeforeDate : new Date()
+    const prepareDate = hasPrepareDate ? data.specificMeal.prepareAsDate : defaultPrepareDate
+    const condition = !this.data.specificMeal.prepare && !this.dayBeforeDate;
 
+    this.prepareForm = this.formBuilder.group({
+      hasPrepareDate: new FormControl({value: hasPrepareDate, disabled: condition}),
+      prepareDate: prepareDate
     });
 
-    // set up change listner
+    // Create a Change Listener, which is used to activate the save button
+    const originalValues = JSON.stringify(this.prepareForm.value);
     this.prepareForm.valueChanges.subscribe(values => {
-      this.valueHasNotChanged = JSON.stringify(values) === originalValues;
+      this.dataHasNotChanged = JSON.stringify(values) === originalValues;
     });
 
-
   }
 
+
   /**
-   * Mahlzeiten können nur mind. ein Tag vorhher vorbereitet werden.
+   * Mahlzeiten können nur mind. ein Tag vorher vorbereitet werden.
    * Ausserdem können sie nur vor dem Lager oder während dem Lager an einem
    * existierenden Tag vorbereitet werden.
    *
-   * TODO: Vorbereiten löschen, falls der Tag an dem die Mahlzeit vorbereitet wird gelöscht wird,
-   * dies führt dazu, dass die Zutaten nicht in der EInkaufsliste auftauchen... --> known bug
-   *
    */
-  public dateFilter = (d: Date | null): boolean => {
+  public dateFilter = (dateToCheck: string | null): boolean => {
+
+    if (dateToCheck == null) return;
 
-    const filter = this.data.days.filter(day => day.dateAsTypeDate.getTime() === d.getTime());
-    return d.getTime() < this.data.days[0].dateAsTypeDate.getTime() ||
-      (filter.length === 1 && d.getTime() < this.specificMeal.date.toDate().getTime());
+    const date = new Date(dateToCheck);
+    const dayInWeekviewExists = this.data.days.filter(day => day.dateAsTypeDate.getTime() === date.getTime()).length;
+    return dayInWeekviewExists && date.getTime() < this.data.specificMeal.date.toDate().getTime();
 
   }
 
   /**
-   * Returns the updatetd specificMeal
+   * Returns the updated specificMeal
    */
   public returnsSpecificMeal() {
 
-    // standardmässig wird eine Mahlzeit nicht vorbereitet
-    this.specificMeal.prepare = false;
+    // Default Value
+    this.data.specificMeal.prepare = false;
 
     if (this.prepareForm.value.hasPrepareDate) {
-
-      this.specificMeal.prepareAsDate = this.prepareForm.value.prepareDate;
-      this.specificMeal.prepare = true;
-
+      this.data.specificMeal.prepareAsDate = this.prepareForm.value.prepareDate;
+      this.data.specificMeal.prepare = true;
     }
 
-    return this.specificMeal;
+    return this.data.specificMeal;
 
   }
 
-
 }