From 5a2e6c09696b0d40b7c28753f421a6ea60895dfb Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 9 Dec 2021 17:16:28 +0100
Subject: [PATCH] AddPerson suggestions: all line make checkbox clickable

---
 .../AddPersons/PersonSuggestion.vue           | 74 ++++++++++---------
 1 file changed, 40 insertions(+), 34 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
index e3b4901d7..4ccec9216 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
@@ -1,21 +1,22 @@
 <template>
    <div class="list-item" :class="{ checked: isChecked }">
-         
-         <div>
-            <input 
-               v-bind:type="type" 
+
+         <label>
+            <div>
+            <input
+               v-bind:type="type"
                v-model="selected"
                name="item"
                v-bind:id="item"
                v-bind:value="setValueByType(item, type)" />
-         </div>
-            
-         <suggestion-person 
+            </div>
+
+         <suggestion-person
             v-if="item.result.type === 'person'"
             v-bind:item="item">
          </suggestion-person>
-         
-         <suggestion-third-party 
+
+         <suggestion-third-party
             v-if="item.result.type === 'thirdparty'"
             v-bind:item="item">
          </suggestion-third-party>
@@ -24,6 +25,7 @@
             v-if="item.result.type === 'user'"
             v-bind:item="item">
          </suggestion-user>
+         </label>
 
    </div>
 </template>
@@ -41,7 +43,7 @@ export default {
       SuggestionUser,
    },
    props: [
-      'item', 
+      'item',
       'search',
       'type'
    ],
@@ -69,7 +71,7 @@ export default {
 </script>
 
 <style lang="scss">
-   div.results {   
+   div.results {
       div.list-item {
          padding: 0.4em 0.8em;
          display: flex;
@@ -78,32 +80,36 @@ export default {
             background-color: #ececec;
             border-bottom: 1px dotted #8b8b8b;
          }
-         div.container {
-            & > input {
-               margin-right: 0.8em;
+         label {
+            display: inline-flex;
+            width: 100%;
+            div.container {
+               & > input {
+                  margin-right: 0.8em;
+               }
+               span:not(.name) {
+                  margin-left: 0.5em;
+                  opacity: 0.5;
+                  font-size: 90%;
+                  font-style: italic;
+               }
             }
-            span:not(.name) {
-               margin-left: 0.5em;
-               opacity: 0.5;
-               font-size: 90%;
-               font-style: italic;
+            div.right_actions {
+               margin: 0 0 0 auto;
+               display: flex;
+               align-items: flex-end;
+               & > * {
+                  margin-left: 0.5em;
+                  align-self: baseline;
+               }
+
+               a.btn {
+                  border: 1px solid lightgrey;
+                  font-size: 70%;
+                  padding: 4px;
+               }
             }
          }
-         div.right_actions {
-            margin: 0 0 0 auto;
-            display: flex;
-            align-items: flex-end;
-            & > * {
-               margin-left: 0.5em;
-               align-self: baseline;
-            }
-            
-            a.btn {
-               border: 1px solid lightgrey;
-               font-size: 70%;
-               padding: 4px;
-            } 
-         }
       }
    }
 </style>