arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(employee): Showing employee-data inside employee-card page. (TV-341)

Browse Source 
Squashed commit of the following:

commit 4fd71e0d0655a0d75dda59151ac74e2361f187bc
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 20 10:59:46 2021 +0200

    Updated RoleEnum and mock-data för roles

commit f05a93239727ce1245650ece3b48cf75dc7091ca
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 20 08:34:20 2021 +0200

    Fixed issue with mock-api

commit c31e94da6b90e442fd84c5113789db245be81c6d
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 20 08:26:14 2021 +0200

    Fixed issue with tjanster

commit a183a08f0446cdaea7d01c8935d88ac436b0438f
Merge: eb310c1 1e2d925
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 20 07:59:06 2021 +0200

    Merge branch 'develop' into feature/TV-341-erik

commit eb310c10bdf0f4b60032bdda97df75c19bdbf447
Merge: 877b68b fae7d9a
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Aug 20 07:21:39 2021 +0200

    Merged develop and fixed conflicts

commit 877b68b8827e89cfd230856c9d8247f1cd8db264
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Aug 19 15:01:55 2021 +0200

    Now fetching tjanster from mock-api

commit 1ecd26595b21ea46ce6fb0c193c6642f66250ae3
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Aug 19 14:24:11 2021 +0200

    Some more changes to employee-card

commit e42ae254e7aa7b994627fdccb7037493b116d6a2
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Aug 19 13:44:23 2021 +0200

    Added new enum Role and fixed some issues mapping roles inside employee-card

commit 7801831d83feae5ef5e5b92e6421b18863b2a1db
Merge: c78f3f8 d6e4666
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Aug 19 12:37:56 2021 +0200

    Merge branch 'develop' into feature/TV-341-fe-anpassa-personal-kortet-sa-att-den-ar-enligt-skiss

commit c78f3f886752477d2dbc4af20356252af4128440
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Thu Aug 19 11:19:56 2021 +0200

    Authorization

commit 9c043720a9cfa5fd6943013f643d948a50c8f135
Merge: 77d6a9c ffeb372
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Thu Aug 19 11:19:43 2021 +0200

    Merge branch 'develop' into feature/TV-341-fe-anpassa-personal-kortet-sa-att-den-ar-enligt-skiss

    # Conflicts:
    #	apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.scss
    #	apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts
    #	apps/mina-sidor-fa/src/app/shared/enums/employee-authorization.enum.ts

commit 77d6a9c600e6b42e97fa5431ed37ad430c5febd3
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Aug 18 10:22:45 2021 +0200

    Moved subscription, added icons, refactured markup

commit b43c18e28b5aabb8115fa659a98b4ae8c0a7bf40
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Aug 17 10:50:02 2021 +0200

    unsubscribed

commit 9f48cddc75872fc3f740c53de998cd54666b0b1d
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Aug 16 16:40:08 2021 +0200

    Unsubscription behöver läggas till efter genomgång av hur unsubscribeOnDestroy fungerar

commit b2cef346f18482e72c11c09d0a6e629370d01bd5
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Aug 16 16:37:13 2021 +0200

    Authorization

commit 5fe0b5d5fc725551f9e794cbaa70dc0f077f8717
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Fri Aug 13 15:46:50 2021 +0200

    - Changed first h2 to h3
    - Changed link to routerLink

commit fd1cb3c6249535ce84e61df035cae63352b1b00b
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Fri Aug 13 11:53:36 2021 +0200

    Amends after PR

commit 13e9881e3680bd829736205b3fef57b2228638d5
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Aug 11 16:19:36 2021 +0200

    Employee-card amends to look more like the sketch.
This commit is contained in:
Erik Tiekstra
2021-08-20 11:01:23 +02:00
parent d4447933f8
commit e6f80901ea
22 changed files with 307 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html
View File

