Added editing categories (Fixes #6)

src/app/store/categories.component.html

@@ -1,11 +1,11 @@
 <div class="container-fluid" style="background-color: #53709f;">
     <div class="container">
         <div class="row py-5">
-            <div class="ml-auto mr-3 mb-3">
+            <div *ngIf="app.user" class="ml-auto mr-3 mb-3">
-                <button *ngIf="app.user" mat-raised-button (click)="create()">
+                <button mat-raised-button (click)="create()">
                     <mat-icon>playlist_add</mat-icon> Category
                 </button>
-                <button *ngIf="app.user" mat-raised-button class="ml-3">
+                <button mat-raised-button class="ml-3">
                     <mat-icon>note_add</mat-icon> Item
                 </button>
             </div>
@@ -17,12 +17,22 @@
                 </ol>
             </nav>
             <ng-container *ngFor="let c of categories | async">
-                <mat-card class="m-3" (click)="navigate(c.name)">
+                <mat-card class="m-3">
+                    <div (click)="navigate(c.name)">
                         <img *ngIf="c.image" mat-card-image [src]="c.image" [alt]="c.name" style="width: 200px; height: 200px;">
                         <mat-divider *ngIf="c.image" class="custom-line"></mat-divider>
                         <mat-card-content>
                             <h5>{{c.name}}</h5>
                         </mat-card-content>
+                    </div>
+                    <mat-card-actions *ngIf="app.user">
+                        <button mat-raised-button (click)="create(c)">
+                            <mat-icon>edit</mat-icon>
+                        </button>
+                        <button mat-raised-button class="ml-3">
+                            <mat-icon>delete</mat-icon>
+                        </button>
+                    </mat-card-actions>
                 </mat-card>
             </ng-container>
         </div>

src/app/store/categories.component.ts

@@ -32,17 +32,20 @@ export class CategoriesComponent {
       this.category = params['category'];
 
       if (!this.category) this.breadcrumb.clear();
+      if (this.category && this.breadcrumb.breadcrumb.length == 0) this.breadcrumb.add(this.category);
 
       this.categories = this.db
         .collection('categories', ref => ref.orderBy('name'))
-        .valueChanges()
+        .snapshotChanges()
         .pipe(
           map(rows =>
             rows
+              .map((row: any) =>
+                Object.assign({id: row.payload.doc.id, ref: row.payload.doc.ref}, row.payload.doc.data())
+              )
               .filter((row: any) => (!this.category && !row.parent) || (this.category && row.parent == this.category))
               .map((row: any) => {
                 row.image = this.domSanitizer.bypassSecurityTrustUrl(row.image);
-                console.log(row);
                 return row;
               })
           )
@@ -55,7 +58,7 @@ export class CategoriesComponent {
     this.router.navigate(['/store', category]);
   }
 
-  create() {
+  create(category) {
-    this.dialog.open(NewCategoryComponent);
+    this.dialog.open(NewCategoryComponent, {data: {category: category, currentCategory: this.category}});
   }
 }

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

@@ -9,6 +9,7 @@
         <mat-form-field class="w-100">
             <mat-select placeholder="Parent" [(value)]="parent">
                 <mat-option value="root">root</mat-option>
+                <mat-option *ngFor="let c of categories | async" [value]="c.name">{{c.name}}</mat-option>
             </mat-select>
         </mat-form-field>
         <input #fileInput type="file" (change)="imageChanged()" hidden>

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

@@ -9,6 +9,7 @@ import {MAT_DIALOG_DATA, MatDialogRef} from '../../../../node_modules/@angular/m
 export class NewCategoryComponent {
   @ViewChild('fileInput') fileInput;
 
+  categories;
   parent: string = 'root';
   name: string;
   image: string;
@@ -17,7 +18,15 @@ export class NewCategoryComponent {
     private dialogRef: MatDialogRef<NewCategoryComponent>,
     private db: AngularFirestore,
     @Inject(MAT_DIALOG_DATA) public data
-  ) {}
+  ) {
+    this.categories = this.db.collection('categories').valueChanges();
+    if (data.currentCategory) this.parent = data.currentCategory;
+
+    if (data.category) {
+      this.name = data.category.name;
+      this.parent = data.category.parent == null ? 'root' : data.category.parent;
+    }
+  }
 
   imageChanged() {
     let reader = new FileReader();
@@ -26,11 +35,16 @@ export class NewCategoryComponent {
   }
 
   submit() {
-    if (!this.data) {
+    let newCategory = {name: this.name, parent: this.parent == 'root' ? null : this.parent};
+    if (this.image) newCategory['image'] = this.image;
+
+    if (!this.data.category) {
       this.db
         .collection('categories')
-        .add({name: this.name, image: this.image, parent: this.parent == 'root' ? null : this.parent})
+        .add(newCategory)
         .then(data => this.dialogRef.close());
+    } else {
+      this.data.category.ref.update(newCategory).then(data => this.dialogRef.close());
     }
   }
 }