From 064044c01173251748ff1c93c10fbcafec2a9abf Mon Sep 17 00:00:00 2001
From: Rene Vergara <rene@vergara.network>
Date: Tue, 26 Oct 2021 15:07:51 -0500
Subject: [PATCH] Implement add-to-order dialog

---
 src/app/app.module.ts                         |  6 ++-
 src/app/items/item-add/item-add.component.css |  3 ++
 .../items/item-add/item-add.component.html    | 13 ++++++
 src/app/items/item-add/item-add.component.ts  | 45 +++++++++++++++++++
 .../items/item-list/item-list.component.html  |  2 +-
 .../items/item-list/item-list.component.ts    | 23 ++++++++++
 src/app/items/lineitem.model.ts               |  5 +++
 7 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 src/app/items/item-add/item-add.component.css
 create mode 100644 src/app/items/item-add/item-add.component.html
 create mode 100644 src/app/items/item-add/item-add.component.ts
 create mode 100644 src/app/items/lineitem.model.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5aab3b5..34e1e06 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -18,6 +18,7 @@ import { LoginComponent } from './login/login.component';
 import { ItemListComponent } from './items/item-list/item-list.component';
 import { ItemCreateComponent } from './items/item-create/item-create.component';
 import { ItemDeleteComponent } from './items/item-delete/item-delete.component';
+import { ItemAddComponent} from './items/item-add/item-add.component';
 import { OrderComponent } from './order/order.component';
 //import { NameDialogComponent } from './namedialog/namedialog.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -31,7 +32,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 	LoginComponent,
 	OrderComponent,
 	ItemCreateComponent,
-	ItemDeleteComponent
+	ItemDeleteComponent,
+	ItemAddComponent
 	//NameDialogComponent,
   ],
   imports: [
@@ -54,6 +56,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   ],
   providers: [],
   bootstrap: [AppComponent],
-  entryComponents: [ItemCreateComponent, ItemDeleteComponent]
+  entryComponents: [ItemCreateComponent, ItemDeleteComponent, ItemAddComponent]
 })
 export class AppModule { }
diff --git a/src/app/items/item-add/item-add.component.css b/src/app/items/item-add/item-add.component.css
new file mode 100644
index 0000000..c921a22
--- /dev/null
+++ b/src/app/items/item-add/item-add.component.css
@@ -0,0 +1,3 @@
+.text {
+	font-family: "Roboto Mono", monospace;
+}
diff --git a/src/app/items/item-add/item-add.component.html b/src/app/items/item-add/item-add.component.html
new file mode 100644
index 0000000..82a25be
--- /dev/null
+++ b/src/app/items/item-add/item-add.component.html
@@ -0,0 +1,13 @@
+<h2 mat-dialog-title class="text">Add to Order</h2>
+
+<mat-dialog-content [formGroup]="orderForm">
+	<p class="text">{{lineItem.name}}</p>
+	<mat-form-field>
+		<input matInput placeholder="Quantity" formControlName="qty">
+	</mat-form-field>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+	<button mat-raised-button class="text" (click)="close()">Cancel</button>
+	<button mat-raised-button class="text" color="primary" (click)="save()">Add</button>
+</mat-dialog-actions>
diff --git a/src/app/items/item-add/item-add.component.ts b/src/app/items/item-add/item-add.component.ts
new file mode 100644
index 0000000..d316557
--- /dev/null
+++ b/src/app/items/item-add/item-add.component.ts
@@ -0,0 +1,45 @@
+import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
+import { LineItem } from '../lineitem.model';
+import { Order } from '../../order/order.model';
+
+@Component({
+	selector: 'app-item-add',
+	templateUrl: './item-add.component.html',
+	styleUrls: ['./item-add.component.css']
+})
+
+export class ItemAddComponent implements OnInit {
+
+	orderForm: FormGroup;
+	lineItem: LineItem;
+	//order: Order;
+
+	constructor(
+		private fb: FormBuilder,
+		private dialogRef: MatDialogRef<ItemAddComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: LineItem
+	) {
+		this.orderForm = fb.group({
+			qty: [data.qty, Validators.required]
+		});
+		this.lineItem = {
+			qty : data.qty,
+			name : data.name,
+			cost : data.cost
+		}
+	}
+
+	ngOnInit() {
+	}
+
+	close() {
+		this.dialogRef.close();
+	}
+
+	save() {
+		this.lineItem.qty = this.orderForm.value.qty;
+		this.dialogRef.close(this.lineItem);
+	}
+}
diff --git a/src/app/items/item-list/item-list.component.html b/src/app/items/item-list/item-list.component.html
index 905af38..e57ede7 100644
--- a/src/app/items/item-list/item-list.component.html
+++ b/src/app/items/item-list/item-list.component.html
@@ -27,7 +27,7 @@
 							</button>
 						</td>
 						<td align="right">
-							<button mat-raised-button color="primary" class="icons">
+							<button mat-raised-button color="primary" class="icons" (click)="addToOrder(item._id!)">
 								<mat-icon>shopping_cart</mat-icon>
 							</button>
 						</td>
diff --git a/src/app/items/item-list/item-list.component.ts b/src/app/items/item-list/item-list.component.ts
index 2320f35..acd567f 100644
--- a/src/app/items/item-list/item-list.component.ts
+++ b/src/app/items/item-list/item-list.component.ts
@@ -8,6 +8,7 @@ import { UserService } from '../../user.service';
 import { ItemService } from '../items.service';
 import { ItemCreateComponent } from '../item-create/item-create.component';
 import { ItemDeleteComponent } from '../item-delete/item-delete.component';
+import { ItemAddComponent } from '../item-add/item-add.component';
 
 
 @Component({
@@ -115,5 +116,27 @@ export class ItemListComponent implements OnInit{
 			this.itemService.getItems(this.owner.address);
 		});
 	}
+
+	addToOrder(id: string) {
+		const item = this.items.find(element => element._id == id);
+		//console.log(item);
+		const dialogConfig = new MatDialogConfig();
+
+		dialogConfig.disableClose = true;
+		dialogConfig.autoFocus = true;
+		dialogConfig.data = {
+			qty: 1,
+			name: item!.name,
+			cost: item!.cost
+		};
+
+		const dialogRef = this.dialog.open(ItemAddComponent, dialogConfig);
+		dialogRef.afterClosed().subscribe((val) => {
+			if (val != null) {
+				console.log('Adding to order', val);
+			}
+			this.itemService.getItems(this.owner.address);
+		});
+	}
 }
 
diff --git a/src/app/items/lineitem.model.ts b/src/app/items/lineitem.model.ts
new file mode 100644
index 0000000..bc45e3e
--- /dev/null
+++ b/src/app/items/lineitem.model.ts
@@ -0,0 +1,5 @@
+export interface LineItem {
+	qty: number;
+	name: string;
+	cost: number;
+}