From 1ded5b7c01fc6e4e3b2e18af695731e73901c4c9 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 7 Oct 2021 14:18:25 +0200
Subject: [PATCH 1/5] first commit

---
 .../lib/blur_confidential/blur_confidential.js      | 13 +++++++++++++
 .../Resources/public/lib/blur_confidential/index.js |  1 +
 2 files changed, 14 insertions(+)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/blur_confidential.js
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/index.js

diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/blur_confidential.js b/src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/blur_confidential.js
new file mode 100644
index 000000000..70a12736b
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/blur_confidential.js
@@ -0,0 +1,13 @@
+var infos = document.querySelectorAll("confidential");
+var toggles = document.querySelectorAll("confidential-toggle");
+
+var toggleBlur = function(){
+    var isBlurred = true;
+    if(isBlurred === true){
+        
+    }
+}
+
+for(var i=0; i < toggles.length; i++){
+    toggles[i].addEventListener("click", toggleBlur)
+}
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/index.js b/src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/index.js
new file mode 100644
index 000000000..bb47be73c
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/index.js
@@ -0,0 +1 @@
+require("./blur_confidential.js");
\ No newline at end of file

From 1ffff1f72c96f7cfe0fbc075e9c38ef67e5893fe Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 7 Oct 2021 17:10:52 +0200
Subject: [PATCH 2/5] restructuring files to /module

---
 .../Resources/public/lib/blur_confidential/index.js              | 1 -
 .../blur_confidential.js => module/blur/index.js}                | 0
 2 files changed, 1 deletion(-)
 delete mode 100644 src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/index.js
 rename src/Bundle/ChillMainBundle/Resources/public/{lib/blur_confidential/blur_confidential.js => module/blur/index.js} (100%)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/index.js b/src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/index.js
deleted file mode 100644
index bb47be73c..000000000
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/index.js
+++ /dev/null
@@ -1 +0,0 @@
-require("./blur_confidential.js");
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/blur_confidential.js b/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
similarity index 100%
rename from src/Bundle/ChillMainBundle/Resources/public/lib/blur_confidential/blur_confidential.js
rename to src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js

From 487103375d2e13c3cfe5d98584619d3af30ce8d7 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Fri, 8 Oct 2021 22:21:40 +0200
Subject: [PATCH 3/5] blur logic implemented on view.html.twig of Person by
 means of example

---
 .../Resources/public/module/blur/index.js     | 22 +++++++----
 .../Resources/views/layout.html.twig          | 17 ++++++++-
 .../ChillMainBundle/chill.webpack.config.js   |  1 +
 .../Resources/views/Person/view.html.twig     | 38 +++++++++++++------
 4 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js b/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
index 70a12736b..691059f36 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
@@ -1,13 +1,19 @@
-var infos = document.querySelectorAll("confidential");
-var toggles = document.querySelectorAll("confidential-toggle");
+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 toggleBlur = function(){
-    var isBlurred = true;
-    if(isBlurred === true){
-        
-    }
 }
 
+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)
+    toggles[i].addEventListener("click", toggleBlur);
 }
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
index 8bee2983e..154a625f6 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
@@ -12,7 +12,22 @@
     {{ encore_entry_link_tags('mod_forkawesome') }}
     {{ encore_entry_link_tags('mod_ckeditor5') }}
     {{ encore_entry_link_tags('chill') }}
-    {% block css%}<!-- nothing added to css -->{% endblock %}
+    {% block css%}<!-- nothing added to css -->
+    <style>
+        .confidential{
+            display: flex;
+        }
+        .toggle{
+            margin-left: auto; 
+            margin-right: 100px;
+        }
+        .blur {
+            -webkit-filter: blur(5px);
+            -moz-filter: blur(5px);
+            filter: blur(5px);
+        }
+    </style>
+    {% endblock %}
 </head>
 
 <body>
diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js
index 0204166d0..2c093c70b 100644
--- a/src/Bundle/ChillMainBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillMainBundle/chill.webpack.config.js
@@ -58,6 +58,7 @@ module.exports = function(encore, entries)
     encore.addEntry('mod_forkawesome', __dirname + '/Resources/public/module/forkawesome/index.js');
     encore.addEntry('mod_bootstrap', __dirname + '/Resources/public/module/bootstrap/index.js');
     encore.addEntry('mod_ckeditor5', __dirname + '/Resources/public/module/ckeditor5/index.js');
+    encore.addEntry('mod_blur', __dirname + '/Resources/public/module/blur/index.js');
 
     // Vue entrypoints
     encore.addEntry('vue_address', __dirname + '/Resources/public/vuejs/Address/index.js');
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
index c5cc8478c..d5c69229d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
@@ -94,14 +94,18 @@ This view should receive those arguments:
                     {%- endif -%}
 
                     {%- if chill_person.fields.country_of_birth == 'visible' -%}
