ChangelogView.vue
2.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template>
<div class="changelog-view">
<div class="bar">
<span>Total: {{ entries.length }} changes</span>
<span class="grow" />
<button class="btn" @click="reload">Refresh</button>
</div>
<table v-if="entries.length">
<thead>
<tr>
<th>When</th>
<th>Kind</th>
<th>Rev</th>
<th>By</th>
<th>Trigger</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr v-for="(e, i) in entries" :key="i">
<td class="ts">{{ formatTs(e.ts) }}</td>
<td><span :class="['k', e.kind]">{{ e.kind }}</span></td>
<td>{{ e.rev }}</td>
<td>{{ e.by || '-' }}</td>
<td class="trigger">[{{ e.trigger || '-' }}]</td>
<td class="summary">{{ e.summary }}</td>
</tr>
</tbody>
</table>
<p v-else class="empty">no changelog entries</p>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const props = defineProps({ pid: { type: String, required: true } });
const entries = ref([]);
async function reload() {
const r = await fetch(`/api/devloop/projects/${props.pid}/changelog`);
if (!r.ok) return;
const j = await r.json();
entries.value = j.entries || [];
}
function formatTs(s) {
if (!s) return '-';
try { return new Date(s).toLocaleString(); } catch { return s; }
}
onMounted(reload);
</script>
<style scoped>
.changelog-view {}
.bar { display:flex; align-items:center; gap:14px; margin-bottom:12px; font-size:13px; }
.bar .grow { flex:1; }
.btn { background:#222; color:#fff; border:none; border-radius:4px; padding:4px 12px; cursor:pointer; font-size:12px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:8px 10px; text-align:left; border-bottom:1px solid #eee; }
th { background:#fafafb; color:#666; font-weight:500; font-size:12px; }
.ts { color:#888; font-size:11px; }
.k {
display:inline-block; padding:1px 8px; border-radius:10px;
font-family: ui-monospace, monospace; font-size:11px;
}
.k.prd_rev { background:#deecff; color:#1d4d99; }
.k.sdd_rev { background:#ffeede; color:#a64a00; }
.trigger { color:#888; font-size:11px; }
.summary { color:#444; }
.empty { padding:30px; text-align:center; color:#888; }
</style>