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

<template>
   <teleport to="#social-issues-acc">
      
      <div class="container">
         <div class="grid-4 clear">
            <label>{{ $t('activity.social_issues') }}</label>
         </div>
         <div class="grid-8">
            
            <check-social-issue
               v-for="issue in socialIssuesList"
               v-bind:key="issue.id"
               v-bind:issue="issue"
               v-bind:selection="socialIssuesSelected"
               @updateSelected="updateSelectedIssue">
            </check-social-issue>
            
            <div class="my-3">
            <VueMultiselect
               name="otherIssues"
               label="text"
               track-by="id"
               open-direction="bottom"
               v-bind:close-on-select="true"
               v-bind:preserve-search="false"
               v-bind:reset-after="true"
               v-bind:hide-selected="true"
               v-bind:taggable="false"
               v-bind:multiple="false"
               v-bind:searchable="true"
               v-bind:allow-empty="true" 
               v-bind:show-labels="false"
               v-bind:loading="issueIsLoading"
               v-bind:placeholder="$t('activity.choose_other_social_issue')"
               v-bind:options="socialIssuesOther"
               v-model="value"
               @select="addInSocialIssuesList">
                  
               <template v-slot:selection="{ values, search, isOpen }"><!-- {{ values.length }} {{ isOpen }} -->
                  <span v-if="values.length > 0" class="multiselect__single"></span>
               </template>
               
            </VueMultiselect>
            </div>
            
         </div>
      </div>

      <div class="container">
         <div class="grid-4 clear">
            <label>{{ $t('activity.social_actions') }}</label>
         </div>
         <div class="grid-8">
            
            <div v-if="actionIsLoading === true">
               <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
            </div>
            
            <check-social-action
               v-if="socialIssuesSelected.length"
               v-for="action in socialActionsList"
               v-bind:key="action.id"
               v-bind:action="action"
               v-bind:selection="socialActionsSelected"
               @updateSelected="updateSelectedAction">
            </check-social-action>
            
            <span v-else class="inline-choice chill-no-data-statement mt-3">
               {{ $t('activity.select_first_a_social_issue') }}
            </span>
            
         </div>
      </div>
      
   </teleport>
</template>

<script>
import { readonly } from 'vue';
import VueMultiselect from 'vue-multiselect';
import CheckSocialIssue from './SocialIssuesAcc/CheckSocialIssue.vue';
import CheckSocialAction from './SocialIssuesAcc/CheckSocialAction.vue';
import { getSocialIssues, getSocialActionByIssue } from '../api.js';

export default {
   name: "SocialIssuesAcc",
   components: {
      CheckSocialIssue,
      CheckSocialAction,
      VueMultiselect
   },
   data() {
      return {
         issueIsLoading: false,
         actionIsLoading: false
      }
   },
   computed: {
      socialIssuesList() {
         return this.$store.state.activity.accompanyingPeriod.socialIssues;
      },
      socialIssuesSelected() {
         return this.$store.state.activity.socialIssues;
      },
      socialIssuesOther() {
         return this.$store.state.socialIssuesOther;
      },
      socialActionsList() {
         return this.$store.state.socialActionsList;
      },
      socialActionsSelected() {
         return this.$store.state.activity.socialActions;
      }
   },
   mounted() {
      console.log('load others issues in multiselect');
      
      this.issueIsLoading = true;
      getSocialIssues().then(response => new Promise((resolve, reject) => {
         this.$store.commit('updateSocialIssuesOther', response.results);
         
         this.socialIssuesSelected.forEach(issue => {
            this.$store.commit('addSocialIssueInList', issue);
         }, this);
         
         console.log(this.socialIssuesOther.length, this.socialIssuesOther);
         this.socialIssuesList.forEach(issue => {
            this.$store.commit('removeSocialIssueInOther', issue);
         }, this);
         console.log(this.socialIssuesOther.length); // grr !!! 
         // TODO décompter les issues initiales du multiselect
         
         this.$store.commit('filterList', 'issues');
         
         this.socialActionsSelected.forEach(action => {
            this.$store.commit('addSocialActionInList', action);
         }, this);
         this.$store.commit('filterList', 'actions');
         
         this.issueIsLoading = false;
         resolve();
      }));   
   },
   methods: {
   
      /* When choosing an issue in multiselect, add it in checkboxes (as selected), 
         remove it from multiselect, and add socialActions concerned
      */
      addInSocialIssuesList(value) {
         console.log('addInSocialIssuesList', value);
         this.$store.commit('addSocialIssueInList', value);
         this.$store.commit('addSocialIssueSelected', value);
         this.$store.commit('removeSocialIssueInOther', value);
         this.updateActionsList();
      },
      /* Update value for selected issues checkboxes
      */
      updateSelectedIssue(value) {
         console.log('updateSelectedIssue', value);
         this.$store.commit('updateSocialIssuesSelected', value);
         this.updateActionsList();
      },
      /* Add socialActions concerned: reset actions list, then loop on each issue selected 
         to get social actions concerned
      */
      updateActionsList() {
         console.log('updateActionsList');
         
         this.$store.commit('resetSocialActionList');
         
         this.socialIssuesSelected.forEach(item => {
            console.log('for issue', item.id);
            
            this.actionIsLoading = true;
            getSocialActionByIssue(item.id)
            .then(actions => new Promise((resolve, reject) => {
               
               actions.results.forEach(action => {
                  this.$store.commit('addSocialActionInList', action);
               }, this);
               
               this.$store.commit('filterList', 'actions');
               
               this.actionIsLoading = false;
               resolve();
            }));
         }, this);
      }

   }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style lang="scss">
   span.multiselect__single {
      display: none !important;
   }
</style>