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

Updated styling

Browse Source
This commit is contained in:
Erik Tiekstra
2021-11-12 15:15:24 +01:00
parent d88e30e24c
commit 6f95d16abe
23 changed files with 311 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/components/slutredovisning-view-description-list/slutredovisning-view-description-list.component.css
View File

133
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/components/slutredovisning-view-description-list/slutredovisning-view-description-list.component.html
View File

@@ -1,79 +1,78 @@
<h3>Huvudsysselsättning</h3>
<dl>
<dt>Vilken är deltagarens huvudsakliga sysselsättning just nu?</dt>
<dd>{{mainOccupationName}}</dd>
<div class="slutredovisning-view-description-list">
<h3>Huvudsysselsättning</h3>
<dl>
<dt>Vilken är deltagarens huvudsakliga sysselsättning just nu?</dt>
<dd>{{mainOccupationName}}</dd>
<ng-container *ngIf="education">
<dt>Utbildningsnivå</dt>
<dd>{{educationLevel }}</dd>
<ng-container *ngIf="education.otherExplanation">
<dt>Beskrivning av Annat</dt>
<dd>{{education.otherExplanation }}</dd>
</ng-container>
<dt>Utbildningens längd</dt>
<dd>{{educationLength }}</dd>
<dt>Inriktning på utbildningen</dt>
<dd>{{education.educationSpecification }}</dd>
</ng-container>
<ng-container *ngIf="work">
<ng-container *ngFor="let workItem of work">
<dt>Yrkesområde</dt>
<dd>{{workItem.yrkesomradeName }}</dd>
<dt>Yrkesgrupp</dt>
<dd>{{workItem.yrkesgruppName }}</dd>
<dt>Anställningsform</dt>
<dd>{{workItem.anstallningsform }}</dd>
<ng-container *ngIf="workItem.otherExplanation">
<ng-container *ngIf="education">
<dt>Utbildningsnivå</dt>
<dd>{{educationLevel }}</dd>
<ng-container *ngIf="education.otherExplanation">
<dt>Beskrivning av Annat</dt>
<dd>{{workItem.otherExplanation }}</dd>
<dd>{{education.otherExplanation }}</dd>
</ng-container>
<dt>Omfattning</dt>
<dd>{{omfattningToString(workItem.omfattning) }}</dd>
<dt>Omfattning i procent</dt>
<dd>{{workItem.omfattningPercent }}</dd>
<dt>Utbildningens längd</dt>
<dd>{{educationLength }}</dd>
<dt>Inriktning på utbildningen</dt>
<dd>{{education.educationSpecification }}</dd>
</ng-container>
</ng-container>
<ng-container *ngIf="stillUnemployed">
<dt>Anledning till att arbetssökanden under tjänstens gång inte nått målet:</dt>
<ng-container *ngIf="work">
<ng-container *ngFor="let workItem of work">
<dt>Yrkesområde</dt>
<dd>{{workItem.yrkesomradeName }}</dd>
<dt>Yrkesgrupp</dt>
<dd>{{workItem.yrkesgruppName }}</dd>
<dt>Anställningsform</dt>
<dd>{{workItem.anstallningsform }}</dd>
<ng-container *ngIf="workItem.otherExplanation">
<dt>Beskrivning av Annat</dt>
<dd>{{workItem.otherExplanation }}</dd>
</ng-container>
<ul>
<ng-container *ngFor="let reason of stillUnemployed.reasonsGoalNotReached">
<li>{{capitalizeSentence(reason) }}</li>
<dt>Omfattning</dt>
<dd>{{omfattningToString(workItem.omfattning) }}</dd>
<dt>Omfattning i procent</dt>
<dd>{{workItem.omfattningPercent }}</dd>
</ng-container>
</ul>
<ng-container *ngIf="stillUnemployed.otherExplanation">
<dt>Beskrivning av Annat</dt>
<dd>{{stillUnemployed.otherExplanation }}</dd>
</ng-container>
</ng-container>
<ng-container *ngIf="other">
<dt>Förtydling av Annan huvudsysselsättning:</dt>
<dd>{{other.otherExplanation }}</dd>
</ng-container>
</dl>
<ng-container *ngIf="stillUnemployed">
<dt>Anledning till att arbetssökanden under tjänstens gång inte nått målet:</dt>
<dd>
<ul>
<li *ngFor="let reason of stillUnemployed.reasonsGoalNotReached">{{capitalizeSentence(reason) }}</li>
</ul>
</dd>
<h3>Aktiviteter</h3>
<dl>
<ng-container *ngFor="let activity of slutredovisning.activities">
<dt>{{activity.name}}</dt>
<dd>
<pre>{{activity.whatHasBeenDone}}</pre>
</dd>
</ng-container>
</dl>
<ng-container *ngIf="stillUnemployed.otherExplanation">
<dt>Beskrivning av Annat</dt>
<dd>{{stillUnemployed.otherExplanation }}</dd>
</ng-container>
</ng-container>
<h3>Deltagarens framsteg och utveckling</h3>
<dl>
<dt>Beskriv deltagarens framsteg och utveckling under perioden</dt>
<dd><pre>{{slutredovisning.progressDescription}}</pre></dd>
<dt>Information om lämpligt nästa steg för deltagaren</dt>
<dd><pre>{{slutredovisning.nextStepDescription}}</pre></dd>
<dt>Övrig information</dt>
<dd><pre>{{slutredovisning.otherInformation}}</pre></dd>
</dl>
<ng-container *ngIf="other">
<dt>Förtydling av Annan huvudsysselsättning:</dt>
<dd>{{other.otherExplanation }}</dd>
</ng-container>
</dl>
<h3>Aktiviteter</h3>
<dl>
<ng-container *ngFor="let activity of slutredovisning.activities">
<dt>{{activity.name}}</dt>
<dd><pre>{{activity.whatHasBeenDone}}</pre></dd>
</ng-container>
</dl>
<h3>Deltagarens framsteg och utveckling</h3>
<dl>
<dt>Beskriv deltagarens framsteg och utveckling under perioden</dt>
<dd><pre>{{slutredovisning.progressDescription}}</pre></dd>
<dt>Information om lämpligt nästa steg för deltagaren</dt>
<dd><pre>{{slutredovisning.nextStepDescription}}</pre></dd>
<dt>Övrig information</dt>
<dd><pre>{{slutredovisning.otherInformation}}</pre></dd>
</dl>
</div>

