diff options
author | vnugent <public@vaughnnugent.com> | 2023-11-10 22:40:35 -0500 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2023-11-10 22:40:35 -0500 |
commit | 39a22deb6a232356bf7b2ef8386679bc8ea2f697 (patch) | |
tree | 743eb0a0bb06a8ae85a36778c748880374798f01 /front-end/src/views/Blog/components | |
parent | 00582bef545a912c2f81ea359dc00c92dd991ceb (diff) |
much needed QOL updates
Diffstat (limited to 'front-end/src/views/Blog/components')
8 files changed, 69 insertions, 57 deletions
diff --git a/front-end/src/views/Blog/components/Channels.vue b/front-end/src/views/Blog/components/Channels.vue index 417d3f9..2a160b3 100644 --- a/front-end/src/views/Blog/components/Channels.vue +++ b/front-end/src/views/Blog/components/Channels.vue @@ -1,7 +1,7 @@ <template> <div id="channel-editor"> <EditorTable title="Manage channels" :show-edit="showEdit" :pagination="pagination" @open-new="openNew"> - <template v-slot:table> + <template #table> <ChannelTable :channels="items" @open-edit="openEdit" diff --git a/front-end/src/views/Blog/components/Content.vue b/front-end/src/views/Blog/components/Content.vue index ba78773..d8a9f24 100644 --- a/front-end/src/views/Blog/components/Content.vue +++ b/front-end/src/views/Blog/components/Content.vue @@ -1,11 +1,12 @@ <template> <div id="content-editor" class=""> <EditorTable title="Manage content" :show-edit="showEdit" :pagination="pagination" @open-new="openNew"> - <template v-slot:table> + <template #table> <ContentTable :content="items" @open-edit="openEdit" @copy-link="copyLink" + @delete="onDelete" /> </template> <template #editor> @@ -40,7 +41,7 @@ import { computed, toRefs } from 'vue'; import { BlogState } from '../blog-api'; import { isEmpty } from 'lodash-es'; -import { apiCall } from '@vnuge/vnlib.browser'; +import { apiCall, useConfirm } from '@vnuge/vnlib.browser'; import { useClipboard } from '@vueuse/core'; import { ContentMeta, useFilteredPages } from '@vnuge/cmnext-admin'; import EditorTable from './EditorTable.vue'; @@ -67,6 +68,7 @@ const { selectedId, //Setup content filter const { items, pagination } = useFilteredPages(props.blog.content, 15) + const { reveal } = useConfirm() const showEdit = computed(() => !isEmpty(selectedId.value)); const loadingProgress = computed(() => `${progress?.value}%`); @@ -142,12 +144,28 @@ const onSubmit = async (value : OnSubmitValue) => { } const onDelete = async (item: ContentMeta) => { + //Show confirm + const { isCanceled } = await reveal({ + title: 'Delete File?', + text: `Are you sure you want to delete ${item.name}? This action cannot be undone.`, + }) + if (isCanceled) { + return; + } + + if (!confirm(`Are you sure you want to delete ${item.name} forever?`)) { + return; + } + //Exec delete call await apiCall(async () => { await deleteContent(item); //Close the edit panel closeEdit(true); }) + + //Refresh content after delete + props.blog.content.refresh(); } diff --git a/front-end/src/views/Blog/components/Content/ContentEditor.vue b/front-end/src/views/Blog/components/Content/ContentEditor.vue index 8da6b0a..756cec3 100644 --- a/front-end/src/views/Blog/components/Content/ContentEditor.vue +++ b/front-end/src/views/Blog/components/Content/ContentEditor.vue @@ -180,23 +180,8 @@ const onSubmit = async () => { const onClose = () => emit('close'); -const onDelete = async () => { - //Show confirm - const { isCanceled } = await reveal({ - title: 'Delete File?', - text: 'Are you sure you want to delete this file? This action cannot be undone.', - }) - if (isCanceled) { - return; - } - - if (!confirm('Are you sure you want to delete this file forever?')) { - return; - } - - //Emit the delete event with the original post - emit('delete', metaBuffer) -} +//Emit delete event +const onDelete = () => emit('delete', metaBuffer) const removeNewFile = () =>{ file.value = undefined; diff --git a/front-end/src/views/Blog/components/Content/ContentTable.vue b/front-end/src/views/Blog/components/Content/ContentTable.vue index e5cbe58..3afe320 100644 --- a/front-end/src/views/Blog/components/Content/ContentTable.vue +++ b/front-end/src/views/Blog/components/Content/ContentTable.vue @@ -28,14 +28,17 @@ </td> <td class="w-24"> <fieldset :disabled="waiting"> + <button class="btn xs no-border" @click="openEdit(item)"> + <fa-icon icon="pencil" /> + </button> <button class="btn xs no-border" @click="copyLink(item)"> <fa-icon icon="link" /> </button> <button class="btn xs no-border" @click="copy(item.id)"> <fa-icon icon="copy" /> </button> - <button class="btn xs no-border" @click="openEdit(item)"> - <fa-icon icon="pencil" /> + <button class="btn xs no-border red" @click="deleteItem(item)"> + <fa-icon icon="trash" /> </button> </fieldset> </td> @@ -50,7 +53,7 @@ import { useClipboard } from '@vueuse/core'; import { useWait } from '@vnuge/vnlib.browser'; import { ContentMeta } from '@vnuge/cmnext-admin'; -const emit = defineEmits(['open-edit', 'copy-link']) +const emit = defineEmits(['open-edit', 'copy-link', 'delete']) const props = defineProps<{ content: ContentMeta[] @@ -71,5 +74,6 @@ const getItemName = (item : ContentMeta) => truncate(item.name || '', { length: const openEdit = async (item: ContentMeta) => emit('open-edit', item) const copyLink = (item : ContentMeta) => emit('copy-link', item) +const deleteItem = (item : ContentMeta) => emit('delete', item) </script>
\ No newline at end of file diff --git a/front-end/src/views/Blog/components/FeedFields.vue b/front-end/src/views/Blog/components/FeedFields.vue index 90e1454..0397c48 100644 --- a/front-end/src/views/Blog/components/FeedFields.vue +++ b/front-end/src/views/Blog/components/FeedFields.vue @@ -36,11 +36,11 @@ </template> <script setup lang="ts"> -import { computed, ref } from 'vue'; +import { computed, defineAsyncComponent, ref } from 'vue'; import { FeedProperty, UseXmlProperties } from '@vnuge/cmnext-admin'; import { BlogState } from '../blog-api'; -import JsonEditorVue from 'json-editor-vue' import EpAdder from './podcast-helpers/EpisodeAdder.vue'; +const JsonEditorVue = defineAsyncComponent(() => import('json-editor-vue')) const props = defineProps<{ properties: UseXmlProperties, diff --git a/front-end/src/views/Blog/components/Posts.vue b/front-end/src/views/Blog/components/Posts.vue index 0407a26..d52a0ac 100644 --- a/front-end/src/views/Blog/components/Posts.vue +++ b/front-end/src/views/Blog/components/Posts.vue @@ -1,10 +1,11 @@ <template> <div id="post-editor" class=""> <EditorTable title="Manage posts" :show-edit="showEdit" :pagination="pagination" @open-new="openNew"> - <template v-slot:table> + <template #table> <PostTable :posts="items" @open-edit="openEdit" + @delete="onDelete" /> </template> <template #editor> @@ -20,14 +21,15 @@ </template> <script setup lang="ts"> -import { computed } from 'vue'; +import { computed, defineAsyncComponent } from 'vue'; import { isEmpty } from 'lodash-es'; import { PostMeta, useFilteredPages } from '@vnuge/cmnext-admin'; -import { apiCall, debugLog } from '@vnuge/vnlib.browser'; +import { apiCall, debugLog, useConfirm } from '@vnuge/vnlib.browser'; +import { BlogState } from '../blog-api'; import EditorTable from './EditorTable.vue'; -import PostEditor from './Posts/PostEdit.vue'; import PostTable from './Posts/PostTable.vue'; -import { BlogState } from '../blog-api'; + +const PostEditor = defineAsyncComponent(() => import('./Posts/PostEdit.vue')) const emit = defineEmits(['reload']) @@ -37,6 +39,7 @@ const props = defineProps<{ const { selectedId, publishPost, updatePost, deletePost } = props.blog.posts; const { updatePostContent } = props.blog.content; +const { reveal } = useConfirm() const showEdit = computed(() => !isEmpty(selectedId.value)); @@ -98,12 +101,28 @@ const onSubmit = async ({post, content } : { post:PostMeta, content:string }) => } const onDelete = async (post: PostMeta) => { + + //Show confirm + const { isCanceled } = await reveal({ + title: 'Delete Post?', + text: `Are you sure you want to delete post '${post.title}?' This action cannot be undone.`, + }) + if (isCanceled) { + return; + } + + if (!confirm(`Are you sure you want to delete post '${post.id}' forever?`)) { + return; + } + //Exec delete call await apiCall(async () => { await deletePost(post); //Close the edit panel closeEdit(true); }) + + props.blog.posts.refresh(); } </script> diff --git a/front-end/src/views/Blog/components/Posts/PostEdit.vue b/front-end/src/views/Blog/components/Posts/PostEdit.vue index 6ea0bac..0268508 100644 --- a/front-end/src/views/Blog/components/Posts/PostEdit.vue +++ b/front-end/src/views/Blog/components/Posts/PostEdit.vue @@ -46,7 +46,7 @@ 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 { apiCall, useUser } from '@vnuge/vnlib.browser'; import { getPostForm } from '../../form-helpers'; import Editor from '../../ckeditor/Editor.vue'; import FeedFields from '../FeedFields.vue'; @@ -56,7 +56,6 @@ const props = defineProps<{ blog: BlogState }>() -const { reveal } = useConfirm(); const { getProfile } = useUser(); const { schema, getValidator } = getPostForm(); @@ -117,23 +116,7 @@ const onContentChanged = (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 onDelete = () => emit('delete', posts.selectedItem.value) const setMeAsAuthor = () => { apiCall(async () => { diff --git a/front-end/src/views/Blog/components/Posts/PostTable.vue b/front-end/src/views/Blog/components/Posts/PostTable.vue index 96c511c..c1583a6 100644 --- a/front-end/src/views/Blog/components/Posts/PostTable.vue +++ b/front-end/src/views/Blog/components/Posts/PostTable.vue @@ -11,7 +11,7 @@ </thead> <tbody> <tr v-for="post in posts" :key="post.id" class="table-row"> - <td> + <td class="truncate max-w-[16rem]"> {{ post.title }} </td> <td> @@ -20,18 +20,21 @@ <td> {{ getDateString(post.date) }} </td> - <td> + <td class="truncate max-w-[10rem]"> {{ post.author }} </td> - <td> - {{ getSummaryString(post.summary) }} + <td class="truncate max-w-[16rem]"> + {{ post.summary }} </td> <td class="w-20"> + <button class="btn xs no-border" @click="openEdit(post)"> + <fa-icon icon="pencil" /> + </button> <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 class="btn xs no-border red" @click="onDelete(post)"> + <fa-icon icon="trash" /> </button> </td> </tr> @@ -45,7 +48,7 @@ import { useClipboard } from '@vueuse/core'; import { PostMeta } from '@vnuge/cmnext-admin'; import { useGeneralToaster } from '@vnuge/vnlib.browser'; -const emit = defineEmits(['reload', 'open-edit']) +const emit = defineEmits(['reload', 'open-edit', 'delete']) const props = defineProps<{ posts: PostMeta[], @@ -59,8 +62,8 @@ const { info } = useGeneralToaster() 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 }) +const onDelete = (post: PostMeta) => emit('delete', post) watch(copied, (c) => c ? info({'title':'Copied to clipboard'}) : null) </script>
\ No newline at end of file |