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

<template>
   <teleport to="#add-persons" v-if="isComponentVisible">

      <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>
     <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
        <ul>
          <li v-for="p in suggestedEntities" @click="addSuggestedEntity(p)">
             {{ p.text }}
          </li>
        </ul>
     </div>

      <add-persons
         buttonTitle="activity.add_persons"
         modalTitle="activity.add_persons"
         v-bind:key="addPersons.key"
         v-bind:options="addPersonsOptions"
         @addNewPersons="addNewPersons"
         ref="addPersons">
      </add-persons>

  </teleport>
</template>

<script>
import { mapState, mapGetters } 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: window.activity.activityType.personsVisible !== 0
            },
            {  key: 'personsAssociated',
               title: 'activity.bloc_persons_associated',
               persons: [],
               included: window.activity.activityType.personsVisible !== 0
            },
            {  key: 'personsNotAssociated',
               title: 'activity.bloc_persons_not_associated',
               persons: [],
               included: window.activity.activityType.personsVisible !== 0
            },
            {  key: 'thirdparty',
               title: 'activity.bloc_thirdparty',
               persons: [],
               included: window.activity.activityType.thirdPartiesVisible !== 0
            },
            {  key: 'users',
               title: 'activity.bloc_users',
               persons: [],
               included: window.activity.activityType.usersVisible !== 0
            },
         ],
         addPersons: {
            key: 'activity'
         }
      }
   },
   computed: {
      isComponentVisible() {
         return window.activity.activityType.personsVisible !== 0 || window.activity.activityType.thirdPartiesVisible !== 0 || window.activity.activityType.usersVisible !== 0
      },
      ...mapState({
         persons: state => state.activity.persons,
         thirdParties: state => state.activity.thirdParties,
         users: state => state.activity.users,
         accompanyingCourse: state => state.activity.accompanyingPeriod
      }),
      ...mapGetters([
          'suggestedEntities'
      ]),
      getContext() {
         return (this.accompanyingCourse) ? "accompanyingCourse" : "person";
      },
      contextPersonsBlocs() {
         return this.personsBlocs.filter(bloc => bloc.included !== false);
      },
      addPersonsOptions() {
         let optionsType = [];
         if (window.activity.activityType.personsVisible !== 0) {
            optionsType.push('person')
         }
         if (window.activity.activityType.thirdPartiesVisible !== 0) {
            optionsType.push('thirdparty')
         }
         if (window.activity.activityType.usersVisible !== 0) {
            optionsType.push('user')
         }
         return {
            type: optionsType,
            priority: null,
            uniq: false,
            button: {
                  size: 'btn-sm'
            }
         }
      },
   },
   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((item) => {
               this.$store.dispatch('addPersonsInvolved', item);
            }, this
         );
         this.$refs.addPersons.resetSearch(); // to cast child method
         modal.showModal = false;
         this.setPersonsInBloc();
      },
      addSuggestedEntity(person) {
        this.$store.dispatch('addPersonsInvolved', { result: person, type: 'person' });
        this.setPersonsInBloc();
      },
   }
}
</script>

<style lang="scss" scoped>
</style>