feature(Slutredovisning): Formulär för att skapa och skicka in slutredovisning (TV-533)

Squashed commit of the following: commit 5b427cdd62b881cc32d408beaf92f8e3c22a9bd4 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Fri Nov 12 09:24:18 2021 +0100 refactor commit b51af1b25b573a3203f3dd7e8e1c3e1401f0d228 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Fri Nov 12 09:20:58 2021 +0100 add yrke names commit 1ed3a33fb997669bf1af0be52347b371af0177ba Merge: 4d9d2522 0235f1f9 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Fri Nov 12 07:40:48 2021 +0100 Merge branch 'develop' into feature/tv-533-Skapa-slutredovisning-2 # Conflicts: # apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts commit 4d9d25226fc3b91386832b1367edcf016d336c03 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Thu Nov 11 16:34:24 2021 +0100 Fixed switch functionality inside slutredovisning model commit cce93c169e39bba681e4e25f511fa42686134f97 Merge: b56ce52f 51ed2e84 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Thu Nov 11 16:15:46 2021 +0100 Fixed conflicts and added deltid percent commit 51ed2e841e00e8d7cea9225bd9cfeab8b783efbd Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Nov 11 14:49:40 2021 +0100 hide description on step 1 and 2 commit 269708be2f7fec84815b3e7f91e33d4c305b0846 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Nov 11 14:04:59 2021 +0100 cleanup commit 05df3acf97f6115ec15cd295c1ed12721592f867 Merge: 3c803f38 c6adc71f Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Nov 11 13:47:22 2021 +0100 Merge branch 'develop' into feature/tv-533-Skapa-slutredovisning-2 commit 3c803f3883b23065c2e0c15f6946213e5972576b Merge: c2724aa6 f332dd41 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Nov 11 12:38:53 2021 +0100 Merge branch 'develop' into feature/tv-533-Skapa-slutredovisning-2 # Conflicts: # apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.ts # apps/mina-sidor-fa/src/app/shared/enums/report-type.enum.ts commit c2724aa654483001d48ca1c2d0a5bfc1b2552c89 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Nov 11 12:22:05 2021 +0100 add loader commit b97b45fb22260dbdc9f9792e027b7bda68150ead Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Nov 11 12:09:09 2021 +0100 move formgroups to parent to persist stat commit 37feaab19309777ef96fb70be62ede9e26498b89 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Nov 11 10:43:53 2021 +0100 fix radiobuttons commit 644b9fd6288589cc3a66ceb8beefb623345e4308 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Nov 11 09:30:31 2021 +0100 . commit 28875f21a381a966054523ff7ccb7df126b30120 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Nov 11 08:20:07 2021 +0100 move submit logic to step3 commit eef52c39dd970abbedc413b4c348098e07abe036 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Nov 11 07:40:56 2021 +0100 submit button commit 4d732240e0ff6196d827572ff865392d6aaa0a9c Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Nov 10 12:47:43 2021 +0100 fix some bugs commit 642cc2b24fd3a5def8abb9ae45595d101ccdcfb7 Merge: c4d53407 2dc56685 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Nov 10 12:24:18 2021 +0100 Merge branch 'develop' into feature/tv-533-Skapa-slutredovisning-2 commit c4d53407399d695f58e5a0be074d81bbc1b1cb21 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Nov 10 12:24:09 2021 +0100 wip commit 808810699850e611ead2ee7ed1b728acc3d93dd5 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Nov 10 12:02:01 2021 +0100 slutredovisning commit fa446717acc66e779ecdb87ba7a5b2224eeca9fe Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Nov 10 11:00:44 2021 +0100 view for utbildning done ... and 64 more commits
2021-11-12 09:28:42 +01:00
parent 0235f1f912
commit e947ab4b39
105 changed files with 5624 additions and 44 deletions
@@ -0,0 +1,4 @@
+export interface SelectOption {
+  value: any;
+  name: string;
+}
@@ -0,0 +1,45 @@
+<div class="ui-select" [ngClass]="{'ui-select--invalid': uiInvalid}">
+  <div class="ui-select__input-wrapper">
+    <digi-form-label
+      [afLabel]="uiLabel"
+      [afAnnounceIfOptional]="uiAnnounceIfOptional"
+      [afRequired]="uiRequired"
+      [afFor]="uiId"
+      [afDescription]="uiDescription"
+    ></digi-form-label>
+    <div class="ui-select__select-wrapper">
+      <select
+        class="ui-select__select"
+        [ngClass]="{'ui-select__select--invalid': uiInvalid}"
+        [attr.id]="uiId"
+        [attr.name]="name"
+        [attr.required]="uiRequired"
+        (change)="checkForChange($event.target.value)"
+      >
+        <option
+          *ngIf="uiPlaceholder"
+          [selected]="!currentValue"
+          class="ui-select__option ui-select__option--placeholder"
+          disabled
+          value=""
+        >
+          {{uiPlaceholder}}
+        </option>
+        <option
+          *ngFor="let option of uiOptions"
+          [selected]="option.value === currentValue"
+          [attr.value]="option.value"
+          class="ui-select__option"
+        >
+          {{option.name}}
+        </option>
+      </select>
+      <digi-icon-arrow-down aria-hidden="true" class="ui-select__icon" slot="icon"></digi-icon-arrow-down>
+    </div>
+  </div>
+  <div aria-atomic="true" role="alert">
+    <digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
+      >{{uiValidationMessage}}</digi-form-validation-message
+    >
+  </div>
+</div>
@@ -0,0 +1,45 @@
+@import 'variables/gutters';
+@import 'functions/rem';
+
+.ui-select {
+  display: flex;
+  flex-direction: column;
+
+  &--invalid {
+    gap: var(--digi--layout--gutter--xs);
+  }
+
+  &__select-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  &__select {
+    appearance: none;
+    width: 100%;
+    padding: var(--digi--ui--input--padding);
+    padding-right: var(--digi--layout--padding--30);
+    height: var(--digi--ui--input--height);
+    border-width: rem(1);
+    cursor: pointer;
+    font-size: var(--digi--typography--font-size--m);
+    color: var(--digi--typography--color--text);
+    background-color: var(--digi--ui--color--background);
+    border-color: var(--digi--ui--input--border--color);
+
+    &--invalid {
+      border-color: var(--digi--ui--color--border--error);
+      background-color: var(--digi--ui--color--background--error);
+    }
+  }
+
+  &__option {
+    font-size: var(--digi--typography--font-size--l);
+  }
+
+  &__icon {
+    position: absolute;
+    right: rem(12);
+  }
+}
@@ -0,0 +1,26 @@
+/* tslint:disable:no-unused-variable */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SelectComponent } from './select.component';
+
+describe('SelectComponent', () => {
+  let component: SelectComponent;
+  let fixture: ComponentFixture<SelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SelectComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,16 @@
+import { ReactiveFormsModule } from '@angular/forms';
+import { SelectComponent } from './select.component';
+import { UiSelectModule } from './select.module';
+
+export default { title: 'Select', component: SelectComponent };
+
+const componentModule = {
+  moduleMetadata: {
+    imports: [ReactiveFormsModule, UiSelectModule],
+  },
+};
+
+export const standard = () => ({
+  ...componentModule,
+  template: '<ui-select></ui-select>',
+});
@@ -0,0 +1,111 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Injector,
+  Input,
+  OnChanges,
+  Output,
+} from '@angular/core';
+import { ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uuid } from '@utils/uuid.util';
+import { SelectOption } from './select-option.model';
+
+/**
+ * A select component.
+ *
+ * ## Usage
+ * ``import {UiSelectModule} from '@ui/select/select.module';``
+ */
+@Component({
+  selector: 'ui-select',
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SelectComponent,
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
+  @Input() uiInvalid: boolean;
+  @Input() uiValidationMessage: string;
+  @Input() uiPlaceholder: string;
+  @Input() uiOptions: SelectOption[];
+  @Input() uiRequired: boolean;
+  @Input() uiLabel: string;
+  @Input() uiDescription: string;
+  @Input() uiAnnounceIfOptional: boolean;
+  @Input() uiId: string = uuid();
+  @Input() uiName: string;
+  @Output() uiOnChange = new EventEmitter<any>();
+
+  name: string | number;
+  onTouched: () => {};
+  private onChange: (value: any) => {};
+  private _value: any;
+
+  constructor(private injector: Injector, private changeDetectorRef: ChangeDetectorRef) {}
+
+  get currentValue(): any {
+    return this._value;
+  }
+
+  private get _requiredText() {
+    if (this.uiRequired && !this.uiAnnounceIfOptional) {
+      return ' (obligatoriskt)';
+    }
+
+    if (!this.uiRequired && this.uiAnnounceIfOptional) {
+      return ' (frivilligt)';
+    }
+
+    return '';
+  }
+
+  getLabelText(label: string): string {
+    return `${label}${this._requiredText}`;
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get(NgControl, null);
+    if (ngControl) {
+      this.name = this.uiName || ngControl.name;
+    }
+  }
+
+  ngOnChanges(): void {
+    const ngControl: NgControl = this.injector.get(NgControl, null);
+    if (ngControl) {
+      this.name = this.uiName || ngControl.name;
+    }
+  }
+
+  checkForChange(value: any): void {
+    if (this._value !== value) {
+      if (this.onChange) {
+        this.onChange(value);
+      }
+      this._value = value;
+      this.uiOnChange.emit(value);
+    }
+  }
+
+  writeValue(value: any): void {
+    this._value = value;
+    this.changeDetectorRef.detectChanges();
+  }
+
+  registerOnChange(fn: (value: any) => {}) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => {}) {
+    this.onTouched = fn;
+  }
+}
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { SelectComponent } from './select.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [CommonModule],
+  declarations: [SelectComponent],
+  exports: [SelectComponent],
+})
+export class UiSelectModule {}