#443 Review Handover

jac-uk · Jun 2, 2020 · 542a390 · 542a390
1 parent da82ed4
commit 542a390
Showing 1 changed file with 58 additions and 12 deletions.
diff --git a/src/views/Exercises/Stages/HandoverList.vue b/src/views/Exercises/Stages/HandoverList.vue
@@ -1,30 +1,76 @@
 <template>
   <div>
-    <h1>Handover</h1>
-    <ul>
-      <li 
-        v-for="item in applicationRecords" 
-        :key="item.application.id"
+    <Banner :message="message" />
+    <form @submit.prevent="checkForm">
+      <div class="moj-page-header-actions">
+        <div class="moj-page-header-actions__title">
+          <h1 class="govuk-heading-l">
+            Handover ({{ 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-show-application', 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: {
     applicationRecords() {
       return this.$store.state.stageHandover.records;
     },
     exercise() {
       return this.$store.state.exerciseDocument.record;
     },
+    isButtonDisabled() {
+      const isDisabled = false; // hardcode the button always disabled for Handover status
+      // const isDisabled = this.selectedItems && this.selectedItems.length;
+      return !isDisabled;
+    },
   },
   created() {
     this.$store.dispatch('stageHandover/bind', { exerciseId: this.exercise.id });