Merge branch 'develop' into custom/HIO687AS

MrYuion · MrYuion · commit 5b3df5aec508 · 2026-03-23T14:41:46.000+11:00
# Conflicts:
#	libs/form-fields/src/lib/duration-field.component.ts
diff --git a/apps/survey/project.json b/apps/survey/project.json
@@ -59,7 +59,7 @@
                         {
                             "type": "initial",
                             "maximumWarning": "500kb",
-                            "maximumError": "1.5mb"
+                            "maximumError": "1.6mb"
                         },
                         {
                             "type": "anyComponentStyle",
diff --git a/libs/common/src/lib/timezone-helpers.ts b/libs/common/src/lib/timezone-helpers.ts
@@ -1,4 +1,10 @@
-import { addMilliseconds, endOfDay, startOfDay } from 'date-fns';
+import {
+    addMilliseconds,
+    endOfDay,
+    set,
+    startOfDay,
+    startOfMinute,
+} from 'date-fns';
 import { fromZonedTime, getTimezoneOffset, toZonedTime } from 'date-fns-tz';
 import { padLength } from './general';
 
@@ -46,7 +52,7 @@ export function getTimezoneOffsetString(tz: string) {
     const offset = getTimezoneOffsetInMinutes(tz);
     const hours = Math.floor(Math.abs(offset) / 60);
     const minutes = Math.abs(offset) % 60;
-    const output = `${offset > 0 ? '+' : '-'}${padLength(hours, 2)}${padLength(
+    const output = `${offset >= 0 ? '+' : '-'}${padLength(hours, 2)}${padLength(
         minutes,
         2,
     )}`;
@@ -58,7 +64,7 @@ export function getTimezoneOffsetInMinutes(timeZone, date = new Date()) {
     const options: Intl.DateTimeFormatOptions = {
         timeZone,
         hour12: false,
-        timeZoneName: 'short',
+        timeZoneName: 'shortOffset',
     };
     const formatter = new Intl.DateTimeFormat([], options);
     const parts = formatter.formatToParts(date);
@@ -91,3 +97,51 @@ export function getTimezoneDifferenceInHours(
     // Calculate the difference in hours
     return (offset1 - offset2) / 60;
 }
+
+/**
+ * Get the hours and minutes of a date as they appear in a target timezone.
+ * Returns { hours, minutes } in the wall-clock time of the given timezone.
+ */
+export function getTimeInTimezone(
+    date: Date | number,
+    tz?: string,
+): { hours: number; minutes: number } {
+    if (!tz) {
+        const d = new Date(date);
+        return { hours: d.getHours(), minutes: d.getMinutes() };
+    }
+    const zoned = toZonedTime(date, tz);
+    return { hours: zoned.getHours(), minutes: zoned.getMinutes() };
+}
+
+/**
+ * Format a date's time as 'HH:mm' in a target timezone.
+ * If no timezone is provided, uses the local timezone.
+ */
+export function formatTimeInTimezone(date: Date | number, tz?: string): string {
+    const { hours, minutes } = getTimeInTimezone(date, tz);
+    return `${padLength(hours, 2)}:${padLength(minutes, 2)}`;
+}
+
+/**
+ * Set hours and minutes on a date, interpreting them as wall-clock time in the
+ * given timezone, and return the resulting UTC epoch milliseconds.
+ * If no timezone is provided, interprets in local timezone.
+ */
+export function setTimeInTimezone(
+    date: Date | number,
+    hours: number,
+    minutes: number,
+    tz?: string,
+): number {
+    if (!tz) {
+        const d = set(new Date(date), { hours, minutes });
+        return startOfMinute(d).valueOf();
+    }
+    // Convert the date to the target timezone's wall-clock representation
+    const zoned = toZonedTime(date, tz);
+    // Set the desired hours and minutes on the zoned representation
+    const adjusted = set(zoned, { hours, minutes });
+    // Convert back from the target timezone's wall-clock to UTC epoch
+    return startOfMinute(fromZonedTime(adjusted, tz)).valueOf();
+}
diff --git a/libs/components/src/lib/global-loading.component.ts b/libs/components/src/lib/global-loading.component.ts
@@ -3,6 +3,7 @@ import {
     AsyncHandler,
     firstTruthyValueFrom,
     getLoadingMessage,
+    nativeDomainError,
     needsNativeDomain,
     OrganisationService,
     PlaceOS_Service,
diff --git a/libs/explore/src/lib/explore-desk-info.component.ts b/libs/explore/src/lib/explore-desk-info.component.ts
@@ -28,7 +28,7 @@ type DeskStatus =
 export interface DeskInfoData {
     id: string;
     map_id: string;
-    user: string;
+    user: WritableSignal<string>;
     name: string;
     start?: number;
     end?: number;
@@ -226,7 +226,7 @@ export class ExploreDeskInfoComponent extends AsyncHandler implements OnInit {
     public readonly id = signal(this._details.id);
     public readonly map_id = signal(this._details.map_id);
     public readonly name = signal(this._details.name);
-    public readonly user = signal(this._details.user);
+    public readonly user = this._details.user;
     public readonly start = signal(this._details.start);
     public readonly end = signal(this._details.end);
     public readonly department = signal(this._details.department);
diff --git a/libs/explore/src/lib/explore-desks.service.ts b/libs/explore/src/lib/explore-desks.service.ts
@@ -79,7 +79,7 @@ export class ExploreDesksService extends AsyncHandler implements OnDestroy {
     private _signs_of_life = new BehaviorSubject<string[]>([]);
     private _statuses: Record<string, WritableSignal<string>> = {};
 
-    private _users: Record<string, string> = {};
+    private _users: Record<string, WritableSignal<string>> = {};
     private _departments: Record<string, string> = {};
     private _desk_bookings = new Map<string, WritableSignal<Booking[]>>();
 
@@ -337,7 +337,10 @@ export class ExploreDesksService extends AsyncHandler implements OnDestroy {
         const departments = this._settings.get('app.department_map') || {};
         for (const desk of desks) {
             const d_id = desk.map_id || desk.asset_id;
-            this._users[d_id] = desk.staff_name;
+            if (!this._users[d_id]) {
+                this._users[d_id] = signal('');
+            }
+            this._users[d_id].set(desk.staff_name);
             this._departments[d_id] = departments[desk.department] || '';
         }
         this.processDevices(devices, system_id);
@@ -394,6 +397,19 @@ export class ExploreDesksService extends AsyncHandler implements OnDestroy {
             }
             if (!this._desk_bookings[d_id])
                 this._desk_bookings[d_id] = signal([]);
+            if (!this._users[d_id]) {
+                this._users[d_id] = signal('');
+            }
+            if (show_desk_users) {
+                const user_value =
+                    this._users[d_id]() ||
+                    desk.staff_name ||
+                    (desk as any).assigned_name ||
+                    '';
+                this._users[d_id].set(user_value);
+            } else {
+                this._users[d_id].set('');
+            }
             list.push({
                 track_id: `desk:hover:${d_id}`,
                 location: d_id,
@@ -404,11 +420,7 @@ export class ExploreDesksService extends AsyncHandler implements OnDestroy {
                     id: d_id,
                     map_id: desk.name,
                     name: desk.name || desk.map_id,
-                    user: show_desk_users
-                        ? this._users[d_id] ||
-                          desk.staff_name ||
-                          (desk as any).assigned_name
-                        : '',
+                    user: this._users[d_id],
                     status: this._statuses[d_id],
                     department: this._departments[d_id] || '',
                     bookings: this._desk_bookings[d_id],
@@ -572,7 +584,10 @@ export class ExploreDesksService extends AsyncHandler implements OnDestroy {
             );
             throw e;
         });
-        this._users[d_id] = (options.host || currentUser())?.name;
+        if (!this._users[d_id]) {
+            this._users[d_id] = signal('');
+        }
+        this._users[d_id].set((options.host || currentUser())?.name);
         notifySuccess(
             i18n('EXPLORE.DESK_BOOKING_SUCCESS', { name: desk.name || 'Desk' }),
         );
diff --git a/libs/explore/src/tests/explore-desk-info.component.spec.ts b/libs/explore/src/tests/explore-desk-info.component.spec.ts
@@ -1,6 +1,6 @@
+import { signal } from '@angular/core';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { Booking, MAP_FEATURE_DATA } from '@placeos/common';
-import { signal } from '@angular/core';
 import { ngMocks } from 'ng-mocks';
 
 import { ExploreDeskInfoComponent } from '../lib/explore-desk-info.component';
@@ -39,9 +39,9 @@ describe('ExploreDeskInfoComponent', () => {
                         id: 'desk-1',
                         map_id: 'desk-1',
                         name: 'Desk 1',
-                        user: '',
+                        user: signal(''),
                         status: signal('free'),
-                        bookings: [booking],
+                        bookings: signal([booking]),
                         date: selected.valueOf(),
                     },
                 },
@@ -50,10 +50,8 @@ describe('ExploreDeskInfoComponent', () => {
         spectator.component.now.set(selected.valueOf());
 
         expect(spectator.component.display_user()).toBe('Taylor');
-        expect(spectator.component.current_booking()).toBe(false);
-        expect(spectator.component.next_booking()?.date).toBe(
-            booking.date,
-        );
+        expect(spectator.component.current_booking()).toBeFalsy();
+        expect(spectator.component.next_booking()?.date).toBe(booking.date);
     });
 
     it('should show free at for the current booking', () => {
@@ -77,17 +75,19 @@ describe('ExploreDeskInfoComponent', () => {
                         id: 'desk-1',
                         map_id: 'desk-1',
                         name: 'Desk 1',
-                        user: '',
+                        user: signal(''),
                         status: signal('busy'),
-                        bookings: [booking],
+                        bookings: signal([booking]),
                         date: current.valueOf(),
                     },
                 },
             ],
         });
         spectator.component.now.set(current.valueOf());
 
-        expect(spectator.component.current_booking()).toBe(true);
-        expect(spectator.component.display_end()).toBe(booking.date_end);
+        expect(spectator.component.current_booking()).toBeTruthy();
+        expect(spectator.component.current_booking()?.date_end).toBe(
+            booking.date_end,
+        );
     });
 });
diff --git a/libs/form-fields/src/lib/duration-field.component.ts b/libs/form-fields/src/lib/duration-field.component.ts
@@ -1,19 +1,22 @@
 import { CommonModule } from '@angular/common';
 import {
-    AfterViewInit,
     Component,
+    computed,
     forwardRef,
     input,
     model,
     OnChanges,
     OnInit,
     SimpleChanges,
-    viewChild,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import { formatDuration, getTimezoneOffsetString } from '@placeos/common';
+import { MatMenuModule } from '@angular/material/menu';
+import {
+    formatDuration,
+    getTimeInTimezone,
+    getTimezoneOffsetString,
+} from '@placeos/common';
 import { addMinutes } from 'date-fns';
 import { IconComponent } from 'libs/components/src/lib/icon.component';
 
@@ -48,9 +51,9 @@ export interface DurationOption {
                             : ''
                     }}{{ selected?.name }}{{ selected?.date ? ')' : '' }}
                 </div>
-                @if (timezone() && tz) {
+                @if (timezone() && tz()) {
                     <div class="truncate text-xs opacity-30">
-                        {{ selected?.date | date: time_format + ' (z)' : tz }}
+                        {{ selected?.date | date: time_format + ' (z)' : tz() }}
                     </div>
                 }
             </div>
@@ -60,7 +63,6 @@ export interface DurationOption {
             @for (option of duration_options; track option.id) {
                 <button
                     mat-menu-item
-                    [attr.data-duration]="option.id"
                     class="text-left"
                     (click)="setValue(option.id)"
                 >
@@ -80,13 +82,13 @@ export interface DurationOption {
                                     }}{{ option.name
                                     }}{{ option.date ? ')' : '' }}
                                 </div>
-                                @if (timezone() && tz) {
+                                @if (timezone() && tz()) {
                                     <div class="truncate text-xs opacity-30">
                                         {{
                                             option.date
                                                 | date
                                                     : time_format + ' (z)'
-                                                    : tz
+                                                    : tz()
                                         }}
                                     </div>
                                 }
@@ -125,7 +127,7 @@ export interface DurationOption {
     imports: [MatMenuModule, MatFormFieldModule, CommonModule, IconComponent],
 })
 export class DurationFieldComponent
-    implements OnInit, OnChanges, AfterViewInit, ControlValueAccessor
+    implements OnInit, OnChanges, ControlValueAccessor
 {
     /** Maximum duration option available */
     public readonly max = input(240);
@@ -158,8 +160,6 @@ export class DurationFieldComponent
     private _onChange: (_: number) => void;
     /** Form control on touch handler */
     private _onTouch: (_: number) => void;
-    /** Menu trigger for the duration selection dropdown */
-    private readonly _menu_trigger = viewChild(MatMenuTrigger);
 
     public get time_format() {
         return this.use_24hr() ? 'HH : mm' : 'h : mm a';
@@ -173,12 +173,12 @@ export class DurationFieldComponent
         Intl.DateTimeFormat().resolvedOptions().timeZone,
     );
 
-    public get tz() {
+    public readonly tz = computed(() => {
         const tz = this.timezone();
         if (!tz) return '';
         const tz_offset = getTimezoneOffsetString(tz);
         return tz_offset === this._local_tz ? '' : tz_offset;
-    }
+    });
 
     public ngOnInit(): void {
         this.duration_options = this.generateDurationOptions(
@@ -210,36 +210,6 @@ export class DurationFieldComponent
         }
     }
 
-    public ngAfterViewInit(): void {
-        const trigger = this._menu_trigger();
-        if (trigger) {
-            trigger.menuOpened.subscribe(() => {
-                this._scrollToSelectedDuration();
-            });
-        }
-    }
-
-    /** Scroll the menu to the selected duration option */
-    private _scrollToSelectedDuration(): void {
-        // Use requestAnimationFrame for immediate execution after render
-        requestAnimationFrame(() => {
-            const panel = document.querySelector('.mat-mdc-menu-panel');
-            if (!panel) return;
-
-            // Find the selected duration element
-            const target_element = panel.querySelector(
-                `[data-duration="${this.duration}"]`,
-            );
-
-            if (target_element) {
-                target_element.scrollIntoView({
-                    block: 'center',
-                    behavior: 'instant',
-                });
-            }
-        });
-    }
-
     /**
      * Update the form field value
      * @param new_value New value to set on the form field
@@ -355,8 +325,11 @@ export class DurationFieldComponent
         if (end_time === undefined || end_time === null || !time_value) {
             return max;
         }
-        const date = new Date(time_value);
-        const start_minutes = date.getHours() * 60 + date.getMinutes();
+        // Use building timezone to compute start minutes since end_time
+        // is in building timezone minutes-since-midnight
+        const tz = this.timezone() || undefined;
+        const { hours, minutes } = getTimeInTimezone(time_value, tz);
+        const start_minutes = hours * 60 + minutes;
         return Math.max(0, Math.min(max, end_time - start_minutes));
     }
 }
diff --git a/libs/form-fields/src/lib/time-field.component.ts b/libs/form-fields/src/lib/time-field.component.ts
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@`
`59`	`59`	`{`
`60`	`60`	`"type": "initial",`
`61`	`61`	`"maximumWarning": "500kb",`
`62`		`- "maximumError": "1.5mb"`
	`62`	`+ "maximumError": "1.6mb"`
`63`	`63`	`},`
`64`	`64`	`{`
`65`	`65`	`"type": "anyComponentStyle",`