added button to edit categories (#46)

algirdasc · May 17, 2024 · da94fa7 · da94fa7
1 parent 9dd0ff8
commit da94fa7
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 6 deletions.
diff --git a/frontend/src/app/modules/main/dialogs/categories-dialog/categories-dialog.component.html b/frontend/src/app/modules/main/dialogs/categories-dialog/categories-dialog.component.html
@@ -13,7 +13,7 @@
             [categories]="categories"
             [category]="editableCategory"
             [saveButtonEnabled]="isBusy"
-            (back)="editableCategory = undefined"
+            (back)="editableCategory = undefined; fetch()"
             (save)="saveCategory($event)">
     </app-category-edit>
 </div>
diff --git a/...src/app/modules/main/dialogs/categories-dialog/category-edit/category-edit.component.html b/...src/app/modules/main/dialogs/categories-dialog/category-edit/category-edit.component.html
@@ -42,11 +42,17 @@
             </div>
         </nb-card-body>
 
-        <nb-card-footer class="text-right">
-            <button nbButton type="submit" status="primary" [disabled]="saveButtonEnabled || !categoryForm.valid">
-                <nb-icon icon="save-outline"></nb-icon>
-                Save
-            </button>
+        <nb-card-footer>
+            <div class="d-flex flex-row-reverse justify-content-between">
+                <button nbButton type="submit" status="primary" [disabled]="saveButtonEnabled || !categoryForm.valid">
+                    <nb-icon icon="save-outline"></nb-icon>
+                    Save
+                </button>
+
+                <button nbButton type="button" ghost status="danger" *ngIf="category.id" (click)="deleteCategory()">
+                    <nb-icon icon="trash-2-outline"></nb-icon>
+                </button>
+            </div>
         </nb-card-footer>
     </nb-card>
 </form>
diff --git a/...d/src/app/modules/main/dialogs/categories-dialog/category-edit/category-edit.component.ts b/...d/src/app/modules/main/dialogs/categories-dialog/category-edit/category-edit.component.ts
@@ -1,5 +1,8 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NbDialogService} from '@nebular/theme';
+import {CategoryApiService} from '../../../../../api/category.api.service';
 import {Category} from '../../../../../api/objects/category';
+import {ConfirmDialogComponent} from '../../confirm-dialog/confirm-dialog.component';
 
 @Component({
     templateUrl: 'category-edit.component.html',
@@ -30,6 +33,12 @@ export class CategoryEditComponent {
 
     private _categories: Category[];
 
+    public constructor(
+        private dialogService: NbDialogService,
+        private categoryApiService: CategoryApiService,
+    ) {
+    }
+
     @Input()
     get categories(): Category[] {
         return this._categories;
@@ -41,4 +50,21 @@ export class CategoryEditComponent {
             this.usedColors[category.color] = true;
         }
     }
+
+    public deleteCategory(): void {
+        this.dialogService
+            .open(ConfirmDialogComponent, {
+                context: {
+                    question: 'Are you sure you want delete this category?',
+                }
+            })
+            .onClose
+            .subscribe((result?: boolean) => {
+                if (result) {
+                    this.categoryApiService
+                        .delete(this.category.id)
+                        .subscribe(() => this.back.emit(true));
+                }
+            });
+    }
 }
diff --git a/frontend/src/app/modules/main/sidebar/calendar-list/calendar-list.component.html b/frontend/src/app/modules/main/sidebar/calendar-list/calendar-list.component.html
@@ -44,5 +44,8 @@
             <nb-icon icon="plus"></nb-icon>
             Add a calendar...
         </button>
+        <button nbButton status="success" ghost (click)="editCategories()" class="ms-3" title="Category management">
+            <nb-icon icon="pricetags-outline"></nb-icon>
+        </button>
     </div>
 </div>
diff --git a/frontend/src/app/modules/main/sidebar/calendar-list/calendar-list.component.ts b/frontend/src/app/modules/main/sidebar/calendar-list/calendar-list.component.ts
@@ -4,6 +4,7 @@ import {CalendarApiService} from '../../../../api/calendar.api.service';
 import {Calendar} from '../../../../api/objects/calendar';
 import {UserApiService} from '../../../../api/user.api.service';
 import {CalendarEditComponent} from '../../dialogs/calendars-dialog/calendar-edit/calendar-edit.component';
+import {CategoriesDialogComponent} from '../../dialogs/categories-dialog/categories-dialog.component';
 import {ConfirmDialogComponent} from '../../dialogs/confirm-dialog/confirm-dialog.component';
 import {StatementImportDialogComponent} from '../../dialogs/statement-import-dialog/statement-import-dialog.component';
 import {MainService} from '../../main.service';
@@ -97,6 +98,15 @@ export class CalendarSidebarListComponent {
             .subscribe((calendar: Calendar) => this.openCalendarDialog(calendar));
     }
 
+    public editCategories(): void {
+        this.dialogService
+            .open(CategoriesDialogComponent, {
+                context: {
+                    isSelectable: false,
+                }
+            });
+    }
+
     public fetch(): void {
         this.calendarApiService
             .list()