Epic #2141 Embedding Pre-Selection Day Questionnaires on the Platform

src/App.vue

@@ -66,7 +66,17 @@
                   Candidates
                 </RouterLink>
               </li>
-
+              <li
+                v-if="hasPermissions([PERMISSIONS.panellists.permissions.canManagePanellists.value])"
+                class="govuk-header__navigation-item"
+              >
+                <RouterLink
+                  :to="{ name: 'panellists-list' }"
+                  class="govuk-header__link"
+                >
+                  Panellists
+                </RouterLink>
+              </li>
               <li
                 v-if="hasPermissions([PERMISSIONS.users.permissions.canReadUsers.value])"
                 class="govuk-header__navigation-item"

src/components/ModalViews/CandidateFormNotification.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <div class="modal__title govuk-!-padding-2 govuk-heading-m">
+      {{ $filters.lookup(type) }} consent form {{ notificationType }}
+    </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 {{ notificationType }} 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: 'CandidateFormNotification',
+  components: {
+    ActionButton,
+  },
+  mixins: [permissionMixin],
+  props: {
+    type: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    notificationType: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    selectedItems: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    exercise: {
+      type: Object,
+      default: null,
+    },
+    dueDate: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  emits: ['close', 'confirmed', 'setmessage', 'reset'],
+  data() {
+    return {
+      processing: false,
+    };
+  },
+  computed: {
+    exerciseMailbox() {
+      return this.exercise?.exerciseMailbox || '';
+    },
+    exerciseManagerName() {
+      return this.exercise?.emailSignatureName || '';
+    },
+    numberOfCandidates() {
+      return this.selectedItems.length;
+    },
+    buttonText() {
+      return `I confirm, please send ${this.notificationType}`;
+    },
+  },
+  methods: {
+    closeModal() {
+      this.$emit('close');
+    },
+    confirmModal() {
+      this.modalOpen = false;
+      this.$emit('confirmed');
+      document.body.style.overflow = '';
+    },
+    async send() {
+      try {
+        const response = await functions.httpsCallable('sendCandidateFormNotifications')({
+          type: this.type,
+          notificationType: this.notificationType,
+          items: this.selectedItems,
+          exerciseMailbox: this.exerciseMailbox,
+          exerciseManagerName: this.exerciseManagerName,
+          dueDate: this.dueDate,
+        });
+        if (response === false) {
+          this.$emit('setmessage', false, 'warning');
+        } else {
+          this.$emit('setmessage', true, this.notificationType, 'success');
+        }
+      } catch (error) {
+        this.$emit('setmessage', false, this.notificationType, 'warning');
+      }
+      this.closeModal();
+      this.$emit('reset');
+    },
+  },
+};
+</script>
+
+<style scoped>
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+</style>

src/components/ModalViews/ChangeExerciseAdvertType.vue

