diff options
Diffstat (limited to 'lib/admin/src/content')
-rw-r--r-- | lib/admin/src/content/computedContent.ts | 82 | ||||
-rw-r--r-- | lib/admin/src/content/index.ts | 17 | ||||
-rw-r--r-- | lib/admin/src/content/useContent.ts | 149 |
3 files changed, 248 insertions, 0 deletions
diff --git a/lib/admin/src/content/computedContent.ts b/lib/admin/src/content/computedContent.ts new file mode 100644 index 0000000..c4ca575 --- /dev/null +++ b/lib/admin/src/content/computedContent.ts @@ -0,0 +1,82 @@ +// 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 { Ref, computed } from "vue"; +import { find, filter, includes, isEqual, isNil, toLower } from "lodash"; +import { apiCall } from "@vnuge/vnlib.browser" +import { ContentMeta, BlogEntity, ContentApi, ComputedBlogApi, BlogAdminContext } from "../types.js"; +import { watchAndCompute } from "../helpers.js"; +import { useContent } from "./useContent.js"; + +export interface ComputedContent extends ContentApi, ComputedBlogApi<ContentMeta> { + /** + * Gets the raw content for a the currently selected post + */ + getSelectedPostContent(): Promise<string | undefined>; + /** + * Filter post items by the given reactive filter + * @param filter The reactive filter used to filter the content + */ + createReactiveSearch(filter: Ref<string>): Ref<ContentMeta[] | undefined>; +} + +/** + * Gets a computed object with the content and selected content + * @param context The blog admin context + * @returns A computed object with the content and selected content + */ +export const useComputedContent = (context: BlogAdminContext): ComputedContent => { + + //Get the content api from the context + const contentApi = useContent(context); + + const { content, post, channel } = context.getQuery(); + + //Watch for channel and selected id changes and get the content + const items = watchAndCompute([channel, content, post], async () => { + //Get all content if the channel is set, otherwise return empty array + return channel.value ? await apiCall(contentApi.getAllContent) ?? [] : []; + }, []); + + const selectedItem = computed<ContentMeta | undefined>(() => { + if (!isNil(channel.value) && content.value && content.value !== 'new') { + return find(items.value, c => isEqual(c.id, content.value)); + } + return {} as ContentMeta; + }) + + const getSelectedPostContent = async (): Promise<string | undefined> => { + if (!isNil(channel.value) && post.value && post.value !== 'new') { + return await apiCall(() => contentApi.getPostContent({ id: post.value } as BlogEntity)); + } + return ''; + } + + const createReactiveSearch = (sec: Ref<string>): Ref<ContentMeta[] | undefined> => { + return computed(() => { + return filter(items.value, c => includes(toLower(c.name), toLower(sec.value)) || includes(toLower(c.id), toLower(sec.value))); + }) + } + + return { + ...contentApi, + items, + selectedItem, + getSelectedPostContent, + createReactiveSearch, + selectedId: content, + getQuery: context.getQuery, + }; +} diff --git a/lib/admin/src/content/index.ts b/lib/admin/src/content/index.ts new file mode 100644 index 0000000..802c002 --- /dev/null +++ b/lib/admin/src/content/index.ts @@ -0,0 +1,17 @@ +// 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/>. + +export * from './useContent' +export * from './computedContent'
\ No newline at end of file diff --git a/lib/admin/src/content/useContent.ts b/lib/admin/src/content/useContent.ts new file mode 100644 index 0000000..1493565 --- /dev/null +++ b/lib/admin/src/content/useContent.ts @@ -0,0 +1,149 @@ +// 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 { includes, isEmpty } from "lodash"; +import { WebMessage, useAxios } from "@vnuge/vnlib.browser" +import { PostMeta, ContentMeta, ContentApi, BlogEntity, BlogAdminContext } from "../types.js"; + + +/** + * Configures a content api for a given content endpoint and channel + * @param contentUrl The content endpoint url + * @param channel The channel to get the content for + * @returns A content api object + */ +export const useContent = (context : BlogAdminContext): ContentApi => { + const axios = useAxios(null); + + const { channel } = context.getQuery(); + + const getUrl = (): string => { + const url = context.getContentUrl(); + //Return the url with the channel id query + return `${url}?channel=${channel.value}`; + } + + const getContentType = (file: File): string => { + if (isEmpty(file.type)) { + return 'application/octet-stream' + } + if (includes(file.type, 'javascript')) { + return 'application/javascript' + } + if (includes(file.type, 'json')) { + return 'application/json' + } + if (includes(file.type, 'xml')) { + return 'application/xml' + } + return file.type; + } + + /** + * Gets the raw content item from the server and returns a string of the content + * @param cotentId The id of the content to get the raw value of + * @returns A promise that resolves to the raw content string + */ + const getContent = async (cotentId: string): Promise<string> => { + const url = getUrl(); + const response = await axios.get(`${url}&id=${cotentId}`); + return await response.data; + } + + const getPostContent = async (post: BlogEntity): Promise<string> => { + return await getContent(post.id); + } + + const getAllContent = async (): Promise<ContentMeta[]> => { + const url = getUrl(); + const response = await axios.get<ContentMeta[]>(url); + return response.data; + } + + const deleteContent = async (content: ContentMeta): Promise<void> => { + const url = getUrl(); + await axios.delete(`${url}&id=${content.id}`); + } + + const uploadContent = async (file: File, name: string): Promise<ContentMeta> => { + const url = getUrl(); + //Endpoint returns the new content meta for the uploaded content + const { data } = await axios.put<WebMessage<ContentMeta>>(url, file, { + headers: { + 'Content-Type': getContentType(file), + //Set the content name header as the supplied content name + 'X-Content-Name': name + } + }); + return data.getResultOrThrow(); + } + + const updatePostContent = async (post: PostMeta, content: string): Promise<ContentMeta> => { + const url = getUrl(); + + const { data } = await axios.put<WebMessage<ContentMeta>>(`${url}&id=${post.id}`, content, { + headers: { + 'Content-Type': 'text/html', + //Set the content name header as the post id + 'X-Content-Name': `Content for post ${post.id}` + } + }); + return data.getResultOrThrow(); + } + + const updateContent = async (content: ContentMeta, data: File): Promise<ContentMeta> => { + const url = getUrl(); + + const response = await axios.put<ContentMeta>(`${url}&id=${content.id}`, data, { + headers: { + 'Content-Type': getContentType(data), + //Set the content name header as the supplied content name + 'X-Content-Name': content.name + } + }); + return response.data; + } + + const updateContentName = async (content: ContentMeta, name: string): Promise<ContentMeta> => { + const url = getUrl(); + + //Create a new object with the same properties as the content meta, but with the new name + const ct = { ...content, name: name } + const { data } = await axios.patch<WebMessage<ContentMeta>>(url, ct); + return data.getResultOrThrow(); + } + + const getPublicUrl = async (content: ContentMeta): Promise<string> => { + //Get the public url from the server + const response = await axios.get(`${getUrl()}&id=${content.id}&getlink=true`); + + //Response is a web-message + if (response.data?.success !== true) { + throw { response } + } + return response.data.result; + } + + return { + getPostContent, + getAllContent, + deleteContent, + uploadContent, + updateContentName, + updatePostContent, + updateContent, + getPublicUrl + }; +} |