move vue activity component app in subcomponent concernedGroups

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

@@ -1,167 +1,15 @@
 <template>
-   <teleport to="#add-persons">
-
-      <div class="flex-bloc concerned-groups" :class="getContext">
-         <persons-bloc 
-            v-for="bloc in contextPersonsBlocs"
-            v-bind:key="bloc.key"
-            v-bind:bloc="bloc"
-            v-bind:setPersonsInBloc="setPersonsInBloc">
-         </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>
+   <concerned-groups></concerned-groups>
+   
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
-import PersonsBloc from './components/PersonsBloc.vue';
+import ConcernedGroups from './components/ConcernedGroups.vue';
 
 export default {
    name: "App",
    components: {
-      AddPersons,
-      PersonsBloc
-   },
-   data() {
-      return {
-         personsBlocs: [
-            {  key: 'persons', 
-               title: 'activity.bloc_persons', 
-               persons: [], 
-               included: false 
-            },
-            {  key: 'personsAssociated', 
-               title: 'activity.bloc_persons_associated', 
-               persons: [], 
-               included: false 
-            },
-            {  key: 'personsNotAssociated', 
-               title: 'activity.bloc_persons_not_associated', 
-               persons: [], 
-               included: false 
-            },
-            {  key: 'thirdparty', 
-               title: 'activity.bloc_thirdparty', 
-               persons: [], 
-               included: true
-            },
-            {  key: 'users', 
-               title: 'activity.bloc_users', 
-               persons: [], 
-               included: true
-            },
-         ],
-         addPersons: {
-            key: 'activity',
-            options: {
-               type: ['person', 'thirdparty'], // TODO add 'user'
-               priority: null,
-               uniq: false,
-            }
-         }
-      }
-   },
-   computed: {
-      ...mapState({
-         persons: state => state.activity.persons,
-         thirdParties: state => state.activity.thirdParties,
-         users: state => state.activity.users,
-         accompanyingCourse: state => state.activity.accompanyingPeriod
-      }),
-      getContext() {
-         return (this.accompanyingCourse) ? "accompanyingCourse" : "person";
-      },
-      contextPersonsBlocs() {
-         return this.personsBlocs.filter(bloc => bloc.included !== false);
-      }
-   },
-   mounted() {
-      this.setPersonsInBloc();
-   },
-   methods: {
-      setPersonsInBloc() {
-         let groups; 
-         if (this.accompanyingCourse) {
-            groups = this.splitPersonsInGroups();
-         }     
-         this.personsBlocs.forEach(bloc => {
-            if (this.accompanyingCourse) {
-               switch (bloc.key) {
-                  case 'personsAssociated':
-                     bloc.persons = groups.personsAssociated;
-                     bloc.included = true;
-                     break;
-                  case 'personsNotAssociated':
-                     bloc.persons = groups.personsNotAssociated;
-                     bloc.included = true;
-                     break;
-               }
-            } else {
-               switch (bloc.key) {
-                  case 'persons': 
-                     bloc.persons = this.persons;
-                     bloc.included = true;
-                     break;
-               }
-            }
-            switch (bloc.key) {
-               case 'thirdparty':
-                  bloc.persons = this.thirdParties;
-                  break;
-               case 'users':
-                  bloc.persons = this.users;
-                  break;
-            }
-         }, groups);
-      },
-      splitPersonsInGroups() {
-         let personsAssociated = [];
-         let personsNotAssociated = this.persons;
-         let participations = this.getCourseParticipations();         
-         this.persons.forEach(person => {
-            participations.forEach(participation => {
-               if (person.id === participation.id) {
-                  console.log(person.id);
-                  personsAssociated.push(person);
-                  personsNotAssociated = personsNotAssociated.filter(p => p !== person);
-               }
-            });
-         });
-         return { 
-            'personsAssociated': personsAssociated, 
-            'personsNotAssociated': personsNotAssociated 
-         };
-      },
-      getCourseParticipations() {
-         let participations = [];
-         this.accompanyingCourse.participations.forEach(participation => {
-            if (!participation.endDate) {
-               participations.push(participation.person);
-            }
-         });
-         return participations;
-      },
-      addNewPersons({ selected, modal }) {
-         console.log('@@@ CLICK button addNewPersons', selected);
-         selected.forEach(function(item) {
-               this.$store.dispatch('addPersonsInvolved', item);
-            }, this
-         );
-         this.$refs.addPersons.resetSearch(); // to cast child method
-         modal.showModal = false;
-         this.setPersonsInBloc();
-      }
+      ConcernedGroups
    }
 }
 </script>

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