@@ -1,93 +1,97 @@
<msfa-layout>
<section class="employee-card">
<digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef">
<div class="employee-card__editcontainer">
<h1>{{ detailedEmployeeData.fullName }}</h1>
<span class="employee-card__editbutton">
<a href="./administration/redigera-konto/{{detailedEmployeeData.id}}">Redigera</a>
</span>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus accusantium sit, reprehenderit, esse suscipit
quis similique harum est eum eveniet aspernatur delectus magni asperiores porro aliquam voluptate! Architecto,
perferendis commodi.
</p>
<digi-typography *ngIf="employee$ | async as employee; else loadingRef">
<header class="employee-card__header">
<a class="employee-card__edit-button" [routerLink]="['/administration/andra-konto', employee.id]">Redigera</a>
<h1>{{ employee.fullName }}</h1>
</header>
<p>Här kan du se och ändra personalkontots behörigheter. Ändra behörighet genom att klicka på redigera.</p>
<div class="employee-card__contents">
<div class="employee-card__column">
<h2>Kontaktuppgifter</h2>
<dl>
<dt>Namn</dt>
<dd *ngIf="detailedEmployeeData.fullName; else emptyDD">{{ detailedEmployeeData.fullName }}</dd>
<h2>Personuppgifter</h2>
<dl class="employee-card__description-list">
<dt>Förnamn</dt>
<dd *ngIf="employee.firstName; else emptyDD">{{ employee.firstName }}</dd>
<dt>Efternamn</dt>
<dd *ngIf="employee.lastName; else emptyDD">{{ employee.lastName }}</dd>
<dt>Personnummer</dt>
<dd *ngIf="detailedEmployeeData.ssn; else emptyDD">
<dd *ngIf="employee.ssn; else emptyDD">
<msfa-hide-text
symbols="********-****"
[changingText]="detailedEmployeeData.ssn"
[changingText]="employee.ssn"
ariaLabelType="personnummer"
></msfa-hide-text>
</dd>
<dt>E-postadress</dt>
<dd *ngIf="employee.email; else emptyDD">
<a href="mailto:{{employee.email}}">{{employee.email}}</a>
</dd>
</dl>
</div>
<div class="employee-card__column">
<h2>Tjänst</h2>
<ul class="employee-card__list">
<ng-container *ngIf="detailedEmployeeData.services.length; else emptyDD">
<li class="employee-card__column--listitem" *ngFor="let service of detailedEmployeeData.services">
{{ service.name }}
</li>
</ng-container>
<ul class="employee-card__list" *ngIf="employee.tjanster.length; else emptyText">
<li *ngFor="let tjanst of employee.tjanster">{{ tjanst.name }}</li>
</ul>
</div>
<div class="employee-card__organizations">
<h2>Utförande verksamheter och utförande adresser</h2>
<ul class="employee-card__list" *ngIf="detailedEmployeeData.organizations?.length">
<li class="employee-card__list" *ngFor="let organization of detailedEmployeeData.organizations">
{{ organization.name }}
<ul>
<li class="employee-card__listitem--indent">
{{ organization.address.street }} {{ organization.address.postalCode }} {{
organization.address.houseNumber }} {{ organization.address.city }}
</li>
</ul>
<p>TODO: Behöver göras så en utförande adress hamnar under rätt utförande verksamhet.</p>
<h3>Utförande verksamheter</h3>
<ul
class="employee-card__list employee-card__list--secondary"
*ngIf="employee.utforandeVerksamhetIds.length; else emptyText"
>
<li class="employee-card__list" *ngFor="let utforandeVerksamhet of employee.utforandeVerksamhetIds">
{{ utforandeVerksamhet }}
</li>
</ul>
<h3>Utförande adresser</h3>
<ul
class="employee-card__list employee-card__list--secondary"
*ngIf="employee.utforandeAdressIds.length; else emptyText"
>
<li class="employee-card__list" *ngFor="let utforandeAdress of employee.utforandeAdressIds">
{{ utforandeAdress }}
</li>
</ul>
</div>
<div class="employee-card__column">
<h2>Behörigheter</h2>
<ul class="employee-card__list">
<ng-container *ngIf="detailedEmployeeData.authorizations.length; else emptyDD">
<li *ngFor="let authorization of detailedEmployeeData.authorizations">{{ authorization.name }}</li>
</ng-container>
<li *ngFor="let role of allRoles">
<digi-icon-check-circle
*ngIf="employee.roles.includes(role.type); else unauthorized"
class="employee-card__authorization-icon employee-card__authorization-icon--authorized"
></digi-icon-check-circle>
<ng-template #unauthorized>
<digi-icon-x-button
class="employee-card__authorization-icon employee-card__authorization-icon--unauthorized"
></digi-icon-x-button>
</ng-template>
{{role.name}}
</li>
</ul>
</div>
</div>
<p></p>
</digi-typography>
<div class="employee-card__footer">
<span class="employee-card__secondarybutton">
<a href="./administration/personal">Tillbaka till personallistan</a>
</span>
<span class="employee-card__primarybutton">
<a href="./administration/skapa-konto">Skapa nytt konto</a>
</span>
</div>
<footer class="employee-card__footer">
<msfa-back-link [route]="['/administration/personal']">Tillbaka till deltagarlistan</msfa-back-link>
</footer>
</section>
<ng-template #loadingRef>
<digi-ng-skeleton-base [afCount]="3" afText="Laddar personalkortet"></digi-ng-skeleton-base>
</ng-template>
<ng-template #emptyDD class="employee-card__list">
<dd>
<span aria-hidden="true">-</span>
<span class="msfa__a11y-sr-only">Info saknas</span>
</dd>
</ng-template>
<ng-template #emptyText>
<p>
<span aria-hidden="true">-</span>
<span class="msfa__a11y-sr-only">Info saknas</span>
</p>
</ng-template>
</msfa-layout>

