fix: add areaServed to person detail

src/app/modules/data/elements/title-card.component.html

@@ -16,7 +16,13 @@
   <ion-card-content>
     <ion-text color="dark">
       <h1>
+        <ng-container *ngIf="$any(item).honorificPrefix">{{
+          'honorificPrefix' | thingTranslate: item
+        }}</ng-container>
         {{ 'name' | thingTranslate: item }}
+        <ng-container *ngIf="$any(item).honorificSuffix">{{
+          'honorificSuffix' | thingTranslate: item
+        }}</ng-container>
       </h1>
     </ion-text>
     <div *ngIf="item.description">

src/app/modules/data/types/person/person-detail-content.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 StApps
+ * Copyright (C) 2019-2022 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -13,7 +13,14 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input} from '@angular/core';
-import {SCPerson} from '@openstapps/core';
+import {
+  SCContactPoint,
+  SCContactPointWithoutReferences,
+  SCPerson,
+  SCSearchQuery,
+  SCUuid,
+} from '@openstapps/core';
+import {DataProvider} from '../../data.provider';
 
 /**
  * TODO
@@ -23,8 +30,46 @@ import {SCPerson} from '@openstapps/core';
   templateUrl: 'person-detail-content.html',
 })
 export class PersonDetailContentComponent {
-  /**
-   * TODO
-   */
-  @Input() item: SCPerson;
+  private _item: SCPerson;
+
+  contactPoints: SCContactPoint[] | SCContactPointWithoutReferences[];
+
+  get item(): SCPerson {
+    return this._item;
+  }
+
+  @Input() set item(item: SCPerson) {
+    this._item = item;
+    if (item.workLocations) {
+      this.contactPoints = item.workLocations;
+      this.getContactPoints(item.workLocations).then(contactPoints => {
+        this.contactPoints = contactPoints;
+      });
+    }
+  }
+
+  constructor(private readonly dataProvider: DataProvider) {}
+
+  async getContactPoints(
+    workLocations: SCContactPointWithoutReferences[],
+  ): Promise<SCContactPoint[]> {
+    const query: {[uid in SCUuid]: SCSearchQuery} = {};
+    workLocations.map(workLocation => {
+      query[workLocation.uid] = {
+        filter: {
+          arguments: {
+            field: 'uid',
+            value: workLocation.uid,
+          },
+          type: 'value',
+        },
+      };
+    });
+
+    const contactPoints: SCContactPoint[] = Object.values(
+      await this.dataProvider.multiSearch(query),
+    ).map(result => result.data[0] as SCContactPoint);
+
+    return contactPoints;
+  }
 }

src/app/modules/data/types/person/person-detail-content.html

@@ -1,95 +1,41 @@
-<ion-card *ngIf="item.workLocations?.length > 0">
+<ng-container *ngIf="contactPoints">
+  <ion-card *ngFor="let contactPoint of contactPoints; let i = index">
     <ion-card-header>
-    {{ 'type' | thingTranslate: item.workLocations[0] | titlecase }}
+      <ng-container *ngIf="contactPoints.length > 1">{{ i + 1 }}.</ng-container>
+      {{ 'type' | thingTranslate: contactPoint | titlecase }}
     </ion-card-header>
     <ion-card-content>