-                    <dt>{{ 'Country of birth'|trans }}&nbsp;:</dt>
-                    <dd>{% apply spaceless %}
-                        {% if person.countryOfBirth is not null %}
-                            {{ person.countryOfBirth.name|localize_translatable_string }}
-                        {% else %}
-                            <span class="chill-no-data-statement">{{ 'Unknown country of birth'|trans }}</span>
-                        {% endif %}
-                    {% endapply %}</dd>
+                    <div class="confidential">
+                        <div class="confidential-content blur">
+                            <dt>{{ 'Country of birth'|trans }}&nbsp;:</dt>
+                            <dd>{% apply spaceless %}
+                                {% if person.countryOfBirth is not null %}
+                                    {{ person.countryOfBirth.name|localize_translatable_string }}
+                                {% else %}
+                                    <span class="chill-no-data-statement">{{ 'Unknown country of birth'|trans }}</span>
+                                {% endif %}
+                            {% endapply %}</dd>
+                        </div>
+                    </div>
                     {%- endif -%}
                 </dl>
             </figure>
@@ -199,10 +203,14 @@ This view should receive those arguments:
                 {%- endif -%}
 
                 {%- if chill_person.fields.phonenumber == 'visible' -%}
-                <dl>
-                    <dt>{{ 'Phonenumber'|trans }}&nbsp;:</dt>
-                    <dd>{% if person.phonenumber is not empty %}<a href="tel:{{ person.phonenumber }}"><pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
-                </dl>
+                <div class="confidential">
+                    <div class="confidential-content blur">
+                        <dl>
+                            <dt>{{ 'Phonenumber'|trans }}&nbsp;:</dt>
+                            <dd>{% if person.phonenumber is not empty %}<a href="tel:{{ person.phonenumber }}"><pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
+                        </dl>
+                    </div>
+                </div>
                 {% endif %}
 
                 {%- if chill_person.fields.mobilenumber == 'visible' -%}
@@ -263,3 +271,9 @@ This view should receive those arguments:
 
 </div>
 {% endblock %}
+
+{% block js %}
+
+    {{ encore_entry_script_tags('mod_blur') }}
+
+{% endblock js %}
\ No newline at end of file

From 78b651bdc40708e55d5dff0870363dcd12ed4b05 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Fri, 8 Oct 2021 23:44:06 +0200
Subject: [PATCH 4/5] blur added to requestor in twig template

---
 .../Resources/views/layout.html.twig             |  5 +++--
 .../views/AccompanyingPeriod/_list.html.twig     | 16 ++++++++++------
 .../Resources/views/Person/view.html.twig        | 16 +---------------
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
index 154a625f6..aaa5af914 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
@@ -16,10 +16,10 @@
     <style>
         .confidential{
             display: flex;
+            align-items: center;
         }
         .toggle{
-            margin-left: auto; 
-            margin-right: 100px;
+            margin-left: 10px;
         }
         .blur {
             -webkit-filter: blur(5px);
@@ -103,6 +103,7 @@
     {{ encore_entry_script_tags('mod_bootstrap') }}
     {{ encore_entry_script_tags('mod_forkawesome') }}
     {{ encore_entry_script_tags('mod_ckeditor5') }}
+    {{ encore_entry_script_tags('mod_blur') }}
     {{ encore_entry_script_tags('chill') }}
 
     <script type="text/javascript">
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
index bcb630cde..35eae9cf4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
@@ -64,12 +64,16 @@
                             <div class="wl-row">
                                 <div class="wl-col title"><h3>{{ 'Requestor'|trans }}</h3></div>
                                 <div class="wl-col list">
-                                    {% if accompanying_period.requestorPerson is not null %}
-                                        <span class="wl-item badge-person">{{ accompanying_period.requestorPerson|chill_entity_render_string }}</span>
-                                    {% endif %}
-                                    {% if accompanying_period.requestorThirdParty is not null %}
-                                        <span class="wl-item badge-thirdparty">{{ accompanying_period.requestorThirdParty|chill_entity_render_string }}</span>
-                                    {% endif %}
+                                    <div class="confidential">
+                                        <div class="confidential-content blur">
+                                            {% if accompanying_period.requestorPerson is not null %}
+                                                <span class="wl-item badge-person">{{ accompanying_period.requestorPerson|chill_entity_render_string }}</span>
+                                            {% endif %}
+                                            {% if accompanying_period.requestorThirdParty is not null %}
+                                                <span class="wl-item badge-thirdparty">{{ accompanying_period.requestorThirdParty|chill_entity_render_string }}</span>
+                                            {% endif %}
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         {% endif %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
index d5c69229d..5c2ba3336 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
@@ -94,8 +94,6 @@ This view should receive those arguments:
                     {%- endif -%}
 
                     {%- if chill_person.fields.country_of_birth == 'visible' -%}
-                    <div class="confidential">
-                        <div class="confidential-content blur">
                             <dt>{{ 'Country of birth'|trans }}&nbsp;:</dt>
                             <dd>{% apply spaceless %}
                                 {% if person.countryOfBirth is not null %}
@@ -104,8 +102,6 @@ This view should receive those arguments:
                                     <span class="chill-no-data-statement">{{ 'Unknown country of birth'|trans }}</span>
                                 {% endif %}
                             {% endapply %}</dd>
-                        </div>
-                    </div>
                     {%- endif -%}
                 </dl>
             </figure>
@@ -203,14 +199,10 @@ This view should receive those arguments:
                 {%- endif -%}
 
                 {%- if chill_person.fields.phonenumber == 'visible' -%}
-                <div class="confidential">
-                    <div class="confidential-content blur">
                         <dl>
                             <dt>{{ 'Phonenumber'|trans }}&nbsp;:</dt>
                             <dd>{% if person.phonenumber is not empty %}<a href="tel:{{ person.phonenumber }}"><pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
                         </dl>
-                    </div>
-                </div>
                 {% endif %}
 
                 {%- if chill_person.fields.mobilenumber == 'visible' -%}
@@ -270,10 +262,4 @@ This view should receive those arguments:
     {% endif %}
 
 </div>
-{% endblock %}
-
-{% block js %}
-
-    {{ encore_entry_script_tags('mod_blur') }}
-
-{% endblock js %}
\ No newline at end of file
+{% endblock %}
\ No newline at end of file

From 5d494221d24224fd8a60749859ac97a997214d8d Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Mon, 18 Oct 2021 13:11:14 +0200
Subject: [PATCH 5/5] confidential component created and added to
 personRenderBox on resourceItem and participationItem as demo. bug: eye icon
 only appears when clicking on the vue devtools extension in firefox?

---
 .../public/vuejs/_components/Confidential.vue | 52 +++++++++++++++++++
 .../Resources/views/layout.html.twig          |  1 +
 .../PersonsAssociated/ParticipationItem.vue   |  1 +
 .../components/Resources/ResourceItem.vue     |  2 +-
 .../_components/Entity/PersonRenderBox.vue    | 20 +++++--
 5 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
new file mode 100644
index 000000000..165e9f0b0
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="confidential" v-on:click="toggleBlur">
+        <div class="confidential-content blur">
+            <slot name="confidential-content"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Confidential",
+    computed : {
+        getConfidentialInfo: function(){
+            var infos = document.getElementsByClassName("confidential");
+            return infos;
+        },
+        addToggles: function(){
+            var infos = this.getConfidentialInfo;
+            if(this.getConfidentialInfo !== null){
+                for(var i=0; i < infos.length; i++){
+                infos[i].insertAdjacentHTML('beforeend', '<i class="fa fa-eye toggle" v-on:click="toggleBlur" aria-hidden="true"></i>');
+                }
+            }
+        },
+    },
+    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");
+            }
+        },
+    }
+}
+</script>
+
+<style lang='scss'>
+    .confidential{
+        display: flex;
+        align-items: center;
+    }
+    .toggle{
+        margin-left: 10px;
+        cursor: pointer;
+    }
+    .blur {
+        -webkit-filter: blur(5px);
+        -moz-filter: blur(5px);
+        filter: blur(5px);
+    }
+</style>
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
index aaa5af914..5f819f7f7 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
@@ -20,6 +20,7 @@
         }
         .toggle{
             margin-left: 10px;
+            cursor: pointer;
         }
         .blur {
             -webkit-filter: blur(5px);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
index e19dfa05e..7b5fabfbd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
@@ -9,6 +9,7 @@
                addAltNames: true,
                addAge : true,
                hLevel : 3,
+               isConfidential :  true,
             }"
       :person="participation.person"
       :returnPath="getAccompanyingCourseReturnPath">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
index bd70fa090..7f209f0d4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
@@ -2,7 +2,7 @@
    <person-render-box render="bloc"
       v-if="resource.resource.type === 'person'"
       :person="resource.resource"
-      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3 }"
+      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3, isConfidential : true }"
       >
       <template v-slot:record-actions>
          <ul class="record_actions">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index 2bc5f0b3b..89dbd63f6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -53,10 +53,18 @@
 
                     <li v-if="person.current_household_id">
                        <i class="fa fa-li fa-map-marker"></i>
-                       <address-render-box v-if="person.current_household_address"
-                         :address="person.current_household_address"
-                         :isMultiline="isMultiline">
-                       </address-render-box>
+                       <confidential v-if="options.isConfidential">
+                           <template v-slot:confidential-content>
+                            <address-render-box
+                                :address="person.current_household_address"
+                                :isMultiline="isMultiline">
+                            </address-render-box>
+                           </template>
+                       </confidential>
+                        <address-render-box v-else-if="person.current_household_address"
+                            :address="person.current_household_address"
+                            :isMultiline="isMultiline">
+                        </address-render-box>
                        <p v-else class="chill-no-data-statement">
                           {{ $t('renderbox.household_without_address') }}
                        </p>
@@ -133,11 +141,13 @@
 <script>
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 
 export default {
     name: "PersonRenderBox",
     components: {
-        AddressRenderBox
+        AddressRenderBox,
+        Confidential
     },
     props: ['person', 'options', 'render', 'returnPath'],
     computed: {