From 11a6d0802357035c5b6bcfd1a48070e65940bd28 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 May 2021 18:59:43 +0200
Subject: [PATCH] add reactives social issues in banner

---
 .../public/vuejs/AccompanyingCourse/App.vue      | 15 +++++++--------
 .../AccompanyingCourse/components/Banner.vue     | 14 ++++++++++----
 .../components/Banner/SocialIssues.vue           | 16 ++++++++++++++++
 3 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssues.vue

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 2595ab552..d0db1206a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -28,15 +28,14 @@ import Confirm from './components/Confirm.vue';
 export default {
    name: 'App',
    components: { 
-      //Banner,
-      //StickyNav,
-      //PersonsAssociated, 
-      //Requestor,
+      Banner,
+      PersonsAssociated, 
+      Requestor,
       SocialIssue,
-      //Referrer, // fait foirer socialissues
-      //Resources,
-      //Comment,
-      //Confirm,
+      //Referrer,  //fait foirer socialissues
+      Resources,
+      Comment,
+      Confirm,
    },
    computed: mapState([
       'accompanyingCourse', 'socialIssueOptions'
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
index e81ac647a..b31e226ba 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
@@ -45,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 SocialIssues from './Banner/SocialIssues.vue';
 
 export default {
    name: 'Banner',
    components: {
-      ToggleFlags
+      ToggleFlags,
+      SocialIssues
    },
    computed: {
       accompanyingCourse() {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssues.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssues.vue
new file mode 100644
index 000000000..489fed0e5
--- /dev/null
+++ b/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">
+span.badge {
+   margin-right: 1em;
+}
+</style>