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

<template>
   <div id="workEditor" class="accompanying_course_work_edit my-4">
      <div id="title" class="action-row">
         <div>
            <p class="wl-item social-issues">
               <span class="chill-entity entity-social-issue">
                  <span class="badge bg-chill-l-gray text-dark">{{ work.socialAction.issue.text }}</span>
               </span>
            </p>
         </div>
         <h2 class="badge-title">
            <span class="title_label"></span>
            <span class="title_action">{{ work.socialAction.text }}</span>
         </h2>
      </div>

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

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

      <div id="comment" class="action-row">
         <label class="col-form-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" :key="g.goal.id">
            <div class="item-title" @click="removeGoal(g)">
               <span class="removable">{{ g.goal.title.fr }}</span>
            </div>
            <div>
               <add-result :goal="g.goal" destination="goal"></add-result>
            </div>
         </div>
         <div class="accordion" id="expandedSuggestions">
            <div v-if="availableForCheckGoal.length > 0" class="accordion-item">
               <h2 class="accordion-header" id="heading_expanded_suggestions">

                  <button v-if="isExpanded"
                     class="accordion-button"
                     type="button"
                     data-bs-toggle="collapse"
                     aria-expanded="true"
                     @click="toggleSelect">
                     Masquer
                  </button>

                  <button v-else
                     class="accordion-button collapsed"
                     type="button"
                     data-bs-toggle="collapse"
                     aria-expanded="false"
                     @click="toggleSelect">
                     Motifs, objectifs et dispositfs disponibles
                  </button>

               </h2>
               <div class="accordion-collapse" id="collapse_expanded_suggestions"
                  aria-labelledby="heading_expanded_suggestions" data-bs-parent="#expandedSuggestions">

                  <template v-if="isExpanded">
                     <ul class="list-suggest add-items">
                        <li v-for="g in availableForCheckGoal" @click="addGoal(g)" :key="g.id">
                           <span>{{ g.title.fr }}</span>
                        </li>
                     </ul>
                  </template>

               </div>
               <p v-if="goalsPicked.length ===0" class="chill-no-data-statement">
                  Aucun objectif associé
               </p>
            </div>
            <div v-else>
               <span class="chill-no-data-statement">{{ $t('no_goals_available') }}</span>
            </div>
         </div>
      </div>

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

         <!-- list evaluations -->
         <add-evaluation
            v-for="e in pickedEvaluations"
            v-bind:key="e.key"
            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-suggest add-items">
                  <li v-for="e in evaluationsForAction" @click="addEvaluation(e)" :key="e.id">
                     <span>{{ e.title.fr }}</span>
                  </li>
               </ul>
            </div>
            <ul class="record_actions" v-if="evaluationsForAction.length > 0">
               <li>
                  <button :title="$t('add_an_evaluation')" class="btn btn-create" @click="toggleAddEvaluation">{{ $t('add_an_evaluation') }}</button>
               </li>
            </ul>
            <div v-else>
               <span class="chill-no-data-statement">{{ $t('no_evaluations_available') }}</span>
            </div>
         </div>
      </div>

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

         <ul class="list-unstyled">
            <li v-for="p in personsReachables" :key="p.id">
              <div class="form-check">
                <input v-model="personsPicked" :value="p.id" type="checkbox" class="me-2 form-check-input" :id="'person_check'+p.id">
                <label :for="'person_check'+p.id" class="form-check-label">
                  <person-text :person="p"></person-text>
               </label>
              </div>
            </li>
         </ul>
      </div>

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

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

         <div v-else>
            <ul class="list-suggest remove-items inline">
                  <li v-for="u in referrers" :key="u.id" :title="$t('remove_referrer')"  @click="removeReferrer(u)">
                     <span>
                        {{ u.text }}
                     </span>
                  </li>
            </ul>
         </div>

         <ul class="record_actions">
            <li class="add-persons">
               <add-persons
                  ref="referrerPicker"
                  :key="referrerPicker.key"
                  :buttonTitle="$t('add_referrers')"
                  :modalTitle="$t('choose_referrers')"
                  :options="referrerPicker.options"
                  @addNewPersons="addReferrers">
               </add-persons>
            </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 class="add-persons">
                  <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 class="flex-table">
               <third-party-render-box
                  :thirdparty="handlingThirdParty"
                  :options="{
                     addLink: false,
                     addId: false,
                     addEntity: true,
                     addInfo: false,
                     hLevel: 3,
                     isMultiline: true,
                     isConfidential: false
                     }"></third-party-render-box>
            <ul class="record_actions">
               <li>
                  <button :title="$t('remove_handling_thirdparty')" class="btn btn-remove" @click="removeHandlingThirdParty"/>
               </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>
            <div class="flex-bloc mb-3">
                  <third-party-render-box
                     v-for="thirdparty in thirdParties"
                     :key="thirdparty.id"
                     :thirdparty="thirdparty"
                     :options="{ addLink : false, addId : false, addEntity: true, addInfo: false, hLevel: 3 }"
                     >
                     <template v-slot:record-actions>
                        <ul class="record_actions">
                           <li><on-the-fly :type="thirdparty.type" :id="thirdparty.id" action="show"></on-the-fly></li>
                           <li><on-the-fly :type="thirdparty.type" :id="thirdparty.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
                           <li>
                              <button :title="$t('remove_thirdparty')" class="btn btn-sm btn-remove" @click="removeThirdParty(thirdparty)" />
                           </li>
                        </ul>
                     </template>
                  </third-party-render-box>
            </div>
         </div>

         <ul class="record_actions">
            <li class="add-persons">
               <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" :key="e.id">{{ e }}</li>
         </ul>
      </div>

   </div>
  <ul class="record_actions sticky-form-buttons">
    <li>
       <list-workflow-modal
          :workflows="this.work.workflows"
          :allowCreate="true"
          relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
          :relatedEntityId="this.work.id"
          :workflowsAvailables="this.work.workflows_availables"
          :preventDefaultMoveToGenerate="true"
          @go-to-generate-workflow="goToGenerateWorkflow"
       ></list-workflow-modal>
    </li>

      <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 AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
