bdlg-planner-front/src/components/EvenementDataTable.vue

<template>
  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Modifié le</th>
        <th>Par</th>
        <th>Charger</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="version in versions" :key="version.id">
        <td>{{ version.name }}</td>
        <td>{{ formatDate(version.lastModified) }}</td>
        <td>{{ version.lastEditor.username }}</td>
        <td>
          <button class="btn icon small primary" @click="loadPreviousVersion(version.id)">
            <i class="material-icons">launch</i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts">
import EvenementVersion from "@/models/EvenementVersion";
import dayjs from "dayjs";
import { defineComponent, PropType } from "vue";

export default defineComponent({
  emits: ["loadVersion"],
  props: {
    versions: { type: Array as PropType<Array<EvenementVersion>>, default: () => [] },
  },
  methods: {
    formatDate(str: string): string {
      return dayjs(str).format("DD MMM YYYY à HH[h]mm");
    },
    loadPreviousVersion(id: number) {
      const version = this.versions.find((o) => o.id == id);
      if (version) {
        this.$emit("loadVersion", version);
      }
    },
  },
});
</script>

<style scoped>
table {
  border-collapse: collapse;
}
table > thead > tr > th {
  padding: 8px;
  width: 190px;
  text-overflow: ellipsis;
}
table > thead > tr > th:last-child {
  width: 50px;
}
table > tbody > tr > td {
  text-align: center;
  padding: 8px;
}
table > thead > tr,
table > tbody > tr {
  border-bottom: solid 1px var(--color-neutral-800);
}
table > tbody > tr:hover {
  background: var(--color-neutral-800);
}
</style>