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

<template>
  <div class="alert alert-light">
    {{ trans(MY_ACCOMPANYING_COURSES_DESCRIPTION) }}
  </div>
  <span v-if="noResults" class="chill-no-data-statement">
    {{ trans(NO_DATA) }}
  </span>
  <tab-table v-else>
    <template #thead>
      <th scope="col">
        {{ trans(OPENING_DATE) }}
      </th>
      <th scope="col">
        {{ trans(SOCIAL_ISSUES) }}
      </th>
      <th scope="col">
        {{ trans(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(new Date(c.openingDate.datetime), "short") }}</td>
        <td>
          <span
            v-for="(issue, index) in c.socialIssues"
            :key="index"
            class="chill-entity entity-social-issue"
          >
            <span class="badge bg-chill-l-gray text-dark">
              {{ localizeString(issue.title) }}
            </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">{{
            trans(EMERGENCY)
          }}</span>
          <span v-if="c.confidential" class="badge rounded-pill bg-danger">{{
            trans(CONFIDENTIAL)
          }}</span>
        </td>
        <td>
          <a class="btn btn-sm btn-show" :href="getUrl(c)">
            {{ trans(SHOW_ENTITY, { entity: trans(THE_COURSE) }) }}
          </a>
        </td>
      </tr>
    </template>
  </tab-table>
</template>

<script lang="ts" setup>
import { computed, ComputedRef } from "vue";
import { useStore } from "vuex";
import TabTable from "./TabTable.vue";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
import { AccompanyingCourse } from "ChillPersonAssets/types";
import { PaginationResponse } from "ChillMainAssets/lib/api/apiMethods";
import {
  MY_ACCOMPANYING_COURSES_DESCRIPTION,
  OPENING_DATE,
  SOCIAL_ISSUES,
  CONCERNED_PERSONS,
  SHOW_ENTITY,
  THE_COURSE,
  NO_DATA,
  EMERGENCY,
  CONFIDENTIAL,
  trans,
} from "translator";
const store = useStore();

const accompanyingCourses: ComputedRef<PaginationResponse<AccompanyingCourse>> =
  computed(() => store.state.homepage.accompanyingCourses);
const isAccompanyingCoursesLoaded = computed(
  () => store.getters.isAccompanyingCoursesLoaded,
);

const noResults = computed(() => {
  if (!isAccompanyingCoursesLoaded.value) {
    return false;
  } else {
    return accompanyingCourses.value.count === 0;
  }
});

function getUrl(c: { id: number }): string {
  return `/fr/parcours/${c.id}`;
}
</script>

<style scoped>
span.badge.rounded-pill.bg-danger {
  text-transform: uppercase;
}
</style>