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

74 lines
1.7 KiB
Vue
Raw Normal View History

2024-07-24 17:15:05 +03:00
<script lang="ts">
2024-07-25 17:48:30 +03:00
function date2num(date: Date | undefined): number {
return date?.valueOf() ?? Infinity;
}
2024-07-24 17:15:05 +03:00
export default {
2024-07-25 15:23:02 +03:00
name: "WorksPage",
2024-07-24 17:15:05 +03:00
computed: {
tableTheme() {
return this.$themeLocale.worksTable ?? {};
},
},
2024-07-25 15:23:02 +03:00
};
2024-07-24 17:15:05 +03:00
</script>
<script lang="ts" setup>
2024-07-25 15:23:02 +03:00
import { CHRONOLOGICAL_WORKS } from "../data.ts";
import { renderDate } from "../../../global.ts";
import { work as w } from "../domain";
2024-07-25 17:48:30 +03:00
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),
),
);
2024-07-24 17:15:05 +03:00
</script>
<template>
<table>
<thead>
<tr>
<th>{{ tableTheme.name }}</th>
<th>{{ tableTheme.description }}</th>
<th>{{ tableTheme.role }}</th>
<th>{{ tableTheme.technologies }}</th>
2024-07-25 15:23:02 +03:00
<th>{{ tableTheme.status }}</th>
<th>{{ tableTheme.dates }}</th>
2024-07-24 17:15:05 +03:00
</tr>
</thead>
<tbody>
2024-07-25 17:48:30 +03:00
<tr v-for="work in works">
2024-07-25 15:23:02 +03:00
<td>
2024-07-26 00:03:30 +03:00
<a rel="nofollow noopener" :href="w.getExternalLink(work)">
{{ work.name }}
</a>
2024-07-25 15:23:02 +03:00
</td>
<td>{{ work.description }}</td>
<td v-html="work.roles.join(', ')"></td>
<td>{{ work.technologies.join(", ") }}</td>
<td>{{ work.status }}</td>
<td>
<div>
2024-07-25 17:48:30 +03:00
<small :class="{ grey: work.endDate }">
{{ renderDate(work.startDate) }}
</small>
2024-07-25 15:23:02 +03:00
</div>
<div v-if="work.endDate">
<small>{{ renderDate(work.endDate) }}</small>
</div>
</td>
2024-07-24 17:15:05 +03:00
</tr>
</tbody>
</table>
</template>
2024-07-25 15:23:02 +03:00
<style lang="css">
.grey {
2024-07-25 17:48:30 +03:00
color: rgba(0, 0, 0, 0.4);
2024-07-25 15:23:02 +03:00
}
</style>