import ListWorkflowModal from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue';
import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';

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",
         Forms: "Formulaires",
         Post: "Courriers",
         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: "Documents disponibles pour ajout :",
         no_evaluations_available: "Aucune évaluation disponible",
         no_goals_available: "Aucun objectif disponible",
         referrers: "Agents traitants",
         no_referrers: "Aucun agent traitant",
         choose_referrers: "Choisir des agents traitants",
         remove_referrer: "Enlever l'agent"
      }
   }
};

export default {
   name: 'App',
   components: {
      ckeditor: CKEditor.component,
      AddResult,
      AddEvaluation,
      AddPersons,
      AddressRenderBox,
      ThirdPartyRenderBox,
      PickTemplate,
      ListWorkflowModal,
      OnTheFly,
      PickWorkflow,
      PersonText,
   },
   i18n,
   data() {
      return {
         isExpanded: false,
         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
               }
            },
         },
         referrerPicker: {
            key: 'referrer',
            options: {
               type: ['user'],
               priority: null,
               uniq: false,
               button: {
                  display: false
               }
            },
         },
      };
   },
  computed: {
    ...mapState([
         'work',
         'resultsForAction',
         'evaluationsForAction',
         'goalsPicked',
         'personsReachables',
         'handlingThirdParty',
         'thirdParties',
         'referrers',
         'isPosting',
         'errors',
         'templatesAvailablesForAction',
      ]),
      ...mapGetters([
         'hasResultsForAction',
         'hasHandlingThirdParty',
         'hasThirdParties',
         'hasReferrers'
      ]),
      startDate: {
         get() {
            return dateToISO(this.$store.state.startDate);
         },
         set(v) {
            this.$store.commit('setStartDate', ISOToDate(v));
         }
      },
      endDate: {
         get() {
            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);

         return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
      },
      pickedEvaluations() {
         return this.$store.state.evaluationsPicked;
      },
      personsPicked: {
         get() {
            let s = this.$store.state.personsPicked.map(p => p.id);

            return s;
         },
         set(v) {
            this.$store.commit('setPersonsPickedIds', v);
         }
      },
   },
   methods: {
      toggleSelect() {
         this.isExpanded = !this.isExpanded;
      },
      addGoal(g) {
         this.$store.commit('addGoal', g);
      },
      removeGoal(g) {
         this.$store.commit('removeGoal', g);
      },
      addEvaluation(e) {
         this.$store.dispatch('addEvaluation', e);
      },
      toggleAddEvaluation() {
         this.showAddEvaluation = !this.showAddEvaluation;
      },
      setHandlingThirdParty({selected, modal}) {
         this.$store.commit('setHandlingThirdParty', selected.shift().result);
         this.$refs.handlingThirdPartyPicker.resetSearch();
         modal.showModal = false;
      },
      removeHandlingThirdParty() {
         this.$store.commit('setHandlingThirdParty', null);
      },
      addThirdParties({selected, modal}) {
         this.$store.commit('addThirdParties', selected.map(r => r.result));
         this.$refs.thirdPartyPicker.resetSearch();
         modal.showModal = false;
      },
      removeThirdParty(t) {
         this.$store.commit('removeThirdParty', t);
      },
      addReferrers({selected, modal}) {
         this.$store.commit('addReferrers', selected.map(r => r.result));
         this.$refs.referrerPicker.resetSearch();
         modal.showModal = false;
      },
      removeReferrer(u) {
         this.$store.commit('removeReferrer', u);
      },
      goToGenerateWorkflow({link}) {
        console.log('save before leave to generate workflow')
        const callback = (data) => {
          window.location.assign(link);
        };

        return this.$store.dispatch('submit', callback)
            .catch(e => { console.log(e); throw e; });
      },
      submit() {
         this.$store.dispatch('submit');
      },
      saveFormOnTheFly(payload) {
         console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);

         let body = { type: payload.type };
         body.name = payload.data.text;
         body.email = payload.data.email;
         body.telephone = payload.data.phonenumber;
         body.address = { id: payload.data.address.address_id };

         makeFetch('PATCH', `/api/1.0/thirdparty/thirdparty/${payload.data.id}.json`, body)
            .then(response => {
               this.$store.dispatch('updateThirdParty', response)
               this.$refs.onTheFly.closeModal();
            })
            .catch((error) => {
               if (error.name === 'ValidationException') {
                  for (let v of error.violations) {
                        this.$toast.open({message: v });
                  }
               } else {
                     this.$toast.open({message: 'An error occurred'});
               }
            })
      }
   }
};

</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"
      "referrers referrers"
      "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; }
   #referrers {
      grid-area: referrers; }
   #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: 1rem;
         }
      }

      &#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-200,
                     $gray-200 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%;
         }

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

            &.fa-times { color: $red; }
         }
      }

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

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

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

.accordion-item:first-of-type, .accordion-item:last-of-type {
   border-radius: 0rem;
   border: 0px;
   .accordion-button {
      padding: .25rem;
      border: 1px solid rgba(17, 17, 17, 0.125);
      margin-top: 20px;
      margin-bottom: 20px;
   }
}

</style>