change chronology table

This commit is contained in:
Dmitriy Pleshevskiy 2024-07-25 15:23:02 +03:00
parent 7a393c6c2d
commit 0322d162d0
Signed by: pleshevskiy
GPG key ID: 17041163DA10A9A2
3 changed files with 34 additions and 26 deletions

View file

@ -43,8 +43,8 @@ export default defineUserConfig({
description: "Описание", description: "Описание",
role: "Роль", role: "Роль",
technologies: "Технологии", technologies: "Технологии",
start: "Начало", status: "Статус",
statusOrEnd: "Статус/Окончание", dates: "Даты",
}, },
}, },
"/eng/": { "/eng/": {
@ -64,8 +64,8 @@ export default defineUserConfig({
description: "Description", description: "Description",
role: "Role", role: "Role",
technologies: "Technologies", technologies: "Technologies",
start: "Start", status: "Status",
statusOrEnd: "Status/End", dates: "Dates",
}, },
}, },
}, },

View file

@ -1,21 +1,20 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'WorksPage', name: "WorksPage",
computed: { computed: {
tableTheme() { tableTheme() {
return this.$themeLocale.worksTable ?? {}; return this.$themeLocale.worksTable ?? {};
}, },
}, },
} };
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { CHRONOLOGICAL_WORKS } from '../data.ts' import { CHRONOLOGICAL_WORKS } from "../data.ts";
import { renderDate } from '../../../global.ts' import { renderDate } from "../../../global.ts";
import { work as w } from '../domain' import { work as w } from "../domain";
</script> </script>
<template> <template>
<table> <table>
<thead> <thead>
@ -24,21 +23,37 @@ import { work as w } from '../domain'
<th>{{ tableTheme.description }}</th> <th>{{ tableTheme.description }}</th>
<th>{{ tableTheme.role }}</th> <th>{{ tableTheme.role }}</th>
<th>{{ tableTheme.technologies }}</th> <th>{{ tableTheme.technologies }}</th>
<th>{{ tableTheme.start }}</th> <th>{{ tableTheme.status }}</th>
<th>{{ tableTheme.statusOrEnd }}</th> <th>{{ tableTheme.dates }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="work in CHRONOLOGICAL_WORKS"> <tr v-for="work in CHRONOLOGICAL_WORKS">
<td><a rel="nofollow noopener" :href="w.getExternalLink(work)">{{ work.name }}</a></td> <td>
<a rel="nofollow noopener" :href="w.getExternalLink(work)">{{
work.name
}}</a>
</td>
<td>{{ work.description }}</td> <td>{{ work.description }}</td>
<td v-html="work.roles.join(', ')"></td> <td v-html="work.roles.join(', ')"></td>
<td>{{ work.technologies.join(', ') }}</td> <td>{{ work.technologies.join(", ") }}</td>
<td>{{ renderDate(work.startDate) }}</td> <td>{{ work.status }}</td>
<td>{{ work.endDate ? renderDate(work.endDate) : 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> </tr>
</tbody> </tbody>
</table> </table>
</template> </template>
<style lang="css">
.grey {
color: rgba(0,0,0,0.4);
}
</style>

View file

@ -1,7 +0,0 @@
import { NonEmptyArray } from "../../../global.ts";
import { Technology } from "../domain/mod.ts";
import { AnyNode, TextNode } from "ren/node.ts";
export const TechnologyList: (techs: NonEmptyArray<Technology>) => AnyNode = (
techs,
) => new TextNode(techs.join(", "));