@@ -116,16 +106,23 @@
-
+
- |
-
+ | Actions |
+
|
@@ -133,7 +130,8 @@
|
+ [class.row-low]="classifyStockLevel(row) === 'low'"
+ [class.row-deleting]="deleting() === row.id">
diff --git a/frontend/src/app/components/filament-table/filament-table.component.scss b/frontend/src/app/components/filament-table/filament-table.component.scss
index cbbbfe5..fad3fef 100644
--- a/frontend/src/app/components/filament-table/filament-table.component.scss
+++ b/frontend/src/app/components/filament-table/filament-table.component.scss
@@ -264,6 +264,20 @@ mat-chip {
}
}
+// Actions column
+.actions-cell {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+// Row being deleted — subtle fade
+:host ::ng-deep .row-deleting {
+ opacity: 0.5;
+ pointer-events: none;
+ transition: opacity 0.3s ease;
+}
+
// Empty state
.empty-state {
display: flex;
diff --git a/frontend/src/app/components/filament-table/filament-table.component.ts b/frontend/src/app/components/filament-table/filament-table.component.ts
index a9f427c..9a0c590 100644
--- a/frontend/src/app/components/filament-table/filament-table.component.ts
+++ b/frontend/src/app/components/filament-table/filament-table.component.ts
@@ -15,16 +15,19 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSortModule, Sort } from '@angular/material/sort';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+
import {
Filament,
StockLevel,
getRemainingPercent,
classifyStockLevel,
} from '../../models/filament.model';
+import { FilamentService } from '../../services/filament.service';
import {
- FilamentDialogComponent,
- FilamentDialogData,
-} from '../filament-dialog/filament-dialog.component';
+ DeleteFilamentDialogComponent,
+ DeleteFilamentDialogData,
+} from '../delete-filament-dialog/delete-filament-dialog.component';
/** Display column definitions for the filament table */
export type FilamentColumn =
@@ -50,6 +53,7 @@ export type FilamentColumn =
MatSortModule,
MatButtonModule,
MatDialogModule,
+ MatSnackBarModule,
],
templateUrl: './filament-table.component.html',
styleUrl: './filament-table.component.scss',
@@ -57,11 +61,16 @@ export type FilamentColumn =
})
export class FilamentTableComponent {
private readonly dialog = inject(MatDialog);
+ private readonly snackBar = inject(MatSnackBar);
+ private readonly filamentService = inject(FilamentService);
/** Filament data input — reactive signal for live updates */
readonly filaments = signal
([]);
- /** Columns to display — defaults to all columns */
+ /** Whether a delete operation is in progress */
+ readonly deleting = signal(null);
+
+ /** Columns to display — defaults to all columns including actions */
@Input()
set displayedColumns(cols: FilamentColumn[]) {
this._displayedColumns.set(cols);
@@ -265,6 +274,52 @@ export class FilamentTableComponent {
this.sortedFilaments.set(sorted);
}
+ /**
+ * Open the delete confirmation dialog for a filament spool.
+ * On confirm: calls DELETE endpoint and removes the row on success.
+ * On cancel: dialog dismissed, no action taken.
+ */
+ onDeleteClick(filament: Filament): void {
+ const dialogData: DeleteFilamentDialogData = { filament };
+ const dialogRef = this.dialog.open(DeleteFilamentDialogComponent, {
+ data: dialogData,
+ width: '480px',
+ disableClose: true,
+ });
+
+ dialogRef.afterClosed().subscribe((confirmed: boolean | undefined) => {
+ if (!confirmed) {
+ return; // User cancelled — no action
+ }
+
+ // Mark as deleting for UI feedback
+ this.deleting.set(filament.id);
+
+ this.filamentService.deleteFilament(filament.id).subscribe({
+ next: () => {
+ // Remove the deleted filament from local data
+ const updated = this.filaments().filter((f) => f.id !== filament.id);
+ this.updateFilaments(updated);
+ this.deleting.set(null);
+
+ this.snackBar.open(
+ `Deleted ${filament.materialBaseName} — ${filament.colorName}`,
+ 'Dismiss',
+ { duration: 4000 }
+ );
+ },
+ error: () => {
+ this.deleting.set(null);
+ this.snackBar.open(
+ `Failed to delete ${filament.materialBaseName} — ${filament.colorName}. Please try again.`,
+ 'Dismiss',
+ { duration: 6000 }
+ );
+ },
+ });
+ });
+ }
+
/** Template helper: get remaining percent */
getRemainingPercent = getRemainingPercent;
@@ -306,47 +361,6 @@ export class FilamentTableComponent {
}
return `${Math.round(grams)}g`;
}
-
- /** Open the add filament dialog. */
- openAddDialog(): void {
- const data: FilamentDialogData = {};
- const ref = this.dialog.open(FilamentDialogComponent, {
- width: '600px',
- maxWidth: '95vw',
- data,
- autoFocus: 'first-typable',
- });
-
- ref.afterClosed().subscribe((result: boolean) => {
- if (result) {
- this.onFilamentSaved();
- }
- });
- }
-
- /** Open the edit filament dialog for a specific spool. */
- openEditDialog(filament: Filament): void {
- const data: FilamentDialogData = { filament };
- const ref = this.dialog.open(FilamentDialogComponent, {
- width: '600px',
- maxWidth: '95vw',
- data,
- autoFocus: 'first-typable',
- });
-
- ref.afterClosed().subscribe((result: boolean) => {
- if (result) {
- this.onFilamentSaved();
- }
- });
- }
-
- /** Called after a successful save — reload filament data. */
- protected onFilamentSaved(): void {
- // TODO: Replace with FilamentService.refresh() call when SignalR integration is ready.
- // For now, this is the hook for refreshing data after a save.
- // Consumers can override or listen to signal changes.
- }
}
/** Compare helper for sorting */
diff --git a/frontend/src/app/services/filament.service.ts b/frontend/src/app/services/filament.service.ts
index 130c234..01c4755 100644
--- a/frontend/src/app/services/filament.service.ts
+++ b/frontend/src/app/services/filament.service.ts
@@ -2,133 +2,36 @@ import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
-import { environment } from '../../environments/environment';
import { Filament } from '../models/filament.model';
-import { PagedResponse } from '../models/paged-response.model';
-import {
- MaterialBase,
- MaterialFinish,
- MaterialModifier,
-} from '../models/material.model';
/**
- * Request body for creating a new filament spool.
- * Matches the backend CreateFilamentRequest DTO.
+ * API base URL — matches the Extrudex backend default.
+ * TODO: Move to environment config when multi-environment support is added.
*/
-export interface CreateFilamentRequest {
- materialBaseId: string;
- materialFinishId: string;
- materialModifierId: string | null;
- brand: string;
- colorName: string;
- colorHex: string;
- weightTotalGrams: number;
- weightRemainingGrams: number;
- filamentDiameterMm: number;
- spoolSerial: string;
- purchasePrice: number | null;
- purchaseDate: string | null;
- isActive: boolean;
-}
+const API_BASE_URL = '/api';
/**
- * Request body for updating an existing filament spool.
- * Matches the backend UpdateFilamentRequest DTO.
- */
-export interface UpdateFilamentRequest {
- materialBaseId: string;
- materialFinishId: string;
- materialModifierId: string | null;
- brand: string;
- colorName: string;
- colorHex: string;
- weightTotalGrams: number;
- weightRemainingGrams: number;
- filamentDiameterMm: number;
- spoolSerial: string;
- purchasePrice: number | null;
- purchaseDate: string | null;
- isActive: boolean;
-}
-
-/**
- * Service for interacting with the Extrudex filament and material APIs.
- * Handles CRUD for filament spools and material lookup data.
+ * Service for CRUD operations on filament spools.
+ * Communicates with the Extrudex backend SpoolsController.
*/
@Injectable({ providedIn: 'root' })
export class FilamentService {
private readonly http = inject(HttpClient);
- private readonly baseUrl = environment.apiBaseUrl;
-
- // ── Filament CRUD ────────────────────────────────────────
/**
- * Get a paginated list of filament spools.
+ * Fetch all filament spools from the backend.
+ * GET /api/spools
*/
- getFilaments(params?: {
- pageNumber?: number;
- pageSize?: number;
- materialBaseId?: string;
- materialFinishId?: string;
- materialModifierId?: string;
- brand?: string;
- isActive?: boolean;
- }): Observable> {
- return this.http.get>(
- `${this.baseUrl}/api/filaments`,
- { params: params as Record }
- );
+ getFilaments(): Observable {
+ return this.http.get(`${API_BASE_URL}/spools`);
}
/**
- * Get a single filament spool by ID.
+ * Soft-delete a filament spool by ID.
+ * DELETE /api/spools/{id}
+ * Returns 204 No Content on success.
*/
- getFilament(id: string): Observable {
- return this.http.get(`${this.baseUrl}/api/filaments/${id}`);
- }
-
- /**
- * Create a new filament spool.
- */
- createFilament(request: CreateFilamentRequest): Observable {
- return this.http.post(`${this.baseUrl}/api/filaments`, request);
- }
-
- /**
- * Update an existing filament spool.
- */
- updateFilament(id: string, request: UpdateFilamentRequest): Observable {
- return this.http.put(`${this.baseUrl}/api/filaments/${id}`, request);
- }
-
- // ── Material Lookups ─────────────────────────────────────
-
- /**
- * Get all material bases (PLA, PETG, ABS, etc.).
- */
- getMaterialBases(): Observable {
- return this.http.get(`${this.baseUrl}/api/materials/bases`);
- }
-
- /**
- * Get all material finishes, optionally filtered by material base.
- */
- getMaterialFinishes(materialBaseId?: string): Observable {
- const params: Record = {};
- if (materialBaseId) {
- params['materialBaseId'] = materialBaseId;
- }
- return this.http.get(`${this.baseUrl}/api/materials/finishes`, { params });
- }
-
- /**
- * Get all material modifiers, optionally filtered by material base.
- */
- getMaterialModifiers(materialBaseId?: string): Observable {
- const params: Record = {};
- if (materialBaseId) {
- params['materialBaseId'] = materialBaseId;
- }
- return this.http.get(`${this.baseUrl}/api/materials/modifiers`, { params });
+ deleteFilament(id: string): Observable {
+ return this.http.delete(`${API_BASE_URL}/spools/${id}`);
}
}
\ No newline at end of file