fix(concierge): name the locker on the locker bookings listing

apps/concierge/src/app/lockers/locker-bookings.component.ts

@@ -128,7 +128,7 @@ import { LockerStateService } from './locker-state.service';
             </ng-template>
             <ng-template #locker_template let-row="row">
                 <div class="p-4">
-                    {{ row.asset_name || row.asset_id }}
+                    {{ lockerName(row) }}
                 </div>
             </ng-template>
             <ng-template #user_template let-row="row">
@@ -305,6 +305,24 @@ export class LockerBookingsComponent {
     private _state = inject(LockerStateService);
     public readonly load_error = this._state.load_error;
     public readonly retryLoad = () => this._state.refresh();
+    /** Locker names by asset id, from the lockers loaded for the building. */
+    private readonly _locker_names = computed(() => {
+        const names: Record<string, string> = {};
+        for (const locker of this._state.lockers()) {
+            names[locker.id] = locker.name;
+        }
+        return names;
+    });
+
+    /**
+     * A booking stores only the locker's id, so the name comes from the
+     * lockers the state has loaded; the id is shown when it is not among them.
+     */
+    public lockerName(row: Booking): string {
+        return (
+            this._locker_names()[row.asset_id] || row.asset_name || row.asset_id
+        );
+    }
     public readonly rowKey = bookingRowKey;
     public readonly canSelect = (
         row: BookingRowKeyFields & Pick<Booking, 'status' | 'deleted'>,

apps/concierge/src/tests/lockers/locker-bookings.component.spec.ts

@@ -30,6 +30,7 @@ describe('LockerBookingsComponent', () => {
             search: signal(''),
             has_more_pages: signal(false),
             load_error: signal(false),
+            lockers: signal([{ id: 'locker-1', name: 'Locker 1' }]),
             filtered_bookings: signal([
                 { id: 'bk-1', date: 1_000, duration: 30 },
             ]),
@@ -49,6 +50,17 @@ describe('LockerBookingsComponent', () => {
         ]);
     });
 
+    it('should name a locker from the loaded lockers, falling back to the id', () => {
+        const name = (row: any) => spectator.component.lockerName(row);
+        expect(name({ asset_id: 'locker-1', asset_name: 'locker-1' })).toBe(
+            'Locker 1',
+        );
+        expect(name({ asset_id: 'locker-9', asset_name: 'Named' })).toBe(
+            'Named',
+        );
+        expect(name({ asset_id: 'locker-9', asset_name: '' })).toBe('locker-9');
+    });
+
     it('should request the next page when loading more', () => {
         spectator.component.loadMore();
         expect(state.nextPage).toHaveBeenCalledTimes(1);