CubeCraft-Creations/Extrudex
9
0
Fork 0
Code Issues Pull Requests 7 Actions Packages Projects Releases Wiki Activity

CUB-35: build add/edit filament modal with Angular Material Dialog
Some checks failed
Dev Build / build-test (pull_request) Failing after 51s
Details
Dev Build / deploy-dev (pull_request) Has been skipped
Details
Dev Build / notify-success (pull_request) Has been skipped
Details
Dev Build / notify-failure (pull_request) Successful in 3s
Details

Browse Source
This commit is contained in:
dex-bot
2026-04-27 14:47:16 -04:00
parent 8a2f97d2cd
commit fbddcbdbc5
12 changed files with 1004 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/app.config.ts
View File

@@ -1,11 +1,15 @@
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideRouter(routes)
provideRouter(routes),
provideHttpClient(),
provideAnimationsAsync(),
]
};
};

225
frontend/src/app/components/filament-dialog/filament-dialog.component.html Normal file
View File

@@ -0,0 +1,225 @@
<!-- Filament Add/Edit Dialog — Angular Material Dialog -->
<mat-dialog-content class="filament-dialog-content">
<!-- Dialog Title -->
<h2 mat-dialog-title>{{ dialogTitle() }}</h2>
<!-- Loading state for lookup data -->
@if (lookupsLoading()) {
<div class="dialog-loading" role="status" aria-label="Loading material options">
<mat-spinner diameter="32"></mat-spinner>
<p>Loading material options…</p>
</div>
}
<!-- Form -->
@if (!lookupsLoading()) {
<form [formGroup]="form" class="filament-form" (ngSubmit)="save()">
<!-- Server Error Banner -->
@if (serverError()) {
<div class="error-banner" role="alert">
<mat-icon aria-hidden="true">error</mat-icon>
<span>{{ serverError() }}</span>
</div>
}
<!-- ── Material Section ──────────────────────────────── -->
<div class="form-section">
<h3 class="section-title">Material</h3>
<!-- Base Material -->
<mat-form-field appearance="outline" class="form-field full-width">
<mat-label>Base Material</mat-label>
<mat-select formControlName="materialBaseId" required aria-label="Base material">
@for (base of materialBases(); track base.id) {
<mat-option [value]="base.id">{{ base.name }}</mat-option>
}
</mat-select>
@if (form.get('materialBaseId')!.hasError('required') && form.get('materialBaseId')!.touched) {
<mat-error>Base material is required</mat-error>
}
</mat-form-field>
<!-- Finish -->
<mat-form-field appearance="outline" class="form-field full-width">
<mat-label>Finish</mat-label>
<mat-select formControlName="materialFinishId" required aria-label="Material finish">
<mat-option [value]="''" disabled>Select a base material first</mat-option>
@for (finish of filteredFinishes(); track finish.id) {
<mat-option [value]="finish.id">{{ finish.name }}</mat-option>
}
</mat-select>
@if (form.get('materialFinishId')!.hasError('required') && form.get('materialFinishId')!.touched) {
<mat-error>Finish is required</mat-error>
}
@if (filteredFinishes().length === 0 && form.get('materialBaseId')!.value) {
<mat-hint>No finishes available for this material</mat-hint>
}
</mat-form-field>
<!-- Modifier (optional) -->
<mat-form-field appearance="outline" class="form-field full-width">
<mat-label>Modifier (optional)</mat-label>
<mat-select formControlName="materialModifierId" aria-label="Material modifier">
<mat-option [value]="null">None</mat-option>
@for (modifier of filteredModifiers(); track modifier.id) {
<mat-option [value]="modifier.id">{{ modifier.name }}</mat-option>
}
</mat-select>
@if (filteredModifiers().length === 0 && form.get('materialBaseId')!.value) {
<mat-hint>No modifiers available for this material</mat-hint>
}
</mat-form-field>
</div>
<!-- ── Spool Details Section ──────────────────────────── -->
<div class="form-section">
<h3 class="section-title">Spool Details</h3>
<!-- Brand -->
<mat-form-field appearance="outline" class="form-field full-width">
<mat-label>Brand</mat-label>
<input matInput formControlName="brand" required maxlength="200"
placeholder="e.g., Bambu Lab, Polymaker" aria-label="Brand" />
@if (form.get('brand')!.hasError('required') && form.get('brand')!.touched) {
<mat-error>Brand is required</mat-error>
}
</mat-form-field>
<!-- Serial -->
<mat-form-field appearance="outline" class="form-field full-width">
<mat-label>Serial Number</mat-label>
<input matInput formControlName="spoolSerial" required maxlength="200"
placeholder="e.g., SN-001" aria-label="Serial number" />
@if (form.get('spoolSerial')!.hasError('required') && form.get('spoolSerial')!.touched) {
<mat-error>Serial number is required</mat-error>
}
</mat-form-field>
<!-- Color Name + Color Hex (side by side) -->
<div class="form-row">
<mat-form-field appearance="outline" class="form-field">
<mat-label>Color Name</mat-label>
<input matInput formControlName="colorName" required maxlength="200"
placeholder="e.g., Fire Engine Red" aria-label="Color name" />
@if (form.get('colorName')!.hasError('required') && form.get('colorName')!.touched) {
<mat-error>Color name is required</mat-error>
}
</mat-form-field>
<mat-form-field appearance="outline" class="form-field color-hex-field">
<mat-label>Color Hex</mat-label>
<input matInput formControlName="colorHex" required
placeholder="#FF0000" maxlength="7" aria-label="Color hex code" />
<span matTextSuffix class="color-preview">
<span class="color-swatch-mini" [style.background-color]="form.get('colorHex')!.value"></span>
</span>
@if (form.get('colorHex')!.hasError('required') && form.get('colorHex')!.touched) {
<mat-error>Color hex is required</mat-error>
}
@if (form.get('colorHex')!.hasError('pattern') && form.get('colorHex')!.touched) {
<mat-error>Must be #RRGGBB format</mat-error>
}
</mat-form-field>
</div>
</div>
<!-- ── Weight & Dimensions Section ────────────────────── -->
<div class="form-section">
<h3 class="section-title">Weight &amp; Dimensions</h3>
<div class="form-row">
<!-- Diameter -->
<mat-form-field appearance="outline" class="form-field">
<mat-label>Diameter (mm)</mat-label>
<input matInput type="number" formControlName="filamentDiameterMm" required
min="0.1" max="10" step="0.01" aria-label="Filament diameter in mm" />
@if (form.get('filamentDiameterMm')!.hasError('required') && form.get('filamentDiameterMm')!.touched) {
<mat-error>Diameter is required</mat-error>
}
</mat-form-field>
</div>
<div class="form-row">
<!-- Total Weight -->
<mat-form-field appearance="outline" class="form-field">
<mat-label>Total Weight (g)</mat-label>
<input matInput type="number" formControlName="weightTotalGrams" required
min="0.01" max="100000" step="1" aria-label="Total spool weight in grams" />
<mat-hint>Full spool weight</mat-hint>
@if (form.get('weightTotalGrams')!.hasError('required') && form.get('weightTotalGrams')!.touched) {
<mat-error>Total weight is required</mat-error>
}
</mat-form-field>
<!-- Remaining Weight -->
<mat-form-field appearance="outline" class="form-field">
<mat-label>Remaining Weight (g)</mat-label>
<input matInput type="number" formControlName="weightRemainingGrams" required
min="0" max="100000" step="1" aria-label="Remaining weight in grams" />
<mat-hint>Current remaining</mat-hint>
@if (form.get('weightRemainingGrams')!.hasError('required') && form.get('weightRemainingGrams')!.touched) {
<mat-error>Remaining weight is required</mat-error>
}
@if (form.get('weightRemainingGrams')!.hasError('exceedsTotal')) {
<mat-error>Cannot exceed total weight</mat-error>
}
</mat-form-field>
</div>
</div>
<!-- ── Purchase & Status Section ──────────────────────── -->
<div class="form-section">
<h3 class="section-title">Purchase &amp; Status</h3>
<div class="form-row">
<!-- Purchase Price -->
<mat-form-field appearance="outline" class="form-field">
<mat-label>Price</mat-label>
<input matInput type="number" formControlName="purchasePrice"
min="0" max="1000000" step="0.01"
placeholder="e.g., 25.00" aria-label="Purchase price" />
<span matTextSuffix>$</span>
@if (form.get('purchasePrice')!.hasError('min') && form.get('purchasePrice')!.touched) {
<mat-error>Price must be non-negative</mat-error>
}
</mat-form-field>
<!-- Purchase Date -->
<mat-form-field appearance="outline" class="form-field">
<mat-label>Purchase Date</mat-label>
<input matInput [matDatepicker]="picker" formControlName="purchaseDate"
aria-label="Purchase date" />
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<!-- Active Status -->
<div class="checkbox-row">
<mat-checkbox formControlName="isActive" aria-label="Active status">
Spool is active and available for use
</mat-checkbox>
</div>
</div>
</form>
}
</mat-dialog-content>
<!-- Dialog Actions -->
<mat-dialog-actions align="end">
<button mat-button type="button" (click)="cancel()" [disabled]="saving()"
aria-label="Cancel">
Cancel
</button>
<button mat-raised-button color="primary" type="button" (click)="save()"
[disabled]="saving() || form.invalid" aria-label="Save filament">
@if (saving()) {
<mat-spinner diameter="20" class="btn-spinner"></mat-spinner>
}
{{ isEditMode() ? 'Save Changes' : 'Add Filament' }}
</button>
</mat-dialog-actions>

