Merge pull request #57 in TEA/dafa-web-monorepo from feature/TV-351 to develop

Squashed commit of the following:

commit 7009ec6cae0768d134f7dff5da8d00e047ab91de
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Aug 19 13:14:22 2021 +0200

    TV-351 added aria-label to delete button

commit 27380c4aa24b550af0d37dc694072d7a2b1591b2
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Aug 19 07:22:09 2021 +0200

    TV-351 changed icon, observable for selected employee

commit 45fd5248534e0738cf2242bb60f4ac7f75accf64
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 18 17:58:09 2021 +0200

    TV-351 corr

commit b8ac397712f3359495d463740b6fb97f6a8bfb0c
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 18 17:49:31 2021 +0200

    TV-351 added takeUntil operator for unsubscription

commit da328d66a9331aa7f7c901b939d826025401c721
Merge: 69cae6f ffeb372
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 18 17:34:46 2021 +0200

    Merge branch 'develop' into feature/TV-351

commit 69cae6f711c60959edff48709e2fa99ba4534c65
Merge: ed57d7d b7c7b6b
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 18 12:58:45 2021 +0200

    Merge branch 'develop' into feature/TV-351

commit ed57d7d35e132f90f374b465ffdbf507c55f4038
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 18 12:54:22 2021 +0200

    TV-351 prev pr review fix

commit eca6211388ea20c0aba9980dd4343163e54d51eb
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 18 12:49:19 2021 +0200

    TV-351 delete employee

commit 206bf42a9a952d2e74bb60ad4a12c2f0568cb100
Merge: 0d2700f 218e3d6
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 18 08:41:23 2021 +0200

    Merge branch 'develop' into feature/TV-351

commit 0d2700f1fc535d6afcddbe2bfed68ff775b3d0ea
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 17 15:15:23 2021 +0200

    TV-351 add letter s if fullName ends without s

commit ff0d2631f45979d6381d409e119933f48b35d852
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 17 14:18:23 2021 +0200

    TV-351 delete method in service, waiting for api

commit 2f1edd6e70c83b90ad6fe6399af5ef5ddf294152
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 17 14:16:38 2021 +0200

    TV-351 delete employee
This commit is contained in:
Nicolas Fuentes Maturana
2021-08-19 13:16:58 +02:00
parent d6e46668e5
commit ecb929a808
8 changed files with 123 additions and 8 deletions

View File

@@ -22,7 +22,6 @@
</ng-container>
</button>
</th>
<th scope="col" class="employees-list__column-head">Redigera</th>
</tr>
</thead>
<tbody>
@@ -45,8 +44,9 @@
</ng-container>
</td>
<td>
<digi-button af-variation="tertiary">
<digi-icon-edit style="--digi--ui--width--icon: 1.25rem" slot="icon"></digi-icon-edit>
<digi-button af-variation="tertiary" [af-aria-label]="'Ta bort konto för ' + employee.fullName" (afOnClick)="openDialog(true, employee)">
<digi-icon-x style="--digi--ui--width--icon: 1.25rem" slot="icon"></digi-icon-x>
Ta bort konto
</digi-button>
</td>
</tr>
@@ -54,6 +54,22 @@
</table>
</digi-table>
<!-- Modal/ Dialog window -->
<digi-ng-dialog *ngIf="employeeSelected$ | async as employee"
[afActive]="showDialog"
(afOnInactive)="openDialog(false)"
(afOnPrimaryClick)="openDialog(false)"
(afOnSecondaryClick)="onDeleteEmployee(employee)"
[afHeading]="'Ta bort personalkonto'"
afHeadingLevel="h2"
afPrimaryButtonText="Avbryt"
afSecondaryButtonText="Radera personalkonto"
>
<p>
Är du säker på att du vill ta bort personalkontot för {{employee?.fullName}}?
</p>
</digi-ng-dialog>
<digi-navigation-pagination
*ngIf="totalPages > 1"
class="employees-list__pagination"

View File

