feat: Implement GraphQL mutations and service for dashboard and widget management (#167)

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

Author: PhantomDave

PhantomDave.BankTracking.Api/Program.cs

@@ -81,13 +81,27 @@ public static void Main(string[] args)
         builder.Services.AddCors(options =>
         {
             options.AddDefaultPolicy(policy =>
-                policy
-                    .WithOrigins("http://localhost:4200", "http://localhost:5095")
-                    .AllowAnyHeader()
-                    .AllowAnyMethod()
-                    .AllowCredentials());
+            {
+                if (builder.Environment.IsDevelopment())
+                {
+                    policy
+                        .WithOrigins("http://localhost:4200", "http://localhost:5095", "http://127.0.0.1:4200")
+                        .AllowAnyHeader()
+                        .AllowAnyMethod()
+                        .AllowCredentials();
+                }
+                else
+                {
+                    policy
+                        .WithOrigins("http://localhost:4200", "http://localhost:5095")
+                        .AllowAnyHeader()
+                        .AllowAnyMethod()
+                        .AllowCredentials();
+                }
+            });
         });
 
+
         var graphqlBuilder = builder.Services
             .AddGraphQLServer()
             .AddAuthorization()

frontend/eslint.config.js

@@ -29,12 +29,13 @@ export default [
         ],
         parser: '@typescript-eslint/parser',
         parserOptions: {
-          project: ['./tsconfig.app.json'],
+          project: ['./tsconfig.app.json', './tsconfig.spec.json'],
           createDefaultProgram: true,
         },
         rules: {
           '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
           'no-console': 'warn',
+
         },
       },
       {

frontend/package.json

@@ -1,6 +1,7 @@
 {
   "name": "frontend",
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

frontend/src/app/components/dashboards/dashboard-component/dashboard-component.component.html

@@ -7,18 +7,20 @@
     <gridster [options]="options" [class.edit-mode]="isEditMode()" class="gridster-container">
       @for (widget of widgets(); track widget) {
         <gridster-item [item]="widget" class="dashboard-widget">
-          @switch (widget.type) {
-            @case (WidgetType.CURRENT_BALANCE) {
-              <app-widget-remaining [isEditMode]="isEditMode()"></app-widget-remaining>
-            }
-            @case (WidgetType.NET_GRAPH) {
-              <app-widget-net-graph [isEditMode]="isEditMode()"></app-widget-net-graph>
-            }
-            @default {
-              <div class="placeholder-widget">
-                <p>Widget: {{ widget['component'] || 'Empty' }}</p>
-                <p>{{ widget.cols }}x{{ widget.rows }}</p>
-              </div>
+          @if (widget.id !== undefined) {
+            @switch (widget.type) {
+              @case (WidgetType.CURRENT_BALANCE) {
+                <app-widget-remaining [isEditMode]="isEditMode()" [widgetId]="widget.id" (delete)="removeItem($event)"></app-widget-remaining>
+              }
+              @case (WidgetType.NET_GRAPH) {
+                <app-widget-net-graph [isEditMode]="isEditMode()" [widgetId]="widget.id" (delete)="removeItem($event)"></app-widget-net-graph>
+              }
+              @default {
+                <div class="placeholder-widget">
+                  <p>Widget: {{ widget['component'] || 'Empty' }}</p>
+                  <p>{{ widget.cols }}x{{ widget.rows }}</p>
+                </div>
+              }
             }
           }
         </gridster-item>

frontend/src/app/components/dashboards/dashboard-component/dashboard-component.component.spec.ts

@@ -56,7 +56,9 @@ describe('DashboardComponent', () => {
     it('should show success snackbar with correct widget name for CurrentBalance', () => {
       component.onWidgetSelected(WidgetType.CURRENT_BALANCE);
 
-      expect(snackbarService.success).toHaveBeenCalledWith('Added Remaining Budget widget to dashboard.');
+      expect(snackbarService.success).toHaveBeenCalledWith(
+        'Added Remaining Budget widget to dashboard.',
+      );
     });
 
     it('should show error snackbar if widget creation fails', () => {

frontend/src/app/components/dashboards/dashboard-component/dashboard-component.component.ts

@@ -47,25 +47,46 @@ export class DashboardComponent implements OnInit {
   readonly selectedDashboard = this.dashboardService.selectedDashboard;
 
   constructor() {
-    effect(() => {
-      const dashboard = this.selectedDashboard();
-      if (dashboard) {
-        const widgets = dashboard.widgets.map((w) =>
-          WidgetFactory.createWidgetFromData({
-            ...w,
-            type: w.widgetType,
-          }),
-        );
-        this.widgets.set(widgets);
-      } else {
-        this.widgets.set([]);
-      }
-    });
+    effect(
+      () => {
+        const dashboard = this.selectedDashboard();
+        const currentWidgets = this.widgets();
+        if (dashboard) {
+          const newWidgetsData = dashboard.widgets;
+          const areWidgetsSame =
+            currentWidgets.length === newWidgetsData.length &&
+            currentWidgets.every((cw) =>
+              newWidgetsData.some(
+                (nw) =>
+                  nw.id === cw.id &&
+                  nw.cols === cw.cols &&
+                  nw.rows === cw.rows &&
+                  nw.x === cw.x &&
+                  nw.y === cw.y &&
+                  nw.widgetType === cw.type,
+              ),
+            );
+
+          if (!areWidgetsSame) {
+            const widgets = newWidgetsData.map((w) =>
+              WidgetFactory.createWidgetFromData({
+                ...w,
+                type: w.widgetType,
+              }),
+            );
+            this.widgets.set(widgets);
+          }
+        } else if (currentWidgets.length > 0) {
+          this.widgets.set([]);
+        }
+      },
+      { allowSignalWrites: true },
+    );
   }
 
   ngOnInit() {
     this.options = {
-      gridType: GridType.Fit,
+      gridType: GridType.VerticalFixed,
       compactType: CompactType.None,
       margin: 10,
       outerMargin: true,
@@ -78,10 +99,10 @@ export class DashboardComponent implements OnInit {
       minCols: 12,
       maxCols: 12,
       minRows: 12,
-      maxRows: 100,
+      maxRows: 12,
       maxItemCols: 12,
       minItemCols: 1,
-      maxItemRows: 8,
+      maxItemRows: 12,
       minItemRows: 1,
       maxItemArea: 2500,
       minItemArea: 1,
@@ -115,10 +136,13 @@ export class DashboardComponent implements OnInit {
       disablePushOnResize: true,
       pushDirections: { north: false, east: false, south: false, west: false },
       pushResizeItems: false,
+      allowMultiLayer: false,
+      defaultLayerIndex: 0,
       displayGrid: DisplayGrid.OnDragAndResize,
       disableWindowResize: false,
       disableWarnings: false,
       scrollToNewItems: false,
+      setGridSize: true,
       itemChangeCallback: this.itemChange.bind(this),
       itemResizeCallback: this.itemResize.bind(this),
     };
@@ -144,14 +168,23 @@ export class DashboardComponent implements OnInit {
           cols: widget.cols,
           rows: widget.rows,
         });
-      } catch (error) {
+      } catch {
         this.snackbarService.error('Failed to save widget changes.');
       }
     }
   }
 
-  removeItem(item: GridsterItemConfig) {
-    this.widgets.update(widgets => widgets.filter(w => w !== item));
+  async removeItem(itemId: number) {
+    try {
+      const success = await this.dashboardService.removeWidget(itemId);
+      if (success) {
+        this.snackbarService.success('Widget removed from dashboard.');
+      } else {
+        this.snackbarService.error('Failed to remove widget from dashboard.');
+      }
+    } catch {
+      this.snackbarService.error('Failed to remove widget from dashboard.');
+    }
   }
 
   editDashboard() {
@@ -208,12 +241,6 @@ export class DashboardComponent implements OnInit {
       });
 
       if (addedWidget) {
-        // Create widget from backend data to ensure consistency
-        const backendWidget = WidgetFactory.createWidgetFromData({
-          ...addedWidget,
-          type: addedWidget.widgetType,
-        });
-        this.widgets.set([...this.widgets(), backendWidget]);
         const widgetName = WIDGET_DISPLAY_NAMES[widgetType] ?? String(widgetType);
         this.snackbarService.success(`Added ${widgetName} widget to dashboard.`);
       }

frontend/src/app/components/dashboards/dashboard-drawer-component/dashboard-drawer-component.component.spec.ts

@@ -37,14 +37,16 @@ describe('DashboardDrawerComponent', () => {
     });
 
     it('should have correct display name for Net Graph', () => {
-      const netGraphWidget = component.availableWidgets.find((w) => w.type === WidgetType.NET_GRAPH);
+      const netGraphWidget = component.availableWidgets.find(
+        (w) => w.type === WidgetType.NET_GRAPH,
+      );
 
       expect(netGraphWidget?.name).toBe('Net Graph');
     });
 
     it('should have correct display name for Current Balance', () => {
       const currentBalanceWidget = component.availableWidgets.find(
-        (w) => w.type === WidgetType.CURRENT_BALANCE
+        (w) => w.type === WidgetType.CURRENT_BALANCE,
       );
 
       expect(currentBalanceWidget?.name).toBe('Remaining Budget');

frontend/src/app/components/import/import-wizard-component/steps/step5-confirm.component.html

@@ -29,20 +29,24 @@
           <mat-icon color="primary">numbers</mat-icon>
           <span>Separators:</span>
           <strong
-            >decimal {{ decimalSeparator() }} • thousands
+          >decimal {{ decimalSeparator() }} • thousands
             {{ thousandsSeparator() || 'none' }}</strong
           >
         </div>
-        <div class="summary-item" *ngIf="rowsToSkip() > 0">
-          <mat-icon color="primary">skip_next</mat-icon>
-          <span>Rows to skip:</span>
-          <strong>{{ rowsToSkip() }}</strong>
-        </div>
-        <div class="summary-item" *ngIf="saveAsTemplate()">
-          <mat-icon color="primary">save</mat-icon>
-          <span>Save as template:</span>
-          <strong>{{ templateName() || 'Untitled template' }}</strong>
-        </div>
+        @if (rowsToSkip() > 0) {
+          <div class="summary-item">
+            <mat-icon color="primary">skip_next</mat-icon>
+            <span>Rows to skip:</span>
+            <strong>{{ rowsToSkip() }}</strong>
+          </div>
+        }
+        @if (saveAsTemplate()) {
+          <div class="summary-item">
+            <mat-icon color="primary">save</mat-icon>
+            <span>Save as template:</span>
+            <strong>{{ templateName() || 'Untitled template' }}</strong>
+          </div>
+        }
       </div>
 
       <div class="actions">
@@ -69,15 +73,18 @@
           <h3>Result</h3>
           <div class="result-metrics">
             <div>
-              <mat-icon color="primary">check_circle</mat-icon> Created:
+              <mat-icon color="primary">check_circle</mat-icon>
+              Created:
               <strong>{{ res.successCount }}</strong>
             </div>
             <div>
-              <mat-icon color="warn">warning</mat-icon> Duplicates:
+              <mat-icon color="warn">warning</mat-icon>
+              Duplicates:
               <strong>{{ res.duplicateCount }}</strong>
             </div>
             <div>
-              <mat-icon color="warn">error</mat-icon> Failed:
+              <mat-icon color="warn">error</mat-icon>
+              Failed:
               <strong>{{ res.failureCount }}</strong>
             </div>
           </div>

frontend/src/app/models/dashboards/dashboard.service.ts

@@ -189,7 +189,7 @@ export class DashboardService {
         const wasSelected = this._selectedDashboard()?.id === id;
         const updatedDashboards = this._dashboards().filter((d) => d.id !== id);
         this._dashboards.set(updatedDashboards);
-        
+
         if (wasSelected) {
           if (updatedDashboards.length > 0) {
             this._selectedDashboard.set(updatedDashboards[updatedDashboards.length - 1]);

frontend/src/app/widgets/widget-net-graph/widget-net-graph.component.html

@@ -1,9 +1,11 @@
 <app-widget-wrapper
+  [widgetId]="widgetId()"
   [title]="'Yearly Net Graph'"
   [subtitle]="'Net income and expenses over the past year'"
   [icon]="'show_chart'"
   [loading]="loading()"
   [isEditMode]="isEditMode()"
+  (delete)="onDeleteWidget($event)"
 >
   <div class="widget-content">
     <app-chart [chartOptions]="chartOptions()" />