Activity: vue DisplayPerson component logic

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue

@@ -1,29 +1,57 @@
 <template>
-  
+   <teleport to="#add-persons">
-  <teleport to="#add-persons">
+
-     <add-persons 
+      <div class="flex-bloc">
-        buttonTitle="activities.add_persons"
+         <display-persons-bloc 
-        modalTitle="activities.add_persons"
+            v-for="bloc in personsBlocs"
-        v-bind:key="addPersons.key"
+            v-bind:key="bloc.key"
-        v-bind:options="addPersons.options"
+            v-bind:bloc="bloc">
-        @addNewPersons="addNewPersons"
+         </display-persons-bloc>
-        ref="addPersons">
+      </div>
-     </add-persons>
+
-  </teleport>
+      <add-persons 
+         buttonTitle="activity.add_persons"
+         modalTitle="activity.add_persons"
+         v-bind:key="addPersons.key"
+         v-bind:options="addPersons.options"
+         @addNewPersons="addNewPersons"
+         ref="addPersons">
+      </add-persons>
  
+  </teleport>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import DisplayPersonsBloc from './components/DisplayPersonsBloc.vue';
 
 export default {
    name: "App",
    components: {
-      AddPersons
+      AddPersons,
+      DisplayPersonsBloc
    },
    data() {
       return {
+         personsBlocs: [
+            {
+               key: 'personsAssociated',
+               title: 'activity.bloc_persons',
+            },
+            {
+               key: 'personsNotAssociated',
+               title: 'activity.bloc_persons_not_associated',
+            },
+            {
+               key: 'thirdparty',
+               title: 'activity.bloc_thirdparty',
+            },
+            {
+               key: 'users',
+               title: 'activity.bloc_users',
+            },
+         ],
          addPersons: {
             key: 'activity',
             options: {
@@ -52,5 +80,37 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+div.flex-bloc {
+   margin-top: 1em;
+   div.item-bloc {
+      flex-grow: 0; flex-shrink: 1; flex-basis: 25%;
+      
+      margin: 0;
+      border: 1px solid #000;
+      padding: 1em;
+      
+      &:not(:first-child) {
+         border-left: 0;
+      }
+      
+      ul.list-content {
+         list-style-type: none;
+         padding-left: 0;
+         li {
+            a {
+               color: white;
+               &:hover {
+                  color: #ffffffab;
+               }
+            }
+         }
+      }
+   }
+}
+select#chill_activitybundle_activity_persons,
+select#chill_activitybundle_activity_thirdParties,
+select#chill_activitybundle_activity_users {
+   display: none;
+}
 </style>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/DisplayPersonsBloc.vue

@@ -0,0 +1,51 @@
+<template>
+   <div class="item-bloc">
+      <div class="item-row">
+         <div class="item-col">
+            <h4>{{ $t(bloc.title) }}</h4>
+         </div>
+         <div class="item-col">
+            <ul class="list-content">
+               <person-badge
+                  v-for="person in persons"
+                  v-bind:key="person.key"
+                  v-bind:person="person"
+                  @close="closePerson">
+               </person-badge>
+            </ul>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import PersonBadge from './PersonBadge.vue';
+export default {
+   name:"DisplayPersonsBloc",
+   components: {
+      PersonBadge
+   },
+   props: ['bloc'],
+   data() {
+      return {
+         persons: [
+            { key: 97, name: "Joseph" },
+            { key: 62, name: "Clelia" },
+         ]
+      }
+   },
+   computed: {
+      
+   },
+   methods: {
+      closePerson(item) {
+         console.log('@@ CLICK close person: item', item);
+         //this.$store.dispatch('closePerson', item);
+      },
+   }
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonBadge.vue

@@ -0,0 +1,19 @@
+<template>
+   <li>
+      <span class="badge badge-primary">{{ person.name }}
+         <a class="fa fa-times"
+         @click.prevent="$emit('close', person)"></a>
+      </span>
+   </li>
+</template>
+
+<script>
+export default {
+   name:"PersonBadge",
+   props: ['bloc', 'person'],
+   emits: ['close']
+}
+</script>
+
+<style lang="css" scoped>
+</style>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js

@@ -2,8 +2,12 @@ import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
 
 const appMessages = {
    fr: {
-      activities: {
+      activity: {
-         add_persons: "Ajouter des personnes concernées"
+         add_persons: "Ajouter des personnes concernées",
+         bloc_persons: "Usagers du parcours",
+         bloc_persons_not_associated: "Tiers non-pro.",
+         bloc_thirdparty: "Tiers professionnels",
+         bloc_users: "T(M)S",
       }
    }
 }

src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig

@@ -28,13 +28,13 @@
 <h2 class="chill-red">Parties concernées</h2>
 
 {%- if edit_form.persons is defined -%}
-    {{ form_row(edit_form.persons) }}
+    {{ form_widget(edit_form.persons) }}
 {% endif %}
 {%- if edit_form.thirdParties is defined -%}
-    {{ form_row(edit_form.thirdParties) }}
+    {{ form_widget(edit_form.thirdParties) }}
 {% endif %}
 {%- if edit_form.users is defined -%}
-    {{ form_row(edit_form.users) }}
+    {{ form_widget(edit_form.users) }}
 {% endif %}
 
 <div id="add-persons"></div>

src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig

@@ -7,7 +7,6 @@
 {% block content %}
     <div id="activity"></div> {# <=== vue component #}
     {% include 'ChillActivityBundle:Activity:edit.html.twig' %}
-    {{ dump() }}
 {% endblock %}
 
 {% block js %}

src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig

@@ -29,13 +29,13 @@
 <h2 class="chill-red">Parties concernées</h2>
 
 {%- if form.persons is defined -%}
-    {{ form_row(form.persons) }}
+    {{ form_widget(form.persons) }}
 {% endif %}
 {%- if form.thirdParties is defined -%}
-    {{ form_row(form.thirdParties) }}
+    {{ form_widget(form.thirdParties) }}
 {% endif %}
 {%- if form.users is defined -%}
-    {{ form_row(form.users) }}
+    {{ form_widget(form.users) }}
 {% endif %}
 
 <div id="add-persons"></div>

src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig

@@ -7,7 +7,6 @@
 {% block content %}
     <div id="activity"></div> {# <=== vue component #}
     {% include 'ChillActivityBundle:Activity:new.html.twig' %}
-    {{ dump() }}
 {% endblock %}
 
 {% block js %}