From 06197070541a5e030e8b5aa1e861106f7a8bf7e4 Mon Sep 17 00:00:00 2001
From: Marco Crapts <marco.crapts@kpn.com>
Date: Fri, 19 May 2023 11:00:18 +0200
Subject: [PATCH] update list view

---
 src/components/ViewModes/ListView.vue | 78 ++++++++++++++++-----------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/components/ViewModes/ListView.vue b/src/components/ViewModes/ListView.vue
index 3f9dee0..fd87e48 100644
--- a/src/components/ViewModes/ListView.vue
+++ b/src/components/ViewModes/ListView.vue
@@ -1,13 +1,42 @@
+<script setup lang="ts">
+const rows = [
+  {
+    noteTitle: 'Cy Ganderton',
+    references: 'Quality Control Specialist',
+    modified: 'Blue',
+  },
+  {
+    noteTitle: 'Hart Hagerty',
+    references: 'Desktop Support Technician',
+    modified: 'Purple',
+  },
+  {
+    noteTitle: 'Brice Swyre',
+    references: 'Tax Accountant',
+    modified: 'Red',
+  },
+].map((row) => ({
+  ...row,
+  selected: false,
+}))
+
+const checkedRows = ref<{ [key: string]: Boolean }>({})
+
+const toggleRow = (rowId: string) =>
+  (checkedRows.value[rowId] = !checkedRows.value[rowId])
+</script>
 <template>
   <div class="overflow-x-auto">
     <table class="table-compact table w-full">
-      <!-- head -->
       <thead>
         <tr>
           <th>
-            <label>
-              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
-            </label>
+            <!-- <label>
+              <input
+                type="checkbox"
+                class="checkbox-primary checkbox checkbox-sm border-secondary"
+              />
+            </label> -->
           </th>
           <th>Note title</th>
           <th>References</th>
@@ -15,38 +44,23 @@
         </tr>
       </thead>
       <tbody>
-        <!-- row 1 -->
-        <tr class="hover">
+        <tr
+          class="hover hover:cursor-pointer"
+          v-for="row in rows"
+          @click="toggleRow(row.noteTitle)"
+        >
           <th>
             <label>
-              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+              <input
+                type="checkbox"
+                class="checkbox-primary checkbox checkbox-sm border-secondary"
+                v-model="checkedRows[row.noteTitle]"
+              />
             </label>
           </th>
-          <td>Cy Ganderton</td>
-          <td>Quality Control Specialist</td>
-          <td>Blue</td>
-        </tr>
-        <!-- row 2 -->
-        <tr class="hover">
-          <th>
-            <label>
-              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
-            </label>
-          </th>
-          <td>Hart Hagerty</td>
-          <td>Desktop Support Technician</td>
-          <td>Purple</td>
-        </tr>
-        <!-- row 3 -->
-        <tr class="hover">
-          <th>
-            <label>
-              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
-            </label>
-          </th>
-          <td>Brice Swyre</td>
-          <td>Tax Accountant</td>
-          <td>Red</td>
+          <td>{{ row.noteTitle }}</td>
+          <td>{{ row.references }}</td>
+          <td>{{ row.modified }}</td>
         </tr>
       </tbody>
     </table>