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 {
display: grid;
grid-template-columns: auto 1fr;
grid-template-columns: 1fr auto;
column-gap: $digi--layout--gutter;
row-gap: $digi--layout--gutter--s;
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,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
} 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 { RequiredValidator } from '@msfa-utils/validators/required.validator';
@Component({
selector: 'msfa-organization-picker-form',
@@ -18,7 +18,7 @@ import { Organization } from '@msfa-models/organization.model';
styleUrls: ['./organization-picker-form.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OrganizationPickerFormComponent implements OnInit, OnChanges {
export class OrganizationPickerFormComponent implements OnChanges {
@Input() organizations: Array<Organization> | null = null;
@Input() selectedOrganization: Organization;
@Input() label = 'Välj organisation';
@@ -26,46 +26,28 @@ export class OrganizationPickerFormComponent implements OnInit, OnChanges {
@Input() compact = false;
@Output() selectedOrganizationChanged = new EventEmitter<Organization>();
readonly organizationFormControlName = 'organization';
organizationPickerFormGroup: FormGroup | null = null;
organizationPickerFormGroup: FormGroup = new FormGroup({
organization: new FormControl(null, [RequiredValidator('Organisation')]),
});
selectableOrganizations: Array<FormSelectItem> = [];
ngOnInit(): void {
this.setupOrganizationPickerFormGroup();
this.setupSelectableOrganizations(this.organizations);
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.organizations) {
this.setupSelectableOrganizations(this.organizations);
if (changes.selectedOrganization) {
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 {
return this.organizationPickerFormGroup?.get(this.organizationFormControlName);
}
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 };
});
get organizationFormControl(): AbstractControl {
return this.organizationPickerFormGroup.get('organization');
}
onFormSubmitted(): void {
let selectedOrganization = null;
if (!this.organizationPickerFormGroup) {
return;
}
@@ -75,15 +57,14 @@ export class OrganizationPickerFormComponent implements OnInit, OnChanges {
if (!this.organizations || this.organizationPickerFormGroup.invalid) {
return;
}
selectedOrganization = this.organizations.find(
organization => organization.organizationNumber === this.organizationFormControl?.value
const newOrganization = this.organizations.find(
organization => organization.organizationNumber === this.organizationFormControl.value
);
if (!selectedOrganization) {
if (!newOrganization || newOrganization?.organizationNumber === this.selectedOrganization?.organizationNumber) {
return;
}
this.selectedOrganizationChanged.emit(selectedOrganization);
this.selectedOrganizationChanged.emit(newOrganization);
}
}