Update how we construct vue data object

src/views/Exercises/Edit/Downloads.vue

@@ -83,7 +83,9 @@ export default {
     BackLink,
   },
   data() {
-    const exercise = this.$store.getters['exerciseDocument/data']();
+    const defaults = {};
+    const data = this.$store.getters['exerciseDocument/data']();
+    const exercise = { ...defaults, ...data };
     return {
       exercise: exercise,
       files: {},

src/views/Exercises/Edit/Eligibility.vue

@@ -283,7 +283,6 @@ import CheckboxGroup from '@/components/Form/CheckboxGroup';
 import CheckboxItem from '@/components/Form/CheckboxItem';
 import TextField from '@/components/Form/TextField';
 import TextareaInput from '@/components/Form/TextareaInput';
-import booleanOrNull from '@/helpers/booleanOrNull';
 import BackLink from '@/components/BackLink';
 
 export default {
@@ -299,26 +298,27 @@ export default {
   },
   extends: Form,
   data(){
-    const exercise = this.$store.getters['exerciseDocument/data']();
-
+    const defaults = {
+      postQualificationExperience: null,
+      otherYears: null,
+      schedule2DApply: null,
+      authorisations: null,
+      aSCApply: null,
+      yesASCApply: null,
+      previousJudicialExperienceApply: null,
+      qualifications: null,
+      otherQualifications: null,
+      memberships: null,
+      otherMemberships: null,
+      reasonableLengthService: null,
+      otherLOS: null,
+      retirementAge: null,
+      otherRetirement: null,  
+    };
+    const data = this.$store.getters['exerciseDocument/data']();
+    const exercise = { ...defaults, ...data };    
     return {
-      exercise: {
-        postQualificationExperience: exercise.postQualificationExperience || null,
-        otherYears: exercise.otherYears || null,
-        schedule2DApply: booleanOrNull(exercise.schedule2DApply),
-        authorisations: exercise.authorisations || null,
-        aSCApply: booleanOrNull(exercise.aSCApply),
-        yesASCApply: exercise.yesASCApply || null,
-        previousJudicialExperienceApply: booleanOrNull(exercise.previousJudicialExperienceApply),
-        qualifications: exercise.qualifications || null,
-        otherQualifications: exercise.otherQualifications || null,
-        memberships: exercise.memberships || null,
-        otherMemberships: exercise.otherMemberships || null,
-        reasonableLengthService: exercise.reasonableLengthService || null,
-        otherLOS: exercise.otherLOS || null,
-        retirementAge: exercise.retirementAge || null,
-        otherRetirement: exercise.otherRetirement || null,
-      },
+      exercise: exercise,
       isCourtOrTribunal: exercise.isCourtOrTribunal,
       typeOfExercise: exercise.typeOfExercise,
     };

src/views/Exercises/Edit/Shortlisting.vue

@@ -84,16 +84,17 @@ export default {
   },
   extends: Form,
   data(){
-    const exercise = this.$store.getters['exerciseDocument/data']();
-
+    const defaults = {
+      shortlistingMethods: null,
+      otherShortlistingMethod: null,
+    };
+    const data = this.$store.getters['exerciseDocument/data']();
+    const exercise = { ...defaults, ...data };    
     return {
       repeatableFields: {
         OtherShortlistingMethod,
       },
-      exercise: {
-        shortlistingMethods: exercise.shortlistingMethods || null,
-        otherShortlistingMethod: exercise.otherShortlistingMethod || null,
-      },
+      exercise: exercise,
     };
   },
   methods: {

src/views/Exercises/Edit/Timeline.vue

@@ -14,7 +14,6 @@
         <p class="govuk-body-l">
           You can return to this page later to add or change dates.
         </p>
-
         <p class="govuk_body">
           <a
             href="#"
@@ -26,7 +25,6 @@
             This can help you plan your own key dates (opens in a new tab).
           </span>
         </p>
-
         <h2 class="govuk-heading-l">
           Application dates
         </h2>
@@ -42,33 +40,51 @@
           label="Closed for applications"
           required
         />
-
         <h2 class="govuk-heading-l">
           Shortlisting
         </h2>
-
         <DateInput
           v-if="hasPaperSift"
-          id="sift-date"
-          v-model="exercise.siftDate"
-          label="Sift date"
+          id="sift-start-date"
+          v-model="exercise.siftStartDate"
+          label="Sift start date"
+          required
+        />
+        <DateInput
+          v-if="hasPaperSift"
+          id="sift-end-date"
+          v-model="exercise.siftEndDate"
+          label="Sift end date"
+          required
+        />
+        <DateInput
+          v-if="hasNameBlindSift"
+          id="name-blind-sift-start-date"
+          v-model="exercise.nameBlindSiftStartDate"
+          label="Name-blind sift start date"
           required
         />
         <DateInput
           v-if="hasNameBlindSift"
-          id="name-blind-sift-date"
-          v-model="exercise.nameBlindSiftDate"
-          label="Name-blind sift date"
+          id="name-blind-sift-end-date"
+          v-model="exercise.nameBlindSiftEndDate"
+          label="Name-blind sift end date"
           required
         />
         <DateInput
           v-if="hasTelephoneAssessment"
-          id="telephone-assessment-date"
-          v-model="exercise.telephoneAssessmentDate"
-          label="Telephone assessment date"
+          id="telephone-assessment-start-date"
+          v-model="exercise.telephoneAssessmentStartDate"
+          label="Telephone assessment start date"
+          required
+        />
+        <DateInput
+          v-if="hasTelephoneAssessment"
+          id="telephone-assessment-end-date"
+          v-model="exercise.telephoneAssessmentEndDate"
+          label="Telephone assessment end date"
           required
         />
-
         <div
           v-if="situationalJudgementOrCriticalAnalysisQT"
           ref="situationalJudgementOrCriticalAnalysisQT"
@@ -102,7 +118,6 @@
             required
           />
         </div>
-
         <div
           v-if="scenarioQT"
           ref="scenarioQT"
@@ -141,11 +156,9 @@
           label="Shortlisting outcome date"
           required
         />
-
         <h2 class="govuk-heading-l">
           Independent assessors
         </h2>
-
         <DateInput
           id="contact-independent-assessors"
           v-model="exercise.contactIndependentAssessors"
@@ -159,81 +172,67 @@
           label="Independent assessments return date"
           required
         />
-
         <h2 class="govuk-heading-l">
           Eligibility SCC
         </h2>
-
         <DateInput
           id="eligibility-scc-date"
           v-model="exercise.eligibilitySCCDate"
           label="Eligibility SCC date"
           required
         />
-
         <h2 class="govuk-heading-l">
           Selection day
         </h2>
-
         <RepeatableFields
           v-model="exercise.selectionDays"
           :component="repeatableFields.SelectionDay"
           required
         />
-
         <h2 class="govuk-heading-l">
           Character Checks
         </h2>
-
         <DateInput
           id="character-checks-date"
           v-model="exercise.characterChecksDate"
           label="Character checks date"
           required
         />
-
         <h2 class="govuk-heading-l">
           Statutory Consultation
         </h2>
-
         <DateInput
           id="statutory-consultation-date"
           v-model="exercise.statutoryConsultationDate"
           label="Statutory Consultation date"
           required
         />
-
         <h2 class="govuk-heading-l">
           Character and Selection SCC
         </h2>
-
         <DateInput
           id="character-and-selection-scc-date"
           v-model="exercise.characterAndSCCDate"
           label="Character and SCC date"
           required
         />
-
         <h2 class="govuk-heading-l">
           Final outcome
         </h2>
-
         <DateInput
           id="final-outcome"
           v-model="exercise.finalOutcome"
           label="Final outcome to candidates"
           type="month"
           required
         />
-
         <button class="govuk-button">
           Save and continue
         </button>
       </div>
     </form>
   </div>
 </template>
-
 <script>
 import Form from '@/components/Form/Form';
 import ErrorSummary from '@/components/Form/ErrorSummary';
@@ -242,7 +241,6 @@ import TimeInput from '@/components/Form/TimeInput';
 import RepeatableFields from '@/components/RepeatableFields';
 import SelectionDay from '@/components/RepeatableFields/SelectionDay';
 import BackLink from '@/components/BackLink';
-
 export default {
   components: {
     ErrorSummary,
@@ -253,37 +251,41 @@ export default {
   },
   extends: Form,
   data(){
-    const exercise = this.$store.getters['exerciseDocument/data']();
-
+    const defaults = {
+      applicationOpenDate: null,
+      applicationCloseDate: null,
+      siftStartDate: null,
+      siftEndDate: null,
+      nameBlindSiftStartDate: null,
+      nameBlindSiftEndDate: null,
+      telephoneAssessmentStartDate: null,
+      telephoneAssessmentEndDate: null,
+      sjcaTestDate: null,
+      sjcaTestStartTime: null,
+      sjcaTestEndTime: null,
+      sjcaTestOutcome: null,
+      scenarioTestDate: null,
+      scenarioTestStartTime: null,
+      scenarioTestEndTime: null,
+      scenarioTestOutcome: null,
+      shortlistingOutcomeDate: null,
+      contactIndependentAssessors: null,
+      independentAssessmentsReturnDate: null,
+      eligibilitySCCDate: null,
+      selectionDays: null,
+      characterChecksDate: null,
+      statutoryConsultationDate: null,
+      characterAndSCCDate: null,
+      finalOutcome: null,
+    };
+    const data = this.$store.getters['exerciseDocument/data']();
+    const exercise = { ...defaults, ...data };    
     return {
       repeatableFields: {
         SelectionDay,
       },
       exerciseShortlistingMethods: exercise.shortlistingMethods,
-      exercise: {
-        applicationOpenDate: exercise.applicationOpenDate || null,
-        applicationCloseDate: exercise.applicationCloseDate || null,
-        siftDate: exercise.siftDate || null,
-        nameBlindSiftDate: exercise.nameBlindSiftDate || null,
-        telephoneAssessmentDate: exercise.telephoneAssessmentDate || null,
-        sjcaTestDate: exercise.sjcaTestDate || null,
-        sjcaTestStartTime: exercise.sjcaTestStartTime || null,
-        sjcaTestEndTime: exercise.sjcaTestEndTime || null,
-        sjcaTestOutcome: exercise.sjcaTestOutcome || null,
-        scenarioTestDate: exercise.scenarioTestDate ||null,
-        scenarioTestStartTime: exercise.scenarioTestStartTime || null,
-        scenarioTestEndTime: exercise.scenarioTestEndTime || null,
-        scenarioTestOutcome: exercise.scenarioTestOutcome || null,
-        shortlistingOutcomeDate: exercise.shortlistingOutcomeDate || null,
-        contactIndependentAssessors: exercise.contactIndependentAssessors || null,
-        independentAssessmentsReturnDate: exercise.independentAssessmentsReturnDate || null,
-        eligibilitySCCDate: exercise.eligibilitySCCDate || null,
-        selectionDays: exercise.selectionDays || null,
-        characterChecksDate: exercise.characterChecksDate || null,
-        statutoryConsultationDate: exercise.statutoryConsultationDate || null,
-        characterAndSCCDate: exercise.characterAndSCCDate || null,
-        finalOutcome: exercise.finalOutcome || null,
-      },
+      exercise: exercise,
     };
   },
   computed: {