@@ -16,7 +22,7 @@
-
+
+ @if (filteredFilaments().length === 0 && filaments().length > 0) {
+
+
filter_alt_off
+
No filaments match the current filters
+
+ }
+
+
@if (filaments().length === 0) {
inventory_2
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..f20b831 100644
--- a/frontend/src/app/components/filament-table/filament-table.component.ts
+++ b/frontend/src/app/components/filament-table/filament-table.component.ts
@@ -12,6 +12,7 @@ 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 { FilamentFilterComponent, FilamentFilterState } from '../filament-filter/filament-filter.component';
import {
Filament,
StockLevel,
@@ -40,6 +41,7 @@ export type FilamentColumn =
MatProgressBarModule,
MatTooltipModule,
MatSortModule,
+ FilamentFilterComponent,
],
templateUrl: './filament-table.component.html',
styleUrl: './filament-table.component.scss',
@@ -70,9 +72,24 @@ export class FilamentTableComponent {
/** Default columns for template binding */
readonly columns = this._displayedColumns;
+ /** Current filter state */
+ readonly filterState = signal({
+ materialBaseNames: [],
+ colorSearch: '',
+ lowStockOnly: false,
+ activeOnly: false,
+ });
+
/** Sorted filament data */
readonly sortedFilaments = signal([]);
+ /** Computed: filtered + sorted filament data for display */
+ readonly filteredFilaments = computed(() => {
+ const data = this.sortedFilaments();
+ const filters = this.filterState();
+ return data.filter((f) => this.matchesFilter(f, filters));
+ });
+
/** Computed: count of low/critical spools */
readonly lowStockCount = computed(() =>
this.filaments().filter(
@@ -211,6 +228,9 @@ export class FilamentTableComponent {
this.sortedFilaments.set([...data]);
}
+ /** All filament data — for the filter component to derive material options */
+ readonly allFilaments = this.filaments;
+
/** Handle sort changes from MatSort */
sortData(sort: Sort): void {
const data = [...this.filaments()];
@@ -252,6 +272,46 @@ export class FilamentTableComponent {
this.sortedFilaments.set(sorted);
}
+ /** Handle filter changes from FilamentFilterComponent */
+ onFilterChange(state: FilamentFilterState): void {
+ this.filterState.set(state);
+ }
+
+ /** Check if a filament matches the current filter state */
+ private matchesFilter(filament: Filament, filters: FilamentFilterState): boolean {
+ // Material filter — empty means all
+ if (
+ filters.materialBaseNames.length > 0 &&
+ !filters.materialBaseNames.includes(filament.materialBaseName)
+ ) {
+ return false;
+ }
+
+ // Color search — empty means all
+ if (
+ filters.colorSearch &&
+ !filament.colorName.toLowerCase().includes(filters.colorSearch) &&
+ !filament.colorHex.toLowerCase().includes(filters.colorSearch)
+ ) {
+ return false;
+ }
+
+ // Low stock filter — show only critical/low
+ if (filters.lowStockOnly) {
+ const level = classifyStockLevel(filament);
+ if (level !== 'critical' && level !== 'low') {
+ return false;
+ }
+ }
+
+ // Active only filter
+ if (filters.activeOnly && !filament.isActive) {
+ return false;
+ }
+
+ return true;
+ }
+
/** Template helper: get remaining percent */
getRemainingPercent = getRemainingPercent;