From 77aa6226107b170dd3158debe08fdd376b9fc121 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Sun, 23 Apr 2023 13:56:27 +1000
Subject: [PATCH] bug fixes

---
 app/Conductors/Conductor.php               |  38 +-
 app/Conductors/EventConductor.php          |   5 +-
 resources/js/components/SMInput.vue        |  42 +-
 resources/js/helpers/api.types.ts          |   2 +
 resources/js/views/Workshops.vue           |  28 +-
 resources/js/views/dashboard/EventEdit.vue |  34 +-
 resources/js/views/dashboard/EventList.vue | 453 +++++++++++----------
 resources/js/views/dashboard/MediaEdit.vue |  16 +-
 resources/js/views/dashboard/MediaList.vue | 120 +++---
 9 files changed, 418 insertions(+), 320 deletions(-)

diff --git a/app/Conductors/Conductor.php b/app/Conductors/Conductor.php
index d6798da..4159a82 100644
--- a/app/Conductors/Conductor.php
+++ b/app/Conductors/Conductor.php
@@ -6,6 +6,7 @@ use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Str;
 
 class Conductor
@@ -552,19 +553,35 @@ class Conductor
         } else {
             $limitFields = array_map('strtolower', $limitFields);
         }
-
         $tokens = preg_split('/([()]|,OR,|,AND,|,)/', $filterString, -1, (PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE));
         $glued = [];
         $glueToken = '';
         foreach ($tokens as $item) {
             if ($glueToken === '') {
-                if (preg_match('/(?<!\\\\)[\'"]/', $item, $matches, PREG_OFFSET_CAPTURE) === 1) {
-                    $glueToken = $matches[0][0];
-                    $item = substr($item, 0, $matches[0][1]) . substr($item, ($matches[0][1] + 1));
-                    $item = str_replace("\\$glueToken", $glueToken, $item);
-                }
-
-                $glued[] = $item;
+                $amount = preg_match_all('/(?<!\\\\)[\'"]/', $item, $matches, PREG_OFFSET_CAPTURE);
+                if ($amount > 0) {
+                    $glueToken = $matches[0][0][0];
+                    if ($amount === 1) {
+                        $item = substr($item, 0, $matches[0][1]) . substr($item, ($matches[0][1] + 1));
+                        $item = str_replace("\\$glueToken", $glueToken, $item);
+                        $glued[] = $item;
+                    } else {
+                        $lastPos = 0;
+                        $newStr = '';
+                        foreach ($matches[0] as $pos) {
+                            $matchLen = strlen($glueToken);
+                            $startPos = ($pos[1] - $lastPos);
+                            $newStr .= substr($item, $lastPos, $startPos);
+                            $lastPos = ($pos[1] + $matchLen);
+                        }
+                        $newStr .= substr($item, $lastPos);
+                        $newStr = str_replace("\\$glueToken", $glueToken, $newStr);
+                        $glued[] = $newStr;
+                        $glueToken = '';
+                    }
+                } else {
+                    $glued[] = $item;
+                }//end if
             } else {
                 // search for ending glue token
                 if (preg_match('/(?<!\\\\)' . $glueToken . '/', $item, $matches, PREG_OFFSET_CAPTURE) === 1) {
@@ -575,7 +592,7 @@ class Conductor
                 $item = str_replace("\\$glueToken", $glueToken, $item);
 
                 $glued[(count($glued) - 1)] .= $item;
-            }
+            }//end if
         }//end foreach
         $tokens = $glued;
 
@@ -671,7 +688,10 @@ class Conductor
             return $index;
         };
 
+        Log::info(print_r($tokens, true));
         $parseTokens($tokens, 0, 0);
+
+        // Log::info($this->query->toSql());
     }
 
     /**
diff --git a/app/Conductors/EventConductor.php b/app/Conductors/EventConductor.php
index 0b77877..c5a2666 100644
--- a/app/Conductors/EventConductor.php
+++ b/app/Conductors/EventConductor.php
@@ -24,7 +24,6 @@ class EventConductor extends Conductor
 
     /**
      * The included fields
-     * 
      * @var string[]
      */
     protected $includes = ['attachments'];
@@ -101,7 +100,7 @@ class EventConductor extends Conductor
 
     /**
      * Include Attachments Field.
-     * 
+     *
      * @param Model $model Them model.
      * @return mixed The model result.
      */
@@ -114,7 +113,7 @@ class EventConductor extends Conductor
 
     /**
      * Transform the Hero field.
-     * 
+     *
      * @param mixed $value The current value.
      * @return array The new value.
      */
diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue
index f2ee6fa..ddd05c5 100644
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -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>
diff --git a/resources/js/helpers/api.types.ts b/resources/js/helpers/api.types.ts
index 8d8079b..339fa2c 100644
--- a/resources/js/helpers/api.types.ts
+++ b/resources/js/helpers/api.types.ts
@@ -14,6 +14,8 @@ export interface Event {
     price: string;
     ages: string;
     attachments: Array<Media>;
+    created_at: string;
+    updated_at: string;
 }
 
 export interface EventResponse {
diff --git a/resources/js/views/Workshops.vue b/resources/js/views/Workshops.vue
index fb96ffe..6f0bbdd 100644
--- a/resources/js/views/Workshops.vue
+++ b/resources/js/views/Workshops.vue
@@ -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}`;
     }
diff --git a/resources/js/views/dashboard/EventEdit.vue b/resources/js/views/dashboard/EventEdit.vue
index b811549..c5d8da4 100644
--- a/resources/js/views/dashboard/EventEdit.vue
+++ b/resources/js/views/dashboard/EventEdit.vue
@@ -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",
+        });
     }
 };
 
diff --git a/resources/js/views/dashboard/EventList.vue b/resources/js/views/dashboard/EventList.vue
index a56447b..1545038 100644
--- a/resources/js/views/dashboard/EventList.vue
+++ b/resources/js/views/dashboard/EventList.vue
@@ -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>
diff --git a/resources/js/views/dashboard/MediaEdit.vue b/resources/js/views/dashboard/MediaEdit.vue
index d750254..eb51d8f 100644
--- a/resources/js/views/dashboard/MediaEdit.vue
+++ b/resources/js/views/dashboard/MediaEdit.vue
@@ -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?",
diff --git a/resources/js/views/dashboard/MediaList.vue b/resources/js/views/dashboard/MediaList.vue
index f785787..e6dad97 100644
--- a/resources/js/views/dashboard/MediaList.vue
+++ b/resources/js/views/dashboard/MediaList.vue
@@ -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">