Merge branch 'ameliorations_composants_vue' into 'improve_ux'

Ameliorations composants vue

See merge request Chill-Projet/chill-bundles!134

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

@@ -43,8 +43,9 @@
 
          <template v-slot:footer>
             <button v-if="action === 'show'"
-               @click="changeActionTo('edit')"
+               @click="goToLocation(id, type)"
-               class="btn btn-update">
+               :title="$t(titleMessage)"
+               class="btn btn-show">{{ $t(buttonMessage) }}
             </button>
             <button v-else
                class="btn btn-save"
@@ -115,6 +116,22 @@ export default {
             case 'create':
                return 'onthefly.create.title';
          }
+      },
+      titleMessage() {
+         switch (this.type){
+            case 'person':
+               return 'action.redirect.' + this.type;
+            case 'thirdparty':
+               return 'action.redirect.' + this.type;
+         }
+      },
+      buttonMessage(){
+         switch (this.type){
+            case 'person':
+               return 'onthefly.show.file_' + this.type;
+            case 'thirdparty':
+               return 'onthefly.show.file_' + this.type;
+         }
       }
    },
    methods: {
@@ -139,6 +156,13 @@ export default {
             this.$refs.castNew.castByType();
          }
          this.modal.showModal = false;
+      },
+      goToLocation(id, type){
+         if(type == 'person'){
+            window.location = `../../person/${id}/general`
+         } else if(type == 'thirdparty') {
+            window.location = `../../thirdparty/thirdparty/${id}/show`
+         }
       }
    }
 }
