feat(creat-account): Services: replaced multi-select-dropdown with selectboxes (TV-225)

Squashed commit of the following:

commit b11ee4f4c7eeb2c556a97ce3c3182a27ef26ead1
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Jun 2 09:33:43 2021 +0200

    Replaced multi-select-dropdown with checkboxes

apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.html

@@ -51,60 +51,32 @@
       ></digi-ng-form-input>
     </div>
     <div class="employee-form__block" *ngIf="services$ | async as services">
-      <digi-typography>
-        <h2>Tjänst</h2>
-      </digi-typography>
-
-      <!-- TODO: Right now there are issues within digi-form-filter where Angular 
-        attributes are not working. Also event-handling is not working. 
-        The digi-team is notified -->
-      <digi-form-filter
-        af-id="employee-form-services"
-        af-name="Tjänst"
-        af-filter-button-text="Välj tjänst"
-        af-submit-button-text="Spara tjänster"
-        (afOnSubmitFilters)="addPendingServicesToFormControl()"
-        (afOnFocusOut)="addPendingServicesToFormControl()"
-        (afOnResetFilters)="resetPendingServices()"
-      >
-        <digi-form-checkbox
-          af-variation="primary"
-          af-label="Välj alla"
-          [afChecked]="pendingServices?.length"
-          [afIndeterminate]="pendingServices?.length !== services?.length"
-          (afOnChange)="togglePendingService(services, $event.detail.target.checked)"
-        ></digi-form-checkbox>
-        <digi-form-checkbox
-          *ngFor="let service of services"
-          af-variation="primary"
-          [afLabel]="service.name"
-          [afValue]="service.id"
-          [afChecked]="pendingServices.includes(service)"
-          (afOnChange)="togglePendingService(service, $event.detail.target.checked)"
-        ></digi-form-checkbox>
-      </digi-form-filter>
-      <digi-form-validation-message
-        class="employee-form__validation-message"
-        *ngIf="servicesControl.invalid && servicesControl.dirty"
-        af-variation="error"
-      >
-        {{ servicesControl.errors.message }}
-      </digi-form-validation-message>
-
-      <div class="employee-form__added-services">
+      <fieldset class="employee-form__fieldset">
         <digi-typography>
-          <h3>Valda tjänster</h3>
+          <legend>Tjänster</legend>
         </digi-typography>
-        <ul *ngIf="servicesControl.value?.length; else noServicesAdded" class="employee-form__services">
-          <li class="employee-form__service-item" *ngFor="let service of servicesControl.value">
-            <span>{{ service.name }}</span>
-            <digi-button af-variation="tertiary" (afOnClick)="removeServiceFromFormControl(service.id)">
-              <digi-icon-x-button slot="icon"></digi-icon-x-button>
-            </digi-button>
+
+        <ul class="employee-form__services">
+          <li *ngFor="let service of services; let first = first" class="employee-form__service-item">
+            <digi-form-checkbox
+              [afId]="(first && 'employee-form-services') || undefined"
+              af-variation="primary"
+              [afValidation]="servicesControl.invalid && servicesControl.dirty && 'error'"
+              [afLabel]="service.name"
+              [afValue]="service.id"
+              [afChecked]="servicesControl.value.includes(service)"
+              (afOnChange)="toggleService(service, $event.detail.target.checked)"
+            ></digi-form-checkbox>
           </li>
         </ul>
-        <ng-template #noServicesAdded>Inga tjänster vald.</ng-template>
-      </div>
+        <digi-form-validation-message
+          class="employee-form__validation-message"
+          *ngIf="servicesControl.invalid && servicesControl.dirty"
+          af-variation="error"
+        >
+          {{ servicesControl.errors.message }}
+        </digi-form-validation-message>
+      </fieldset>
     </div>
 
     <div class="employee-form__block" *ngIf="authorizations$ | async as authorizations">

apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.scss

@@ -32,29 +32,14 @@
     margin-top: var(--digi--layout--gutter--s);
   }
 
