arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored organization-picker-form

Browse Source
This commit is contained in:
Erik Tiekstra
2021-09-09 09:17:09 +02:00
parent ccf14d0565
commit 2bbde053c2
2 changed files with 21 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.scss
View File

@@ -2,7 +2,7 @@
.organization-picker-form { .organization-picker-form {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: 1fr auto;
column-gap: $digi--layout--gutter; column-gap: $digi--layout--gutter;
row-gap: $digi--layout--gutter--s; row-gap: $digi--layout--gutter--s;
grid-template-areas: grid-template-areas:

59
apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.ts
View File

@@ -5,12 +5,12 @@ import {
EventEmitter, EventEmitter,
Input, Input,
OnChanges, OnChanges,
OnInit,
Output, Output,
SimpleChanges, SimpleChanges,
} from '@angular/core'; } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'; import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
import { Organization } from '@msfa-models/organization.model'; import { Organization } from '@msfa-models/organization.model';
import { RequiredValidator } from '@msfa-utils/validators/required.validator';
@Component({ @Component({
selector: 'msfa-organization-picker-form', selector: 'msfa-organization-picker-form',
@@ -18,7 +18,7 @@ import { Organization } from '@msfa-models/organization.model';
styleUrls: ['./organization-picker-form.component.scss'], styleUrls: ['./organization-picker-form.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class OrganizationPickerFormComponent implements OnInit, OnChanges { export class OrganizationPickerFormComponent implements OnChanges {
@Input() organizations: Array<Organization> | null = null; @Input() organizations: Array<Organization> | null = null;
@Input() selectedOrganization: Organization; @Input() selectedOrganization: Organization;
@Input() label = 'Välj organisation'; @Input() label = 'Välj organisation';
@@ -26,46 +26,28 @@ export class OrganizationPickerFormComponent implements OnInit, OnChanges {
@Input() compact = false; @Input() compact = false;
@Output() selectedOrganizationChanged = new EventEmitter<Organization>(); @Output() selectedOrganizationChanged = new EventEmitter<Organization>();
readonly organizationFormControlName = 'organization'; organizationPickerFormGroup: FormGroup = new FormGroup({
organization: new FormControl(null, [RequiredValidator('Organisation')]),
organizationPickerFormGroup: FormGroup | null = null; });
selectableOrganizations: Array<FormSelectItem> = []; selectableOrganizations: Array<FormSelectItem> = [];
ngOnInit(): void {
this.setupOrganizationPickerFormGroup();
this.setupSelectableOrganizations(this.organizations);
}
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
if (changes.organizations) { if (changes.selectedOrganization) {
this.setupSelectableOrganizations(this.organizations); this.organizationFormControl.patchValue(this.selectedOrganization.organizationNumber);
}
if (changes.organizations && this.organizations?.length) {
this.selectableOrganizations = this.organizations.map(({ name, organizationNumber }) => ({
name,
value: organizationNumber,
}));
} }
} }
get organizationFormControl(): AbstractControl | null { get organizationFormControl(): AbstractControl {
return this.organizationPickerFormGroup?.get(this.organizationFormControlName); return this.organizationPickerFormGroup.get('organization');
}
private setupOrganizationPickerFormGroup(): void {
this.organizationPickerFormGroup = new FormGroup({
organization: new FormControl(this.selectedOrganization?.organizationNumber || null, [Validators.required]),
});
}
private setupSelectableOrganizations(organizations: Array<Organization>): void {
if (!organizations) {
this.selectableOrganizations = [];
return;
}
this.selectableOrganizations = organizations.map(organization => {
return { name: organization.name, value: organization.organizationNumber };
});
} }
onFormSubmitted(): void { onFormSubmitted(): void {
let selectedOrganization = null;
if (!this.organizationPickerFormGroup) { if (!this.organizationPickerFormGroup) {
return; return;
} }
@@ -75,15 +57,14 @@ export class OrganizationPickerFormComponent implements OnInit, OnChanges {
if (!this.organizations || this.organizationPickerFormGroup.invalid) { if (!this.organizations || this.organizationPickerFormGroup.invalid) {
return; return;
} }
const newOrganization = this.organizations.find(
selectedOrganization = this.organizations.find( organization => organization.organizationNumber === this.organizationFormControl.value
organization => organization.organizationNumber === this.organizationFormControl?.value
); );
if (!selectedOrganization) { if (!newOrganization || newOrganization?.organizationNumber === this.selectedOrganization?.organizationNumber) {
return; return;
} }
this.selectedOrganizationChanged.emit(selectedOrganization); this.selectedOrganizationChanged.emit(newOrganization);
} }
} }