#443 Multiselector Recommended

src/router.js

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

src/store/stage/recommended.js

@@ -26,14 +26,15 @@ export default {
       let firestoreRef = collectionRef
         .where('exercise.id', '==', exerciseId)
         .where('stage', '==', EXERCISE_STAGE.RECOMMENDED)
-        .where('active', '==', true);
+        .where('active', '==', true)
+        .limit(50);
 
       return bindFirestoreRef('records', firestoreRef, { serialize: vuexfireSerialize });
     }),
     unbind: firestoreAction(({ unbindFirestoreRef }) => {
       return unbindFirestoreRef('records');
     }),
-    updateStatus: async ( context, { applicationId, status } ) => {
+    updateStatus: async ( context, { status } ) => {
       let stageValue = EXERCISE_STAGE.RECOMMENDED; // initial value: 'recommended'
 
       if (status === APPLICATION_STATUS.APPROVED_FOR_IMMEDIATE_APPOINTMENT) {
@@ -44,13 +45,20 @@ 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;
@@ -61,10 +69,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/RecommendedEdit.vue

@@ -48,6 +48,16 @@ export default {
     availableStatuses() {
       return this.$store.getters['stageRecommended/availableStatuses'];
     },
+    itemsToChange() {
+      const selectedItems = this.$store.state.stageRecommended.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-recommended-list' });
+    }
   },
   methods: {
     async save() {

src/views/Exercises/Stages/RecommendedList.vue

@@ -1,32 +1,62 @@
 <template>
   <div>
     <Banner :message="message" />
-    <h1>Recommended</h1>
-    <ul>
-      <li 
-        v-for="item in applicationRecords" 
-        :key="item.application.id"
+    <form @submit.prevent="checkForm">
+      <div class="moj-page-header-actions">
+        <div class="moj-page-header-actions__title">
+          <h1 class="govuk-heading-l">
+            Recommended ({{ applicationRecords.length }})
+          </h1>
+        </div>
+        <div class="moj-page-header-actions__actions">
+          <div class="moj-button-menu">
+            <div class="moj-button-menu__wrapper">
+              <button 
+                class="govuk-button moj-button-menu__item moj-page-header-actions__action govuk-!-margin-right-2" 
+                :disabled="isButtonDisabled"
+              >
+                Set status
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Table 
+        data-key="id"
+        :data="applicationRecords"
+        :columns="[
+          { title: 'Reference number' },
+          { title: 'Name' },
+          { title: 'Status' },
+        ]"
+        multi-select
+        :selection.sync="selectedItems"
       >
-        <RouterLink
-          :to="{ name: 'exercise-stages-recommended-edit', params: { applicationId: item.application.id } }"
-        >
-          {{ item.candidate.fullName }}, {{ item.status }}
-        </RouterLink>
-      </li>
-    </ul>
+        <template #row="{row}">
+          <TableCell>{{ row.application.referenceNumber }}</TableCell>
+          <TableCell>{{ row.candidate.fullName }}</TableCell>
+          <TableCell>{{ row.status | lookup }}</TableCell>
+        </template>
+      </Table>   
+    </form>
   </div>
 </template>
 
 <script>
 import Banner from '@/components/Page/Banner';
+import Table from '@/components/Page/Table/Table'; 
+import TableCell from '@/components/Page/Table/TableCell'; 
 
 export default {
   components: {
     Banner,
+    Table,
+    TableCell,
   },
   data() {
     return {
       message: null,
+      selectedItems: [],
     };
   },
   computed: {
@@ -36,10 +66,20 @@ export default {
     exercise() {
       return this.$store.state.exerciseDocument.record;
     },
+    isButtonDisabled() {
+      const isDisabled = this.selectedItems && this.selectedItems.length;
+      return !isDisabled;
+    },
   },
   async created() {
     this.$store.dispatch('stageRecommended/bind', { exerciseId: this.exercise.id });
     this.message = await this.$store.dispatch('stageRecommended/getMessages');
   },
+  methods: {
+    checkForm() {
+      this.$store.dispatch('stageRecommended/storeItems', { items: this.selectedItems });
+      this.$router.push({ name: 'exercise-stages-recommended-edit' });
+    },
+  },
 };
 </script>