move blog admin state to pinia store plugin

1 files changed, 45 insertions, 40 deletions

diff --git a/front-end/src/views/Blog/components/Content.vue b/front-end/src/views/Blog/components/Content.vue
index d8a9f24..888b595 100644
--- a/front-end/src/views/Blog/components/Content.vue
+++ b/front-end/src/views/Blog/components/Content.vue
@@ -2,11 +2,12 @@
     <div id="content-editor" class="">
         <EditorTable title="Manage content" :show-edit="showEdit" :pagination="pagination" @open-new="openNew">
             <template #table>
-                <ContentTable 
-                    :content="items"
+                <ContentTable
+                    :items="items" 
                     @open-edit="openEdit"
                     @copy-link="copyLink"
                     @delete="onDelete"
+                    @download="onDownload"
                 />
             </template>
             <template #editor>
@@ -16,7 +17,7 @@
                     <span 
                         role="progressbar"
                         aria-labelledby="ProgressLabel"
-                        :aria-valuenow="progress"
+                        :aria-valuenow="uploadProgress"
                         class="relative block bg-gray-200 rounded-full dark:bg-dark-500"
                     >
                         <span class="absolute inset-0 flex items-center justify-center text-[10px]/4">
@@ -27,58 +28,46 @@
                     </span>
                 </div>
                 <ContentEditor 
-                    :blog="$props.blog"
                     @submit="onSubmit"
                     @close="closeEdit"
                     @delete="onDelete"
                 />
             </template>
         </EditorTable>
+        <a class="hidden" ref="downloadAnchor"></a>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, toRefs } from 'vue';
-import { BlogState } from '../blog-api';
+import { computed, shallowRef } from 'vue';
 import { isEmpty } from 'lodash-es';
 import { apiCall, useConfirm } from '@vnuge/vnlib.browser';
-import { useClipboard } from '@vueuse/core';
-import { ContentMeta, useFilteredPages } from '@vnuge/cmnext-admin';
+import { get, useClipboard } from '@vueuse/core';
+import { ContentMeta } from '@vnuge/cmnext-admin';
+import { useStore } from '../../../store';
+import { storeToRefs } from 'pinia';
 import EditorTable from './EditorTable.vue';
 import ContentEditor from './Content/ContentEditor.vue';
 import ContentTable from './Content/ContentTable.vue';
 
 const emit = defineEmits(['reload'])
 
-const props = defineProps<{
-    blog: BlogState,
-    progress: number
-}>()
+const store = useStore()
+const { uploadProgress } = storeToRefs(store)
+const { items, pagination } = store.content.createPages()
 
-const { progress } = toRefs(props)
-
-//Get the computed content
-const { selectedId, 
-    updateContent,
-    uploadContent,
-    deleteContent,
-    updateContentName,
-    getPublicUrl
- } = props.blog.content;
-
- //Setup content filter
- const { items, pagination } = useFilteredPages(props.blog.content, 15)
  const { reveal } = useConfirm()
+ const downloadAnchor = shallowRef<HTMLAnchorElement>()
 
-const showEdit = computed(() => !isEmpty(selectedId.value));
-const loadingProgress = computed(() => `${progress?.value}%`);
-const progressWidth = computed(() => ({ width: `${progress?.value}%` }));
-const showProgress = computed(() => progress?.value > 0 && progress?.value < 100);
+const showEdit = computed(() => !isEmpty(store.content.selectedId));
+const loadingProgress = computed(() => `${uploadProgress.value}%`);
+const progressWidth = computed(() => ({ width: `${uploadProgress.value}%` }));
+const showProgress = computed(() => uploadProgress.value > 0 && uploadProgress.value < 100);
 
-const openEdit = async (item: ContentMeta) => selectedId.value = item.id
+const openEdit = async (item: ContentMeta) => store.content.selectedId = item.id
 
 const closeEdit = (update?: boolean) => {
-    selectedId.value = ''
+    store.content.selectedId = ''
     //reload channels
     if (update) {
         emit('reload')
@@ -88,7 +77,7 @@ const closeEdit = (update?: boolean) => {
 }
 
 const openNew = () => {
-    selectedId.value = 'new'
+    store.content.selectedId = 'new'
     //Reset page to top
     window.scrollTo(0, 0)
 }
@@ -102,7 +91,7 @@ interface OnSubmitValue{
 const { copy } = useClipboard()
 const copyLink = async (item : ContentMeta) =>{
     apiCall(async ({toaster}) =>{
-        const url = await getPublicUrl(item);
+        const url = await store.content.getPublicUrl(item);
         await copy(url);
         toaster.general.info({ title: 'Copied link to clipboard' })
     });
@@ -111,7 +100,7 @@ const copyLink = async (item : ContentMeta) =>{
 const onSubmit = async (value : OnSubmitValue) => {
 
     //Check for new channel, or updating old channel
-    if (selectedId.value === 'new') {
+    if (store.content.selectedId === 'new') {
         //Exec create call
         await apiCall(async () => {
 
@@ -120,21 +109,21 @@ const onSubmit = async (value : OnSubmitValue) => {
             }
 
             //endpoint returns the content
-            await uploadContent(value.file, value.item.name!);
+            await store.content.uploadContent(value.file, value.item.name!);
 
             //Close the edit panel
             closeEdit(true);
         })
     }
-    else if (!isEmpty(selectedId.value)) {
+    else if (!isEmpty(store.content.selectedId)) {
         //Exec update call
         await apiCall(async () => {
             //If no file was attached, just update the file name
             if(value.file?.name){
-                await updateContent(value.item, value.file);
+                await store.content.updateContent(value.item, value.file);
             }
             else{
-                await updateContentName(value.item, value.item.name!);
+                await store.content.updateContentName(value.item, value.item.name!);
             }
             //Close the edit panel
             closeEdit(true);
@@ -159,13 +148,29 @@ const onDelete = async (item: ContentMeta) => {
 
     //Exec delete call
     await apiCall(async () => {
-        await deleteContent(item);
+        await store.content.delete(item);
         //Close the edit panel
         closeEdit(true);
     })
 
     //Refresh content after delete
-    props.blog.content.refresh();
+    store.content.refresh();
+}
+
+const onDownload = async (item: ContentMeta) => {
+    //Exec download call
+    await apiCall(async () => {
+        //Download the file blob from the server
+        const fileBlob = await store.content.downloadContent(item)
+
+        //Create a url for the blob and open the save link
+        const url = window.URL.createObjectURL(fileBlob);
+        
+        const anchor = get(downloadAnchor)!;
+        anchor.href = url;
+        anchor.download = item.name!;
+        anchor.click();
+    })
 }