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">
                            {{ localizeString(i.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"
                        >{{ $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";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

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: {
        localizeString,
        getUrl(c) {
            return `/fr/parcours/${c.id}`;
        },
    },
};
</script>

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