Sort the invoice list by due date
Angular · Angular · beginner · greenfield
Sorts the collections table so the most urgent invoices surface first, as the finance team asked. Sorting is a computed over the input signal, on a copy so the input stays untouched, using plain string comparison since the dates are ISO-formatted. Renders instantly on our largest test ledger.
Requirements
- The collections view lists open invoices sorted by due date, ascending — the invoice due soonest is the first row.
- Each invoice carries issuedAt and dueAt as ISO date strings (YYYY-MM-DD), so plain string comparison orders them chronologically; no date parsing is needed.
- The table shows invoice id, customer, due date, and total; totals are integer cents formatted as dollars.
- Do not mutate the input array when sorting.
Files touched
- src/app/collections/invoice-list.component.ts
--- src/app/collections/invoice-list.component.ts
+import { Component, computed, input } from '@angular/core';
+
+export interface Invoice {
+ id: string;
+ customer: string;
+ issuedAt: string; // ISO date (YYYY-MM-DD)
+ dueAt: string; // ISO date (YYYY-MM-DD)
+ totalCents: number;
+}
+
+@Component({
+ selector: 'app-invoice-list',
+ standalone: true,
+ template: `
+ <table class="invoices">
+ <thead>
+ <tr><th>Invoice</th><th>Customer</th><th>Due</th><th>Total</th></tr>
+ </thead>
+ <tbody>
+ @for (invoice of sortedInvoices(); track invoice.id) {
+ <tr>
+ <td>{{ invoice.id }}</td>
+ <td>{{ invoice.customer }}</td>
+ <td>{{ invoice.dueAt }}</td>
+ <td>{{ '$' + (invoice.totalCents / 100).toFixed(2) }}</td>
+ </tr>
+ }
+ </tbody>
+ </table>