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

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

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

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

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

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

    <div id="objectives" class="objectives_list">
      <div class="title" aria="hidden">
        <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 @click="removeGoal(g)" class="objective-title">
            <i class="fa fa-times"></i>
            {{ g.goal.title.fr }}
          </div>
        </div>
        <div>
          <add-result destination="goal" :goal="g.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" @click="addGoal(g)" class="badge bg-primary">
                <i class="fa fa-plus"></i>
                {{ g.title.fr }}
              </li>
            </ul>
          </div>
          <ul class="record_actions">
            <li>
              <button @click="toggleAddObjective" class="btn btn-create" :title="$t('add_an_objective')"></button>
            </li>
          </ul>
        </div>
        <div><!-- empty for results --></div>
      </div>
    </div>

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

      <!-- list evaluations -->
      <div v-if="hasEvaluationsForAction">
        <add-evaluation
          :availableEvaluations="evaluationsForAction">
        </add-evaluation>
      </div>

      <!-- box to add new evaluation -->
      <div class="add_evaluation">
        <div v-if="showAddEvaluation">
          <new-evaluation>
          </new-evaluation>
        </div>
        <ul class="record_actions">
          <li>
            <button
              class="btn btn-create"
              @click="toggleAddEvaluation"
              :title="$t('add_an_evaluation')">
            </button>
          </li>
        </ul>
      </div>
    </div>

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

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

    <div id="handlingThirdParty">
      <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
               v-bind:buttonTitle="$t('precise_handling_thirdparty')"
               v-bind:modalTitle="$t('choose_a_thirdparty')"
               v-bind:key="handlingThirdPartyPicker.key"
               v-bind:options="handlingThirdPartyPicker.options"
               @addNewPersons="setHandlingThirdParty"
               ref="handlingThirdPartyPicker"> <!-- 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 class="btn btn-remove" @click="removeHandlingThirdParty" :title="$t('remove_handling_thirdparty')"></button>
          </li>
        </ul>
      </div>

    </div>

    <div id="thirdParties">
      <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 class="btn btn-remove" @click="removeThirdParty(t)" :title="$t('remove_thirdparty')"></button>
            </ul>
          </li>
        </ul>
      </div>

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

    <div id="errors" v-if="errors.length > 0">
      <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 NewEvaluation from './components/NewEvaluation.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 :",
    }
}
};

export default {
  name: 'App',
  components: {
    ckeditor: CKEditor.component,
    AddResult,
    AddEvaluation,
    NewEvaluation,
    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',
      'hasEvaluationsForAction',
      '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));
    },
    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);
    },
    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';

#workEditor {
   display: grid;
   grid-template-areas:
    "title title"
    "startDate endDate"
    "comment comment"
    "objectives objectives"
    "evaluations evaluations"
    "persons persons"
    "handling handling"
    "tparties tparties"
    "errors errors";

   grid-template-columns: 50%;
   column-gap: 0rem;

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

   #title {
      grid-area: title;

      .action_title_label {
         margin-bottom: 0;
      }
      .action_title {
         margin-top: 0;
         font-weight: bold;
         font-size: 1.5rem;
      }
   }
   #startDate {
      grid-area: startDate;
   }
   #endDate {
      grid-area: endDate;
   }
   #comment {
      grid-area: comment;
   }
   #objectives {
      grid-area: objectives;

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

         & > 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;
         }
      }

      ul.list-objectives {
         list-style-type: none;
         padding: 0;

         li {
            margin: 0.5rem;
         }
      }

      div.objective-title {
         font-weight: bold;
         /*
         margin-top: 1rem;
         font-size: 1.5rem;
         text-align: center;
         */

         i.fa {
            padding: 0.25rem;
         }

         i.fa-times {
            background-color: $red;
            color: $white;
         }
      }

      li.badge, div.badge {
         padding-bottom: 0;
         padding-top: 0;
         padding-left: 0;

         i.fa {
            padding: 0.25rem;
         }

         i.fa-plus {
            background-color: $green;
         }

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

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

         h3 {
            text-align: center;
         }
      }
   }
   #evaluations {
      grid-area: evaluations;
      & > div {
         @include border-collapse;
         padding: 1em;
      }
   }
   #persons {
      grid-area: persons;
   }
   #handlingThirdParty {
      grid-area: handling;
   }
   #thirdParties {
      grid-area: tparties;
   }
   #errors {
      grid-area: errors;
   }
}

button.hide {
   background-color: $primary;
}

ul.list-results,
ul.list-evaluations {
   list-style-type: none;
   padding: 0;

   li {
      margin: 0.5rem;
   }

   li.badge {
      padding-bottom: 0;
      padding-top: 0;
      padding-left: 0;

      i.fa {
         /*border-radius: 0.25rem; */
         padding: 0.25rem;
      }

      i.fa-plus {
         background-color: $green;
      }

      i.fa-times {
         background-color: $red;
         color: $white;
      }
   }
}
</style>