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: 69cae6fffeb372Author: 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: ed57d7db7c7b6bAuthor: 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: 0d2700f218e3d6Author: 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:
@@ -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"
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
export interface DeleteEmployeeMockApiResponse {
|
||||
status: number;
|
||||
message: string;
|
||||
}
|
||||
@@ -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 =
|
||||
|
||||
Reference in New Issue
Block a user