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

<template>
  <div class="accompanying-course-work">
    <div class="alert alert-light">
      {{ trans(MY_WORKS_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(START_DATE) }}
        </th>
        <th scope="col">
          {{ trans(SOCIAL_ACTION) }}
        </th>
        <th scope="col">
          {{ trans(CONCERNED_PERSONS) }}
        </th>
        <th scope="col" />
      </template>
      <template #tbody>
        <tr v-for="(w, i) in works.value.results" :key="`works-${i}`">
          <td>{{ localizeDateTimeFormat(w.startDate.datetime, "short") }}</td>
          <td>
            <span class="chill-entity entity-social-issue">
              <span class="badge bg-chill-l-gray text-dark">
                {{ w.socialAction.issue.text }}
              </span>
            </span>
            <h4 class="badge-title">
              <span class="title_label" />
              <span class="title_action">
                {{ w.socialAction.text }}
              </span>
            </h4>
          </td>
          <td>
            <span v-for="person in w.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-update" :href="getUrl(w)">
                {{
                  trans(SHOW_ENTITY, {
                    entity: trans(THE_ACTION),
                  })
                }}
              </a>
              <a
                class="btn btn-sm btn-show"
                :href="getUrl(w.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 {
  MY_WORKS_DESCRIPTION,
  CONCERNED_PERSONS,
  SHOW_ENTITY,
  THE_COURSE,
  THE_ACTION,
  SOCIAL_ACTION,
  START_DATE,
  NO_DATA,
  trans,
} from "translator";
import { Workflow } from "ChillPersonAssets/types";
import { localizeDateTimeFormat } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

const store = useStore();

const works = computed(() => store.state.homepage.works);
const isWorksLoaded = computed(() => store.getters.isWorksLoaded);

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

function getUrl(e: Workflow): string {
  switch (e.type) {
    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>