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

<template>
  <div class="accompanying-course-work">
    <div class="alert alert-light">
      {{ trans(MY_EVALUATIONS_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(MAX_DATE) }}
        </th>
        <th scope="col">
          {{ trans(EVALUATION) }}
        </th>
        <th scope="col">
          {{ trans(SOCIAL_ACTION) }}
        </th>
        <th scope="col" />
      </template>
      <template #tbody>
        <tr v-for="(e, i) in evaluations.results" :key="`evaluation-${i}`">
          <td>
            {{ e.maxDate ? localizeDateTimeFormat(e.maxDate, "short") : "" }}
          </td>
          <td>
            {{ localizeString(e.evaluation?.title ?? null) }}
          </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)">
                {{
                  trans(SHOW_ENTITY, {
                    entity: trans(THE_EVALUATION),
                  })
                }}
              </a>
              <a
                class="btn btn-sm btn-show"
                :href="getUrl(e.accompanyingPeriodWork.accompanyingPeriod!)"
                v-if="
                  e.accompanyingPeriodWork &&
                  e.accompanyingPeriodWork.accompanyingPeriod
                "
              >
                {{
                  trans(SHOW_ENTITY, {
                    entity: trans(THE_COURSE),
                  })
                }}
              </a>
            </div>
          </td>
        </tr>
      </template>
    </tab-table>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useStore } from "vuex";
import TabTable from "./TabTable.vue";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
import { localizeString } from "../../lib/localizationHelper/localizationHelper";

const store = useStore();

import type { ComputedRef } from "vue";
import {
  AccompanyingPeriod,
  AccompanyingPeriodWorkEvaluation,
  AccompanyingPeriodWork,
} from "ChillPersonAssets/types";
import { PaginationResponse } from "ChillMainAssets/lib/api/apiMethods";
import {
  MY_EVALUATIONS_DESCRIPTION,
  MAX_DATE,
  EVALUATION,
  SHOW_ENTITY,
  THE_COURSE,
  THE_EVALUATION,
  SOCIAL_ACTION,
  NO_DATA,
  trans,
} from "translator";
import { localizeDateTimeFormat } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

const evaluations: ComputedRef<
  PaginationResponse<AccompanyingPeriodWorkEvaluation>
> = computed(() => store.state.homepage.evaluations);
const isEvaluationsLoaded = computed(() => store.getters.isEvaluationsLoaded);

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

function getUrl(
  e:
    | AccompanyingPeriodWorkEvaluation
    | AccompanyingPeriod
    | AccompanyingPeriodWork,
): string {
  if (!e) {
    throw "entity is undefined";
  }

  if ("type" in e && typeof e.type === "string") {
    switch (e.type) {
      case "accompanying_period_work_evaluation":
        return `/fr/person/accompanying-period/work/${e.accompanyingPeriodWork?.id}/edit#evaluations`;
      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";
    }
  }
  return "";
}
</script>

<style scoped></style>