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">{{ $t('opening_date') }}</th>
         <th scope="col">{{ $t('social_issues') }}</th>
         <th scope="col">{{ $t('concerned_persons') }}</th>
         <th scope="col"></th>
         <th scope="col"></th>
      </template>
      <template v-slot:tbody>
         <tr v-for="(c, i) in accompanyingCourses.results" :key="`course-${i}`">
            <td>{{ $d(c.openingDate.datetime, 'short') }}</td>
            <td>
               <span v-for="i in c.socialIssues"
                  class="chill-entity entity-social-issue">
                  <span class="badge bg-chill-l-gray text-dark">
                     {{ i.title.fr }}
                  </span>
               </span>
            </td>
            <td>
               <span v-for="p in c.participations" class="me-1" :key="p.person.id">
                  <on-the-fly
                     :type="p.person.type"
                     :id="p.person.id"
                     :buttonText="p.person.textAge"
                     :displayBadge="'true' === 'true'"
                     action="show">
                  </on-the-fly>
               </span>
            </td>
            <td>
               <span v-if="c.emergency" class="badge rounded-pill bg-danger me-1">{{ $t('emergency') }}</span>
               <span v-if="c.confidential" class="badge rounded-pill bg-danger">{{ $t('confidential') }}</span>
            </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";
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';

export default {
   name: "MyAccompanyingCourses",
   components: {
      TabTable,
      OnTheFly,
   },
   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>
span.badge.rounded-pill.bg-danger {
   text-transform: uppercase;
}
</style>