Fixed some issues with invites mock-data and response from api
This commit is contained in:
@@ -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>Så 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">
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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[];
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -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 }))
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user