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 #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 scope="col" />
    </template>
    <template #tbody>
      <tr
        v-for="(c, i) in accompanyingCourses.results"
        :key="`course-${i}`"
      >
        <td>{{ $d(c.openingDate.datetime, 'short') }}</td>
        <td>
          <span
            v-for="(i, index) in c.socialIssues"
            :key="index"
            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"
              :button-text="p.person.textAge"
              :display-badge="'true' === 'true'"
              action="show"
            />
          </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>