Implements custom theme

angular.json

@@ -30,8 +30,7 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },

src/app/app.module.ts

@@ -17,6 +17,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 { ItemDeleteComponent } from './items/item-delete/item-delete.component';
 import { OrderComponent } from './order/order.component';
 //import { NameDialogComponent } from './namedialog/namedialog.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -29,7 +30,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 	ItemListComponent,
 	LoginComponent,
 	OrderComponent,
-	ItemCreateComponent
+	ItemCreateComponent,
+	ItemDeleteComponent
 	//NameDialogComponent,
   ],
   imports: [
@@ -52,6 +54,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   ],
   providers: [],
   bootstrap: [AppComponent],
-  entryComponents: [ItemCreateComponent]
+  entryComponents: [ItemCreateComponent, ItemDeleteComponent]
 })
 export class AppModule { }

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

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

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

@@ -1,14 +1,14 @@
-<h2 mat-dialog-title>Add item</h2>
+<h2 mat-dialog-title class="text">Add item</h2>
 
 <mat-dialog-content [formGroup]="form">
-	<mat-form-field>
+	<mat-form-field class="text">
 		<input type="hidden" formControlName="id">
 		<input matInput placeholder="Item" formControlName="name">
 	</mat-form-field>
-	<mat-form-field>
+	<mat-form-field class="text">
 		<textarea matInput placeholder="Description" formControlName="description"></textarea>
 	</mat-form-field>
-	<mat-form-field>
+	<mat-form-field class="text">
 		<input matInput type="number" placeholder="Price in USD" formControlName="cost">
 		<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
 			<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
@@ -17,6 +17,6 @@
 </mat-dialog-content>
 
 <mat-dialog-actions>
-	<button mat-raised-button (click)="close()">Close</button>
-	<button mat-raised-button color="primary" (click)="save()">Save</button>
+	<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>

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

@@ -6,7 +6,8 @@ import { Item } from '../item.model';
 
 @Component({
 	selector: 'app-item-create',
-	templateUrl: './item-create.component.html'
+	templateUrl: './item-create.component.html',
+	styleUrls: ['./item-create.component.css']
 })
 
 export class ItemCreateComponent implements OnInit {

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

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

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

@@ -0,0 +1,10 @@
+<h2 mat-dialog-title class="text">Delete item</h2>
+
+<mat-dialog-content>
+	<p class="text">Are you sure you want to delete "{{item.name}}"?</p>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+	<button mat-raised-button (click)="close()" class="text">Cancel</button>
+	<button mat-raised-button color="primary" class="text" (click)="save()">Delete</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,32 @@
+import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Item } from '../item.model';
+
+
+@Component({
+	selector: 'app-item-delete',
+	templateUrl: './item-delete.component.html',
+	styleUrls: ['./item-delete.component.css']
+})
+
+export class ItemDeleteComponent implements OnInit{
+	item: Item;
+
+	constructor(
+		private dialogRef: MatDialogRef<ItemDeleteComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: Item
+	) {
+		this.item = data;
+	}
+
+	ngOnInit() {
+	}
+
+	save() {
+		this.dialogRef.close(this.item._id);
+	}
+
+	close() {
+		this.dialogRef.close();
+	}
+}

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

@@ -23,6 +23,9 @@
 							<button mat-icon-button class="icons" (click)="edit(item._id!)">
 								<mat-icon inline=true>edit</mat-icon>
 							</button>
+							<button mat-icon-button class="icons" (click)="delete(item._id!)">
+								<mat-icon inline=true>delete</mat-icon>
+							</button>
 						</td>
 						<td align="right">
 							<button mat-raised-button color="primary" class="icons">

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

@@ -7,6 +7,7 @@ import { FullnodeService } from '../../fullnode.service';
 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';
 
 
 @Component({
@@ -94,5 +95,24 @@ export class ItemListComponent implements OnInit{
 			this.itemService.getItems(this.owner.address);
 		});
 	}
+
+	delete(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(ItemDeleteComponent, dialogConfig);
+		dialogRef.afterClosed().subscribe((val) => {
+			if (val != null) {
+				console.log('Deleting', val);
+			}
+			this.itemService.getItems(this.owner.address);
+		});
+	}
 }
 

src/custom-theme.scss

@@ -0,0 +1,11 @@
+@import "~@angular/material/_theming.scss";
+
+@include mat-core();
+
+$custom-theme-primary: mat-palette($mat-deep-orange);
+$custom-theme-accent: mat-palette($mat-light-blue, A200, A100, A400);
+$custom-theme-warn: mat-palette($mat-red);
+
+$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
+
+@include angular-material-theme($custom-theme);

src/styles.css

@@ -1,5 +1,23 @@
 /* You can add global styles to this file, and also import other style files */
 
-@import '@angular/material/prebuilt-themes/indigo-pink.css';
+/*@import '@angular/material/prebuilt-themes/indigo-pink.css';*/
+
+/*@use '~@angular/material' as mat;*/
+
+/*@include mat.core();*/
+
+/*$my-primary: mat.define-palette(mat.$deep-orange-palette, 600);*/
+/*$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);*/
+
+/*$my-theme: mat.define-light-theme((*/
+	/*color: (*/
+		/*primary: $my-primary,*/
+		/*accent: $my-accent*/
+		/*)*/
+		/*)*/
+		/*);*/
+
+/*@include mat.all-component-themes($my-theme);*/
+@import './custom-theme.scss';
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

src/styles.scss

@@ -0,0 +1 @@
+@import './custom-theme'