175
frontend/src/app/components/filament-dialog/filament-dialog.component.scss Normal file
View File

@@ -0,0 +1,175 @@
/**
* Filament Dialog Styles
* Touch-optimized for kiosk (Raspberry Pi 5) and mobile PWA
*/
$touch-target-min: 48px;
$spacing-unit: 8px;
$color-error: #ef4444;
// ── Dialog Layout ──────────────────────────────────────────
.filament-dialog-content {
overflow-y: auto;
max-height: 70vh;
padding: 0 $spacing-unit * 2;
@media (max-width: 480px) {
padding: 0 $spacing-unit;
}
}
[mat-dialog-title] {
margin: 0 0 $spacing-unit * 2 0;
padding: $spacing-unit * 2 0 0 0;
font-size: 20px;
font-weight: 600;
}
// ── Loading State ──────────────────────────────────────────
.dialog-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px $spacing-unit * 2;
color: var(--mat-sys-on-surface-variant);
p {
margin-top: $spacing-unit * 2;
font-size: 14px;
}
}
// ── Error Banner ───────────────────────────────────────────
.error-banner {
display: flex;
align-items: center;
gap: $spacing-unit;
padding: $spacing-unit * 1.5 $spacing-unit * 2;
border-radius: 8px;
margin-bottom: $spacing-unit * 2;
background-color: rgba($color-error, 0.12);
color: $color-error;
border: 1px solid rgba($color-error, 0.3);
font-size: 14px;
font-weight: 500;
mat-icon {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
}
}
// ── Form Sections ──────────────────────────────────────────
.form-section {
margin-bottom: $spacing-unit * 3;
.section-title {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mat-sys-on-surface-variant);
margin: 0 0 $spacing-unit * 1.5 0;
padding-bottom: $spacing-unit * 0.5;
border-bottom: 1px solid var(--mat-sys-outline-variant);
}
}
.filament-form {
display: flex;
flex-direction: column;
gap: $spacing-unit;
}
// ── Form Fields ────────────────────────────────────────────
.form-field {
width: 100%;
// Touch target sizing
.mat-mdc-form-field-subscript-wrapper {
min-height: 20px;
}
}
.form-row {
display: flex;
gap: $spacing-unit * 2;
width: 100%;
.form-field {
flex: 1;
}
@media (max-width: 480px) {
flex-direction: column;
gap: 0;
}
}
// ── Color Hex Preview ──────────────────────────────────────
.color-hex-field {
max-width: 180px;
@media (max-width: 480px) {
max-width: 100%;
}
}
.color-preview {
display: inline-flex;
align-items: center;
margin-left: 4px;
}
.color-swatch-mini {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.12);
vertical-align: middle;
}
// ── Checkbox Row ───────────────────────────────────────────
.checkbox-row {
display: flex;
align-items: center;
padding: $spacing-unit 0;
mat-checkbox {
min-height: $touch-target-min;
display: flex;
align-items: center;
}
}
// ── Save Button Spinner ────────────────────────────────────
mat-dialog-actions {
padding: $spacing-unit $spacing-unit * 2 $spacing-unit * 2;
gap: $spacing-unit;
button {
min-height: $touch-target-min;
min-width: 100px;
}
}
.btn-spinner {
display: inline-block;
margin-right: $spacing-unit;
vertical-align: middle;
circle {
stroke: currentColor;
}
}

