Add staff member list update if name changed

Introduce new event that bubbles from main data component, catched by staff list (muy wow).

apps/frontend/src/app/staff-list/main-data/main-data.component.ts

-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, ElementRef, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from "rxjs";
 import {StaffListService} from "../staff-list.service";
 import {BackendService} from "../backend.service";
@@ -23,7 +23,8 @@ export class MainDataComponent implements OnInit, OnDestroy {
     public staffListService: StaffListService,
     private backendService: BackendService,
     private changeMainDataDialog: MatDialog,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    private elRef: ElementRef
   ) {}
 
   ngOnInit(): void {
@@ -51,6 +52,7 @@ export class MainDataComponent implements OnInit, OnDestroy {
         if ((typeof result !== 'undefined') && this.mainData) {
           if (result !== false) {
             this.appService.dataLoading = true;
+            let reloadStaffList = false;
             const newName: string = (<FormGroup>result).get('name')?.value;
             const newFirstName: string = (<FormGroup>result).get('firstName')?.value;
             const newTitle: string = (<FormGroup>result).get('title')?.value;
@@ -66,8 +68,14 @@ export class MainDataComponent implements OnInit, OnDestroy {
               (<FormGroup>result).get('weekDayTu')?.value, (<FormGroup>result).get('weekDayWe')?.value,
               (<FormGroup>result).get('weekDayTh')?.value, (<FormGroup>result).get('weekDayFr')?.value);
             const changedData: StaffMemberMainDto = {id: this.mainData.id};
-            if (newName !== this.mainData.name) changedData.name = newName;
-            if (newFirstName !== this.mainData.firstName) changedData.firstName = newFirstName;
+            if (newName !== this.mainData.name) {
+              changedData.name = newName;
+              reloadStaffList = true;
+            }
+            if (newFirstName !== this.mainData.firstName) {
+              changedData.firstName = newFirstName;
+              reloadStaffList = true;
+            }
             if (newSex !== this.mainData.sex) changedData.sex = newSex;
             if (newTitle !== this.mainData.title) changedData.title = newTitle;
             if (newDateOfBirth !== this.mainData.dateOfBirth) changedData.dateOfBirth = newDateOfBirth;
@@ -75,12 +83,16 @@ export class MainDataComponent implements OnInit, OnDestroy {
             if (newContractType !== this.mainData.contractType) changedData.contractType = newContractType;
             if (newContractStart !== this.mainData.contractStart) changedData.contractStart = newContractStart;
             if (newPayrollId !== this.mainData.payrollId) changedData.payrollId = newPayrollId;
-            if (newContractEnd !== this.mainData.contractEnd) changedData.contractEnd = newContractEnd;
+            if (newContractEnd !== this.mainData.contractEnd) {
+              changedData.contractEnd = newContractEnd;
+              reloadStaffList = true;
+            }
             if (newContractWeekDays !== this.mainData.contractWeekDays) changedData.contractWeekDays = newContractWeekDays;
             this.backendService.changeMainData(changedData).subscribe(
               respOk => {
                 if (respOk) {
                   this.snackBar.open('Stammdaten geändert', '', {duration: 1000});
+                  if (reloadStaffList) this.staffListService.emitSuperChangedEvent(this.elRef);
                   this.backendService.getStaffMemberMainData(
                     this.staffListService.selectedStaffMember$.getValue()).subscribe(staffMemberData => {
                     this.mainData = staffMemberData ? new StaffMember(staffMemberData) : null;

apps/frontend/src/app/staff-list/staff-list.component.css

@@ -63,10 +63,14 @@ mat-button-toggle {
   margin: 10px;
 }
 
-.date-all, .idm-all {
+.date-all {
   min-width: 80px;
   margin-left: 2px;
 }
+.idm-all {
+  min-width: 20px;
+  margin-left: 2px;
+}
 .date-yellow, .idm-yellow {
   background-color: yellow;
 }

apps/frontend/src/app/staff-list/staff-list.component.html

 <div class="staff-body" fxLayout="row" fxLayoutAlign="space-between stretch">
-  <div fxLayout="column" fxFlex="30%">
+  <div fxLayout="column" fxFlex="350px">
     <mat-nav-list fxFlex class="staff-list">
       <a mat-list-item fxLayout="column"
          *ngFor="let stM of staffListService.staffList"

apps/frontend/src/app/staff-list/staff-list.component.ts

-import {Component, OnInit, ViewChild, ViewChildren} from '@angular/core';
+import {Component, ElementRef, OnInit, ViewChild, ViewChildren} from '@angular/core';
 import {BackendService} from "./backend.service";
 import {StaffListService} from "./staff-list.service";
 import {MatTabNav} from "@angular/material/tabs";
@@ -32,28 +32,23 @@ export class StaffListComponent implements OnInit{
     private router: Router,
     private route: ActivatedRoute,
     private newStaffMemberDialog: MatDialog,
-    private backendService: BackendService
+    private backendService: BackendService,
+    private elRef: ElementRef
   ) {}
 
   ngOnInit(): void {
     setTimeout(() => {
+      this.elRef.nativeElement.addEventListener(this.staffListService.superDataChangedEventName,
+        () => {
+          this.updateStaffList(this.staffListService.selectedStaffMember$.getValue())
+      });
       this.updateStaffList().then(() => {
         this.routingSubscription = this.route.params.subscribe(params => {
           const staffMemberParam = params['m'];
           if (staffMemberParam) {
             const staffMemberId = Number(staffMemberParam)
             this.staffListService.selectedStaffMember$.next(staffMemberId);
-            const staffMemberElementId = `staffMember_${staffMemberId}`;
-            setTimeout(() => {
-              const listItemElement = document.getElementById(staffMemberElementId);
-              if (listItemElement) {
-                if (listItemElement.getBoundingClientRect().bottom > window.innerHeight) {
-                  listItemElement.scrollIntoView({ behavior: 'smooth', block: 'center'});
-                } else if (listItemElement.getBoundingClientRect().top < 0) {
-                  listItemElement.scrollIntoView({ behavior: 'smooth', block: 'center'});
-                }
-              }
-            }, 500);
+            this.scrollToStaffMember(staffMemberId);
           } else {
             this.staffListService.selectedStaffMember$.next(0);
           }
@@ -68,7 +63,9 @@ export class StaffListComponent implements OnInit{
         map(stResponse => {
           this.staffListService.staffList = stResponse;
           if (stResponse.length > 0) {
-            if (staffMemberToSelect) this.selectStaffMember(staffMemberToSelect);
+            if (staffMemberToSelect) {
+              this.selectStaffMember(staffMemberToSelect);
+            }
             return true
           } else {
             this.staffListService.selectedStaffMember$.next(0);
@@ -79,11 +76,30 @@ export class StaffListComponent implements OnInit{
       ))
   }
 
+  private scrollToStaffMember(staffMemberId: number): void {
+    const staffMemberElementId = `staffMember_${staffMemberId}`;
+    setTimeout(() => {
+      const listItemElement = document.getElementById(staffMemberElementId);
+      if (listItemElement) {
+        if (listItemElement.getBoundingClientRect().bottom > window.innerHeight) {
+          listItemElement.scrollIntoView({ behavior: 'smooth', block: 'center'});
+        } else if (listItemElement.getBoundingClientRect().top < 0) {
+          listItemElement.scrollIntoView({ behavior: 'smooth', block: 'center'});
+        }
+      }
+    }, 500);
+  }
+
   async selectStaffMember(staffMemberId?: number): Promise<boolean> {
     if (staffMemberId && staffMemberId > 0) {
-      const selectedTab = this.nav ? this.nav.selectedIndex : -1;
-      const routeSuffix = selectedTab >= 0 ? `/${this.navLinks[selectedTab].path}` : '';
-      return this.router.navigate([`${staffMemberId}${routeSuffix}`], { relativeTo: this.route.parent });
+      if (this.staffListService.selectedStaffMember$.getValue() === staffMemberId) {
+        this.scrollToStaffMember(staffMemberId);
+        return Promise.resolve(true)
+      } else {
+        const selectedTab = this.nav ? this.nav.selectedIndex : -1;
+        const routeSuffix = selectedTab >= 0 ? `/${this.navLinks[selectedTab].path}` : '';
+        return this.router.navigate([`${staffMemberId}${routeSuffix}`], { relativeTo: this.route.parent });
+      }
     } else {
       return this.router.navigate(['staff'], { relativeTo: this.route.root });
     }

apps/frontend/src/app/staff-list/staff-list.service.ts

-import { Injectable } from '@angular/core';
+import {ElementRef, Injectable} from '@angular/core';
 import {StaffMemberInListDto} from "@lib/dto";
 import {BehaviorSubject} from "rxjs";
 
@@ -8,6 +8,14 @@ import {BehaviorSubject} from "rxjs";
 export class StaffListService {
   selectedStaffMember$ = new BehaviorSubject<number>(0);
   staffList: StaffMemberInListDto[] = [];
+  superDataChangedEventName = 'superDataChangedEvent';
 
   constructor() { }
+
+  emitSuperChangedEvent(elementRef: ElementRef): void {
+    (elementRef.nativeElement as any)['dispatchEvent'].apply(
+      elementRef.nativeElement,
+      [new CustomEvent(this.superDataChangedEventName, {bubbles: true})]
+    );
+  }
 }