From 1bbc94a7e39a1ca84d8aee2d10d942375ca3f264 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Wed, 17 Mar 2021 20:15:58 +0100
Subject: Stopped using `contenteditable` in `reservation.vue`

---
 resources/js/components/reservation.vue | 35 +++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index fdc14d1..fbb5fdc 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -1,20 +1,20 @@
 <template>
   <tr>
-    <td>{{ reservation.id }}</td>
-    <td>
+    <td class="align-middle text-center">{{ reservation.id }}</td>
+    <td class="align-middle text-center">
       <input type="checkbox" :checked="reservation.approved"/>
     </td>
-    <td contenteditable="true">{{ reservation.operatorCall }}</td>
-    <td contenteditable="true">{{ reservation.qso }}</td>
-    <td contenteditable="true">{{ reservation.fromTime }}</td>
-    <td contenteditable="true">{{ reservation.toTime }}</td>
-    <td contenteditable="true">{{ reservation.specialCall }}</td>
-    <td contenteditable="true">{{ reservation.frequencies }}</td>
-    <td contenteditable="true">{{ reservation.modes }}</td>
-    <td contenteditable="true">{{ reservation.operatorName }}</td>
-    <td contenteditable="true">{{ reservation.operatorEmail }}</td>
-    <td contenteditable="true">{{ reservation.operatorCall }}</td>
-    <td>
+    <td class="align-middle"><input type="text" v-model="reservation.operatorCall"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.qso"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.fromTime"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.toTime"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.specialCall"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.frequencies"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.modes"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.operatorName"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.operatorEmail"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.operatorCall"></td>
+    <td class="align-middle">
       <button class="btn btn-primary mr-2">Update</button>
       <button class="btn btn-warning mr-2">Restore</button>
       <button class="btn btn-danger">Delete</button>
@@ -32,3 +32,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+input {
+  background-color: white;
+  border: 1px solid lightgray;
+  border-radius: 3px;
+  padding: 0.2em;
+}
+</style>
-- 
cgit v1.2.3