Display data for Usagers concernés & Resources

139 Demandeur

See merge request Chill-Projet/chill-bundles!43

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;
-  padding-bottom: 1em;
-
+  h1 {
+    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/DataFixtures/ORM/LoadSocialActions.php

@@ -37,32 +37,32 @@ class LoadSocialActions extends AbstractFixture implements OrderedFixtureInterfa
         return 10020;
     }
 
-    public static $socialActions = array(
-        'social_action_info_conseil' => array(
-            'title' => array(
+    public static $socialActions = [
+        'social_action_info_conseil' => [
+            'title' => [
                 'fr' => 'Informer, conseiller'
-            ),
+            ],
             'issue' => 'social_issue_prev_prot'
-        ),
-        'social_action_instruire' => array(
-            'title' => array(
+        ],
+        'social_action_instruire' => [
+            'title' => [
                 'fr' => 'Instruire l\'imprime unique pour des impayés'
-            ),
+            ],
             'issue' => 'social_issue_prev_prot'
-        ),
-        'social_action_MASP' => array(
-            'title' => array(
+        ],
+        'social_action_MASP' => [
+            'title' => [
                 'fr' => 'MASP'
-            ),
+            ],
             'issue' => 'social_issue_diff_fin'
-        ),
-        'social_action_protection_enfant' => array(
-            'title' => array(
+        ],
+        'social_action_protection_enfant' => [
+            'title' => [
                 'fr' => 'Protection Enfant confié dans le cadre judiciaire'
-            ),
+            ],
             'issue' => 'social_issue_enfant_protection'
-        ),
-    );
+        ],
+    ];
 
     public function load(ObjectManager $manager)
     {

src/Bundle/ChillPersonBundle/DataFixtures/ORM/LoadSocialGoals.php

@@ -38,20 +38,20 @@ class LoadSocialGoals extends AbstractFixture implements OrderedFixtureInterface
         return 10030;
     }
 
-    public static $socialGoals = array(
-        'social_goal_instuire_dossier' => array(
-            'title' => array(
+    public static $socialGoals = [
+        'social_goal_instuire_dossier' => [
+            'title' => [
                 'fr' => 'Instruire le dossier de surendettement'
-            ),
+            ],
             'action' => 'social_action_MASP'
-        ),
-        'social_goal_proteger' => array(
-            'title' => array(
+        ],
+        'social_goal_proteger' => [
+            'title' => [
                 'fr' => 'Protéger via une assistance educative placement'
-            ),
+            ],
             'action' => 'social_action_protection_enfant'
-        ),
-    );
+        ],
+    ];
 
     public function load(ObjectManager $manager)
     {

src/Bundle/ChillPersonBundle/DataFixtures/ORM/LoadSocialIssues.php

@@ -37,36 +37,36 @@ class LoadSocialIssues extends AbstractFixture implements OrderedFixtureInterfac
         return 10010;
     }
 
-    public static $socialIssues = array(
-        'social_issue_diff_fin_or_admin' => array(
-            'title' => array(
+    public static $socialIssues = [
+        'social_issue_diff_fin_or_admin' => [
+            'title' => [
                 'fr' => 'ADULTE - DIFFICULTES FINANCIERES ET/OU ADMINISTRATIVES'
-            )
-        ),
-        'social_issue_prev_prot' => array(
-            'title' => array(
+            ]
+        ],
+        'social_issue_prev_prot' => [
+            'title' => [
                 'fr' => 'ADULTE PREVENTION/PROTECTION'
-            ),
+            ],
             'parent' => 'social_issue_diff_fin_or_admin'
-        ),
-        'social_issue_diff_fin' => array(
-            'title' => array(
+        ],
+        'social_issue_diff_fin' => [
+            'title' => [
                 'fr' => 'Difficulté financière'
-            ),
+            ],
             'parent' => 'social_issue_diff_fin_or_admin'
-        ),
-        'social_issue_enfant_famille' => array(
-            'title' => array(
+        ],
+        'social_issue_enfant_famille' => [
+            'title' => [
                 'fr' => 'Enfant / famille'
-            )
-        ),
-        'social_issue_enfant_protection' => array(
-            'title' => array(
+            ]
+        ],
+        'social_issue_enfant_protection' => [
+            'title' => [
                 'fr' => 'enfant - protection'
-            ),
+            ],
             'parent' => 'social_issue_enfant_famille'
-        ),
-    );
+        ],
+    ];
 
     public function load(ObjectManager $manager)
     {

src/Bundle/ChillPersonBundle/DataFixtures/ORM/LoadSocialResults.php

@@ -38,34 +38,34 @@ class LoadSocialResults extends AbstractFixture implements OrderedFixtureInterfa
         return 10040;
     }
 
