Added my-account information and possibility to switch organizations

apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.html

@@ -0,0 +1,28 @@
+<form
+  class="organization-picker-form"
+  [ngClass]="{'organization-picker-form--compact': compact}"
+  *ngIf="organizationPickerFormGroup"
+  [formGroup]="organizationPickerFormGroup"
+  (ngSubmit)="onFormSubmitted()"
+>
+  <digi-ng-form-select
+    class="organization-picker-form__select"
+    [formControl]="organizationFormControl"
+    [afLabel]="label"
+    [afPlaceholder]="label"
+    [afSelectItems]="selectableOrganizations"
+    [afDisableValidStyle]="true"
+    [afRequired]="true"
+    [afInvalid]="organizationFormControl.invalid && organizationFormControl.touched"
+  ></digi-ng-form-select>
+
+  <digi-button class="organization-picker-form__submit" af-type="submit">{{submitText}}</digi-button>
+
+  <digi-form-validation-message
+    class="organization-picker-form__error"
+    af-variation="error"
+    *ngIf="organizationFormControl.invalid && organizationFormControl.touched"
+  >
+    Du måste välja en organisation för att kunna logga in
+  </digi-form-validation-message>
+</form>

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

@@ -0,0 +1,40 @@
+@import 'variables/gutters';
+
+.organization-picker-form {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: $digi--layout--gutter;
+  row-gap: $digi--layout--gutter--s;
+  grid-template-areas:
+    'select select'
+    'error error'
+    'submit .';
+
+  &--compact {
+    grid-template-areas:
+      'select submit'
+      'error error';
+
+    .organization-picker-form__submit {
+      margin-top: 0;
+    }
+  }
+
+  &__select {
+    grid-area: select;
+  }
+
+  &__submit {
+    grid-area: submit;
+    margin-top: $digi--layout--gutter--l;
+    align-self: end;
+  }
+
+  &__error {
+    grid-area: error;
+  }
+
+  ::ng-deep .digi-ng-form-select__footer {
+    display: none !important;
+  }
+}

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

@@ -0,0 +1,28 @@
+import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { OrganizationPickerFormComponent } from './organization-picker-form.component';
+
+describe('OrganizationPickerFormComponent', () => {
+  let component: OrganizationPickerFormComponent;
+  let fixture: ComponentFixture<OrganizationPickerFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule, FormsModule, DigiNgFormSelectModule],
+      declarations: [OrganizationPickerFormComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrganizationPickerFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,89 @@
+import { FormSelectItem } from '@af/digi-ng/_form/form-select';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Organization } from '@msfa-models/organization.model';
+
+@Component({
+  selector: 'msfa-organization-picker-form',
+  templateUrl: './organization-picker-form.component.html',
+  styleUrls: ['./organization-picker-form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrganizationPickerFormComponent implements OnInit, OnChanges {
+  @Input() organizations: Array<Organization> | null = null;
+  @Input() selectedOrganization: Organization;
+  @Input() label = 'Välj organisation';
+  @Input() submitText = 'Logga in';
+  @Input() compact = false;
+  @Output() selectedOrganizationChanged = new EventEmitter<Organization>();
+
+  readonly organizationFormControlName = 'organization';
+
+  organizationPickerFormGroup: FormGroup | null = null;
+  selectableOrganizations: Array<FormSelectItem> = [];
+
+  ngOnInit(): void {
+    this.setupOrganizationPickerFormGroup();
+    this.setupSelectableOrganizations(this.organizations);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.organizations) {
+      this.setupSelectableOrganizations(this.organizations);
+    }
+  }
+
+  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 };
+    });
+  }
+
+  onFormSubmitted(): void {
+    let selectedOrganization = null;
+
+    if (!this.organizationPickerFormGroup) {
+      return;
+    }
+
+    this.organizationPickerFormGroup.markAllAsTouched();
+
+    if (!this.organizations || this.organizationPickerFormGroup.invalid) {
+      return;
+    }
+
+    selectedOrganization = this.organizations.find(
+      organization => organization.organizationNumber === this.organizationFormControl?.value
+    );
+
+    if (!selectedOrganization) {
+      return;
+    }
+
+    this.selectedOrganizationChanged.emit(selectedOrganization);
+  }
+}

apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.module.ts

@@ -0,0 +1,13 @@
+import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { OrganizationPickerFormComponent } from './organization-picker-form.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [OrganizationPickerFormComponent],
+  imports: [CommonModule, ReactiveFormsModule, DigiNgFormSelectModule],
+  exports: [OrganizationPickerFormComponent],
+})
+export class OrganizationPickerFormModule {}

apps/mina-sidor-fa/src/app/shared/services/api/employee.service.ts

@@ -1,7 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
-import { RoleEnum } from '@msfa-enums/role.enum';
 import { SortOrder } from '@msfa-enums/sort-order.enum';
 import { environment } from '@msfa-environment';
 import { EmployeeEditRequest } from '@msfa-models/api/employee-edit.request.model';
@@ -19,7 +18,6 @@ import {
   mapResponseToEmployeeCompact,
 } from '@msfa-models/employee.model';
 import { errorToCustomError } from '@msfa-models/error/custom-error';
-import { mapResponseToRoles, Role } from '@msfa-models/role.model';
 import { Sort } from '@msfa-models/sort.model';
 import { ErrorService } from '@msfa-services/error.service';
 import { BehaviorSubject, combineLatest, Observable, of, throwError } from 'rxjs';
@@ -192,8 +190,4 @@ export class EmployeeService extends UnsubscribeDirective {
       })
     );
   }
-
-  public get allRoles(): Role[] {
-    return mapResponseToRoles(Object.keys(RoleEnum) as RoleEnum[]);
-  }
 }

apps/mina-sidor-fa/src/app/shared/services/role.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { RoleEnum } from '@msfa-enums/role.enum';
+import { mapResponseToRoles, Role } from '@msfa-models/role.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RoleService {
+  public get allRoles(): Role[] {
+    return mapResponseToRoles(Object.keys(RoleEnum) as RoleEnum[]);
+  }
+}