45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
|
<script lang="ts">
|
||
|
|
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'
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>{{ tableTheme.name }}</th>
|
||
|
|
<th>{{ tableTheme.description }}</th>
|
||
|
|
<th>{{ tableTheme.role }}</th>
|
||
|
|
<th>{{ tableTheme.technologies }}</th>
|
||
|
|
<th>{{ tableTheme.start }}</th>
|
||
|
|
<th>{{ tableTheme.statusOrEnd }}</th>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="work in CHRONOLOGICAL_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>{{ renderDate(work.startDate) }}</td>
|
||
|
|
<td>{{ work.endDate ? renderDate(work.endDate) : work.status }}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</template>
|
||
|
|
|