render table results for works tab

src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss

@@ -34,6 +34,8 @@ p.date-label {
    font-size: 18pt;
 }
 div.dashboard,
+h4.badge-title,
+h3.badge-title,
 h2.badge-title {
    ul.list-content {
       font-size: 70%;

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue

@@ -1,17 +1,41 @@
 <template>
+<div class="accompanying_course_work">
    <h3>{{ $t('my_works.title') }}</h3>
    <tab-table>
       <template v-slot:thead>
+         <th scope="col">#</th>
+         <th scope="col">{{ $t('StartDate') }}</th>
+         <th scope="col">{{ $t('SocialAction') }}</th>
+         <th scope="col"></th>
       </template>
       <template v-slot:tbody>
-         <tr></tr>
+         <tr v-for="(w, i) in works.results" :key="`works-${i}`">
+            <th scope="row">{{ i+1 }}</th>
+            <td>{{ $d(w.startDate.datetime, 'short') }}</td>
+            <td>
+               <h4 class="badge-title">
+                  <span class="title_label"></span>
+                  <span class="title_action">
+                     {{ w.socialAction.text }}
+                  </span>
+               </h4>
+            </td>
+            <td>
+               <a class="btn btn-sm btn-update"
+                  :href="linkEntity(w)">
+                  {{ $t('show_entity', { entity: getEntityName(w) }) }}
+               </a>
+            </td>
+         </tr>
       </template>
    </tab-table>
+</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from "vuex";
 import TabTable from "./TabTable";
+import { appMessages } from 'ChillMainAssets/vuejs/HomepageWidget/js/i18n';
 
 export default {
    name: "MyWorks",
@@ -26,6 +50,24 @@ export default {
          'isWorksLoaded',
       ])
    },
+   methods: {
+      getEntityName(w) {
+         switch (w.type) {
+            case 'accompanying_period_work':
+               return appMessages.fr.the_action;
+            default:
+               throw 'work type unknown';
+         }
+      },
+      linkEntity(w) {
+         switch (w.type) {
+            case 'accompanying_period_work':
+               return `/fr/person/accompanying-period/work/${w.id}/edit`
+            default:
+               throw 'work type unknown';
+         }
+      }
+   },
 }
 </script>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js

@@ -26,7 +26,12 @@ const appMessages = {
         Entity: "Associé à",
         show_entity: "Voir {entity}",
         the_activity: "l'échange",
-        the_course: "le parcours"
+        the_course: "le parcours",
+        the_action: "l'action",
+        StartDate: "Date d'ouverture",
+        SocialAction: "Action d'accompagnement",
+
+
     }
 };
 

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss

@@ -80,6 +80,8 @@ div.dashboard {
     }
 }
 div.dashboard,
+h4.badge-title,
+h3.badge-title,
 h2.badge-title {
     display: flex;
     flex-direction: row;
@@ -128,6 +130,8 @@ ul.columns { // XS:1  SM:2  MD:1  LG:2  XL:2  XXL:2
 /// dashboard_like_badge in AccompanyingCourse Work list Page
 div[class*='accompanying_course_work'] {
     div.dashboard,
+    h4.badge-title,
+    h3.badge-title,
     h2.badge-title {
         span.title_label {
             // Calculate same color then border:groove
@@ -143,6 +147,8 @@ div[class*='accompanying_course_work'] {
 /// dashboard_like_badge in Activities on resume page
 div[class*='activity-'] {
     div.dashboard,
+    h4.badge-title,
+    h3.badge-title,
     h2.badge-title {
         span.title_label {
             // Calculate same color then border:groove