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

<template>
    <div class="accompanying-course-work">
        <div class="alert alert-light">
            {{ $t("my_evaluations.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("max_date") }}
                </th>
                <th scope="col">
                    {{ $t("evaluation") }}
                </th>
                <th scope="col">
                    {{ $t("SocialAction") }}
                </th>
                <th scope="col" />
            </template>
            <template #tbody>
                <tr
                    v-for="(e, i) in evaluations.results"
                    :key="`evaluation-${i}`"
                >
                    <td>{{ $d(e.maxDate.datetime, "short") }}</td>
                    <td>
                        {{ localizeString(e.evaluation.title) }}
                    </td>
                    <td>
                        <span class="chill-entity entity-social-issue">
                            <span class="badge bg-chill-l-gray text-dark">
                                {{
                                    e.accompanyingPeriodWork.socialAction.issue
                                        .text
                                }}
                            </span>
                        </span>
                        <h4 class="badge-title">
                            <span class="title_label" />
                            <span class="title_action">
                                {{ e.accompanyingPeriodWork.socialAction.text }}
                            </span>
                        </h4>
                        <span
                            v-for="person in e.accompanyingPeriodWork.persons"
                            class="me-1"
                            :key="person.id"
                        >
                            <on-the-fly
                                :type="person.type"
                                :id="person.id"
                                :button-text="person.textAge"
                                :display-badge="'true' === 'true'"
                                action="show"
                            />
                        </span>
                    </td>
                    <td>
                        <div
                            class="btn-group-vertical"
                            role="group"
                            aria-label="Actions"
                        >
                            <a class="btn btn-sm btn-show" :href="getUrl(e)">
                                {{
                                    $t("show_entity", {
                                        entity: $t("the_evaluation"),
                                    })
                                }}
                            </a>
                            <a
                                class="btn btn-sm btn-show"
                                :href="
                                    getUrl(
                                        e.accompanyingPeriodWork
                                            .accompanyingPeriod,
                                    )
                                "
                            >
                                {{
                                    $t("show_entity", {
                                        entity: $t("the_course"),
                                    })
                                }}
                            </a>
                        </div>
                    </td>
                </tr>
            </template>
        </tab-table>
    </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
import { localizeString } from "../../lib/localizationHelper/localizationHelper";

export default {
    name: "MyEvaluations",
    components: {
        TabTable,
        OnTheFly,
    },
    computed: {
        ...mapState(["evaluations"]),
        ...mapGetters(["isEvaluationsLoaded"]),
        noResults() {
            if (!this.isEvaluationsLoaded) {
                return false;
            } else {
                return this.evaluations.count === 0;
            }
        },
    },
    methods: {
        localizeString,
        getUrl(e) {
            switch (e.type) {
                case "accompanying_period_work_evaluation":
                    let anchor = "#evaluations";
                    return `/fr/person/accompanying-period/work/${e.accompanyingPeriodWork.id}/edit${anchor}`;
                case "accompanying_period_work":
                    return `/fr/person/accompanying-period/work/${e.id}/edit`;
                case "accompanying_period":
                    return `/fr/parcours/${e.id}`;
                default:
                    throw "entity type unknown";
            }
        },
    },
};
</script>

<style scoped></style>