74 lines
1.7 KiB
Vue
74 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>
|