Items Create/Edit Forms updated

src/app/app.module.ts

@@ -25,6 +25,7 @@ import { ViewerComponent } from './viewer/viewer.component';
 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 { ItemEditComponent } from './items/item-edit/item-edit.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';
@@ -54,6 +55,7 @@ import { NotifierComponent } from './notifier/notifier.component';
         LoginComponent,
         OrderComponent,
         ItemCreateComponent,
+        ItemEditComponent,
         ItemDeleteComponent,
         ItemAddComponent,
         CancelComponent,

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

@@ -5,3 +5,12 @@
 input[type=number]{
 	text-align: right;
 }
+
+.itemDataTitle {
+	font-family: 'Spartan', sans-serif;
+	background: #ff5722;
+	color: white;
+	font-size: 26px;
+	text-align: center;
+	padding: 5px;
+}

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

@@ -1,13 +1,21 @@
-<h2 mat-dialog-title class="text">Add to Order</h2>
+<div  class='itemDataTitle'>Add to Order</div>
 
+<div class='container'>
 	<mat-dialog-content [formGroup]="orderForm">
 		<p class="text">{{lineItem.name}}</p>
-	<mat-form-field>
+		<mat-form-field [style.width.%]="100">
 			<input matInput type="number" placeholder="Quantity" formControlName="qty">
 		</mat-form-field>
 	</mat-dialog-content>
 
-<mat-dialog-actions>
+	<div style="display: flex;
-	<button mat-raised-button class="text" (click)="close()">Cancel</button>
+				justify-content: space-between;">
-	<button mat-raised-button class="text" color="primary" (click)="save()">Add</button>
+		<button mat-raised-button 
-</mat-dialog-actions>
+				class="text" 
+				(click)="close()">Cancel</button>
+		<button mat-raised-button 
+				class="text" 
+				color="primary" 
+				(click)="save()">Add</button>
+	</div>
+</div>

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

@@ -5,3 +5,12 @@
 input[type=number]{
 	text-align: right;
 }
+
+.itemDataTitle {
+	font-family: 'Spartan', sans-serif;
+	background: #ff5722;
+	color: white;
+	font-size: 26px;
+	text-align: center;
+	padding: 5px;
+}

src/app/items/item-create/item-create.component.html

@@ -1,16 +1,27 @@
-<h2 mat-dialog-title class="text">Add item</h2>
 
+<div  class='itemDataTitle'>Add Item</div>
+
+<div class='container' style="margin-top: 20px;">
 	<mat-dialog-content [formGroup]="form">
-	<mat-form-field class="text" appearance="outline">
+		<span style="line-height: 10px;"></span>
+		<mat-form-field class="text" [style.width.%]="100">
 			<mat-label>Item</mat-label>
 			<input type="hidden" formControlName="id">
-		<input matInput placeholder="Item" formControlName="name">
+			<input matInput 
+				   placeholder="Item" 
+				   formControlName="name"
+				   maxlength="16">
 		</mat-form-field >
-	<mat-form-field class="text" appearance="outline">
+		<mat-form-field class="text" [style.width.%]="100">
 			<mat-label>Description</mat-label>
-		<textarea matInput placeholder="Description" formControlName="description"></textarea>
+			<textarea matInput 
+					  placeholder="Description" 
+					  formControlName="description"
+					  maxlength="30" 
+    				  style="line-height:20px; 
+    				  		 overflow:auto;"></textarea>
 		</mat-form-field>
-	<mat-form-field class="text" appearance="outline">
+		<mat-form-field class="text" [style.width.%]="100">
 			<mat-label>Price</mat-label>
 			<input matInput type="number" placeholder="Price" formControlName="cost">
 			<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
@@ -19,7 +30,10 @@
 		</mat-form-field>
 	</mat-dialog-content>
 
-<mat-dialog-actions>
+	<div style="display: flex;
+				justify-content: space-between;">
 		<button mat-raised-button class="text" (click)="close()">Close</button>
 		<button mat-raised-button class="text" color="primary" (click)="save()">Save</button>
-</mat-dialog-actions>
+	</div>		
+
+</div>

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

@@ -0,0 +1,16 @@
+.text {
+	font-family: 'Spartan', sans-serif;
+}
+
+input[type=number]{
+	text-align: right;
+}
+
+.itemDataTitle {
+	font-family: 'Spartan', sans-serif;
+	background: #ff5722;
+	color: white;
+	font-size: 26px;
+	text-align: center;
+	padding: 5px;
+}

src/app/items/item-edit/item-edit.component.html

