Commit af6fb875 authored by mechtelm's avatar mechtelm
Browse files

Add staff member list update if name changed

Introduce new event that bubbles from main data component, catched by staff list (muy wow).
parent a6f9c9d7
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;
......
......@@ -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;
}
......
<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"
......
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 });
}
......
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})]
);
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment