Merge branch 'homepage/rewrite' of gitlab.com:Chill-Projet/chill-bundles into homepage/rewrite

src/Bundle/ChillMainBundle/Resources/public/lib/show_hide/show_hide.js

@@ -39,6 +39,7 @@ var ShowHide = function(options) {
                 contents.push(el);
             }
             container_content.push(contents);
+            // console.log('container content', container_content);
         }
 
         // attach the listener on each input

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);
-}
+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();
+});

src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js

@@ -5,18 +5,21 @@ import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';
 
 const i18n = _createI18n(appMessages);
 
-window.addEventListener('DOMContentLoaded', function(e) {
+let appsOnPage = new Map();
 
-    let apps = document.querySelectorAll('[data-module="pick-dynamic"]');
+function loadDynamicPicker(element) {
+
+    let apps = element.querySelectorAll('[data-module="pick-dynamic"]');
 
     apps.forEach(function(el) {
 
         const
             isMultiple = parseInt(el.dataset.multiple) === 1,
-            input = document.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
-            picked = isMultiple ? JSON.parse(input.value) : [JSON.parse(input.value)];
+            uniqId = el.dataset.uniqid,
+            input = element.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
+            picked = (isMultiple) ? (JSON.parse(input.value)) : ((input.value === '[]') ? (null) : ([JSON.parse(input.value)]));
 
-        createApp({
+        const app = createApp({
             template: '<pick-entity ' +
                 ':multiple="multiple" ' +
                 ':types="types" ' +
@@ -65,5 +68,36 @@ window.addEventListener('DOMContentLoaded', function(e) {
         })
         .use(i18n)
         .mount(el);
+
+        appsOnPage.set(uniqId, app);
     });
-});
+}
+
+
+document.addEventListener('show-hide-show', function(e) {
+    console.log('creation event caught')
+    loadDynamicPicker(e.detail.container)
+})
+
+document.addEventListener('show-hide-hide', function(e) {
+    console.log('hiding event caught')
+    e.detail.container.querySelectorAll('[data-module="pick-dynamic"]').forEach((el) => {
+        let uniqId = el.dataset.uniqid;
+        console.log(uniqId);
+        if (appsOnPage.has(uniqId)) {
+            appsOnPage.get(uniqId).unmount();
+            console.log('App has been unmounted')
+            appsOnPage.delete(uniqId);
+        }
+    })
+})
+
+document.addEventListener('DOMContentLoaded', function(e) {
+    console.log('loaded event', e)
+    loadDynamicPicker(document)
+})
+
+
+
+
+

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

@@ -562,6 +562,7 @@ export default {
          this.entity.loaded.cities = [];
          this.entity.loaded.countries = [];
 
+         this.entity.selected.confidential = this.context.edit ? this.entity.address.confidential : false;
          this.entity.selected.isNoAddress = (this.context.edit && this.entity.address.text === '') ? true : false;
 
          this.entity.selected.country = this.context.edit ? this.entity.address.country : {};
@@ -593,6 +594,7 @@ export default {
       {
          console.log('apply changes');
          let newAddress = {
+            'confidential': this.entity.selected.confidential,
             'isNoAddress': this.entity.selected.isNoAddress,
             'street': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.street,
             'streetNumber': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.streetNumber,

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue

@@ -6,7 +6,6 @@
             <input class="form-control"
             type="text"
             name="floor"
-            maxlength=16
             :placeholder="$t('floor')"
             v-model="floor"/>
             <label for="floor">{{ $t('floor') }}</label>
@@ -15,7 +14,6 @@
             <input class="form-control"
             type="text"
             name="corridor"
-            maxlength=16
             :placeholder="$t('corridor')"
             v-model="corridor"/>
             <label for="corridor">{{ $t('corridor') }}</label>
@@ -24,7 +22,6 @@
             <input class="form-control"
             type="text"
             name="steps"
-            maxlength=16
             :placeholder="$t('steps')"
             v-model="steps"/>
             <label for="steps">{{ $t('steps') }}</label>
@@ -33,7 +30,6 @@
             <input class="form-control"
             type="text"
             name="flat"
-            maxlength=16
             :placeholder="$t('flat')"
             v-model="flat"/>
             <label for="flat">{{ $t('flat') }}</label>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue

@@ -17,12 +17,22 @@
       <div class="row my-3">
          <div class="col-lg-6">
 
+            <div class="form-check">
+               <input type="checkbox"
+                  class="form-check-input"
+                  id="isConfidential"
+                  v-model="isConfidential"
+                  :value="valueConfidential" />
+               <label class="form-check-label" for="isConfidential">
+                  {{ $t('isConfidential') }}
+               </label>
+            </div>
             <div class="form-check">
                <input type="checkbox"
                   class="form-check-input"
                   id="isNoAddress"
                   v-model="isNoAddress"
-                  v-bind:value="value" />
+                  :value="value" />
                <label class="form-check-label" for="isNoAddress">
                   {{ $t('isNoAddress') }}
                </label>
@@ -118,7 +128,8 @@ export default {
    emits: ['getCities', 'getReferenceAddresses'],
    data() {
       return {
-         value: false
+         value: false,
+         valueConfidential: false,
       }
    },
    computed: {
@@ -134,6 +145,14 @@ export default {
       addressMap() {
          return this.entity.addressMap;
       },
+      isConfidential: {
+         set(value) {
+            this.entity.selected.confidential = value;
+         },
+         get() {
+            return this.entity.selected.confidential;
+         }
+      },
       isNoAddress: {
          set(value) {
             console.log('isNoAddress value', value);

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/i18n.js

@@ -18,6 +18,7 @@ const addressMessages = {
         other_address: 'Autre adresse',
         create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse',
         isNoAddress: 'Pas d\'adresse complète',
+        isConfidential: 'Adresse confidentielle',
         street: 'Nom de rue',
         streetNumber: 'Numéro',
         floor: 'Étage',

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -1,5 +1,5 @@
 <template>
-    <ul class="list-suggest remove-items">
+    <ul class="list-suggest remove-items" v-if="picked.length">
         <li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
             <span class="chill_denomination">{{ p.text }}</span>
         </li>
@@ -79,11 +79,15 @@ export default {
             );
             this.$refs.addPersons.resetSearch(); // to cast child method
             modal.showModal = false;
+            console.log(this.picked)
         },
         removeEntity(entity) {
             console.log('remove entity', entity);
             this.$emit('removeEntity', entity);
         }
     },
+    mounted() {
+        console.log(this.picked);
+    }
 }
 </script>

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>
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue

@@ -1,26 +1,58 @@
 <template>
+
    <component :is="component" class="chill-entity entity-address my-3">
 
       <component :is="component" class="address" :class="multiline">
-         <div v-if="isMultiline === true">
-            <p v-for="(l, i) in address.lines" :key="`line-${i}`">
-               {{ l }}
-            </p>
+
+         <div v-if="isConfidential">
+            <confidential>
+               <template v-slot:confidential-content>
+                  <div v-if="isMultiline === true">
+                     <p v-for="(l, i) in address.lines" :key="`line-${i}`">
+                        {{ l }}
+                     </p>
+                  </div>
+                  <div v-else>
+                     <p v-if="address.text"
+                        class="street">
+                        {{ address.text }}
+                     </p>
+                     <p v-if="address.postcode"
+                        class="postcode">
+                        {{ address.postcode.code }} {{ address.postcode.name }}
+                     </p>
+                     <p v-if="address.country"
+                        class="country">
+                        {{ address.country.name.fr }}
+                     </p>
+                  </div>
+               </template>
+
+            </confidential>
          </div>
-         <div v-else>
-            <p v-if="address.text"
-               class="street">
-               {{ address.text }}
-            </p>
-            <p v-if="address.postcode"
-               class="postcode">
-               {{ address.postcode.code }} {{ address.postcode.name }}
-            </p>
-            <p v-if="address.country"
-               class="country">
-               {{ address.country.name.fr }}
-            </p>
+
+         <div v-if="!isConfidential">
+            <div v-if="isMultiline === true">
+               <p v-for="(l, i) in address.lines" :key="`line-${i}`">
+                  {{ l }}
+               </p>
+            </div>
+            <div v-else>
+               <p v-if="address.text"
+                  class="street">
+                  {{ address.text }}
+               </p>
+               <p v-if="address.postcode"
+                  class="postcode">
+                  {{ address.postcode.code }} {{ address.postcode.name }}
+               </p>
+               <p v-if="address.country"
+                  class="country">
+                  {{ address.country.name.fr }}
+               </p>
+            </div>
          </div>
+
       </component>
 
       <!-- <div v-if="isMultiline === true" class="address-more">
@@ -78,8 +110,14 @@
 </template>
 
 <script>
+
+import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
+
 export default {
    name: 'AddressRenderBox',
+   components: {
+      Confidential
+   },
    props: {
       address: {
          type: Object
@@ -100,6 +138,9 @@ export default {
       multiline() {
          //console.log(this.isMultiline, typeof this.isMultiline);
          return this.isMultiline === true ? "multiline" : "";
+      },
+      isConfidential() {
+         return this.address.confidential;
       }
    }
 };

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">
+    <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">
+    <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">
+    <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/ChillMainBundle/Resources/views/Form/fields.html.twig

@@ -216,7 +216,7 @@
     {% endif %}
 {% endblock %}
 
-{% block pick_user_dynamic_widget %}
+{% block pick_entity_dynamic_widget %}
     <input type="hidden" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} data-input-uniqid="{{ form.vars['uniqid'] }}"/>
     <div data-module="pick-dynamic" data-types="{{ form.vars['types']|json_encode }}" data-multiple="{{ form.vars['multiple'] }}" data-uniqid="{{ form.vars['uniqid'] }}"></div>
 {% endblock %}