Merge remote-tracking branch 'origin/master' into fix-person-tests

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

@@ -1,25 +1,106 @@
 <template>
-   <accompanying-course></accompanying-course>
+   <banner></banner>
+   <sticky-nav></sticky-nav>
+   
+   <h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
+   <h1 v-else>{{ $t('course.title.active') }}</h1>
+   
    <persons-associated></persons-associated>
    <requestor></requestor>
+   <social-issue></social-issue>
+   <referrer></referrer>
+   <resources></resources>
+   <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
+   <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
+   
 </template>
 
 <script>
 import { mapState } from 'vuex'
-
-import AccompanyingCourse from './components/AccompanyingCourse.vue';
+import Banner from './components/Banner.vue';
+import StickyNav from './components/StickyNav.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
+import SocialIssue from './components/SocialIssue.vue';
+import Referrer from './components/Referrer.vue';
+import Resources from './components/Resources.vue';
+import Comment from './components/Comment.vue';
+import Confirm from './components/Confirm.vue';
 
 export default {
    name: 'App',
    components: { 
-      AccompanyingCourse,
+      Banner,
+      StickyNav,
       PersonsAssociated, 
-      Requestor
+      Requestor,
+      SocialIssue,
+      Referrer,
+      Resources,
+      Comment,
+      Confirm,
    },
    computed: mapState([
       'accompanyingCourse'
    ])
 };
 </script>
+
+<style lang="scss">
+   div#accompanying-course {
+      h1 {
+         margin: 1.5em 0;
+      }
+      div.vue-component {
+         h2 {
+            margin-left: 0.7em;
+            position: relative;
+            &:before {
+               position: absolute;
+               /*
+               content: "\f192";  //circle-dot
+               content: "\f1dd";  //paragraph
+               content: "\f292";  //hashtag
+               content: "\f069";  //asterisk
+               */
+               content: "\f142";  //ellipsis-v
+               font-family: "ForkAwesome";
+               color: #718596ab;
+               left: -22px;
+               top: 4px;
+            }
+            a[name^="section"] {
+               position: absolute;
+               top: -3.5em;  // ref. stickNav
+            }
+         }
+         padding: 0.8em 0em;
+         margin: 2em 0;
+         border: 1px dotted #718596ab; 
+         border-radius: 5px;
+         border-left: 1px dotted #718596ab;
+         border-right: 1px dotted #718596ab;
+         /* debug components
+         position: relative; 
+         &:before { 
+            content: "vuejs component";
+            position: absolute;
+            left: 1.5em;
+            top: -0.9em;
+            background-color: white;
+            color: grey;
+            padding: 0 0.3em;
+         }
+         */
+         dd { 
+            margin-left: 1em; 
+         }
+         & > div {
+            margin: 1em 3em 0;
+         }
+         table {
+         }
+      }
+      
+}
+</style>

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

@@ -1,18 +1,11 @@
-const 
-   locale = 'fr',
-   format = 'json'
-   , accompanying_period_id = window.accompanyingCourseId //tmp
-;
-
 /*
-* Endpoint chill_person_accompanying_course_api_show
-* method GET, get AccompanyingCourse Object
+* Endpoint v.2 chill_api_single_accompanying_course__entity
+* method GET/HEAD, get AccompanyingCourse Instance
 *
-*  @accompanying_period_id___  integer 
-*  @TODO var is not used but necessary in method signature
+*  @id   integer - id of accompanyingCourse
 */
