Create custom categories

src/app/store/categories.component.html

@@ -1,6 +1,7 @@
 <div class="container-fluid" style="background-color: #53709f;">
     <div class="container">
         <div class="row py-5">
+            <button mat-raised-button color="primary" (click)="create()">Create</button>
             <nav class="w-100 mx-3" aria-label="breadcrumb">
                 <ol class="breadcrumb">
                     <li class="breadcrumb-item curs-pointer" [routerLink]="['/store']" (click)="breadcrumb.clear()">Store</li>

src/app/store/categories.component.ts

@@ -4,6 +4,8 @@ import {AngularFireStorage} from 'angularfire2/storage';
 import {map} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '../../../node_modules/@angular/router';
 import {BreadcrumbService} from './breadcrumb.service';
+import {MatDialog} from '../../../node_modules/@angular/material';
+import {NewCategoryComponent} from './newCategory/newCategory.component';
 
 @Component({
   selector: 'store',
@@ -17,6 +19,7 @@ export class CategoriesComponent {
     private db: AngularFirestore,
     private router: Router,
     private route: ActivatedRoute,
+    private dialog: MatDialog,
     public breadcrumb: BreadcrumbService
   ) {}
 
@@ -41,4 +44,8 @@ export class CategoriesComponent {
     this.breadcrumb.add(category);
     this.router.navigate(['/store', category]);
   }
+
+  create() {
+    this.dialog.open(NewCategoryComponent);
+  }
 }

src/app/store/newCategory/newCategory.component.html

@@ -0,0 +1,21 @@
+<mat-dialog-content>
+    <h3 mat-dialog-title>Create/Update Category</h3>
+    <form id="createForm">
+        <mat-form-field class="w-100">
+            <input matInput placeholder="Name" name="name" [(ngModel)]="name">
+        </mat-form-field>
+        <mat-form-field class="w-100">
+            <mat-select placeholder="Parent" [(value)]="parent">
+                <mat-option value="root">root</mat-option>
+            </mat-select>
+        </mat-form-field>
+        <input #fileInput type="file" (change)="imageChanged()" hidden>
+    </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button (click)="fileInput.click()">
+        <span *ngIf="!image">Add Image</span>
+        <mat-icon *ngIf="image">check</mat-icon>
+    </button>
+    <button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()">Create/Update</button>
+</mat-dialog-actions>

src/app/store/newCategory/newCategory.component.ts

@@ -0,0 +1,36 @@
+import {Component, ViewChild, Inject} from '@angular/core';
+import {AngularFirestore} from 'angularfire2/firestore';
+import {MAT_DIALOG_DATA, MatDialogRef} from '../../../../node_modules/@angular/material';
+
+@Component({
+  selector: 'new-category',
+  templateUrl: 'newCategory.component.html'
+})
+export class NewCategoryComponent {
+  @ViewChild('fileInput') fileInput;
+
+  parent: string = 'root';
+  name: string;
+  image: string;
+
+  constructor(
+    private dialogRef: MatDialogRef<NewCategoryComponent>,
+    @Inject(MAT_DIALOG_DATA) private data,
+    private db: AngularFirestore
+  ) {}
+
+  imageChanged() {
+    let reader = new FileReader();
+    reader.addEventListener('load', (event: any) => (this.image = event.target.result));
+    reader.readAsText(this.fileInput.nativeElement.files[0]);
+  }
+
+  submit() {
+    if (!this.data) {
+      this.db
+        .collection('categories')
+        .add({name: this.name, parent: this.parent, image: this.image})
+        .then(data => this.dialogRef.close());
+    }
+  }
+}