From 49d25075a59fef85544d559134d65cb1a4011d93 Mon Sep 17 00:00:00 2001
From: halcyonjac <halcyon@judicialappointments.digital>
Date: Mon, 20 Nov 2023 13:05:53 +0000
Subject: [PATCH] Update Monitor component

---
 .../PreSelectionDayQuestionnairesRequests.vue | 140 +++++++++++
 .../Tasks/Task/CandidateForm/Monitor.vue      | 229 +++++++++++++++++-
 2 files changed, 366 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ModalViews/PreSelectionDayQuestionnairesRequests.vue

diff --git a/src/components/ModalViews/PreSelectionDayQuestionnairesRequests.vue b/src/components/ModalViews/PreSelectionDayQuestionnairesRequests.vue
new file mode 100644
index 000000000..cc0811481
--- /dev/null
+++ b/src/components/ModalViews/PreSelectionDayQuestionnairesRequests.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div class="modal__title govuk-!-padding-2 govuk-heading-m">
+      Pre-selection day questionnaire consent form {{ typeOfEmail }}
+    </div>
+    <div class="modal__content govuk-!-margin-6">
+      <div class="govuk-grid-row">
+        <form
+          ref="formRef"
+        >
+          <div class="govuk-!-margin-bottom-5">
+            <span class="govuk-body-m">Before proceeding, please confirm that you wish to send a {{ typeOfEmail }} to </span>
+            <span class="govuk-body-m govuk-!-font-weight-bold">{{ numberOfCandidates }} candidate(s) </span>
+            <span class="govuk-body-m">and the email template contains all required information</span>
+          </div>
+          <ActionButton
+            v-if="hasPermissions([
+              PERMISSIONS.applications.permissions.canReadApplications.value,
+              PERMISSIONS.applications.permissions.canUpdateApplications.value,
+              PERMISSIONS.notifications.permissions.canCreateNotifications.value
+            ])"
+            type="primary"
+            class="govuk-!-margin-right-3 govuk-!-top-3"
+            :action="send"
+          >
+            {{ buttonText }}
+          </ActionButton>
+          <button
+            class="govuk-button govuk-button--secondary govuk-!-margin-right-3"
+            @click.prevent="closeModal"
+          >
+            Cancel
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { functions } from '@/firebase';
+import permissionMixin from '@/permissionMixin';
+import ActionButton from '@jac-uk/jac-kit/draftComponents/ActionButton.vue';
+
+export default {
+  name: 'PreSelectionDayQuestionnairesRequests',
+  components: {
+    ActionButton,
+  },
+  mixins: [permissionMixin],
+  props: {
+    selectedItems: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    exerciseMailbox: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    exerciseManagerName: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    dueDate: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    type: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  emits: ['close', 'confirmed', 'setmessage', 'reset'],
+  data() {
+    return {
+      processing: false,
+    };
+  },
+  computed: {
+    numberOfCandidates() {
+      return this.selectedItems.length;
+    },
+    typeOfEmail() {
+      return this.type;
+    },
+    buttonText() {
+      return `I confirm, please send ${this.type}`;
+    },
+  },
+  methods: {
+    closeModal() {
+      this.$emit('close');
+    },
+    confirmModal() {
+      this.modalOpen = false;
+      this.$emit('confirmed');
+      document.body.style.overflow = '';
+    },
+    async updateApplicationRecord(status) {
+      await this.$store.dispatch('preSelectionDayQuestionnaires/updateStatus', {
+        selectedItems: this.selectedItems,
+        newStatus: status,
+      });
+    },
+    async send() {
+      try {
+        const response = await functions.httpsCallable('sendPreSelectionDayQuestionnaireRequests')({
+          items: this.selectedItems,
+          type: this.type,
+          exerciseMailbox: this.exerciseMailbox,
+          exerciseManagerName: this.exerciseManagerName,
+          dueDate: this.dueDate,
+        });
+        if (response === false) {
+          this.$emit('setmessage', false, 'warning');
+        } else {
+          this.$emit('setmessage', true, this.type, 'success');
+        }
+      } catch (error) {
+        this.$emit('setmessage', false, this.type, 'warning');
+      }
+      this.closeModal();
+      this.$emit('reset');
+    },
+  },
+};
+</script>
+
+<style scoped>
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+</style>
diff --git a/src/views/Exercise/Tasks/Task/CandidateForm/Monitor.vue b/src/views/Exercise/Tasks/Task/CandidateForm/Monitor.vue
index 18b4289ac..567130dea 100644
--- a/src/views/Exercise/Tasks/Task/CandidateForm/Monitor.vue
+++ b/src/views/Exercise/Tasks/Task/CandidateForm/Monitor.vue
@@ -13,11 +13,124 @@
 
     <ProgressBar :steps="taskSteps" />
 
-    <p class="govuk-body">
-      [ monitor candidate data: similar to IAs and character checks, here we enable users to send email and monitor progress of form submissions ]
-    </p>
+    <dl class="govuk-summary-list govuk-!-margin-bottom-7">
+      <div class="govuk-summary-list__row">
+        <dt class="govuk-summary-list__key">
+          Contact date
+        </dt>
+        <dd class="govuk-summary-list__value">
+          <template v-if="exercise.preSelectionDayQuestionnaireReturnDate">
+            {{ $filters.formatDate(exercise.preSelectionDayQuestionnaireReturnDate, 'long') }}
+          </template>
+        </dd>
+        <dd class="govuk-summary-list__actions" />
+      </div>
+      <div class="govuk-summary-list__row">
+        <dt class="govuk-summary-list__key">
+          Due date
+        </dt>
+        <dd class="govuk-summary-list__value">
+          <template v-if="exercise.preSelectionDayQuestionnaireReturnDate">
+            {{ $filters.formatDate(exercise.preSelectionDayQuestionnaireReturnDate, 'long') }}
+          </template>
+        </dd>
+        <dd class="govuk-summary-list__actions" />
+      </div>
+    </dl>
+
+    <TabsList
+      ref="tabs"
+      v-model:active-tab="activeTab"
+      :tabs="tabs"
+      class="print-none"
+    />
+
+    <Banner
+      :message="message"
+      :status="status"
+    />
+
+    <div>
+      <button
+        v-if="isCreated && hasPermissions([
+          PERMISSIONS.exercises.permissions.canReadExercises.value,
+          PERMISSIONS.exercises.permissions.canUpdateExercises.value,
+          PERMISSIONS.notifications.permissions.canCreateNotifications.value
+        ])"
+        class="govuk-button govuk-!-margin-right-3"
+        :disabled="!selectedItems.length"
+        @click="openModal('modalRefRequests', 'request')"
+      >
+        Send requests
+      </button>
+      <button
+        v-if="isRequested && hasPermissions([
+          PERMISSIONS.assessments.permissions.canReadAssessments.value,
+          PERMISSIONS.exercises.permissions.canUpdateExercises.value,
+          PERMISSIONS.notifications.permissions.canCreateNotifications.value
+        ])"
+        class="govuk-button govuk-!-margin-right-3"
+        :disabled="!selectedItems.length"
+        @click="openModal('modalRefRequests', 'reminder')"
+      >
+        Send reminders
+      </button>
+    </div>
+
+    <Modal ref="modalRefRequests">
+      <component
+        :is="`PreSelectionDayQuestionnairesRequests`"
+        :selected-items="selectedItems"
+        :type="modalType"
+        :exercise-mailbox="exerciseMailbox"
+        :exercise-manager-name="exerciseManagerName"
+        :due-date="dueDate"
+        @close="closeModal('modalRefRequests')"
+        @setmessage="setMessage"
+        @reset="resetSelectedItems"
+      />
+    </Modal>
+
+    <Table
+      :key="activeTab"
+      v-model:selection="selectedItems"
+      data-key="id"
+      :data="records"
+      :page-size="50"
+      :columns="tableColumns"
+      :multi-select="true"
+      :search-map="$searchMap.characterChecks"
+      :filters="filters"
+      @change="getTableData"
+    >
+      <template #row="{row}">
+        <TableCell :title="tableColumns[0].title">
+          <RouterLink
+            class="govuk-link"
+            :to="{name: 'exercise-application', params: { applicationId: row.application.id }}"
+          >
+            {{ row.application.referenceNumber }}
+          </RouterLink>
+        </TableCell>
+        <TableCell :title="tableColumns[1].title">
+          <RouterLink
+            :to="{ name: 'candidates-view', params: { id: row.candidate.id } }"
+            target="_blank"
+          >
+            {{ row.candidate.fullName }}
+          </RouterLink>
+        </TableCell>
+        <TableCell :title="tableColumns[2].title">
+          {{ $filters.lookup(row.stage) }}
+        </TableCell>
+        <TableCell :title="tableColumns[3].title">
+          {{ $filters.lookup(row.preSelectionDayQuestionnaire?.status) }}
+        </TableCell>
+      </template>
+    </Table>
 
     <ActionButton
