blob: c1583a61aeece03fe50956ed0f0901b7b71059b5 (
plain)
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
|
<template>
<thead>
<tr>
<th>Title</th>
<th>Id</th>
<th>Date</th>
<th>Author</th>
<th>Summary</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="post in posts" :key="post.id" class="table-row">
<td class="truncate max-w-[16rem]">
{{ post.title }}
</td>
<td>
{{ getPostId(post) }}
</td>
<td>
{{ getDateString(post.date) }}
</td>
<td class="truncate max-w-[10rem]">
{{ post.author }}
</td>
<td class="truncate max-w-[16rem]">
{{ post.summary }}
</td>
<td class="w-20">
<button class="btn xs no-border" @click="openEdit(post)">
<fa-icon icon="pencil" />
</button>
<button class="btn xs no-border" @click="copy(post.id)">
<fa-icon icon="copy" />
</button>
<button class="btn xs no-border red" @click="onDelete(post)">
<fa-icon icon="trash" />
</button>
</td>
</tr>
</tbody>
</template>
<script setup lang="ts">
import { toRefs, watch } from 'vue';
import { filter as _filter, truncate } from 'lodash-es';
import { useClipboard } from '@vueuse/core';
import { PostMeta } from '@vnuge/cmnext-admin';
import { useGeneralToaster } from '@vnuge/vnlib.browser';
const emit = defineEmits(['reload', 'open-edit', 'delete'])
const props = defineProps<{
posts: PostMeta[],
}>()
const { posts } = toRefs(props)
const { copy, copied } = useClipboard()
const { info } = useGeneralToaster()
const openEdit = async (post: PostMeta) => emit('open-edit', post)
const getDateString = (time?: number) => new Date((time || 0) * 1000).toLocaleString();
const getPostId = (post: PostMeta) => truncate(post.id || '', { length: 20 })
const onDelete = (post: PostMeta) => emit('delete', post)
watch(copied, (c) => c ? info({'title':'Copied to clipboard'}) : null)
</script>
|
