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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<template>
<div id="post-editor" class="">
<EditorTable title="Manage posts" :show-edit="showEdit" :pagination="pagination" @open-new="openNew">
<template v-slot:table>
<PostTable
:posts="items"
@open-edit="openEdit"
/>
</template>
<template #editor>
<PostEditor
:blog="$props.blog"
@submit="onSubmit"
@close="closeEdit"
@delete="onDelete"
/>
</template>
</EditorTable>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { isEmpty } from 'lodash-es';
import { PostMeta, useFilteredPages } from '@vnuge/cmnext-admin';
import { apiCall, debugLog } from '@vnuge/vnlib.browser';
import EditorTable from './EditorTable.vue';
import PostEditor from './Posts/PostEdit.vue';
import PostTable from './Posts/PostTable.vue';
import { BlogState } from '../blog-api';
const emit = defineEmits(['reload'])
const props = defineProps<{
blog: BlogState
}>()
const { selectedId, publishPost, updatePost, deletePost } = props.blog.posts;
const { updatePostContent } = props.blog.content;
const showEdit = computed(() => !isEmpty(selectedId.value));
//Init paginated items for the table and use filtered items
const { pagination, items } = useFilteredPages(props.blog.posts, 15)
//Open with the post id
const openEdit = async (post: PostMeta) => selectedId.value = post.id;
const closeEdit = (update?: boolean) => {
selectedId.value = ''
//reload channels
if (update) {
emit('reload')
}
//Reset page to top
window.scrollTo(0, 0)
}
const openNew = () => {
//Reset the edit post
selectedId.value = 'new'
//Reset page to top
window.scrollTo(0, 0)
}
const onSubmit = async ({post, content } : { post:PostMeta, content:string }) => {
debugLog('submitting', post, content);
//Check for new channel, or updating old channel
if (selectedId.value === 'new') {
//Exec create call
await apiCall(async () => {
//endpoint returns the content
const newMeta = await publishPost(post);
//Publish the content
await updatePostContent(newMeta, content)
//Close the edit panel
closeEdit(true);
})
}
else if (!isEmpty(selectedId.value)) {
//Exec update call
await apiCall(async () => {
await updatePost(post);
//Publish the content
await updatePostContent(post, content)
//Close the edit panel
closeEdit(true);
})
}
//Notify error state
}
const onDelete = async (post: PostMeta) => {
//Exec delete call
await apiCall(async () => {
await deletePost(post);
//Close the edit panel
closeEdit(true);
})
}
</script>
<style lang="scss">
</style>
|
