Added category delete (Fixes #8)

src/app/app.module.ts

@@ -21,6 +21,7 @@ import {BreadcrumbService} from './store/breadcrumb.service';
 import {LoginComponent} from './login/login.component';
 import {AngularFireAuthModule} from 'angularfire2/auth';
 import {NewCategoryComponent} from './store/newCategory/newCategory.component';
+import {DeleteCategoryComponent} from './store/deleteCategory/deleteCategory.component';
 
 @NgModule({
   declarations: [
@@ -28,6 +29,7 @@ import {NewCategoryComponent} from './store/newCategory/newCategory.component';
     CategoriesComponent,
     ConvertFromGPipe,
     ConvertToGPipe,
+    DeleteCategoryComponent,
     FormulaManagerComponent,
     HomeComponent,
     LoginComponent,
@@ -56,7 +58,7 @@ import {NewCategoryComponent} from './store/newCategory/newCategory.component';
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
   ],
   providers: [BreadcrumbService],
-  entryComponents: [LoginComponent, NewCategoryComponent],
+  entryComponents: [DeleteCategoryComponent, LoginComponent, NewCategoryComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/store/categories.component.html

@@ -29,7 +29,7 @@
                         <button mat-raised-button (click)="create(c)">
                             <mat-icon>edit</mat-icon>
                         </button>
-                        <button mat-raised-button class="ml-3">
+                        <button mat-raised-button class="ml-3" (click)="delete(c)">
                             <mat-icon>delete</mat-icon>
                         </button>
                     </mat-card-actions>

src/app/store/categories.component.ts

@@ -8,6 +8,7 @@ import {MatDialog} from '../../../node_modules/@angular/material';
 import {NewCategoryComponent} from './newCategory/newCategory.component';
 import {AppComponent} from '../app.component';
 import {DomSanitizer} from '../../../node_modules/@angular/platform-browser';
+import {DeleteCategoryComponent} from './deleteCategory/deleteCategory.component';
 
 @Component({
   selector: 'store',
@@ -61,4 +62,8 @@ export class CategoriesComponent {
   create(category) {
     this.dialog.open(NewCategoryComponent, {data: {category: category, currentCategory: this.category}});
   }
+
+  delete(category) {
+    this.dialog.open(DeleteCategoryComponent, {data: category});
+  }
 }

src/app/store/deleteCategory/deleteCategory.component.html

@@ -0,0 +1,13 @@
+<mat-dialog-content>
+    <h3 mat-dialog-title>Delete {{data.name}}</h3>
+    <p>You are about to delete a category, any items attached to it will be lost.
+        <br>Edit the items and change their category to prevent this, once ready,
+        <br>please re-enter
+        <span style="background-color: #ffff00">{{data.name}}</span> bellow to awknoledge your action.</p>
+    <mat-form-field>
+        <input matInput placeholder="Confirm" [(ngModel)]="confirm">
+    </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button color="primary" (click)="delete()" [disabled]="confirm.toLowerCase() != data.name.toLowerCase()">Delete</button>
+</mat-dialog-actions>

src/app/store/deleteCategory/deleteCategory.component.ts

@@ -0,0 +1,16 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '../../../../node_modules/@angular/material';
+
+@Component({
+  selector: 'delete-category',
+  templateUrl: 'deleteCategory.component.html'
+})
+export class DeleteCategoryComponent {
+  confirm = '';
+
+  constructor(private dialogRef: MatDialogRef<DeleteCategoryComponent>, @Inject(MAT_DIALOG_DATA) public data) {}
+
+  delete() {
+    this.data.ref.delete().then(() => this.dialogRef.close());
+  }
+}