From 3dfe96fa895fc712a1058160761ea10cba01e05b Mon Sep 17 00:00:00 2001 From: James Collins Date: Fri, 21 Apr 2023 11:49:37 +1000 Subject: [PATCH] updated css --- resources/js/components/SMButton.vue | 10 +- resources/js/views/dashboard/MediaList.vue | 127 ++++++++++++--------- 2 files changed, 81 insertions(+), 56 deletions(-) diff --git a/resources/js/components/SMButton.vue b/resources/js/components/SMButton.vue index 976b2cd..69ac127 100644 --- a/resources/js/components/SMButton.vue +++ b/resources/js/components/SMButton.vue @@ -183,7 +183,7 @@ const handleClickItem = (item: string) => { .button { display: inline-block; font-family: var(--header-font-family); - font-weight: 800; + font-weight: 600; padding: 12px 32px 12px 32px; border: 0; background-color: var(--base-color-light); @@ -283,7 +283,8 @@ const handleClickItem = (item: string) => { &.light { background-color: #eee; - color: #095589; + // color: #095589; + color: #333; } &.primary { @@ -294,5 +295,10 @@ const handleClickItem = (item: string) => { &.secondary { background-color: #ccc; } + + &.danger { + background-color: var(--danger-color-light); + color: var(--base-color); + } } diff --git a/resources/js/views/dashboard/MediaList.vue b/resources/js/views/dashboard/MediaList.vue index 9b56730..008d0cc 100644 --- a/resources/js/views/dashboard/MediaList.vue +++ b/resources/js/views/dashboard/MediaList.vue @@ -10,26 +10,26 @@ type="primary" label="Upload Media" /> + @keyup.enter="handleSearch"> - + @@ -62,7 +62,7 @@ import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue"; import SMButton from "../../components/SMButton.vue"; import SMToolbar from "../../components/SMToolbar.vue"; import { api } from "../../helpers/api"; -import { Media } from "../../helpers/api.types"; +import { Media, MediaCollection } from "../../helpers/api.types"; import { SMDate } from "../../helpers/datetime"; import { bytesReadable } from "../../helpers/types"; import { useToastStore } from "../../store/ToastStore"; @@ -77,12 +77,13 @@ import { updateRouterParams } from "../../helpers/url"; const route = useRoute(); const router = useRouter(); const toastStore = useToastStore(); -const pageLoading = ref(true); -const search = ref(route.query.search || ""); + const items = ref([]); -const totalFound = ref(0); -const perPage = 25; -const page = ref(parseInt((route.query.page as string) || "1")); +const itemsLoading = ref(true); +const itemSearch = ref((route.query.search as string) || ""); +const itemsTotal = ref(0); +const itemsPerPage = 25; +const itemsPage = ref(parseInt((route.query.page as string) || "1")); const headers = [ { text: "Name", value: "title", sortable: true }, @@ -91,62 +92,70 @@ const headers = [ { text: "Actions", value: "actions" }, ]; -const handleClickSearch = () => { - page.value = 1; +/** + * Watch if page number changes. + */ +watch(itemsPage, () => { + handleLoad(); +}); + +/** + * Handle searching for item. + */ +const handleSearch = () => { + itemsPage.value = 1; handleLoad(); }; -const handleClick = (item, extra: string): void => { - if (extra.length == 0) { +/** + * Handle user selecting option in action button. + * + * @param {Media} item The media item. + * @param {string} extra The option selected. + * @param option + */ +const handleActionButton = (item: Media, option: string): void => { + if (option.length == 0) { handleEdit(item); - } else if (extra.toLowerCase() == "download") { + } else if (option.toLowerCase() == "download") { handleDownload(item); - } else if (extra.toLowerCase() == "delete") { + } else if (option.toLowerCase() == "delete") { handleDelete(item); } }; /** - * Watch if page number changes. + * Handle loading the page and list */ -watch(page, () => { - handleLoad(); -}); - const handleLoad = async () => { - pageLoading.value = true; + itemsLoading.value = true; items.value = []; - totalFound.value = 0; + itemsTotal.value = 0; - let routerParams = { - search: search.value as string, - page: page.value == 1 ? "" : page.value.toString(), - }; - updateRouterParams(router, routerParams); + updateRouterParams(router, { + search: itemSearch.value, + page: itemsPage.value == 1 ? "" : itemsPage.value.toString(), + }); try { let params = { - page: page.value, - limit: perPage, + page: itemsPage.value, + limit: itemsPerPage, }; - if (search.value.length > 0) { + if (itemSearch.value.length > 0) { params[ "filter" - ] = `title:${search.value},OR,name:${search.value},OR,description:${search.value}`; + ] = `title:${itemSearch.value},OR,name:${itemSearch.value},OR,description:${itemSearch.value}`; } - let res = await api.get({ + let result = await api.get({ url: "/media", params: params, }); - if (!res.data.media) { - throw new Error("The server is currently not available"); - } - items.value = []; - - res.data.media.forEach(async (row) => { + const data = result.data as MediaCollection; + data.media.forEach(async (row) => { if (row.created_at !== "undefined") { row.created_at = new SMDate(row.created_at, { format: "ymd", @@ -163,24 +172,27 @@ const handleLoad = async () => { items.value.push(row); }); - totalFound.value = res.data.total; + itemsTotal.value = data.total; } catch (error) { if (error.status != 404) { toastStore.addToast({ title: "Server Error", - content: error.message, - //"An error occurred retrieving the list from the server.", + content: + "An error occurred retrieving the list from the server.", type: "danger", }); } } finally { - pageLoading.value = false; + itemsLoading.value = false; } }; -handleLoad(); - -const handleEdit = (item) => { +/** + * User requests to edit the item + * + * @param {Media} item The media item. + */ +const handleEdit = (item: Media) => { router.push({ name: "dashboard-media-edit", params: { id: item.id } }); }; @@ -203,9 +215,9 @@ const handleDelete = async (item: Media) => { }, }); - if (result) { + if (result == true) { try { - let r = await api.delete({ + await api.delete({ url: "/media/{id}", params: { id: item.id, @@ -230,9 +242,16 @@ const handleDelete = async (item: Media) => { } }; -const handleDownload = (item) => { +/** + * Handle the user requesting to download the item. + * + * @param {Media} item The media item. + */ +const handleDownload = (item: Media) => { window.open(`${item.url}?download=1`, "_blank"); }; + +handleLoad();