#51 - Show errors to asssesors on late IAs

src/components/Warning.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="govuk-warning-text">
+    <span
+      class="govuk-warning-text__icon"
+      aria-hidden="true"
+    >!</span>
+    <strong class="govuk-warning-text__text">
+      <span class="govuk-warning-text__assistive">Warning</span>
+      {{ message }}
+    </strong>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>

src/helpers/date.js

@@ -0,0 +1,73 @@
+const isDate = (date) => date instanceof Date;
+
+const isDateInFuture = (date) => {
+  // @TODO #388 update to full datetime instead of hardcoding time
+  if (!(date instanceof Date)) {
+    throw 'Supplied date must be a Date object';
+  }
+
+  const today = new Date();
+
+  date = new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    13,
+    0,
+    0
+  );
+
+  return date > today;
+};
+
+const formatDate = (date, type) => {
+  if (!(date instanceof Date)) {
+    throw 'Supplied date must be a Date object';
+  }
+
+  if (type && type === 'time') {
+    return date.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric', hour12: true }).toLowerCase();
+  }
+
+  const month = date.toLocaleString('en-GB', { month: 'long' });
+
+  if (type && type === 'month') {
+    return `${month} ${date.getFullYear()}`;
+  }
+
+  return `${date.getDate()} ${month} ${date.getFullYear()}`;
+};
+
+const parseEstimatedDate = (value) => {
+  if (value instanceof Date) {
+    return value;
+  }
+
+  if (typeof value != 'string') {
+    return;
+  }
+  const parts = value.split('-');
+
+  const [year, month, day] = [...parts, 1];
+  const date = new Date(Date.UTC(year, month - 1, day));
+
+  return date;
+};
+
+const validateYear = (val) => {
+  val = parseInt(val);
+
+  if (isNaN(val) || val.toString().length !== 4) {
+    return null;
+  }
+
+  return val;
+};
+
+export {
+  isDate,
+  isDateInFuture,
+  formatDate,
+  parseEstimatedDate,
+  validateYear
+};

src/views/Assessment/Edit.vue

@@ -51,56 +51,70 @@
               </dd>
             </div>
           </dl>
+          <Warning 
+            v-if="assessmentLate && submissionPermitted"
+            :message="`This Independent Assessment is past the due date. The Selection Exercise Team can be contacted via ` + assessment.exercise.exerciseMailbox + ` or ` + assessment.exercise.exercisePhoneNumber + `.`"
+          />
+          <div
+            v-if="submissionPermitted"
+          >
+            <p class="govuk-body-l">
+              Download the template on this page to complete your assessment.
+            </p>
 
-          <p class="govuk-body-l">
-            Download the template on this page to complete your assessment.
-          </p>
+            <p class="govuk-body-l">
+              Come back to this page to upload your finished assessment.
+            </p>
 
-          <p class="govuk-body-l">
-            Come back to this page to upload your finished assessment.
-          </p>
+            <div class="govuk-form-group">
+              <h2 class="govuk-heading-m">
+                Download self assessment template
+              </h2>
 
-          <div class="govuk-form-group">
-            <h2 class="govuk-heading-m">
-              Download self assessment template
-            </h2>
+              <DownloadLink
+                :file-name="assessment.exercise.template.file"
+                :exercise-id="assessment.exercise.id"
+                :title="assessment.exercise.template.title"
+              />
+            </div>
 
-            <DownloadLink
-              :file-name="assessment.exercise.template.file"
-              :exercise-id="assessment.exercise.id"
-              :title="assessment.exercise.template.title"
+            <FileUpload
+              id="independent-assessment-file"
+              ref="independent-assessment-file"
+              v-model="assessment.fileRef"
+              :name="fileName"
+              :path="uploadPath"
+              label="Please upload your assessment here"
+              required
             />
-          </div>
 
-          <FileUpload
-            id="independent-assessment-file"
-            ref="independent-assessment-file"
-            v-model="assessment.fileRef"
-            :name="fileName"
-            :path="uploadPath"
-            label="Please upload your assessment here"
-            required
+            <button class="govuk-button">
+              Save and continue
+            </button>
+          </div>
+          <Warning 
+            v-else
+            :message="`This Independent Assessment has expired. The Selection Exercise Team can be contacted via ` + assessment.exercise.exerciseMailbox + ` or ` + assessment.exercise.exercisePhoneNumber + `.`"
           />
-
-          <button class="govuk-button">
-            Save and continue
-          </button>
         </div>
       </div>
     </form>
   </div>
 </template>
 <script>
+import { isDateInFuture } from '@/helpers/date';
 import Form from '@/components/Form/Form';
 import ErrorSummary from '@/components/Form/ErrorSummary';
 import DownloadLink from '@/components/DownloadLink';
 import FileUpload from '@/components/Form/FileUpload';
+import Warning from '@/components/Warning';
 
 export default {
   components: {
     ErrorSummary,
     DownloadLink,
     FileUpload,
+    Warning,
   },
   extends: Form,
   data() {
@@ -123,6 +137,20 @@ export default {
     assessorId() {
       return this.$store.getters['auth/currentUserId'];
     },
+    assessmentLate(){
+      return !isDateInFuture(this.assessment.dueDate);
+    },
+    submissionPermitted() {
+      if(!this.assessment.hardLimit){
+        return true;
+      }
+
+      if(isDateInFuture(this.assessment.hardLimit)){
+        return true;
+      }
+
+      return false;
+    },
     uploadPath() {
       const exerciseId = this.assessment.exercise.id;
       const applicationId = this.assessment.application.id;

src/views/Assessments.vue

@@ -69,17 +69,27 @@
               <td class="govuk-table__cell">
                 {{ assessment.dueDate | formatDate }}
               </td>
-              <td class="govuk-table__cell">
+              <td 
+                class="govuk-table__cell"
+              >
                 {{ assessment.status | lookup }}
               </td>
               <td class="govuk-table__cell">
                 <router-link
-                  v-if="canEdit(assessment)"
+                  v-if="canEdit(assessment) && submissionPermitted(assessment)"
                   class="govuk-button govuk-button--primary"
                   :to="{ name: 'assessment-edit', params: { id: assessment.id }}"
                 >
                   View Incomplete Assessment
                 </router-link>
+                <router-link
+                  v-else-if="canEdit(assessment) && !submissionPermitted(assessment)"
+                  class="govuk-button govuk-button--primary"
+                  :to="{ name: 'assessment-view', params: { id: assessment.id }}"
+                  disabled
+                >
+                  Assessment Expired
+                </router-link>
                 <router-link
                   v-else
                   class="govuk-button govuk-button--secondary"
@@ -104,6 +114,7 @@
 </template>
 <script>
 import { mapState } from 'vuex';
+import { isDateInFuture } from '@/helpers/date';
 import TabsList from '@/components/Page/TabsList';
 import LoadingMessage from '@/components/LoadingMessage';
 export default {
@@ -158,6 +169,20 @@ export default {
     canEdit(assessment) {
       return assessment.status === 'pending';
     },
+    submissionPermitted(assessment) {
+      if(!assessment.hardLimit){
+        return true;
+      }
+
+      if(isDateInFuture(assessment.hardLimit)){
+        return true;
+      }
+
+      return false;
+    },
+    assessmentLate(assessment){
+      return !isDateInFuture(assessment.dueDate) && this.canEdit(assessment);
+    },
     redirectToErrorPage() {
       this.$router.replace({ name: 'assessments-not-found' });
     },