feat(concierge): update emergency contacts to use the asset endpoints

Author: MrYuion

apps/concierge/src/app/asset-manager/asset-manager-state.service.ts

@@ -269,7 +269,9 @@ export class AssetManagerStateService extends AsyncHandler {
                     ? item.category_id
                     : '',
             }));
-            const categories = unique(mapped_products.map((i) => i.category_id));
+            const categories = unique(
+                mapped_products.map((i) => i.category_id),
+            );
             for (const group of categories) {
                 map[group] = mapped_products.filter(
                     (i) => i.category_id === group,

apps/concierge/src/app/staff/emergency-contact-modal.component.ts

@@ -16,24 +16,17 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
-import {
-    i18n,
-    nextValueFrom,
-    notifyError,
-    notifySuccess,
-    OrganisationService,
-    randomString,
-} from '@placeos/common';
+import { OrganisationService } from '@placeos/common';
 import {
     CustomTooltipComponent,
     IconComponent,
     TranslatePipe,
 } from '@placeos/components';
 import { UserSearchFieldComponent } from '@placeos/form-fields';
-import { showMetadata, updateMetadata } from '@placeos/ts-client';
-import { BehaviorSubject, combineLatest } from 'rxjs';
-import { filter, map, shareReplay, switchMap } from 'rxjs/operators';
-import { EmergencyContact } from './emergency-contacts.component';
+import {
+    EmergencyContact,
+    EmergencyContactsService,
+} from './emergency-contacts.service';
 
 @Component({
     selector: 'emergency-contact-modal',
@@ -106,7 +99,29 @@ import { EmergencyContact } from './emergency-contacts.component';
                         </div>
                     </div>
                     <div class="flex flex-col">
-                        <label for="email">{{
+                        <label for="zone">{{
+                            'RESOURCE.LEVEL' | translate
+                        }}</label>
+                        <mat-form-field appearance="outline">
+                            <mat-select
+                                formControlName="zone"
+                                [placeholder]="
+                                    'COMMON.LEVEL_SELECT' | translate
+                                "
+                            >
+                                <mat-option value="">{{
+                                    'COMMON.LEVEL_ANY' | translate
+                                }}</mat-option>
+                                @for (level of levels | async; track level.id) {
+                                    <mat-option [value]="level.id">
+                                        {{ level.display_name || level.name }}
+                                    </mat-option>
+                                }
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                    <div class="flex flex-col">
+                        <label for="roles">{{
                             'APP.CONCIERGE.CONTACTS_ROLES' | translate
                         }}</label>
                         <div class="flex items-center space-x-4">
@@ -122,10 +137,7 @@ import { EmergencyContact } from './emergency-contacts.component';
                                             | translate
                                     "
                                 >
-                                    @for (
-                                        role of (data | async)?.roles || [];
-                                        track $index
-                                    ) {
+                                    @for (role of roles | async; track $index) {
                                         @if (role) {
                                             <mat-option [value]="role">
                                                 {{ role }}
@@ -166,7 +178,7 @@ import { EmergencyContact } from './emergency-contacts.component';
             <footer
                 class="flex items-center justify-end border-t border-base-200 px-4 py-2"
             >
-                <button btn matRipple class="w-32" (click)="save()">
+                <button btn matRipple class="w-48" (click)="save()">
                     {{ 'COMMON.SAVE' | translate }}
                 </button>
             </footer>
@@ -210,23 +222,16 @@ export class EmergencyContactModalComponent {
     private _dialog_ref =
         inject<MatDialogRef<EmergencyContactModalComponent>>(MatDialogRef);
     private _org = inject(OrganisationService);
-
-    private _changes = new BehaviorSubject(0);
+    private _contacts_service = inject(EmergencyContactsService);
 
     public loading = signal(false);
     public role_name: string;
     public readonly contact?: EmergencyContact = this._data;
-    public readonly data = combineLatest([
-        this._org.active_building,
-        this._changes,
-    ]).pipe(
-        filter(([bld]) => !!bld),
-        switchMap(([bld]) => showMetadata(bld.id, 'emergency_contacts')),
-        map(({ details }) => (details as any) || { roles: [], contacts: [] }),
-        shareReplay(1),
-    );
+    public readonly roles = this._contacts_service.roles$;
     public readonly form = new FormGroup({
-        id: new FormControl(this._data?.id || `contact-${randomString(8)}`),
+        id: new FormControl(
+            this._data?.id || this._contacts_service.generateContactId(),
+        ),
         name: new FormControl(this._data?.name || ''),
         email: new FormControl(this._data?.email || ''),
         phone: new FormControl(this._data?.phone || ''),
@@ -238,23 +243,12 @@ export class EmergencyContactModalComponent {
 
     private readonly _tooltip = viewChild(CustomTooltipComponent);
 
-    public async addRole() {
+    public async addRole(): Promise<void> {
         if (!this.role_name) return;
         this._tooltip().close();
         this.loading.set(true);
         this._dialog_ref.disableClose = true;
-        const data: any = await nextValueFrom(this.data);
-        await updateMetadata(this._org.building.id, {
-            name: 'emergency_contacts',
-            description: 'Emergency Contacts',
-            details: {
-                roles: [...(data.roles || []), this.role_name].filter(
-                    (_) => !!_,
-                ),
-                contacts: data.contacts,
-            },
-        }).toPromise();
-        this._changes.next(0);
+        await this._contacts_service.addRole(this.role_name);
         this.form.patchValue({
             roles: [...(this.form.value.roles || []), this.role_name],
         });
@@ -263,40 +257,30 @@ export class EmergencyContactModalComponent {
         this._dialog_ref.disableClose = false;
     }
 
-    public setUser(user: any) {
+    public setUser(user: any): void {
         this.form.patchValue({
             name: user?.name,
             email: user?.email,
             phone: user?.phone,
         });
     }
 
-    public async save() {
+    public async save(): Promise<void> {
         this.loading.set(true);
         this._dialog_ref.disableClose = true;
-        const data: any = await nextValueFrom(this.data);
-        const contacts = data?.contacts || [];
-        const new_contacts = [
-            ...contacts.filter((_) => _.id !== this.contact?.id),
-            this.form.value,
-        ].sort((a, b) => a.name.localeCompare(b.name));
-        await updateMetadata(this._org.building.id, {
-            name: 'emergency_contacts',
-            description: 'Emergency Contacts',
-            details: { roles: data.roles || [], contacts: new_contacts },
-        })
-            .toPromise()
-            .catch((e) => {
-                this._dialog_ref.disableClose = false;
-                this.loading.set(false);
-                notifyError(
-                    i18n('APP.CONCIERGE.CONTACTS_SAVE_ERROR', { error: e }),
-                );
-                throw e;
-            });
+        const contact: EmergencyContact = {
+            id: this.form.value.id,
+            name: this.form.value.name,
+            email: this.form.value.email,
+            phone: this.form.value.phone,
+            zone: this.form.value.zone,
+            roles: this.form.value.roles || [],
+        };
+        const success = await this._contacts_service.saveContact(contact);
         this._dialog_ref.disableClose = false;
-        notifySuccess(i18n('APP.CONCIERGE.CONTACTS_SAVE_SUCCESS'));
         this.loading.set(false);
-        this._dialog_ref.close();
+        if (success) {
+            this._dialog_ref.close();
+        }
     }
 }

apps/concierge/src/app/staff/emergency-contacts.component.ts

@@ -1,45 +1,32 @@
 import { Clipboard } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import {
-    nextValueFrom,
-    notifySuccess,
-    OrganisationService,
-} from '@placeos/common';
+import { notifySuccess, OrganisationService } from '@placeos/common';
 import {
     IconComponent,
     openConfirmModal,
     SimpleTableComponent,
     TranslatePipe,
 } from '@placeos/components';
-import { showMetadata, updateMetadata } from '@placeos/ts-client';
 import { BehaviorSubject, combineLatest } from 'rxjs';
-import { filter, map, shareReplay, switchMap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { ApplicationSidebarComponent } from '../ui/app-sidebar.component';
 import { ApplicationTopbarComponent } from '../ui/app-topbar.component';
 import { EmergencyContactModalComponent } from './emergency-contact-modal.component';
+import {
+    EmergencyContact,
+    EmergencyContactsService,
+} from './emergency-contacts.service';
 import { RoleManagementModalComponent } from './role-management-modal.component';
 
-export interface EmergencyContact {
-    id: string;
-    email: string;
-    name: string;
-    phone: string;
-    roles: string[];
-    zone: string;
-}
-
-export interface EmergencyContactData {
-    contacts: EmergencyContact[];
-    roles: string[];
-}
+export { EmergencyContact } from './emergency-contacts.service';
 
 @Component({
     selector: '[app-emergency-contacts]',
@@ -245,26 +232,17 @@ export interface EmergencyContactData {
         TranslatePipe,
     ],
 })
-export class EmergencyContactsComponent {
+export class EmergencyContactsComponent implements OnInit {
     private _org = inject(OrganisationService);
     private _dialog = inject(MatDialog);
     private _clipboard = inject(Clipboard);
-
-    private _change = new BehaviorSubject<number>(0);
+    private _contacts_service = inject(EmergencyContactsService);
 
     public search = '';
     public readonly role_filter = new BehaviorSubject<string>('');
-    public readonly data = combineLatest([
-        this._org.active_building,
-        this._change,
-    ]).pipe(
-        filter(([bld]) => !!bld),
-        switchMap(([bld]) => showMetadata(bld.id, 'emergency_contacts')),
-        map(({ details }) => (details as any) || { roles: [], contacts: [] }),
-        shareReplay(1),
-    );
-    public readonly roles = this.data.pipe(map((_) => _?.roles || []));
-    public readonly contacts = this.data.pipe(map((_) => _?.contacts || []));
+    public readonly data$ = this._contacts_service.data$;
+    public readonly roles = this._contacts_service.roles$;
+    public readonly contacts = this._contacts_service.contacts$;
     public readonly filtered_contacts = combineLatest([
         this.contacts,
         this.role_filter,
@@ -274,24 +252,51 @@ export class EmergencyContactsComponent {
         ),
     );
 
+    public ngOnInit(): void {
+        // Check if migration from metadata is needed
+        this.checkMigration();
+    }
+
+    private async checkMigration(): Promise<void> {
+        const needs_migration = await this._contacts_service.needsMigration();
+        if (needs_migration) {
+            const result = await openConfirmModal(
+                {
+                    title: 'Migrate Emergency Contacts',
+                    content:
+                        'Emergency contacts data from the old system was found. Would you like to migrate it to the new system?',
+                    icon: { content: 'sync' },
+                },
+                this._dialog,
+            );
+            if (result.reason === 'done') {
+                result.loading('Migrating contacts...');
+                await this._contacts_service.migrateFromMetadata();
+                result.close();
+            } else {
+                result.close();
+            }
+        }
+    }
+
     public readonly copyToClipboard = (id: string) => {
         const success = this._clipboard.copy(id);
         if (success) notifySuccess("User's email copied to clipboard.");
     };
 
-    public manageRoles() {
+    public manageRoles(): void {
         const ref = this._dialog.open(RoleManagementModalComponent, {});
-        ref.afterClosed().subscribe(() => this._change.next(Date.now()));
+        ref.afterClosed().subscribe(() => this._contacts_service.refresh());
     }
 
-    public editContact(contact?: EmergencyContact) {
+    public editContact(contact?: EmergencyContact): void {
         const ref = this._dialog.open(EmergencyContactModalComponent, {
             data: contact,
         });
-        ref.afterClosed().subscribe(() => this._change.next(Date.now()));
+        ref.afterClosed().subscribe(() => this._contacts_service.refresh());
     }
 
-    public async removeContact(contact: EmergencyContact) {
+    public async removeContact(contact: EmergencyContact): Promise<void> {
         const result = await openConfirmModal(
             {
                 title: 'Remove Emergency Contact',
@@ -302,17 +307,7 @@ export class EmergencyContactsComponent {
         );
         if (result.reason !== 'done') return;
         result.loading('Removing contact...');
-        const data: any = await nextValueFrom(this.data);
-        const new_contacts = (data?.contacts || []).filter(
-            (_) => _.id !== contact.id,
-        );
-        await updateMetadata(this._org.building.id, {
-            name: 'emergency_contacts',
-            description: 'Emergency Contacts',
-            details: { roles: data.roles, contacts: new_contacts },
-        }).toPromise();
+        await this._contacts_service.deleteContact(contact.id);
         result.close();
-        this._change.next(Date.now());
-        notifySuccess('Successfully removed emergency contact.');
     }
 }