[Plate] Event Implementation

src/app/modules/orders/order-new/order-new.component.html

@@ -16,7 +16,7 @@
         <p-tabPanel [header]="category.name" *ngFor="let category of categories; let i = index" [selected]="i == 0">
           <div class="grid">
             <ng-container *ngFor="let item of category.menuItems">
-              <p-card [header]="item.name"
+              <p-card [header]="item.name!"
                       [ngClass]="{'menu-item-selection': item.selected}"
                       (click)="selectMenuItem($event, item)"
                       class="m-2 menu-item-card"

src/app/modules/orders/order-new/order-new.component.ts

@@ -151,8 +151,11 @@ export class OrderNewComponent implements OnInit, OnDestroy {
       }
     });
     this.apiConnector.addOrders(this.orders).subscribe(() => {
-      this.orders.filter(order => !!order.plate).forEach(order => {
-        this._plateQueueManagerService.sendToQueue(order.plate?._id!, order.menuItem);
+      this.orders.forEach(order => {
+        if (order.plate)
+          this._plateQueueManagerService.sendToQueue(order.plate?._id!, order);
+        else
+          this._plateQueueManagerService.sendToQueue(PlateQueueManagerService.UNASSIGNED_QUEUE, order);
       });
       this.router.navigate(['/orders']);
     });

src/app/modules/orders/order.ts

@@ -1,18 +1,19 @@
 import {Plate} from "../plates/plate/plate.model";
+import {PlateItemAction} from "../plates/plate.interface";
 
 export interface Order {
   _id?: string,
   orderId: number,
   menuItem: MenuItem,
   plate?: Plate | null,
-  status: Status,
+  status: PlateItemAction,
   date: string | null,
   notes?: string
 }
 
 export interface MenuItem {
   _id?: string,
-  name: string,
+  name?: string,
   description?: string
   category?: Category
 }

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

@@ -3,16 +3,40 @@
     <div class="ellipse"></div>
     <i class="pi pi-apple"></i>
   </div>
-  <span class="item_title">panino</span>
-  <span class="item_order">ordine 10</span>
+  <span class="item_title">{{config.menuItem.name}}</span>
+  <span class="item_order">ORDINE {{config.orderId}}</span>
   <span class="item_note">
     <ul>
       <li>+ ketchup</li>
       <li>+ maionese</li>
     </ul>
   </span>
   <span class="item_actions">
-    <button class="p-button-rounded p-button-text p-button-success" icon="pi pi-check" pButton pRipple></button>
-    <button class="p-button-rounded p-button-text p-button-danger" icon="pi pi-trash" pButton pRipple></button>
+    <button (click)="onDone()"
+            class="p-button-rounded p-button-text p-button-success"
+            icon="pi pi-check"
+            pButton
+            pRipple></button>
+    <button (click)="toggleOverlay()"
+            class="p-button-rounded p-button-text p-button-danger"
+            icon="pi pi-times"
+            pButton
+            pRipple></button>
+    <ng-container *ngIf="deleteOverlay" [ngTemplateOutlet]="overlay"></ng-container>
   </span>
 </div>
+<ng-template #overlay>
+  <div class="delete-options__container">
+    <ng-container *ngIf="!showPlateList">
+      <span (click)="opt.command!()" *ngFor="let opt of deleteOptions">
+        <i [class]="opt.icon"></i>
+        <label>{{opt.label}}</label>
+      </span>
+    </ng-container>
+    <ng-container *ngIf="showPlateList">
+      <span (click)="onPlateMoved(p)" *ngFor="let p of plateList">
+        <label>{{p.name}}</label>
+      </span>
+    </ng-container>
+  </div>
+</ng-template>

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

@@ -81,3 +81,41 @@
     justify-content: space-evenly;
   }
 }
+
+.delete-options__container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+
+  background-color: white;
+  width: 50%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: baseline;
+
+  border: 1px solid black;
+  border-radius: 5px;
+
+  span {
+    width: 100%;
+    padding: 5px;
+
+    label {
+      margin-left: 10px;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+      background-color: gainsboro;
+      border: 1px solid black;
+      border-radius: 5px;
+    }
+  }
+}

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

@@ -1,35 +1,89 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {ItemEvent} from "../plate.interface";
-import {MenuItem, Status} from "../../orders/order";
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {ItemEvent, PlateItemAction, PlateItemStatus} from "../plate.interface";
+import {Order, Status} from "../../orders/order";
+import {MenuItem as PrimeMenuItem} from 'primeng/api';
+import {Plate} from "../plate/plate.model";
 
 @Component({
   selector: 'item',
   templateUrl: './item.component.html',
   styleUrls: ['./item.component.scss']
 })
