Fixed some issues with invites mock-data and response from api

This commit is contained in:
Erik Tiekstra
2021-09-01 13:39:01 +02:00
parent 70ab2c3ee4
commit 803422dbc5
6 changed files with 91 additions and 48 deletions

View File

@@ -2,7 +2,7 @@
<section class="employee-invite">
<digi-typography>
<h1>Skapa nytt personalkonto</h1>
<p>Såhär skapar du ett nytt personalkonto:</p>
<p> här skapar du ett nytt personalkonto:</p>
<ol>
<li>Skicka en inbjudningslänk till personalens e-postadress.</li>
<li>Personalen öppnar inbjudningslänken via sin e-post och skapar ett personalkonto med sitt Bank-ID.</li>
@@ -32,9 +32,9 @@
afLabel="E-postadress"
afType="email"
[afRequired]="true"
[afInvalidMessage]="email.errors?.message || 'Ogiltig e-postadress'"
[afInvalidMessage]="emailControl.errors?.message || 'Ogiltig e-postadress'"
[afDisableValidStyle]="true"
[afInvalid]="email.invalid && email.dirty"
[afInvalid]="emailControl.invalid && emailControl.dirty"
></digi-ng-form-input>
<digi-button af-size="m" af-type="submit" class="employee-invite__invitation-btn"
>Skicka inbjudningslänk</digi-button
@@ -42,14 +42,17 @@
</div>
</div>
<digi-notification-alert
*ngIf="(latestSubmittedInvite$ | async) as latestSubmittedInvite"
*ngIf="(lastInvite$ | async) as lastInvite"
af-variation="success"
af-heading="Allt gick bra"
af-heading-level="h3"
af-closeable="true"
(click)="onCloseAlert()"
>
<p>Inbjudan har skickats till {{latestSubmittedInvite.email}}</p>
<p *ngIf="lastInvitedNewUsers?.length">Inbjudan har skickats till {{lastInvitedNewUsers.join(', ')}}.</p>
<p *ngIf="lastInvitedExistingUsers?.length">
Följande personal är redan registrerat: {{lastInvitedExistingUsers.join(', ')}}.
</p>
</digi-notification-alert>
<footer class="employee-invite__footer">

View File

