accompanying period: add location to accompanying period + add delete button

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

@@ -8,6 +8,7 @@
    <persons-associated></persons-associated>
    <course-location></course-location>
    <origin-demand></origin-demand>
+   <admin-location></admin-location>
    <requestor v-bind:isAnonymous="accompanyingCourse.requestorAnonymous"></requestor>
    <social-issue></social-issue>
    <scopes></scopes>
@@ -28,6 +29,7 @@ import { mapGetters, mapState } from 'vuex'
 import Banner from './components/Banner.vue';
 import StickyNav from './components/StickyNav.vue';
 import OriginDemand from './components/OriginDemand.vue';
+import AdminLocation from './components/AdminLocation.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
 import SocialIssue from './components/SocialIssue.vue';
@@ -44,6 +46,7 @@ export default {
       Banner,
       StickyNav,
       OriginDemand,
+      AdminLocation,
       PersonsAssociated,
       Requestor,
       SocialIssue,

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AdminLocation.vue

@@ -0,0 +1,103 @@
+<template>
+   <div class="vue-component">
+      <h2><a id="section-40"></a>{{ $t('admin_location.title') }}</h2>
+
+      <div class="mb-4">
+         <label for="selectAdminLocation">
+            {{ $t('admin_location.title') }}
+         </label>
+
+         <VueMultiselect
+            name="selectAdminLocation"
+            label="text"
+            :custom-label="customLabel"
+            track-by="id"
+            :multiple="false"
+            :searchable="true"
+            :placeholder="$t('admin_location.placeholder')"
+            v-model="value"
+            :options="options"
+            group-values="locations"
+            group-label="locationCategories"
+            @select="updateAdminLocation">
+         </VueMultiselect>
+      </div>
+
+      <div v-if="!isAdminLocationValid" class="alert alert-warning to-confirm">
+        {{ $t('admin_location.not_valid') }}
+     </div>
+   </div>
+</template>
+
+<script>
+import VueMultiselect from 'vue-multiselect';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
+import { mapState, mapGetters } from 'vuex';
+
+export default {
+   name: 'AdminLocation',
+   components: { VueMultiselect },
+   data() {
+      return {
+         options: []
+      }
+   },
+   computed: {
+      ...mapState({
+         value: state => state.accompanyingCourse.administrativeLocation,
+      }),
+      ...mapGetters([
+         'isAdminLocationValid'
+      ])
+   },
+   mounted() {
+      this.getOptions();
+   },
+   methods: {
+      getOptions() {
+         const url = `/api/1.0/main/location.json`;
+         makeFetch('GET', url)
+            .then(response => {
+               let options = response.results;
+               let uniqueLocationTypeId = [...new Set(options.map(o => o.locationType.id))];
+               let results = [];
+               for (let id of uniqueLocationTypeId) {
+                  results.push({
+                    locationCategories: options.filter(o => o.locationType.id === id)[0].locationType.title.fr,
+                    locations: options.filter(o => o.locationType.id === id)
+                  })
+               }
+               this.options = results;
+               return response;
+            })
+            .catch((error) => {
+               this.$toast.open({message: error.txt})
+            })
+      },
+      updateAdminLocation(value) {
+         this.$store.dispatch('updateAdminLocation', value)
+            .catch(({name, violations}) => {
+               if (name === 'ValidationException' || name === 'AccessException') {
+                  violations.forEach((violation) => this.$toast.open({message: violation}));
+               } else {
+                  this.$toast.open({message: 'An error occurred'})
+               }
+            });
+      },
+      customLabel(value) {
+         return value.locationType
+            ? value.name
+               ? `${value.name} (${value.locationType.title.fr})`
+               : value.locationType.title.fr
+            : '';
+      },
+   }
+}
+</script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+<style lang="css" scoped>
+   label {
+      display: none;
+   }
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="vue-component">
-      <h2><a id="section-90"></a>{{ $t('comment.title') }}</h2>
+      <h2><a id="section-100"></a>{{ $t('comment.title') }}</h2>
 
       <!--div class="error flash_message" v-if="errors.length > 0">
          {{ errors[0] }}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-component">
-   <h2><a id="section-100"></a>
+   <h2><a id="section-110"></a>
       {{ $t('confirm.title') }}
    </h2>
    <div>
@@ -24,6 +24,11 @@
                   {{ $t('confirm.ok') }}
                </button>
             </li>
+            <li>
+               <a class="btn btn-delete" :href="deleteLink">
+                  {{ $t('confirm.delete') }}
+               </a>
+            </li>
          </ul>
       </div>
 
@@ -37,6 +42,11 @@
                   {{ $t('confirm.ok') }}
                </button>
             </li>
+            <li>
+               <a class="btn btn-delete" :href="deleteLink">
+                  {{ $t('confirm.delete') }}
+               </a>
+            </li>
          </ul>
       </div>
 
@@ -89,13 +99,17 @@ export default {
                msg: 'confirm.origin_not_valid',
                anchor: '#section-30'
             },
+            adminLocation: {
+               msg: 'confirm.adminLocation_not_valid',
+               anchor: '#section-40'
+            },
             socialIssue: {
                msg: 'confirm.socialIssue_not_valid',
-               anchor: '#section-50'
+               anchor: '#section-60'
             },
             scopes: {
               msg: 'confirm.set_a_scope',
-              anchor: '#section-60'
+              anchor: '#section-70'
             }
          }
       }