@@ -0,0 +1,39 @@
+
+<div  class='itemDataTitle'>Edit Item</div>
+
+<div class='container' style="margin-top: 20px;">
+	<mat-dialog-content [formGroup]="form">
+		<span style="line-height: 10px;"></span>
+		<mat-form-field class="text" [style.width.%]="100">
+			<mat-label>Item</mat-label>
+			<input type="hidden" formControlName="id">
+			<input matInput 
+				   placeholder="Item" 
+				   formControlName="name"
+				   maxlength="16">
+		</mat-form-field >
+		<mat-form-field class="text" [style.width.%]="100">
+			<mat-label>Description</mat-label>
+			<textarea matInput 
+					  placeholder="Description" 
+					  formControlName="description"
+					  maxlength="30" 
+    				  style="line-height:20px; 
+    				  		 overflow:auto;"></textarea>
+		</mat-form-field>
+		<mat-form-field class="text" [style.width.%]="100">
+			<mat-label>Price</mat-label>
+			<input matInput type="number" placeholder="Price" formControlName="cost">
+			<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
+				<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
+			</div>
+		</mat-form-field>
+	</mat-dialog-content>
+
+	<div style="display: flex;
+				justify-content: space-between;">
+		<button mat-raised-button class="text" (click)="close()">Close</button>
+		<button mat-raised-button class="text" color="primary" (click)="save()">Save</button>
+	</div>		
+
+</div>

src/app/items/item-edit/item-edit.component.ts

