From 2bbde053c25fdc409c70b42fe9889e187e8bb1e2 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date: Thu, 9 Sep 2021 09:17:09 +0200
Subject: [PATCH] Refactored organization-picker-form

---
 .../organization-picker-form.component.scss   |  2 +-
 .../organization-picker-form.component.ts     | 59 +++++++------------
 2 files changed, 21 insertions(+), 40 deletions(-)

diff --git a/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.scss b/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.scss
index 38949d9..594410d 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.scss
@@ -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:
diff --git a/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.ts b/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.ts
index 2c1f459..0e11991 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.ts
@@ -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);
   }
 }