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
|
<template>
<div id="new-post-editor" class="flex flex-col w-full">
<div class="my-4 ml-auto">
<div class="button-group">
<!-- Submit the post form -->
<button class="btn primary" form="post-edit-form">Save</button>
<button class="btn" @click="onClose">Cancel</button>
</div>
</div>
<div class="mx-auto">
<h4 class="text-center">Edit Post</h4>
<p>
Add or edit a post to publish to your blog.
</p>
</div>
<div class="relative">
<div class="absolute top-2 right-10">
<button class="btn no-border" @click="setMeAsAuthor">@Me</button>
</div>
</div>
<dynamic-form
id="post-edit-form"
class="mx-auto"
:form="schema"
:disabled="false"
:validator="v$"
@submit="onSubmit"
/>
<div id="post-content-editor" class="px-6" :class="{'invalid':v$.content.$invalid}">
<Editor @change="onContentChanged" :blog="$props.blog" @load="onEditorLoad" />
</div>
<FeedFields :properties="postProperties" :blog="$props.blog" />
<div class="mx-auto my-4">
<div class="button-group">
<!-- Submit the post form -->
<button class="btn primary" form="post-edit-form">Save</button>
<button class="btn" @click="onClose">Cancel</button>
<button v-if="!isNew" class="btn red" @click="onDelete">Delete Forever</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { BlogState } from '../../blog-api';
import { reactiveComputed } from '@vueuse/core';
import { isNil, isString, split } from 'lodash-es';
import { PostMeta, useXmlProperties } from '@vnuge/cmnext-admin';
import { apiCall, useConfirm, useUser } from '@vnuge/vnlib.browser';
import { getPostForm } from '../../form-helpers';
import Editor from '../../ckeditor/Editor.vue';
import FeedFields from '../FeedFields.vue';
const emit = defineEmits(['close', 'submit', 'delete']);
const props = defineProps<{
blog: BlogState
}>()
const { reveal } = useConfirm();
const { getProfile } = useUser();
const { schema, getValidator } = getPostForm();
const { posts, content } = props.blog;
const isNew = computed(() => isNil(posts.selectedItem.value));
/* Post meta may load delayed from the api so it must be computed
and reactive, it may also be empty when a new post is created */
const postBuffer = reactiveComputed<PostMeta>(() => {
return {
...posts.selectedItem.value,
content: ''
} as PostMeta
});
const { v$, validate } = getValidator(postBuffer);
//Wrap the post properties in an xml feed editor
const postProperties = useXmlProperties(posts.selectedItem);
const onSubmit = async () =>{
if(!await validate()){
return;
}
//get all properties
const p = postProperties.getCurrentProperties();
const post = {
...postBuffer,
properties: p,
content: undefined
}
//Remove the content from the post object
delete post.content;
//Convert the tags string to an array of strings
post.tags = isString(post.tags) ? split(post.tags, ',') : post.tags;
emit('submit', { post, content: v$.value.content.$model});
}
const onClose = () => emit('close');
const onContentChanged = (content: string) => {
//Set the validator content string
v$.value.content.$model = content;
}
const onDelete = async () => {
//Show confirm
const { isCanceled } = await reveal({
title: 'Delete Post?',
text: 'Are you sure you want to delete this post? This action cannot be undone.',
})
if (isCanceled) {
return;
}
if (!confirm('Are you sure you want to delete this post forever?')) {
return;
}
//Emit the delete event with the original post
emit('delete', posts.selectedItem.value)
}
const setMeAsAuthor = () => {
apiCall(async () => {
const { first, last } = await getProfile<{first?:string, last?:string, email:string}>();
v$.value.author.$model = `${first} ${last}`
})
}
const onEditorLoad = async (editor : any) =>{
//Get the initial content
const postContent = await content.getSelectedPostContent();
//Set the initial content
if(!isNil(postContent)){
onContentChanged(postContent);
editor.setData(postContent);
}
}
</script>
<style lang="scss">
</style>
|
