Merge branch '139_demandeur' of gitlab.com:Chill-Projet/chill-bundles into 139_demandeur

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -13,9 +13,9 @@
 div#header-accompanying_course-name {
   background: none repeat scroll 0 0 #718596;
   color: #FFF;
-  padding-top: 1em;
+  h1 {
-  padding-bottom: 1em;
+    margin: 0.4em 0;       
-
+  }
   span {
     a {
       color: white;
@@ -54,3 +54,10 @@ div.subheader {
    color: grey;
    margin-right: 1em;
 }
+
+table {
+   ul.record_actions {
+      margin: 0;
+      padding: 0.5em;
+   }
+}

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

@@ -32,63 +32,71 @@ export default {
       PersonsAssociated, 
       Requestor,
       SocialIssue,
-      Referrer,
+      //Referrer,  //fait foirer socialissues
       Resources,
       Comment,
       Confirm,
    },
    computed: mapState([
-      'accompanyingCourse'
+      'accompanyingCourse', 'socialIssueOptions'
    ])
 };
 </script>
 
 <style lang="scss">
-   h1 {
+   div#accompanying-course {
-      margin: 1.5em 0;
+      h1 {
-   }
+         margin: 1.5em 0;
-   div.vue-component {
+      }
-      h2 {
+      div.vue-component {
-         margin-left: 0.7em;
+         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: -2em;
+            }
+         }
+         padding: 0.8em 0em;
+         margin: 2em 0;
+         border: 1px dotted #718596ab; 
+         border-radius: 5px;
+         border-left: 1px dotted #718596ab;
+         border-right: 1px dotted #718596ab;
+         /*
          position: relative; 
          &:before { 
+            content: "vuejs component";
             position: absolute;
-            content: "\f192";
+            left: 1.5em;
-            font-family: "ForkAwesome";
+            top: -0.9em;
-            color: #718596ab;
+            background-color: white;
-            left: -28px;
+            color: grey;
-            top: 4px;
+            padding: 0 0.3em;
          }
-         a[name^="section"] {
+         */
-            position: absolute;
+         dd { 
-            top: -2em;
+            margin-left: 1em; 
+         }
+         & > div {
+            margin: 1em 3em 0;
+         }
+         table {
          }
       }
-      padding: 0.8em 0em;
+}
-      margin: 2em 0;
-      border: 1px dotted #718596ab; 
-      border-radius: 5px;
-      border-left: 1px dotted #718596ab;
-      border-right: 1px dotted #718596ab;
-      /*
-      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

@@ -146,6 +146,25 @@ const postResource = (id, payload, method) => {
       });
 };
 
+/*
+* 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(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
 export { 
    getAccompanyingCourse,
    patchAccompanyingCourse,
@@ -154,4 +173,5 @@ export {
    postParticipation,
    postRequestor,
    postResource,
+   postSocialIssue
 };

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

@@ -20,9 +20,11 @@
    
    <teleport to="#header-accompanying_course-name #banner-status">
       <div v-if="accompanyingCourse.step === 'DRAFT'">
-         <span class="badge badge-secondary">
+         <a href="#bottom">
-            {{ $t('course.step.draft') }}
+            <span class="badge badge-secondary">
-         </span>
+               {{ $t('course.step.draft') }}
+            </span>
+         </a>
       </div>
       <div v-else>
          <div>
@@ -43,20 +45,26 @@
    </teleport>
    
    <teleport to="#header-accompanying_course-details #banner-social-issues">
-      <div class="grid-4">{{ $t('social_issue.title') }}</div>
+      <div class="grid-12">
-      <div class="grid-4">_</div>
+         <social-issues
-      <div class="grid-4">_</div>
+            v-for="issue in accompanyingCourse.socialIssues"
+            v-bind:key="issue.id"
+            v-bind:issue="issue">
+         </social-issues>
+      </div>
    </teleport>
 
 </template>
 
 <script>
-import ToggleFlags from './ToggleFlags';
+import ToggleFlags from './Banner/ToggleFlags';
+import SocialIssues from './Banner/SocialIssues.vue';
 
 export default {
    name: 'Banner',
    components: {
-      ToggleFlags
+      ToggleFlags,
+      SocialIssues
    },
    computed: {
       accompanyingCourse() {

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

@@ -0,0 +1,16 @@
+<template>
+  <span class="badge badge-secondary">{{ issue.text }}</span>
+</template>
+
+<script>
+export default {
+   name: "SocialIssues",
+   props: ['issue']
+}
+</script>
+
+<style lang="scss" scoped>
+span.badge {
+   margin-right: 1em;
+}
+</style>

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

@@ -8,17 +8,17 @@
       </div-->
       
       <div>
-         <div v-if="initialComment">
-            créé par {{ initialComment.creator.text }}
-            le {{ $d(initialComment.createdAt.datetime, 'long') }}
-            <div v-if="initialComment.updatedAt.datetime !== initialComment.createdAt.datetime">
-               modifié par {{ initialComment.updatedBy.text }}
-               le {{ $d(initialComment.updatedAt.datetime, 'long') }}
-            </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')"
@@ -27,6 +27,7 @@
                ckeditor="ckeditor"
                v-model="content">
             </textarea>
+            
             <ul class="record_actions">
                <li>
                   <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
@@ -38,6 +39,7 @@
                   </a>
                </li>
             </ul>
+            
          </form>
       </div>
       

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

@@ -43,7 +43,7 @@
 
 <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 {

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

@@ -54,6 +54,9 @@
          </li>
       </ul>
    </div> 
+   <div v-else>
+      <label>{{ $t('requestor.counter') }}</label>
+   </div>  
    
    <div>
       <add-persons v-if="accompanyingCourse.requestor === null"

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

@@ -42,7 +42,7 @@
 <script>
 import { mapState } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
-import ResourceItem from './ResourceItem.vue';
+import ResourceItem from './Resources/ResourceItem.vue';
 
 export default {
    name: 'Resources',

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

@@ -3,19 +3,21 @@
      <h2><a name="section-30"></a>{{ $t('social_issue.title') }}</h2>
      
      <div class="my-4">
-        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label-->
+        <!--label for="field">{{ $t('social_issue.label') }}</label
+        -->
         <VueMultiselect
-            name="selectIssues"
+           name="field"
-            v-model="selected"
+           :close-on-select="false"
-            track-by="id"
+           :allow-empty="true" 
-            label="text"
+           :show-labels="false" 
-            :placeholder="$t('social_issue.label')"
+           track-by="id"
-            :multiple="true"
+           label="text"
-            :searchable="true"
+           :multiple="true"
-            :close-on-select="false"
+           :searchable="false"
-            :allow-empty="true" 
+           :placeholder="$t('social_issue.label')"
-            :show-labels="false" 
+           @update:model-value="updateSocialIssues"
-            :options="options">
+           :model-value="value"
+           :options="options">
         </VueMultiselect>
      </div>
      
@@ -23,38 +25,56 @@
 </template>
 
 <script>
-import VueMultiselect from 'vue-multiselect'
+import VueMultiselect from 'vue-multiselect';
-import { getSocialIssues } from '../api'
+import { getSocialIssues } from '../api';
+import { mapState } from 'vuex';
 
 export default {
    name: "SocialIssue",
    components: { VueMultiselect },
-   data () {
+   data() {
       return {
-         selected: null,
          options: []
       }
    },
    computed: {
+      ...mapState({
+         value: state => state.accompanyingCourse.socialIssues,
+      }),
    },
    mounted() {
       this.getOptions();
    },
    methods: {
       getOptions() {
-         getSocialIssues().then(socialIssues => new Promise((resolve, reject) => {
+         getSocialIssues().then(elements => new Promise((resolve, reject) => {
-            console.log('socialIssues', socialIssues);
+            console.log('get socialIssues', elements.results);
-            this.options = socialIssues.results; 
+            this.options = elements.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('@@@ CHANGED', method, changed.text);
+         let payload = updated;
+         return { payload, body, method };
+      }
    }
 }
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
-<style lang="scss" scoped>
+<style lang="scss">
-   div.vue-component > div {
+   span.multiselect__tag {
-      //margin: 3em;
+      background: #e2793d;
    }
 </style>

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

@@ -39,6 +39,7 @@ const appMessages = {
          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",
@@ -57,7 +58,10 @@ const appMessages = {
          label: "Choisir les problématiques sociales",
       },
       referrer: {
-         title: "Référent",
+         title: "Référent du parcours",
+         label: "Vous pouvez choisir un TMS ou vous assigner directement comme référent",
+         assign_me: "M'assigner comme référent",
+         placeholder: "Choisir un TMS",
       },
       resources: {
          title: "Interlocuteurs privilégiés",
@@ -69,7 +73,8 @@ const appMessages = {
       comment: {
          title: "Observations",
          label: "Ajout d'une note",
-         content: "Rédigez une première note..."
+         content: "Rédigez une première note...",
+         created_by: "créé par {0}, le {1}" 
       },
       confirm: {
          title: "Confirmation",

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

@@ -5,7 +5,8 @@ import { getAccompanyingCourse,
    confirmAccompanyingCourse,
    postParticipation, 
    postRequestor,
-   postResource } from '../api';
+   postResource,
+   postSocialIssue } from '../api';
 
 const debug = process.env.NODE_ENV !== 'production';
 const id = window.accompanyingCourseId;
@@ -74,9 +75,12 @@ let initPromise = getAccompanyingCourse(id)
                state.accompanyingCourse.confidential = value;
             },
             postFirstComment(state, comment) {
-               console.log('### mutation: postFirstComment', 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;
@@ -145,7 +149,7 @@ let initPromise = getAccompanyingCourse(id)
                })).catch((error) => { commit('catchError', error) });
             },
             toggleIntensity({ commit }, payload) {
-               console.log(payload);
+               //console.log(payload);
                patchAccompanyingCourse(id, { type: "accompanying_period", intensity: payload })
                .then(course => new Promise((resolve, reject) => {
                   commit('toggleIntensity', course.intensity);
@@ -167,16 +171,24 @@ let initPromise = getAccompanyingCourse(id)
                })).catch((error) => { commit('catchError', error) });
             },
             postFirstComment({ commit }, payload) {
-               console.log('## action: postFirstComment: payload', 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');
+               //console.log('## action: confirmAccompanyingCourse');
                confirmAccompanyingCourse(id)
                .then(response => new Promise((resolve, reject) => {
                   commit('confirmAccompanyingCourse', response);