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

<template>
   <teleport to="#social-issues-acc">

      <div class="mb-3 row">
         <div class="col-4">
            <label :class="socialIssuesClassList">{{ $t('activity.social_issues') }}</label>
         </div>
         <div class="col-8">

            <check-social-issue
               v-for="issue in socialIssuesList"
               :key="issue.id"
               :issue="issue"
               :selection="socialIssuesSelected"
               @updateSelected="updateIssuesSelected">
            </check-social-issue>

            <div class="my-3">
            <VueMultiselect
               name="otherIssues"
               label="text"
               track-by="id"
               open-direction="bottom"
               :close-on-select="true"
               :preserve-search="false"
               :reset-after="true"
               :hide-selected="true"
               :taggable="false"
               :multiple="false"
               :searchable="true"
               :allow-empty="true"
               :show-labels="false"
               :loading="issueIsLoading"
               :placeholder="$t('activity.choose_other_social_issue')"
               :options="socialIssuesOther"
               @select="addIssueInList">
            </VueMultiselect>
            </div>

         </div>
      </div>

      <div class="mb-3 row">
         <div class="col-4">
            <label :class="socialActionsClassList">{{ $t('activity.social_actions') }}</label>
         </div>
         <div class="col-8">

            <div v-if="actionIsLoading === true">
               <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
            </div>

            <span v-else-if="socialIssuesSelected.length === 0" class="inline-choice chill-no-data-statement mt-3">
               {{ $t('activity.select_first_a_social_issue') }}
            </span>

             <template v-else-if="socialActionsList.length > 0">
                 <check-social-action
                     v-if="socialIssuesSelected.length || socialActionsSelected.length"
                     v-for="action in socialActionsList"
                     :key="action.id"
                     :action="action"
                     :selection="socialActionsSelected"
                     @updateSelected="updateActionsSelected">
                 </check-social-action>
             </template>

            <span v-else-if="actionAreLoaded && socialActionsList.length === 0" class="inline-choice chill-no-data-statement mt-3">
                {{ $t('activity.social_action_list_empty') }}
            </span>


         </div>
      </div>

   </teleport>
</template>

<script>
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,
         actionAreLoaded: false,
         socialIssuesClassList:
            `col-form-label ${document.querySelector('input#chill_activitybundle_activity_socialIssues').getAttribute('required') ? 'required' : ''}`,
         socialActionsClassList:
            `col-form-label ${document.querySelector('input#chill_activitybundle_activity_socialActions').getAttribute('required') ? 'required' : ''}`,
      }
   },
   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() {
      /* Load others issues in multiselect
      */
      this.issueIsLoading = true;
      this.actionAreLoaded = false;
      getSocialIssues().then(response => new Promise((resolve, reject) => {
         this.$store.commit('updateIssuesOther', response.results);

         /* Add in list the issues already associated (if not yet listed)
         */
         this.socialIssuesSelected.forEach(issue => {
            if (this.socialIssuesList.filter(i => i.id === issue.id).length !== 1) {
               this.$store.commit('addIssueInList', issue);
            }
         }, this);

         /* Remove from multiselect the issues that are not yet in checkbox list
         */
         this.socialIssuesList.forEach(issue => {
            this.$store.commit('removeIssueInOther', issue);
         }, this);

         /* Filter issues
         */
         this.$store.commit('filterList', 'issues');

         /* Add in list the actions already associated (if not yet listed)
         */
         this.socialActionsSelected.forEach(action => {
            this.$store.commit('addActionInList', action);
         }, this);

         /* Filter issues
         */
         this.$store.commit('filterList', 'actions');

         this.issueIsLoading = false;
         this.actionAreLoaded = true;
         this.updateActionsList();
         resolve();
      }));
   },
   methods: {

      /* When choosing an issue in multiselect, add it in checkboxes (as selected),
         remove it from multiselect, and add socialActions concerned
      */
      addIssueInList(value) {
         //console.log('addIssueInList', value);
         this.$store.commit('addIssueInList', value);
         this.$store.commit('removeIssueInOther', value);
         this.$store.dispatch('addIssueSelected', value);
         this.updateActionsList();
      },
      /* Update value for selected issues checkboxes
      */
      updateIssuesSelected(issues) {
         //console.log('updateIssuesSelected', issues);
         this.$store.dispatch('updateIssuesSelected', issues);
         this.updateActionsList();
      },
      /* Update value for selected actions checkboxes
      */
      updateActionsSelected(actions) {
         //console.log('updateActionsSelected', actions);
         this.$store.dispatch('updateActionsSelected', actions);
      },
      /* Add socialActions concerned: after reset, loop on each issue selected
         to get social actions concerned
      */
      updateActionsList() {
         this.resetActionsList();
         this.socialIssuesSelected.forEach(item => {

            this.actionIsLoading = true;
            getSocialActionByIssue(item.id)
               .then(actions => new Promise((resolve, reject) => {

                  actions.results.forEach(action => {
                     this.$store.commit('addActionInList', action);
                  }, this);

                  this.$store.commit('filterList', 'actions');

                  this.actionIsLoading = false;
                  this.actionAreLoaded = true;
                  resolve();
            }));
         }, this);
      },
      /* Reset socialActions List: flush list and restore selected actions
      */
      resetActionsList() {
         this.$store.commit('resetActionsList');
         this.actionAreLoaded = false;
         this.socialActionsSelected.forEach(item => {
            this.$store.commit('addActionInList', item);
         }, this);
      }
   }
}
</script>

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