Implement add-to-order dialog

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 { }

src/app/items/item-add/item-add.component.css

@@ -0,0 +1,3 @@
+.text {
+	font-family: "Roboto Mono", monospace;
+}

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>

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);
+	}
+}

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>

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);
+		});
+	}
 }
 

src/app/items/lineitem.model.ts

@@ -0,0 +1,5 @@
+export interface LineItem {
+	qty: number;
+	name: string;
+	cost: number;
+}