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.

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html

@@ -23,221 +23,243 @@
         </digi-notification-alert>
         <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
       </div>
+
       <ng-template #formRef>
-        <form
-          *ngIf="periods$ | async as periods; else loadingRef"
-          class="periodisk-redovisning-form__form"
-          [formGroup]="formGroup"
-          (ngSubmit)="openConfirmDialog()"
-          id="periodisk-redovisning-form"
-        >
-          <digi-ng-form-select
-            afLabel="Period"
-            [afSelectItems]="periodsToFormselectItems(periods)"
-            [afDisableValidStyle]="true"
-            [afRequired]="true"
-            [afAnnounceIfOptional]="true"
-            [formControl]="periodFormControl"
-            [afInvalid]="formControlIsInvalid(periodFormControl)"
-            (afOnChange)="openChangePeriodDialogIfValuesExist()"
-          ></digi-ng-form-select>
+        <ng-container *ngIf="avrop.hasGemensamPlanering; else failedGemensamPlaneringCheck">
+          <form
+            *ngIf="periods$ | async as periods; else loadingRef"
+            class="periodisk-redovisning-form__form"
+            [formGroup]="formGroup"
+            (ngSubmit)="openConfirmDialog()"
+            id="periodisk-redovisning-form"
+          >
+            <digi-ng-form-select
+              afLabel="Period"
+              [afSelectItems]="periodsToFormselectItems(periods)"
+              [afDisableValidStyle]="true"
+              [afRequired]="true"
+              [afAnnounceIfOptional]="true"
+              [formControl]="periodFormControl"
+              [afInvalid]="formControlIsInvalid(periodFormControl)"
+              (afOnChange)="openChangePeriodDialogIfValuesExist()"
+            ></digi-ng-form-select>
 
-          <div>
-            <digi-form-fieldset
-              af-legend="Har ni under perioden tillhandahållit språkstöd till deltagaren?"
-              af-name="languageSupport"
-              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"
+            <div>
+              <digi-form-fieldset
+                af-legend="Har ni under perioden tillhandahållit språkstöd till deltagaren?"
+                af-name="languageSupport"
+                af-form="periodisk-redovisning-form"
               >
-                Ett val är obligatoriskt
-              </digi-form-validation-message>
+                <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-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>
             <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-legend="Ange aktiviteter som har utförts under perioden"
+              af-name="activities"
               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 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}}
+                    </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>
-
-          <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"
+                <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"
                   >
-                    {{formErrors?.activitiesMismatch}}
-                  </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">
+                    <ng-container [formGroupName]="i">
                       <digi-ng-form-checkbox
-                        formControlName="performedRemotely"
-                        [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
-                        afLabel="Utfört på distans"
+                        #isSelected
+                        formControlName="isSelected"
+                        [afLabel]="activitiesFormArrayMetadata[i].name"
                       ></digi-ng-form-checkbox>
-                      <digi-ng-form-checkbox
-                        formControlName="performedPhysically"
-                        [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
-                        afLabel="Utfört på plats"
-                      ></digi-ng-form-checkbox>
-                      <div aria-atomic="true" role="alert">
-                        <ng-container *ngIf="formControlIsInvalid(activityFormGroup)">
-                          <digi-form-validation-message
-                            *ngFor="let errorText of errorsToArray(activityFormGroup.errors)"
-                            af-variation="error"
-                          >
-                            {{errorText}}
-                          </digi-form-validation-message>
-                        </ng-container>
+                      <div class="periodisk-redovisning-form__activity-location" *ngIf="isSelected.currentValue">
+                        <digi-ng-form-checkbox
+                          formControlName="performedRemotely"
+                          [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
+                          afLabel="Utfört på distans"
+                        ></digi-ng-form-checkbox>
+                        <digi-ng-form-checkbox
+                          formControlName="performedPhysically"
+                          [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
+                          afLabel="Utfört på plats"
+                        ></digi-ng-form-checkbox>
+                        <div aria-atomic="true" role="alert">
+                          <ng-container *ngIf="formControlIsInvalid(activityFormGroup)">
+                            <digi-form-validation-message
+                              *ngFor="let errorText of errorsToArray(activityFormGroup.errors)"
+                              af-variation="error"
+                            >
+                              {{errorText}}
+                            </digi-form-validation-message>
+                          </ng-container>
+                        </div>
                       </div>
-                    </div>
-                  </ng-container>
-                </div>
-              </ng-container>
-            </div>
-          </digi-form-fieldset>
+                    </ng-container>
+                  </div>
+                </ng-container>
+              </div>
+            </digi-form-fieldset>
 
-          <footer class="periodisk-redovisning-form__footer">
-            <div class="periodisk-redovisning-form__cta-wrapper">
-              <digi-button af-type="submit" af-size="m">Förhandsgranska</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>
-            </div>
-          </footer>
-        </form>
+            <footer class="periodisk-redovisning-form__footer">
+              <div class="periodisk-redovisning-form__cta-wrapper">
+                <digi-button af-type="submit" af-size="m">Förhandsgranska</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>
+              </div>
+            </footer>
+          </form>
 
-        <digi-ng-dialog
-          [afActive]="confirmDialogIsOpen$ | async"
-          (afOnPrimaryClick)="submitAndCloseConfirmDialog(genomforandeReferens)"
-          (afOnInactive)="cancelConfirmDialog()"
-          afHeadingLevel="h2"
-          afPrimaryButtonText="Skicka in"
-          afSecondaryButtonText="Avbryt"
-          (afOnSecondaryClick)="cancelConfirmDialog()"
-          afHeading="Vill du skicka in Periodisk redovisning"
-          afAriaLabel="Förhandsgranska och skicka in Periodisk redovisning"
-          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"
+          <digi-ng-dialog
+            [afActive]="confirmDialogIsOpen$ | async"
+            (afOnPrimaryClick)="submitAndCloseConfirmDialog(genomforandeReferens)"
+            (afOnInactive)="cancelConfirmDialog()"
+            afHeadingLevel="h2"
+            afPrimaryButtonText="Skicka in"
+            afSecondaryButtonText="Avbryt"
+            (afOnSecondaryClick)="cancelConfirmDialog()"
+            afHeading="Vill du skicka in Periodisk redovisning"
+            afAriaLabel="Förhandsgranska och skicka in Periodisk redovisning"
+            id="confirm-periodisk-redovisning-form"
           >
-            <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>
+            <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>
+              <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>
     </div>
   </msfa-report-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>
   <digi-ng-skeleton-base
     [afCount]="3"

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.scss

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

apps/mina-sidor-fa/src/app/shared/models/api/avrop.response.model.ts

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

apps/mina-sidor-fa/src/app/shared/models/avrop.model.ts

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