#443 Update review list to use table component

jac-uk · Jun 1, 2020 · c34fc7f · c34fc7f
1 parent c3e8e6d
commit c34fc7f
Showing 1 changed file with 21 additions and 78 deletions.
diff --git a/src/views/Exercises/Stages/ReviewList.vue b/src/views/Exercises/Stages/ReviewList.vue
@@ -9,94 +9,37 @@
       >
         Set status
       </button>
-      <!-- <Table :data="applicationRecords" :columns="[{ heading: 'Reference number', value: 'application.referenceNumber' }]" multi-select /> -->
-      <table class="govuk-table">
-        <thead class="govuk-table__head">
-          <tr class="govuk-table__row">
-            <th
-              scope="col"
-              class="govuk-table__header govuk-!-padding-top-0"
-            >
-              <div class="govuk-checkboxes govuk-checkboxes--small">
-                <div class="govuk-checkboxes__item">
-                  <input
-                    id="selectAll"
-                    v-model="selectAll"
-                    class="govuk-checkboxes__input"
-                    type="checkbox"
-                  >
-                  <label
-                    class="govuk-label govuk-checkboxes__label"
-                    for="checkboxes"
-                  />
-                </div>
-              </div>
-            </th>
-            <th
-              scope="col"
-              class="govuk-table__header"
-            >
-              Reference number
-            </th>
-            <th
-              scope="col"
-              class="govuk-table__header"
-            >
-              Name
-            </th>
-            <th
-              scope="col"
-              class="govuk-table__header"
-            >
-              Status
-            </th>
-          </tr>
-        </thead>
-        <tbody class="govuk-table__body">
-          <tr
-            v-for="item in applicationRecords"
-            :key="item.id"
-            class="govuk-table__row"
-          >
-            <td class="govuk-table__cell govuk-!-padding-top-0">
-              <div class="govuk-checkboxes govuk-checkboxes--small">
-                <div class="govuk-checkboxes__item">
-                  <input
-                    :id="`item-${item.id}`"
-                    v-model="selectedItems"
-                    :value="item.id"
-                    class="govuk-checkboxes__input"
-                    type="checkbox"
-                  >
-                  <label
-                    class="govuk-label govuk-checkboxes__label"
-                    :for="`item-${item.id}`"
-                  />
-                </div>
-              </div>
-            </td>
-            <td class="govuk-table__cell">
-              {{ item.application.referenceNumber }}
-            </td>
-            <td class="govuk-table__cell">
-              {{ item.candidate.fullName }}
-            </td>
-            <td class="govuk-table__cell">
-              {{ item.status | lookup }}
-            </td>
-          </tr>
-        </tbody>
-      </table>      
+      <Table 
+        data-key="id"
+        :data="applicationRecords"
+        :columns="[
+          { title: 'Reference number' },
+          { title: 'Candidate' },
+          { title: 'Status' },
+        ]"
+        multi-select
+        :selection.sync="selectedItems"
+      >
+        <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 {