feat(workplace): add initial API integration for team schedule

Author: MrYuion

apps/workplace/src/app/book/desk-flow/auto-assigned-desk-modal.component.ts

@@ -12,7 +12,11 @@ import { MatRippleModule } from '@angular/material/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Router } from '@angular/router';
-import { BookingAsset, BookingFormService } from '@placeos/bookings';
+import {
+    BookingAsset,
+    BookingFormService,
+    findNearbyFeature,
+} from '@placeos/bookings';
 import {
     AsyncHandler,
     Desk,
@@ -226,6 +230,10 @@ export class AutoAssignedDeskModalComponent
     public readonly assigned_desk = signal<BookingAsset | Desk | null>(null);
     public readonly date = model<number | undefined>(undefined);
     public readonly duration = model<number | undefined>(undefined);
+    /** When set, tries to find a desk nearby to this desk */
+    public readonly nearby_desk_id = model<string | undefined>(undefined);
+    /** When set, filters available desks to this level */
+    public readonly level_id = model<string | undefined>(undefined);
 
     public zoom = 1.5;
     public center = signal({ x: 0.5, y: 0.5 });
@@ -262,7 +270,7 @@ export class AutoAssignedDeskModalComponent
             });
 
             // Get available resources (desks)
-            const available_desks = await firstTruthyValueFrom(
+            let available_desks = await firstTruthyValueFrom(
                 this._state.available_resources,
             );
 
@@ -272,26 +280,79 @@ export class AutoAssignedDeskModalComponent
                 return;
             }
 
