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

<template>
   <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"></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>
               <a class="btn btn-sm btn-show" :href="getUrl(e)">
                  {{ $t('show_entity', { entity: $t('the_evaluation') }) }}
               </a>
            </td>
         </tr>
      </template>
   </tab-table>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";

export default {
   name: "MyEvaluations",
   components: {
      TabTable
   },
   computed: {
      ...mapState([
         'evaluations',
      ]),
      ...mapGetters([
         'isEvaluationsLoaded',
      ]),
      noResults() {
         if (!this.isEvaluationsLoaded) {
            return false;
         } else {
            return this.evaluations.count === 0;
         }
      }
   },
   methods: {
      getUrl(e) {
         let anchor = '#evaluations';
         return `/fr/person/accompanying-period/work/${e.id}/edit${anchor}`
      }
   },
}
</script>

<style scoped>

</style>