-export class ItemComponent {
+export class ItemComponent implements OnInit {
 
-  @Input() public config!: MenuItem;
+  @Input() public config!: Order;
+  @Input() public plateList: Plate[] = [];
 
   @Output() public onDoneEvent: EventEmitter<ItemEvent> = new EventEmitter<ItemEvent>(false);
   @Output() public onCancelEvent: EventEmitter<ItemEvent> = new EventEmitter<ItemEvent>(false);
 
+  public deleteOptions: PrimeMenuItem[] = [];
+  public deleteOverlay: boolean = false;
+  public showPlateList: boolean = false;
+
+  public ngOnInit(): void {
+    this.deleteOptions = [
+      {
+        icon: 'pi pi-trash',
+        label: 'Elimina',
+        command: () => {
+          this.onCancel(Status.Cancelled);
+        }
+      },
+      {
+        icon: 'pi pi-undo',
+        label: 'Rimetti in Attesa',
+        command: () => {
+          this.onCancel(Status.Todo);
+        }
+      },
+      {
+        icon: 'pi pi-directions',
+        label: 'Sposta in altra Piastra',
+        command: () => {
+          this.showPlateList = true;
+        }
+      },
+      {
+        icon: 'pi pi-chevron-up',
+        label: 'Annulla',
+        command: () => {
+          this.toggleOverlay();
+        }
+      },
+    ];
+  }
+
   public onDone(): void {
     this.onDoneEvent.emit({
       action: Status.Done,
       item: this.config
     } as ItemEvent);
   }
 
-  public onCancel(): void {
+  public onCancel(status: PlateItemAction): void {
     const event: ItemEvent = {
-      action: Status.Cancelled,
+      action: status,
       item: this.config
-    };
-
-    //TODO: Handle moved or re-queued reasons
+    } as ItemEvent;
 
     this.onCancelEvent.emit(event);
+    this.toggleOverlay();
+  }
+
+  public toggleOverlay(): void {
+    this.deleteOverlay = !this.deleteOverlay;
+    this.showPlateList = false;
   }
 
+  public onPlateMoved(plate: Plate): void {
+    const event: ItemEvent = {
+      action: PlateItemStatus.Moved,
+      item: this.config,
+      nextId: plate._id
+    } as ItemEvent;
+
+    this.onCancelEvent.emit(event);
+    this.toggleOverlay();
+  }
 }

src/app/modules/plates/items-overlay/items-overlay.component.html

@@ -0,0 +1,27 @@
+<section>
+  <button (click)="onClose.emit()"
+          *ngIf="!hideCloseButton"
+          class="p-button-rounded p-button-info exit-button"
+          icon="pi pi-times"
+          pButton
+          pRipple
+          type="button"></button>
+  <p *ngIf="items.length > 0">Ordini in Attesa</p>
+  <div class="items-overlay__rows-container">
+    <div *ngFor="let i of items" class="items-overlay__row">
+      <i class="pi pi-apple item-icon"></i>
+      <span class="item_title">{{i.menuItem?.name}}</span>
+      <span class="item_order">ORDINE {{i.orderId}}</span>
+      <button (click)="onRun.emit(i)"
+              class="play-button p-button-success"
+              icon="pi pi-play play-button"
+              pButton
+              [showDelay]="500"
+              pTooltip="Avvia"></button>
+    </div>
+  </div>
+  <div *ngIf="items.length == 0" class="items-overlay__empty-container">
+    <i class="pi pi-book"></i>
+    <h3>{{i18n.PLATE.OVERLAY.EMPTY}}</h3>
+  </div>
+</section>

src/app/modules/plates/items-overlay/items-overlay.component.scss

@@ -0,0 +1,76 @@
+@import "mixins";
+
+section {
+  width: 97%;
+  height: 200px;
+
+  margin: auto;
+
+  background-color: white;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: 1px solid white;
+  border-radius: 5px;
+
+  .exit-button {
+    height: 10px;
+    width: 26px;
+
+    position: absolute;
+    top: -10px;
+    right: 0;
+  }
+
+  p {
+    @include title-center();
+
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .items-overlay__rows-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    row-gap: 10px;
+
+    .items-overlay__row {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      padding: 10px;
+      text-transform: uppercase;
+
+      background-color: gainsboro;
+      border: 1px solid gainsboro;
+      border-radius: 10px;
+      width: 95%;
+      margin: auto;
+
+      .item-icon {
+        font-size: 2rem;
+      }
+
+      .play-button {
+        height: 10px;
+      }
+    }
+  }
+
+  .items-overlay__empty-container {
+    height: 100%;
+
+    @include center-flex;
+    flex-direction: column;
+
+    h3 {
+      text-transform: uppercase;
+    }
+
+    i {
+      font-size: 3rem;
+    }
+  }
+}

src/app/modules/plates/items-overlay/items-overlay.component.ts

@@ -0,0 +1,23 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Order} from "../../orders/order";
+import {I18nService} from "../../../services/i18n.service";
+
+@Component({
+  selector: 'items-overlay',
+  templateUrl: './items-overlay.component.html',
+  styleUrls: ['./items-overlay.component.scss']
+})
+export class ItemsOverlayComponent {
+
+  public readonly i18n: any;
+
+  @Input() public items: Order[] = [];
+  @Input() public hideCloseButton: boolean = false;
+
+  @Output() public onClose: EventEmitter<void> = new EventEmitter<void>(false);
+  @Output() public onRun: EventEmitter<Order> = new EventEmitter<Order>(false);
+
+  constructor(public i18nService: I18nService) {
+    this.i18n = i18nService.instance;
+  }
+}

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

@@ -1,4 +1,4 @@
-import {MenuItem, Status} from "../orders/order";
+import {Order, Status} from "../orders/order";
 
 export enum PlateInterface {
   Skeleton = "skeleton",
@@ -13,13 +13,13 @@ export function mode(): typeof PlateInterface {
 
 export enum PlateItemStatus {
   Moved = "MOVED",
-  ReQueued = "RE_QUEUED"
 }
 
 export type PlateItemAction = PlateItemStatus | Status;
 
 export interface ItemEvent {
+  plateId: string;
   action: PlateItemAction;
-  item: MenuItem;
+  item: Order;
   nextId?: string;
 }