-            // Group desks by level and find level with most available desks
-            const desks_by_level = available_desks.reduce(
-                (acc, desk) => {
-                    const level_id = desk.zone?.id || 'unknown';
-                    if (!acc[level_id]) {
-                        acc[level_id] = [];
+            let assigned_desk: BookingAsset;
+            const nearby_desk_id = this.nearby_desk_id();
+            const level_id = this.level_id();
+
+            // If nearby_desk_id is provided, try to find a desk nearby
+            if (nearby_desk_id) {
+                // Filter to same level if level_id is provided
+                if (level_id) {
+                    const level_desks = available_desks.filter(
+                        (desk) => desk.zone?.id === level_id,
+                    );
+                    if (level_desks.length > 0) {
+                        available_desks = level_desks;
                     }
-                    acc[level_id].push(desk);
-                    return acc;
-                },
-                {} as Record<string, typeof available_desks>,
-            );
+                }
 
-            // Find the level with the most available desks
-            const level_with_most_desks = Object.entries(desks_by_level).sort(
-                ([, a], [, b]) => b.length - a.length,
-            )[0];
+                // Try to find the level by looking at nearby desk in all resources
+                const all_resources = await firstTruthyValueFrom(
+                    this._state.resources,
+                );
+                const nearby_resource = all_resources.find(
+                    (r) =>
+                        r.id === nearby_desk_id || r.map_id === nearby_desk_id,
+                );
+
+                if (nearby_resource?.zone?.id) {
+                    const level = this._org.levelWithID([
+                        nearby_resource.zone.id,
+                    ]);
+                    if (level?.map_id) {
+                        // Use findNearbyFeature to get the closest desk
+                        const desk_ids = available_desks.map(
+                            (d) => d.map_id || d.id,
+                        );
+                        const closest_id = await findNearbyFeature(
+                            level.map_id,
+                            nearby_desk_id,
+                            desk_ids,
+                        );
+                        if (closest_id) {
+                            assigned_desk = available_desks.find(
+                                (d) =>
+                                    d.id === closest_id ||
+                                    d.map_id === closest_id,
+                            );
+                        }
+                    }
+                }
+            }
 
-            // Pick the first desk from the level with most availability
-            const assigned_desk = level_with_most_desks[1][0];
+            // Fallback to original logic if no nearby desk found
+            if (!assigned_desk) {
+                // Group desks by level and find level with most available desks
+                const desks_by_level = available_desks.reduce(
+                    (acc, desk) => {
+                        const zone_id = desk.zone?.id || 'unknown';
+                        if (!acc[zone_id]) {
+                            acc[zone_id] = [];
+                        }
+                        acc[zone_id].push(desk);
+                        return acc;
+                    },
+                    {} as Record<string, typeof available_desks>,
+                );
+
+                // Find the level with the most available desks
+                const level_with_most_desks = Object.entries(
+                    desks_by_level,
+                ).sort(([, a], [, b]) => b.length - a.length)[0];
+
+                // Pick the first desk from the level with most availability
+                assigned_desk = level_with_most_desks[1][0];
+            }
 
             form.patchValue({
                 asset_id: assigned_desk.id,

apps/workplace/src/app/team-schedule/common.ts

@@ -1,4 +1,4 @@
-import { User } from '@placeos/common';
+import { StaffUser, User } from '@placeos/common';
 
 export type LocationStatus =
     | 'unspecified'
@@ -11,6 +11,10 @@ export type LocationStatus =
 export interface DeskBooking {
     building_name: string;
     desk_code: string;
+    desk_id?: string;
+    level_id?: string;
+    date?: number;
+    duration?: number;
 }
 
 export interface DayStatus {
@@ -20,7 +24,7 @@ export interface DayStatus {
 }
 
 export interface TeamMember {
-    user: User;
+    user: StaffUser | User;
     is_favorite: boolean;
     is_my_team: boolean;
     department?: string;

apps/workplace/src/app/team-schedule/team-quick-actions.component.ts

@@ -1,8 +1,10 @@
 import { Component, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
-import { settingSignal } from '@placeos/common';
+import { currentUser, settingSignal, User } from '@placeos/common';
 import { IconComponent } from '@placeos/components';
+import { BookingFormService } from '@placeos/bookings';
+import { TeamScheduleService } from './team-schedule.service';
 
 @Component({
     selector: 'team-quick-actions',
@@ -37,18 +39,33 @@ import { IconComponent } from '@placeos/components';
                     btn
                     matRipple
                     class="white w-full flex-1 space-x-2"
-                    (click)="autoAssignDesk()"
+                    (click)="bookForGroup()"
                 >
                     <icon class="text-2xl">bolt</icon>
-                    <div>Book for team</div>
+                    @if (select_mode()) {
+                        <div>
+                            Book selected
+                            @if (selected_count() > 0) {
+                                ({{ selected_count() }})
+                            }
+                        </div>
+                    } @else {
+                        <div>Book for team</div>
+                    }
                 </button>
                 <button
                     btn
                     matRipple
                     class="inverse white w-full flex-1 space-x-2"
+                    (click)="toggleSelectMode()"
                 >
-                    <icon class="text-2xl">map</icon>
-                    <div>Select Colleagues</div>
+                    @if (select_mode()) {
+                        <icon class="text-2xl">close</icon>
+                        <div>Clear</div>
+                    } @else {
+                        <icon class="text-2xl">group_add</icon>
+                        <div>Select Colleagues</div>
+                    }
                 </button>
             </div>
         </div>
@@ -69,8 +86,53 @@ import { IconComponent } from '@placeos/components';
 export class TeamQuickActionsComponent {
     private _dialog = inject(MatDialog);
     private _router = inject(Router);
+    private _booking_form = inject(BookingFormService);
+    private _service = inject(TeamScheduleService);
 
     public readonly features = settingSignal<string[]>('features', []);
 
-    public readonly autoAssignDesk = () => {};
+    // Expose data
+    public readonly select_mode = this._service.select_mode;
+    public readonly selected_count = this._service.selected_count;
+
+    public toggleSelectMode() {
+        if (this._service.select_mode()) {
+            this._service.clearSelection();
+        } else {
+            this._service.toggleSelectMode();
+        }
+    }
+
+    public bookForGroup() {
+        let members: User[];
+
+        if (this._service.select_mode() && this._service.selected_count() > 0) {
+            // Use selected members
+            members = this._service
+                .selected_members()
+                .map((m) => m.user as User);
+        } else {
+            // Use team members
+            members = this._service.getTeamMembers().map((m) => m.user as User);
+        }
+
+        // Add current user if not already included
+        const current = currentUser();
+        if (!members.find((m) => m.email === current.email)) {
+            members = [current, ...members];
+        }
+
+        // Clear selection mode
+        this._service.clearSelection();
+
+        // Set up group booking
+        this._booking_form.setOptions({
+            type: 'desk',
+            group: true,
+            members,
+        });
+
+        // Navigate to desk booking flow
+        this._router.navigate(['/book', 'desks']);
+    }
 }