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

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