STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 3 Actions Packages Projects Releases 3 Wiki Activity

bug fixes

Browse Source
This commit is contained in:
James Collins
2023-04-23 13:56:27 +10:00
parent 95aadd45ee
commit 77aa622610
9 changed files with 418 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
resources/js/components/SMInput.vue
View File

@@ -48,6 +48,19 @@
@input="handleInput"
@keyup="handleKeyup"></textarea>
</template>
<template v-else-if="props.type == 'select'">
<ion-icon
class="select-dropdown-icon"
name="caret-down-outline" />
<select class="select-input-control">
<option
v-for="option in Object.entries(props.options)"
:key="option[0]"
:value="option[0]">
{{ option[1] }}
</option>
</select>
</template>
<template v-else>
<ion-icon
class="invalid-icon"
@@ -146,6 +159,11 @@ const props = defineProps({
default: "",
required: false,
},
options: {
type: Object,
default: null,
required: false,
},
});
const slots = useSlots();
@@ -445,6 +463,24 @@ const handleChange = (event) => {
padding: 15px 30px;
width: auto;
}
.select-dropdown-icon {
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%, -50%);
font-size: 110%;
}
.select-input-control {
appearance: none;
width: 100%;
padding: 22px 16px 8px 16px;
border: 1px solid var(--base-color-darker);
border-radius: 8px;
background-color: var(--base-color-light);
height: 52px;
}
}
}
@@ -466,10 +502,4 @@ const handleChange = (event) => {
}
}
}
@media only screen and (max-width: 768px) {
.control-group.control-type-input {
// width: 100%;
}
}
</style>

2
resources/js/helpers/api.types.ts
View File

