accourse stickyNav: insert a component, replace deprecated anchor name by id

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

@@ -80,7 +80,7 @@ export default {
                left: -22px;
                top: 4px;
             }
-            a[name^="section"] {
+            a[id^="section"] {
                position: absolute;
                top: -2.5em;  // reference for stickNav
             }

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

@@ -1,6 +1,6 @@
 <template>
    <div class="vue-component">
-      <h2><a name="section-80"></a>{{ $t('comment.title') }}</h2>
+      <h2><a id="section-90"></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 name="section-90"></a>
+   <h2><a id="section-100"></a>
       {{ $t('confirm.title') }}
    </h2>
    <div>

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

@@ -1,6 +1,6 @@
 <template>
    <div class="vue-component">
-      <h2><a name="section-20"></a>
+      <h2><a id="section-20"></a>
          {{ $t('courselocation.title') }}
       </h2>
 

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

@@ -1,6 +1,6 @@
 <template>
    <div class="vue-component">
-      <h2><a name="section-30"></a>{{ $t('origin.title') }}</h2>
+      <h2><a id="section-30"></a>{{ $t('origin.title') }}</h2>
 
       <div class="mb-4">
          <label for="selectOrigin">

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

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

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

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-component">
-   <h2><a name="section-60"></a>{{ $t('referrer.title') }}</h2>
+   <h2><a id="section-70"></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 name="section-40"></a>{{ $t('requestor.title') }}</h2>
+   <h2><a id="section-40"></a>{{ $t('requestor.title') }}</h2>
 
    <div v-if="accompanyingCourse.requestor" class="flex-table">
 

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

@@ -1,7 +1,7 @@
 <template>
 <div class="vue-component">
 
-   <h2><a name="section-70"></a>{{ $t('resources.title')}}</h2>
+   <h2><a id="section-80"></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 name="section-65"></a>{{ $t('scopes.title') }}</h2>
+    <h2><a id="section-60"></a>{{ $t('scopes.title') }}</h2>
 
     <ul>
       <li v-for="s in scopes">

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

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-     <h2><a name="section-50"></a>{{ $t('social_issue.title') }}</h2>
+     <h2><a id="section-50"></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/components/StickyNav.vue

@@ -62,7 +62,7 @@ export default {
          // load datas DOM when mounted ready
          this.container = document.querySelector("#content");
          this.stickyNav = document.querySelector('#navmap');
-         this.anchors = document.querySelectorAll("h2 a[name^='section']");
+         this.anchors = document.querySelectorAll("h2 a[id^='section']");
          this.initItemsMap();
 
          // TODO resizeObserver not supports IE !
@@ -82,8 +82,8 @@ export default {
             this.items.push({
                pos: null,
                active: false,
-               key: parseInt(anchor.name.slice(8).slice(0, -1)),
+               key: parseInt(anchor.id.slice(8).slice(0, -1)),
-               name: '#' + anchor.name
+               id: '#' + anchor.id
             })
          });
       },

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

@@ -1,7 +1,7 @@
 <template>
    <a
-      v-if="item.key <= 7"
+      v-if="item.key <= 8"
-      :href="item.name"
+      :href="item.id"
       :class="{ 'active': isActive }"
       >
       <i class="fa fa-fw fa-square"></i>
@@ -9,7 +9,7 @@
    </a>
    <a
       v-else-if="step === 'DRAFT'"
-      :href="item.name"
+      :href="item.id"
       :class="{ 'active': isActive }"
       >
       <i class="fa fa-fw fa-square"></i>