@@ -72,7 +72,7 @@ export default {
     const exercise = this.$store.state.exerciseDocument.record;
     return {
       formData: {
-        state: 'review',
+        advertType: null,
       },
       exerciseAdvertTypes: exerciseAdvertTypes(exercise),
     };

src/components/Page/FullScreenButton.vue

@@ -2,15 +2,15 @@
   <button
     v-if="fullScreen"
     type="button"
-    class="govuk-button govuk-button--secondary"
+    class="govuk-button govuk-button--secondary govuk-!-margin-bottom-0"
     @click="exitFullScreen"
   >
     Exit full screen
   </button>
   <button
     v-else
     type="button"
-    class="govuk-button govuk-button--secondary"
+    class="govuk-button govuk-button--secondary govuk-!-margin-bottom-0"
     @click="enterFullScreen"
   >
     Full screen

src/components/Page/ProgressBar.vue

@@ -0,0 +1,171 @@
+<template>
+  <div 
+    class="progress-bar"
+    :class="{
+      'progress-bar--started': isStarted, 
+      'progress-bar--completed': isCompleted 
+    }"
+  >
+    <div 
+      v-for="step in steps"
+      :key="step.id"
+      class="progress-bar-step"
+      :class="{
+        'progress-bar-step--completed': step.completed,
+        'progress-bar-step--current': step.id == currentStep.id
+      }"
+    >
+      <svg 
+        v-if="step.completed"
+        class="progress-bar-step-icon" 
+        viewBox="0 0 99.295 86.056"
+      >
+        <polygon
+          fill="currentColor" 
+          points="36.371 86.056 0 54.594 9.793 43.287 34.554 64.728 87.76 0 99.295 9.49 36.371 86.056"
+        />
+      </svg>
+      <div class="progress-bar-step-label govuk-caption-m">
+        {{ step.title }}
+      </div>
+    </div>    
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    steps: {
+      required: true,
+      type: Array,
+    },
+  },
+  computed: {
+    completedSteps() {
+      return this.steps.filter(step => step.completed);
+    },
+    currentStep() {
+      if (this.completedSteps.length === 0) return this.steps[0];
+      if (this.isCompleted) return this.steps[this.steps.length - 1];
+      return this.steps[this.completedSteps.length];
+    },
+    isStarted() {
+      return this.completedSteps.length > 0;
+    },
+    isCompleted() {
+      return this.steps.length === this.completedSteps.length;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+.progress-bar {
+  width: 100%;
+  height: 3.5em;
+  margin-bottom: 1.5em;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  position: relative;
+  overflow: hidden;
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 7.5px;
+    right: 0;
+    width: 3px;
+    height: 9px;
+    background-color: govuk-colour("mid-grey");
+  }
+  > .progress-bar-step {
+    flex-grow: 1;
+    height: 24px;
+    text-align: left;
+    align-self: flex-end;
+    &::before {
+      content: "";
+      display: block;
+      position:absolute;
+      width: 100%;
+      height: 3px;
+      margin-top: 10.5px;
+      background-color: govuk-colour("mid-grey");
+    }    
+    &::after {
+      content: "";
+      position: absolute;
+      // margin-left: -3px;
+      margin-top: 7.5px;
+      width: 3px;
+      height: 9px;
+      background-color: govuk-colour("mid-grey");
+    }
+    > .progress-bar-step-icon {
+      display: none;
+      position: absolute;
+      z-index: 1;
+      width: 20px;
+      height: 20px;
+      margin-left: -10px;
+      margin-top: 2px;
+      background-color: govuk-colour("blue");
+      color: white;
+      border-radius: 10px;
+      padding: 3px;
+    }
+    > .progress-bar-step-label {
+      display: none;
+      position: absolute;
+      z-index: 1;
+      background-color: white;
+      width: 100%;
+      left: 0;
+      margin-left: 0;
+      margin-top: -30px;
+    }
+    &.progress-bar-step--completed {
+      &::before {
+        background-color: govuk-colour("blue");
+      }
+      &::after {
+        display: none;
+      }
+      > .progress-bar-step-icon { 
+        display: inline;
+      }
+      > .progress-bar-step-label {
+        color: govuk-colour("blue");
+      }
+    }
+    &.progress-bar-step--current {
+      > .progress-bar-step-label {
+        z-index: 0;
+        display: block;
+      }
+    }
+    &:hover {
+      > .progress-bar-step-label {
+        display: block;
+      }      
+    }
+    &:first-child {
+      > .progress-bar-step-icon {
+        margin-left: 0;
+      }
+    }
+    &:last-child {
+      flex-grow: 0;
+      > .progress-bar-step-icon {
+        margin-left: -20px;
+      }
+    }
+  }
+  &.progress-bar--completed::after {
+    display: none;
+  }
+}
+
+</style>

src/components/PanelPacks/PanelPacks.vue

@@ -14,7 +14,7 @@
         Create New
       </button>
       <Table
-        v-if="hasPermissions([PERMISSIONS.panels.permissions.canReadPanels.value])"
+        v-if="hasPermissions([PERMISSIONS.panels.permissions.canReadPanels.value]) && panelsList.length"
         data-key="id"
         :data="panelsList"
         :page-size="50"
@@ -45,7 +45,7 @@
         :columns="tableColumnsCandidates"
         multi-select
         :page-size="50"
-        search-map="_search"
+        :search-map="$searchMap.applicationRecords"
         @change="getTableDataCandidates"
       >
         <template #actions>
@@ -229,7 +229,7 @@ export default {
           'applicationRecords/bind',
           {
             exerciseId: this.exerciseId,
-            stage: EXERCISE_STAGE.SELECTED,
+            stage: this.exercise && this.exercise._processingVersion >= 2 ? EXERCISE_STAGE.SHORTLISTED : EXERCISE_STAGE.SELECTED,
             ...params,
           }
         );