@@ -1,5 +1,6 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
import { EmployeeInviteResponse } from '@msfa-models/api/employee-invite.response.model';
import { EmployeeService } from '@msfa-services/api/employee.service';
import { RequiredValidator } from '@msfa-utils/validators/required.validator';
import { BehaviorSubject, Observable } from 'rxjs';
@@ -10,46 +11,57 @@ import { BehaviorSubject, Observable } from 'rxjs';
styleUrls: ['./employee-invite.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EmployeeInviteComponent implements OnInit {
form: FormGroup;
private latestSubmittedInvite_ = new BehaviorSubject<string>('');
latestSubmittedInvite$: Observable<string> = this.latestSubmittedInvite_.asObservable();
export class EmployeeInviteComponent {
form: FormGroup = new FormGroup({
email: new FormControl('', [
RequiredValidator('E-postadress'),
Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'),
]),
});
private _lastInvite$ = new BehaviorSubject<EmployeeInviteResponse>(null);
lastInvite$: Observable<EmployeeInviteResponse> = this._lastInvite$.asObservable();
constructor(private employeeService: EmployeeService) {}
ngOnInit(): void {
this.form = new FormGroup({
email: new FormControl('', [
RequiredValidator('E-postadress'),
Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'),
]),
});
}
get email() {
get emailControl(): AbstractControl {
return this.form.get('email');
}
get lastInvite(): EmployeeInviteResponse {
return this._lastInvite$.getValue();
}
get lastInvitedNewUsers(): string[] {
const invitedUsers = this.lastInvite?.invitedUsers || [];
const assignedUsers = this.lastInvite?.assignedUsers || [];
return [...invitedUsers, ...assignedUsers.map(assigned => assigned.email)];
}
get lastInvitedExistingUsers(): string[] {
const existingUsersInCurrentOrg = this.lastInvite?.existingUsersInCurrentOrg || [];
return existingUsersInCurrentOrg.map(existing => existing.email);
}
submitForm(): void {
this._lastInvite$.next(null);
if (this.form.invalid) {
this.email.markAsDirty();
this.email.markAsTouched();
this.emailControl.markAsDirty();
this.emailControl.markAsTouched();
return;
}
const post = this.employeeService.postEmployeeInvitation(this.form.value).subscribe({
next: () => {
this.latestSubmittedInvite_.next(this.form.value);
const post = this.employeeService.postEmployeeInvitation(this.emailControl.value).subscribe({
next: data => {
this._lastInvite$.next(data);
this.form.reset();
},
complete: () => {
post.unsubscribe();
},
error: (err) => console.log(err)
});
}
onCloseAlert(): void {
this.latestSubmittedInvite_.next('');
this._lastInvite$.next(null);
}
}

View File

@@ -1,4 +1,18 @@
export interface EmployeeInviteMockApiResponse {
id: number,
createdAt: number
interface ExistingUser {
ciamUserId: string;
firstName: string;
lastName: string;
email: string;
status: string;
roles: string[];
tjansteKoder: string[];
allaUtforandeVerksamheter: boolean;
utforandeVerksamhetIds: number[];
adressIds: number[];
}
export interface EmployeeInviteResponse {
assignedUsers: ExistingUser[];
invitedUsers: string[];
existingUsersInCurrentOrg: ExistingUser[];
}

View File

@@ -42,12 +42,16 @@ export interface EmployeeRequestData {
adressIds: number[];
}
export interface EmployeeInviteRequestData {
emails: string[];
}
export function mapEmployeeToRequestData(data: Employee): EmployeeRequestData {
const { email, roles, tjanstCodes, allaUtforandeVerksamheter, utforandeVerksamhet, utforandeVerksamhetIds, utforandeAdressIds } = data;
const {
email,
roles,
tjanstCodes,
allaUtforandeVerksamheter,
utforandeVerksamhet,
utforandeVerksamhetIds,
utforandeAdressIds,
} = data;
return {
email,
@@ -56,7 +60,7 @@ export function mapEmployeeToRequestData(data: Employee): EmployeeRequestData {
utforandeVerksamhetIds,
adressIds: utforandeAdressIds,
allaUtforandeVerksamheter: allaUtforandeVerksamheter,
utforandeVerksamhet: utforandeVerksamhet
utforandeVerksamhet: utforandeVerksamhet,
};
}

View File

@@ -6,6 +6,7 @@ import { RoleEnum } from '@msfa-enums/role.enum';
import { SortOrder } from '@msfa-enums/sort-order.enum';
import { environment } from '@msfa-environment';
import { DeleteEmployeeMockApiResponse } from '@msfa-models/api/delete-employee.response.model';
import { EmployeeInviteResponse } from '@msfa-models/api/employee-invite.response.model';
import {
EmployeeCompactResponse,
EmployeeResponse,
@@ -14,7 +15,6 @@ import {
import { Params } from '@msfa-models/api/params.model';
import {
Employee,
EmployeeInviteRequestData,
EmployeesData,
mapEmployeeToRequestData,
mapResponseToEmployee,
@@ -25,7 +25,7 @@ import { mapRoleResponseToRoleObject, Role } from '@msfa-models/role.model';
import { Sort } from '@msfa-models/sort.model';
import { ErrorService } from '@msfa-services/error.service';
import { BehaviorSubject, combineLatest, Observable, of, throwError } from 'rxjs';
import { catchError, filter, map, switchMap, take } from 'rxjs/operators';
import { catchError, filter, map, switchMap, take, tap } from 'rxjs/operators';
import { TjanstService } from './tjanst.service';
@Injectable({
@@ -177,14 +177,15 @@ export class EmployeeService extends UnsubscribeDirective {
);
}
public postEmployeeInvitation(email: string): Observable<string[]> {
public postEmployeeInvitation(email: string): Observable<EmployeeInviteResponse> {
return this.httpClient
.patch<{ data: EmployeeInviteRequestData }>(`${this._apiBaseUrl}/invite`, {
emails: Object.values(email),
.patch<{ data: EmployeeInviteResponse }>(`${this._apiBaseUrl}/invite`, {
emails: [email],
})
.pipe(
take(1),
map(res => res.data.emails),
tap(res => console.log(res)),
map(res => res.data),
catchError(error => throwError({ message: error as string, type: ErrorType.API }))
);
}