@@ -0,0 +1,170 @@
+<template>
+   <teleport to="#add-persons">
+
+      <div class="flex-bloc concerned-groups" :class="getContext">
+         <persons-bloc 
+            v-for="bloc in contextPersonsBlocs"
+            v-bind:key="bloc.key"
+            v-bind:bloc="bloc"
+            v-bind:setPersonsInBloc="setPersonsInBloc">
+         </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 PersonsBloc from './ConcernedGroups/PersonsBloc.vue';
+
+export default {
+   name: "ConcernedGroups",
+   components: {
+      AddPersons,
+      PersonsBloc
+   },
+   data() {
+      return {
+         personsBlocs: [
+            {  key: 'persons', 
+               title: 'activity.bloc_persons', 
+               persons: [], 
+               included: false 
+            },
+            {  key: 'personsAssociated', 
+               title: 'activity.bloc_persons_associated', 
+               persons: [], 
+               included: false 
+            },
+            {  key: 'personsNotAssociated', 
+               title: 'activity.bloc_persons_not_associated', 
+               persons: [], 
+               included: false 
+            },
+            {  key: 'thirdparty', 
+               title: 'activity.bloc_thirdparty', 
+               persons: [], 
+               included: true
+            },
+            {  key: 'users', 
+               title: 'activity.bloc_users', 
+               persons: [], 
+               included: true
+            },
+         ],
+         addPersons: {
+            key: 'activity',
+            options: {
+               type: ['person', 'thirdparty'], // TODO add 'user'
+               priority: null,
+               uniq: false,
+            }
+         }
+      }
+   },
+   computed: {
+      ...mapState({
+         persons: state => state.activity.persons,
+         thirdParties: state => state.activity.thirdParties,
+         users: state => state.activity.users,
+         accompanyingCourse: state => state.activity.accompanyingPeriod
+      }),
+      getContext() {
+         return (this.accompanyingCourse) ? "accompanyingCourse" : "person";
+      },
+      contextPersonsBlocs() {
+         return this.personsBlocs.filter(bloc => bloc.included !== false);
+      }
+   },
+   mounted() {
+      this.setPersonsInBloc();
+   },
+   methods: {
+      setPersonsInBloc() {
+         let groups; 
+         if (this.accompanyingCourse) {
+            groups = this.splitPersonsInGroups();
+         }     
+         this.personsBlocs.forEach(bloc => {
+            if (this.accompanyingCourse) {
+               switch (bloc.key) {
+                  case 'personsAssociated':
+                     bloc.persons = groups.personsAssociated;
+                     bloc.included = true;
+                     break;
+                  case 'personsNotAssociated':
+                     bloc.persons = groups.personsNotAssociated;
+                     bloc.included = true;
+                     break;
+               }
+            } else {
+               switch (bloc.key) {
+                  case 'persons': 
+                     bloc.persons = this.persons;
+                     bloc.included = true;
+                     break;
+               }
+            }
+            switch (bloc.key) {
+               case 'thirdparty':
+                  bloc.persons = this.thirdParties;
+                  break;
+               case 'users':
+                  bloc.persons = this.users;
+                  break;
+            }
+         }, groups);
+      },
+      splitPersonsInGroups() {
+         let personsAssociated = [];
+         let personsNotAssociated = this.persons;
+         let participations = this.getCourseParticipations();         
+         this.persons.forEach(person => {
+            participations.forEach(participation => {
+               if (person.id === participation.id) {
+                  console.log(person.id);
+                  personsAssociated.push(person);
+                  personsNotAssociated = personsNotAssociated.filter(p => p !== person);
+               }
+            });
+         });
+         return { 
+            'personsAssociated': personsAssociated, 
+            'personsNotAssociated': personsNotAssociated 
+         };
+      },
+      getCourseParticipations() {
+         let participations = [];
+         this.accompanyingCourse.participations.forEach(participation => {
+            if (!participation.endDate) {
+               participations.push(participation.person);
+            }
+         });
+         return participations;
+      },
+      addNewPersons({ selected, modal }) {
+         console.log('@@@ CLICK button addNewPersons', selected);
+         selected.forEach(function(item) {
+               this.$store.dispatch('addPersonsInvolved', item);
+            }, this
+         );
+         this.$refs.addPersons.resetSearch(); // to cast child method
+         modal.showModal = false;
+         this.setPersonsInBloc();
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>