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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
<template>
<div class="flex flex-col w-full">
<div class="my-4 ml-auto">
<div class="button-group">
<button class="btn primary" form="channel-edit-form">Save</button>
<button class="btn" @click="close">Cancel</button>
</div>
</div>
<div class="mx-auto">
<h4 v-if="editMode" class="text-center">Edit Channel</h4>
<h4 v-else class="text-center">Create Channel</h4>
<p>
Your root directory and index file name must be unique within your S3 bucket.
</p>
</div>
<dynamic-form
id="channel-edit-form"
class="mx-auto"
:disabled="false"
:form="channelSchema"
:validator="channelVal.v$"
@submit="onSubmit"
/>
<div class="relative">
<div class="absolute top-0 right-10">
<button class="btn xs no-border red" @click="disableFeed" v-if="feedEnabled">
Disable
</button>
</div>
</div>
<div class="max-w-xl mx-auto mt-6">
<h4 v-if="editMode" class="text-center">Edit Feed</h4>
<h4 v-else class="text-center">Create Feed</h4>
<p>
Optionally define the rss feed for this channel. If you do not configure the feed, posts
to this channel will not be published to an rss feed, you may configure this feed at any time.
</p>
</div>
<!-- Feed edit form -->
<dynamic-form
id="feed-edit-form"
class="mx-auto mt-4"
:form="feedSchema"
:validator="feedVal.v$"
:disabled="false"
@submit="onSubmit"
/>
<!-- Feed properties -->
<FeedFields :properties="feedProps" />
<div class="mt-6">
<div class="mx-auto w-fit">
<button class="btn red" @click="onDelete" v-if="editMode">
Delete Permenantly
</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { BlogState } from '../../blog-api';
import { forEach, isEmpty, cloneDeep, isNil } from 'lodash-es';
import { reactiveComputed } from '@vueuse/core';
import { useConfirm } from '@vnuge/vnlib.browser';
import FeedFields from '../FeedFields.vue';
import { BlogChannel, ChannelFeed, useXmlProperties } from '@vnuge/cmnext-admin';
import { getChannelForm } from '../../form-helpers';
const emit = defineEmits(['close', 'onSubmit', 'onDelete'])
const props = defineProps<{
blog: BlogState
}>()
//Disallow empty channels
const channel = computed(() => props.blog.channels.editChannel.value || {} as BlogChannel)
const editMode = computed(() => !isNil(channel.value.id))
const { getChannelValidator, channelSchema, feedSchema, getFeedValidator } = getChannelForm(editMode);
const { reveal } = useConfirm();
//Get the feed properties
const feedProps = useXmlProperties(computed(() => channel.value.feed));
//Must have reactive buffers for the channel and feed
const channelBuffer = reactiveComputed(() => cloneDeep(channel.value) as BlogChannel)
const feedBuffer = reactiveComputed(() => cloneDeep(channel.value.feed || {}) as ChannelFeed)
//Get validators for channel and feed
const channelVal = getChannelValidator(channelBuffer);
const feedVal = getFeedValidator(feedBuffer);
const feedEnabled = computed(() => !isEmpty(feedBuffer.url))
const disableFeed = () => {
//Clear the feed
forEach(feedBuffer, (_value, key) => feedBuffer[key] = null)
//Reset the feed validator
feedVal.reset();
}
const onSubmit = async () => {
//validate
if(!await channelVal.validate()){
return;
}
//Feed may not be defined, if it is validate it
if(feedEnabled.value){
if(!await feedVal.validate()){
return;
}
//set/overwite feed properties
const feed = {
...feedBuffer,
properties:feedProps.getCurrentProperties()
}
//Invoke submitted with feed
emit('onSubmit', { channel: channelBuffer, feed })
}
else{
//Invoke submitted without feed
emit('onSubmit', { channel: channelBuffer, feed: null})
}
}
const onDelete = async () => {
//Show confirm
const { isCanceled } = await reveal({
title: 'Delete Channel?',
text: 'Are you sure you want to delete this channel? This action cannot be undone.',
})
if(isCanceled){
return;
}
if(!confirm('Are you sure you want to delete this channel forever?')){
return;
}
emit('onDelete', channelBuffer)
}
const close = () => emit('close')
</script>
<style lang="scss">
</style>
|
