Added more staff data

apps/dafa-web/src/app/data/models/agency.model.ts

@@ -0,0 +1,12 @@
+export interface Agency {
+  id: string;
+  name: string;
+  kaNumber: number;
+  address: {
+    street: string;
+    houseNumber: number;
+    postalCode: number;
+    city: string;
+    kommun: string;
+  };
+}

apps/dafa-web/src/app/data/models/staff.model.ts

@@ -1,3 +1,6 @@
+import { Agency } from '@dafa-models/agency.model';
+import { Participant } from './participant.model';
+
 export interface Staff {
   id: string;
   staffId: string;
@@ -19,4 +22,6 @@ export interface StaffDetail extends Staff {
   phone: string;
   email: string;
   ssn: string;
+  agencies: Agency[];
+  participants: Participant[];
 }

apps/dafa-web/src/app/pages/administration/pages/staff-card/staff-card.component.html

@@ -17,9 +17,13 @@
           <dt>Personal-ID</dt>
           <dd>{{ detailedStaffData.staffId || '' }}</dd>
           <dt>Telefon arbete</dt>
-          <dd>{{ detailedStaffData.phone || '' }}</dd>
+          <dd *ngIf="detailedStaffData.phone; else emptyDD">
+            <a [attr.href]="'tel:' + detailedStaffData.phone">{{ detailedStaffData.phone }}</a>
+          </dd>
           <dt>Mailadress arbete</dt>
-          <dd>{{ detailedStaffData.email || '' }}</dd>
+          <dd *ngIf="detailedStaffData.email; else emptyDD">
+            <a [attr.href]="'mailto:' + detailedStaffData.email">{{ detailedStaffData.email }}</a>
+          </dd>
         </dl>
       </div>
 
@@ -47,6 +51,61 @@
           <dd>{{ detailedStaffData.languages?.join(', ') }}</dd>
         </dl>
       </div>
+
+      <div class="staff-card__column">
+        <h2>Utförande verksamhet</h2>
+
+        <ul *ngIf="detailedStaffData.agencies?.length" class="staff-card__agencies">
+          <li *ngFor="let agency of detailedStaffData.agencies" class="staff-card__agency">
+            <h3>{{ agency.name }}</h3>
+            <dl>
+              <dt>KA-nummer</dt>
+              <dd>{{ agency.kaNumber }}</dd>
+              <dt>Adress</dt>
+              <dd>{{ agency.address.street }} {{ agency.address.houseNumber }}</dd>
+              <dd>{{ agency.address.postalCode }} {{ agency.address.city }}</dd>
+            </dl>
+          </li>
+        </ul>
+      </div>
+
+      <div class="staff-card__column">
+        <digi-ng-layout-expansion-panel>
+          <h3 style="margin-bottom: 0" data-slot-trigger>
+            Tilldelade deltagare ({{ detailedStaffData.participants.length }})
+          </h3>
+          <ng-container *ngIf="detailedStaffData.participants.length; else noParticipantsInfo">
+            <ul class="staff-card__participants">
+              <li *ngIf="detailedStaffData.participants.length > 1" class="staff-card__participant">
+                <digi-form-checkbox
+                  af-variation="primary"
+                  af-label="Välj alla"
+                  af-value="all"
+                  [afChecked]="pendingSelectedParticipants.length"
+                  [afIndeterminate]="pendingSelectedParticipants.length !== detailedStaffData.participants.length"
+                  (afOnChange)="
+                    handleChangeAllParticipants(detailedStaffData.participants, $event.detail.target.checked)
+                  "
+                ></digi-form-checkbox>
+              </li>
+              <li *ngFor="let participant of detailedStaffData.participants" class="staff-card__participant">
+                <digi-form-checkbox
+                  af-variation="primary"
+                  [afLabel]="participant.fullName + ' - ' + participant.id"
+                  [afValue]="participant.id"
+                  [afChecked]="pendingSelectedParticipants.includes(participant.id)"
+                  (afOnChange)="handleChangeParticipant(participant.id, $event.detail.target.checked)"
+                ></digi-form-checkbox>
+              </li>
+            </ul>
+
+            <digi-button af-size="s" (afOnClick)="handleChangeStaff()">Byt handledare</digi-button>
+          </ng-container>
+          <ng-template #noParticipantsInfo>
+            <p>Inga deltagare har kopplats till {{ detailedStaffData.fullName }}.</p>
+          </ng-template>
+        </digi-ng-layout-expansion-panel>
+      </div>
     </div>
   </digi-typography>
 </section>

apps/dafa-web/src/app/pages/administration/pages/staff-card/staff-card.component.scss

@@ -1,11 +1,11 @@
 @import 'variables/gutters';
+@import 'mixins/list';
 
 .staff-card {
   &__contents {
     display: flex;
+    flex-direction: column;
     gap: $digi--layout--gutter--l;
-    padding: $digi--layout--gutter--l;
-    background-color: var(--digi--ui--color--background--secondary);
 
     h2 {
       margin-top: 0;
@@ -14,6 +14,7 @@
 
   &__column {
     width: 100%;
+    max-width: var(--digi--typography--text--max-width);
   }
 
   dl {
@@ -35,4 +36,33 @@
   dd {
     grid-column: 2;
   }
+
+  &__agencies {
+    @include dafa__reset-list;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  &__agency {
+    border: 1px solid #333;
+    padding: var(--digi--layout--gutter);
+
+    h3 {
+      margin-top: 0;
+    }
+  }
+
+  &__participants {
+    @include dafa__reset-list;
+    margin: var(--digi--layout--gutter) 0;
+  }
+
+  &__participant {
+    padding: var(--digi--layout--gutter--s) var(--digi--layout--gutter--xs);
+
+    &:nth-child(even) {
+      background-color: var(--digi--ui--color--background--tertiary);
+    }
+  }
 }

apps/dafa-web/src/app/pages/administration/pages/staff-card/staff-card.component.ts

@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { UnsubscribeDirective } from '@dafa-directives/unsubscribe.directive';
+import { Participant } from '@dafa-models/participant.model';
 import { Staff } from '@dafa-models/staff.model';
 import { StaffService } from '@dafa-services/api/staff.service';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 @Component({
   selector: 'dafa-staff-card',
@@ -13,6 +14,7 @@ import { Observable } from 'rxjs';
 })
 export class StaffCardComponent extends UnsubscribeDirective {
   detailedStaffData$: Observable<Staff>;
+  private _pendingSelectedParticipants$ = new BehaviorSubject<string[]>([]);
 
   constructor(private activatedRoute: ActivatedRoute, private staffService: StaffService) {
     super();
@@ -21,7 +23,30 @@ export class StaffCardComponent extends UnsubscribeDirective {
       this.activatedRoute.params.subscribe(({ id }) => {
         console.log(id);
         this.detailedStaffData$ = this.staffService.getDetailedStaffData(id);
-      })
+      }),
+      this._pendingSelectedParticipants$.subscribe(ids => console.log(ids))
     );
   }
+
+  get pendingSelectedParticipants(): string[] {
+    return this._pendingSelectedParticipants$.getValue();
+  }
+
+  handleChangeStaff(): void {
+    console.log('change staff: ', this.pendingSelectedParticipants);
+  }
+
+  handleChangeParticipant(id: string, checked: boolean): void {
+    const currentPendingSelectedParticipants = this.pendingSelectedParticipants;
+
+    if (checked) {
+      this._pendingSelectedParticipants$.next([...this.pendingSelectedParticipants, id]);
+    } else {
+      this._pendingSelectedParticipants$.next(currentPendingSelectedParticipants.filter(currentId => currentId !== id));
+    }
+  }
+
+  handleChangeAllParticipants(participants: Participant[], checked: boolean): void {
+    this._pendingSelectedParticipants$.next(checked ? participants.map(participant => participant.id) : []);
+  }
 }

apps/dafa-web/src/app/pages/administration/pages/staff-card/staff-card.module.ts

@@ -1,3 +1,4 @@
+import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
 import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -12,6 +13,7 @@ import { StaffCardComponent } from './staff-card.component';
     CommonModule,
     RouterModule.forChild([{ path: '', component: StaffCardComponent }]),
     DigiNgSkeletonBaseModule,
+    DigiNgLayoutExpansionPanelModule,
     LocalDatePipeModule,
   ],
 })

