Include task list and update navigation links for draft exercises

src/components/Form/Form.vue

@@ -35,7 +35,7 @@ export default {
     async validateAndSave() {
       this.validate();
       if (this.isValid()) {
-        this.save();
+        this.save(true);
       }
     },
   },

src/store/exercise/document.js

@@ -23,6 +23,8 @@ export default {
           const exerciseRef = firestore.collection('exercises').doc();
           transaction.update(metaRef, { exercisesCount: newExercisesCount });
           data.referenceNumber = 'JAC' + (100000 + newExercisesCount).toString().substr(1);
+          data.progress = { started: true };
+          data.state = 'draft';
           transaction.set(exerciseRef, data);
           return exerciseRef.id;
         });

src/views/Exercises/Edit/AssessmentOptions.vue

@@ -85,7 +85,8 @@ export default {
     };
   },
   methods: {
-    async save() {
+    async save(isValid) {
+      this.exercise.progress.assessmentOptions = isValid ? true : false;
       await this.$store.dispatch('exerciseDocument/save', this.exercise);
       this.$router.push(this.$store.getters['exerciseCreateJourney/nextPage']('exercise-show-assessment-options'));
     },

src/views/Exercises/Edit/Contacts.vue

@@ -176,9 +176,26 @@ export default {
   },
   extends: Form,
   data(){
-    const exercise = this.$store.getters['exerciseDocument/data']();
-
+    const defaults = {
+      subscriberAlertsUrl: null,
+      exerciseMailbox: null,
+      seniorSelectionExerciseManager: null,
+      selectionExerciseManager: null,
+      selectionExerciseOfficer: null,
+      assignedCommissioner: null,
+      appropriateAuthority: [],
+      otherAppropriateAuthority: null,
+      hmctsWelshGovLead: null,
+      judicialOfficeContact: null,
+      leadJudge: null,
+      draftingJudge: null,
+      statutoryConsultee: null,
+      progress: {},
+    };
+    const data = this.$store.getters['exerciseDocument/data']();
+    const exercise = { ...defaults, ...data };
     return {
+      exercise: exercise,
       patternJACEmail: { match: /@judicialappointments.(digital|gov.uk)$/, message: 'Please use a JAC email address' },
       repeatableFields: {
         SeniorSelectionExerciseManager,
@@ -187,26 +204,12 @@ export default {
         StatutoryConsultee,
         SelectionExerciseOfficer,
         AssignedCommissioner,
-      },
-      exercise: {
-        subscriberAlertsUrl: exercise.subscriberAlertsUrl || null,
-        exerciseMailbox: exercise.exerciseMailbox || null,
-        seniorSelectionExerciseManager: exercise.seniorSelectionExerciseManager || null,
-        selectionExerciseManager: exercise.selectionExerciseManager || null,
-        selectionExerciseOfficer: exercise.selectionExerciseOfficer || null,
-        assignedCommissioner: exercise.assignedCommissioner || null,
-        appropriateAuthority: exercise.appropriateAuthority || [],
-        otherAppropriateAuthority: exercise.otherAppropriateAuthority|| null,
-        hmctsWelshGovLead: exercise.hmctsWelshGovLead || null,
-        judicialOfficeContact: exercise.judicialOfficeContact || null,
-        leadJudge: exercise.leadJudge || null,
-        draftingJudge: exercise.draftingJudge || null,
-        statutoryConsultee: exercise.statutoryConsultee || null,
-      },
+      },      
     };
   },
   methods: {
-    async save() {
+    async save(isValid) {
+      this.exercise.progress.contacts = isValid ? true : false;
       await this.$store.dispatch('exerciseDocument/save', this.exercise);
       this.$router.push(this.$store.getters['exerciseCreateJourney/nextPage']('exercise-show-contacts'));
     },

src/views/Exercises/Edit/Downloads.vue

@@ -98,7 +98,7 @@ export default {
     },
   },
   methods: {
-    async save() {
+    async save(isValid) {
 
       // check for job description file to upload
       if (this.files['job-description-file']) {
@@ -120,6 +120,7 @@ export default {
         await this.upload(this.files['candidate-assessment-form-file']);
       }      
 
+      this.exercise.progress.downloads = isValid ? true : false;
       await this.$store.dispatch('exerciseDocument/save', this.exercise);
       this.$router.push(this.$store.getters['exerciseCreateJourney/nextPage']('exercise-show-downloads'));
     },

src/views/Exercises/Edit/EditName.vue

@@ -35,16 +35,18 @@ export default {
   },
   extends: Form,
   data(){
-    const exercise = this.$store.getters['exerciseDocument/data']();
-
+    const defaults = {
+      name: null,
+    };
+    const data = this.$store.getters['exerciseDocument/data']();
+    const exercise = { ...defaults, ...data };
     return {
-      exercise: {
-        name: exercise.name || null,
-      },
+      exercise: exercise,
     };
   },
   methods: {
-    async save() {
+    async save(isValid) {
+      this.exercise.progress.exerciseName = isValid ? true : false;
       await this.$store.dispatch('exerciseDocument/save', this.exercise);
       this.$router.push({ name: 'exercise-show-overview' });
     },

src/views/Exercises/Edit/Eligibility.vue

@@ -347,7 +347,8 @@ export default {
     },
   },
   methods: {
-    async save() {
+    async save(isValid) {
+      this.exercise.progress.eligibility = isValid ? true : false;
       await this.$store.dispatch('exerciseDocument/save', this.exercise);
       this.$router.push(this.$store.getters['exerciseCreateJourney/nextPage']('exercise-show-eligibility'));
     },

src/views/Exercises/Edit/Shortlisting.vue

@@ -97,7 +97,8 @@ export default {
     };
   },
   methods: {
-    async save() {
+    async save(isValid) {
+      this.exercise.progress.shortlisting = isValid ? true : false;
       await this.$store.dispatch('exerciseDocument/save', this.exercise);
       this.$router.push(this.$store.getters['exerciseCreateJourney/nextPage']('exercise-show-shortlisting'));
     },

src/views/Exercises/Edit/Timeline.vue

@@ -304,7 +304,8 @@ export default {
     },
   },
   methods: {
-    async save() {
+    async save(isValid) {
+      this.exercise.progress.timeline = isValid ? true : false;
       await this.$store.dispatch('exerciseDocument/save', this.exercise);
       this.$router.push(this.$store.getters['exerciseCreateJourney/nextPage']('exercise-show-timeline'));
     },

src/views/Exercises/Edit/Vacancy.vue

@@ -401,7 +401,8 @@ export default {
     };
   },
   methods: {
-    async save() {
+    async save(isValid) {
+      this.exercise.progress.vacancyInformation = isValid ? true : false;
       await this.$store.dispatch('exerciseDocument/save', this.exercise);
       this.$router.push(this.$store.getters['exerciseCreateJourney/nextPage']('exercise-show-vacancy'));
     },

src/views/Exercises/Edit/WorkingPreferences.vue

@@ -140,7 +140,8 @@ export default {
     };
   },
   methods: {
-    async save() {
+    async save(isValid) {
+      this.exercise.progress.workingPreferences = isValid ? true : false;
       await this.$store.dispatch('exerciseDocument/save', this.exercise);
       this.$router.push(this.$store.getters['exerciseCreateJourney/nextPage']('exercise-show-working-preferences'));
     },

src/views/Exercises/Show.vue

@@ -61,29 +61,9 @@ export default {
     AddToFavouritesButton,
   },
   data() {
-    const navPages = [
-      { page: 'Overview', name: 'exercise-show-overview' },
-      { page: 'Vacancy information',
-        name: 'exercise-show-vacancy',
-        children: [
-          { page: 'Contacts', name: 'exercise-show-contacts' },
-          { page: 'Timeline', name: 'exercise-show-timeline' },
-          { page: 'Shortlisting', name: 'exercise-show-shortlisting' },
-          { page: 'Eligibility information', name: 'exercise-show-eligibility' },
-          { page: 'Working preferences', name: 'exercise-show-working-preferences' },
-          { page: 'Assessment options', name: 'exercise-show-assessment-options' },
-          { page: 'Exercise downloads', name: 'exercise-show-downloads' },
-        ],
-      },
-      { page: 'Applications', name: 'exercise-show-applications' },
-      { page: 'Independent assessments', name: 'exercise-show-independent-assessments' },
-      { page: 'Exercise reports', name: 'exercise-show-reports' },
-    ];
-
     return {
       loaded: false,
       loadFailed: false,
-      navPages,
     };
   },
   computed: {
@@ -93,6 +73,33 @@ export default {
     exerciseName() {
       return this.exercise.name && this.exercise.name.length < 80 ? this.exercise.name : this.exercise.name.substring(0,79)+'..';
     },
+    isDraft() {
+      // returns true unless exercise has a state that other than draft
+      if (this.exercise && this.exercise.state && this.exercise.state !== 'draft') {
+        return false;
+      }
+      return true;
+    },
+    navPages() {
+      const pages = [
+        { page: 'Overview', name: 'exercise-show-overview' },
+        { page: 'Vacancy information', name: 'exercise-show-vacancy' },
+        { page: 'Contacts', name: 'exercise-show-contacts' },
+        { page: 'Timeline', name: 'exercise-show-timeline' },
+        { page: 'Shortlisting', name: 'exercise-show-shortlisting' },
+        { page: 'Eligibility information', name: 'exercise-show-eligibility' },
+        { page: 'Working preferences', name: 'exercise-show-working-preferences' },
+        { page: 'Assessment options', name: 'exercise-show-assessment-options' },
+        { page: 'Exercise downloads', name: 'exercise-show-downloads' },
+
+      ];
+      if (!this.isDraft) {
+        pages.push({ page: 'Applications', name: 'exercise-show-applications' });
+        pages.push({ page: 'Independent assessments', name: 'exercise-show-independent-assessments' });
+        pages.push({ page: 'Exercise reports', name: 'exercise-show-reports' });
+      }
+      return pages;
+    },
     goBack() {
       if (this.$route.name === 'exercise-show-overview') {
         return {

src/views/Exercises/Show/Overview.vue

@@ -13,7 +13,10 @@
         </p>
       </div>
 
-      <div class="background-light-grey govuk-!-padding-4 govuk-!-margin-bottom-3">
+      <div 
+        v-if="!isDraft"
+        class="background-light-grey govuk-!-padding-4 govuk-!-margin-bottom-3"
+      >
         <h2 class="govuk-heading-l">
           Number of applications
         </h2>
@@ -36,21 +39,38 @@
       </RouterLink>
     </div>
 
-    <div class="govuk-grid-column-full govuk-!-margin-top-5 govuk-!-margin-bottom-2">
+    <div
+      v-if="taskList"
+      class="govuk-grid-column-full govuk-!-margin-top-5 govuk-!-margin-bottom-2"
+    >
       <h2 class="govuk-heading-m">
         Task list
       </h2>
       <table class="govuk-table">
         <tbody class="govuk-table__body">
-          <tr class="govuk-table__row">
+          <tr 
+            v-for="task in taskList"
+            :key="task.id"
+            class="govuk-table__row"
+          >
             <th class="govuk-table__header">
-              Name of exercise
+              <router-link
+                class="govuk-link"
+                :to="{name: task.id}"
+              >
+                {{ task.title }}
+              </router-link>
             </th>
             <td class="govuk-table__cell text-right">
-              <a
-                href="#"
-                class="govuk-link"
-              >Change</a>
+              <strong
+                v-if="task.done"
+                :id="`${task.id}-completed`"
+                class="govuk-tag"
+              >Done</strong>
+              <span
+                v-else
+                :id="`${task.id}-completed`"
+              />                          
             </td>
           </tr>
         </tbody>
@@ -72,10 +92,39 @@ export default {
     exercise() {
       return this.$store.getters['exerciseDocument/data']();
     },
+    isDraft() {
+      // returns true unless exercise has a state that other than draft
+      if (this.exercise && this.exercise.state && this.exercise.state !== 'draft') {
+        return false;
+      }
+      return true;
+    },    
     timeline() {
       let timeline = exerciseTimeline(this.exercise);
       return createTimeline(timeline, 2);
     },
+    exerciseProgress() {
+      if (this.exercise && this.exercise.progress) {
+        return this.exercise.progress;
+      } else {
+        return {};
+      }
+    },    
+    taskList() {
+      let data = [];
+      if (this.exerciseProgress) {
+        data.push({ title: 'Name of exercise', id: 'exercise-edit-name', done: this.exerciseProgress.exerciseName });
+        data.push({ title: 'Vacancy information', id: 'exercise-edit-vacancy', done: this.exerciseProgress.vacancyInformation });
+        data.push({ title: 'Contacts', id: 'exercise-edit-contacts', done: this.exerciseProgress.contacts });
+        data.push({ title: 'Timeline', id: 'exercise-edit-timeline', done: this.exerciseProgress.timeline });
+        data.push({ title: 'Shortlisting', id: 'exercise-edit-shortlisting', done: this.exerciseProgress.shortlisting });
+        data.push({ title: 'Eligibility information', id: 'exercise-edit-eligibility', done: this.exerciseProgress.eligibility });
+        data.push({ title: 'Working preferences', id: 'exercise-edit-working-preferences', done: this.exerciseProgress.workingPreferences });
+        data.push({ title: 'Assessment options', id: 'exercise-edit-assessment-options', done: this.exerciseProgress.assessmentOptions });
+        data.push({ title: 'Exercise downloads', id: 'exercise-edit-downloads', done: this.exerciseProgress.downloads });
+      }
+      return data;
+    },    
   },
 };
 </script>