work on confidential / blur module

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

src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js

@@ -1,21 +1,19 @@
 require('./blur.scss');
 
-var toggleBlur =  function(e){
+document.querySelectorAll('.confidential').forEach(function (el) {
-
+    let i = document.createElement('i');
-    var btn = e.target;
+    const classes = ['fa', 'fa-eye', 'toggle'];
-
+    i.classList.add(...classes);
-    btn.previousElementSibling.classList.toggle("blur");
+    el.appendChild(i);
-    btn.classList.toggle("fa-eye");
+    const toggleBlur = function(e) {
-    btn.classList.toggle("fa-eye-slash");
+        for (let child of el.children) {
-
+            if (!child.classList.contains('toggle')) {
+                child.classList.toggle('blur');
             }
-
-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>');
         }
-
+        i.classList.toggle('fa-eye');
-var toggles = document.getElementsByClassName("toggle");
+        i.classList.toggle('fa-eye-slash');
-for(var i=0; i < toggles.length; i++){
-    toggles[i].addEventListener("click", toggleBlur);
     }
+    i.addEventListener('click', toggleBlur);
+    toggleBlur();
+});

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue

@@ -1,22 +1,26 @@
 <template>
-    <div class="confidential" v-on:click="toggleBlur">
+    <div :class="classes">
-        <div class="confidential-content blur">
+        <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){
+        toggleBlur() {
-            if(e.target.matches('.toggle')){
+            console.log('toggle blur');
-                e.target.previousElementSibling.classList.toggle("blur");
+            this.isBlurred = !this.isBlurred;
-                e.target.classList.toggle("fa-eye");
-                e.target.classList.toggle("fa-eye-slash");
-            }
         },
     }
 }

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 %}">

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 %}

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({