Merge pull request #6468 from NMDSdevopsServiceAdm/feat/1587-dq-reaso…

…n-for-leave-page

Feat/1587 dq reason for leave page

backend/migrations/20250103160000-updateTextForWorkerLeaveReasons.js

@@ -0,0 +1,83 @@
+'use strict';
+const models = require('../server/models/index');
+
+const allReasons = [
+  {
+    id: 1,
+    seq: 1,
+    oldText: 'They moved to another adult social care employer',
+    newText: 'The worker moved to another adult social care employer',
+  },
+  {
+    id: 2,
+    seq: 2,
+    oldText: 'They moved to a role in the health sector',
+    newText: 'The worker moved to a role in the health sector',
+  },
+  {
+    id: 3,
+    seq: 3,
+    oldText: 'They moved to a different sector (e.g. retail)',
+    newText: 'The worker moved to a different sector (for example, retail)',
+  },
+  {
+    id: 4,
+    seq: 4,
+    oldText: 'They moved to another role in this organisation',
+    newText: 'The worker moved to a different role in this organisation',
+  },
+  {
+    id: 5,
+    seq: 5,
+    oldText: 'The worker chose to leave (destination unknown)',
+    newText: 'The worker chose to leave (destination not known)',
+  },
+  { id: 6, seq: 6, oldText: 'The worker retired', newText: 'The worker retired' },
+  {
+    id: 7,
+    seq: 7,
+    oldText: 'Employer terminated their employment',
+    newText: 'The worker had their employment terminated',
+  },
+  { id: 8, seq: 8, oldText: 'Other', newText: 'For a reason not listed' },
+  { id: 9, seq: 9, oldText: 'Not known', newText: 'Reason not known' },
+];
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface) {
+    return queryInterface.sequelize.transaction(async (transaction) => {
+      for (const reason of allReasons) {
+        await models.workerLeaveReasons.update(
+          {
+            reason: reason.newText,
+          },
+          {
+            where: {
+              id: reason.id,
+            },
+            transaction,
+          },
+        );
+      }
+    });
+  },
+
+  async down(queryInterface) {
+    return queryInterface.sequelize.transaction(async (transaction) => {
+      for (const reason of allReasons) {
+        await models.workerLeaveReasons.update(
+          {
+            reason: reason.oldText,
+          },
+          {
+            where: {
+              id: reason.id,
+            },
+            transaction,
+          },
+        );
+      }
+    });
+  },
+};

frontend/src/app/core/test-utils/MockWorkerService.ts

@@ -9,7 +9,7 @@ import {
 } from '@core/model/training.model';
 import { URLStructure } from '@core/model/url.model';
 import { Worker, WorkerEditResponse, WorkersResponse } from '@core/model/worker.model';
-import { NewWorkerMandatoryInfo, WorkerService } from '@core/services/worker.service';
+import { NewWorkerMandatoryInfo, Reason, WorkerService } from '@core/services/worker.service';
 import { build, fake, oneOf, perBuild, sequence } from '@jackfranklin/test-data-bot';
 import { Observable, of } from 'rxjs';
 
@@ -371,6 +371,18 @@ export const mockAvailableQualifications: AvailableQualificationsResponse[] = [
   },
 ];
 
+export const mockLeaveReasons: Reason[] = [
+  { id: 1, reason: 'The worker moved to another adult social care employer' },
+  { id: 2, reason: 'The worker moved to a role in the health sector' },
+  { id: 3, reason: 'The worker moved to a different sector (for example, retail)' },
+  { id: 4, reason: 'The worker moved to a different role in this organisation' },
+  { id: 5, reason: 'The worker chose to leave (destination unknown)' },
+  { id: 6, reason: 'The worker retired' },
+  { id: 7, reason: 'The worker had their employment terminated' },
+  { id: 8, reason: 'For a reason not listed' },
+  { id: 9, reason: 'Reason not known' },
+];
+
 export const trainingRecord = {
   id: 10,
   uid: 'someTrainingUid',
@@ -487,6 +499,10 @@ export class MockWorkerService extends WorkerService {
   ): Observable<AvailableQualificationsResponse[]> {
     return of(mockAvailableQualifications);
   }
+
+  getLeaveReasons(): Observable<Reason[]> {
+    return of(mockLeaveReasons);
+  }
 }
 
 @Injectable()

frontend/src/app/features/workers/delete-staff-record/delete-staff-record.component.html