277
frontend/src/app/components/filament-dialog/filament-dialog.component.ts Normal file
View File

@@ -0,0 +1,277 @@
import {
ChangeDetectionStrategy,
Component,
inject,
signal,
computed,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTooltipModule } from '@angular/material/tooltip';
import { Filament } from '../../models/filament.model';
import {
MaterialBase,
MaterialFinish,
MaterialModifier,
} from '../../models/material.model';
import {
FilamentService,
CreateFilamentRequest,
UpdateFilamentRequest,
} from '../../services/filament.service';
/** Data passed into the dialog from the opener. */
export interface FilamentDialogData {
/** If provided, the dialog opens in edit mode with pre-populated fields. */
filament?: Filament;
}
@Component({
selector: 'app-filament-dialog',
standalone: true,
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatDialogModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatDatepickerModule,
MatNativeDateModule,
MatCheckboxModule,
MatButtonModule,
MatIconModule,
MatProgressSpinnerModule,
MatTooltipModule,
],
templateUrl: './filament-dialog.component.html',
styleUrl: './filament-dialog.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FilamentDialogComponent {
private readonly dialogRef = inject(MatDialogRef<FilamentDialogComponent>);
private readonly data = inject<FilamentDialogData>(MAT_DIALOG_DATA);
private readonly fb = inject(FormBuilder);
private readonly filamentService = inject(FilamentService);
/** Whether this dialog is in edit mode (has existing filament data). */
readonly isEditMode = computed(() => !!this.data.filament);
/** Dialog title based on mode. */
readonly dialogTitle = computed(() =>
this.isEditMode() ? 'Edit Filament' : 'Add Filament'
);
// ── Lookup data signals ──────────────────────────────────
/** All material bases for the base material dropdown. */
readonly materialBases = signal<MaterialBase[]>([]);
/** Material finishes filtered by selected base material. */
readonly filteredFinishes = signal<MaterialFinish[]>([]);
/** Material modifiers filtered by selected base material. */
readonly filteredModifiers = signal<MaterialModifier[]>([]);
/** Whether material lookups are loading. */
readonly lookupsLoading = signal(true);
/** Whether the save operation is in progress. */
readonly saving = signal(false);
/** Server error message, if any. */
readonly serverError = signal<string | null>(null);
// ── Form ─────────────────────────────────────────────────
readonly form: FormGroup = this.fb.group({
materialBaseId: ['', Validators.required],
materialFinishId: ['', Validators.required],
materialModifierId: [null],
brand: ['', [Validators.required, Validators.maxLength(200)]],
colorName: ['', [Validators.required, Validators.maxLength(200)]],
colorHex: ['#000000', [Validators.required, Validators.pattern(/^#[0-9A-Fa-f]{6}$/)]],
weightTotalGrams: [1000, [Validators.required, Validators.min(0.01), Validators.max(100000)]],
weightRemainingGrams: [1000, [Validators.required, Validators.min(0), Validators.max(100000)]],
filamentDiameterMm: [1.75, [Validators.required, Validators.min(0.1), Validators.max(10)]],
spoolSerial: ['', [Validators.required, Validators.maxLength(200)]],
purchasePrice: [null, [Validators.min(0), Validators.max(1000000)]],
purchaseDate: [null],
isActive: [true],
});
constructor() {
this.loadLookups();
this.patchFormIfEditing();
this.setupCascadingFilters();
}
// ── Data loading ─────────────────────────────────────────
/** Load material bases, finishes, and modifiers for dropdowns. */
private loadLookups(): void {
this.lookupsLoading.set(true);
this.filamentService.getMaterialBases().subscribe({
next: (bases) => {
this.materialBases.set(bases);
this.lookupsLoading.set(false);
},
error: () => {
this.lookupsLoading.set(false);
this.serverError.set('Failed to load material options. Please try again.');
},
});
}
/** Pre-populate form fields when editing an existing filament. */
private patchFormIfEditing(): void {
if (this.data.filament) {
const f = this.data.filament;
this.form.patchValue({
materialBaseId: f.materialBaseId,
materialFinishId: f.materialFinishId,
materialModifierId: f.materialModifierId,
brand: f.brand,
colorName: f.colorName,
colorHex: f.colorHex,
weightTotalGrams: f.weightTotalGrams,
weightRemainingGrams: f.weightRemainingGrams,
filamentDiameterMm: f.filamentDiameterMm,
spoolSerial: f.spoolSerial,
purchasePrice: f.purchasePrice,
purchaseDate: f.purchaseDate ? new Date(f.purchaseDate) : null,
isActive: f.isActive,
});
}
}
/** Set up cascading filter: when base material changes, reload finishes & modifiers. */
private setupCascadingFilters(): void {
this.form.get('materialBaseId')!.valueChanges.subscribe((baseId: string | null) => {
// Clear dependent selections when base changes
this.form.get('materialFinishId')!.setValue('');
this.form.get('materialModifierId')!.setValue(null);
this.filteredFinishes.set([]);
this.filteredModifiers.set([]);
if (!baseId) return;
this.filamentService.getMaterialFinishes(baseId).subscribe({
next: (finishes) => this.filteredFinishes.set(finishes),
error: () => this.filteredFinishes.set([]),
});
this.filamentService.getMaterialModifiers(baseId).subscribe({
next: (modifiers) => this.filteredModifiers.set(modifiers),
error: () => this.filteredModifiers.set([]),
});
});
// If editing, trigger the cascading load for the pre-selected base
if (this.data.filament) {
const baseId = this.data.filament.materialBaseId;
// We need to load finishes and modifiers for the pre-selected base
// but also re-select the original finish and modifier after loading
this.filamentService.getMaterialFinishes(baseId).subscribe({
next: (finishes) => {
this.filteredFinishes.set(finishes);
// Re-patch finish after load
this.form.get('materialFinishId')!.setValue(this.data.filament!.materialFinishId);
},
});
this.filamentService.getMaterialModifiers(baseId).subscribe({
next: (modifiers) => {
this.filteredModifiers.set(modifiers);
// Re-patch modifier after load
this.form.get('materialModifierId')!.setValue(this.data.filament!.materialModifierId);
},
});
}
}
// ── Actions ──────────────────────────────────────────────
/** Cancel and close the dialog without saving. */
cancel(): void {
this.dialogRef.close(false);
}
/** Submit the form — creates or updates the filament. */
save(): void {
if (this.form.invalid) {
this.form.markAllAsTouched();
return;
}
// Cross-field validation: remaining weight must not exceed total weight
const total = this.form.value.weightTotalGrams;
const remaining = this.form.value.weightRemainingGrams;
if (remaining > total) {
this.form.get('weightRemainingGrams')!.setErrors({ exceedsTotal: true });
return;
}
this.saving.set(true);
this.serverError.set(null);
const formValue = this.form.value;
const request: CreateFilamentRequest | UpdateFilamentRequest = {
materialBaseId: formValue.materialBaseId,
materialFinishId: formValue.materialFinishId,
materialModifierId: formValue.materialModifierId || null,
brand: formValue.brand.trim(),
colorName: formValue.colorName.trim(),
colorHex: formValue.colorHex,
weightTotalGrams: formValue.weightTotalGrams,
weightRemainingGrams: formValue.weightRemainingGrams,
filamentDiameterMm: formValue.filamentDiameterMm,
spoolSerial: formValue.spoolSerial.trim(),
purchasePrice: formValue.purchasePrice ?? null,
purchaseDate: formValue.purchaseDate
? new Date(formValue.purchaseDate).toISOString()
: null,
isActive: formValue.isActive,
};
if (this.isEditMode()) {
const id = this.data.filament!.id;
this.filamentService.updateFilament(id, request).subscribe({
next: (updated) => {
this.saving.set(false);
this.dialogRef.close(true);
},
error: (err) => {
this.saving.set(false);
this.serverError.set(
err?.error?.error || err?.message || 'Failed to update filament. Please try again.'
);
},
});
} else {
this.filamentService.createFilament(request).subscribe({
next: (created) => {
this.saving.set(false);
this.dialogRef.close(true);
},
error: (err) => {
this.saving.set(false);
this.serverError.set(
err?.error?.error || err?.message || 'Failed to create filament. Please try again.'
);
},
});
}
}
}

24
frontend/src/app/components/filament-table/filament-table.component.html
View File

@@ -1,6 +1,16 @@
<!-- Filament Inventory Table — with low stock indicators -->
<div class="filament-table-container" role="region" aria-label="Filament inventory">
<!-- Header Row: title + Add button -->
<div class="table-header">
<h2 class="table-title">Filament Inventory</h2>
<button mat-raised-button color="primary" (click)="openAddDialog()"
aria-label="Add filament" class="add-btn">
<mat-icon aria-hidden="true">add</mat-icon>
Add Filament
</button>
</div>
<!-- Low Stock Alert Banner — shown when critical or low stock spools exist -->
@if (criticalCount() > 0) {
<div class="alert-banner critical" role="alert">
@@ -106,6 +116,20 @@
</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let filament" class="actions-cell">
<button mat-icon-button
[matTooltip]="'Edit ' + filament.brand + ' ' + filament.colorName"
matTooltipPosition="above"
aria-label="Edit filament"
(click)="openEditDialog(filament)">
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns()"></tr>
<tr mat-row *matRowDef="let row; columns: columns();"
[class.row-critical]="classifyStockLevel(row) === 'critical'"

29
frontend/src/app/components/filament-table/filament-table.component.scss
View File

@@ -22,6 +22,35 @@ $color-inactive: #94a3b8; // Gray — inactive spool
-webkit-overflow-scrolling: touch;
}
// Header row: title + add button
.table-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: $spacing-unit * 2;
flex-wrap: wrap;
gap: $spacing-unit;
.table-title {
font-size: 18px;
font-weight: 600;
margin: 0;
}
.add-btn {
min-height: $touch-target-min;
mat-icon {
margin-right: 4px;
}
}
}
// Actions cell
.actions-cell {
text-align: center;
width: 56px;
}
// Alert banner for low stock warnings
.alert-banner {
display: flex;

56
frontend/src/app/components/filament-table/filament-table.component.ts
View File

@@ -3,6 +3,7 @@ import {
Component,
Input,
computed,
inject,
signal,
} from '@angular/core';
import { CommonModule } from '@angular/common';
@@ -12,12 +13,18 @@ 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 {
Filament,
StockLevel,
getRemainingPercent,
classifyStockLevel,
} from '../../models/filament.model';
import {
FilamentDialogComponent,
FilamentDialogData,
} from '../filament-dialog/filament-dialog.component';
/** Display column definitions for the filament table */
export type FilamentColumn =
@@ -27,7 +34,8 @@ export type FilamentColumn =
| 'serial'
| 'remaining'
| 'stockLevel'
| 'status';
| 'status'
| 'actions';
@Component({
selector: 'app-filament-table',
@@ -40,12 +48,16 @@ export type FilamentColumn =
MatProgressBarModule,
MatTooltipModule,
MatSortModule,
MatButtonModule,
MatDialogModule,
],
templateUrl: './filament-table.component.html',
styleUrl: './filament-table.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FilamentTableComponent {
private readonly dialog = inject(MatDialog);
/** Filament data input — reactive signal for live updates */
readonly filaments = signal<Filament[]>([]);
@@ -65,6 +77,7 @@ export class FilamentTableComponent {
'remaining',
'stockLevel',
'status',
'actions',
]);
/** Default columns for template binding */
@@ -293,6 +306,47 @@ 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 */

50
frontend/src/app/models/material.model.ts Normal file
View File

@@ -0,0 +1,50 @@
/**
* Material lookup models matching the Extrudex backend Material DTOs.
* Used for populating dropdowns in the filament add/edit form.
*/
/** Material base (e.g., PLA, PETG, ABS). */
export interface MaterialBase {
/** Unique identifier. */
id: string;
/** Human-readable name (e.g., "PLA", "PETG"). */
name: string;
/** Density in g/cm³. */
densityGperCm3: number;
/** Created timestamp (UTC). */
createdAt: string;
/** Updated timestamp (UTC). */
updatedAt: string;
}
/** Material finish (e.g., Basic, Matte, Silk). */
export interface MaterialFinish {
/** Unique identifier. */
id: string;
/** Human-readable name (e.g., "Basic", "Matte"). */
name: string;
/** Foreign key to the parent material base. */
materialBaseId: string;
/** Name of the parent material base (for display). */
materialBaseName: string;
/** Created timestamp (UTC). */
createdAt: string;
/** Updated timestamp (UTC). */
updatedAt: string;
}
/** Material modifier (e.g., Carbon Fiber, Wood Fill). Optional. */
export interface MaterialModifier {
/** Unique identifier. */
id: string;
/** Human-readable name (e.g., "Carbon Fiber"). */
name: string;
/** Foreign key to the parent material base. */
materialBaseId: string;
/** Name of the parent material base (for display). */
materialBaseName: string;
/** Created timestamp (UTC). */
createdAt: string;
/** Updated timestamp (UTC). */
updatedAt: string;
}

13
frontend/src/app/models/paged-response.model.ts Normal file
View File

@@ -0,0 +1,13 @@
/**
* Generic paged response wrapper matching the Extrudex backend PagedResponse<T>.
*/
export interface PagedResponse<T> {
/** The items in this page. */
items: T[];
/** Total number of items across all pages. */
totalCount: number;
/** The current page number (1-based). */
pageNumber: number;
/** The number of items per page. */
pageSize: number;
}

134
frontend/src/app/services/filament.service.ts Normal file
View File

@@ -0,0 +1,134 @@
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.
*/
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;
}
/**
* 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.
*/
@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.
*/
getFilaments(params?: {
pageNumber?: number;
pageSize?: number;
materialBaseId?: string;
materialFinishId?: string;
materialModifierId?: string;
brand?: string;
isActive?: boolean;
}): Observable<PagedResponse<Filament>> {
return this.http.get<PagedResponse<Filament>>(
`${this.baseUrl}/api/filaments`,
{ params: params as Record<string, string | number | boolean> }
);
}
/**
* Get a single filament spool by ID.
*/
getFilament(id: string): Observable<Filament> {
return this.http.get<Filament>(`${this.baseUrl}/api/filaments/${id}`);
}
/**
* Create a new filament spool.
*/
createFilament(request: CreateFilamentRequest): Observable<Filament> {
return this.http.post<Filament>(`${this.baseUrl}/api/filaments`, request);
}
/**
* Update an existing filament spool.
*/
updateFilament(id: string, request: UpdateFilamentRequest): Observable<Filament> {
return this.http.put<Filament>(`${this.baseUrl}/api/filaments/${id}`, request);
}
// ── Material Lookups ─────────────────────────────────────
/**
* Get all material bases (PLA, PETG, ABS, etc.).
*/
getMaterialBases(): Observable<MaterialBase[]> {
return this.http.get<MaterialBase[]>(`${this.baseUrl}/api/materials/bases`);
}
/**
* Get all material finishes, optionally filtered by material base.
*/
getMaterialFinishes(materialBaseId?: string): Observable<MaterialFinish[]> {
const params: Record<string, string> = {};
if (materialBaseId) {
params['materialBaseId'] = materialBaseId;
}
return this.http.get<MaterialFinish[]>(`${this.baseUrl}/api/materials/finishes`, { params });
}
/**
* Get all material modifiers, optionally filtered by material base.
*/
getMaterialModifiers(materialBaseId?: string): Observable<MaterialModifier[]> {
const params: Record<string, string> = {};
if (materialBaseId) {
params['materialBaseId'] = materialBaseId;
}
return this.http.get<MaterialModifier[]>(`${this.baseUrl}/api/materials/modifiers`, { params });
}
}

8
frontend/src/environments/environment.prod.ts Normal file
View File

@@ -0,0 +1,8 @@
/**
* Environment configuration for the Extrudex frontend (production).
* Override API URL for deployed environments.
*/
export const environment = {
production: true,
apiBaseUrl: '/api',
};

8
frontend/src/environments/environment.ts Normal file
View File

@@ -0,0 +1,8 @@
/**
* Environment configuration for the Extrudex frontend.
* Replace API URL with the actual backend endpoint in production.
*/
export const environment = {
production: false,
apiBaseUrl: 'http://localhost:5000',
};