chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue

<template>
   <div id="workEditor" class="my-4">

      <div id="title" class="action-row">
         <label>{{ $t('action_title') }}</label>
         <p>{{ work.socialAction.text }}</p>
      </div>

      <div id="startDate" class="action-row">
         <label>{{ $t('startDate') }}</label>
         <input v-model="startDate" type="date"/>
      </div>

      <div id="endDate" class="action-row">
         <label>{{ $t('endDate') }}</label>
         <input v-model="endDate" type="date"/>
      </div>

      <div id="comment" class="action-row">
         <label>{{ $t('comments') }}</label>
         <ckeditor
            v-model="note"
            :editor="editor"
            tag-name="textarea"
         ></ckeditor>
      </div>

      <div id="objectives" class="action-row">
         <div aria="hidden" class="title">
            <div><h3>{{ $t('goals_title') }}</h3></div>
            <div><h3>{{ $t('results_title') }}</h3></div>
         </div>

         <!-- results which are not attached to an objective -->
         <div v-if="hasResultsForAction">
            <div class="results_without_objective">
               {{ $t('results_without_objective') }}
            </div>
            <div>
               <add-result :availableResults="resultsForAction" destination="action"></add-result>
            </div>
         </div>

         <!-- results which **are** attached to an objective -->
         <div v-for="g in goalsPicked">
            <div>
               <div class="item-title" @click="removeGoal(g)">
                  <i class="fa fa-times"></i>
                  {{ g.goal.title.fr }}
               </div>
            </div>
            <div>
               <add-result :goal="g.goal" destination="goal"></add-result>
            </div>
         </div>

         <!-- box to add goal -->
         <div class="add_goal">
            <div>
               <div v-if="showAddObjective">

                  <p>{{ $t('available_goals_text') }}</p>

                  <ul class="list-objectives">
                     <li v-for="g in availableForCheckGoal" class="badge bg-primary" @click="addGoal(g)">
                        <i class="fa fa-plus"></i>
                        {{ g.title.fr }}
                     </li>
                  </ul>
               </div>
               <ul class="record_actions">
                  <li>
                     <button :title="$t('add_an_objective')" class="btn btn-create"
                             @click="toggleAddObjective"></button>
                  </li>
               </ul>
            </div>
            <div><!-- empty for results --></div>
         </div>
      </div>

      <div id="evaluations" class="action-row">
         <div aria="hidden" class="title">
            <div><h3>{{ $t('Evaluations') }}</h3></div>
         </div>

         <!-- list evaluations -->
         <add-evaluation
            v-for="e in pickedEvaluations"
            v-bind:key="e.id"
            v-bind:evaluation="e">
         </add-evaluation>

         <!-- box to add new evaluation -->
         <div class="add_evaluation">
            <div v-if="showAddEvaluation">
               <p>{{ $t('available_evaluations_text') }}</p>
               <ul class="list-evaluations">
                  <li v-for="e in availableForCheckEvaluation" class="badge bg-primary" @click="addEvaluation(e)">
                     <i class="fa fa-plus"></i>
                     {{ e.title.fr }}
                  </li>
               </ul>
            </div>
            <ul class="record_actions">
               <li>
                  <button :title="$t('add_an_evaluation')" class="btn btn-create" @click="toggleAddEvaluation"></button>
               </li>
            </ul>
         </div>
      </div>

      <div id="persons" class="action-row">
         <h3>{{ $t('persons_involved') }}</h3>

         <ul>
            <li v-for="p in personsReachables" :key="p.id">
               <input v-model="personsPicked" :value="p.id" type="checkbox">
               <person :person="p"></person>
            </li>
         </ul>
      </div>

      <div id="handlingThirdParty" class="action-row">
         <h3>{{ $t('handling_thirdparty') }}</h3>

         <div v-if="!hasHandlingThirdParty">
            <p class="chill-no-data-statement">
               {{ $t('no_handling_thirdparty') }}
            </p>

            <ul class="record_actions">
               <li>
                  <add-persons
                     ref="handlingThirdPartyPicker"
                     v-bind:key="handlingThirdPartyPicker.key"
                     v-bind:buttonTitle="$t('precise_handling_thirdparty')"
                     v-bind:modalTitle="$t('choose_a_thirdparty')"
                     v-bind:options="handlingThirdPartyPicker.options"
                     @addNewPersons="setHandlingThirdParty"> <!-- to cast child method -->
                  </add-persons>
               </li>
            </ul>
         </div>
         <div v-else>
            <p>{{ handlingThirdParty.text }}</p>
            <show-address :address="handlingThirdParty.address"></show-address>

            <ul class="record_actions">
               <li>
                  <button :title="$t('remove_handling_thirdparty')" class="btn btn-remove"
                          @click="removeHandlingThirdParty"></button>
               </li>
            </ul>
         </div>

      </div>

      <div id="thirdParties" class="action-row">
         <h3>{{ $t('thirdparty_intervener') }}</h3>

         <div v-if="!hasThirdParties">
            <p class="chill-no-data-statement">{{ $t('no_thirdparty_intervener') }}</p>
         </div>

         <div v-else>
            <ul>
               <li v-for="t in thirdParties">
                  <p>{{ t.text }}</p>
                  <show-address :address="t.address"></show-address>

                  <ul class="record_actions">
                     <button :title="$t('remove_thirdparty')" class="btn btn-remove"
                             @click="removeThirdParty(t)"></button>
                  </ul>
               </li>
            </ul>
         </div>

         <ul class="record_actions">
            <li>
               <add-persons
                  ref="thirdPartyPicker"
                  v-bind:key="thirdPartyPicker.key"
                  v-bind:buttonTitle="$t('add_thirdparties')"
                  v-bind:modalTitle="$t('choose_thirdparties')"
                  v-bind:options="thirdPartyPicker.options"
                  @addNewPersons="addThirdParties"> <!-- to cast child method -->
               </add-persons>
            </li>
         </ul>
      </div>

      <div v-if="errors.length > 0" id="errors" class="alert alert-danger flashbag">
         <p>{{ $t('fix_these_errors') }}</p>
         <ul>
            <li v-for="e in errors">{{ e }}</li>
         </ul>
      </div>

   </div>
   <ul class="record_actions sticky-form-buttons">

      <li v-if="!isPosting">
         <button class="btn btn-save" @click="submit">
            {{ $t('action.save') }}
         </button>
      </li>

      <li v-if="isPosting">
         <button class="btn btn-save" disabled>
            {{ $t('action.save') }}
         </button>
      </li>

   </ul>