-    <ng-container *ngIf="item.workLocations.length === 1">
-      <p *ngIf="item.workLocations[0].telephone">
-        {{
-          'telephone'
-            | propertyNameTranslate: item.workLocations[0]
-            | titlecase
-        }}:
-        <a [href]="'tel:' + item.workLocations[0].telephone">{{
-          item.workLocations[0].telephone
+      <p *ngIf="contactPoint.telephone">
+        {{ 'telephone' | propertyNameTranslate: contactPoint | titlecase }}:
+        <a [href]="'tel:' + contactPoint.telephone">{{
+          contactPoint.telephone
         }}</a>
       </p>
-      <p *ngIf="item.workLocations[0].email">
-        {{
-          'email' | propertyNameTranslate: item.workLocations[0] | titlecase
-        }}:
-        <a [href]="'mailto:' + item.workLocations[0].email">{{
-          item.workLocations[0].email
+      <p *ngIf="contactPoint.email">
+        {{ 'email' | propertyNameTranslate: contactPoint | titlecase }}:
+        <a [href]="'mailto:' + contactPoint.email">{{ contactPoint.email }}</a>
+      </p>
+      <p *ngIf="contactPoint.faxNumber">
+        {{ 'faxNumber' | propertyNameTranslate: contactPoint | titlecase }}:
+        {{ contactPoint.faxNumber }}
+      </p>
+      <p *ngIf="contactPoint.officeHours">
+        {{ 'officeHours' | propertyNameTranslate: contactPoint | titlecase }}:
+        {{ contactPoint.officeHours }}
+      </p>
+      <p *ngIf="contactPoint.url">
+        {{ 'url' | propertyNameTranslate: contactPoint | titlecase }}:
+        <a [href]="contactPoint.url">{{ contactPoint.url }}</a>
+      </p>
+      <p *ngIf="contactPoint.areaServed">
+        {{ 'areaServed' | propertyNameTranslate: contactPoint | titlecase }}:
+        <a [routerLink]="['/data-detail', contactPoint.areaServed.uid]">{{
+          contactPoint.areaServed.name
         }}</a>
       </p>
-      <p *ngIf="item.workLocations[0].faxNumber">
-        {{
-          'faxNumber'
-            | propertyNameTranslate: item.workLocations[0]
-            | titlecase
-        }}: {{ item.workLocations[0].faxNumber }}
-      </p>
-      <p *ngIf="item.workLocations[0].url">
-        {{ 'url' | propertyNameTranslate: item.workLocations[0] | titlecase }}:
-        <a [href]="item.workLocations[0].url">{{
-          item.workLocations[0].url
-        }}</a>
-      </p>
-      <p *ngIf="item.workLocations[0].areaServed">
-        {{
-          'areaServed'
-            | propertyNameTranslate: item.workLocations[0]
-            | titlecase
-        }}:
-        <a
-          [routerLink]="['/data-detail', item.workLocations[0].areaServed.uid]"
-          >{{ item.workLocations[0].areaServed.name }}</a
-        >
-      </p>
-    </ng-container>
-    <ion-slides
-      *ngIf="item.workLocations.length > 1"
-      pager="true"
-      class="work-locations"
-    >
-      <ion-slide *ngFor="let workLocation of item.workLocations">
-        <p *ngIf="workLocation.telephone">
-          {{
-            'telephone' | propertyNameTranslate: item.workLocation | titlecase
-          }}:
-          <a [href]="'tel:' + workLocation.telephone">{{
-            workLocation.telephone
-          }}</a>
-        </p>
-        <p style="display: block !important" *ngIf="workLocation.email">
-          {{ 'email' | propertyNameTranslate: item.workLocation | titlecase }}:
-          <a [href]="'mailto:' + workLocation.email">{{
-            workLocation.email
-          }}</a>
-        </p>
-        <p *ngIf="workLocation.faxNumber">
-          {{
-            'faxNumber' | propertyNameTranslate: item.workLocation | titlecase
-          }}: {{ workLocation.faxNumber }}
-        </p>
-        <p *ngIf="workLocation.url">
-          {{ 'url' | propertyNameTranslate: item.workLocation | titlecase }}:
-          <a [href]="workLocation.url">{{ workLocation.url }}</a>
-        </p>
-        <p *ngIf="workLocation.areaServed">
-          {{
-            'areaServed' | propertyNameTranslate: item.workLocation | titlecase
-          }}:
-          <a [routerLink]="['/data-detail', workLocation.areaServed.uid]">{{
-            workLocation.areaServed.name
-          }}</a>
-        </p>
-        <!-- Used for making the additional space, so that slide pager doesn't show over the text but under it -->
-        <!-- <div class="stapps-slide-bottom"></div> -->
-      </ion-slide>
-    </ion-slides>
     </ion-card-content>
   </ion-card>
+</ng-container>
 <stapps-simple-card
   *ngIf="item.jobTitles?.length > 0"
   [title]="'jobTitles' | propertyNameTranslate: item | titlecase"