chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue

<template>
   <div class="alert alert-light">{{ $t('my_accompanying_courses.description') }}</div>
   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
   <tab-table v-else>
      <template v-slot:thead>
         <th scope="col">id</th>
         <th scope="col">Ouvert le</th>
         <th scope="col">Usagers concernés</th>
         <th scope="col"></th>
      </template>
      <template v-slot:tbody>
         <tr v-for="(c, i) in accompanyingCourses.results" :key="`course-${i}`">
            <td>{{ c.id}}</td>
            <td>{{ $d(c.openingDate.datetime, 'long') }}</td>
            <td>{{ c.participations.length }}</td>
            <td>
               <a class="btn btn-sm btn-show" :href="getUrl(c)">
                  {{ $t('show_entity', { entity: $t('the_course') }) }}
               </a>
            </td>
         </tr>
      </template>
   </tab-table>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";

export default {
   name: "MyAccompanyingCourses",
   components: {
      TabTable
   },
   computed: {
      ...mapState([
         'accompanyingCourses',
      ]),
      ...mapGetters([
         'isAccompanyingCoursesLoaded',
      ]),
      noResults() {
         if (!this.isAccompanyingCoursesLoaded) {
            return false;
         } else {
            return this.accompanyingCourses.count === 0;
         }
      },
   },
   methods: {
      getUrl(c) {
         return `/fr/parcours/${c.id}`
      }
   }
}
</script>

<style scoped>

</style>