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

73 lines
1.7 KiB
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>