[Plate] Event Implementation:

api/lib/io.js

@@ -19,9 +19,7 @@ async function addPlate(_, config) {
     // file written successfully
   });
 
-  // display notification
-  filesAdded();
-  return Promise.resolve("Saved!");
+   return Promise.resolve("Saved!");
 }
 
 async function readPlates(_) {
@@ -158,8 +156,6 @@ async function addOrder(_, order) {
     // file written successfully
   });
 
-  // display notification
-  filesAdded();
   return Promise.resolve("Saved!");
 }
 

src/app/modules/plates/item/item.component.ts

@@ -1,16 +1,35 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ItemEvent} from "../plate.interface";
+import {MenuItem, Status} from "../../orders/order";
 
 @Component({
   selector: 'item',
   templateUrl: './item.component.html',
   styleUrls: ['./item.component.scss']
 })
-export class ItemComponent implements OnInit {
+export class ItemComponent {
 
-  constructor() {
+  @Input() public config!: MenuItem;
+
+  @Output() public onDoneEvent: EventEmitter<ItemEvent> = new EventEmitter<ItemEvent>(false);
+  @Output() public onCancelEvent: EventEmitter<ItemEvent> = new EventEmitter<ItemEvent>(false);
+
+  public onDone(): void {
+    this.onDoneEvent.emit({
+      action: Status.Done,
+      item: this.config
+    } as ItemEvent);
   }
 
-  ngOnInit(): void {
+  public onCancel(): void {
+    const event: ItemEvent = {
+      action: Status.Cancelled,
+      item: this.config
+    };
+
+    //TODO: Handle moved or re-queued reasons
+
+    this.onCancelEvent.emit(event);
   }
 
 }

src/app/modules/plates/plate.interface.ts

@@ -0,0 +1,25 @@
+import {MenuItem, Status} from "../orders/order";
+
+export enum PlateInterface {
+  Skeleton = "skeleton",
+  On = "on",
+  Off = "off",
+  Form = "form"
+}
+
+export function mode(): typeof PlateInterface {
+  return PlateInterface;
+}
+
+export enum PlateItemStatus {
+  Moved = "MOVED",
+  ReQueued = "RE_QUEUED"
+}
+
+export type PlateItemAction = PlateItemStatus | Status;
+
+export interface ItemEvent {
+  action: PlateItemAction;
+  item: MenuItem;
+  nextId?: string;
+}

src/app/modules/plates/plate/plate.component.html

@@ -19,11 +19,11 @@ <h3>{{config.name}}</h3>
              [value]="config._status!"
              styleClass="mr-2"></p-tag>
     </header>
-    <span *ngIf="config._severity !== 'danger' && (queue.isEmpty | async)" id="empty-container">
+    <span *ngIf="config._severity !== 'danger' && (queue.isEmpty$ | async)" id="empty-container">
       <h3>{{i18n.PLATE.EMPTY}}</h3>
       <i class="pi pi-inbox" id="empty"></i>
     </span>
-    <div *ngIf="!(queue.isEmpty | async)" class="item-list_container">
+    <div *ngIf="!(queue.isEmpty$ | async)" class="item-list_container">
       <ng-container *ngFor="let item of queue.values$ | async">
         <item></item>
       </ng-container>

src/app/modules/plates/plate/plate.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {mode, PlateMode} from "../plate-mode";
+import {mode, PlateInterface} from "../plate.interface";
 import {I18nService} from "../../../services/i18n.service";
 import {Plate} from "./plate.model";
 import {FormControl, FormGroup, Validators} from "@angular/forms";
@@ -18,7 +18,7 @@ export class PlateComponent implements OnInit {
   public readonly i18n: any;
 
   public icon: string = "pi-plus";
-  public plateMode: typeof PlateMode = mode();
+  public plateMode: typeof PlateInterface = mode();
   public form?: FormGroup | undefined;
   public showExpand: boolean = true;
 
@@ -53,7 +53,7 @@ export class PlateComponent implements OnInit {
       name: this.form?.get("name")?.value,
       color: this.form?.get("color")?.value,
       slot: [0, this.form?.get("number")?.value],
-      mode: PlateMode.On
+      mode: PlateInterface.On
     } as Plate);
   }
 
@@ -63,11 +63,11 @@ export class PlateComponent implements OnInit {
       color: new FormControl("", Validators.required),
       number: new FormControl(0, [Validators.required, Validators.pattern("^[0-9]*$")])
     });
-    this.config.mode = PlateMode.Form;
+    this.config.mode = PlateInterface.Form;
   }
 
   public discardForm() {
-    this.config.mode = PlateMode.Skeleton;
+    this.config.mode = PlateInterface.Skeleton;
   }
 
   public expandTab() {

src/app/modules/plates/plate/plate.model.ts

@@ -1,8 +1,8 @@
-import {PlateMode} from "../plate-mode";
+import {PlateInterface} from "../plate.interface";
 
 export interface Plate {
   _id?: string;
-  mode?: PlateMode;
+  mode?: PlateInterface;
   color?: string;
   name?: string;
   description?: string;

src/app/modules/plates/plates/plates.component.ts

@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, ElementRef, Inject, OnInit} from '@angular/core';
-import {mode, PlateMode} from "../plate-mode";
+import {mode, PlateInterface} from "../plate.interface";
 import {I18nService} from "../../../services/i18n.service";
 import {Plate} from "../plate/plate.model";
 import {ApiConnector} from "../../../services/api-connector";
@@ -15,7 +15,7 @@ export class PlatesComponent implements OnInit, AfterViewInit {
   public readonly i18n: any;
   public readonly DISPLAY_CHUNK = 3;
 
-  public plateMode: typeof PlateMode = mode();
+  public plateMode: typeof PlateInterface = mode();
   public hidePrevious: boolean = true;
   public hideNext: boolean = true;
   public plateList!: Plate[];
@@ -113,7 +113,7 @@ export class PlatesComponent implements OnInit, AfterViewInit {
         this.plateList = [
           ...plates,
           {
-            mode: PlateMode.Skeleton
+            mode: PlateInterface.Skeleton
           }
         ];
         this._total = this.plateList.length;

src/app/modules/plates/services/plate-queue-manager.service.ts

@@ -1,14 +1,17 @@
 import {Injectable} from '@angular/core';
 import {ReactiveQueue} from "../../shared/class/reactive-queue";
 import {Plate} from "../plate/plate.model";
-import {MenuItem} from "../../orders/order";
+import {MenuItem, Status} from "../../orders/order";
+import {PlateItemAction, PlateItemStatus} from "../plate.interface";
+import {BehaviorSubject} from "rxjs";
 
 @Injectable({
   providedIn: 'root'
 })
 export class PlateQueueManagerService {
 
   private _plates: Map<string, ReactiveQueue<MenuItem>> = new Map<string, ReactiveQueue<MenuItem>>();
+  private _changes$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
 
   constructor() {
   }
@@ -25,19 +28,68 @@ export class PlateQueueManagerService {
     this._plates.set(plate._id!, new ReactiveQueue());
   }
 
+  get notify(): BehaviorSubject<number> {
+    return this._changes$;
+  }
+
+  get haveNotify(): boolean {
+    return this._changes$.value > 0;
+  }
+
   public sendToQueue(id: string, item: MenuItem): void {
+    this._validateItem(item);
+    this._getQueue(id).enqueue(item);
+    this._changes$.next(this._changes$.value + 1);
+  }
+
+  public removeFromQueue(id: string, item: MenuItem): void {
+    this._validateItem(item);
+    const queue: ReactiveQueue<MenuItem> = this._getQueue(id);
+    queue.values = queue.values.filter((i: MenuItem) => {
+      return i._id != item._id;
+    });
+    this._changes$.next(this._changes$.value - 1);
+  }
+
+  public onItemAction(id: string, item: MenuItem, action: PlateItemAction, nextId?: string): void {
+    this._validateItem(item);
+
+    switch (action) {
+      case PlateItemStatus.Moved:
+        if (!nextId) throw new Error("No queue selected to move the item");
+        this.sendToQueue(nextId, item);
+        this.onItemAction(nextId, item, Status.Cancelled);
+        break;
+      case PlateItemStatus.ReQueued:
+        this.sendToQueue(id, item);
+        break;
+      case Status.Cancelled || Status.Done:
+        this.removeFromQueue(id, item);
+        //TODO: Invoke order service
+        break;
+      default:
+        console.warn("[QueueManager] Action not found");
+        break;
+    }
+  }
+
+  private _validateItem(item: MenuItem): void {
+    if (!item || !item._id || !item.name) {
+      throw new Error("Selected item is invalid!");
+    }
+  }
+
+  private _getQueue(id: string): ReactiveQueue<MenuItem> {
     if (!id) {
-      console.error("Plate Id is undefined!");
-      return;
+      throw new Error("Plate Id is undefined!");
     }
 
     const queue: ReactiveQueue<MenuItem> = this.getQueue(id);
 
     if (!queue) {
-      console.error("No queue found!");
-      return;
+      throw new Error("No queue found!");
     }
 
-    queue.enqueue(item);
+    return queue;
   }
 }

src/app/modules/shared/class/reactive-queue.ts

@@ -1,30 +1,35 @@
-import {BehaviorSubject, Observable, of} from "rxjs";
+import {Observable, of} from "rxjs";
 
 export class ReactiveQueue<T> {
-  private items$: BehaviorSubject<T[]>;
+  private readonly items: T[];
 
   constructor(items?: T[]) {
-    this.items$ = new BehaviorSubject<T[]>(items ?? []);
+    this.items = items ?? [];
   }
 
   get dequeue(): T | undefined {
-    return this.items$.getValue().shift();
+    return this.items.shift();
   }
 
-  get count(): Observable<number> {
-    return of(this.items$.getValue().length)
+  get count$(): Observable<number> {
+    return of(this.items.length)
   }
 
   get values(): T[] {
-    return this.items$.getValue();
+    return this.items;
+  }
+
+  set values(items: T[]) {
+    this.items.length = 0;
+    this.items.push(...items);
   }
 
   get values$(): Observable<T[]> {
-    return of(this.items$.getValue());
+    return of(this.items);
   }
 
-  get isEmpty(): Observable<boolean> {
-    return of(this.items$.getValue() == null || this.items$.getValue().length == 0);
+  get isEmpty$(): Observable<boolean> {
+    return of(this.items == null || this.items.length == 0);
   }
 
   public enqueue(value: T): void {

src/app/modules/shared/components/navbar-button/navbar-button.component.ts

@@ -3,22 +3,21 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 @Component({
   selector: 'navbar-button',
   template: `
-    <button (click)="click()" [ngClass]="_active ? 'active' : ''">
-      <i class="pi {{icon}}"></i>
+    <button (click)="click()" [ngClass]="active ? 'active' : ''">
+      <i *ngIf="!badged" class="pi {{icon}}"></i>
+      <i *ngIf="badged" class="pi {{icon}}" pBadge [value]="badgeCounter!.toString()"></i>
     </button>
   `,
   styleUrls: ['navbar-button.component.scss']
 })
 export class NavbarButtonComponent {
 
-  @Input() icon!: string;
-  @Output() onClick: EventEmitter<any> = new EventEmitter<any>(true);
-
-  public _active: boolean = false;
+  @Input() public icon!: string;
+  @Input() public active: boolean = false;
+  @Input() public badged?: boolean = false;
+  @Input() public badgeCounter?: number | null;
 
-  @Input() set active(value: boolean) {
-    this._active = value;
-  }
+  @Output() onClick: EventEmitter<any> = new EventEmitter<any>(true);
 
   public click() {
     this.onClick.emit(true);

src/app/modules/shared/components/navbar/navbar.component.html

@@ -5,6 +5,8 @@
   </navbar-button>
   <navbar-button (onClick)="onNavClick(routing.Plates)"
                  [active]="selectedRoute === routing.Plates"
+                 [badgeCounter]="plateQueueManagerService.notify | async"
+                 [badged]="plateQueueManagerService.haveNotify"
                  icon="pi-inbox">
   </navbar-button>
   <navbar-button (onClick)="onNavClick(routing.Orders)"

src/app/modules/shared/components/navbar/navbar.component.ts

@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
 import {Router} from "@angular/router";
 import {Routing} from "../../../../app-routing.module";
+import {PlateQueueManagerService} from "../../../plates/services/plate-queue-manager.service";
 
 @Component({
   selector: 'navbar',
@@ -11,7 +12,8 @@ export class NavbarComponent {
 
   public selectedRoute?: Routing = undefined;
 
-  constructor(private _router: Router) {
+  constructor(public plateQueueManagerService: PlateQueueManagerService,
+              private _router: Router) {
   }
 
   public get routing(): typeof Routing {