-let getAccompanyingCourse = (accompanying_period_id___) => { //tmp
-   const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/show.${format}`;
+const getAccompanyingCourse = (id) => { 
+   const url = `/api/1.0/person/accompanying-course/${id}.json`;
    return fetch(url)
       .then(response => {
          if (response.ok) { return response.json(); }
@@ -21,21 +14,150 @@ let getAccompanyingCourse = (accompanying_period_id___) => { //tmp
 };
 
 /*
-* Endpoint chill_person_accompanying_course_api_add_participation, 
+* Endpoint v.2 chill_api_single_accompanying_course__entity
+* method PATCH, patch AccompanyingCourse Instance
+*
+*  @id     integer - id of accompanyingCourse
+*  @body   Object - dictionary with changes to post
+*/
+const patchAccompanyingCourse = (id, body) => { 
+   console.log('body', body);
+   const url = `/api/1.0/person/accompanying-course/${id}.json`;
+   return fetch(url, {
+         method: 'PATCH',
+         headers: {
+           'Content-Type': 'application/json;charset=utf-8'
+         },
+         body: JSON.stringify(body)
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+/*
+* Endpoint to change 'DRAFT' step to 'CONFIRMED'
+*/
+const confirmAccompanyingCourse = (id) => {
+   const url = `/api/1.0/person/accompanying-course/${id}/confirm.json`
+   return fetch(url, {
+         method: 'POST',
+         headers: {'Content-Type': 'application/json;charset=utf-8'}
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+/*
+* Endpoint 
+*/
+const getSocialIssues = () => {
+   const url = `/api/1.0/person/social-work/social-issue.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+/*
+* Endpoint v.2 chill_api_single_accompanying_course_participation, 
 * method POST/DELETE, add/close a participation to the accompanyingCourse
 *
-*  @accompanying_period_id integer - id of accompanyingCourse
-*  @person_id  integer - id of person
-*  @method     string - POST or DELETE
+*  @id               integer - id of accompanyingCourse
+*  @payload          integer - id of person
+*  @method           string - POST or DELETE
 */
-let postParticipation = (accompanying_period_id, person_id, method) => {
-   const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/participation.${format}`
+const postParticipation = (id, payload, method) => {
+   const body = { type: payload.type, id: payload.id };
+   const url = `/api/1.0/person/accompanying-course/${id}/participation.json`;
    return fetch(url, {
          method: method,
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          },
-         body: JSON.stringify({id: person_id})
+         body: JSON.stringify(body)
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+/*
+* Endpoint v.2 chill_api_single_accompanying_course_requestor, 
+* method POST/DELETE, add/close a requestor to the accompanyingCourse
+*
+*  @id               integer - id of accompanyingCourse
+*  @payload          object of type person|thirdparty
+*  @method           string - POST or DELETE
+*/
+const postRequestor = (id, payload, method) => {
+   //console.log('payload', payload);
+   const body = (payload)? { type: payload.type, id: payload.id } : {};
+   console.log('body', body);
+   const url = `/api/1.0/person/accompanying-course/${id}/requestor.json`;
+   return fetch(url, {
+         method: method,
+         headers: {
+           'Content-Type': 'application/json;charset=utf-8'
+         },
+         body: JSON.stringify(body)
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+/*
+* Endpoint v.2 chill_api_single_accompanying_course_resource, 
+* method POST/DELETE, add/remove a resource to the accompanyingCourse
+*
+*  @id               integer - id of accompanyingCourse
+*  @payload          object of type person|thirdparty
+*  @method           string - POST or DELETE
+*/
+const postResource = (id, payload, method) => {
+   //console.log('payload', payload);
+   const body = { type: "accompanying_period_resource" };
+   switch (method) {
+      case 'DELETE':
+         body['id'] = payload.id; 
+         break;
+      default:
+         body['resource'] = { type: payload.type, id: payload.id };
+   }   
+   console.log('body', body);
+   const url = `/api/1.0/person/accompanying-course/${id}/resource.json`;
+   return fetch(url, {
+         method: method,
+         headers: {
+           'Content-Type': 'application/json;charset=utf-8'
+         },
+         body: JSON.stringify(body)
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+/*
+* Endpoint to Add/remove SocialIssue
+*/
+const postSocialIssue = (id, body, method) => {
+   //console.log('api body and method', body, method); 
+   const url = `/api/1.0/person/accompanying-course/${id}/socialissue.json`;
+   return fetch(url, {
+         method: method,
+         headers: {
+           'Content-Type': 'application/json;charset=utf-8'
+         },
+         body: JSON.stringify(body)
       })
       .then(response => {
          if (response.ok) { return response.json(); }
@@ -44,6 +166,12 @@ let postParticipation = (accompanying_period_id, person_id, method) => {
 };
 
 export { 
-   getAccompanyingCourse, 
-   postParticipation 
+   getAccompanyingCourse,
+   patchAccompanyingCourse,
+   confirmAccompanyingCourse,
+   getSocialIssues,
+   postParticipation,
+   postRequestor,
+   postResource,
+   postSocialIssue
 };

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

@@ -1,28 +0,0 @@
-<template>
-   <div class="vue-component">
-      <h3>{{ $t('course.title') }}</h3>
-      <dl>
-         <dt>{{ $t('course.id') }}</dt>
-            <dd>{{ accompanyingCourse.id }}</dd>
-         <dt>{{ $t('course.opening_date') }}</dt>
-            <dd>{{ $d(accompanyingCourse.openingDate.datetime, 'short') }}</dd>
-         <dt>{{ $t('course.closing_date') }}</dt>
-            <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
-         <dt>{{ $t('course.remark') }}</dt>
-            <dd>{{ accompanyingCourse.remark }}</dd>
-         <dt>{{ $t('course.closing_motive') }}</dt>
-            <dd>{{ accompanyingCourse.closing_motive }}</dd>
-      </dl>
-   </div>
-</template>
-
-<script>
-export default {
-   name: 'AccompanyingCourse',
-   computed: {
-      accompanyingCourse() {
-         return this.$store.state.accompanyingCourse
-      }
-   }
-}
-</script>

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

@@ -0,0 +1,92 @@
+<template>
+   
+   <div class="vue-component" style="display: none;">
+      <dl>
+         <dt>{{ $t('course.id') }}</dt>
+         <dd>{{ accompanyingCourse.id }}</dd>
+      </dl>
+      <dl v-if="accompanyingCourse.closingDate">
+         <dt>{{ $t('course.closing_date') }}</dt>
+         <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
+
+         <dt>{{ $t('course.closing_motive') }}</dt>
+         <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
+      </dl>
+   </div>
+      
+   <teleport to="#header-accompanying_course-name #banner-flags">
+      <toggle-flags></toggle-flags>
+   </teleport>
+   
+   <teleport to="#header-accompanying_course-name #banner-status">
+      <div v-if="accompanyingCourse.step === 'DRAFT'">
+         <span class="badge badge-secondary">
+            {{ $t('course.step.draft') }}
+         </span>
+      </div>
+      <div v-else>
+         <div>
+            <span class="badge badge-primary">
+               {{ $t('course.step.active') }}
+            </span>
+         </div>
+         <div>
+            <span>
+               <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
+            </span>
+            <br>
+            <span v-if="accompanyingCourse.user">
+               {{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
+            </span>
+         </div>
+      </div>
+   </teleport>
+   
+   <teleport to="#header-accompanying_course-details #banner-social-issues">
+      <div class="grid-12">
+         <social-issue
+            v-for="issue in accompanyingCourse.socialIssues"
+            v-bind:key="issue.id"
+            v-bind:issue="issue">
+         </social-issue>
+      </div>
+   </teleport>
+
+</template>
+
+<script>
+import ToggleFlags from './Banner/ToggleFlags';
+import SocialIssue from './Banner/SocialIssue.vue';
+
+export default {
+   name: 'Banner',
+   components: {
+      ToggleFlags,
+      SocialIssue
+   },
+   computed: {
+      accompanyingCourse() {
+         return this.$store.state.accompanyingCourse
+      }
+   }
+}
+</script>
+
+<style lang="scss">
+   div#banner-flags,
+   div#banner-status {
+      margin: 1.5em 0;
+      div {
+         text-align: right;
+         margin-bottom: 0.8em;
+      }
+      .badge {
+         text-transform: uppercase;
+      }
+   }
+   div#banner-status {
+      span.badge {
+         font-size: 90%;
+      }
+   }
+</style>

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

@@ -0,0 +1,20 @@
+<template>
+  <span class="badge badge-secondary">{{ issue.text }}</span>
+</template>
+
+<script>
+export default {
+   name: "SocialIssues",
+   props: ['issue']
+}
+</script>
+
+<style lang="scss" scoped>
+span.badge {
+   font-size: 95%;
+   text-transform: capitalize !important;
+   font-weight: 500 !important;
+   margin-bottom: 5px;
+   margin-right: 1em;
+}
+</style>

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

@@ -0,0 +1,89 @@
+<template>
+   <div>
+      <a @click="toggleIntensity" class="flag-toggle">
+         {{ $t('course.occasional') }}
+         <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
+         {{ $t('course.regular') }}
+      </a>
+   </div>
+   
+   <div>
+      <button class="badge badge-pill" :class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }" @click="toggleEmergency">
+         {{ $t('course.emergency') }}
+      </button>
+      <button class="badge badge-pill" :class="{ 'badge-primary': isConfidential, 'badge-secondary': !isConfidential }" @click="toggleConfidential">
+         {{ $t('course.confidential') }}
+      </button>
+   </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+   name: "ToggleFlags",
+   computed: {
+      ...mapState({
+         intensity: state => state.accompanyingCourse.intensity,
+         emergency: state => state.accompanyingCourse.emergency,
+         confidential: state => state.accompanyingCourse.confidential,
+      }),
+      isRegular() {
+         return (this.intensity === 'regular') ? true : false;
+      },
+      isEmergency() {
+         return (this.emergency) ? true : false;
+      },
+      isConfidential() {
+         return (this.confidential) ? true : false;
+      }
+   },
+   methods: {
+      toggleIntensity() {
+         let value;
+         switch (this.intensity) {
+            case "occasional":
+               value = "regular";
+               break;
+            case "regular":
+               value = "occasional";
+               break;
+            default:
+               //temporaire (modif backend)
+               value = "occasional";
+         }
+         this.$store.dispatch('toggleIntensity', value);
+      },
+      toggleEmergency() {
+         this.$store.dispatch('toggleEmergency', (!this.isEmergency));
+      },
+      toggleConfidential() {
+         this.$store.dispatch('toggleConfidential', (!this.isConfidential));
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+    a.flag-toggle {
+        color: white;
+        padding: 0 10px;
+        cursor: pointer;
+        &:hover {
+            color: white;
+            text-decoration: underline;
+            border-radius: 20px;
+        }
+        i {
+            margin: auto 0.4em;
+        }
+    }
+    button.badge {
+       margin-left: 0.8em;
+       &.badge-secondary {
+           opacity: 0.5;
+           &:hover {
+              opacity: 0.7;
+           }
+       }
+    }
+</style>

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

@@ -0,0 +1,99 @@
+<template>
+   <div class="vue-component">
+      <h2><a name="section-60"></a>{{ $t('comment.title') }}</h2>
+      
+      <!--div class="error flash_message" v-if="errors.length > 0">
+         {{ errors[0] }}
+         TODO fix errors flashbag for app component
+      </div-->
+      
+      <div>
+         <form @submit.prevent="submitform">
+            
+            <label for="content">{{ $t('comment.label') }}</label>
+            
+            <div v-if="initialComment">
+               {{ $t('comment.created_by', [
+                  initialComment.creator.text, 
+                  $d(initialComment.createdAt.datetime, 'long')
+               ]) }}
+            </div>
+            
+            <textarea 
+               name="content" 
+               v-bind:placeholder="$t('comment.content')"
+               rows="8" 
+               cols="80"
+               ckeditor="ckeditor"
+               v-model="content">
+            </textarea>
+            
+            <ul class="record_actions">
+               <li>
+                  <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
+               </li>
+               <li v-if="initialComment !== null">
+                  <a class="sc-button bt-delete" 
+                     @click="removeComment">
+                     {{ $t('action.delete') }}
+                  </a>
+               </li>
+            </ul>
+            
+         </form>
+      </div>
+      
+   </div>
+</template>
+
+<script>
+export default {
+   name: "Comment",
+   data() {
+      return {
+         formdata: { 
+            type: "accompanying_period_comment",
+            content: ''
+         }
+      }
+   },
+   computed: {
+      initialComment() {
+         return this.$store.state.accompanyingCourse.initialComment;
+      },
+      content: {
+         set(value) {
+            this.formdata.content = value;
+         },
+         get() {
+            return (this.initialComment)? this.initialComment.content : null;
+         }
+      },
+      errors() {
+         return this.$store.state.errorMsg;
+      }
+   },
+   methods: {
+      submitform() {
+         console.log('submit');
+         this.$store.dispatch('postFirstComment', this.formdata);
+      },
+      removeComment() {
+         console.log('remove');
+         this.$store.dispatch('postFirstComment', null);
+      }
+   }
+}
+/*
+* TODO
+* - [x] delete button in ul record_actions, but not in form
+* - [ ] display updatedAt => initialComment fetch PATCH content changes MUST NOT change object id !!
+* - [ ] ckeditor integration
+*/
+</script>
+
+<style lang="scss" scoped>
+   div.vue-component > div {
+      //margin: 1em;
+   }
+</style>

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

@@ -0,0 +1,80 @@
+<template>
+<div class="vue-component">
+   <h2><a name="section-70"></a>
+      {{ $t('confirm.title') }}
+   </h2>
+
+   <div>
+      <p>
+         {{ $t('confirm.text_draft') }}
+         <span class="badge badge-secondary">{{ $t('course.step.draft') }}</span>
+      </p>
+      <p>
+         {{ $t('confirm.text_active') }}
+         <span class="badge badge-primary">{{ $t('course.step.active') }}</span>
+      </p>
+      
+      <ul class="record_actions">
+         <li>
+            <button class="sc-button bt-save" @click="modal.showModal = true">
+               {{ $t('confirm.ok') }}
+            </button>
+         </li>
+      </ul>
+   </div>
+
+   <teleport to="body">
+      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+         <template v-slot:header>
+            <h2 class="modal-title">{{ $t('confirm.sure') }}</h2>
+         </template>
+         <template v-slot:body>
+            <p>{{ $t('confirm.sure_description') }}</p>
+         </template>
+         <template v-slot:footer>
+            <button class="sc-button red" @click="confirmCourse">
+               {{ $t('confirm.ok') }}
+            </button>
+         </template>
+      </modal>
+   </teleport>
+
+</div>
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+
+export default {
+   name: "Confirm",
+   components: {
+      Modal,
+   },
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-md"
+         }
+      }
+   },
+   computed: {
+      accompanyingCourse() {
+         return this.$store.state.accompanyingCourse
+      }
+   },
+   methods: {
+      confirmCourse() {
+         console.log('@@ CLICK confirmCourse');
+         this.$store.dispatch('confirmAccompanyingCourse');
+         console.log('confirm last');
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+div.vue-component > div {
+    //margin: 1em;
+}
+</style>

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

@@ -1,8 +1,12 @@
 <template>
 <div class="vue-component">
-   <h3>{{ $t('persons_associated.title')}}</h3>
-   <label>{{ $tc('persons_associated.counter', counter) }}</label>
-   <table class="rounded"> 
+   <h2><a name="section-10"></a>{{ $t('persons_associated.title')}}</h2>
+   
+   <div>
+      <label>{{ $tc('persons_associated.counter', counter) }}</label>
+   </div>
+   
+   <table class="rounded" v-if="participations.length > 0">
       <thead>
          <tr>
             <th class="chill-orange">{{ $t('persons_associated.firstname') }}</th>
@@ -12,55 +16,76 @@
             <th class="chill-orange">{{ $t('action.actions') }}</th>
          </tr>
       </thead>
-      <tbody> 
-         <person-item 
-            v-for="participation in participations" 
-            v-bind:participation="participation" 
-            v-bind:key="participation.id" 
+      <tbody>
+         <person-item
+            v-for="participation in participations"
+            v-bind:participation="participation"
+            v-bind:key="participation.id"
             @remove="removeParticipation"
             @close="closeParticipation">
          </person-item>
       </tbody>
    </table>
-   <add-persons></add-persons>
-   <ul class="record_actions">
-      <!--li>
-         <button class="sc-button orange" @click="savePersons">
-            {{ $t('action.save') }}
-         </button>
-      </li-->
-   </ul>
+
+   <div>
+      <add-persons 
+         buttonTitle="persons_associated.add_persons"
+         modalTitle="add_persons.title"
+         v-bind:key="addPersons.key"
+         v-bind:options="addPersons.options"
+         @addNewPersons="addNewPersons"
+         ref="addPersons"> <!-- to cast child method -->
+      </add-persons>
+   </div>
+
 </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
-import PersonItem from "./PersonItem.vue"
+import PersonItem from "./PersonsAssociated/PersonItem.vue"
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
 
 export default {
    name: 'PersonsAssociated',
-   components: { 
+   components: {
       PersonItem,
       AddPersons
    },
+   data() {
+      return {
+         addPersons: {
+            key: 'persons_associated',
+            options: {
+               type: ['person'],
+               priority: null,
+               uniq: false,
+            }
+         }
+      }
+   },
    computed: mapState({
       participations: state => state.accompanyingCourse.participations,
       counter: state => state.accompanyingCourse.participations.length
    }),
    methods: {
       removeParticipation(item) {
-         this.$store.dispatch('removeParticipation', item)
+         console.log('@@ CLICK remove participation: item', item);
+         this.$store.dispatch('removeParticipation', item);
       },
       closeParticipation(item) {
          console.log('@@ CLICK close participation: item', item);
-         this.$store.dispatch('closeParticipation', item)
+         this.$store.dispatch('closeParticipation', item);
       },
-      /*
-      savePersons() {
-         console.log('[wip] saving persons');
+      addNewPersons({ selected, modal }) {
+         console.log('@@@ CLICK button addNewPersons', selected);
+         selected.forEach(function(item) {
+               this.$store.dispatch('addParticipation', item);
+            }, this
+         );
+         this.$refs.addPersons.resetSearch(); // to cast child method
+         modal.showModal = false;
       }
-      */
    }
 }
 </script>

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

@@ -29,10 +29,12 @@
             </button>
          </li-->
          <li>
-            <button class="sc-button bt-remove"
+            <button v-if="!participation.endDate"
+               class="sc-button bt-remove"
                :title="$t('action.remove')" 
                @click.prevent="$emit('close', participation)">
             </button>
+            <button v-else class="sc-button bt-remove disabled"></button>
          </li>
       </ul>
    </td>

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

@@ -0,0 +1,77 @@
+<template>
+  <div class="vue-component">
+     <h2><a name="section-40"></a>{{ $t('referrer.title') }}</h2>
+     
+     <div class="my-4">
+        <label for="" class="">
+           {{ $t('referrer.label') }}
+        </label>
+        
+        <VueMultiselect
+           track-by="id"
+           label="text"
+           :multiple="false"
+           :searchable="true"
+           :placeholder="$t('referrer.placeholder')"
+           @update:model-value="updateReferrer"
+           :model-value="value"
+           :options="options">
+        </VueMultiselect>
+        
+        <ul class="record_actions">
+           <li>
+             <button 
+                class="sc-button bt-create" 
+                type="button" 
+                name="button"
+                @click="assignMe">
+                {{ $t('referrer.assign_me') }}
+             </button>
+           </li>
+        </ul>
+        
+     </div>
+  </div>
+</template>
+
+<script>
+import VueMultiselect from 'vue-multiselect';
+//import { getUsers } from '../api';
+import { mapState } from 'vuex';
+
+export default {
+   name: "Referrer",
+   components: { VueMultiselect },
+   data() {
+      return {
+         options: []
+      }
+   },
+   computed: {
+      ...mapState({
+         value: state => state.accompanyingCourse.user,
+      }),
+   },
+   mounted() {
+      this.getOptions();
+   },
+   methods: {
+      getOptions() {
+         //getUsers().then(response => new Promise((resolve, reject) => {
+         //   console.log(response);
+         //   resolve();
+         //})).catch(er => this.$store.commit('catchError'), error));
+      },
+      updateReferrer(value) {
+         //this.$store.dispatch('updateReferrer', this.transformValue(value));
+      },
+      transformValue(value) {
+         let payload = value;
+         return { payload, body, method };
+      },
+      assignMe() {
+         console.log('assign me');
+      }
+   }
+}
+</script>

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

@@ -1,85 +1,121 @@
 <template>
 <div class="vue-component">
-   <h3>{{ $t('requestor.title') }}</h3>
-   {{ accompanyingCourse.id }}
-   {{ accompanyingCourse.remark }}<br><br>
    
-   <!-- TESTS AREA -->
-   <ul class="record_actions">
-      <li>
-         <button class="sc-button bt-create" @click="modal1.showModal = true">
-            {{ $t('action.show_modal') }}
-         </button>
-      </li>
-      <li>
-         <button class="sc-button bt-create" @click="modal2.showModal = true">
-            Ouvrir une seconde modale
-         </button>
-      </li>
-   </ul>
+   <h2><a name="section-20"></a>{{ $t('requestor.title') }}</h2>
    
-   <teleport to="body">
-   <modal v-if="modal1.showModal" :modalDialogClass="modal1.modalDialogClass" @close="modal1.showModal = false">      
-      <template v-slot:header>
-         <h3 class="modal-title">Le titre de ma modale</h3>
-      </template>
-      <template v-slot:body>
-         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
-         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
-         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
-         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
-         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
-         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
-      </template>
-      <template v-slot:footer>
-         <button class="sc-button green" @click="modal1.showModal = false; modal2.showModal = true">
-            {{ $t('action.next')}}</button>
-      </template>
-   </modal>
-   </teleport>
-   
-   <teleport to="body">
-   <modal v-if="modal2.showModal" :modalDialogClass="modal2.modalDialogClass" @close="modal2.showModal = false">      
-      <template v-slot:header>
-         <h3 class="modal-title">Une autre modale</h3>
-      </template>
-      <template v-slot:body>
-         <p>modal 2</p>
-      </template>
-      <template v-slot:footer>
-         <button class="sc-button green" @click="modal2.showModal = false">
-            {{ $t('action.save')}}</button>
-      </template>
-   </modal>
-   </teleport>
-   <!-- END TESTS -->
+   <div v-if="accompanyingCourse.requestor">
+      <label>
+         <input type="checkbox" v-model="isAnonymous" :value="value" />
+         {{ $t('requestor.is_anonymous') }}
+      </label>
+      
+      <dt>{{ $t('requestor.type') }}</dt>   
+      <dd>{{ accompanyingCourse.requestor.type }}</dd>
+      <dt>{{ $t('requestor.text') }}</dt>   
+      <dd>{{ accompanyingCourse.requestor.text }}</dd>
+      <dt>{{ $t('requestor.is_anonymous') }}</dt>
+      <dd>{{ accompanyingCourse.requestorAnonymous }}</dd>
+         
+      <div v-if="accompanyingCourse.requestor.type === 'person'">
+         <dt>{{ $t('requestor.person_id') }}</dt>   
+         <dd>{{ accompanyingCourse.requestor.person_id }}</dd>
+         <dt>{{ $t('requestor.birthdate') }}</dt>   
+         <dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
+         <dt>{{ $t('requestor.center') }}</dt>   
+         <dd>{{ accompanyingCourse.requestor.center.name }}</dd>
+         <dt>{{ $t('requestor.firstName') }}</dt>   
+         <dd>{{ accompanyingCourse.requestor.firstName }}</dd>
+         <dt>{{ $t('requestor.lastName') }}</dt>   
+         <dd>{{ accompanyingCourse.requestor.lastName }}</dd>
+         <dt>{{ $t('requestor.phonenumber') }}</dt>   
+         <dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
+         <dt>{{ $t('requestor.mobilenumber') }}</dt>   
+         <dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
+         <dt>{{ $t('requestor.altNames') }}</dt>   
+         <dd>{{ accompanyingCourse.requestor.altNames }}</dd>
+      </div>
+      
+      <div v-if="accompanyingCourse.requestor.type === 'thirdparty'">
+         <dt>{{ $t('requestor.person_id') }}</dt>   
+         <dd>{{ accompanyingCourse.requestor.thirdparty_id }}</dd>
+         <dt>{{ $t('requestor.address') }}</dt>
+         <dd>{{ accompanyingCourse.requestor.address.text }}</dd>
+         <dt>{{ $t('requestor.location') }}</dt>
+         <dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
+      </div>
+
+      <ul class="record_actions">
+         <li>
+            <button class="sc-button bt-remove"
+               :title="$t('action.remove')" 
+               @click="removeRequestor">
+               {{ $t('action.remove') }}
+            </button>
+         </li>
+      </ul>
+   </div> 
+   <div v-else>
+      <label>{{ $t('requestor.counter') }}</label>
+   </div>  
    
+   <div>
+      <add-persons v-if="accompanyingCourse.requestor === null"
+         buttonTitle="requestor.add_requestor"
+         modalTitle="requestor.add_requestor"
+         v-bind:key="addPersons.key"
+         v-bind:options="addPersons.options"
+         @addNewPersons="addNewPersons"
+         ref="addPersons"> <!-- to cast child method -->
+      </add-persons>
+   </div>
+
 </div>
 </template>
 
 <script>
-import Modal from 'ChillMainAssets/vuejs/_components/Modal'
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
 
 export default {
    name: 'Requestor',
    components: {
-      Modal,
+      AddPersons,
    },
    data() {
       return {
-         modal1: {
-            showModal: false,
-            modalDialogClass: "modal-dialog-scrollable modal-xl"  // modal-lg modal-md modal-sm
-         },
-         modal2: {
-            showModal: false,
-            modalDialogClass: "modal-dialog-centered modal-sm"  // modal-lg modal-md modal-sm
+         addPersons: {
+            key: 'requestor',
+            options: {
+               type: ['person', 'thirdparty'],
+               priority: null,
+               uniq: true,
+            }
          }
       }
    },
    computed: {
       accompanyingCourse() {
          return this.$store.state.accompanyingCourse
+      },
+      isAnonymous: {
+         set(value) {
+            console.log('requestorIsAnonymous value',value);
+            this.$store.dispatch('requestorIsAnonymous', value);
+         },
+         get() {
+            return this.$store.state.accompanyingCourse.requestorAnonymous;
+         }
+      }
+   },
+   methods: {
+      removeRequestor() {
+         console.log('@@ CLICK remove requestor: item');
+         this.$store.dispatch('removeRequestor');
+      },
+      addNewPersons({ selected, modal }) {
+         console.log('@@@ CLICK button addNewPersons', selected);
+         this.$store.dispatch('addRequestor', selected.shift());
+         this.$refs.addPersons.resetSearch(); // to cast child method
+         modal.showModal = false;
       }
    }
 }

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

@@ -0,0 +1,85 @@
+<template>
+<div class="vue-component">
+  
+   <h2><a name="section-50"></a>{{ $t('resources.title')}}</h2>
+   
+   <div>
+      <label>{{ $tc('resources.counter', counter) }}</label>
+   </div>
+   
+   <table class="rounded" v-if="resources.length > 0">
+      <thead>
+         <tr>
+            <th class="chill-orange">{{ $t('resources.text') }}</th>
+            <th class="chill-orange">{{ $t('resources.description') }}</th>
+            <th class="chill-orange">{{ $t('action.actions') }}</th>
+         </tr>
+      </thead>
+      <tbody>
+         <resource-item
+            v-for="resource in resources"
+            v-bind:resource="resource"
+            v-bind:key="resource.id"
+            @remove="removeResource">
+         </resource-item>
+      </tbody>
+   </table>
+   
+   <div>
+      <add-persons 
+        buttonTitle="resources.add_resources"
+        modalTitle="resources.add_resources"
+        v-bind:key="addPersons.key"
+        v-bind:options="addPersons.options"
+        @addNewPersons="addNewPersons"
+        ref="addPersons"> <!-- to cast child method -->
+      </add-persons>
+   </div>
+
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import ResourceItem from './Resources/ResourceItem.vue';
+
+export default {
+   name: 'Resources',
+   components: {
+      AddPersons,
+      ResourceItem
+   },
+   data() {
+      return {
+         addPersons: {
+            key: 'resources',
+            options: {
+               type: ['person', 'thirdparty'],
+               priority: null,
+               uniq: false,
+            }
+         }
+      }
+   },
+   computed: mapState({
+      resources: state => state.accompanyingCourse.resources,
+      counter: state => state.accompanyingCourse.resources.length
+   }),
+   methods: {
+      removeResource(item) {
+         console.log('@@ CLICK remove resource: item', item);
+         this.$store.dispatch('removeResource', item);
+      },
+      addNewPersons({ selected, modal }) {
+         console.log('@@@ CLICK button addNewPersons', selected);
+         selected.forEach(function(item) {
+               this.$store.dispatch('addResource', item);
+            }, this
+         );
+         this.$refs.addPersons.resetSearch(); // to cast child method
+         modal.showModal = false;
+      }
+   }
+}
+</script>

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

@@ -0,0 +1,68 @@
+<template>
+<tr>
+   
+   <td>
+      <span class="badge badge-pill badge-secondary" 
+         v-bind:title="resource.resource.id">
+         <span v-if="resource.resource.type === 'person'" >{{ $t('item.type_person') }}</span>
+         <span v-if="resource.resource.type === 'thirdparty'" >{{ $t('item.type_thirdparty') }}</span>
+      </span>
+      {{ resource.resource.text }}
+   </td>
+      
+   <td v-if="resource.resource.type === 'person'">
+      {{ $tc('person.born') }}{{ $d(resource.resource.birthdate.datetime, 'short') }}
+   </td>
+   <td v-else-if="resource.resource.type === 'thirdparty'">
+      {{ resource.resource.address.text }}<br>
+      {{ resource.resource.address.postcode.name }}
+   </td>
+   
+   <td>
+      <ul class="record_actions">
+         <li>
+            <a class="sc-button bt-show" target="_blank"
+               :href="url.show"
+               :title="$t('action.show')">
+            </a>
+         </li>
+         <li>
+            <a class="sc-button bt-update" target="_blank"
+               :href="url.edit"
+               :title="$t('action.edit')">
+            </a>
+         </li>
+         <li>
+            <button
+               class="sc-button bt-remove"
+               :title="$t('action.remove')" 
+               @click.prevent="$emit('remove', resource)">
+            </button>
+            
+         </li>
+      </ul>
+   </td>
+</tr>
+</template>
+
+<script>
+export default {
+   name: 'ResourceItem',
+   props: ['resource'],
+   emits: ['remove'],
+   computed: {
+      type() {
+         return this.resource.resource.type;
+      },
+      url() {
+         return (this.type === 'person') ? {
+            show: `/fr/person/${this.resource.resource.id}/general`,
+            edit: `/fr/person/${this.resource.resource.id}/general/edit`
+         } : {
+            show: `/fr/thirdparty/thirdparty/${this.resource.resource.id}/show`,
+            edit: `/fr/thirdparty/thirdparty/${this.resource.resource.id}/update`
+         }
+      }
+   }
+}
+</script>

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="vue-component">
+     <h2><a name="section-30"></a>{{ $t('social_issue.title') }}</h2>
+     
+     <div class="my-4">
+        <!--label for="field">{{ $t('social_issue.label') }}</label
+        -->
+        <VueMultiselect
+           name="field"
+           :close-on-select="false"
+           :allow-empty="true" 
+           :show-labels="false" 
+           track-by="id"
+           label="text"
+           :multiple="true"
+           :searchable="false"
+           :placeholder="$t('social_issue.label')"
+           @update:model-value="updateSocialIssues"
+           :model-value="value"
+           :options="options">
+        </VueMultiselect>
+     </div>
+     
+  </div>
+</template>
+
+<script>
+import VueMultiselect from 'vue-multiselect';
+import { getSocialIssues } from '../api';
+import { mapState } from 'vuex';
+
+export default {
+   name: "SocialIssue",
+   components: { VueMultiselect },
+   data() {
+      return {
+         options: []
+      }
+   },
+   computed: {
+      ...mapState({
+         value: state => state.accompanyingCourse.socialIssues,
+      }),
+   },
+   mounted() {
+      this.getOptions();
+   },
+   methods: {
+      getOptions() {
+         getSocialIssues().then(response => new Promise((resolve, reject) => {
+            //console.log('get socialIssues', response.results);
+            this.options = response.results;
+            resolve();
+         })).catch(error => this.$store.commit('catchError', error));        
+      },
+      updateSocialIssues(value) {
+         this.$store.dispatch('updateSocialIssues', this.transformValue(value));
+      },
+      transformValue(updated) {
+         let stored = this.value;
+         let added = updated.filter(x => stored.indexOf(x) === -1).shift();
+         let removed = stored.filter(x => updated.indexOf(x) === -1).shift();
+         let method = (typeof removed === 'undefined') ? 'POST' : 'DELETE';         
+         let changed = (typeof removed === 'undefined') ? added : removed;
+         let body = { type: "social_issue", id: changed.id };
+         //console.log('body', body);
+         //console.log('@@@', method, changed.text);
+         let payload = updated;
+         return { payload, body, method };
+      }
+   }
+}
+</script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+<style lang="scss">
+   span.multiselect__tag {
+      background: #e2793d;
+   }
+</style>

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

@@ -0,0 +1,191 @@
+<template>
+   <teleport to="#content_conainter .container.content .container">
+      <div id="navmap">
+         <nav>
+            <a class="top" href="#top">
+               <i class="fa fa-fw fa-square"></i>
+               <span>{{ $t('nav.top') }}</span>
+            </a>
+            <item
+               v-for="item of items"
+               :key="item.key"
+               :item="item"
+               :step="step">
+            </item>
+         </nav>
+      </div>
+   </teleport>
+</template>
+
+<script>
+import Item from './StickyNav/Item.vue';
+
+export default {
+   name: "StickyNav",
+   components: {
+      Item
+   },
+   data() {
+      return {
+         header: document.querySelector("header.navigation.container"),
+         bannerName: document.querySelector("#header-accompanying_course-name"),
+         bannerDetails: document.querySelector("#header-accompanying_course-details"),
+         container: null,
+         heightSum: null,
+         stickyNav: null,
+         limit: 25,
+         anchors: null,
+         items: [],
+      }
+   },
+   computed: {
+      accompanyingCourse() {
+         return this.$store.state.accompanyingCourse;
+      },
+      step() {
+         return this.accompanyingCourse.step;
+      },
+      top() {
+         return parseInt(window.getComputedStyle(this.stickyNav).getPropertyValue('top').slice(0, -2));
+      },
+   },
+   mounted() {
+      this.ready();
+      window.addEventListener('scroll', this.handleScroll);
+   },
+   destroyed() {
+      window.removeEventListener('scroll', this.handleScroll);
+   },
+   methods: {
+      ready() {
+
+         // load datas DOM when mounted ready
+         this.container = document.querySelector("#content_conainter .container.content .container");
+         this.stickyNav = document.querySelector('#navmap');
+         this.anchors = document.querySelectorAll("h2 a[name^='section']");
+         this.initItemsMap();                  
+         
+         // TODO resizeObserver not supports IE !
+         // Listen when elements change size, then recalculate heightSum and initItemsMap
+         const resizeObserver = new ResizeObserver(entries => {
+            this.refreshPos();
+         });
+         
+         resizeObserver.observe(this.header);
+         resizeObserver.observe(this.bannerName);
+         resizeObserver.observe(this.bannerDetails);
+         resizeObserver.observe(this.container);
+      },
+      initItemsMap() {
+         
+         this.anchors.forEach(anchor => {
+            this.items.push({
+               pos: null,
+               active: false,
+               key: parseInt(anchor.name.slice(8).slice(0, -1)),
+               name: '#' + anchor.name
+            })
+         });
+      },
+      refreshPos() {
+         
+         //console.log('refreshPos');
+         this.heightSum = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
+         
+         this.anchors.forEach((anchor, i) => {
+            this.items[i].pos = this.findPos(anchor)['y'];
+         });
+      },
+      findPos(element) {
+         
+          let posX = 0, posY = 0;
+          do {
+              posX += element.offsetLeft;
+              posY += element.offsetTop;
+              element = element.offsetParent;
+          }
+          while( element != null );
+          
+          let pos = [];
+          pos['x'] = posX;
+          pos['y'] = posY;
+          
+          return pos;
+      },
+      handleScroll(event) {
+         
+         let pos = this.findPos(this.stickyNav);
+         let top = this.heightSum + this.top - window.scrollY;
+         //console.log(window.scrollY); 
+         
+         if (top > this.limit) {            
+            this.stickyNav.style.position = 'absolute';
+            this.stickyNav.style.left = '-60px';
+         } else {
+            this.stickyNav.style.position = 'fixed';
+            this.stickyNav.style.left = pos['x'] + 'px';
+         }
+         
+         this.switchActive();
+      },
+      switchActive() {
+         
+         this.items.forEach((item, i) => {
+            let next = (this.items[i+1]) ? this.items[i+1].pos : '100000';
+            item.active = 
+                (window.scrollY >= item.pos & window.scrollY < next) ? true : false;
+         }, this);
+         
+         // last item never switch active because scroll reach bottom of page 
+         if (document.body.scrollHeight == window.scrollY + window.innerHeight) {
+            this.items[this.items.length-1].active = true;
+            this.items[this.items.length-2].active = false;
+         } else {
+            this.items[this.items.length-1].active = false;
+         }
+      }
+   }
+}
+</script>
+
+<style lang="scss">
+div#navmap {
+   position: absolute;
+   top: 30px;
+   left: -60px; //-10%;
+   nav {
+      font-size: small;
+      a {
+         display: block;
+         box-sizing: border-box;
+         margin-bottom: -3px;
+         color: #71859669;
+         &.top {
+            color: #718596;
+         }
+         span {
+            display: none;
+         }
+         &:hover, 
+         &.active {
+            span {
+               display: inline;
+               padding-left: 8px;
+            }
+         }
+         &:hover {
+            color: #718596b5;
+         }
+         &.active {
+            color: #e2793d; //orange
+            //color: #eec84a; //jaune
+         }
+      }
+   }
+}
+@media only screen and (max-width: 768px) {
+   div.sticky-section {
+      display: none;
+   }
+}
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+   <a 
+      v-if="item.key <= 5"
+      :href="item.name" 
+      :class="{ 'active': isActive }"
+      >
+      <i class="fa fa-fw fa-square"></i>
+      <span>{{ item.key }}</span>
+   </a>
+   <a 
+      v-else-if="step === 'DRAFT'"
+      :href="item.name" 
+      :class="{ 'active': isActive }"
+      >
+      <i class="fa fa-fw fa-square"></i>
+      <span>{{ item.key }}</span>
+   </a>
+</template>
+
+<script>
+export default {
+   name: "Item",
+   props: ['item', 'step'],
+   computed: {
+      isActive() {
+         return this.item.active;
+      }
+   }
+}
+</script>

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

@@ -0,0 +1,81 @@
+<template>
+<div class="vue-component">
+   <h2></a>Tests</h2>
+   
+   <!-- Modal -->
+   <ul class="record_actions">
+      <li>
+         <button class="sc-button bt-create" @click="modal1.showModal = true">
+            {{ $t('action.show_modal') }}
+         </button>
+      </li>
+      <li>
+         <button class="sc-button bt-create" @click="modal2.showModal = true">
+            Ouvrir une seconde modale
+         </button>
+      </li>
+   </ul>
+   
+   <teleport to="body">
+   <modal v-if="modal1.showModal" :modalDialogClass="modal1.modalDialogClass" @close="modal1.showModal = false">      
+      <template v-slot:header>
+         <h2 class="modal-title">Le titre de ma modale</h2>
+      </template>
+      <template v-slot:body>
+         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
+         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
+         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
+      </template>
+      <template v-slot:footer>
+         <button class="sc-button green" @click="modal1.showModal = false; modal2.showModal = true">
+            {{ $t('action.next')}}</button>
+      </template>
+   </modal>
+   </teleport>
+   
+   <teleport to="body">
+   <modal v-if="modal2.showModal" :modalDialogClass="modal2.modalDialogClass" @close="modal2.showModal = false">      
+      <template v-slot:header>
+         <h2 class="modal-title">Une autre modale</h2>
+      </template>
+      <template v-slot:body>
+         <p>modal 2</p>
+      </template>
+      <template v-slot:footer>
+         <button class="sc-button green" @click="modal2.showModal = false">
+            {{ $t('action.save')}}</button>
+      </template>
+   </modal>
+   </teleport>
+   <!-- END Modal -->
+   
+</div>
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal'
+
+export default {
+   name: 'Test',
+   components: {
+      Modal,
+   },
+   data() {
+      return {
+         modal1: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"  // modal-lg modal-md modal-sm
+         },
+         modal2: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-sm"  // modal-lg modal-md modal-sm
+         }
+      }
+   },
+   computed: {
+   }
+}
+</script>

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

@@ -4,24 +4,87 @@ const appMessages = {
    fr: {
       course: {
          id: "id",
-         title: "Parcours",
+         title: {
+            draft: "Création d'un nouveau parcours",
+            active: "Modification du parcours"
+         },
          opening_date: "Date d'ouverture",
          closing_date: "Date de clôture",
          remark: "Commentaire",
          closing_motive: "Motif de clôture",
+         user: "TMS",
+         flags: "Indicateurs",
+         status: "État",
+         step: {
+            draft: "Brouillon",
+            active: "En file active"
+         },
+         open_at: "ouvert le ",
+         by: "par ", 
+         emergency: "urgent",
+         confidential: "confidentiel",
+         regular: "régulier",
+         occasional: "ponctuel"
       },
       persons_associated: {
          title: "Usagers concernés",
-         counter: "Pas d'usager | 1 usager | {count} usagers",
-         firstname: "Prénom", 
-         lastname: "Nom", 
-         startdate: "Date d'entrée", 
+         counter: "Il n'y a pas encore d'usager | 1 usager | {count} usagers",
+         firstname: "Prénom",
+         lastname: "Nom",
+         startdate: "Date d'entrée",
          enddate: "Date de sortie",
-         addPerson: "Ajouter un usager",
+         add_persons: "Ajouter des usagers",
       },
       requestor: {
          title: "Demandeur",
+         add_requestor: "Ajouter un demandeur",
+         is_anonymous: "Le demandeur est anonyme",
+         counter: "Il n'y a pas encore de demandeur",
+         type: "Type",
+         person_id: "id",
+         text: "Dénomination",
+         firstName: "Prénom",
+         lastName: "Nom",
+         birthdate: "Date de naissance",
+         center: "Centre",
+         phonenumber: "Téléphone",
+         mobilenumber: "Mobile",
+         altNames: "Autres noms",
+         address: "Adresse",
+         location: "Localité",
       },
+      social_issue: {
+         title: "Problématiques sociales",
+         label: "Choisir les problématiques sociales",
+      },
+      referrer: {
+         title: "Référent du parcours",
+         label: "Vous pouvez choisir un TMS ou vous assigner directement comme référent",
+         placeholder: "Choisir un TMS",
+         assign_me: "M'assigner comme référent",
+      },
+      resources: {
+         title: "Interlocuteurs privilégiés",
+         counter: "Il n'y a pas encore d'interlocuteur | 1 interlocuteur | {count} interlocuteurs",
+         text: "Dénomination",
+         description: "Description",
+         add_resources: "Ajouter des interlocuteurs",
+      },
+      comment: {
+         title: "Observations",
+         label: "Ajout d'une note",
+         content: "Rédigez une première note...",
+         created_by: "créé par {0}, le {1}" 
+      },
+      confirm: {
+         title: "Confirmation",
+         text_draft: "Le parcours est actuellement à l'état de ",
+         text_active: "En validant cette étape, vous lui donnez le statut ",
+         sure: "Êtes-vous sûr ?",
+         sure_description: "Une fois le changement confirmé, il n'est plus possible de le remettre à l'état de brouillon !",
+         ok: "Confirmer le parcours"
+      },
+
    }
 };
 

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

@@ -1,11 +1,15 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import addPersons from './modules/addPersons'
-import { getAccompanyingCourse, postParticipation } from '../api';
+import { getAccompanyingCourse, 
+   patchAccompanyingCourse,
+   confirmAccompanyingCourse,
+   postParticipation, 
+   postRequestor,
+   postResource,
+   postSocialIssue } from '../api';
 
 const debug = process.env.NODE_ENV !== 'production';
-
-const id = window.accompanyingCourseId; //tmp
+const id = window.accompanyingCourseId;
 
 let initPromise = getAccompanyingCourse(id)
    .then(accompanying_course => new Promise((resolve, reject) => {
@@ -13,7 +17,6 @@ let initPromise = getAccompanyingCourse(id)
       const store = createStore({
          strict: debug,
          modules: {
-            addPersons
          },
          state: {
             accompanyingCourse: accompanying_course,
@@ -22,54 +25,179 @@ let initPromise = getAccompanyingCourse(id)
          getters: {
          },
          mutations: {
-            removeParticipation(state, item) {
-               //console.log('mutation: remove item', item.id);
-               state.accompanyingCourse.participations = state.accompanyingCourse.participations.filter(participation => participation !== item);
+            catchError(state, error) {
+               state.errorMsg.push(error); 
+            },
+            removeParticipation(state, participation) {
+               //console.log('### mutation: remove participation', participation.id);
+               state.accompanyingCourse.participations = state.accompanyingCourse.participations.filter(element => element !== participation);
             },
             closeParticipation(state, { participation, payload }) {
-               console.log('### mutation: close item', { participation, payload });
-               // trouve dans le state le payload et le supprime du state
-               state.accompanyingCourse.participations = state.accompanyingCourse.participations.filter(participation => participation !== payload);
-               // pousse la participation
-               state.accompanyingCourse.participations.push(participation);
+               //console.log('### mutation: close item', { participation, payload });
+               // find row position and replace by closed participation
+               state.accompanyingCourse.participations.splice(
+                  state.accompanyingCourse.participations.findIndex(element => element === payload), 1, participation
+               );
             },
             addParticipation(state, participation) {
                //console.log('### mutation: add participation', participation);
                state.accompanyingCourse.participations.push(participation);
             },
+            removeRequestor(state) {
+               //console.log('### mutation: removeRequestor');
+               state.accompanyingCourse.requestor = null;
+            },
+            addRequestor(state, requestor) {
+               //console.log('### mutation: addRequestor', requestor);
+               state.accompanyingCourse.requestor = requestor;
+            },
+            requestorIsAnonymous(state, value) {
+               //console.log('### mutation: requestorIsAnonymous', value);
+               state.accompanyingCourse.requestorAnonymous = value;
+            },
+            removeResource(state, resource) {
+               //console.log('### mutation: removeResource', resource);
+               state.accompanyingCourse.resources = state.accompanyingCourse.resources.filter(element => element !== resource);
+            },
+            addResource(state, resource) {
+               //console.log('### mutation: addResource', resource);
+               state.accompanyingCourse.resources.push(resource);
+            },
+            toggleIntensity(state, value) {
+               state.accompanyingCourse.intensity = value;
+            },
+            toggleEmergency(state, value) {
+               //console.log('### mutation: toggleEmergency');
+               state.accompanyingCourse.emergency = value;
+            },
+            toggleConfidential(state, value) {
+               //console.log('### mutation: toggleConfidential');
+               state.accompanyingCourse.confidential = value;
+            },
+            postFirstComment(state, comment) {
+               //console.log('### mutation: postFirstComment', comment);
+               state.accompanyingCourse.initialComment = comment;
+            }, 
+            updateSocialIssues(state, value) {
+               state.accompanyingCourse.socialIssues = value;
+            },
+            confirmAccompanyingCourse(state, response) {
+               //console.log('### mutation: confirmAccompanyingCourse: response', response);
+               state.accompanyingCourse.step = response.step;
+            }
          },
          actions: {
             removeParticipation({ commit }, payload) {
                commit('removeParticipation', payload);
+               // fetch DELETE request...
             },
             closeParticipation({ commit }, payload) {
-               //console.log('## action: fetch delete participation: payload', payload.person.id);
-               postParticipation(id, payload.person.id, 'DELETE')
-                  .then(participation => new Promise((resolve, reject) => {
-                     //console.log('payload', payload);
-                     commit('closeParticipation', { participation, payload });
-                     resolve();
-                  }))
-                  .catch((error) => { 
-                     state.errorMsg.push(error.message); 
-                  }); 
+               //console.log('## action: fetch delete participation: payload', payload);
+               postParticipation(id, payload.person, 'DELETE')
+               .then(participation => new Promise((resolve, reject) => {
+                  commit('closeParticipation', { participation, payload });
+                  resolve();
+               })).catch((error) => { commit('catchError', error) }); 
             },
-            addParticipation(addPersons, payload) {
-               //console.log('## action: fetch post participation: payload', payload.id);
-               postParticipation(id, payload.id, 'POST')
-                  .then(participation => new Promise((resolve, reject) => {
-                     //console.log(participation, payload);
-                     addPersons.commit('addParticipation', participation);
-                     addPersons.commit('resetState', payload);
-                     resolve();
-                  }))
-                  .catch((error) => { 
-                     state.errorMsg.push(error.message); 
-                  }); 
+            addParticipation({ commit }, payload) {
+               //console.log('## action: fetch post participation (select item): payload', payload);
+               postParticipation(id, payload.result, 'POST')
+               .then(participation => new Promise((resolve, reject) => {
+                  commit('addParticipation', participation);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) }); 
             },
+            removeRequestor({ commit, dispatch }) {
+               //console.log('## action: fetch delete requestor');
+               postRequestor(id, null, 'DELETE')
+               .then(requestor => new Promise((resolve, reject) => {
+                  commit('removeRequestor');
+                  dispatch('requestorIsAnonymous', false);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) }); 
+            },
+            addRequestor({ commit }, payload) {
+               //console.log('## action: fetch post requestor: payload', payload);
+               postRequestor(id, payload.result, 'POST')
+               .then(requestor => new Promise((resolve, reject) => {
+                  commit('addRequestor', requestor);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) }); 
+            },
+            requestorIsAnonymous({ commit }, payload) {
+               //console.log('## action: fetch patch AccompanyingCourse: payload', payload);
+               patchAccompanyingCourse(id, { type: "accompanying_period", requestorAnonymous: payload })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('requestorIsAnonymous', course.requestorAnonymous)
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
+            removeResource({ commit }, payload) {
+               //console.log('## action: fetch postResource: payload', payload);
+               postResource(id, payload, 'DELETE')
+               .then(resource => new Promise((resolve, reject) => {
+                  commit('removeResource', payload) // mieux un retour de l'objet !
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
+            addResource({ commit }, payload) {
+               //console.log('## action: fetch postResource: payload', payload);
+               postResource(id, payload.result, 'POST')
+               .then(resource => new Promise((resolve, reject) => {
+                  commit('addResource', resource)
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
+            toggleIntensity({ commit }, payload) {
+               //console.log(payload);
+               patchAccompanyingCourse(id, { type: "accompanying_period", intensity: payload })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('toggleIntensity', course.intensity);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
+            toggleEmergency({ commit }, payload) {
+               patchAccompanyingCourse(id, { type: "accompanying_period", emergency: payload })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('toggleEmergency', course.emergency);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
+            toggleConfidential({ commit }, payload) {
+               patchAccompanyingCourse(id, { type: "accompanying_period", confidential: payload })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('toggleConfidential', course.confidential);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
+            postFirstComment({ commit }, payload) {
+               //console.log('## action: postFirstComment: payload', payload);
+               patchAccompanyingCourse(id, { type: "accompanying_period", initialComment: payload })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('postFirstComment', course.initialComment);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
+            updateSocialIssues({ commit }, { payload, body, method }) {
+               //console.log('## action: payload', { payload, body, method });
+               postSocialIssue(id, body, method)
+               .then(response => new Promise((resolve, reject) => {
+                  //console.log('response', response);
+                  commit('updateSocialIssues', payload);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
+            confirmAccompanyingCourse({ commit }) {
+               //console.log('## action: confirmAccompanyingCourse');
+               confirmAccompanyingCourse(id)
+               .then(response => new Promise((resolve, reject) => {
+                  commit('confirmAccompanyingCourse', response);
+                  console.log('fetch resolve'); // redirection with #top anchor
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            }
          }
       });
-      //console.log('store object', store.state.accompanyingCourse.id);
       resolve(store);
    }));
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/modules/addPersons.js

@@ -1,76 +0,0 @@
-import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons'
-import { postParticipation } from '../../api';
-
-
-// initial state
-const state = {
-   query: "",
-   suggested: [],
-   selected: []
-}
-
-// getters
-const getters = {
-   selectedAndSuggested: state => {
-      const uniqBy = (a, key) => [
-            ...new Map(
-               a.map(x => [key(x), x])
-            ).values()
-      ];
-      let union = [...new Set([
-         ...state.suggested.slice().reverse(),
-         ...state.selected.slice().reverse(), 
-      ])];
-      return uniqBy(union, k => k.id);
-   }
-}
-
-// mutations
-const mutations = {
-   setQuery(state, query) {
-      //console.log('q=', query);
-      state.query = query;
-   },
-   loadSuggestions(state, suggested) { 
-      state.suggested = suggested;
-   },
-   updateSelected(state, value) {
-      state.selected = value;
-   },
-   resetState(state, selected) {
-      //console.log('avant', state.selected);
-      state.selected = state.selected.filter(value => value !== selected);
-      //console.log('après', state.selected);
-      state.query = "";
-      state.suggested = [];
-   }
-}
-
-// actions
-const actions = {
-   setQuery({ commit }, payload) {
-      //console.log('## action: setquery: payload', payload);
-      commit('setQuery', payload.query);
-      if (payload.query.length >= 3) {
-         searchPersons(payload.query)
-            .then(suggested => new Promise((resolve, reject) => {
-               commit('loadSuggestions', suggested.results);
-               resolve();
-         }));
-      } else {
-         commit('loadSuggestions', []);
-      }
-   },
-   updateSelected({ commit }, payload) {
-      //console.log('## action: update selected values: payload', payload);
-      commit('updateSelected', payload);
-   }
-}
-
-export default {
-  //namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js

@@ -1,15 +1,23 @@
-const 
-   locale = 'fr',
-   format = 'json'
-;
+/*
+* Build query string with query and options
+*/
+const parametersToString = ({ query, options }) => {
+   let types ='';
+   options.type.forEach(function(type) { 
+      types += '&type[]=' + type;
+   }); 
+   return 'q=' + query + types;
+};
 
 /* 
-* Endpoint chill_person_search, method GET, get a list of persons
+* Endpoint chill_person_search
+* method GET, get a list of persons
 * 
 *  @query string - the query to search for
 */
-let searchPersons =  (query) => {
-   let url = `/${locale}/search.${format}?name=person_regular&q=${query}`;
+const searchPersons =  ({ query, options }) => {
+   let queryStr = parametersToString({ query, options });
+   let url = `/fr/search.json?name=person_regular&${queryStr}`;
    return fetch(url)
       .then(response => {
          if (response.ok) { return response.json(); }
@@ -17,4 +25,22 @@ let searchPersons =  (query) => {
       });
 };
 
-export { searchPersons };
+/* 
+* Endpoint v.2 chill_main_search_global
+* method GET, get a list of persons and thirdparty
+* 
+*  NOTE: this is a temporary WIP endpoint, return inconsistent random results
+*  @query string - the query to search for
+*/
+const searchPersons_2 =  ({ query, options }) => {
+   let queryStr = parametersToString({ query, options });
+   let url = `/api/1.0/search.json?${queryStr}`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+
+export { searchPersons, searchPersons_2 };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -1,73 +1,91 @@
 <template>
-   <button class="sc-button bt-create centered mt-4" @click="openModal">
-      {{ $t('add_persons.search_add_others_persons') }}
-   </button>
-   
+   <ul class="record_actions">
+      <li>
+         <button class="sc-button bt-create" @click="openModal">
+            {{ $t(buttonTitle) }}
+         </button>
+      </li>
+   </ul>
+
    <teleport to="body">
-      <modal v-if="modal.showModal" 
-         :modalDialogClass="modal.modalDialogClass" 
-         @close="modal.showModal = false">      
-            
+      <modal v-if="modal.showModal"
+         :modalDialogClass="modal.modalDialogClass"
+         @close="modal.showModal = false">
+
          <template v-slot:header>
-            <h3 class="modal-title">{{ $t('add_persons.title') }}</h3>
+            <h3 class="modal-title">{{ $t(modalTitle) }}</h3>
          </template>
 
-         <template v-slot:body-fixed>
-            <div class="search">
-               <label style="float: right;">
-                  {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
-               </label>
-               
-               <input id="search-persons"
-                  name="query" 
-                  v-model="query" 
-                  :placeholder="$t('add_persons.search_some_persons')" 
-                  ref="search" />
-               <i class="fa fa-search fa-lg"></i>
+         <template v-slot:body-head>
+            <div class="modal-body">
+               <div class="search">
+                  
+                  <label style="float: right;">
+                     {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
+                  </label>
+
+                  <input id="search-persons"
+                     name="query"
+                     v-model="query"
+                     :placeholder="$t('add_persons.search_some_persons')"
+                     ref="search" />
+                  <i class="fa fa-search fa-lg"></i>
+                  <i class="fa fa-times" v-if="queryLength >= 3" @click="resetSuggestion"></i>
+
+               </div>
             </div>
-         </template>
-               
-         <template v-slot:body>
-            <!--span class="discret">Selection: {{ selected }}</span-->
-            <div class="results">
+            <div class="modal-body" v-if="checkUniq === 'checkbox'">
                <div class="count">
                   <span>
-                     <a  v-if="suggestedCounter > 0" href="#">
-                        {{ $t('action.check_all')}}</a>
-                     <a  v-if="selectedCounter > 0" href="#"> 
-                        {{ $t('action.reset')}}</a>
+                     <a v-if="suggestedCounter > 2" @click="selectAll">
+                        {{ $t('action.check_all')}}
+                     </a>
+                     <a v-if="selectedCounter > 0" @click="resetSelection">
+                        <i v-if="suggestedCounter > 2"> • </i>
+                        {{ $t('action.reset')}}
+                     </a>
                   </span>
                   <span v-if="selectedCounter > 0">
                      {{ $tc('add_persons.selected_counter', selectedCounter) }}
                   </span>
                </div>
-               
-               <person-suggestion 
+            </div>
+         </template>
+
+         <template v-slot:body>
+            <!--span class="discret">Selection: {{ selected }}</span-->
+            <div class="results">
+
+               <person-suggestion
                   v-for="item in this.selectedAndSuggested.slice().reverse()"
-                  v-bind:item="item" 
-                  v-bind:key="item.id">
+                  v-bind:key="itemKey(item)"
+                  v-bind:item="item"
+                  v-bind:search="search"
+                  v-bind:type="checkUniq"
+                  @updateSelected="updateSelected">
                </person-suggestion>
-               
+
                <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
                   {{ $t('action.create') }} "{{ query }}"
                </button>
             </div>
          </template>
-               
+
          <template v-slot:footer>
-            <button class="sc-button green" @click="addNewPersons">
+            <button class="sc-button green" 
+               @click.prevent="$emit('addNewPersons', { selected, modal })">
                <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
             </button>
          </template>
-         
+
       </modal>
    </teleport>
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
-import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion';
+import PersonSuggestion from './AddPersons/PersonSuggestion';
+import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';
 
 export default {
    name: 'AddPersons',
@@ -75,40 +93,69 @@ export default {
       Modal,
       PersonSuggestion,
    },
+   props: [
+      'buttonTitle',
+      'modalTitle',
+      'options'
+   ],
+   emits: ['addNewPersons'],
    data() {
       return {
          modal: {
             showModal: false,
             modalDialogClass: "modal-dialog-scrollable modal-xl"
+         },
+         search: {
+            query: "",
+            suggested: [],
+            selected: []
          }
       }
    },
    computed: {
-      ...mapState({
-         addPersons: state => state.addPersons
-      }),
       query: {
          set(query) {
-            this.$store.dispatch('setQuery', { query });
+            return this.setQuery(query);
          },
          get() {
-            return this.addPersons.query;
+            return this.search.query;
          }
       },
+      queryLength() {
+         return this.search.query.length;
+      },
       suggested() {
-         return this.addPersons.suggested;
+         return this.search.suggested;
       },
       suggestedCounter() {
-         return this.addPersons.suggested.length;
-      }, 
+         return this.search.suggested.length;
+      },
       selected() {
-         return this.addPersons.selected;
-      }, 
+         return this.search.selected;
+      },
       selectedCounter() {
-         return this.addPersons.selected.length;
+         return this.search.selected.length;
       },
       selectedAndSuggested() {
-         return this.$store.getters.selectedAndSuggested;
+         const uniqBy = (a, key) => [
+               ...new Map(
+                  a.map(x => [key(x), x])
+               ).values()
+         ];
+         let union = [...new Set([
+            ...this.suggested.slice().reverse(),
+            ...this.selected.slice().reverse(), 
+         ])];
+         return uniqBy(union, k => k.key);
+      },
+      options() {
+         return this.options;
+      },
+      checkUniq() {
+         if (this.options.uniq === true) {
+            return 'radio';
+         }
+         return 'checkbox';
       }
    },
    methods: {
@@ -118,15 +165,90 @@ export default {
             this.$refs.search.focus();
          })
       },
-      addNewPersons() {
-         console.log('@@@ CLICK button addPersons')
-         this.selected.forEach(function(item) {
-               //console.log('# dispatch action for each item', item); 
-               this.$store.dispatch('addParticipation', item);
-            }, this
-         );
-         this.modal.showModal = false;
+      setQuery(query) {
+         this.search.query = query;
+         if (query.length >= 3) {
+            searchPersons_2({ query, options: this.options })
+               .then(suggested => new Promise((resolve, reject) => {
+                  console.log('suggested', suggested);
+                  this.loadSuggestions(suggested.results);
+                  resolve();
+            }));
+         } else {
+            this.loadSuggestions([]);
+         }
+      },
+      loadSuggestions(suggested) { 
+         console.log('suggested', suggested);
+         this.search.suggested = suggested;
+         this.search.suggested.forEach(function(item) {
+            item.key = this.itemKey(item);
+         }, this);
+      },
+      updateSelected(value) {
+         console.log('value', value);
+         this.search.selected = value;
+      },
+      resetSearch() {
+         this.resetSelection();
+         this.resetSuggestion();
+      },
+      resetSuggestion() {
+         this.search.query = "";
+         this.search.suggested = [];
+      },
+      resetSelection() {
+         this.search.selected = [];
+      },
+      selectAll() {
+         this.search.suggested.forEach(function(item) {
+            this.search.selected.push(item);
+         }, this);
+      },
+      itemKey(item) {
+         return item.result.type + item.result.id;
       }
-   }
+   },
 }
 </script>
+
+<style lang="scss">
+   div.body-head {
+      overflow-y: unset;
+      div.modal-body:first-child {
+         margin: auto 4em;
+         div.search {
+            position: relative;
+            input { 
+               padding: 1.2em 1.5em 1.2em 2.5em;
+               margin: 1em 0;
+            }
+            i {
+               position: absolute;
+               opacity: 0.5;
+               padding: 0.65em 0;
+               top: 50%; 
+            }
+            i.fa-search {
+               left: 0.5em;
+            }
+            i.fa-times {
+               right: 1em;
+               padding: 0.75em 0;
+               cursor: pointer;
+            }
+         }
+      }
+      div.modal-body:last-child {
+         padding-bottom: 0;
+      }
+      div.count {
+         margin: -0.5em 0 0.7em;
+         display: flex;
+         justify-content: space-between;
+         a {
+            cursor: pointer;
+         }
+      }
+   }
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -0,0 +1,101 @@
+<template>
+   <div class="list-item" :class="{ checked: isChecked }">
+         
+         <div class="container">
+            <input 
+               v-bind:type="type" 
+               v-model="selected"
+               name="item"
+               v-bind:id="item"
+               v-bind:value="setValueByType(item, type)" />
+         </div>
+            
+         <suggestion-person 
+            v-if="item.result.type === 'person'"
+            v-bind:item="item">
+         </suggestion-person>
+         
+         <suggestion-third-party 
+            v-if="item.result.type === 'thirdparty'"
+            v-bind:item="item">
+         </suggestion-third-party>
+
+   </div>
+</template>
+
+<script>
+import SuggestionPerson from './TypePerson';
+import SuggestionThirdParty from './TypeThirdParty';
+
+export default {
+   name: 'PersonSuggestion',
+   components: {
+      SuggestionPerson,
+      SuggestionThirdParty,
+   },
+   props: [
+      'item', 
+      'search',
+      'type'
+   ],
+   emits: ['updateSelected'],
+   computed: {
+      selected: {
+         set(value) {
+            console.log('value', value);
+            this.$emit('updateSelected', value);
+         },
+         get() {
+            return this.search.selected;
+         }
+      },
+      isChecked() {
+         return (this.search.selected.indexOf(this.item) === -1) ? false : true;
+      },
+   },
+   methods: {
+      setValueByType(value, type) {
+         return (type === 'radio')? [value] : value;
+      }
+   }
+};
+</script>
+
+<style lang="scss">
+   div.results {   
+      div.list-item {
+         padding: 0.4em 0.8em;
+         display: flex;
+         flex-direction: row;
+         &.checked {
+            background-color: #ececec;
+            border-bottom: 1px dotted #8b8b8b;
+         }
+         div.container {
+            & > input {
+               margin-right: 0.8em;
+            }
+            span:not(.name) {
+               margin-left: 0.5em;
+               opacity: 0.5;
+               font-size: 90%;
+               font-style: italic;
+            }
+         }
+         div.right_actions {
+            margin: 0 0 0 auto;
+            display: flex;
+            align-items: flex-end;
+            & > * {
+               margin-left: 0.5em;
+               align-self: baseline;
+            }
+            a.sc-button {
+               border: 1px solid lightgrey;
+               font-size: 70%;
+               padding: 4px;
+            } 
+         }
+      }
+   }
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue

@@ -0,0 +1,35 @@
+<template>
+   <div class="container">
+   
+      <span class="name">
+         {{ item.result.text }}
+      </span>
+      <span class="birthday">
+         {{ $d(item.result.birthdate.datetime, 'short') }}
+      </span>
+      
+   </div>
+   <div class="right_actions">
+      
+      <span class="badge badge-pill badge-secondary" :title="item.key">
+         {{ $t('item.type_person') }}
+      </span>
+      <a class="sc-button bt-show" target="_blank" :title="item.key" :href="url.show"></a>
+      
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'SuggestionPerson',
+   props: ['item'],
+   data() {
+      return {
+         url: {
+            show: '/fr/person/' + this.item.result.person_id + '/general',
+            edit: '/fr/person/' + this.item.result.person_id + '/general/edit'
+         },
+      }
+   },
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue

@@ -0,0 +1,36 @@
+<template>
+   <div class="container">
+   
+      <span class="name">
+         {{ item.result.text }}
+      </span>
+      <span class="location">
+         {{ item.result.address.text }} - 
+         {{ item.result.address.postcode.name }}
+      </span>
+      
+   </div>
+   <div class="right_actions">
+      
+      <span class="badge badge-pill badge-secondary" :title="item.key">
+         {{ $t('item.type_thirdparty') }}
+      </span>
+      <a class="sc-button bt-show" target="_blank" :title="item.key" :href="url.show"></a>
+      
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'SuggestionThirdParty',
+   props: ['item'],
+   data() {
+      return {
+         url: {
+            show: '/fr/thirdparty/thirdparty/' + this.item.result.thirdparty_id + '/show',
+            edit: '/fr/thirdparty/thirdparty/' + this.item.result.thirdparty_id + '/edit'
+         },
+      }
+   },
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue

@@ -1,53 +0,0 @@
-<template>
-   <div class="list-item" :class="{ checked: isChecked }">
-      <div class="container">
-         
-         <!--a class="discret" target="_blank" :href="url.show">{{ item.id }}</a-->
-         <input class="" 
-            type="checkbox" 
-            v-model="selected" 
-            :value="item" />
-            
-         {{ item.text }}
-         
-      </div>
-      <div class="right_actions">
-         
-         <span class="badge badge-pill badge-secondary" :title="item.id">
-            {{ $t('item.type_person') }}
-         </span>
-         <a class="sc-button bt-show" target="_blank" :title="item.id" :href="url.show"></a>
-         
-      </div>
-   </div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-
-export default {
-   name: 'PersonSuggestion',
-   props: ['item'],
-   data() {
-      return {
-         url: {
-            show: '/fr/person/' + this.item.id + '/general',
-            edit: '/fr/person/' + this.item.id + '/general/edit'
-         }
-      }
-   },
-   computed: {
-      selected: {
-         set(value) {
-            this.$store.dispatch('updateSelected', value);
-         },
-         get() {
-            return this.$store.state.addPersons.selected;
-         }
-      },
-      isChecked() {
-         return (this.selected.indexOf(this.item) === -1) ? false : true;
-      }
-   }
-};
-</script>

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

@@ -1,7 +1,6 @@
 const personMessages = {
    fr: {
       add_persons: {
-         search_add_others_persons: "Rechercher et ajouter d'autres usagers",
          title: "Ajouter des usagers",
          suggested_counter: "Pas de résultats | 1 résultat | {count} résultats",
          selected_counter: " 1 sélectionné | {count} sélectionnés",
@@ -9,10 +8,16 @@ const personMessages = {
       },
       item: {
          type_person: "Usager",
-         type_tms: "TMS",
-         type_3rdparty: "Tiers",
-         type_menage: "Ménage"
-      }
+         type_user: "TMS",
+         type_thirdparty: "Tiers",
+         type_household: "Ménage"
+      },
+      person: {
+         firstname: "Prénom",
+         lastname: "Nom",
+         born: "né le ",
+      },
+      error_only_one_person: "Une seule personne peut être sélectionnée !"
    }
 };
 

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig

@@ -2,39 +2,24 @@
     <div class="grid-12 parent" id="header-accompanying_course-name" >
         <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
 
-            <div class="grid-5">{% set title = title %}
+            <div class="grid-6">{% set title = title %}
                 <h1>
                     <i class="fa fa-random fa-fw"></i>
-                    {{ 'Accompanying Course'|trans }}{# ou défini en amont
-                    {{ title|default('Accompanying Course'|trans)|raw }} #}
-                    <span style="font-weight: lighter; font-size: 65%;">(n°{{ accompanyingCourse.id  }})</span>
+                    {{ 'Accompanying Course'|trans }}
+                    <span style="font-weight: lighter; font-size: 50%;">(n°{{ accompanyingCourse.id  }})</span>
                 </h1>
             </div>
 
-            <div class="grid-4">
-                <ul class="record_actions">
-                    <li>ponctuel <i class="fa fa-toggle-on fa-fw"></i> régulier</li>
-                    <li>ouvert</li>
-                    <li>en file active</li>
-                    <li>urgent</li>
-                </ul>
-            </div>
+            <div class="grid-3" id="banner-flags"></div>
 
-            <div class="grid-3">
-                <p style="text-align: right;">
-                    <i>ouvert le 11 avril 2019</i><br>
-                    par <b>Soline Maillet | SIPAS</b>
-                </p>
-            </div>
+            <div class="grid-3" id="banner-status"></div>
 
         </div>
     </div>
     <div class="grid-12 parent" id="header-accompanying_course-details" >
         <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
 
-            <div class="grid-4">Problématiques sociales</div>
-            <div class="grid-4">_</div>
-            <div class="grid-4">_</div>
+            <div id="banner-social-issues"></div>
 
         </div>
     </div>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig

@@ -6,21 +6,23 @@
 
 {% block content %}
 
-    <h1>{{ block('title') }}</h1>
+  {% if 'DRAFT' == accompanyingCourse.step %}
+  <div class="grid-8 centered error flash_message">
+      <span>
+        {{ 'This accompanying course is still a draft'|trans }} 
+        <a href="{{ path('chill_person_accompanying_course_show', { 'accompanying_period_id': accompanyingCourse.id } ) }}">
+        {{ 'Edit & activate accompanying course'|trans }}
+        </a>
+      </span>
+  </div>
+  {% endif %}
 
-    <pre>
-{{ accompanyingCourse.id }}
-{{ accompanyingCourse.openingDate|format_date('short') }}
-{{ accompanyingCourse.closingDate|format_date('short') }}
-{{ accompanyingCourse.closingMotive|chill_entity_render_box }}
-{{ accompanyingCourse.remark|raw }}
-{{ accompanyingCourse.user }}
-usagers:
-{% for p in accompanyingCourse.participations %}
-    {{ p.person.id }} | <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">{{ p.person.fullnamecanonical }}</a> | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }}
-{% endfor %}
-    </pre>
+  <h1>{{ 'Associated peoples'|trans }}</h1>
 
-    {{ dump() }}
+  <h1>{{ 'Resources'|trans }}</h1>
+
+  <h1>{{ 'Social actions'|trans }}</h1>
+  
+  <h1>{{ 'Last events on accompanying course'|trans }}</h1>
 
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig

@@ -1,12 +1,17 @@
 {% extends 'ChillPersonBundle:AccompanyingCourse:layout.html.twig' %}
 
+{% set title = 'DRAFT' == accompanyingCourse.step ? 'New accompanying course' : 'Edit accompanying course' %}
+
 {% block title %}
-    {{ 'Edit Accompanying Course'|trans }}
+    {{ title|trans }}
 {% endblock %}
 
 {% block content %}
-   <h1>{{ block('title') }}</h1>
-   <div id="accompanying-course"></div>    
+   <div id="accompanying-course"></div> {#  <== insert accompanyingCourse vue component  #}
+{% endblock %}
+
+{% block css %}
+   {{ encore_entry_link_tags('accompanying_course') }}
 {% endblock %}
 
 {% block js %}

src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig

@@ -49,4 +49,22 @@
 
     {{ form_end(form) }}
 
+
+    NEW FORM
+
+    {% block content %}
+        <h1>{{ block('title') }}</h1>
+        <div id="address"></div>
+    {% endblock %}
+
+    {% block stylesheets %}
+        <link href="{{ asset('build/address.css') }}" type="text/css" rel="stylesheet" />
+    {% endblock %}
+
+    {% block js %}
+        {{ encore_entry_script_tags('address') }}
+    {% endblock %}
+
+
+
 {% endblock personcontent %}