Create custom categories

src/app/app.module.ts

@@ -20,6 +20,7 @@ import {AngularFireStorageModule} from 'angularfire2/storage';
 import {BreadcrumbService} from './store/breadcrumb.service';
 import {LoginComponent} from './login/login.component';
 import {AngularFireAuthModule} from 'angularfire2/auth';
+import {NewCategoryComponent} from './store/newCategory/newCategory.component';
 
 @NgModule({
   declarations: [
@@ -30,6 +31,7 @@ import {AngularFireAuthModule} from 'angularfire2/auth';
     FormulaManagerComponent,
     HomeComponent,
     LoginComponent,
+    NewCategoryComponent,
     ScalePipe,
     AboutComponent
   ],
@@ -54,7 +56,7 @@ import {AngularFireAuthModule} from 'angularfire2/auth';
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
   ],
   providers: [BreadcrumbService],
-  entryComponents: [LoginComponent],
+  entryComponents: [LoginComponent, NewCategoryComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/login/login.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {AngularFireAuth} from 'angularfire2/auth';
-import {MatDialog} from '../../../node_modules/@angular/material';
+import {MatDialogRef} from '../../../node_modules/@angular/material';
 
 @Component({
   selector: 'login',
@@ -10,11 +10,11 @@ export class LoginComponent {
   email: string;
   password: string;
 
-  constructor(private dialog: MatDialog, private afAuth: AngularFireAuth) {}
+  constructor(private dialogRef: MatDialogRef<LoginComponent>, private afAuth: AngularFireAuth) {}
 
   login() {
     this.afAuth.auth.signInWithEmailAndPassword(this.email, this.password).then(user => {
-      if (user) this.dialog.closeAll();
+      if (user) this.dialogRef.close();
     });
   }
 }

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());
+    }
+  }
+}