+      v-if="isOverdue"
       class="govuk-!-margin-bottom-1"
       type="primary"
       :action="btnContinue"
@@ -32,15 +145,31 @@ import { beforeRouteEnter, btnNext } from '../helper';
 import { getTaskSteps } from '@/helpers/exerciseHelper';
 import FullScreenButton from '@/components/Page/FullScreenButton.vue';
 import ProgressBar from '@/components/Page/ProgressBar.vue';
+import TabsList from '@jac-uk/jac-kit/draftComponents/TabsList.vue';
+import Table from '@jac-uk/jac-kit/components/Table/Table.vue';
+import TableCell from '@jac-uk/jac-kit/components/Table/TableCell.vue';
 import ActionButton from '@jac-uk/jac-kit/draftComponents/ActionButton.vue';
+import Banner from '@jac-uk/jac-kit/draftComponents/Banner.vue';
+import Modal from '@jac-uk/jac-kit/components/Modal/Modal.vue';
+import { formatDate } from '@jac-uk/jac-kit/filters/filters';
+import { isDateInFuture } from '@jac-uk/jac-kit/helpers/date';
+import PreSelectionDayQuestionnairesRequests from '@/components/ModalViews/PreSelectionDayQuestionnairesRequests.vue';
 import { functions } from '@/firebase';