-    public static $socialResults = array(
-        'social_result_FSL_acces' => array(
-            'title' => array(
+    public static $socialResults = [
+        'social_result_FSL_acces' => [
+            'title' => [
                 'fr' => 'FSL - accès cautionnement'
-            ),
+            ],
             'action' => 'social_action_instruire'
-        ),
-        'social_result_FSL_maintien' => array(
-            'title' => array(
+        ],
+        'social_result_FSL_maintien' => [
+            'title' => [
                 'fr' => 'FSL maintien - impayés de loyer'
-            ),
+            ],
             'action' => 'social_action_MASP'
-        ),
-        'social_result_soutien_parental' => array(
-            'title' => array(
+        ],
+        'social_result_soutien_parental' => [
+            'title' => [
                 'fr' => 'Soutien parental'
-            ),
+            ],
             // 'action' => 'social_action_protection_enfant', (via le goal)
             'goal' => 'social_goal_proteger'
-        ),
-        'social_result_accompagnement_mineur' => array(
-            'title' => array(
+        ],
+        'social_result_accompagnement_mineur' => [
+            'title' => [
                 'fr' => 'Accompagnement du mineur'
-            ),
+            ],
             // 'action' => 'social_action_protection_enfant', (via le goal)
             'goal' => 'social_goal_proteger',
-        ),
-    );
+        ],
+    ];
 
     public function load(ObjectManager $manager)
     {

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 {
-      margin: 1.5em 0;
-   }
-   div.vue-component {
-      h2 {
-         margin-left: 0.7em;
-         position: relative;
-         &:before {
-            position: absolute;
-            content: "\f192";
-            font-family: "ForkAwesome";
-            color: #718596ab;
-            left: -28px;
-            top: 4px;
+   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: -2em;
+            }
          }
-         a[name^="section"] {
+         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;
-            top: -2em;
+            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 {
          }
       }
-      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">
-            {{ $t('course.step.draft') }}
-         </span>
+         <a href="#bottom">
+            <span class="badge badge-secondary">
+               {{ $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-4">_</div>
-      <div class="grid-4">_</div>
+      <div class="grid-12">
+         <social-issues
+            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

@@ -53,7 +53,10 @@
             </button>
          </li>
       </ul>
-   </div>   
+   </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"
-            v-model="selected"
-            track-by="id"
-            label="text"
-            :placeholder="$t('social_issue.label')"
-            :multiple="true"
-            :searchable="true"
-            :close-on-select="false"
-            :allow-empty="true" 
-            :show-labels="false" 
-            :options="options">
+           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>
      
@@ -23,38 +25,56 @@
 </template>
 
 <script>
-import VueMultiselect from 'vue-multiselect'
-import { getSocialIssues } from '../api'
+import VueMultiselect from 'vue-multiselect';
+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) => {
-            console.log('socialIssues', socialIssues);
-            this.options = socialIssues.results; 
+         getSocialIssues().then(elements => new Promise((resolve, reject) => {
+            console.log('get socialIssues', elements.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>
-   div.vue-component > div {
-      //margin: 3em;
+<style lang="scss">
+   span.multiselect__tag {
+      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,8 +75,11 @@ 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);
@@ -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);

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

@@ -5,24 +5,95 @@
 {% endblock %}
 
 {% block content %}
+    <h1>{{ 'Resume Accompanying Course' | trans }}</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 %}
+    {% 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 %}
 
-  <h1>{{ 'Associated peoples'|trans }}</h1>
+    <div class="vue-component">
+        <h2>{{ 'Associated peoples'|trans }}</h2>
 
-  <h1>{{ 'Resources'|trans }}</h1>
+        {% if accompanyingCourse.participations.count > 0 %}
+            <table class="rounded">
+                <thead>
+                    <tr>
+                        <th class="chill-orange">{{ 'First name' | trans }}</th>
+                        <th class="chill-orange">{{ 'Last name' | trans }}</th>
+                        <th class="chill-orange">{{ 'Start date' | trans }}</th>
+                        <th class="chill-orange">{{ 'End date' | trans }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for participation in accompanyingCourse.participations %}
+                        <tr>
+                            <td>{{ participation.person.firstName }}</td>
+                            <td>{{ participation.person.lastName }}</td>
+                            <td>{{ participation.startDate | format_date('short') }}</td>
+                            <td>{{ participation.endDate | format_date('short') }}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% else %}
+            <div class="grid-8 centered error flash_message">
+                {{  "No Associated peoples recorded" | trans }}
+            </div>
+        {% endif %}
+    </div>
 
-  <h1>{{ 'Social actions'|trans }}</h1>
-  
-  <h1>{{ 'Last events on accompanying course'|trans }}</h1>
+    <div class="vue-component">
+        <h2>{{ 'Resources'|trans }}</h2>
 
+        {% if accompanyingCourse.resources.count > 0 %}
+            <table class="rounded">
+                <thead>
+                    <tr>
+                        <th class="chill-orange">{{ 'First name' | trans }}</th>
+                        <th class="chill-orange">{{ 'Last name' | trans }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for resource in accompanyingCourse.resources %}
+                        <tr>
+                            <td>{{ resource.person.firstName }}</td>
+                            <td>{{ resource.person.lastName }}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% else %}
+            <div class="grid-8 centered alert flash_message">
+                {{  "No resources recorded" | trans }}
+            </div>
+        {% endif %}
+
+    </div>
+
+    <div class="vue-component">
+        <h2>{{ 'Social actions'|trans }}</h2>
+
+        <div class="grid-8 centered notice flash_message">
+            {{  "Not implemented" | trans }}
+        </div>
+    </div>
+
+    <div class="vue-component">
+        <h2>{{ 'Last events on accompanying course'|trans }}</h2>
+
+        <div class="grid-8 centered notice flash_message">
+            {{  "Not implemented" | trans }}
+        </div>
+    </div>
+{% endblock %}
+
+{% block css %}
+   {{ encore_entry_link_tags('accompanying_course') }}
 {% endblock %}