aboutsummaryrefslogtreecommitdiff
path: root/front-end/src/views/Blog/components/Posts/PostTable.vue
blob: e5e45f2d43aeec43d41ce5f1bde1d9d60013f9e1 (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
<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>
                {{ post.title }}
            </td>
            <td>
                {{ getPostId(post) }}
            </td>
            <td>
                {{ getDateString(post.date) }}
            </td>
            <td>
                {{ post.author }}
            </td>
            <td>
                {{ getSummaryString(post.summary) }}
            </td>
            <td class="w-20">
                <button class="btn xs no-border" @click="copy(post.id)">
                    <fa-icon icon="copy" />
                </button>
                <button class="btn xs no-border" @click="openEdit(post)">
                    <fa-icon icon="pencil" />
                </button>
            </td>
        </tr>
    </tbody>
</template>

<script setup lang="ts">
import { toRefs } from 'vue';
import { filter as _filter, truncate } from 'lodash';
import { useClipboard } from '@vueuse/core';
import { PostMeta } from '@vnuge/cmnext-admin';

const emit = defineEmits(['reload', 'open-edit'])

const props = defineProps<{
    posts: PostMeta[],
}>()

const { posts } = toRefs(props)

const { copy } = useClipboard()

const openEdit = async (post: PostMeta) => emit('open-edit', post)

const getDateString = (time?: number) => new Date((time || 0) * 1000).toLocaleString();
const getSummaryString = (summary?: string) => truncate(summary || '', { length: 40 })
const getPostId = (post: PostMeta) => truncate(post.id || '', { length: 20 })
</script>