feat: seperate dishes by menu sections

src/app/modules/data/types/place/special/mensa/place-mensa-detail.component.ts

@@ -22,6 +22,7 @@ import {Router} from '@angular/router';
 import {Subscription} from 'rxjs';
 import {IonRouterOutlet} from '@ionic/angular';
 import {DataRoutingService} from '../../../../data-routing.service';
+import {groupBy} from 'src/app/_helpers/collections/group-by';
 
 /**
  * TODO
@@ -36,8 +37,9 @@ export class PlaceMensaDetailComponent implements AfterViewInit, OnDestroy {
   /**
    * Map of dishes for each day
    */
-  // eslint-disable-next-line unicorn/no-null
-  dishes: Promise<Record<SCISO8601Date, SCDish[]>> | null = null;
+  dishes: Promise<Record<SCISO8601Date, Record<string, SCDish[]>>> | null =
+    // eslint-disable-next-line unicorn/no-null
+    null;
 
   /**
    * number of days to display mensa menus for
@@ -79,15 +81,6 @@ export class PlaceMensaDetailComponent implements AfterViewInit, OnDestroy {
    * TODO
    */
   ngAfterViewInit() {
-    this.dishes = this.mensaService.getAllDishes(this.item, this.displayRange);
-    this.dishes.then(result => {
-      for (const [key, value] of Object.entries(result)) {
-        if (value.length === 0) {
-          delete result[key];
-        }
-      }
-      this.selectedDay = Object.keys(result)[0];
-    });
     if (!this.openAsModal) {
       this.subscriptions.push(
         this.dataRoutingService.itemSelectListener().subscribe(item => {
@@ -95,6 +88,36 @@ export class PlaceMensaDetailComponent implements AfterViewInit, OnDestroy {
         }),
       );
     }
+
+    const dishesByDay = this.mensaService.getAllDishes(
+      this.item,
+      this.displayRange,
+    );
+
+    dishesByDay.then(result => {
+      for (const [key, value] of Object.entries(result)) {
+        if (value.length === 0) {
+          delete result[key];
+        }
+      }
+      this.selectedDay = Object.keys(result)[0];
+    });
+
+    this.dishes = new Promise(async (resolve, reject) => {
+      try {
+        const dishesBySections: Record<string, Record<string, SCDish[]>> = {};
+        for (const [key, value] of Object.entries(await dishesByDay)) {
+          dishesBySections[key] = groupBy(
+            value,
+            x => x.menuSection?.name ?? '',
+          );
+        }
+        resolve(dishesBySections);
+      } catch {
+        // eslint-disable-next-line unicorn/no-null
+        reject(null);
+      }
+    });
   }
 
   /**

src/app/modules/data/types/place/special/mensa/place-mensa.html

@@ -16,14 +16,32 @@
       </ion-segment>
       <ng-container [ngSwitch]="selectedDay">
         <ng-container *ngFor="let date of dishes | keyvalue">
-          <ion-list *ngSwitchCase="date.key">
-            <ng-container *ngFor="let dish of date.value; index as i">
-              <stapps-data-list-item
-                [item]="dish"
-                [hideThumbnail]="true"
-              ></stapps-data-list-item>
-            </ng-container>
-          </ion-list>
+          <ng-container *ngIf="(date.value | json) !== '{}'; else empty">
+            <ion-list *ngSwitchCase="date.key">
+              <ng-container *ngFor="let section of date.value | keyvalue">
+                <ion-list-header
+                  *ngIf="section.value[0].menuSection"
+                  lines="inset"
+                >
+                  <ion-label class="title">
+                    {{
+                      'data.types.dish.detail.' +
+                        section.value[0].menuSection.name
+                        | translate
+                        | titlecase
+                    }}
+                    {{ section.value[0].menuSection.servingHours }}
+                  </ion-label>
+                </ion-list-header>
+                <ng-container *ngFor="let dish of section.value; index as j">
+                  <stapps-data-list-item
+                    [item]="dish"
+                    [hideThumbnail]="true"
+                  ></stapps-data-list-item>
+                </ng-container>
+              </ng-container>
+            </ion-list>
+          </ng-container>
         </ng-container>
       </ng-container>
     </ng-container>

src/app/modules/data/types/place/special/mensa/place-mensa.scss

@@ -17,3 +17,9 @@ ion-segment {
       flex: 1 0 100px;
   }
 }
+
+ion-list-header {
+  ion-label {
+    color: var(--ion-color-medium-shade);
+  }
+}

src/assets/i18n/de.json

@@ -150,6 +150,9 @@
         "CHARACTERISTICS": "Zutaten",
         "EMPTY_DISHES": "Keine Angebote verfügbar",
         "detail": {
+          "breakfast": "Frühstück",
+          "dinner": "Abendessen",
+          "lunch": "Mittagessen",
           "AVG_NUTRITION_INFO": "Durchschnittliche Nährwertangaben",
           "CALORIES": "Brennwert",
           "FAT_TOTAL": "Fett",

src/assets/i18n/en.json

@@ -150,6 +150,9 @@
         "CHARACTERISTICS": "Ingredients",
         "EMPTY_DISHES": "No Offers Available",
         "detail": {
+          "breakfast": "Breakfast",
+          "dinner": "Dinner",
+          "lunch": "Lunch",
           "AVG_NUTRITION_INFO": "Average Nutrition Facts",
           "CALORIES": "Calories",
           "FAT_TOTAL": "Fat",