much needed QOL updates

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