From ad8d40cb1c9384f710d7ad618cc92b956dcb677a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Thu, 27 Jan 2022 16:52:41 +0100
Subject: [PATCH] work on confidential / blur module

---
 src/Bundle/ChillMainBundle/Entity/Address.php |  2 +-
 .../Resources/public/module/blur/index.js     | 36 +++++++++----------
 .../public/vuejs/_components/Confidential.vue | 24 +++++++------
 .../Resources/views/Entity/address.html.twig  |  6 ++--
 .../views/AccompanyingCourse/index.html.twig  |  4 +--
 .../views/Entity/thirdparty.html.twig         |  2 +-
 6 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Entity/Address.php b/src/Bundle/ChillMainBundle/Entity/Address.php
index ef965f062..b717b33eb 100644
--- a/src/Bundle/ChillMainBundle/Entity/Address.php
+++ b/src/Bundle/ChillMainBundle/Entity/Address.php
@@ -48,7 +48,7 @@ class Address
      * @ORM\Column(type="boolean")
      * @Groups({"write"})
      */
-    private $confidential = false;
+    private bool $confidential = false;
 
     /**
      * @var string|null
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js b/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
index 6e3b75f2b..1d66d25e6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
@@ -1,21 +1,19 @@
 require('./blur.scss');
 
-var toggleBlur =  function(e){
-
-    var btn = e.target;
-
-    btn.previousElementSibling.classList.toggle("blur");
-    btn.classList.toggle("fa-eye");
-    btn.classList.toggle("fa-eye-slash");
-
-}
-
-var infos = document.getElementsByClassName("confidential");
-for(var i=0; i < infos.length; i++){
-    infos[i].insertAdjacentHTML('beforeend', '<i class="fa fa-eye toggle" aria-hidden="true"></i>');
-}
-
-var toggles = document.getElementsByClassName("toggle");
-for(var i=0; i < toggles.length; i++){
-    toggles[i].addEventListener("click", toggleBlur);
-}
\ No newline at end of file
+document.querySelectorAll('.confidential').forEach(function (el) {
+    let i = document.createElement('i');
+    const classes = ['fa', 'fa-eye', 'toggle'];
+    i.classList.add(...classes);
+    el.appendChild(i);
+    const toggleBlur = function(e) {
+        for (let child of el.children) {
+            if (!child.classList.contains('toggle')) {
+                child.classList.toggle('blur');
+            }
+        }
+        i.classList.toggle('fa-eye');
+        i.classList.toggle('fa-eye-slash');
+    }
+    i.addEventListener('click', toggleBlur);
+    toggleBlur();
+});
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
index efdf62926..0a34c4123 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
@@ -1,22 +1,26 @@
 <template>
-    <div class="confidential" v-on:click="toggleBlur">
-        <div class="confidential-content blur">
+    <div :class="classes">
+        <div class="confidential-content" :class="{ 'blur': isBlurred }">
             <slot name="confidential-content"></slot>
         </div>
-        <i class="fa fa-eye toggle" aria-hidden="true"></i>
+        <div>
+            <i class="fa fa-eye toggle" aria-hidden="true" @click="toggleBlur"></i>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
     name: "Confidential",
+    data() {
+        return {
+            isBlurred: true,
+        };
+    },
     methods : {
-        toggleBlur: function(e){
-            if(e.target.matches('.toggle')){
-                e.target.previousElementSibling.classList.toggle("blur");
-                e.target.classList.toggle("fa-eye");
-                e.target.classList.toggle("fa-eye-slash");
-            }
+        toggleBlur() {
+            console.log('toggle blur');
+            this.isBlurred = !this.isBlurred;
         },
     }
 }
@@ -39,4 +43,4 @@ export default {
         -moz-filter: blur(5px);
         filter: blur(5px);
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
index c265ca7e2..cccebabf5 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
@@ -59,7 +59,7 @@
     must be shown in such list
 #}
 {%- if render == 'list' -%}
-    <li class="chill-entity entity-address {% if address.confidential %}blur{% endif %}">
+    <li class="chill-entity entity-address {% if address.confidential %}confidential{% endif %}">
         {% if options['with_picto'] %}
             <i class="fa fa-li fa-map-marker"></i>
         {% endif %}
@@ -68,7 +68,7 @@
 {%- endif -%}
 
 {%- if render == 'inline' -%}
-    <span class="chill-entity entity-address {% if address.confidential %}blur{% endif %}">
+    <span class="chill-entity entity-address {% if address.confidential %}confidential{% endif %}">
         {% if options['with_picto'] %}
             <i class="fa fa-fw fa-map-marker"></i>
         {% endif %}
@@ -77,7 +77,7 @@
 {%- endif -%}
 
 {%- if render == 'bloc' -%}
-    <div class="chill-entity entity-address {% if address.confidential %}blur{% endif %}">
+    <div class="chill-entity entity-address {% if address.confidential %}confidential{% endif %}">
         {% if options['has_no_address'] == true and address.isNoAddress == true %}
             {% if address.postCode is not empty %}
             <div class="address{% if options['multiline'] %} multiline{% endif %}{% if options['with_delimiter'] %} delimiter{% endif %}">
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
index ce95b8401..1aed45550 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
@@ -151,14 +151,14 @@
                     {% if accompanyingCourse.requestorPerson is not null %}
                         <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
                         {% if accompanyingCourse.requestorAnonymous %}
-                            <div class="confidential"><p class="blur">{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}</p></div>
+                            <div class="confidential"><p>{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}</p></div>
                         {% else %}
                             {{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}
                         {% endif %}
                     {% elseif accompanyingCourse.requestorThirdParty is not null %}
                         <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
                         {% if accompanyingCourse.requestorAnonymous %}
-                            <div class="confidential"><p class="blur">{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}</p></div>
+                            <div class="confidential"><p>{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}</p></div>
                         {% else %}
                             {{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}
                         {% endif %}
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig b/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig
index 4f1e739a8..79aa7be6c 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig
@@ -99,7 +99,7 @@
         <div class="item-col">
         {% if options['isConfidential'] %}
             <div class="confidential">
-                <div class="confidential-content blur">
+                <div class="confidential-content">
                     <ul class="list-content fa-ul">
                         <li>
                             {{ thirdparty.getAddress|chill_entity_render_box({