feat(catering): add ability to have multiple menus per building (PPT-1646)

apps/caterer-ui/src/app/catering-topbar.component.ts

@@ -65,6 +65,25 @@ import { combineLatest } from 'rxjs';
                     </mat-option>
                 </mat-select>
             </mat-form-field>
+            <mat-form-field
+                appearance="outline"
+                class="no-subscript w-60"
+                *ngIf="(caterers | async)?.length > 1"
+            >
+                <mat-select
+                    [ngModel]="filters?.caterer"
+                    (ngModelChange)="setCaterer($event)"
+                    placeholder="All Caterers"
+                >
+                    <mat-option value="">All Caterers</mat-option>
+                    <mat-option
+                        *ngFor="let caterer of caterers | async"
+                        [value]="caterer"
+                    >
+                        {{ caterer }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
             <div *ngIf="page === 'menu'" class="flex-1 w-2"></div>
             <button
                 *ngIf="
@@ -141,6 +160,7 @@ export class CateringTopbarComponent extends AsyncHandler implements OnInit {
     /** Currently active page */
     public page: string;
     public readonly filters = this._orders.filters;
+    public readonly caterers = this._catering.caterers;
     /** List of levels for the active building */
     public readonly levels = combineLatest([
         this._org.active_building,

apps/concierge/src/app/catering/catering-topbar.component.ts

@@ -51,6 +51,25 @@ import { combineLatest } from 'rxjs';
                     </mat-option>
                 </mat-select>
             </mat-form-field>
+            <mat-form-field
+                appearance="outline"
+                class="no-subscript w-60"
+                *ngIf="(caterers | async)?.length > 1"
+            >
+                <mat-select
+                    [ngModel]="filters?.caterer"
+                    (ngModelChange)="setCaterer($event)"
+                    placeholder="All Caterers"
+                >
+                    <mat-option value="">All Caterers</mat-option>
+                    <mat-option
+                        *ngFor="let caterer of caterers | async"
+                        [value]="caterer"
+                    >
+                        {{ caterer }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
             <div *ngIf="page === 'menu'" class="flex-1 w-2"></div>
             <button
                 *ngIf="
@@ -127,6 +146,7 @@ export class CateringTopbarComponent extends AsyncHandler implements OnInit {
     /** Currently active page */
     public page: string;
     public readonly filters = this._orders.filters;
+    public readonly caterers = this._catering.caterers;
     /** List of levels for the active building */
     public readonly levels = combineLatest([
         this._org.active_building,
@@ -141,6 +161,8 @@ export class CateringTopbarComponent extends AsyncHandler implements OnInit {
     /** Set filtered date */
     public readonly setDate = (date) =>
         (this._orders.filters = { ...this._orders.filters, date });
+    public readonly setCaterer = (caterer) =>
+        (this._orders.filters = { ...this._orders.filters, caterer });
     public readonly setSearch = (str) =>
         (this._orders.filters = { ...this._orders.filters, search: str });
     /** List of levels for the active building */

libs/catering/src/lib/catering-item-modal.component.ts

@@ -9,6 +9,7 @@ import { CateringItem } from './catering-item.class';
 export interface CateringItemModalData {
     item: CateringItem;
     categories?: string[];
+    caterers?: string[];
 }
 
 @Component({
@@ -25,8 +26,8 @@ export interface CateringItemModalData {
             *ngIf="form && !loading; else load_state"
             [formGroup]="form"
         >
-            <div class="flex items-center space-x-2">
-                <div class="flex flex-col" *ngIf="form.controls.name">
+            <div class="flex items-center space-x-2 w-full">
+                <div class="flex flex-col flex-1" *ngIf="form.controls.name">
                     <label
                         for="title"
                         [class.error]="
@@ -46,7 +47,12 @@ export interface CateringItemModalData {
                         <mat-error>Name is required</mat-error>
                     </mat-form-field>
                 </div>
-                <div class="flex flex-col" *ngIf="form.controls.category">
+            </div>
+            <div class="flex items-center space-x-2 w-full">
+                <div
+                    class="flex flex-col flex-1"
+                    *ngIf="form.controls.category"
+                >
                     <label
                         for="category"
                         [class.error]="
@@ -67,6 +73,27 @@ export interface CateringItemModalData {
                         <mat-error>Category is required</mat-error>
                     </mat-form-field>
                 </div>
+                <div class="flex flex-col flex-1" *ngIf="form.controls.caterer">
+                    <label
+                        for="caterer"
+                        [class.error]="
+                            form.controls.caterer.invalid &&
+                            form.controls.caterer.touched
+                        "
+                    >
+                        Caterer<span>*</span>:
+                    </label>
+                    <mat-form-field appearance="outline">
+                        <input
+                            matInput
+                            name="caterer"
+                            placeholder="Caterer"
+                            formControlName="caterer"
+                            [matAutocomplete]="caterer_auto"
+                        />
+                        <mat-error>Caterer is required</mat-error>
+                    </mat-form-field>
+                </div>
             </div>
             <div class="flex flex-col" *ngIf="form.controls.tags">
                 <label
@@ -240,6 +267,11 @@ export interface CateringItemModalData {
                 {{ option }}
             </mat-option>
         </mat-autocomplete>
+        <mat-autocomplete #caterer_auto="matAutocomplete">
+            <mat-option *ngFor="let option of caterers" [value]="option">
+                {{ option }}
+            </mat-option>
+        </mat-autocomplete>
     `,
     styles: [
         `
@@ -259,6 +291,9 @@ export class CateringItemModalComponent {
         category: new FormControl(this.item.category || '', [
             Validators.required,
         ]),
+        caterer: new FormControl(this.item.caterer || '', [
+            Validators.required,
+        ]),
         unit_price: new FormControl(this.item.unit_price, [
             Validators.required,
         ]),
@@ -282,6 +317,11 @@ export class CateringItemModalComponent {
         return this._data.categories || [];
     }
 
+    /** List of available caterers */
+    public get caterers(): string[] {
+        return this._data.caterers || [];
+    }
+
     public get tag_list(): string[] {
         return this.form.controls.tags.value;
     }
@@ -295,7 +335,7 @@ export class CateringItemModalComponent {
     }
 
     constructor(
-        @Inject(MAT_DIALOG_DATA) private _data: CateringItemModalData
+        @Inject(MAT_DIALOG_DATA) private _data: CateringItemModalData,
     ) {}
 
     /**

libs/catering/src/lib/catering-item.class.ts

@@ -7,6 +7,8 @@ export class CateringItem {
     public readonly name: string;
     /** Category that this item is associated */
     public readonly category: string;
+    /** Caterer that this item is associated */
+    public readonly caterer: string;
     /** Description of the contents of the catering item */
     public readonly description: string;
     /** Unit price in cents for the catering item */
@@ -45,6 +47,7 @@ export class CateringItem {
         this.id = data.id || '';
         this.name = data.name || data.id || '';
         this.category = data.category || '';
+        this.caterer = data.caterer || '';
         this.unit_price = data.unit_price || 0;
         this.description = data.description || '';
         this.quantity = data.quantity || 0;

libs/catering/src/lib/catering-list-field.component.ts

@@ -227,7 +227,7 @@ export class CateringListFieldComponent implements ControlValueAccessor {
     constructor(
         private _settings: SettingsService,
         private _org: OrganisationService,
-        private _dialog: MatDialog
+        private _dialog: MatDialog,
     ) {}
 
     /**
@@ -242,7 +242,7 @@ export class CateringListFieldComponent implements ControlValueAccessor {
     public ngOnChanges(changes: SimpleChanges) {
         if (changes.options) {
             this.orders = (this.orders || []).map(
-                (_) => new CateringOrder({ ..._, event: this.options as any })
+                (_) => new CateringOrder({ ..._, event: this.options as any }),
             );
         }
     }
@@ -253,7 +253,7 @@ export class CateringListFieldComponent implements ControlValueAccessor {
      */
     public writeValue(value: CateringOrder[]) {
         this.orders = (value || []).map(
-            (_) => new CateringOrder({ ..._, event: this.options as any })
+            (_) => new CateringOrder({ ..._, event: this.options as any }),
         );
     }
 
@@ -290,6 +290,7 @@ export class CateringListFieldComponent implements ControlValueAccessor {
     public editOrder(order: CateringOrder = new CateringOrder()) {
         const ref = this._dialog.open(NewCateringOrderModalComponent, {
             data: {
+                caterer: order.items[0]?.caterer,
                 items: order.items,
                 details: {
                     ...this.options,
@@ -315,14 +316,15 @@ export class CateringListFieldComponent implements ControlValueAccessor {
                 ];
                 for (const option of item.options) {
                     const opt = item.option_list.find(
-                        (_) => _.id === option.id
+                        (_) => _.id === option.id,
                     );
                     option.active = !!opt;
                 }
             }
             const new_order = new CateringOrder({
                 ...order,
                 items,
+                caterer: items[0].caterer,
                 event: this.options as any,
                 deliver_offset: ref.componentInstance.offset,
                 deliver_time: ref.componentInstance.exact_time
@@ -350,7 +352,7 @@ export class CateringListFieldComponent implements ControlValueAccessor {
         } else {
             this._settings.saveUserSetting(
                 'favourite_menu_items',
-                fav_list.filter((_) => _ !== cateringitem.id)
+                fav_list.filter((_) => _ !== cateringitem.id),
             );
         }
     }

libs/catering/src/lib/catering-menu.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { map } from 'rxjs/operators';
 
 import { CateringStateService } from './catering-state.service';
 import { CateringItem } from './catering-item.class';
 import { unique } from '@placeos/common';
 import { CateringOrdersService } from './catering-orders.service';
+import { combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'catering-menu',
@@ -19,23 +19,28 @@ import { CateringOrdersService } from './catering-orders.service';
                     name: ' ',
                     content: active_template,
                     size: '3.5rem',
-                    sortable: false
+                    sortable: false,
                 },
                 { key: 'name', name: 'Name' },
                 { key: 'category', name: 'Category' },
+                {
+                    key: 'caterer',
+                    name: 'Caterer',
+                    show: !filters?.caterer && caterers.length > 1,
+                },
                 {
                     key: 'unit_price',
                     name: 'Price',
                     content: price_template,
-                    size: '6rem'
+                    size: '6rem',
                 },
                 {
                     key: 'actions',
                     name: ' ',
                     content: actions_template,
                     size: '6.5rem',
-                    sortable: false
-                }
+                    sortable: false,
+                },
             ]"
             [filter]="filters?.search"
             [show_children]="show_children"
@@ -174,7 +179,16 @@ import { CateringOrdersService } from './catering-orders.service';
 export class CateringMenuComponent {
     public show_children: Record<string, boolean> = {};
     /** Observable for the currently active menu */
-    public readonly menu = this._catering.menu;
+    public readonly menu = combineLatest([
+        this._catering.menu,
+        this._orders.order_filters,
+    ]).pipe(
+        map(([menu, filters]) =>
+            menu.filter(
+                (item) => !filters?.caterer || item.caterer === filters.caterer,
+            ),
+        ),
+    );
 
     public readonly addOption = (item) => this._catering.addOption(item);
 
@@ -195,13 +209,18 @@ export class CateringMenuComponent {
     public get can_edit() {
         return this._catering.is_editable;
     }
+
     public get categories() {
         return this._catering.categories;
     }
 
+    public get caterers() {
+        return this._catering.caterer_list;
+    }
+
     constructor(
         private _catering: CateringStateService,
-        private _orders: CateringOrdersService
+        private _orders: CateringOrdersService,
     ) {}
 
     public isEnabled(item: CateringItem) {
@@ -213,7 +232,7 @@ export class CateringMenuComponent {
         if (!state) list = unique([...list, this._catering.zone]);
         else list = list.filter((_) => _ !== this._catering.zone);
         this._catering.updateItem(
-            new CateringItem({ ...item, hide_for_zones: list })
+            new CateringItem({ ...item, hide_for_zones: list }),
         );
     }
 }

libs/catering/src/lib/catering-order-list.component.ts

@@ -25,6 +25,12 @@ import { CATERING_STATUSES } from './catering.vars';
                         sortable: false,
                         content: state_template,
                     },
+                    {
+                        key: 'caterer',
+                        name: 'Caterer',
+                        show:
+                            !filters?.caterer && (caterers | async)?.length > 1,
+                    },
                     {
                         key: 'deliver_at',
                         name: 'Time',
@@ -222,6 +228,12 @@ export class CateringOrderListComponent extends AsyncHandler {
     /** Whether order list is loading */
     public readonly loading = this._orders.loading;
 
+    public get filters() {
+        return this._orders.filters;
+    }
+
+    public caterers = this._orders.caterers;
+
     public readonly statuses = CATERING_STATUSES;
     public readonly show_children: Record<string, boolean> = {};