chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue

<template>
<div class="vue-component">

   <h2><a id="section-90"></a>{{ $t('resources.title')}}</h2>

   <div v-if="resources.length > 0">
      <label class="col-form-label">{{ $tc('resources.counter', counter) }}</label>
   </div>
   <div v-else>
      <label class="chill-no-data-statement">{{ $tc('resources.counter', counter) }}</label>
   </div>

   <div class="flex-table mb-3">
      <resource-item
         v-for="resource in resources"
         v-bind:resource="resource"
         v-bind:key="resource.id"
         @remove="removeResource">
      </resource-item>
   </div>

   <div v-if="suggestedEntities.length > 0">
      <ul class="list-suggest add-items inline">
         <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
            <person-text v-if="p.type === 'person'" :person="p"></person-text>
            <span v-else>{{ p.text }}</span>
         </li>
      </ul>
   </div>

   <div>
      <ul class="record_actions">
         <li class="add-persons">
            <add-persons
            buttonTitle="resources.add_resources"
            modalTitle="resources.add_resources"
            v-bind:key="addPersons.key"
            v-bind:options="addPersons.options"
            @addNewPersons="addNewPersons"
            ref="addPersons"> <!-- to cast child method -->
            </add-persons>
         </li>
      </ul>
   </div>

</div>
</template>

<script>
import { mapState } from 'vuex';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import ResourceItem from './Resources/ResourceItem.vue';
import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';


export default {
   name: 'Resources',
   components: {
      AddPersons,
      ResourceItem,
      PersonText
   },
   data() {
      return {
         addPersons: {
            key: 'resources',
            options: {
               type: ['person', 'thirdparty'],
               priority: null,
               uniq: false,
            }
         }
      }
   },
   computed: mapState({
      resources: state => state.accompanyingCourse.resources,
      counter: state => state.accompanyingCourse.resources.length,
      suggestedEntities: state => [
            state.accompanyingCourse.requestor,
            ...state.accompanyingCourse.participations.filter((p) => p.endDate === null).map((p) => p.person),
         ]
         .filter((e) => e !== null)
         .filter(
            (e) => {
               if (e.type === 'person') {
                  return !state.accompanyingCourse.resources
                     .filter((r) => r.resource.type === 'person')
                     .map((r) => r.resource.id).includes(e.id)
               }
               if (e.type === 'thirdparty') {
                  return !state.accompanyingCourse.resources
                     .filter((r) => r.resource.type === 'thirdparty')
                     .map((r) => r.resource.id).includes(e.id)
               }
            }
         )
          // filter persons appearing twice in requestor and resources
         .filter(
            (e, index, suggested) => {
               for (let i = 0; i < suggested.length; i = i+1) {
               if (i < index && e.id === suggested[i].id) {
                  return false
               }
               }

               return true;
            }
         )
   }),
   methods: {
      removeResource(item) {
        //console.log('@@ CLICK remove resource: item', item);
         this.$store.dispatch('removeResource', item)
            .catch(({name, violations}) => {
               if (name === 'ValidationException' || name === 'AccessException') {
                  violations.forEach((violation) => this.$toast.open({message: violation}));
               } else {
                  this.$toast.open({message: 'An error occurred'})
               }
            });
      },
      addNewPersons({ selected, modal }) {
        //console.log('@@@ CLICK button addNewPersons', selected);
         selected.forEach(function(item) {
               this.$store.dispatch('addResource', item)
                  .catch(({name, violations}) => {
                     if (name === 'ValidationException' || name === 'AccessException') {
                        violations.forEach((violation) => this.$toast.open({message: violation}));
                     } else {
                        this.$toast.open({message: violations})
                     }
                  });
            }, this
         );
         this.$refs.addPersons.resetSearch(); // to cast child method
         modal.showModal = false;
      },
      addSuggestedEntity(e) {
         this.$store.dispatch('addResource', { result: e, type: e.type})
            .catch(({name, violations}) => {
               if (name === 'ValidationException' || name === 'AccessException') {
                  violations.forEach((violation) => this.$toast.open({message: violation}));
               } else {
                  this.$toast.open({message: 'An error occurred'})
               }
            })
      },
      uniqueId(e) {
         return `${e.type}-${e.id}`;
      }
   }
}
</script>

<style lang="scss">
div.flex-bloc {
   div.item-bloc {
      flex-basis: 50%;
   }
}
</style>