97
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.scss
View File

@@ -7,17 +7,7 @@
&__contents {
display: flex;
flex-direction: column;
gap: $digi--layout--gutter--xl $digi--layout--gutter--l;
}
&__editcontainer {
display: flex;
justify-content: space-between;
align-items: center;
}
&__h2 {
margin-top: 0;
gap: $digi--layout--gutter--l $digi--layout--gutter--l;
}
&__column {
@@ -28,65 +18,60 @@
&__organizations {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
&__header,
&__footer {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
}
&__footer {
margin-top: 5rem;
margin-top: $digi--layout--gutter--l;
}
//LISTS
&__description-list {
dd {
margin: 0;
}
dt {
font-weight: var(--digi--typography--font-weight--semibold);
}
dd {
margin-bottom: 0.5rem;
}
}
&__list {
@include msfa__reset-list;
}
&__listitem--indent {
@include msfa__reset-list;
margin-left: 1rem;
}
&__description {
margin-left: 0.1rem;
grid-column: 1;
}
&__term {
margin: 0;
grid-column: 1;
font-weight: var(--digi--typography--font-weight--semibold);
}
//BUTTONS
&__primarybutton {
a {
@include msfa_buttontemplate(
$msfa-button--background--primary,
$msfa-button--text--primary,
$msfa-button--hover--primary
);
li {
margin-bottom: 0.5rem;
display: flex;
}
}
&__secondarybutton {
a {
@include msfa_buttontemplate(
$msfa-button--background--secondary,
$msfa-button--text--secondary,
$msfa-button--hover--secondary
);
}
&__edit-button {
@include msfa-button-template(
$msfa-button--background--secondary,
$msfa-button--text--secondary,
$msfa-button--hover--secondary
);
width: var(--digi-button--width);
}
&__editbutton {
a {
@include msfa_buttontemplate(
$msfa-button--background--secondary,
$msfa-button--text--secondary,
$msfa-button--hover--secondary
);
width: var(--digi-button--width);
&__authorization-icon {
margin-right: var(--digi--layout--gutter--s);
&--authorized {
color: var(--digi--ui--color--border--success);
}
&--unauthorized {
color: var(--digi--ui--color--border--error);
}
}
}

35
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.ts
View File

@@ -1,10 +1,10 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RoleEnum } from '@msfa-enums/role.enum';
import { Employee } from '@msfa-models/employee.model';
import { Participant } from '@msfa-models/participant.model';
import { Role } from '@msfa-models/role.model';
import { EmployeeService } from '@msfa-services/api/employee.service';
import { BehaviorSubject, Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
@Component({
selector: 'msfa-employee-card',
@@ -14,35 +14,14 @@ import { map, switchMap } from 'rxjs/operators';
})
export class EmployeeCardComponent {
private _pendingSelectedParticipants$ = new BehaviorSubject<string[]>([]);
private _employeeId$: Observable<string> = this.activatedRoute.params.pipe(
map(({ employeeId }) => employeeId as string)
);
employee$: Observable<Employee> = this.employeeService.employee$;
allRoles: Role[] = Object.entries(RoleEnum).map(([key, value]) => ({ type: key as RoleEnum, name: value }));
detailedEmployeeData$: Observable<Employee> = this._employeeId$.pipe(
switchMap(employeeId => this.employeeService.fetchDetailedEmployeeData$(employeeId))
);
constructor(private activatedRoute: ActivatedRoute, private employeeService: EmployeeService) {}
constructor(private activatedRoute: ActivatedRoute, private employeeService: EmployeeService) {
this.employeeService.setCurrentEmployeeId(this.activatedRoute.snapshot.params.employeeId);
}
get pendingSelectedParticipants(): string[] {
return this._pendingSelectedParticipants$.getValue();
}
handleChangeEmployee(): void {
console.log('change employee: ', 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) : []);
}
}

2
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts
View File

@@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
import { EmployeeCardComponent } from './employee-card.component';
@NgModule({
@@ -19,6 +20,7 @@ import { EmployeeCardComponent } from './employee-card.component';
DigiNgLayoutExpansionPanelModule,
LocalDatePipeModule,
HideTextModule,
BackLinkModule
],
})
export class EmployeeCardModule {}

29
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.ts
View File

@@ -1,17 +1,17 @@
import { FormSelectBaseItem } from '@af/digi-ng/_form/form-select-base';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
import { Authorization } from '@msfa-models/authorization.model';
import { Employee } from '@msfa-models/employee.model';
import { Service } from '@msfa-models/service.model';
import { AuthorizationService } from '@msfa-services/api/authorizations.service';
import { EmployeeService } from '@msfa-services/api/employee.service';
import { ServiceService } from '@msfa-services/api/service.service';
import { EmailValidator } from '@msfa-utils/validators/email.validator';
import { RequiredValidator } from '@msfa-validators/required.validator';
import { Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { map } from 'rxjs/operators';
import { EditEmployeeFormData } from './edit-employee-form/edit-employee-form.component';
@Component({
@@ -20,8 +20,8 @@ import { EditEmployeeFormData } from './edit-employee-form/edit-employee-form.co
styleUrls: ['./employee-form.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EmployeeFormComponent extends UnsubscribeDirective implements OnInit {
employee$: Observable<Employee>;
export class EmployeeFormComponent {
employee$: Observable<Employee> = this.employeeService.employee$;
services$: Observable<Service[]> = this.serviceService.services$;
authorizations$: Observable<Authorization[]> = this.authorizationService.authorizations$;
employeeCurrentServices: Service[] | null | undefined;
@@ -33,7 +33,7 @@ export class EmployeeFormComponent extends UnsubscribeDirective implements OnIni
modalAuthInfo: { name: string } = { name: 'Test Behörighetsnamn' };
formGroup: FormGroup = this.formBuilder.group({
email: this.formBuilder.control('', [Validators.required, Validators.email]),
email: this.formBuilder.control('', [RequiredValidator('E-postadress'), EmailValidator('E-postadress')]),
services: this.formBuilder.control([], [RequiredValidator('en tjänst')]),
authorizations: new FormGroup({}),
});
@@ -48,20 +48,7 @@ export class EmployeeFormComponent extends UnsubscribeDirective implements OnIni
private router: Router,
private activatedRoute: ActivatedRoute
) {
super();
super.unsubscribeOnDestroy();
}
ngOnInit(): void {
this.employee$ = this.activatedRoute.params.pipe(
switchMap((params: { employeeId: string }) => {
return this.employeeService.fetchDetailedEmployeeData$(params.employeeId);
})
);
this.services$.subscribe(services => {
/* this.employeeCurrentServices = services; */
});
this.employeeService.setCurrentEmployeeId(this.activatedRoute.snapshot.params.employeeId);
}
updateEmployee(editEmployeeFormData: EditEmployeeFormData): void {