+import permissionMixin from '@/permissionMixin';
 
 export default {
   components: {
+    TabsList,
+    Table,
+    TableCell,
     ActionButton,
+    Banner,
+    Modal,
+    PreSelectionDayQuestionnairesRequests,
     FullScreenButton,
     ProgressBar,
   },
+  mixins: [permissionMixin],
   beforeRouteEnter: beforeRouteEnter,
   props: {
     type: {
@@ -50,12 +179,51 @@ export default {
   },
   data() {
     return {
+      tabs: [
+        {
+          ref: 'created',
+          title: 'Not requested',
+        },
+        {
+          ref: 'requested',
+          title: 'Requested',
+        },
+        {
+          ref: 'completed',
+          title: 'Completed',
+        },
+      ],
+      activeTab: 'created',
+      tableColumns: [
+        { title: 'Reference number', sort: 'application.referenceNumber' },
+        { title: 'Candidate name', sort: 'candidate.fullName', default: true },
+        { title: 'Stage' },
+        { title: 'Status' },
+      ],
+      filters: [],
+      selectedItems: [],
+      modalType: '',
+      message: null,
+      status: null,
     };
   },
   computed: {
     exercise() {
       return this.$store.state.exerciseDocument.record;
     },
+    exerciseMailbox() {
+      return this.exercise.exerciseMailbox;
+    },
+    exerciseManagerName() {
+      return this.exercise.emailSignatureName;
+    },
+    dueDate(){
+      const date = this.exercise.preSelectionDayQuestionnaireReturnDate;
+      return formatDate(date);
+    },
+    isOverdue() {
+      return !isDateInFuture(this.exercise.contactIndependentAssessors);
+    },
     task() {
       return this.$store.getters['tasks/getTask'](this.type);
     },
@@ -63,8 +231,63 @@ export default {
       const steps = getTaskSteps(this.exercise, this.type, this.task);
       return steps;
     },
+    isCreated() {
+      return this.activeTab === 'created';
+    },
+    isRequested() {
+      return this.activeTab === 'requested';
+    },
+    isCompleted() {
+      return this.activeTab === 'completed';
+    },
+    records() {
+      if (this.isCreated) {
+        return this.$store.state.preSelectionDayQuestionnaires.preSelectionDayQuestionnairesCreatedRecords;
+      } else if (this.isRequested) {
+        return this.$store.state.preSelectionDayQuestionnaires.preSelectionDayQuestionnairesRequestedRecords;
+      } else if (this.isCompleted) {
+        return this.$store.state.preSelectionDayQuestionnaires.preSelectionDayQuestionnairesCompletedRecords;
+      } else {
+        return [];
+      }
+    },
+  },
+  watch: {
+    activeTab() {
+      this.resetSelectedItems();
+    },
   },
   methods: {
+    getTableData(params) {
+      this.$store.dispatch('preSelectionDayQuestionnaires/bind', {
+        exerciseId: this.exercise.id,
+        status: this.activeTab,
+        ...params,
+      });
+    },
+    openModal(modalRef, type){
+      this.$refs[modalRef].openModal();
+      this.modalType = type;
+    },
+    closeModal(modalRef) {
+      this.$refs[modalRef].closeModal();
+      this.modalType = '';
+    },
+    resetSelectedItems() {
+      this.selectedItems = [];
+    },
+    setMessage(value, type, status) {
+      if (value === true) {
+        this.status = status;
+        this.message = `Sent ${type}(s) to ${this.selectedItems.length} candidate(s).`;
+      } else {
+        this.status = status;
+        this.message = `Failed to send ${type}(s).`;
+      }
+      setTimeout(() => {
+        this.message = '';
+      },20000);
+    },
     btnNext,
     async btnContinue() {
       await functions.httpsCallable('updateTask')({