Feature/442 set status button

src/router.js

@@ -251,7 +251,7 @@ const router = new Router({
               },
             },
             {
-              path: 'review/:applicationId',
+              path: 'review/edit',
               component: ExerciseStagesReviewEdit,
               name: 'exercise-stages-review-edit',
               meta: {

src/store/stage/review.js

@@ -80,7 +80,7 @@ export default {
     unbind: firestoreAction(({ unbindFirestoreRef }) => {
       return unbindFirestoreRef('records');
     }),
-    updateStatus: async ( context, { applicationId, status, nextStage } ) => {
+    updateStatus: async ( context, { status, nextStage } ) => {
       let stageValue = EXERCISE_STAGE.REVIEW; // initial value: 'review'
 
       // CHECKBOX SELECTED TO MOVE TO NEXT STAGE: SHORTLISTED
@@ -92,13 +92,21 @@ export default {
         status: status,
         stage: stageValue,
       };
-      const ref = collectionRef.doc(applicationId);
-      await ref.update(data)
-      .then(() => {
-        const valueMessage = lookup(status); 
-        context.commit('message', `Application id #${applicationId} changed to '${valueMessage}'`);
+
+      const selectedItems = context.state.selectedItems;
+      const batch = firestore.batch();
+      selectedItems.map( item => {
+        const ref = collectionRef.doc(item);
+        batch.update(ref, data);
       });
-      // @TODO store message(s) for what's been updated so it/they can be retrieved later (on list page)
+      await batch.commit();
+
+      const valueMessage = lookup(status); 
+      context.commit('message', `Updated ${selectedItems.length} candidates to '${valueMessage}'`);
+
+    },
+    storeItems: ( context, { items }) => {
+      context.commit('changeSelectedItems', items);
     },
     getMessages: (context) => {
       const localMsg = context.state.message;
@@ -109,10 +117,14 @@ export default {
   state: {
     records: [],
     message: null,
+    selectedItems: [],
   },
   mutations: {
     message(state, msg) {
       state.message = msg;
     },
+    changeSelectedItems(state, items) {
+      state.selectedItems = items;
+    },
   },
 };

src/views/Exercises/Stages/ReviewEdit.vue

@@ -61,9 +61,6 @@ export default {
     };
   },
   computed: {
-    applicationId() {
-      return this.$route.params.applicationId;
-    },
     availableStatuses() {
       const shortlistingMethods = this.exercise.shortlistingMethods;
       const otherShortlistingMethod = this.exercise.otherShortlistingMethod || [];
@@ -72,10 +69,20 @@ export default {
     exercise() {
       return this.$store.state.exerciseDocument.record;
     },
+    itemsToChange() {
+      const selectedItems = this.$store.state.stageReview.selectedItems;
+      return selectedItems;
+    },
+  },
+  created() {
+    // on refresh if there's no IDs to change => redirect to the list
+    if (this.itemsToChange.length === 0) {
+      this.$router.push({ name: 'exercise-stages-review-list' });
+    }
   },
   methods: {
     async save() {
-      await this.$store.dispatch('stageReview/updateStatus', { applicationId: this.applicationId, status: this.newSelectedStatus, nextStage: this.nextStageStatus });
+      await this.$store.dispatch('stageReview/updateStatus', { status: this.newSelectedStatus, nextStage: this.nextStageStatus });
       this.$router.push({ name: 'exercise-stages-review-list' });
     },
   },

src/views/Exercises/Stages/ReviewList.vue

@@ -2,31 +2,56 @@
   <div>
     <Banner :message="message" />
     <h1>Review</h1>
-    <ul>
-      <li 
-        v-for="item in applicationRecords" 
-        :key="item.application.id"
+    <form @submit.prevent="checkForm">
+      <button 
+        class="govuk-button govuk-!-margin-right-2" 
+        :disabled="isButtonDisabled"
       >
-        <RouterLink
-          :to="{ name: 'exercise-stages-review-edit', params: { applicationId: item.application.id } }"
+        Set status
+      </button>
+      <table>
+        <tr 
+          v-for="item in applicationRecords" 
+          :key="item.application.id"
         >
-          {{ item.candidate.fullName }}, {{ item.status }}
-        </RouterLink>
-      </li>
-    </ul>
+          <td>
+            <CheckboxGroup
+              :id="`item-${item.application.id}`"
+              v-model="selectedItems"
+              label=""
+              hint=""
+              value=""
+            >
+              <CheckboxItem
+                :value="item.application.id"
+                label=""
+              />
+            </CheckboxGroup>
+          </td>
+          <td>
+            {{ item.candidate.fullName }}, {{ item.status }}
+          </td>
+        </tr>
+      </table>
+    </form>
   </div>
 </template>
 
 <script>
 import Banner from '@/components/Page/Banner';
+import CheckboxGroup from '@/components/Form/CheckboxGroup';
+import CheckboxItem from '@/components/Form/CheckboxItem';
 
 export default {
   components: {
     Banner,
+    CheckboxGroup,
+    CheckboxItem,
   },
   data() {
     return {
       message: null,
+      selectedItems: null,
     };
   },
   computed: {
@@ -36,10 +61,21 @@ export default {
     exercise() {
       return this.$store.state.exerciseDocument.record;
     },
+    isButtonDisabled() {
+      const isDisabled = this.selectedItems && this.selectedItems.length;
+      return !isDisabled;
+    },
   },
   async created() {
     this.$store.dispatch('stageReview/bind', { exerciseId: this.exercise.id });
     this.message = await this.$store.dispatch('stageReview/getMessages');
+    this.$store.dispatch('stageReview/storeItems', { items: [] });
+  },
+  methods: {
+    checkForm() {
+      this.$store.dispatch('stageReview/storeItems', { items: this.selectedItems });
+      this.$router.push({ name: 'exercise-stages-review-edit' });
+    },
   },
 };
 </script>