@@ -108,10 +122,14 @@ export default {
          'isParticipationValid',
          'isSocialIssueValid',
          'isOriginValid',
+         'isAdminLocationValid',
          'isLocationValid',
          'validationKeys',
          'isValidToBeConfirmed'
-      ])
+      ]),
+      deleteLink() {
+         return `/fr/parcours/${this.accompanyingCourse.id}/delete`; //TODO locale
+      },
    },
    methods: {
       confirmCourse() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue

@@ -4,7 +4,7 @@
 
       <div class="mb-4">
          <label for="selectOrigin">
-            {{ $t('origin.label.fr') }}
+            {{ $t('origin.title') }}
          </label>
 
          <VueMultiselect

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-component">
-   <h2><a id="section-70"></a>{{ $t('referrer.title') }}</h2>
+   <h2><a id="section-80"></a>{{ $t('referrer.title') }}</h2>
 
    <div>
       <label class="col-form-label" for="selectReferrer">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="vue-component">
 
-   <h2><a id="section-40"></a>{{ $t('requestor.title') }}</h2>
+   <h2><a id="section-50"></a>{{ $t('requestor.title') }}</h2>
 
    <div v-if="accompanyingCourse.requestor && isAnonymous" class="flex-table">
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="vue-component">
 
-   <h2><a id="section-80"></a>{{ $t('resources.title')}}</h2>
+   <h2><a id="section-90"></a>{{ $t('resources.title')}}</h2>
 
    <div v-if="resources.length > 0">
       <label class="col-form-label">{{ $tc('resources.counter', counter) }}</label>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-     <h2><a id="section-60"></a>{{ $t('scopes.title') }}</h2>
+     <h2><a id="section-70"></a>{{ $t('scopes.title') }}</h2>
 
      <div class="mb-4">
         <div class="form-check" v-for="s in scopes" :key="s.id">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-     <h2><a id="section-50"></a>{{ $t('social_issue.title') }}</h2>
+     <h2><a id="section-60"></a>{{ $t('social_issue.title') }}</h2>
 
      <div class="my-4">
         <!--label for="field">{{ $t('social_issue.label') }}</label

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -37,6 +37,12 @@ const appMessages = {
          placeholder: "Renseignez l'origine de la demande",
          not_valid: "Indiquez une origine à la demande",
       },
+      admin_location: {
+         title: "Localisation administrative",
+         label: "Localisation administrative",
+         placeholder: "Renseignez la localisation administrative",
+         not_valid: "Indiquez une localisation administrative",
+      },
       persons_associated: {
          title: "Usagers concernés",
          counter: "Il n'y a pas encore d'usagers | 1 usager | {count} usagers",
@@ -127,10 +133,12 @@ const appMessages = {
          socialIssue_not_valid: "sélectionnez au minimum une problématique sociale",
          location_not_valid: "indiquez au minimum une localisation temporaire du parcours",
          origin_not_valid: "Indiquez une origine à la demande",
+         adminLocation_not_valid: "Indiquez une localisation administrative à la demande",
          set_a_scope: "indiquez au moins un service",
          sure: "Êtes-vous sûr ?",
          sure_description: "Une fois le changement confirmé, il ne sera plus possible de le remettre à l'état de brouillon !",
-         ok: "Confirmer le parcours"
+         ok: "Confirmer le parcours",
+         delete: "Supprimer le parcours"
       },
       // catch errors
       'Error while updating AccompanyingPeriod Course.': "Erreur du serveur lors de la mise à jour du parcours d'accompagnement.",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -49,6 +49,9 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             isOriginValid(state) {
                return state.accompanyingCourse.origin !== null;
             },
+            isAdminLocationValid(state) {
+               return state.accompanyingCourse.administrativeLocation !== null;
+            },
             isLocationValid(state) {
                return state.accompanyingCourse.location !== null;
             },
@@ -62,6 +65,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                if (!getters.isLocationValid) { keys.push('location'); }
                if (!getters.isSocialIssueValid) { keys.push('socialIssue'); }
                if (!getters.isOriginValid) { keys.push('origin'); }
+               if (!getters.isAdminLocationValid) { keys.push('adminLocation'); }
                if (!getters.isScopeValid) { keys.push('scopes'); }
                //console.log('getter keys', keys);
                return keys;
@@ -177,6 +181,9 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                //console.log('value', value);
                state.accompanyingCourse.origin = value;
             },
+            updateAdminLocation(state, value) {
+               state.accompanyingCourse.administrativeLocation = value;
+            },
             updateReferrer(state, value) {
                //console.log('value', value);
                state.accompanyingCourse.user = value;
@@ -607,6 +614,19 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                      throw error;
                   })
             },
+            updateAdminLocation({ commit }, payload) {
+               const url = `/api/1.0/person/accompanying-course/${id}.json`
+               const body = { type: "accompanying_period", administrativeLocation: { id: payload.id, type: payload.type }}
+
+               return makeFetch('PATCH', url, body)
+                  .then((response) => {
+                     commit('updateAdminLocation', response.administrativeLocation);
+                  })
+                  .catch((error) => {
+                     commit('catchError', error);
+                     throw error;
+                  })
+            },
             updateReferrer({ commit }, payload) {
                const url = `/api/1.0/person/accompanying-course/${id}.json`
                const body = { type: "accompanying_period", user: { id: payload.id, type: payload.type }}