feat(periodisk-redovisning): Added warning when period is not over yet. (TV-841)

Squashed commit of the following:

commit c55c055112140ed0308944848324552410d54af2
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Oct 27 15:38:05 2021 +0200

    Updated text

commit 76c4ba4a2364640a3fdd86dff1d2f3cc505a01fa
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Oct 27 10:22:19 2021 +0200

    Added warning if no periods are available

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

@@ -26,154 +26,156 @@
 
       <ng-template #formRef>
         <ng-container *ngIf="avrop.hasGemensamPlanering; else failedGemensamPlaneringCheck">
-          <form
+          <ng-container *ngIf="periods$ | async as periods; else loadingRef">
-            *ngIf="periods$ | async as periods; else loadingRef"
+            <form
-            class="periodisk-redovisning-form__form"
+              *ngIf="periods.length; else noPeriodsAvailable"
-            [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"
-              [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"
-                >
-                  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>
-
-            <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">
+              <digi-ng-form-select
-                <div class="periodisk-redovisning-form__no-activities-has-been-conducted-checkbox">
+                afLabel="Period"
-                  <digi-ng-form-checkbox
+                [afSelectItems]="periodsToFormselectItems(periods)"
-                    formControlName="noActivitiesHasBeenConducted"
+                [afDisableValidStyle]="true"
-                    afLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
+                [afRequired]="true"
-                    [afInvalid]="this.shouldValidate$.value && !!formErrors?.activitiesMismatch"
+                [afAnnounceIfOptional]="true"
-                  ></digi-ng-form-checkbox>
+                [formControl]="periodFormControl"
-                  <div aria-atomic="true" role="alert">
+                [afInvalid]="formControlIsInvalid(periodFormControl)"
-                    <digi-form-validation-message
+                (afOnChange)="openChangePeriodDialogIfValuesExist()"
-                      af-variation="error"
+              ></digi-ng-form-select>
-                      *ngIf="this.shouldValidate$.value && !!formErrors?.activitiesMismatch"
-                    >
-                      {{formErrors?.activitiesMismatch}}
-                    </digi-form-validation-message>
-                  </div>
-                </div>
 
-                <ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef">
+              <div>
-                  <div
+                <digi-form-fieldset
-                    [formArrayName]="ACTIVITES_FORM_NAME"
+                  af-legend="Har ni under perioden tillhandahållit språkstöd till deltagaren?"
-                    class="periodisk-redovisning-form__activity"
+                  af-name="languageSupport"
-                    *ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
+                  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"
                   >
-                    <ng-container [formGroupName]="i">
+                    Ett val är obligatoriskt
-                      <digi-ng-form-checkbox
+                  </digi-form-validation-message>
-                        #isSelected
+                </div>
-                        formControlName="isSelected"
-                        [afLabel]="activitiesFormArrayMetadata[i].name"
-                      ></digi-ng-form-checkbox>
-                      <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>
-                    </ng-container>
-                  </div>
-                </ng-container>
               </div>
-            </digi-form-fieldset>
 
-            <footer class="periodisk-redovisning-form__footer">
+              <div>
-              <div class="periodisk-redovisning-form__cta-wrapper">
+                <digi-form-fieldset
-                <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
+                  af-legend="Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren?"
-                <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
+                  af-name="jobOffered"
-                  <span>Avbryt</span>
+                  af-form="periodisk-redovisning-form"
-                  <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
+                >
-                </msfa-back-link>
+                  <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>
-            </footer>
+
-          </form>
+              <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"
+                      >
+                        {{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">
+                          <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>
+                      </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>
+          </ng-container>
 
           <digi-ng-dialog
             [afActive]="confirmDialogIsOpen$ | async"
@@ -245,19 +247,36 @@
 </msfa-layout>
 
 <ng-template #failedGemensamPlaneringCheck>
-  <div class="periodisk-redovisning-form__failed-gemensam-planering-check-notification">
+  <div class="periodisk-redovisning-form__warning">
     <digi-notification-alert
-      af-heading="Kan inte skapa gemensam planering"
+      af-heading="Kan inte skapa Periodisk redovisning"
-      af-size="M"
+      af-size="l"
       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>
+  </div>
+</ng-template>
+
+<ng-template #noPeriodsAvailable>
+  <div class="periodisk-redovisning-form__warning">
+    <digi-notification-alert
+      af-heading="Kan inte skapa Periodisk redovisning"
+      af-size="l"
+      af-variation="warning"
+      af-closeable="false"
+    >
+      <p>
+        Du kan inte skapa en Periodisk redovisning eftersom perioden fortfarande pågår. Första dagen efter att perioden
+        är slut kan du skapa och skicka en Periodisk redovisning.
+      </p>
+    </digi-notification-alert>
+
+    <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+  </div>
 </ng-template>
 
 <ng-template #skeletonRef>

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

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

config/proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "https://mina-sidor-fa-utv.tocp.arbetsformedlingen.se",
+    "target": "https://mina-sidor-fa-test.tocp.arbetsformedlingen.se",
     "secure": false,
     "changeOrigin": true
   },