diff options
Diffstat (limited to 'front-end/src/store')
| -rw-r--r-- | front-end/src/store/cmnextAdminPlugin.ts | 176 | ||||
| -rw-r--r-- | front-end/src/store/index.ts | 17 | ||||
| -rw-r--r-- | front-end/src/store/sharedTypes.ts | 123 |
3 files changed, 316 insertions, 0 deletions
diff --git a/front-end/src/store/cmnextAdminPlugin.ts b/front-end/src/store/cmnextAdminPlugin.ts new file mode 100644 index 0000000..a4741ab --- /dev/null +++ b/front-end/src/store/cmnextAdminPlugin.ts @@ -0,0 +1,176 @@ +// Copyright (C) 2023 Vaughn Nugent +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as +// published by the Free Software Foundation, either version 3 of the +// License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see <https://www.gnu.org/licenses/>. + +import 'pinia' +import { MaybeRef, Ref, computed, ref, toRef } from 'vue'; +import { PiniaPluginContext, PiniaPlugin } from 'pinia' +import { find, isEqual } from 'lodash-es'; +import { useRouter } from 'vue-router'; +import { useContent, ContentApi, ContentMeta, + PostMeta, PostApi, BlogChannel, ChannelApi, usePosts, useChannels, + createBlogContext +} from '@vnuge/cmnext-admin'; +import { useRouteQuery } from '@vueuse/router'; +import { useAxios } from '@vnuge/vnlib.browser'; +import { useScriptTag } from '@vueuse/core'; +import { type ReactiveBlogStore, createReactiveBlogApi, QueryType, SortType } from './sharedTypes'; +import { AxiosProgressEvent } from 'axios'; + +export type PostStore = ReactiveBlogStore<PostMeta> & PostApi + +export interface ChannelStore extends ReactiveBlogStore<BlogChannel>, ChannelApi { + editId: string + readonly editChannel: BlogChannel | undefined; +} + +export interface ContentStore extends ReactiveBlogStore<ContentMeta>, ContentApi { +} + +export interface BlogAdminState{ + content: ContentStore + posts: PostStore + channels: ChannelStore + uploadProgress: number; + waitForEditor(): Promise<void>; + queryState:{ + sort: SortType; + search: string; + pageSize: number; + } +} + +declare module 'pinia' { + export interface PiniaCustomProperties extends BlogAdminState { + } +} + +export const cmnextAdminPlugin = (router: ReturnType<typeof useRouter>, ckEditorUrl: string, pageSize: MaybeRef<number>): PiniaPlugin => { + + return ({ store }: PiniaPluginContext): BlogAdminState => { + + //setup filter search query + const search = useRouteQuery<string>(QueryType.Filter, '', { mode: 'replace', router }); + + //Get sort order query + const sort = useRouteQuery<SortType>(QueryType.Sort, SortType.CreatedTime, { mode: 'replace', router }); + + const uploadProgress = ref<number>(0) + + const axios = useAxios({ + onUploadProgress: (e: AxiosProgressEvent) => { + uploadProgress.value = Math.round((e.loaded * 100) / e.total!) + }, + //Set to 60 second timeout + timeout: 60 * 1000 + }) + + const initCkEditor = () => { + //Setup cke editor + if ('CKEDITOR' in window === false) { + //Load scripts + const ckEditorTag = useScriptTag(ckEditorUrl) + //Store the wait result on the window for the editor script to wait + const loadPromise = ckEditorTag.load(true); + + return async (): Promise<void> => { + await loadPromise; + } + } + return (): Promise<void> => Promise.resolve() + } + + const blogContext = createBlogContext({ + axios, + channelUrl: '/blog/channels', + postUrl: '/blog/posts', + contentUrl: '/blog/content', + }) + + const channels = (() => { + + //Create channel api + const api = createReactiveBlogApi<BlogChannel, ChannelApi>( + useChannels(blogContext), + { + query: QueryType.Channel, + channelId: undefined, + router, + sort, + search, + pageSize + } + ) + + //route query for the selected channel + const editId = useRouteQuery<string>(QueryType.ChannelEdit, '', { mode: 'push', router }); + + //Compute the selected items from their ids + const editChannel = computed<BlogChannel | undefined>(() => find(api.all.value, c => isEqual(c.id, editId.value))) + + return{ + ...api, + editId, + editChannel + } + })() + + const getContentStore = (): ContentStore => { + //Create post api + return createReactiveBlogApi<ContentMeta, ContentApi>( + useContent(blogContext, channels.selectedId), + { + query: QueryType.Content, + channelId: toRef(channels.selectedId), + router, + sort, + search, + pageSize + }, + ) + } + + const getPostStore = (): PostStore => { + + //Create post api + return createReactiveBlogApi<PostMeta, PostApi>( + usePosts(blogContext, channels.selectedId), + { + query: QueryType.Post, + channelId: toRef(channels.selectedId), + router, + sort, + search, + pageSize + } + ) + } + + //Load the editor script + const waitForEditor = initCkEditor() + + return { + content: getContentStore(), + posts: getPostStore(), + channels, + uploadProgress, + waitForEditor, + queryState: { + sort, + search, + pageSize + } + } + } +}
\ No newline at end of file diff --git a/front-end/src/store/index.ts b/front-end/src/store/index.ts index 924bf1b..1b2d7ee 100644 --- a/front-end/src/store/index.ts +++ b/front-end/src/store/index.ts @@ -1,8 +1,25 @@ +// Copyright (C) 2023 Vaughn Nugent +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as +// published by the Free Software Foundation, either version 3 of the +// License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see <https://www.gnu.org/licenses/>. + import { useSession } from "@vnuge/vnlib.browser"; import { set } from "@vueuse/core"; import { defineStore } from "pinia"; import { computed, shallowRef } from "vue"; +export { SortType, QueryType } from './sharedTypes' + /** * Loads the main store for the application */ diff --git a/front-end/src/store/sharedTypes.ts b/front-end/src/store/sharedTypes.ts new file mode 100644 index 0000000..b243608 --- /dev/null +++ b/front-end/src/store/sharedTypes.ts @@ -0,0 +1,123 @@ +// Copyright (C) 2023 Vaughn Nugent +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as +// published by the Free Software Foundation, either version 3 of the +// License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see <https://www.gnu.org/licenses/>. + +import { type BlogEntity, type NamedBlogEntity, useFilteredPages, SortedFilteredPaged } from "@vnuge/cmnext-admin"; +import { MaybeRef, Ref } from "vue"; +import { computed, shallowRef, watch } from 'vue'; +import { apiCall } from '@vnuge/vnlib.browser'; +import { useToggle } from '@vueuse/core'; +import { filter, find, includes, isEmpty, isEqual, toLower } from 'lodash-es'; +import type { Router } from 'vue-router'; +import { useRouteQuery } from '@vueuse/router'; + +export enum QueryType { + Post = 'post', + Channel = 'channel', + Content = 'content', + ChannelEdit = 'ecid', + Filter = 'filter', + Sort = 'sort', + PageSize = 'size', +} + +export enum SortType { + CreatedTime = 'created', + ModifiedTime = 'date', +} + +export interface ReactiveBlogStore<T> { + readonly all: T[]; + selectedId: string; + readonly selected : T | undefined; + refresh(): void; + createReactiveSearch(sec: Ref<string>): Ref<T[] | undefined> + createPages(): SortedFilteredPaged<T>; +} + + +export interface BlogApiArgs{ + readonly query: QueryType; + readonly channelId?: Ref<string>; + readonly router: Router; + readonly pageSize: MaybeRef<number>; + readonly sort: Ref<SortType>; + readonly search: Ref<string>; +} + +export interface TBlogApi<T extends BlogEntity> { + getAllItems(): Promise<T[]>; +} + + +export const createReactiveBlogApi = <T extends NamedBlogEntity, TApi extends TBlogApi<T>>(api:TApi, args: BlogApiArgs) +: ReactiveBlogStore<T> & TApi => { + + const { query, router, channelId, pageSize, sort, search } = args + + //route query for the selected post + const selectedId = useRouteQuery<string>(query, '', { mode: 'replace', router }); + + const all = shallowRef<T[]>([]) + + //manual refresh + const [onRefresh, refresh] = useToggle() + + //Compute the selected items from their ids + const selected = computed<T | undefined>(() => find(all.value, c => isEqual(c.id, selectedId.value))); + + const createReactiveSearch = (sec: Ref<string>): Ref<T[] | undefined> => { + return computed(() => { + return filter(all.value, c => includes(toLower(c.name), toLower(sec.value)) || includes(toLower(c.id), toLower(sec.value))); + }) + } + + const createPages = (): SortedFilteredPaged<T> => { + //Configure pagination + return useFilteredPages({ items: all, search, sort }, pageSize) + } + + const loadItems = () => { + apiCall(async () => { + all.value = await api.getAllItems() + }) + } + + if(channelId) { + //Watch for selected channel id changes + watch([onRefresh, channelId], ([_, cid]) => { + //Must have selected a channel + if (isEmpty(cid)) { + all.value = [] + } + else{ + loadItems() + } + }) + } + else{ + //Watch for refresh only + watch([onRefresh], loadItems) + } + + return { + ...api, + refresh, + selectedId, + selected, + all, + createReactiveSearch, + createPages + } +} |