@@ -148,4 +172,5 @@ export default {
 a {
    cursor: pointer;
 }
+
 </style>

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

@@ -41,7 +41,11 @@ const messages = {
          close: "Fermer",
          back: "Retour",
          check_all: "cocher tout",
-         reset: "réinitialiser"
+         reset: "réinitialiser",
+         redirect: {
+            person: "Quitter la page et ouvrir le dossier",
+            thirdparty: "Quitter la page et voir le tiers",
+         }
       },
       nav: {
          next: "Suivant",
@@ -52,7 +56,9 @@ const messages = {
       onthefly: {
          show: {
             person: "Détails de l'usager",
-            thirdparty: "Détails du tiers"
+            thirdparty: "Détails du tiers",
+            file_person: "Ouvrir le dossier",
+            file_thirdparty: "Voir le Tiers",
          },
          edit: {
             person: "Modifier un usager",
@@ -71,7 +77,7 @@ const messages = {
             man: "Né le",
             woman: "Née le"
          } ,
-         no_information: "Pas d'information",
+         no_data: "Aucune information renseignée",
          type: {
             thirdparty: "Tiers",
             person: "Usager"

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue

@@ -7,7 +7,7 @@
                addLink: false,
                addAltNames: true,
                addAge : false,
-               hLevel : 1
+               hLevel : 3,
             }"
       :person="participation.person">
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-component">
-
+<!-- {{ accompanyingCourse.requestor }} -->
    <h2><a name="section-40"></a>{{ $t('requestor.title') }}</h2>
 
    <div v-if="accompanyingCourse.requestor" class="flex-table">
@@ -10,16 +10,26 @@
          {{ $t('requestor.is_anonymous') }}
       </label>
       
-      <!-- <div class="flex-bloc row row-cols-1 g-0"> -->
       <third-party-render-box v-if="accompanyingCourse.requestor.type == 'thirdparty'"
          :thirdparty="accompanyingCourse.requestor"
          :options="{
             addLink: false,
             addId: false,
             addEntity: true,
-            addInfo: true
+            addInfo: true,
+            hLevel: 3,
+            isMultiline: true
             }"
-      ></third-party-render-box>
+      >
+      <template v-slot:record-actions>
+         <ul class="record_actions">
+            <button-location v-if="hasCurrentHouseholdAddress" :thirdparty="accompanyingCourse.requestor"></button-location>
+            <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
+            <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit"></on-the-fly></li>
+         </ul>
+      </template>
+      </third-party-render-box>
+
       <person-render-box v-else-if="accompanyingCourse.requestor.type == 'person'"
          :person="accompanyingCourse.requestor"
          :options="{
@@ -27,11 +37,21 @@
             addId: false,
             addAltNames: false,
             addEntity: true,
-            addInfo: true
+            addInfo: true,
+            hLevel: 3,
+            isMultiline: true
             }"
-      ></person-render-box>
+      >
+      <template v-slot:record-actions>
+         <ul class="record_actions">
+            <button-location v-if="hasCurrentHouseholdAddress" :person="accompanyingCourse.requestor"></button-location>
+            <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
+            <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit"></on-the-fly></li>
+         </ul>
+      </template>
+      </person-render-box>
       
-      <!-- </div> -->
+
          <!-- <h4>
             <span class="badge rounded-pill bg-secondary">{{ accompanyingCourse.requestor.type }}</span>
             {{ accompanyingCourse.requestor.text }}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue

@@ -2,7 +2,7 @@
    <person-render-box
       v-if="resource.resource.type === 'person'"
       :person="resource.resource"
-      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 1 }"
+      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3 }"
       >
       <template v-slot:record-actions>
          <ul class="record_actions">
@@ -17,7 +17,7 @@
    <third-party-render-box
       v-if="resource.resource.type === 'thirdparty'"
       :thirdparty="resource.resource"
-      :options="{ addLink : false, addId : false, addEntity: true, addInfo: true }"
+      :options="{ addLink : false, addId : false, addEntity: true, addInfo: true, hLevel: 3 }"
       >
       <template v-slot:record-actions>
          <ul class="record_actions">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -6,24 +6,24 @@
         <div  class="item-col">
             <div class="entity-label">
 
-                <div class="denomination h3">
+                <div :class="'denomination h' + options.hLevel">
 
                    <a v-if="this.options.addLink ==  true" href="#">
                         <span class="firstname">{{ person.firstName }}</span>
                         <span class="lastname">{{ person.lastName }}</span>
-                        <span v-if="this.options.addAltNames ==  true" class="altnames">
+                        <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
                             <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                         </span>
                     </a>
 
                    <span class="firstname">{{ person.firstName }}</span>
                    <span class="lastname">{{ person.lastName }}</span>
-                   <span v-if="this.options.addAltNames ==  true" class="altnames">
+                   <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
                        <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                    </span>
 
-                   <span v-if="this.options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
+                   <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
-                   <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
+                   <span v-if="options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
 
                 </div>
 
@@ -35,25 +35,50 @@
                     <time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
                         {{ birthdate }} - {{ deathdate }}
                     </time>
-                    <span class="age">{{ person.age }}</span>
+                    <!-- <span class="age">{{ person.age }}</span> -->
                 </p>
             </div>
         </div>
 
         <div class="item-col">
             <ul class="list-content fa-ul">
+                
                 <li v-if="person.current_household_address">
                     <i class="fa fa-li fa-map-marker"></i>
-                    <show-address :address="person.current_household_address" :isMultiline="false"></show-address>
+                    <show-address :address="person.current_household_address" :isMultiline="isMultiline"></show-address>
                 </li>
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-map-marker"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+
                 <li v-if="person.mobilenumber">
                     <i class="fa fa-li fa-mobile"></i>
                     <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
                 </li>
-                <li v-else-if="person.phonenumber">
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-mobile"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                <li v-if="person.phonenumber">
                     <i class="fa fa-li fa-phone"></i>
                     <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
                 </li>
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-phone"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                
+                <li v-if="person.center && options.addCenter">
+                    <i class="fa fa-li fa-long-arrow-right"></i>
+                    {{ person.center.name }}
+                </li>
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-long-arrow-right"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                <slot name="custom-zone"></slot>
+
             </ul>
 
             <slot name="record-actions"></slot>
@@ -78,6 +103,13 @@ export default {
         getGender: function() {
             return this.person.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
         },
+        isMultiline: function() {
+            if(this.options.isMultiline){
+                return this.options.isMultiline
+            } else {
+                return false
+            }
+        },
         getGenderIcon: function() {
             return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
         },
@@ -103,10 +135,24 @@ export default {
 }
 </script>
 
-<style>
+<style lang='scss'>
 .lastname:before{
     content: " "
 }
+
+div.item-col:first-child{
+    width: 33%;
+}
+
+div.flex-table {
+   div.item-bloc {
+      div.item-row {
+         div.item-col:last-child {
+            justify-content: flex-start;
+         }
+      }
+   }
+}
 </style>
 
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -1,57 +1,23 @@
 <template>
 <div v-if="action === 'show'">
-
    <div class="flex-table">
-      <div class="item-bloc">
+      <person-render-box
-         <div class="item-row">
+         :person="person"
-            <div class="item-col">
+         :options="{
-               <h3 :title="person.id">{{ person.text }}</h3>
+            addInfo: true,
-               <p>
+            addEntity: false,
-                  <i class="fa fa-fw"
+            addAltNames: true,
-                     :class="genderClass">
+            addId: true,
-                     <!--
+            addLink: false,
-                     :title="$t(genderTranslation)"
+            hLevel: 3,
-                     -->
+            addCenter: true,
-                  </i>
+            addNoData: true,
-                  <span v-if="person.birthdate">
+            isMultiline: true
-                     {{ $t('person.born', { e: feminized }) }}
+         }"
-                     {{ $d(person.birthdate.datetime, 'short') }}
+      ></person-render-box>
-                  </span>
-               </p>
-            </div>
-            <div class="item-col">
-               <dl class="list-content">
-                  <dt>{{ $t('person.firstname') }}</dt>
-                  <dd>{{ person.firstName }}</dd>
-
-                  <dt>{{ $t('person.lastname') }}</dt>
-                  <dd>{{ person.lastName }}</dd>
-
-                  <dt>{{ $t('person.altnames') }}</dt>
-                  <dd>{{ person.altNames }}</dd>
-
-                  <span v-if="person.center">
-                     <dt>{{ $t('person.center_name') }}</dt>
-                     <dd :title="person.center.id">{{ person.center.name }}</dd>
-                  </span>
-
-                  <dt>{{ $t('person.phonenumber') }}</dt>
-                  <dd>{{ person.phonenumber }}</dd>
-
-                  <dt>{{ $t('person.mobilenumber') }}</dt>
-                  <dd>{{ person.mobilenumber }}</dd>
-
-                  <dt>{{ $t('person.gender.title') }}</dt>
-                  <!--
-                  <dd>{{ $t(genderTranslation) }}</dd>
-                  -->
-               </dl>
-            </div>
-         </div>
-      </div>
    </div>
-
 </div>
+
 <div v-else-if="action === 'edit' || action === 'create'">
 
    <div class="form-floating mb-3">
@@ -109,10 +75,14 @@
 
 <script>
 import { getPerson, postPerson } from '../../_api/OnTheFly';
+import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 
 export default {
    name: "OnTheFlyPerson",
    props: ['id', 'type', 'action'],
+   components: {
+      PersonRenderBox
+   },
    data() {
       return {
          person: {
@@ -204,10 +174,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-ul {
-   li::marker {
-   }
-}
 div.flex-table {
    div.item-bloc {
       div.item-row {

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue

@@ -6,7 +6,7 @@
         <div  class="item-col">
             <div class="entity-label">
 
-                <div class="denomination h3">
+                <div :class="'denomination h' + options.hLevel">
 
                     <a v-if="this.options.addLink ==  true" href="#">
                         <span class="name">{{ thirdparty.text }}</span>
@@ -35,7 +35,7 @@
             <ul class="list-content fa-ul">
                 <li v-if="thirdparty.address">
                     <i class="fa fa-li fa-map-marker"></i>
-                    <show-address :address="thirdparty.address" :isMultiline="false"></show-address>
+                    <show-address :address="thirdparty.address" :isMultiline="isMultiline"></show-address>
                 </li>
                 <li v-if="thirdparty.telephone">
                     <i class="fa fa-li fa-mobile"></i>
@@ -67,6 +67,13 @@ export default {
     },
     props: ['thirdparty', 'options'],
     computed: {
+        isMultiline: function() {
+            if(this.options.isMultiline){
+                return this.options.isMultiline
+            } else {
+                return false
+            }
+        },
         getGender: function() {
             return this.thirdparty.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
         },