Display of social issues with parent issue and with badge

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to
 * [main]: filter location and locationType in backend: exclude NULL names, only active and availableToUsers
 * [activity]: perform client-side validation & show/hide fields in the "new location" modal
 * [admin]: links to activity admin section added again.
+* [socialWorkAction]: display of social issue and parent issues + banner context added. 
 
 ## Test releases
 

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

@@ -9,7 +9,7 @@
       <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
 
       <div v-for="si in socialIssues">
-        <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"> {{ si.title.fr }}
+        <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
       </div>
 
       <div v-if="hasSocialIssuePicked">
@@ -222,3 +222,16 @@ export default {
 }
 
 </script>
+
+<style lang="scss" scoped>
+@import 'ChillMainAssets/module/bootstrap/shared';
+@import 'ChillPersonAssets/chill/scss/mixins';
+@import 'ChillMainAssets/chill/scss/chill_variables';
+span.badge {
+   @include badge_social($social-issue-color);
+   font-size: 95%;
+   margin-bottom: 5px;
+   margin-right: 1em;
+   margin-left: 1em;
+}
+</style>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/create.html.twig

@@ -18,6 +18,7 @@
     window.accompanyingCourse = {{ json|json_encode|raw }};
   </script>
 
+  {{ parent() }}
   {{ encore_entry_script_tags('vue_accourse_work_create') }}
 {% endblock %}