render table results for works tab

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>