From 61c3c2ff5988cfa283a31e52f22b19d87eae0cb0 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Fri, 4 Jun 2021 09:22:09 +0200 Subject: [PATCH] feat(creat-account): Services: replaced multi-select-dropdown with selectboxes (TV-225) Squashed commit of the following: commit b11ee4f4c7eeb2c556a97ce3c3182a27ef26ead1 Author: Erik Tiekstra Date: Wed Jun 2 09:33:43 2021 +0200 Replaced multi-select-dropdown with checkboxes --- .../employee-form.component.html | 72 ++++++------------- .../employee-form.component.scss | 17 +---- .../employee-form/employee-form.component.ts | 38 ++-------- 3 files changed, 29 insertions(+), 98 deletions(-) diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.html b/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.html index 7ad5713..78bfa3c 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.html +++ b/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.html @@ -51,60 +51,32 @@ >
- -

Tjänst

- - - - - - - - - {{ servicesControl.errors.message }} - - -
+
-

Valda tjänster

+ Tjänster -
    -
  • - {{ service.name }} - - - + +
      +
    • +
    - Inga tjänster vald. -
+ + {{ servicesControl.errors.message }} + +
diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.scss b/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.scss index 4e4bf63..0ad59d0 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.scss +++ b/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; diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.ts b/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.ts index 782c034..ed35043 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.ts +++ b/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 = this.services$.pipe( map(services => services.map(({ name, id }) => ({ name, value: id }))) ); - private _pendingServices$ = new BehaviorSubject([]); 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();