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 v-slot:thead>
         <th scope="col">{{ $t('max_date') }}</th>
         <th scope="col">{{ $t('evaluation') }}</th>
         <th scope="col">{{ $t('SocialAction') }}</th>
         <th scope="col"></th>
      </template>
      <template v-slot:tbody>
         <tr v-for="(e, i) in evaluations.results" :key="`evaluation-${i}`">
            <td>{{ $d(e.maxDate.datetime, 'short') }}</td>
            <td>
               {{ e.evaluation.title.fr }}
            </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>
                  <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"
                     :buttonText="person.textAge"
                     :displayBadge="'true' === 'true'"
                     action="show">
                  </on-the-fly>
               </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-update" :href="getUrl(e.accompanyingPeriodWork)">
                     {{ $t('show_entity', { entity: $t('the_action') }) }}
                  </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';

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: {
      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>