feature(Periodisk redovisning): Man kan nu bara göra periodisk redovisning ifall Gemensam planering är gjord (TV-808)

Squashed commit of the following:

commit b2f7ac185f7cbd1725627201e533bc3508b5c174
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Oct 26 17:01:40 2021 +0200

    En Gemensam planering måste ha mottagits för att en Periodisk redovisning ska kunna skapas.
This commit is contained in:
Daniel Appelgren
2021-10-27 09:11:16 +02:00
parent 84af5924d3
commit 3971ea419c
4 changed files with 224 additions and 194 deletions

View File

@@ -23,221 +23,243 @@
</digi-notification-alert> </digi-notification-alert>
<msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link> <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
</div> </div>
<ng-template #formRef> <ng-template #formRef>
<form <ng-container *ngIf="avrop.hasGemensamPlanering; else failedGemensamPlaneringCheck">
*ngIf="periods$ | async as periods; else loadingRef" <form
class="periodisk-redovisning-form__form" *ngIf="periods$ | async as periods; else loadingRef"
[formGroup]="formGroup" class="periodisk-redovisning-form__form"
(ngSubmit)="openConfirmDialog()" [formGroup]="formGroup"
id="periodisk-redovisning-form" (ngSubmit)="openConfirmDialog()"
> id="periodisk-redovisning-form"
<digi-ng-form-select >
afLabel="Period" <digi-ng-form-select
[afSelectItems]="periodsToFormselectItems(periods)" afLabel="Period"
[afDisableValidStyle]="true" [afSelectItems]="periodsToFormselectItems(periods)"
[afRequired]="true" [afDisableValidStyle]="true"
[afAnnounceIfOptional]="true" [afRequired]="true"
[formControl]="periodFormControl" [afAnnounceIfOptional]="true"
[afInvalid]="formControlIsInvalid(periodFormControl)" [formControl]="periodFormControl"
(afOnChange)="openChangePeriodDialogIfValuesExist()" [afInvalid]="formControlIsInvalid(periodFormControl)"
></digi-ng-form-select> (afOnChange)="openChangePeriodDialogIfValuesExist()"
></digi-ng-form-select>
<div> <div>
<digi-form-fieldset <digi-form-fieldset
af-legend="Har ni under perioden tillhandahållit språkstöd till deltagaren?" af-legend="Har ni under perioden tillhandahållit språkstöd till deltagaren?"
af-name="languageSupport" af-name="languageSupport"
af-form="periodisk-redovisning-form" af-form="periodisk-redovisning-form"
>
<digi-ng-form-radiobutton-group
[afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
[afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]"
[formControl]="hasOfferedLanguageSupportFormControl"
[afRequired]="true"
class="periodisk-redovisning-form__radio-buttons"
[ngClass]="{'periodisk-redovisning-form__radio-buttons--invalid': formControlIsInvalid(hasOfferedLanguageSupportFormControl)}"
></digi-ng-form-radiobutton-group>
</digi-form-fieldset>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
*ngIf="formControlIsInvalid(hasOfferedLanguageSupportFormControl)"
af-variation="error"
> >
Ett val är obligatoriskt <digi-ng-form-radiobutton-group
</digi-form-validation-message> [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
[afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]"
[formControl]="hasOfferedLanguageSupportFormControl"
[afRequired]="true"
class="periodisk-redovisning-form__radio-buttons"
[ngClass]="{'periodisk-redovisning-form__radio-buttons--invalid': formControlIsInvalid(hasOfferedLanguageSupportFormControl)}"
></digi-ng-form-radiobutton-group>
</digi-form-fieldset>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
*ngIf="formControlIsInvalid(hasOfferedLanguageSupportFormControl)"
af-variation="error"
>
Ett val är obligatoriskt
</digi-form-validation-message>
</div>
</div>
<div>
<digi-form-fieldset
af-legend="Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren?"
af-name="jobOffered"
af-form="periodisk-redovisning-form"
>
<digi-ng-form-radiobutton-group
[afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
[afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]"
[formControl]="hasOfferedJobFormControl"
class="periodisk-redovisning-form__radio-buttons"
[ngClass]="{'periodisk-redovisning-form__radio-buttons--invalid': formControlIsInvalid(hasOfferedJobFormControl)}"
></digi-ng-form-radiobutton-group>
</digi-form-fieldset>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
*ngIf="formControlIsInvalid(hasOfferedJobFormControl)"
af-variation="error"
>
Ett val är obligatoriskt
</digi-form-validation-message>
</div>
</div>
<div>
<h2>Aktiviteter från Gemensam planering</h2>
<p>
Du kan endast välja de aktiviteter som planerats i tidigare inskickad Gemensam planering för deltagaren.
Om du vill redovisa en aktivitet som inte finns i listan, måste du först uppdatera den Gemensamma
planeringen. Sedan kan du redovisa aktiviteten i Periodisk redovisning.
</p>
</div> </div>
</div>
<div>
<digi-form-fieldset <digi-form-fieldset
af-legend="Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren?" af-legend="Ange aktiviteter som har utförts under perioden"
af-name="jobOffered" af-name="activities"
af-form="periodisk-redovisning-form" af-form="periodisk-redovisning-form"
> >
<digi-ng-form-radiobutton-group <div class="periodisk-redovisning-form__activities">
[afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL" <div class="periodisk-redovisning-form__no-activities-has-been-conducted-checkbox">
[afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]" <digi-ng-form-checkbox
[formControl]="hasOfferedJobFormControl" formControlName="noActivitiesHasBeenConducted"
class="periodisk-redovisning-form__radio-buttons" afLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
[ngClass]="{'periodisk-redovisning-form__radio-buttons--invalid': formControlIsInvalid(hasOfferedJobFormControl)}" [afInvalid]="this.shouldValidate$.value && !!formErrors?.activitiesMismatch"
></digi-ng-form-radiobutton-group> ></digi-ng-form-checkbox>
</digi-form-fieldset> <div aria-atomic="true" role="alert">
<div aria-atomic="true" role="alert"> <digi-form-validation-message
<digi-form-validation-message *ngIf="formControlIsInvalid(hasOfferedJobFormControl)" af-variation="error"> af-variation="error"
Ett val är obligatoriskt *ngIf="this.shouldValidate$.value && !!formErrors?.activitiesMismatch"
</digi-form-validation-message> >
</div> {{formErrors?.activitiesMismatch}}
</div> </digi-form-validation-message>
</div>
</div>
<div> <ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef">
<h2>Aktiviteter från Gemensam planering</h2> <div
<p> [formArrayName]="ACTIVITES_FORM_NAME"
Du kan endast välja de aktiviteter som planerats i tidigare inskickad Gemensam planering för deltagaren. class="periodisk-redovisning-form__activity"
Om du vill redovisa en aktivitet som inte finns i listan, måste du först uppdatera den Gemensamma *ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
planeringen. Sedan kan du redovisa aktiviteten i Periodisk redovisning.
</p>
</div>
<digi-form-fieldset
af-legend="Ange aktiviteter som har utförts under perioden"
af-name="activities"
af-form="periodisk-redovisning-form"
>
<div class="periodisk-redovisning-form__activities">
<div class="periodisk-redovisning-form__no-activities-has-been-conducted-checkbox">
<digi-ng-form-checkbox
formControlName="noActivitiesHasBeenConducted"
afLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
[afInvalid]="this.shouldValidate$.value && !!formErrors?.activitiesMismatch"
></digi-ng-form-checkbox>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
af-variation="error"
*ngIf="this.shouldValidate$.value && !!formErrors?.activitiesMismatch"
> >
{{formErrors?.activitiesMismatch}} <ng-container [formGroupName]="i">
</digi-form-validation-message>
</div>
</div>
<ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef">
<div
[formArrayName]="ACTIVITES_FORM_NAME"
class="periodisk-redovisning-form__activity"
*ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
>
<ng-container [formGroupName]="i">
<digi-ng-form-checkbox
#isSelected
formControlName="isSelected"
[afLabel]="activitiesFormArrayMetadata[i].name"
></digi-ng-form-checkbox>
<div class="periodisk-redovisning-form__activity-location" *ngIf="isSelected.currentValue">
<digi-ng-form-checkbox <digi-ng-form-checkbox
formControlName="performedRemotely" #isSelected
[afInvalid]="activityLocationIsInvalid(activityFormGroup)" formControlName="isSelected"
afLabel="Utfört på distans" [afLabel]="activitiesFormArrayMetadata[i].name"
></digi-ng-form-checkbox> ></digi-ng-form-checkbox>
<digi-ng-form-checkbox <div class="periodisk-redovisning-form__activity-location" *ngIf="isSelected.currentValue">
formControlName="performedPhysically" <digi-ng-form-checkbox
[afInvalid]="activityLocationIsInvalid(activityFormGroup)" formControlName="performedRemotely"
afLabel="Utfört på plats" [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
></digi-ng-form-checkbox> afLabel="Utfört på distans"
<div aria-atomic="true" role="alert"> ></digi-ng-form-checkbox>
<ng-container *ngIf="formControlIsInvalid(activityFormGroup)"> <digi-ng-form-checkbox
<digi-form-validation-message formControlName="performedPhysically"
*ngFor="let errorText of errorsToArray(activityFormGroup.errors)" [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
af-variation="error" afLabel="Utfört på plats"
> ></digi-ng-form-checkbox>
{{errorText}} <div aria-atomic="true" role="alert">
</digi-form-validation-message> <ng-container *ngIf="formControlIsInvalid(activityFormGroup)">
</ng-container> <digi-form-validation-message
*ngFor="let errorText of errorsToArray(activityFormGroup.errors)"
af-variation="error"
>
{{errorText}}
</digi-form-validation-message>
</ng-container>
</div>
</div> </div>
</div> </ng-container>
</ng-container> </div>
</div> </ng-container>
</ng-container> </div>
</div> </digi-form-fieldset>
</digi-form-fieldset>
<footer class="periodisk-redovisning-form__footer"> <footer class="periodisk-redovisning-form__footer">
<div class="periodisk-redovisning-form__cta-wrapper"> <div class="periodisk-redovisning-form__cta-wrapper">
<digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button> <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
<msfa-back-link [showIcon]="false" [asButton]="true" route="../"> <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
<span>Avbryt</span> <span>Avbryt</span>
<span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span> <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
</msfa-back-link> </msfa-back-link>
</div> </div>
</footer> </footer>
</form> </form>
<digi-ng-dialog <digi-ng-dialog
[afActive]="confirmDialogIsOpen$ | async" [afActive]="confirmDialogIsOpen$ | async"
(afOnPrimaryClick)="submitAndCloseConfirmDialog(genomforandeReferens)" (afOnPrimaryClick)="submitAndCloseConfirmDialog(genomforandeReferens)"
(afOnInactive)="cancelConfirmDialog()" (afOnInactive)="cancelConfirmDialog()"
afHeadingLevel="h2" afHeadingLevel="h2"
afPrimaryButtonText="Skicka in" afPrimaryButtonText="Skicka in"
afSecondaryButtonText="Avbryt" afSecondaryButtonText="Avbryt"
(afOnSecondaryClick)="cancelConfirmDialog()" (afOnSecondaryClick)="cancelConfirmDialog()"
afHeading="Vill du skicka in Periodisk redovisning" afHeading="Vill du skicka in Periodisk redovisning"
afAriaLabel="Förhandsgranska och skicka in Periodisk redovisning" afAriaLabel="Förhandsgranska och skicka in Periodisk redovisning"
id="confirm-periodisk-redovisning-form" id="confirm-periodisk-redovisning-form"
>
<msfa-loader *ngIf="submitIsLoading$ | async" type="absolute"></msfa-loader>
<msfa-report-description-list [avrop]="avrop">
<ng-container *ngIf="submitData$ | async; let submitData; else loadingRef">
<dt>Har ni under perioden tillhandahållit språkstöd till deltagaren:</dt>
<dd>{{submitData.hasOfferedLanguageSupport ? 'Ja' : 'Nej' }}</dd>
<dt>Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren:</dt>
<dd>{{submitData.hasOfferedJob ? 'Ja' : 'Nej' }}</dd>
<dt>Aktiviteter som utförts under perioden:</dt>
<dd *ngIf="submitData.activities.length === 0; else activityList">
Deltagaren har inte deltagit i några aktiviteter denna period
</dd>
<ng-template #activityList>
<dd *ngFor="let activity of submitData.activities" class="periodisk-redovisning-form__activity-item">
<digi-icon-check-circle
class="msfa__digi-icon periodisk-redovisning-form__activity-check"
aria-hidden="true"
></digi-icon-check-circle>
<span>
{{getActivityMetadata(activity.id).name}}: {{ activity.performedRemotely &&
activity.performedPhysically ? 'på distans och på plats' : activity.performedRemotely ? 'på distans'
: 'på plats'}}
</span>
</dd>
</ng-template>
</ng-container>
</msfa-report-description-list>
<digi-notification-alert
*ngIf="submitError$ | async as error"
af-variation="danger"
af-heading="Någonting gick fel"
> >
<p>Kunde inte spara Periodisk redovisning. Ladda om sidan och försök igen.</p> <msfa-loader *ngIf="submitIsLoading$ | async" type="absolute"></msfa-loader>
<p *ngIf="error.message" class="msfa__small-text">{{error.message}}</p> <msfa-report-description-list [avrop]="avrop">
</digi-notification-alert> <ng-container *ngIf="submitData$ | async; let submitData; else loadingRef">
</digi-ng-dialog> <dt>Har ni under perioden tillhandahållit språkstöd till deltagaren:</dt>
<digi-ng-dialog <dd>{{submitData.hasOfferedLanguageSupport ? 'Ja' : 'Nej' }}</dd>
[afActive]="changePeriodDialogIsOpen$ | async"
(afOnPrimaryClick)="closePeriodDialogAndKeepForm()" <dt>Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren:</dt>
(afOnInactive)="closePeriodDialogAndKeepForm()" <dd>{{submitData.hasOfferedJob ? 'Ja' : 'Nej' }}</dd>
afHeadingLevel="h2"
afPrimaryButtonText="Ja, behåll val" <dt>Aktiviteter som utförts under perioden:</dt>
afSecondaryButtonText="Nej, rensa formuläret" <dd *ngIf="submitData.activities.length === 0; else activityList">
(afOnSecondaryClick)="closePeriodDialogAndResetForm()" Deltagaren har inte deltagit i några aktiviteter denna period
afHeading="Du har bytt period" </dd>
afAriaLabel="Du har bytt period. Vill du behålla de svar och aktiviteter du valt" <ng-template #activityList>
id="confirm-periodisk-redovisning-form" <dd *ngFor="let activity of submitData.activities" class="periodisk-redovisning-form__activity-item">
> <digi-icon-check-circle
<p>Vill du behålla de svar och aktiviteter du tidigare valt?</p> class="msfa__digi-icon periodisk-redovisning-form__activity-check"
</digi-ng-dialog> aria-hidden="true"
></digi-icon-check-circle>
<span>
{{getActivityMetadata(activity.id).name}}: {{ activity.performedRemotely &&
activity.performedPhysically ? 'på distans och på plats' : activity.performedRemotely ? 'på
distans' : 'på plats'}}
</span>
</dd>
</ng-template>
</ng-container>
</msfa-report-description-list>
<digi-notification-alert
*ngIf="submitError$ | async as error"
af-variation="danger"
af-heading="Någonting gick fel"
>
<p>Kunde inte spara Periodisk redovisning. Ladda om sidan och försök igen.</p>
<p *ngIf="error.message" class="msfa__small-text">{{error.message}}</p>
</digi-notification-alert>
</digi-ng-dialog>
<digi-ng-dialog
[afActive]="changePeriodDialogIsOpen$ | async"
(afOnPrimaryClick)="closePeriodDialogAndKeepForm()"
(afOnInactive)="closePeriodDialogAndKeepForm()"
afHeadingLevel="h2"
afPrimaryButtonText="Ja, behåll val"
afSecondaryButtonText="Nej, rensa formuläret"
(afOnSecondaryClick)="closePeriodDialogAndResetForm()"
afHeading="Du har bytt period"
afAriaLabel="Du har bytt period. Vill du behålla de svar och aktiviteter du valt"
id="confirm-periodisk-redovisning-form"
>
<p>Vill du behålla de svar och aktiviteter du tidigare valt?</p>
</digi-ng-dialog>
</ng-container>
</ng-template> </ng-template>
</div> </div>
</msfa-report-layout> </msfa-report-layout>
</msfa-layout> </msfa-layout>
<ng-template #failedGemensamPlaneringCheck>
<div class="periodisk-redovisning-form__failed-gemensam-planering-check-notification">
<digi-notification-alert
af-heading="Kan inte skapa gemensam planering"
af-size="M"
af-variation="info"
af-closeable="false"
>
<p>En Gemensam planering måste ha mottagits för att en Periodisk redovisning ska kunna skapas.</p>
</digi-notification-alert>
</div>
<p>
<msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
</p>
</ng-template>
<ng-template #skeletonRef> <ng-template #skeletonRef>
<digi-ng-skeleton-base <digi-ng-skeleton-base
[afCount]="3" [afCount]="3"

View File

@@ -66,4 +66,8 @@
&__activity-check { &__activity-check {
color: var(--digi--ui--color--border--success); color: var(--digi--ui--color--border--success);
} }
&__failed-gemensam-planering-check-notification {
margin-bottom: $digi--layout--gutter--l;
}
} }

View File

@@ -30,6 +30,7 @@ export interface AvropResponse {
handledareCiamUserId: string; handledareCiamUserId: string;
handledare: string; handledare: string;
recievedTimestamp: Date; recievedTimestamp: Date;
hasGemensamPlanering: boolean;
} }
export interface AvropApiResponse { export interface AvropApiResponse {

View File

@@ -26,6 +26,7 @@ export interface Avrop extends AvropCompact {
handledareCiamUserId: string; handledareCiamUserId: string;
handledare: string; handledare: string;
receivedTimestamp: Date; receivedTimestamp: Date;
hasGemensamPlanering: boolean;
} }
export interface AvropCompactData { export interface AvropCompactData {
@@ -52,6 +53,7 @@ export function mapAvropResponseToAvrop(data: AvropResponse): Avrop {
handledareCiamUserId, handledareCiamUserId,
handledare, handledare,
recievedTimestamp, recievedTimestamp,
hasGemensamPlanering,
} = data; } = data;
return { return {
@@ -73,5 +75,6 @@ export function mapAvropResponseToAvrop(data: AvropResponse): Avrop {
handledareCiamUserId: handledareCiamUserId, handledareCiamUserId: handledareCiamUserId,
handledare, handledare,
receivedTimestamp: new Date(recievedTimestamp), receivedTimestamp: new Date(recievedTimestamp),
hasGemensamPlanering,
}; };
} }