+
+ You are about to permanently remove this filament spool from inventory.
+
+
+
+
+
+ Material
+ {{ filament.materialBaseName }}{{ filament.materialFinishName ? ' — ' + filament.materialFinishName : '' }}{{ filament.materialModifierName ? ' (' + filament.materialModifierName + ')' : '' }}
+
+
+
+ Brand
+ {{ filament.brand }}
+
+
+
+ Color
+
+
+
+ {{ filament.colorName }}
+
+
+
+
+ Serial
+ {{ filament.spoolSerial }}
+
+
+
+ Remaining
+ {{ formatWeight(filament.weightRemainingGrams) }} / {{ formatWeight(filament.weightTotalGrams) }}
+
+
+
+ Status
+
+
+ {{ filament.isActive ? 'Active' : 'Inactive' }}
+
+
+
+
+ info
+ This action cannot be undone.
+
+
+
+
+ );
+ readonly data: DeleteFilamentDialogData = inject(MAT_DIALOG_DATA);
+
+ /** The filament spool being considered for deletion */
+ readonly filament = this.data.filament;
+
+ /** Format weight for display in dialog */
+ formatWeight(grams: number): string {
+ if (grams >= 1000) {
+ return `${(grams / 1000).toFixed(1)}kg`;
+ }
+ return `${Math.round(grams)}g`;
+ }
+
+ /** Cancel — close dialog with false (no deletion) */
+ onCancel(): void {
+ this.dialogRef.close(false);
+ }
+
+ /** Confirm — close dialog with true (proceed with deletion) */
+ onConfirm(): void {
+ this.dialogRef.close(true);
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/filament-table/filament-table.component.html b/frontend/src/app/components/filament-table/filament-table.component.html
index 75d798f..e0aa433 100644
--- a/frontend/src/app/components/filament-table/filament-table.component.html
+++ b/frontend/src/app/components/filament-table/filament-table.component.html
@@ -1,4 +1,4 @@
-
+
@@ -106,10 +106,32 @@
+
+
+ | Actions |
+
+
+ |
+
+
|
+ [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 d85bb4a..c1a4f1a 100644
--- a/frontend/src/app/components/filament-table/filament-table.component.scss
+++ b/frontend/src/app/components/filament-table/filament-table.component.scss
@@ -235,6 +235,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 47025ac..9a0c590 100644
--- a/frontend/src/app/components/filament-table/filament-table.component.ts
+++ b/frontend/src/app/components/filament-table/filament-table.component.ts
@@ -3,6 +3,7 @@ import {
Component,
Input,
computed,
+ inject,
signal,
} from '@angular/core';
import { CommonModule } from '@angular/common';
@@ -12,12 +13,21 @@ import { MatIconModule } from '@angular/material/icon';
import { MatProgressBarModule } from '@angular/material/progress-bar';
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 {
+ DeleteFilamentDialogComponent,
+ DeleteFilamentDialogData,
+} from '../delete-filament-dialog/delete-filament-dialog.component';
/** Display column definitions for the filament table */
export type FilamentColumn =
@@ -27,7 +37,8 @@ export type FilamentColumn =
| 'serial'
| 'remaining'
| 'stockLevel'
- | 'status';
+ | 'status'
+ | 'actions';
@Component({
selector: 'app-filament-table',
@@ -40,16 +51,26 @@ export type FilamentColumn =
MatProgressBarModule,
MatTooltipModule,
MatSortModule,
+ MatButtonModule,
+ MatDialogModule,
+ MatSnackBarModule,
],
templateUrl: './filament-table.component.html',
styleUrl: './filament-table.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
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);
@@ -65,6 +86,7 @@ export class FilamentTableComponent {
'remaining',
'stockLevel',
'status',
+ 'actions',
]);
/** Default columns for template binding */
@@ -252,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;
diff --git a/frontend/src/app/services/filament.service.ts b/frontend/src/app/services/filament.service.ts
new file mode 100644
index 0000000..01c4755
--- /dev/null
+++ b/frontend/src/app/services/filament.service.ts
@@ -0,0 +1,37 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { Filament } from '../models/filament.model';
+
+/**
+ * API base URL — matches the Extrudex backend default.
+ * TODO: Move to environment config when multi-environment support is added.
+ */
+const API_BASE_URL = '/api';
+
+/**
+ * Service for CRUD operations on filament spools.
+ * Communicates with the Extrudex backend SpoolsController.
+ */
+@Injectable({ providedIn: 'root' })
+export class FilamentService {
+ private readonly http = inject(HttpClient);
+
+ /**
+ * Fetch all filament spools from the backend.
+ * GET /api/spools
+ */
+ getFilaments(): Observable {
+ return this.http.get(`${API_BASE_URL}/spools`);
+ }
+
+ /**
+ * Soft-delete a filament spool by ID.
+ * DELETE /api/spools/{id}
+ * Returns 204 No Content on success.
+ */
+ deleteFilament(id: string): Observable {
+ return this.http.delete(`${API_BASE_URL}/spools/${id}`);
+ }
+}
\ No newline at end of file