Activity: vue DisplayPerson component logic

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

@@ -1,29 +1,57 @@
 <template>
-  
-  <teleport to="#add-persons">
-     <add-persons 
-        buttonTitle="activities.add_persons"
-        modalTitle="activities.add_persons"
-        v-bind:key="addPersons.key"
-        v-bind:options="addPersons.options"
-        @addNewPersons="addNewPersons"
-        ref="addPersons">
-     </add-persons>
-  </teleport>
+   <teleport to="#add-persons">
+
+      <div class="flex-bloc">
+         <display-persons-bloc 
+            v-for="bloc in personsBlocs"
+            v-bind:key="bloc.key"
+            v-bind:bloc="bloc">
+         </display-persons-bloc>
+      </div>
+
+      <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>