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

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html

@@ -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-button af-variation="tertiary" [af-aria-label]="'Ta bort konto för ' + employee.fullName" (afOnClick)="openDialog(true, employee)">
-              <digi-icon-edit style="--digi--ui--width--icon: 1.25rem" slot="icon"></digi-icon-edit>
+              <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"

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.ts

@@ -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();
+  }
 }

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.module.ts

@@ -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 {}

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/employees.component.html

@@ -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>
 

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/employees.component.scss

@@ -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;
+  }
 }

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/employees.component.ts

@@ -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,6 +17,8 @@ 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) { }
@@ -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);
+  }
 }

apps/mina-sidor-fa/src/app/shared/models/api/delete-employee.response.model.ts

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

apps/mina-sidor-fa/src/app/shared/services/api/employee.service.ts

@@ -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 =