</template>

<script>
import {mapState, mapGetters,} from 'vuex';
import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
import AddResult from './components/AddResult.vue';
import AddEvaluation from './components/AddEvaluation.vue';
import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';

const i18n = {
   messages: {
      fr: {
         action_title: "Action d'accompagnement",
         comments: "Commentaire",
         startDate: "Date de début",
         endDate: "Date de fin",
         goals_title: "Motifs - objectifs - dispositifs",
         available_goals_text: "Motifs, objectifs et dispositifs disponibles pour ajout :",
         results_title: "Orientations - résultats",
         results_without_objective: "Résultats - orientations sans objectifs",
         add_objectif: "Ajouter un motif - objectif - dispositif",
         add_an_objective: "Ajouter un objectif",
         Evaluations: "Évaluations",
         add_an_evaluation: "Ajouter une évaluation",
         persons_involved: "Usagers concernés",
         handling_thirdparty: "Tiers traitant",
         no_handling_thirdparty: "Aucun tiers traitant",
         precise_handling_thirdparty: "Indiquer un tiers traitant",
         choose_a_thirdparty: "Choisir un tiers",
         remove_thirdparty: "Enlever le tiers",
         remove_handling_thirdparty: "Enlever le tiers traitant",
         thirdparty_intervener: "Tiers intervenants",
         no_thirdparty_intervener: "Aucun tiers intervenant",
         add_thirdparties: "Ajouter des tiers",
         choose_thirdparties: "Choisir des tiers",
         fix_these_errors: "Veuillez corriger les erreurs suivantes :",
         available_evaluations_text: "Évaluations disponibles pour ajout :",
      }
   }
};

