Implements item edit

backend/app.js

@@ -208,11 +208,25 @@ app.get('/api/getitems', (req, res, next) => {
 
 app.post('/api/item', (req, res, next) => {
 	console.log('Post: /api/item');
-	const item = new itemmodel(req.body.item);
-	item.save();
-	res.status(201).json({
-		message: 'Item added'
-	});
+	if ( req.body.item._id == '' ) {
+		const item = new itemmodel(req.body.item);
+		item.save();
+		res.status(201).json({
+			message: 'Item added'
+		});
+	} else {
+		console.log('Editing', req.body.item._id);
+		itemmodel.findByIdAndUpdate(req.body.item._id, {'name': req.body.item.name, 'description': req.body.item.description, 'cost': req.body.item.cost},
+			function(err, docs) {
+				if (err) {
+					console.log(err);
+				} else {
+					res.status(201).json({
+						message: 'Item updated'
+					});
+				}
+			});
+	}
 });
 
 app.get('/api/price', (req, res, next) => {

package-lock.json

@@ -22,6 +22,7 @@
         "angular-local-storage": "^0.7.1",
         "coingecko-api": "^1.0.10",
         "easyqrcodejs": "^4.4.6",
+        "material-design-icons": "^3.0.1",
         "rxjs": "~6.6.0",
         "tslib": "^2.3.0",
         "urlsafe-base64": "^1.0.0",
@@ -8816,6 +8817,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -22325,6 +22331,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
+    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",

package.json

@@ -24,6 +24,7 @@
     "angular-local-storage": "^0.7.1",
     "coingecko-api": "^1.0.10",
     "easyqrcodejs": "^4.4.6",
+    "material-design-icons": "^3.0.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.0",
     "urlsafe-base64": "^1.0.0",

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { HttpClientModule } from '@angular/common/http';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -36,6 +37,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     AppRoutingModule,
     FormsModule,
 	ReactiveFormsModule,
+	MatIconModule,
     HttpClientModule,
     MatInputModule,
     MatCardModule,
@@ -45,6 +47,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 	MatDialogModule,
     BrowserAnimationsModule
   ],
+  exports: [
+	  MatIconModule
+  ],
   providers: [],
   bootstrap: [AppComponent],
   entryComponents: [ItemCreateComponent]

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

@@ -2,6 +2,7 @@
 
 <mat-dialog-content [formGroup]="form">
 	<mat-form-field>
+		<input type="hidden" formControlName="id">
 		<input matInput placeholder="Item" formControlName="name">
 	</mat-form-field>
 	<mat-form-field>

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

@@ -12,21 +12,36 @@ import { Item } from '../item.model';
 export class ItemCreateComponent implements OnInit {
 
 	form: FormGroup;
+	id: string | undefined = '';
 	numberRegEx = /\d*\.?\d{1,2}/;
 
 	constructor(
 		private fb: FormBuilder,
 		private dialogRef: MatDialogRef<ItemCreateComponent>,
-		@Inject(MAT_DIALOG_DATA) {name, description, cost, user}:Item
+		@Inject(MAT_DIALOG_DATA) public data: Item
 	){
-		this.form = fb.group({
-			name: [null, Validators.required],
-			description: [null, Validators.required],
-			cost: new FormControl('', {
-				validators: [Validators.required, Validators.pattern(this.numberRegEx)],
-				updateOn: "blur"
-			})
-		});
+		if (data._id === '') { 
+			this.form = fb.group({
+				id: [null],
+				name: [null, Validators.required],
+				description: [null, Validators.required],
+				cost: new FormControl('', {
+					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 FormControl(data.cost, {
+					validators: [Validators.required, Validators.pattern(this.numberRegEx)],
+					updateOn: "blur"
+				})
+			});
+		}
 	}
 
 	ngOnInit () {

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

@@ -1,7 +1,11 @@
-* {
+.card {
 	font-family: 'Roboto-Mono', monospace;
 }
 
+.icons {
+	font-family: 'Material Icons';
+}
+
 .spacer{
 	flex: 1 1 auto;
 }
@@ -15,5 +19,6 @@ div.card{
 }
 
 p.price{
+	font-family: 'Roboto-Mono', monospace;
 	margin: 0px;
 }

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

@@ -2,7 +2,7 @@
 <div *ngIf="items.length > 0">
 	<div class="card" *ngFor="let item of itemsUpdate | async">
 		<mat-card>
-			<mat-card-title>
+			<mat-card-title class="card">
 				<table cellspacing="0" width="100%">
 					<tr>
 						<td>{{item.name}}</td>
@@ -13,12 +13,29 @@
 					</tr>
 				</table>
 			</mat-card-title>
-			<mat-card-subtitle>
+			<mat-card-subtitle class="card">
 				<p>{{item.description}}</p>
 			</mat-card-subtitle>
+			<mat-card-actions>
+				<table cellspacing="0" width="100%">
+					<tr>
+						<td>
+							<button mat-icon-button class="icons" (click)="edit(item._id!)">
+								<mat-icon inline=true>edit</mat-icon>
+							</button>
+						</td>
+						<td align="right">
+							<button mat-raised-button color="primary" class="icons">
+								<mat-icon>shopping_cart</mat-icon>
+							</button>
+						</td>
+					</tr>
+				</table>
+			</mat-card-actions>
 		</mat-card>
 	</div>
 </div>
 <p *ngIf = "items.length <= 0">No items yet!</p>
 <br>
-<button mat-raised-button (click)="openDialog()">Add item</button>
+<button mat-raised-button (click)="openDialog()">
+	<mat-icon>add</mat-icon>Add item</button>

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

@@ -53,14 +53,44 @@ export class ItemListComponent implements OnInit{
 
 		dialogConfig.disableClose = true;
 		dialogConfig.autoFocus = true;
-		dialogConfig.data = {name: '' , user: '', description: '', cost: 0}
+		dialogConfig.data = {_id: '', name: '' , user: '', description: '', cost: 0}
 
 		const dialogRef = this.dialog.open(ItemCreateComponent, dialogConfig);
 
 		dialogRef.afterClosed().subscribe((val) => {
-			//TODO connect to Item service
-			var item:Item = {name: val.name, description: val.description, cost: val.cost, user: this.owner.address};
-			this.itemService.addItem(item);
+			if(val != null) {
+				var item:Item = {name: val.name, description: val.description, cost: val.cost, user: this.owner.address};
+				this.itemService.addItem(item);
+			}
+			this.itemService.getItems(this.owner.address);
+		});
+	}
+
+	edit(id: string) {
+		//console.log('Edit:', id);
+		const item = this.items.find(element => element._id == id);
+		//console.log(item);
+		const dialogConfig = new MatDialogConfig();
+
+		dialogConfig.disableClose = true;
+		dialogConfig.autoFocus = true;
+		dialogConfig.data = item;
+
+		const dialogRef = this.dialog.open(ItemCreateComponent, dialogConfig);
+		dialogRef.afterClosed().subscribe((val) => {
+			if (val != null) {
+				var editItem: Item = {
+					_id: val.id,
+					name: val.name,
+					description: val.description,
+					cost: val.cost,
+					user: this.owner.address
+				};
+				//console.log('Edit:', editItem);
+				this.itemService.addItem(editItem).subscribe((response) => {
+					this.itemService.getItems(this.owner.address);
+				});;
+			}
 			this.itemService.getItems(this.owner.address);
 		});
 	}

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Sell4zec</title>
+  <title>Z-Go!</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">