pleshevski.ru/docs/.vuepress/modules/work/ChronologicalWorksTable/ChronologicalWorksTable.vue

<script lang="ts">
function date2num(date: Date | undefined): number {
  return date?.valueOf() ?? Infinity;
}

export default {
  name: "WorksPage",
  computed: {
    tableTheme() {
      return this.$themeLocale.worksTable ?? {};
    },
  },
};
</script>

<script lang="ts" setup>
import { CHRONOLOGICAL_WORKS } from "../data.ts";
import { renderDate } from "../../../global.ts";
import { work as w } from "../domain";
import { computed } from "vue";

const works = computed(() =>
  CHRONOLOGICAL_WORKS.concat().sort(
    (a, b) =>
      date2num(b.endDate) - date2num(a.endDate) ||
      date2num(b.startDate) - date2num(a.startDate),
  ),
);
</script>

<template>
  <table>
    <thead>
      <tr>
        <th>{{ tableTheme.name }}</th>
        <th>{{ tableTheme.description }}</th>
        <th>{{ tableTheme.role }}</th>
        <th>{{ tableTheme.technologies }}</th>
        <th>{{ tableTheme.status }}</th>
        <th>{{ tableTheme.dates }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="work in works">
        <td>
          <a rel="nofollow noopener" :href="w.getExternalLink(work)">
            {{ work.name }}
          </a>
        </td>
        <td>{{ work.description }}</td>
        <td v-html="work.roles.join(', ')"></td>
        <td>{{ work.technologies.join(", ") }}</td>
        <td>{{ work.status }}</td>
        <td>
          <div>
            <small :class="{ grey: work.endDate }">
              {{ renderDate(work.startDate) }}
            </small>
          </div>
          <div v-if="work.endDate">
            <small>{{ renderDate(work.endDate) }}</small>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="css">
.grey {
  color: rgba(0, 0, 0, 0.4);
}
</style>