@@ -14,6 +14,8 @@ export interface Event {
price: string;
ages: string;
attachments: Array<Media>;
created_at: string;
updated_at: string;
}
export interface EventResponse {

28
resources/js/views/Workshops.vue
View File

@@ -5,17 +5,20 @@
<SMInput
v-model="filterKeywords"
label="Keywords"
@blur="handleFilter" />
@blur="handleFilter"
@keyup.enter="handleFilter" />
<SMInput
v-model="filterLocation"
label="Location"
@blur="handleFilter" />
@blur="handleFilter"
@keyup.enter="handleFilter" />
<SMInput
v-model="filterDateRange"
type="daterange"
label="Date Range"
:feedback-invalid="dateRangeError"
@blur="handleFilter" />
@blur="handleFilter"
@keyup.enter="handleFilter" />
</SMToolbar>
<SMPagination
v-if="postsTotal > postsPerPage"
@@ -125,13 +128,16 @@ const handleLoad = async () => {
(title:""cats, dogs", mice",OR,content:"\"cats, dogs\", mice")
*/
query["filter"] = [];
if (filterKeywords.value && filterKeywords.value.length > 0) {
let value = filterKeywords.value.replace(/"/g, '\\"');
query["filter"] = `(title:"${value}",OR,content:"${value}")`;
query["filter"].push(`(title:"${value}",OR,content:"${value}")`);
}
if (filterLocation.value && filterLocation.value.length > 0) {
query["location"] = filterLocation.value;
let value = filterLocation.value.replace(/"/g, '\\"');
query["filter"].push(`(location:"${value}",OR,address:"${value}")`);
}
if (filterDateRange.value && filterDateRange.value.length > 0) {
let error = false;
@@ -167,6 +173,12 @@ const handleLoad = async () => {
formMessage.value = "";
events = [];
if (query["filter"].length > 0) {
query["filter"] = query["filter"].join(",AND,");
} else {
delete query["filter"];
}
if (Object.keys(query).length == 0) {
const now = new Date();
const startingDate = new Date(now.setDate(now.getDate() - 14));
@@ -181,6 +193,8 @@ const handleLoad = async () => {
query["limit"] = postsPerPage;
query["page"] = postsPage.value;
console.log(query);
let result = await api.get({
url: "/events",
params: query,
@@ -330,6 +344,10 @@ const computedAges = (ages: string): string => {
const trimmed = ages.trim();
const regex = /^(\d+)(\s*\+?\s*|\s*-\s*\d+\s*)?$/;
if (trimmed.length === 0) {
return "All ages";
}
if (regex.test(trimmed)) {
return `Ages ${trimmed}`;
}

34
resources/js/views/dashboard/EventEdit.vue
View File

@@ -1,11 +1,13 @@
<template>
<SMPage
:page-error="pageError"
permission="admin/events"
class="sm-page-event-edit">
<template #container>
<h1>{{ page_title }}</h1>
<SMPage :page-error="pageError" permission="admin/events">
<SMMastHead
:title="pageHeading"
:back-link="{ name: 'dashboard-event-list' }"
back-title="Back to Events" />
<SMContainer class="flex-grow-1">
<SMLoading v-if="pageLoading" large />
<SMForm
v-else
:model-value="form"
@submit="handleSubmit"
@failed-validation="handleFailValidation">
@@ -122,7 +124,7 @@
</SMFormFooter>
</SMRow>
</SMForm>
</template>
</SMContainer>
</SMPage>
</template>
@@ -149,11 +151,16 @@ import SMInputAttachments from "../../components/SMInputAttachments.vue";
import SMForm from "../../components/SMForm.vue";
import { EventResponse } from "../../helpers/api.types";
import { useToastStore } from "../../store/ToastStore";
import SMMastHead from "../../components/SMMastHead.vue";
import SMLoading from "../../components/SMLoading.vue";
const route = useRoute();
const router = useRouter();
const page_title = route.params.id ? "Edit Event" : "Create New Event";
const pageError = ref(200);
const pageLoading = ref(true);
const pageHeading = route.params.id ? "Edit Event" : "Create Event";
const attachments = ref([]);
const address_data = computed(() => {
@@ -259,7 +266,7 @@ let form = reactive(
const loadData = async () => {
if (route.params.id) {
try {
form.loading(true);
pageLoading.value = true;
const result = await api.get({
url: "/events/{id}",
@@ -308,7 +315,7 @@ const loadData = async () => {
} catch (err) {
pageError.value = err.response.status;
} finally {
form.loading(false);
pageLoading.value = false;
}
}
};
@@ -380,8 +387,11 @@ const handleSubmit = async () => {
router.push({ name: "dashboard-event-list" });
} catch (error) {
handleFailValidation();
form.apiErrors(error);
useToastStore().addToast({
title: "Server error",
content: "An error occurred saving the media.",
type: "danger",
});
}
};

453
resources/js/views/dashboard/EventList.vue
View File

@@ -1,145 +1,156 @@
<template>
<SMPage permission="admin/events">
<template #container>
<SMHeading heading="Events" />
<SMMessage
v-if="formMessage.message"
:icon="formMessage.icon"
:type="formMessage.type"
:message="formMessage.message" />
<SMPage permission="admin/media">
<SMMastHead
title="Events"
:back-link="{ name: 'dashboard' }"
back-title="Return to Dashboard" />
<SMContainer class="flex-grow-1">
<SMToolbar>
<template #left>
<SMButton
type="primary"
label="Create Event"
:small="true"
@click="handleCreate" />
</template>
<template #right>
<SMInput
v-model="search"
label="Search"
:small="true"
style="max-width: 250px" />
</template>
<SMButton
:to="{ name: 'workshops' }"
type="primary"
label="Create Event"
@click="handleCreate" />
<SMInput
v-model="itemSearch"
label="Search"
class="toolbar-search"
@keyup.enter="handleSearch">
<template #append>
<SMButton
type="primary"
label="Search"
icon="search-outline"
@click="handleSearch" />
</template>
</SMInput>
</SMToolbar>
<EasyDataTable
v-model:server-options="serverOptions"
:server-items-length="serverItemsLength"
:loading="formLoading"
:headers="headers"
:items="items"
:search-value="search">
<template #loading>
<SMLoadingIcon />
</template>
<template #item-title="item">
<router-link
:to="{
name: 'dashboard-event-edit',
params: { id: item.id },
}"
>{{ item.title }}</router-link
>
</template>
<template #item-actions="item">
<div class="action-wrapper">
<SMLoading large v-if="itemsLoading" />
<template v-else>
<SMPagination
v-if="items.length < itemsTotal"
v-model="itemsPage"
:total="itemsTotal"
:per-page="itemsPerPage" />
<SMNoItems v-if="items.length == 0" text="No Media Found" />
<SMTable
v-else
:headers="headers"
:items="items"
@row-click="handleEdit">
<template #item-location="item"
>{{ parseEventLocation(item) }}
</template>
<template #item-actions="item">
<SMButton
label="Edit"
:dropdown="{
duplicate: 'Duplicate',
delete: 'Delete',
}"
@click="handleClick(item, $event)"></SMButton>
</div>
</template>
</EasyDataTable>
</template>
size="medium"
@click="
handleActionButton(item, $event)
"></SMButton>
</template>
</SMTable>
</template>
</SMContainer>
</SMPage>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import EasyDataTable from "vue3-easy-data-table";
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { openDialog } from "../../components/SMDialog";
import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
import SMButton from "../../components/SMButton.vue";
import SMHeading from "../../components/SMHeading.vue";
import SMLoadingIcon from "../../components/SMLoadingIcon.vue";
import SMMessage from "../../components/SMMessage.vue";
import SMToolbar from "../../components/SMToolbar.vue";
import SMInput from "../../components/SMInput.vue";
import { api } from "../../helpers/api";
import { EventCollection, Event } from "../../helpers/api.types";
import { SMDate } from "../../helpers/datetime";
import { debounce } from "../../helpers/debounce";
import { EventCollection, EventResponse } from "../../helpers/api.types";
import { bytesReadable } from "../../helpers/types";
import { updateRouterParams } from "../../helpers/url";
import { useToastStore } from "../../store/ToastStore";
import SMButton from "../../components/SMButton.vue";
import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
import SMInput from "../../components/SMInput.vue";
import SMLoading from "../../components/SMLoading.vue";
import SMMastHead from "../../components/SMMastHead.vue";
import SMNoItems from "../../components/SMNoItems.vue";
import SMPagination from "../../components/SMPagination.vue";
import SMTable from "../../components/SMTable.vue";
import SMToolbar from "../../components/SMToolbar.vue";
const route = useRoute();
const router = useRouter();
const search = ref("");
const toastStore = useToastStore();
const items = ref([]);
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: "Title", value: "title", sortable: true },
{ text: "Starts", value: "start_at_formatted", sortable: true },
{ text: "Created", value: "created_at_formatted", sortable: true },
{ text: "Updated", value: "updated_at_formatted", sortable: true },
{ text: "Starts", value: "start_at", sortable: true },
{ text: "Location", value: "location", sortable: true },
{ text: "Actions", value: "actions" },
];
const items = ref([]);
const formMessage = reactive({
icon: "",
type: "",
message: "",
/**
* Watch if page number changes.
*/
watch(itemsPage, () => {
handleLoad();
});
const formLoading = ref(false);
const serverItemsLength = ref(0);
const serverOptions = ref({
page: 1,
rowsPerPage: 25,
sortBy: "start_at",
sortType: "desc",
});
/**
* 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 {Event} item The event item.
* @param option
*/
const handleActionButton = (item: Event, option: string): void => {
if (option.length == 0) {
handleEdit(item);
} else if (extra.toLowerCase() == "duplicate") {
} else if (option.toLowerCase() == "duplicate") {
handleDuplicate(item);
} else if (extra.toLowerCase() == "delete") {
} else if (option.toLowerCase() == "delete") {
handleDelete(item);
}
};
const loadFromServer = async () => {
formMessage.icon = "";
formMessage.type = "error";
formMessage.message = "";
formLoading.value = true;
/**
* Handle loading the page and list
*/
const handleLoad = async () => {
itemsLoading.value = true;
items.value = [];
itemsTotal.value = 0;
updateRouterParams(router, {
search: itemSearch.value,
page: itemsPage.value == 1 ? "" : itemsPage.value.toString(),
});
try {
let params = {};
if (serverOptions.value.sortBy) {
params["sort"] = serverOptions.value.sortBy.replace(
"_formatted",
""
);
if (
serverOptions.value.sortType &&
serverOptions.value.sortType === "desc"
) {
params["sort"] = "-" + params["sort"];
}
}
let params = {
page: itemsPage.value,
limit: itemsPerPage,
};
params["page"] = serverOptions.value.page;
params["limit"] = serverOptions.value.rowsPerPage;
if (search.value.length > 0) {
params["title"] = search.value;
if (itemSearch.value.length > 0) {
params[
"filter"
] = `title:${itemSearch.value},OR,name:${itemSearch.value},OR,description:${itemSearch.value}`;
}
let result = await api.get({
@@ -148,144 +159,89 @@ const loadFromServer = async () => {
});
const data = result.data as EventCollection;
if (!data.events) {
throw new Error("The server is currently not available");
}
items.value = data.events;
items.value.forEach((row) => {
data.events.forEach(async (row) => {
if (row.start_at !== "undefined") {
row.start_at_formatted = new SMDate(row.start_at, {
row.start_at = new SMDate(row.start_at, {
format: "ymd",
utc: true,
}).relative();
}
if (row.end_at !== "undefined") {
row.end_at = new SMDate(row.end_at, {
format: "ymd",
utc: true,
}).relative();
}
if (row.publish_at !== "undefined") {
row.publish_at = new SMDate(row.publish_at, {
format: "ymd",
utc: true,
}).relative();
}
if (row.created_at !== "undefined") {
row.created_at_formatted = new SMDate(row.created_at, {
row.created_at = new SMDate(row.created_at, {
format: "ymd",
utc: true,
}).relative();
}
if (row.updated_at !== "undefined") {
row.updated_at_formatted = new SMDate(row.updated_at, {
row.updated_at = new SMDate(row.updated_at, {
format: "ymd",
utc: true,
}).relative();
}
items.value.push(row);
});
serverItemsLength.value = data.total;
} catch (err) {
// restParseErrors(formData, [formMessage, "message"], err);
itemsTotal.value = data.total;
} catch (error) {
if (error.status != 404) {
toastStore.addToast({
title: "Server Error",
content:
"An error occurred retrieving the list from the server.",
type: "danger",
});
}
} finally {
itemsLoading.value = false;
}
formLoading.value = false;
};
loadFromServer();
watch(
serverOptions,
() => {
loadFromServer();
},
{ deep: true }
);
const debouncedFilter = debounce(loadFromServer, 1000);
watch(search, () => {
debouncedFilter();
});
const handleCreate = () => {
/**
* Handle creating new event.
*/
const handleCreate = (): void => {
router.push({ name: "dashboard-event-create" });
};
const handleEdit = (item) => {
/**
* Handle duplicating an event.
*
* @param item
*/
const handleDuplicate = (item: Event): void => {
alert("not implemented");
};
/**
* User requests to edit the item
*
* @param {Event} item The event item.
*/
const handleEdit = (item: Event) => {
router.push({ name: "dashboard-event-edit", params: { id: item.id } });
};
const handleDuplicate = async (item) => {
const duplicateItem = { ...item };
try {
let tries = 1;
let number = 2;
let originalTitle = duplicateItem.title;
const titleMatch = originalTitle.match(/[- ](\d+)$/);
if (titleMatch !== null) {
number = parseInt(titleMatch[1], 10);
originalTitle = originalTitle.replace(
new RegExp(`[- ]${number}$`),
""
);
}
delete duplicateItem.key;
delete duplicateItem.id;
delete duplicateItem.created_at;
delete duplicateItem.updated_at;
while (tries < 25) {
const title = `${originalTitle} ${number}`;
try {
await api.get({
url: `/events/?title==${title}`,
});
} catch (err) {
if (err.status === 404) {
duplicateItem.title = `${originalTitle} ${number}`;
break;
} else {
useToastStore().addToast({
title: "Server error",
content: "The event could not be duplicated.",
type: "danger",
});
return;
}
}
++tries;
++number;
}
const result = await api.post({
url: "/events",
body: duplicateItem,
});
const data = result.data as EventResponse;
loadFromServer();
useToastStore().addToast({
title: "Event duplicated",
content: "The event was duplicated successfully.",
type: "success",
});
router.push({
name: "dashboard-event-edit",
params: { id: data.event.id },
});
} catch (err) {
useToastStore().addToast({
title: "Server error",
content: "The event could not be duplicated.",
type: "danger",
});
}
};
const handleDelete = async (item) => {
/**
* Request to delete an event item from the server.
*
* @param {Event} item The event object to delete.
*/
const handleDelete = async (item: Event) => {
let result = await openDialog(SMDialogConfirm, {
title: "Delete User?",
title: "Delete File?",
text: `Are you sure you want to delete the event <strong>${item.title}</strong>?`,
cancel: {
type: "secondary",
@@ -293,30 +249,77 @@ const handleDelete = async (item) => {
},
confirm: {
type: "danger",
label: "Delete Post",
label: "Delete File",
},
});
if (result == true) {
try {
await api.delete({
url: `/events/{id}`,
url: "/events/{id}",
params: {
id: item.id,
},
});
loadFromServer();
useToastStore().addToast({
title: "Post deleted",
content: "The post has been deleted successfully.",
toastStore.addToast({
title: "Event Deleted",
content: `The event ${item.title} has been deleted.`,
type: "success",
});
} catch (err) {
formMessage.message = err.response?.data?.message;
handleLoad();
} catch (error) {
toastStore.addToast({
title: "Error Deleting Event",
content:
error.data?.message ||
"An unexpected server error occurred",
type: "danger",
});
}
}
};
/**
* Parse Event location for humans.
*
* @param {Event} item The event object to delete.
* @returns {string} human readable location.
*/
const parseEventLocation = (item: Event) => {
if (item.location == "online") {
return "Online";
}
return item.address;
};
handleLoad();
</script>
<style lang="scss"></style>
<style lang="scss">
.page-dashboard-event-list {
.toolbar-search {
max-width: 350px;
}
.table tr {
td:first-of-type,
td:nth-of-type(2) {
word-break: break-all;
}
td:not(:first-of-type) {
white-space: nowrap;
}
}
}
@media only screen and (max-width: 768px) {
.page-dashboard-event-list {
.toolbar-search {
max-width: none;
}
}
}
</style>

16
resources/js/views/dashboard/MediaEdit.vue
View File

@@ -6,7 +6,11 @@
back-title="Back to Media" />
<SMContainer class="flex-grow-1">
<SMLoading v-if="pageLoading" large />
<SMForm v-else :model-value="form" @submit="handleSubmit">
<SMForm
v-else
:model-value="form"
@submit="handleSubmit"
@failed-validation="handleFailValidation">
<SMRow>
<SMColumn class="media-container">
<!-- <div class="media-container"> -->
@@ -226,7 +230,6 @@ const handleSubmit = async () => {
router.push({ name: "dashboard-media-list" });
} catch (error) {
console.log(error);
useToastStore().addToast({
title: "Server error",
content: "An error occurred saving the media.",
@@ -237,6 +240,15 @@ const handleSubmit = async () => {
}
};
const handleFailValidation = () => {
useToastStore().addToast({
title: "Save Error",
content:
"There are some errors in the form. Fix these before continuing.",
type: "danger",
});
};
const handleDelete = async () => {
let result = await openDialog(DialogConfirm, {
title: "Delete File?",

120
resources/js/views/dashboard/MediaList.vue
View File

@@ -1,62 +1,66 @@
<template>
<SMMastHead
title="Media"
:back-link="{ name: 'dashboard' }"
back-title="Return to Dashboard" />
<SMContainer class="flex-grow-1">
<SMToolbar>
<SMButton
:to="{ name: 'workshops' }"
type="primary"
label="Upload Media" />
<SMInput
v-model="itemSearch"
label="Search"
class="toolbar-search"
@keyup.enter="handleSearch">
<template #append>
<SMButton
type="primary"
label="Search"
icon="search-outline"
@click="handleSearch" />
</template>
</SMInput>
</SMToolbar>
<SMLoading large v-if="itemsLoading" />
<template v-else>
<SMPagination
v-if="items.length < itemsTotal"
v-model="itemsPage"
:total="itemsTotal"
:per-page="itemsPerPage" />
<SMNoItems v-if="items.length == 0" text="No Media Found" />
<SMTable
v-else
:headers="headers"
:items="items"
@row-click="handleEdit">
<template #item-size="item">
{{ bytesReadable(item.size) }}
</template>
<template #item-title="item"
>{{ item.title }}<br /><span class="small"
>({{ item.name }})</span
></template
>
<template #item-actions="item">
<SMButton
label="Edit"
:dropdown="{
download: 'Download',
delete: 'Delete',
}"
size="medium"
@click="handleActionButton(item, $event)"></SMButton>
</template>
</SMTable>
</template>
</SMContainer>
<SMPage permission="admin/media">
<SMMastHead
title="Media"
:back-link="{ name: 'dashboard' }"
back-title="Return to Dashboard" />
<SMContainer class="flex-grow-1">
<SMToolbar>
<SMButton
:to="{ name: 'workshops' }"
type="primary"
label="Upload Media" />
<SMInput
v-model="itemSearch"
label="Search"
class="toolbar-search"
@keyup.enter="handleSearch">
<template #append>
<SMButton
type="primary"
label="Search"
icon="search-outline"
@click="handleSearch" />
</template>
</SMInput>
</SMToolbar>
<SMLoading large v-if="itemsLoading" />
<template v-else>
<SMPagination
v-if="items.length < itemsTotal"
v-model="itemsPage"
:total="itemsTotal"
:per-page="itemsPerPage" />
<SMNoItems v-if="items.length == 0" text="No Media Found" />
<SMTable
v-else
:headers="headers"
:items="items"
@row-click="handleEdit">
<template #item-size="item">
{{ bytesReadable(item.size) }}
</template>
<template #item-title="item"
>{{ item.title }}<br /><span class="small"
>({{ item.name }})</span
></template
>
<template #item-actions="item">
<SMButton
label="Edit"
:dropdown="{
download: 'Download',
delete: 'Delete',
}"
size="medium"
@click="
handleActionButton(item, $event)
"></SMButton>
</template>
</SMTable>
</template>
</SMContainer>
</SMPage>
</template>
<script setup lang="ts">