export default {
   name: 'App',
   components: {
      ckeditor: CKEditor.component,
      AddResult,
      AddEvaluation,
      AddPersons,
      Person,
      ShowAddress,
   },
   i18n,
   data() {
      return {
         editor: ClassicEditor,
         showAddObjective: false,
         showAddEvaluation: false,
         handlingThirdPartyPicker: {
            key: 'handling-third-party',
            options: {
               type: ['thirdparty'],
               priority: null,
               uniq: true,
               button: {
                  display: false
               }
            },
         },
         thirdPartyPicker: {
            key: 'third-party',
            options: {
               type: ['thirdparty'],
               priority: null,
               uniq: false,
               button: {
                  display: false
               }
            },
         }
      };
   },
   computed: {
      ...mapState([
         'work',
         'resultsForAction',
         'evaluationsForAction',
         'goalsPicked',
         'personsReachables',
         'handlingThirdParty',
         'thirdParties',
         'isPosting',
         'errors',
      ]),
      ...mapGetters([
         'hasResultsForAction',
         'hasHandlingThirdParty',
         'hasThirdParties',
      ]),
      startDate: {
         get() {
            //console.log('get start date', this.$store.state.startDate);
            return dateToISO(this.$store.state.startDate);
         },
         set(v) {
            this.$store.commit('setStartDate', ISOToDate(v));
         }
      },
      endDate: {
         get() {
            //console.log('get end date', this.$store.state.endDate);
            return dateToISO(this.$store.state.endDate);
         },
         set(v) {
            this.$store.commit('setEndDate', ISOToDate(v));
         }
      },
      note: {
         get() {
            return this.$store.state.note;
         },
         set(v) {
            this.$store.commit('setNote', v);
         }
      },
      availableForCheckGoal() {
         let pickedIds = this.$store.state.goalsPicked.map(g => g.goal.id);
         //console.log('pickeds goals id', pickedIds);
         //console.log(this.$store.state.goalsForAction);

         return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
      },
      availableForCheckEvaluation() {
         //console.log('evaluationsPicked', this.$store.state.evaluationsPicked);
         //console.log('evaluationsForAction', this.$store.state.evaluationsForAction);
         let pickedIds = this.$store.state.evaluationsPicked.map(e => e.evaluation.id);
         return this.$store.state.evaluationsForAction.filter(e => !pickedIds.includes(e.id));
      },
      pickedEvaluations() {
         return this.$store.state.evaluationsPicked;
      },
      personsPicked: {
         get() {
            let s = this.$store.state.personsPicked.map(p => p.id);
            //console.log('persons picked', s);

            return s;
         },
         set(v) {
            //console.log('persons picked', v);
            this.$store.commit('setPersonsPickedIds', v);
         }
      },
   },
   methods: {
      toggleAddObjective() {
         this.showAddObjective = !this.showAddObjective;
      },
      addGoal(g) {
         //console.log('add Goal', g);
         this.$store.commit('addGoal', g);
      },
      removeGoal(g) {
         //console.log('remove goal', g);
         this.$store.commit('removeGoal', g);
      },
      addEvaluation(e) {
         console.log('add Evaluation', e);
         this.$store.commit('addEvaluation', e);
      },
      toggleAddEvaluation() {
         this.showAddEvaluation = !this.showAddEvaluation;
      },
      setHandlingThirdParty({selected, modal}) {
         //console.log('setHandlingThirdParty', selected);
         this.$store.commit('setHandlingThirdParty', selected.shift().result);
         this.$refs.handlingThirdPartyPicker.resetSearch();
         modal.showModal = false;
      },
      removeHandlingThirdParty() {
         //console.log('removeHandlingThirdParty');
         this.$store.commit('setHandlingThirdParty', null);
      },
      addThirdParties({selected, modal}) {
         //console.log('addThirdParties', selected);
         this.$store.commit('addThirdParties', selected.map(r => r.result));
         this.$refs.thirdPartyPicker.resetSearch();
         modal.showModal = false;
      },
      removeThirdParty(t) {
         //console.log('remove third party', t);
         this.$store.commit('removeThirdParty', t);
      },
      submit() {
         this.$store.dispatch('submit');
      },
   }
};

</script>

<style lang="scss">
@import '~ChillMainAssets/module/bootstrap/shared';
@import '~ChillMainAssets/chill/scss/mixins';

div#workEditor {
   display: grid;
   grid-template-columns: 50%;
   column-gap: 0rem;
   grid-template-areas:
       "title title"
       "startDate endDate"
       "comment comment"
       "objectives objectives"
       "evaluations evaluations"
       "persons persons"
       "handling handling"
       "tparties tparties"
       "errors errors";

   #title {
      grid-area: title; }
   #startDate {
      grid-area: startDate; }
   #endDate {
      grid-area: endDate; }
   #comment {
      grid-area: comment; }
   #objectives {
      grid-area: objectives; }
   #evaluations {
      grid-area: evaluations; }
   #persons {
      grid-area: persons; }
   #handlingThirdParty {
      grid-area: handling; }
   #thirdParties {
      grid-area: tparties; }
   #errors {
      grid-area: errors; }

   div.action-row {
      @include border-collapse;
      padding: 1em;

      &#title {
         label {
            margin-bottom: 0;
         }
         p {
            margin-top: 0;
            font-weight: bold;
            font-size: 1.5rem;
         }
      }

      &#objectives {
         & > div {
            display: grid;
            grid-template-columns: 50%;
            column-gap: 0rem;
            grid-template-areas: "obj res";

            & > div {
               @include border-collapse;
               padding: 1em;

               &:nth-child(1) {
                  grid-area: obj; }

               &:nth-child(2) {
                  grid-area: res; }
            }

            & > div.results_without_objective {
               background: repeating-linear-gradient(
                     45deg,
                     $gray-500,
                     $gray-500 10px,
                     $gray-100 10px,
                     $gray-100 20px
               );
               text-align: center;
               font-weight: 700;
               padding-top: 1.5rem;
            }
         }
      }

      &#evaluations {
         & > div {
            @include border-collapse;
            padding: 1em;
         }
      }

      &#objectives,
      &#evaluations {
         padding: 0;

         & > div.title {
            background-color: $gray-200;
            color: $gray-700;

            h3 {
               text-align: center;
            }
         }

         .item-title {
            font-weight: bold;
         }
         .item-details {
            margin: 1em 2em;
            font-size: 85%;
         }

         ul.list-evaluations,
         ul.list-objectives,
         ul.list-results {

            list-style-type: none;
            padding: 0;

            li {
               margin: 0.5rem;

               &.badge {
                  padding-bottom: 0;
                  padding-top: 0;
                  padding-left: 0;
               }
            }
         }

         i.fa {
            padding: 0.25rem;
            color: $white;

            &.fa-plus { background-color: $green; }
            &.fa-times { background-color: $red; }
            &.fa-pencil { background-color: $orange; }
         }
      }

      &#persons {
         margin-top: 1.5em;
      }

      ul.record_actions {
         margin-bottom: 0;
      }
   }

   div#errors {
      &.alert {
         margin-top: 2em;
      }
   }
}

</style>