@@ -0,0 +1,59 @@
+import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { UntypedFormBuilder, Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
+import { Item } from '../item.model';
+
+
+@Component({
+	selector: 'app-item-edit',
+	templateUrl: './item-edit.component.html',
+	styleUrls: ['./item-edit.component.css']
+})
+
+export class ItemEditComponent implements OnInit {
+
+	form: UntypedFormGroup;
+	id: string | undefined = '';
+	numberRegEx = /\d*\.?\d{1,2}/;
+
+	constructor(
+		private fb: UntypedFormBuilder,
+		private dialogRef: MatDialogRef<ItemEditComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: Item
+	){
+		if (data._id === '') { 
+			this.form = fb.group({
+				id: [''],
+				name: [null, Validators.required],
+				description: [null, Validators.required],
+				cost: new UntypedFormControl('', {
+					validators: [Validators.required, Validators.pattern(this.numberRegEx)],
+					updateOn: "blur"
+				})
+			});
+		} else {
+			this.id = data._id;
+			this.form = fb.group({
+				id: [data._id],
+				name: [data.name, Validators.required],
+				description: [data.description, Validators.required],
+				cost: new UntypedFormControl(data.cost, {
+					validators: [Validators.required, Validators.pattern(this.numberRegEx)],
+					updateOn: "blur"
+				})
+			});
+		}
+	}
+
+	ngOnInit () {
+	}
+
+	save() {
+//		console.log(this.form.value);
+		this.dialogRef.close(this.form.value);
+	}
+
+	close () {
+		this.dialogRef.close();
+	}
+}

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

@@ -35,12 +35,26 @@ p.price{
 	text-align: right;
 }
 
+.buttons-class {
+  background-color: #ff5722;
+  color: white;
+  font-family: 'Spartan', sans-serif;
+  font-size: 12px !important;
+  font-weight: 700;
+  height: 25px !important;
+  width: 100px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
 .buttons-class-cart{
   background-color: #ff5722;
   color: white;
   font-size: 18px;
   font-weight: 700;
-  height: 25px !important;
+  height:30px !important;
   width: 50px !important;
   display: flex;
   align-items: center;
@@ -49,10 +63,14 @@ p.price{
 }
 
 .availableItems{
+  display: flex;
+  justify-content: space-between;
   background: lightblue;
-  font-family: Roboto Mono;
+  font-family: 'Spartan', sans-serif !important;
   font-size: 18px;
   font-weight: 700;
   text-align: left;
   margin: 5px;
+  height: 25px;
+  padding: 12px;
 }

src/app/items/item-list/item-list.component.html

@@ -1,7 +1,19 @@
 <div *ngIf="items.length > 0">
 	<div class="availableItems" >
 		Available Items:
+		<button mat-raised-button 
+				class="buttons-class"
+				(click)="openDialog()">
+			<mat-icon class="icon">
+				add
+			</mat-icon>
+			Add item
+		</button>
+
 	</div>
+	<div style="display: block;
+				overflow-y: auto;
+				height: 500px;">
 		<div class="card" *ngFor="let item of itemsUpdate | async">
 			<mat-card>
 				<table cellspacing="0" width="100%" >
@@ -64,13 +76,18 @@
 			</mat-card>
 		</div>
 	</div>	
-<p *ngIf = "items.length <= 0">No items yet!</p>
+</div>
-<br>
+<div *ngIf = "items.length <= 0">
-<button class="text" 
+	<div class="availableItems" >
-		mat-raised-button 
+		No items yet!
+		<button mat-raised-button 
+				class="buttons-class"
 				(click)="openDialog()">
 			<mat-icon class="icon">
 				add
 			</mat-icon>
 			Add item
 		</button>
+	</div>
+</div>	
+<br>

src/app/items/item-list/item-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Input, Inject, Component, OnInit } from '@angular/core';
 import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
 
 import { faCartShopping } from '@fortawesome/free-solid-svg-icons';
@@ -11,9 +11,10 @@ import { UserService } from '../../user.service';
 import { ItemService } from '../items.service';
 import { OrderService} from '../../order/order.service';
 import { ItemCreateComponent } from '../item-create/item-create.component';
+import { ItemEditComponent } from '../item-edit/item-edit.component';
 import { ItemDeleteComponent } from '../item-delete/item-delete.component';
 import { ItemAddComponent } from '../item-add/item-add.component';
-
+import { NotifierService } from '../../notifier.service';
 
 @Component({
 	selector: 'app-item-list',
@@ -64,8 +65,9 @@ export class ItemListComponent implements OnInit{
 		userService: UserService,
 		public orderService: OrderService,
 		public fullnodeService: FullnodeService,
-		private dialog: MatDialog
+		private dialog: MatDialog,
-	) {
+		private notifierService: NotifierService )
+	{
 			this.ownerUpdate = userService.ownerUpdate;
 			this.itemsUpdate = itemService.itemsUpdated;
 			this.ownerUpdate.subscribe((owner) => {
@@ -97,6 +99,9 @@ export class ItemListComponent implements OnInit{
 			if(val != null) {
 				var item:Item = {_id: '', name: val.name, description: val.description, cost: val.cost, owner: this.owner.address};
 				this.itemService.addItem(item);
+				this.notifierService
+				    .showNotification("Item successfully created!",
+			    	              "Close","success");
 			}
 			this.itemService.getItems(this.owner.address);
 			this.itemsUpdate.subscribe((items) => {
@@ -115,7 +120,7 @@ export class ItemListComponent implements OnInit{
 		dialogConfig.autoFocus = true;
 		dialogConfig.data = item;
 
-		const dialogRef = this.dialog.open(ItemCreateComponent, dialogConfig);
+		const dialogRef = this.dialog.open(ItemEditComponent, dialogConfig);
 		dialogRef.afterClosed().subscribe((val) => {
 			if (val != null) {
 				var editItem: Item = {
@@ -128,7 +133,10 @@ export class ItemListComponent implements OnInit{
 				//console.log('Edit:', editItem);
 				this.itemService.addItem(editItem).subscribe((response) => {
 					this.itemService.getItems(this.owner.address);
-				});;
+				});
+				this.notifierService
+				    .showNotification("Item information updated!!",
+				    	              "Close","success");
 			}
 			this.itemService.getItems(this.owner.address);
 		});

src/app/listorders/listorders.component.css

@@ -110,6 +110,12 @@ img.icon{
 
 .minibutton {
 	font-family: 'Spartan', sans-serif;
+	font-size: 12px;
+	background:  #ff5722;
+	color: white;
+	height: 24px;
+	line-height: 20px;
+	padding: 2px;
 }
 
 .spacer {

src/app/listorders/listorders.component.html

@@ -122,7 +122,11 @@
 				</tr>
 			</tbody>
 		</table>
-		<div align="center">
+		<div style="display: flex;
+							  justify-content: space-between;
+							  padding-left: 20%;
+							  padding-right: 20%;
+							  margin-top: 10px;">
 			<span>
 				<button mat-stroked-button class="minibutton" color="primary" (click)="invoice(order)">Invoice</button>
 			</span>

src/app/order/order.component.css

@@ -12,7 +12,7 @@ img.icon{
 }
 
 .noOrderMsg {
-	font-family: Roboto Mono;
+	font-family: 'Roboto Mono';
   font-size: 20px;
   font-weight: 700;
   margin:  10px; 
@@ -21,7 +21,7 @@ img.icon{
 }
 
 .newOrder {
-	font-family:  Roboto Mono !important;
+	font-family:  'Roboto Mono' !important;
 }
 
 .newOrderTitle1 {
@@ -78,7 +78,7 @@ img.icon{
 
 .availableItems{
   background: lightblue;
-  font-family: Roboto Mono;
+  font-family: 'Roboto Mono';
   font-size: 18px;
   font-weight: 700;
   text-align: left;