-  &__added-services {
-    margin-top: var(--digi--layout--gutter);
-    max-width: 50rem;
-  }
-
   &__services,
   &__authorizations {
     @include dafa__reset-list;
     margin-bottom: var(--digi--layout--gutter);
   }
 
+  &__authorization-item,
   &__service-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--digi--layout--gutter--xs) var(--digi--layout--gutter--s);
-
-    &:nth-child(odd) {
-      background-color: var(--digi--ui--color--background--secondary);
-    }
-  }
-
-  &__authorization-item {
     display: flex;
     align-items: center;
 

apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.ts

@@ -9,7 +9,7 @@ import { EmployeeService } from '@dafa-services/api/employee.service';
 import { ServiceService } from '@dafa-services/api/service.service';
 import { SocialSecurityNumberValidator } from '@dafa-utils/validators/social-security-number.validator';
 import { RequiredValidator } from '@dafa-validators/required.validator';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -24,14 +24,12 @@ export class EmployeeFormComponent {
   servicesSelectItems$: Observable<FormSelectBaseItem[]> = this.services$.pipe(
     map(services => services.map(({ name, id }) => ({ name, value: id })))
   );
-  private _pendingServices$ = new BehaviorSubject<Service[]>([]);
 
   formGroup: FormGroup = this.formBuilder.group({
     firstName: this.formBuilder.control('', [RequiredValidator('Förnamn')]),
     lastName: this.formBuilder.control('', [RequiredValidator('Efternamn')]),
     ssn: this.formBuilder.control('', [RequiredValidator('Personnummer'), SocialSecurityNumberValidator()]),
-    // services: this.formBuilder.control([], [RequiredValidator('en tjänst')]),
-    services: this.formBuilder.control([]),
+    services: this.formBuilder.control([], [RequiredValidator('en tjänst')]),
     authorizations: this.formBuilder.control([], [RequiredValidator('en behörighet')]),
   });
   todaysDate = new Date();
@@ -47,10 +45,6 @@ export class EmployeeFormComponent {
     this.formGroup.valueChanges.subscribe(values => console.log(this.formGroup));
   }
 
-  get pendingServices(): Service[] {
-    return this._pendingServices$.getValue();
-  }
-
   get firstNameControl(): AbstractControl {
     return this.formGroup.get('firstName');
   }
@@ -97,34 +91,16 @@ export class EmployeeFormComponent {
     }
   }
 
-  togglePendingService(service: Service, checked: boolean): void {
-    const currentPendingServices = this.pendingServices;
+  toggleService(service: Service, checked: boolean): void {
+    const currentServices = this.servicesControl.value;
 
     if (checked) {
-      this._pendingServices$.next([...currentPendingServices, service]);
+      this.servicesControl.patchValue([...currentServices, service]);
     } else {
-      this._pendingServices$.next(currentPendingServices.filter(currentService => currentService.id !== service.id));
+      this.servicesControl.patchValue(currentServices.filter(currentService => currentService.id !== service.id));
     }
   }
 
-  toggleAllPendingServices(services: Service[], checked: boolean): void {
-    this._pendingServices$.next(checked ? services : []);
-  }
-
-  resetPendingServices(): void {
-    this._pendingServices$.next([]);
-  }
-
-  addPendingServicesToFormControl(): void {
-    this.servicesControl.patchValue(this.pendingServices);
-  }
-
-  removeServiceFromFormControl(id: string): void {
-    const currentAddedServices = this.servicesControl.value;
-
-    this.servicesControl.patchValue(currentAddedServices.filter(currentService => currentService.id !== id));
-  }
-
   setFocusOnInvalidInput(event: CustomEvent): void {
     console.log(event.target);
   }
@@ -155,8 +131,6 @@ export class EmployeeFormComponent {
           post.unsubscribe();
         },
       });
-
-      // this.formGroup.reset();
     } else {
       console.error('Form is invalid, do something...');
       this._markFormAsDirty();