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
|
<template>
<div id="channel-editor">
<EditorTable title="Manage channels" :show-edit="showEdit" :pagination="pagination" @open-new="openNew">
<template v-slot:table>
<ChannelTable
:channels="items"
@open-edit="openEdit"
/>
</template>
<template #editor>
<ChannelEdit
:blog="$props.blog"
@close="closeEdit"
@on-submit="onSubmit"
@on-delete="onDelete"
/>
</template>
</EditorTable>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { BlogState } from '../blog-api';
import { isEmpty, filter as _filter } from 'lodash';
import { apiCall } from '@vnuge/vnlib.browser';
import { BlogChannel, ChannelFeed, useFilteredPages } from '@vnuge/cmnext-admin';
import ChannelEdit from './Channels/ChannelEdit.vue';
import ChannelTable from './Channels/ChannelTable.vue';
import EditorTable from './EditorTable.vue';
const emit = defineEmits(['close', 'reload'])
const props = defineProps<{
blog: BlogState,
}>()
const { updateChannel, addChannel, deleteChannel, getQuery } = props.blog.channels;
const { channelEdit } = getQuery()
//Setup channel filter
const { items, pagination } = useFilteredPages(props.blog.channels, 15)
const showEdit = computed(() => !isEmpty(channelEdit.value))
const openEdit = (channel: BlogChannel) => channelEdit.value = channel.id;
const closeEdit = (update?:boolean) => {
channelEdit.value = ''
//reload channels
if(update){
emit('reload')
}
//Reset page to top
window.scrollTo(0, 0)
}
const openNew = () => {
channelEdit.value = 'new'
//Reset page to top
window.scrollTo(0, 0)
}
const onSubmit = async ({channel, feed} : { channel:BlogChannel, feed? : ChannelFeed}) => {
//Check for new channel, or updating old channel
if(channelEdit.value === 'new'){
//Exec create call
await apiCall(async () => {
await addChannel(channel, feed);
//Close the edit panel
closeEdit(true);
})
}
else if(!isEmpty(channelEdit.value)){
//Exec update call
await apiCall(async () => {
await updateChannel(channel, feed);
//Close the edit panel
closeEdit(true);
})
}
//Notify error state
}
const onDelete = async (channel : BlogChannel) => {
//Exec delete call
await apiCall(async () => {
await deleteChannel(channel);
//Close the edit panel
closeEdit(true);
})
}
</script>
<style lang="scss">
</style>
|