apps/dafa-web/src/app/services/api/participants.service.ts

@@ -21,16 +21,9 @@ function filterParticipants(participants: Participant[], searchFilter: string):
   providedIn: 'root',
 })
 export class ParticipantsService {
-  private _allParticipants$: Observable<Participant[]> = this.httpClient
-    .get<Participant[]>(`${environment.apiBase}/participants`)
-    .pipe(
-      map(participants =>
-        participants.map(participant => ({
-          ...participant,
-          fullName: `${participant.firstName} ${participant.lastName}`,
-        }))
-      )
-    );
+  private _allParticipants$: Observable<Participant[]> = this.httpClient.get<Participant[]>(
+    `${environment.apiBase}/participants`
+  );
   private _activeParticipantsSortBy$ = new BehaviorSubject<SortBy | null>({ key: 'handleBefore', reverse: false });
   public activeParticipantsSortBy$: Observable<SortBy> = this._activeParticipantsSortBy$.asObservable();
   private _followUpParticipantsSortBy$ = new BehaviorSubject<SortBy | null>({ key: 'handleBefore', reverse: false });

apps/dafa-web/src/app/services/api/staff.service.ts

@@ -19,14 +19,9 @@ function filterStaff(staff: Staff[], searchFilter: string): Staff[] {
   providedIn: 'root',
 })
 export class StaffService {
-  private _allStaff$: Observable<Staff[]> = this.httpClient.get<Staff[]>(`${environment.apiBase}/staff`).pipe(
-    map(staff =>
-      staff.map(person => ({
-        ...person,
-        fullName: `${person.firstName} ${person.lastName}`,
-      }))
-    )
-  );
+  private _allStaff$: Observable<Staff[]> = this.httpClient.get<Staff[]>(`${environment.apiBase}/staff`, {
+    params: { _embed: 'participants' },
+  });
 
   private _staffSortBy$ = new BehaviorSubject<SortBy | null>({ key: 'fullName', reverse: false });
   public staffSortBy$: Observable<SortBy> = this._staffSortBy$.asObservable();
@@ -44,12 +39,7 @@ export class StaffService {
   );
 
   public getDetailedStaffData(id: string): Observable<Staff> {
-    return this.httpClient.get<Staff>(`${environment.apiBase}/staff/${id}`).pipe(
-      map(staff => ({
-        ...staff,
-        fullName: `${staff.firstName} ${staff.lastName}`,
-      }))
-    );
+    return this.httpClient.get<Staff>(`${environment.apiBase}/staff/${id}`, { params: { _embed: 'participants' } });
   }
 
   public setSearchFilter(value: string) {