@@ -0,0 +1,113 @@
+<app-error-summary
+  *ngIf="submitted && form.invalid"
+  [formErrorsMap]="formErrorsMap"
+  [form]="form"
+  [serverError]="serverError"
+></app-error-summary>
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+    <span class="govuk-caption-l" data-testid="section-heading">{{ worker.nameOrId }}</span>
+    <h1 class="govuk-heading-l">Delete staff record</h1>
+
+    <h2 class="govuk-heading-m">Are you sure you want to delete this staff record?</h2>
+    <p>
+      <strong>This action cannot be undone.</strong> It will permanently delete this staff record and any related
+      training and qualification records (and certificates).
+    </p>
+
+    <form #formEl novalidate (ngSubmit)="onSubmit()" [formGroup]="form" id="server-error">
+      <div class="govuk-form-group">
+        <fieldset class="govuk-fieldset">
+          <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+            <h2 class="govuk-heading-m govuk-!-margin-bottom-0">Select why you want to delete this staff record</h2>
+          </legend>
+          <div class="govuk-radios">
+            <ng-container *ngFor="let reason of reasons; index as index">
+              <div class="govuk-radios__item">
+                <input
+                  class="govuk-radios__input"
+                  [id]="'reason-' + index"
+                  name="reason"
+                  type="radio"
+                  [value]="reason.id"
+                  formControlName="reason"
+                />
+                <label class="govuk-label govuk-radios__label" [for]="'reason-' + index"> {{ reason.reason }} </label>
+              </div>
+              <div
+                *ngIf="reason.id === otherReasonId"
+                class="govuk-radios__conditional"
+                [class.govuk-radios__conditional--hidden]="selectedReasonId !== otherReasonId"
+                id="detailForOtherReason"
+                data-testid="other-reason-details"
+              >
+                <div
+                  class="govuk-form-group"
+                  [class.govuk-form-group--error]="submitted && form.get('details').invalid"
+                >
+                  <label class="govuk-label" for="details"> Provide details (optional) </label>
+                  <span *ngIf="submitted && form.get('details').invalid" id="details-error" class="govuk-error-message">
+                    <span class="govuk-visually-hidden">Error:</span>
+                    {{ getFirstErrorMessage('details') }}
+                  </span>
+                  <textarea
+                    class="govuk-textarea govuk-!-margin-bottom-1"
+                    [class.govuk-input--error]="submitted && form.get('details').invalid"
+                    rows="5"
+                    id="details"
+                    name="details"
+                    formControlName="details"
+                    (input)="onInputDetails($event)"
+                  ></textarea>
+                  <app-character-count
+                    [textToCount]="detailsText"
+                    [max]="otherReasonDetailMaxLength"
+                  ></app-character-count>
+                </div>
+              </div>
+            </ng-container>
+          </div>
+        </fieldset>
+      </div>
+      <div
+        class="govuk-form-group govuk-!-margin-top-8"
+        [class.govuk-form-group--error]="submitted && form.get('confirmDelete').invalid"
+      >
+        <span
+          *ngIf="submitted && form.get('confirmDelete').invalid"
+          id="confirmDelete-error"
+          class="govuk-error-message"
+        >
+          <span class="govuk-visually-hidden">Error:</span>
+          {{ getFirstErrorMessage('confirmDelete') }}
+        </span>
+        <div class="govuk-checkboxes__item govuk-checkboxes__item-align-middle">
+          <input
+            class="govuk-checkboxes__input"
+            [class.govuk-input--error]="submitted && form.get('confirmDelete').invalid"
+            id="confirmDelete"
+            name="confirmDelete"
+            type="checkbox"
+            value="confirmDelete"
+            formControlName="confirmDelete"
+          />
+          <label class="govuk-label govuk-checkboxes__label" for="confirmDelete">
+            I know that this action will permanently delete this staff record and any training and qualification records
+            (and certificates) related to it.
+          </label>
+        </div>
+      </div>
+      <div class="govuk-button-group govuk-!-margin-top-8">
+        <button class="govuk-button govuk-button--warning govuk-!-margin-right-9">Delete this staff record</button>
+        <span class="govuk-visually-hidden">or</span>
+        <a
+          [routerLink]="['../staff-record-summary']"
+          class="govuk-link govuk-link--no-visited-state govuk-button--link govuk-!-margin-left-9"
+        >
+          Cancel
+        </a>
+      </div>
+    </form>
+  </div>
+</div>

frontend/src/app/features/workers/delete-staff-record/delete-staff-record.component.scss

@@ -0,0 +1,32 @@
+@import 'govuk-frontend/govuk/base';
+
+.govuk-checkboxes__item-align-middle {
+  display: flex;
+  align-items: center;
+  padding-left: 0;
+  margin-right: -50px;
+
+  .govuk-checkboxes__input {
+    display: block;
+    position: unset;
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .govuk-checkboxes__label {
+    padding: 0;
+    padding-left: 10px;
+    display: block;
+    position: unset;
+  }
+
+  .govuk-checkboxes__label::before {
+    top: 5px;
+    left: 0px;
+  }
+
+  .govuk-checkboxes__label::after {
+    top: 5 + 11px;
+    left: 0 + 9px;
+  }
+}