@@ -1,9 +1,13 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
import { SortOrder } from '@msfa-enums/sort-order.enum';
import { DeleteEmployeeMockApiResponse } from '@msfa-models/api/delete-employee.response.model';
import { EmployeeCompactResponse } from '@msfa-models/api/employee.response.model';
import { EmployeeCompact } from '@msfa-models/employee.model';
import { PaginationMeta } from '@msfa-models/pagination-meta.model';
import { Sort } from '@msfa-models/sort.model';
import { EmployeeService } from '@msfa-services/api/employee.service';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'msfa-employees-list',
@@ -11,12 +15,19 @@ import { Sort } from '@msfa-models/sort.model';
styleUrls: ['./employees-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EmployeesListComponent {
export class EmployeesListComponent implements OnDestroy {
@Input() employees: EmployeeCompact[];
@Input() paginationMeta: PaginationMeta;
@Input() sort: Sort<keyof EmployeeCompactResponse>;
@Output() sorted = new EventEmitter<keyof EmployeeCompactResponse>();
@Output() paginated = new EventEmitter<number>();
@Output() deletedEmployee = new EventEmitter<EmployeeCompact>(null);
private componentDestroyed$ = new Subject<void>();
private _employeeSelected$ = new BehaviorSubject<EmployeeCompact>(null);
employeeSelected$: Observable<EmployeeCompact> = this._employeeSelected$.asObservable();
showDialog: boolean;
constructor(private employeeService: EmployeeService) { }
columnHeaders: { label: string; key: keyof EmployeeCompactResponse }[] = [
{ label: 'Namn', key: 'name' },
@@ -60,4 +71,38 @@ export class EmployeesListComponent {
setNewPage(page: number): void {
this.paginated.emit(page);
}
onDeleteEmployee(employee: EmployeeCompact): void {
this.employeeService.deleteEmployee(employee.id)
.pipe(takeUntil(this.componentDestroyed$))
.subscribe({
next: (res: DeleteEmployeeMockApiResponse) => {
if (res.status === 200) {
this.employees = this.employees ? this.employees.filter(e => e.id !== employee.id) : [];
this.deletedEmployee.emit(employee);
}
},
complete: () => {
this.showDialog = false;
},
error: err => {
console.log(err);
}
});
}
openDialog(val: boolean, employee: EmployeeCompact): void {
if (!val) {
this.showDialog = false;
return;
}
this.showDialog = val;
this._employeeSelected$.next(employee);
}
ngOnDestroy(): void {
this.componentDestroyed$.next();
this.componentDestroyed$.complete();
}
}

View File

@@ -1,3 +1,4 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
@@ -6,7 +7,7 @@ import { EmployeesListComponent } from './employees-list.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [EmployeesListComponent],
imports: [CommonModule, RouterModule],
imports: [CommonModule, RouterModule, DigiNgDialogModule],
exports: [EmployeesListComponent],
})
export class EmployeesListModule {}

View File

@@ -12,6 +12,22 @@
<digi-ng-link-button afText="Skapa nytt konto" afRoute="/administration/bjuda-in"></digi-ng-link-button>
</div>
<div class="employees__notification-alert">
<digi-notification-alert
*ngIf="(deletedEmployee$ | async) as deletedEmployee"
af-variation="success"
af-heading="Allt gick bra"
af-heading-level="h3"
af-closeable="true"
(click)="onCloseAlert()"
>
<p>
{{deletedEmployee?.fullName + (deletedEmployee?.fullName[deletedEmployee?.fullName.length -1] === 's' ? '' :
's') }} personalkonto är borttaget.
</p>
</digi-notification-alert>
</div>
<h2>Personallista</h2>
<form class="employees__search-wrapper" (ngSubmit)="setSearchFilter()">
@@ -35,6 +51,7 @@
[order]="order$ | async"
(sorted)="handleEmployeesSort($event)"
(paginated)="setNewPage($event)"
(deletedEmployee)="handleDeletedEmployee($event)"
></msfa-employees-list>
</digi-typography>

View File

@@ -16,4 +16,9 @@
&__only-employees-without-authorization {
margin-top: $digi--layout--gutter--l;
}
&__notification-alert {
margin-top: $digi--layout--gutter--xl;
margin-bottom: $digi--layout--gutter--xl;
}
}

View File

@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IconType } from '@msfa-enums/icon-type.enum';
import { EmployeeCompactResponse } from '@msfa-models/api/employee.response.model';
import { EmployeesData } from '@msfa-models/employee.model';
import { Employee, EmployeesData } from '@msfa-models/employee.model';
import { Sort } from '@msfa-models/sort.model';
import { EmployeeService } from '@msfa-services/api/employee.service';
import { BehaviorSubject, Observable } from 'rxjs';
@@ -17,9 +17,11 @@ export class EmployeesComponent {
private _onlyEmployeesWithoutAuthorization$ = new BehaviorSubject<boolean>(false);
employeesData$: Observable<EmployeesData> = this.employeeService.employeesData$;
sort$: Observable<Sort<keyof EmployeeCompactResponse>> = this.employeeService.sort$;
private _deletedEmployee$ = new BehaviorSubject<Employee>(null);
deletedEmployee$: Observable<Employee> = this._deletedEmployee$.asObservable();
iconType = IconType;
constructor(private employeeService: EmployeeService) {}
constructor(private employeeService: EmployeeService) { }
get searchValue(): string {
return this._searchValue$.getValue();
@@ -49,4 +51,12 @@ export class EmployeesComponent {
this._onlyEmployeesWithoutAuthorization$.next(event.detail.target.checked);
this.employeeService.setOnlyEmployeesWithoutAuthorization(this.onlyEmployeesWithoutAuthorization);
}
handleDeletedEmployee(employee: Employee): void {
this._deletedEmployee$.next(employee);
}
onCloseAlert(): void {
this._deletedEmployee$.next(null);
}
}

View File

@@ -0,0 +1,4 @@
export interface DeleteEmployeeMockApiResponse {
status: number;
message: string;
}

View File

@@ -4,6 +4,7 @@ import { ErrorType } from '@msfa-enums/error-type.enum';
import { SortOrder } from '@msfa-enums/sort-order.enum';
import { environment } from '@msfa-environment';
import { EmployeeInviteMockApiResponse } from '@msfa-models/api/employee-invite.response.model';
import { DeleteEmployeeMockApiResponse } from '@msfa-models/api/delete-employee.response.model';
import {
EmployeeCompactResponse,
EmployeeResponse,
@@ -97,6 +98,22 @@ export class EmployeeService {
this._onlyEmployeesWithoutAuthorization$.next(value);
}
// Not done, waiting for delete api http response
public deleteEmployee(id: string): Observable<any> {
return this.httpClient
.delete<DeleteEmployeeMockApiResponse>(`${this._apiUrl}/${id}`, { ...API_HEADERS })
.pipe(
take(1),
map(response => {
return {
status: response.status || 200, // mockresponse
message: response.message || 'deleted succeeded' // mockresponse
}
}),
catchError(error => throwError({ message: error as string, type: ErrorType.API }))
);
}
public setSort(newSortKey: keyof EmployeeCompactResponse): void {
const currentSort = this._sort$.getValue();
const order =