5
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/components/slutredovisning-view-description-list/slutredovisning-view-description-list.component.scss Normal file
View File

@@ -0,0 +1,5 @@
.slutredovisning-view-description-list {
pre {
margin: 0;
}
}

17
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/components/slutredovisning-view-description-list/slutredovisning-view-description-list.component.ts
View File

@@ -1,4 +1,10 @@
import { Component, Input } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import {
SlutredovisningResponseMainOccupationEducationDetails,
SlutredovisningResponseMainOccupationOtherDetails,
SlutredovisningResponseMainOccupationStillUnemployedDetails,
SlutredovisningResponseMainOccupationWorkDetails,
} from '@msfa-models/api/slutredovisning.response.model';
import {
educationLengthToString,
educationLevelToString,
@@ -9,17 +15,12 @@ import {
Slutredovisning,
} from '@msfa-models/slutredovisning.model';
import { capitalizeSentence } from '@msfa-utils/capitalize-sentence.util';
import {
SlutredovisningResponseMainOccupationEducationDetails,
SlutredovisningResponseMainOccupationOtherDetails,
SlutredovisningResponseMainOccupationStillUnemployedDetails,
SlutredovisningResponseMainOccupationWorkDetails,
} from '@msfa-models/api/slutredovisning.response.model';
@Component({
selector: 'msfa-slutredovisning-view-description-list',
templateUrl: './slutredovisning-view-description-list.component.html',
styleUrls: ['./slutredovisning-view-description-list.component.css'],
styleUrls: ['./slutredovisning-view-description-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningViewDescriptionListComponent {
capitalizeSentence = capitalizeSentence;

5
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-education/slutredovisning-form-step0-education.component.ts
View File

@@ -1,9 +1,9 @@
import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
import { EducationLength, EducationLevel, MainOccupation } from '@msfa-models/slutredovisning.model';
import { RequiredValidator } from '@msfa-validators/required.validator';
import { SlutredovisningFormStep0Education } from './slutredovisning-form-step0-education.validator';
import { EducationLength, EducationLevel, MainOccupation } from '@msfa-models/slutredovisning.model';
export interface SlutredovisningFormStep0EducationFormData {
educationLevel: EducationLevel;
@@ -18,6 +18,7 @@ type FormKeys = keyof SlutredovisningFormStep0EducationFormData;
selector: 'msfa-slutredovisning-form-step0-education',
templateUrl: './slutredovisning-form-step0-education.component.html',
styleUrls: ['./slutredovisning-form-step0-education.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningFormStep0EducationComponent implements OnInit {
readonly formGroupKey: MainOccupation = MainOccupation.Education;

5
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-other/slutredovisning-form-step0-other.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
import { RequiredValidator } from '@msfa-validators/required.validator';
import { MainOccupation } from '@msfa-models/slutredovisning.model';
import { RequiredValidator } from '@msfa-validators/required.validator';
export interface SlutredovisningFormStep0OtherFormData {
otherExplanation: string;
@@ -13,6 +13,7 @@ type FormKeys = keyof SlutredovisningFormStep0OtherFormData;
selector: 'msfa-slutredovisning-form-step0-other',
templateUrl: './slutredovisning-form-step0-other.component.html',
styleUrls: ['./slutredovisning-form-step0-other.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningFormStep0OtherComponent implements OnInit {
readonly formGroupKey: MainOccupation = MainOccupation.Other;

5
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-still-unemployed/slutredovisning-form-step0-still-unemployed.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
import { SlutredovisningFormStep0StillUnemployed } from './slutredovisning-form-step0-still-unemployed.validator';
import { MainOccupation, StillUnemployedReason } from '@msfa-models/slutredovisning.model';
import { SlutredovisningFormStep0StillUnemployed } from './slutredovisning-form-step0-still-unemployed.validator';
type ReasonCheckboxValues = { [key: string]: boolean };
@@ -21,6 +21,7 @@ interface CheckboxModel {
selector: 'msfa-slutredovisning-form-step0-still-unemployed',
templateUrl: './slutredovisning-form-step0-still-unemployed.component.html',
styleUrls: ['./slutredovisning-form-step0-still-unemployed.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningFormStep0StillUnemployedComponent implements OnInit {
readonly formGroupKey: MainOccupation = MainOccupation.StillUnemployed;

3
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-work/slutredovisning-form-step0-work.component.ts
View File

@@ -1,5 +1,5 @@
import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
import { Component, Input, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { Anstallningsform, MainOccupation, Omfattning } from '@msfa-models/slutredovisning.model';
import { Yrkesgrupp } from '@msfa-models/yrkesgrupp.model';
@@ -16,6 +16,7 @@ import { SlutredovisningFormStep0WorkValidator } from './slutredovisning-form-st
selector: 'msfa-slutredovisning-form-step0-work',
templateUrl: './slutredovisning-form-step0-work.component.html',
styleUrls: ['./slutredovisning-form-step0-work.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningFormStep0WorkComponent implements OnInit {
readonly formGroupKey: MainOccupation = MainOccupation.Work;

94
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.html
View File

@@ -1,50 +1,58 @@
<h2>Huvudsaklig sysselsättning</h2>
<div class="slutredovisning-form-step0">
<h2>Huvudsaklig sysselsättning</h2>
<form
class="slutredovisning-form-step0"
[formGroup]="formGroup"
name="slutredovisning-form-step0"
(ngSubmit)="verifyAndEmitData()"
>
<digi-form-fieldset
af-legend="Vilken är deltagarens huvudsakliga sysselsättning nu?"
af-name="mainOccupation"
af-form="slutredovisning-form-step0"
<form
class="slutredovisning-form-step0__form"
[formGroup]="formGroup"
name="slutredovisning-form-step0"
(ngSubmit)="verifyAndEmitData()"
>
<ui-radiobutton-group
uiId="slutredovisning-mainOccupation"
[uiRadiobuttons]="mainOccupationRadioButtonGroup"
formControlName="mainOccupation"
[uiRequired]="true"
[uiAnnounceIfOptional]="true"
[uiInvalid]="formControlIsInvalid(mainOccupationFormControl)"
[uiValidationMessage]="mainOccupationFormControl.errors?.required"
></ui-radiobutton-group>
</digi-form-fieldset>
<digi-form-fieldset
af-legend="Vilken är deltagarens huvudsakliga sysselsättning nu?"
af-name="mainOccupation"
af-form="slutredovisning-form-step0"
>
<ui-radiobutton-group
uiId="slutredovisning-mainOccupation"
[uiRadiobuttons]="mainOccupationRadioButtonGroup"
formControlName="mainOccupation"
[uiRequired]="true"
[uiAnnounceIfOptional]="true"
[uiInvalid]="formControlIsInvalid(mainOccupationFormControl)"
[uiValidationMessage]="mainOccupationFormControl.errors?.required"
></ui-radiobutton-group>
</digi-form-fieldset>
<msfa-slutredovisning-form-step0-education
*ngIf="mainOccupationFormControl.value === MainOccupation.Education"
[formGroupRef]="formGroup"
[shouldValidate]="shouldValidate$ | async"
></msfa-slutredovisning-form-step0-education>
<msfa-slutredovisning-form-step0-education
*ngIf="mainOccupationFormControl.value === MainOccupation.Education"
[formGroupRef]="formGroup"
[shouldValidate]="shouldValidate$ | async"
></msfa-slutredovisning-form-step0-education>
<msfa-slutredovisning-form-step0-still-unemployed
*ngIf="mainOccupationFormControl.value === MainOccupation.StillUnemployed"
[formGroupRef]="formGroup"
[shouldValidate]="shouldValidate$ | async"
></msfa-slutredovisning-form-step0-still-unemployed>
<msfa-slutredovisning-form-step0-still-unemployed
*ngIf="mainOccupationFormControl.value === MainOccupation.StillUnemployed"
[formGroupRef]="formGroup"
[shouldValidate]="shouldValidate$ | async"
></msfa-slutredovisning-form-step0-still-unemployed>
<msfa-slutredovisning-form-step0-work
*ngIf="mainOccupationFormControl.value === MainOccupation.Work"
[formGroupRef]="formGroup"
[shouldValidate]="shouldValidate$ | async"
></msfa-slutredovisning-form-step0-work>
<msfa-slutredovisning-form-step0-work
*ngIf="mainOccupationFormControl.value === MainOccupation.Work"
[formGroupRef]="formGroup"
[shouldValidate]="shouldValidate$ | async"
></msfa-slutredovisning-form-step0-work>
<msfa-slutredovisning-form-step0-other
*ngIf="mainOccupationFormControl.value === MainOccupation.Other"
[formGroupRef]="formGroup"
[shouldValidate]="shouldValidate$ | async"
></msfa-slutredovisning-form-step0-other>
<msfa-slutredovisning-form-step0-other
*ngIf="mainOccupationFormControl.value === MainOccupation.Other"
[formGroupRef]="formGroup"
[shouldValidate]="shouldValidate$ | async"
></msfa-slutredovisning-form-step0-other>
<digi-button af-type="submit">Vidare till steg 2</digi-button>
</form>
<footer class="slutredovisning-form-step0__footer">
<digi-button af-type="submit">Vidare till steg 2</digi-button>
<msfa-back-link [showIcon]="false" [asButton]="true" route="../">
<span>Avbryt</span>
<span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
</msfa-back-link>
</footer>
</form>
</div>

13
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.scss
View File

@@ -1,7 +1,14 @@
@import 'variables/gutters';
.slutredovisning-form-step0 {
display: flex;
flex-direction: column;
gap: $digi--layout--gutter--l;
&__form {
display: flex;
flex-direction: column;
gap: $digi--layout--gutter--l;
}
&__footer {
display: flex;
gap: var(--digi--layout--gutter);
}
}

9
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.ts
View File

@@ -1,14 +1,14 @@
import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
import { MainOccupation } from '@msfa-models/slutredovisning.model';
import { markControlsAsDirty } from '@msfa-utils/mark-controls-as-dirty.util';
import { RequiredValidator } from '@msfa-validators/required.validator';
import { BehaviorSubject } from 'rxjs';
import { SlutredovisningFormStep0EducationFormData } from './slutredovisning-form-step0-education/slutredovisning-form-step0-education.component';
import { SlutredovisningFormStep0WorkFormData } from './slutredovisning-form-step0-work/slutredovisning-form-step0-work.model';
import { SlutredovisningFormStep0StillUnemployedFormData } from './slutredovisning-form-step0-still-unemployed/slutredovisning-form-step0-still-unemployed.component';
import { SlutredovisningFormStep0OtherFormData } from './slutredovisning-form-step0-other/slutredovisning-form-step0-other.component';
import { MainOccupation } from '@msfa-models/slutredovisning.model';
import { SlutredovisningFormStep0StillUnemployedFormData } from './slutredovisning-form-step0-still-unemployed/slutredovisning-form-step0-still-unemployed.component';
import { SlutredovisningFormStep0WorkFormData } from './slutredovisning-form-step0-work/slutredovisning-form-step0-work.model';
export interface SlutredovisningStep0FormData {
mainOccupation: MainOccupation;
@@ -29,6 +29,7 @@ type FormKeys = keyof SlutredovisningStep0FormData;
selector: 'msfa-slutredovisning-form-step0',
templateUrl: './slutredovisning-form-step0.component.html',
styleUrls: ['./slutredovisning-form-step0.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningFormStep0Component implements OnInit {
shouldValidate$ = new BehaviorSubject<boolean>(false);

67
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step1/slutredovisning-form-step1.component.html
View File

@@ -1,34 +1,41 @@
<h2>Aktiviteter</h2>
<form [formGroup]="formGroup" name="report-form" (ngSubmit)="verifyAndEmitData()">
<ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef" [formArrayName]="ACTIVITES_FORM_NAME">
<div
class="slutredovisning-form__activity"
*ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
[formGroupName]="i"
>
<h3>{{activityFormGroup.get('name').value}}</h3>
<ui-textarea
formControlName="whatHasBeenDone"
uiLabel="Beskriv vad deltagaren har gjort inom aktiviteten"
[uiAnnounceIfOptional]="true"
[uiMaxLength]="2000"
[uiMinLength]="1"
[uiRequired]="true"
[uiValidationMessage]="activityFormGroup.get('whatHasBeenDone')?.errors?.required"
[uiInvalid]="activityFormGroup.get('whatHasBeenDone')?.touched && !!activityFormGroup.get('whatHasBeenDone')?.errors?.required"
></ui-textarea>
</div>
<!-- TODO: If something is required at the top of the form it will be hard to see when at the bottom and clicking next -->
<div class="slutredovisning-form-step1">
<h2>Aktiviteter</h2>
<form
class="slutredovisning-form-step1__form"
[formGroup]="formGroup"
name="report-form"
(ngSubmit)="verifyAndEmitData()"
>
<ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef" [formArrayName]="ACTIVITES_FORM_NAME">
<div
class="slutredovisning-form__activity"
*ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
[formGroupName]="i"
>
<h3 class="slutredovisning-form-step1__sub-heading">{{activityFormGroup.get('name').value}}</h3>
<ui-textarea
formControlName="whatHasBeenDone"
uiLabel="Beskriv vad deltagaren har gjort inom aktiviteten"
[uiAnnounceIfOptional]="true"
[uiMaxLength]="2000"
[uiMinLength]="1"
[uiRequired]="true"
[uiValidationMessage]="activityFormGroup.get('whatHasBeenDone')?.errors?.required"
[uiInvalid]="activityFormGroup.get('whatHasBeenDone')?.touched && !!activityFormGroup.get('whatHasBeenDone')?.errors?.required"
></ui-textarea>
</div>
<!-- TODO: If something is required at the top of the form it will be hard to see when at the bottom and clicking next -->
<footer class="slutredovisning-report-form-step1__footer">
<digi-button af-type="button" af-variation="tertiary" (click)="goBack()">
<digi-icon-arrow-left slot="icon"></digi-icon-arrow-left>
Tillbaka
</digi-button>
<digi-button af-type="submit">Nästa</digi-button>
</footer>
</ng-container>
</form>
<footer class="slutredovisning-form-step1__footer">
<digi-button af-type="submit">Nästa</digi-button>
<digi-button af-type="button" af-variation="secondary" (click)="goBack()">
Tillbaka
<span class="msfa__a11y-sr-only">&nbsp;till steg förgående steg</span>
</digi-button>
</footer>
</ng-container>
</form>
</div>
<ng-template #loadingRef>
<ui-loader uiType="padded"></ui-loader>

16
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step1/slutredovisning-form-step1.component.scss
View File

@@ -1,6 +1,18 @@
.slutredovisning-report-form-step1 {
@import 'variables/gutters';
.slutredovisning-form-step1 {
&__form {
display: flex;
flex-direction: column;
gap: $digi--layout--gutter--l;
}
&__sub-heading {
margin-top: 0;
}
&__footer {
display: flex;
justify-content: space-between;
gap: var(--digi--layout--gutter);
}
}

19
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step1/slutredovisning-form-step1.component.ts
View File

@@ -1,11 +1,19 @@
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
EventEmitter,
Input,
OnInit,
Output,
} from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
import { markControlsAsDirty } from '@msfa-utils/mark-controls-as-dirty.util';
import { Activity } from '@msfa-models/activity.model';
import { SlutredovisningFormService } from '../slutredovisning-form.service';
import { take } from 'rxjs/operators';
import { markControlsAsDirty } from '@msfa-utils/mark-controls-as-dirty.util';
import { RequiredValidator } from '@msfa-validators/required.validator';
import { BehaviorSubject } from 'rxjs';
import { take } from 'rxjs/operators';
import { SlutredovisningFormService } from '../slutredovisning-form.service';
export interface SlutredovisningStep1FormData {
activities: { whatHasBeenDone: string; id: string; name: string }[];
@@ -17,6 +25,7 @@ type FormControlNames = keyof SlutredovisningStep1FormData;
selector: 'msfa-slutredovisning-form-step1',
templateUrl: './slutredovisning-form-step1.component.html',
styleUrls: ['./slutredovisning-form-step1.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningFormStep1Component implements OnInit {
readonly ACTIVITES_FORM_NAME: FormControlNames = 'activities';

87
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step2/slutredovisning-form-step2.component.html
View File

@@ -1,46 +1,53 @@
<h2>Deltagarens framsteg och utveckling</h2>
<form [formGroup]="formGroup" name="slutredovisning-report-form-step1__form" (ngSubmit)="verifyAndEmitData()">
<ui-textarea
[formControl]="framstegFormControl"
uiLabel="Beskriv deltagarens framsteg och utveckling under perioden"
[uiAnnounceIfOptional]="true"
[uiMaxLength]="2000"
[uiMinLength]="1"
[uiRequired]="true"
[uiValidationMessage]="framstegFormControl.errors?.required"
[uiInvalid]="framstegFormControl?.touched && !!framstegFormControl?.errors?.required"
></ui-textarea>
<div class="slutredovisning-form-step2">
<h2>Deltagarens framsteg och utveckling</h2>
<form
[formGroup]="formGroup"
class="slutredovisning-form-step2__form"
name="slutredovisning-form-step2-form"
(ngSubmit)="verifyAndEmitData()"
>
<ui-textarea
[formControl]="framstegFormControl"
uiLabel="Beskriv deltagarens framsteg och utveckling under perioden"
[uiAnnounceIfOptional]="true"
[uiMaxLength]="2000"
[uiMinLength]="1"
[uiRequired]="true"
[uiValidationMessage]="framstegFormControl.errors?.required"
[uiInvalid]="framstegFormControl?.touched && !!framstegFormControl?.errors?.required"
></ui-textarea>
<ui-textarea
[formControl]="nastaStegFormControl"
uiLabel="Lägg till information om lämpligt nästa steg för deltagaren"
[uiAnnounceIfOptional]="true"
[uiMaxLength]="2000"
[uiMinLength]="1"
[uiRequired]="true"
[uiValidationMessage]="nastaStegFormControl.errors?.required"
[uiInvalid]="nastaStegFormControl?.touched && !!nastaStegFormControl?.errors?.required"
></ui-textarea>
<ui-textarea
[formControl]="nastaStegFormControl"
uiLabel="Lägg till information om lämpligt nästa steg för deltagaren"
[uiAnnounceIfOptional]="true"
[uiMaxLength]="2000"
[uiMinLength]="1"
[uiRequired]="true"
[uiValidationMessage]="nastaStegFormControl.errors?.required"
[uiInvalid]="nastaStegFormControl?.touched && !!nastaStegFormControl?.errors?.required"
></ui-textarea>
<ui-textarea
[formControl]="ovrigtFormControl"
uiLabel="Lägg till övrig information"
[uiAnnounceIfOptional]="true"
[uiMaxLength]="2000"
[uiMinLength]="1"
[uiRequired]="true"
[uiValidationMessage]="ovrigtFormControl.errors?.required"
[uiInvalid]="ovrigtFormControl?.touched && !!ovrigtFormControl?.errors?.required"
></ui-textarea>
<ui-textarea
[formControl]="ovrigtFormControl"
uiLabel="Lägg till övrig information"
[uiAnnounceIfOptional]="true"
[uiMaxLength]="2000"
[uiMinLength]="1"
[uiRequired]="true"
[uiValidationMessage]="ovrigtFormControl.errors?.required"
[uiInvalid]="ovrigtFormControl?.touched && !!ovrigtFormControl?.errors?.required"
></ui-textarea>
<footer class="slutredovisning-report-form-step1__footer">
<digi-button af-type="button" af-variation="tertiary" (click)="goBack()">
<digi-icon-arrow-left slot="icon"></digi-icon-arrow-left>
Tillbaka
</digi-button>
<digi-button af-type="submit">Nästa</digi-button>
</footer>
</form>
<footer class="slutredovisning-form-step2__footer">
<digi-button af-type="submit">Nästa</digi-button>
<digi-button af-type="button" af-variation="secondary" (click)="goBack()">
Tillbaka
<span class="msfa__a11y-sr-only">&nbsp;till steg förgående steg</span>
</digi-button>
</footer>
</form>
</div>
<ng-template #loadingRef>
<ui-loader uiType="padded"></ui-loader>

4
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step2/slutredovisning-form-step2.component.scss
View File

@@ -1,6 +1,6 @@
@import 'variables/gutters';
.slutredovisning-report-form-step1 {
.slutredovisning-form-step2 {
&__form {
display: flex;
flex-direction: column;
@@ -8,6 +8,6 @@
}
&__footer {
display: flex;
justify-content: space-between;
gap: var(--digi--layout--gutter);
}
}

5
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step2/slutredovisning-form-step2.component.ts
View File

@@ -1,8 +1,8 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
import { markControlsAsDirty } from '@msfa-utils/mark-controls-as-dirty.util';
import { RequiredValidator } from '@msfa-validators/required.validator';
import { BehaviorSubject } from 'rxjs';
export interface SlutredovisningStep2FormData {
progressDescription: string;
@@ -16,6 +16,7 @@ type FormControlNames = keyof SlutredovisningStep2FormData;
selector: 'msfa-slutredovisning-form-step2',
templateUrl: './slutredovisning-form-step2.component.html',
styleUrls: ['./slutredovisning-form-step2.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningFormStep2Component implements OnInit {
readonly framstegFormName: FormControlNames = 'progressDescription';

50
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step3/slutredovisning-form-step3.component.html
View File

@@ -1,7 +1,10 @@
<div class="slutredovisning-report-form-step3__view">
<div class="slutredovisning-form-step3">
<h2>Förhandsgranskning</h2>
<div class="informativ-rapport-form__confirmation" *ngIf="submittedDate$ | async as submittedDate; else previewRef">
<div
class="slutredovisning-form-step3__confirmation"
*ngIf="submittedDate$ | async as submittedDate; else previewRef"
>
<digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
<p>Slutredovisning för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen.</p>
<dl>
@@ -13,28 +16,29 @@
</div>
<ng-template #previewRef>
<ui-loader *ngIf="submitIsLoading$ | async" uiType="absolute"></ui-loader>
<msfa-slutredovisning-view-description-list
[slutredovisning]="slutredovisning$ | async"
></msfa-slutredovisning-view-description-list>
<div class="slutredovisning-form-step3__preview">
<ui-loader *ngIf="submitIsLoading$ | async" uiType="absolute"></ui-loader>
<msfa-slutredovisning-view-description-list
[slutredovisning]="slutredovisning$ | async"
></msfa-slutredovisning-view-description-list>
<digi-notification-alert
*ngIf="submitError$ | async as error"
class="slutredovisnin-rapport-form__alert"
af-variation="danger"
af-heading="Någonting gick fel"
>
<p>Kunde inte skicka in Slutredovisning. Försök igen om en stund.</p>
<p *ngIf="error.message" class="msfa__small-text">{{error.message}}</p>
</digi-notification-alert>
<digi-notification-alert
*ngIf="submitError$ | async as error"
class="slutredovisning-form-step3__alert"
af-variation="danger"
af-heading="Någonting gick fel"
>
<p>Kunde inte skicka in Slutredovisning. Försök igen om en stund.</p>
<p *ngIf="error.message" class="msfa__small-text">{{error.message}}</p>
</digi-notification-alert>
<footer class="slutredovisning-report-form-step3__footer">
<digi-button af-type="button" af-variation="tertiary" (click)="goBack()">
<digi-icon-arrow-left slot="icon"></digi-icon-arrow-left>
Tillbaka
</digi-button>
<digi-button af-type="button" (click)="submitSlutredovisning()">Skicka in Slutredovisning</digi-button>
</footer>
<footer class="slutredovisning-form-step3__footer">
<digi-button af-type="button" (click)="submitSlutredovisning()">Skicka in Slutredovisning</digi-button>
<digi-button af-type="button" af-variation="secondary" (click)="goBack()">
Tillbaka
<span class="msfa__a11y-sr-only">&nbsp;till steg förgående steg</span>
</digi-button>
</footer>
</div>
</ng-template>
</div>
<!--<pre>{{slutredovisning$|async|json}}</pre>-->

13
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step3/slutredovisning-form-step3.component.scss
View File

@@ -1,18 +1,15 @@
@import 'variables/gutters';
.slutredovisning-report-form-step3 {
&__view {
.slutredovisning-form-step3 {
&__preview,
&__confirmation {
display: flex;
flex-direction: column;
gap: $digi--layout--gutter--l;
}
//&__form {
// display: flex;
// flex-direction: column;
// gap: $digi--layout--gutter--l;
//}
&__footer {
display: flex;
justify-content: space-between;
gap: var(--digi--layout--gutter);
}
}

3
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step3/slutredovisning-form-step3.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { SlutredovisningResponseMainOccupationDetails } from '@msfa-models/api/slutredovisning.response.model';
import { DeltagareAvrop } from '@msfa-models/avrop.model';
import { CustomError } from '@msfa-models/error/custom-error';
@@ -13,6 +13,7 @@ import { slutredovisningFormDataToSlutredovisningRequest } from '../utils/form-d
selector: 'msfa-slutredovisning-form-step3',
templateUrl: './slutredovisning-form-step3.component.html',
styleUrls: ['./slutredovisning-form-step3.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningFormStep3Component {
@Output() backClick = new EventEmitter<void>();

38
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.component.html
View File

@@ -50,44 +50,6 @@
</ng-container>
</ng-template>
</div>
<!-- <h2>Step 0 valueChanges:</h2>-->
<!-- <pre>-->
<!-- {{ step0FormGroup.valueChanges | async | json}}-->
<!-- </pre-->
<!-- >-->
<!-- <h2>Step 1 valueChanges:</h2>-->
<!-- <pre>-->
<!-- {{ step1FormGroup.valueChanges | async | json}}-->
<!-- </pre-->
<!-- >-->
<!-- <h2>Step 2 valueChanges:</h2>-->
<!-- <pre>-->
<!-- {{ step2FormGroup.valueChanges | async | json}}-->
<!-- </pre-->
<!-- >-->
<!-- <h2>Step 0 data:</h2>-->
<!-- <pre>-->
<!-- {{step0FormData$ | async | json}}-->
<!-- </pre-->
<!-- >-->
<!-- <h2>Step 1 data:</h2>-->
<!-- <pre>-->
<!-- {{step1FormData$ | async | json}}-->
<!-- </pre-->
<!-- >-->
<!-- <h2>Step 2 data:</h2>-->
<!-- <pre>-->
<!-- {{step2FormData$ | async | json}}-->
<!-- </pre-->
<!-- >-->
<!-- <h2>slutredovisningFormData$ data:</h2>-->
<!-- <pre>-->
<!-- {{slutredovisningFormData$ | async | json}}-->
<!-- </pre-->
<!-- >-->
</msfa-report-layout>
</msfa-layout>
<ng-template #skeletonRef>

1
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts
View File

@@ -75,6 +75,7 @@ import { SlutredovisningFormService } from './slutredovisning-form.service';
UiErrorListModule,
UiInputModule,
SlutredovisningViewDescriptionListModule,
BackLinkModule,
],
providers: [SlutredovisningFormService],
exports: [SlutredovisningFormComponent],