cleanup

2023-04-19 14:26:27 +10:00
parent ff93265890
commit f0459b3f6e
4 changed files with 170 additions and 216 deletions
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -143,36 +143,6 @@ li {
 //     margin-bottom: 1rem;
 // }

-// /* Page Errors */
-// .sm-page-error {
-//     display: flex;
-//     flex-direction: column;
-
-//     .sm-error-number {
-//         display: flex;
-//         justify-content: center;
-//         align-items: center;
-//         font-size: 30vw;
-//         font-weight: 600;
-//         color: #295b7e;
-
-//         img {
-//             height: 25vw;
-//             margin: 0 0.5rem 0 1rem;
-//         }
-//     }
-
-//     .sm-error-content {
-//         text-align: center;
-//         font-size: 120%;
-
-//         h2 {
-//             margin-top: 0;
-//             margin-bottom: 0.5rem;
-//         }
-//     }
-// }
-
 /* SM Dialog */
 .dialog-outer {
    position: fixed;
--- a/resources/js/components/SMPage.vue
+++ b/resources/js/components/SMPage.vue
@@ -1,32 +1,35 @@
 <template>
-    <div
-        :class="['sm-page-outer', { 'sm-no-breadcrumbs': noBreadcrumbs }]"
-        :style="styleObject">
-        <SMLoader :loading="loading">
-            <SMErrorForbidden
-                v-if="pageError == 403 || !hasPermission()"></SMErrorForbidden>
-            <SMErrorInternal
-                v-if="pageError >= 500 && hasPermission()"></SMErrorInternal>
-            <SMErrorNotFound
-                v-if="pageError == 404 && hasPermission()"></SMErrorNotFound>
-            <div v-if="pageError < 300 && hasPermission()" class="sm-page">
-                <slot></slot>
-                <SMContainer v-if="slots.container"
-                    ><slot name="container"></slot
-                ></SMContainer>
+    <template v-if="pageError < 300">
+        <slot></slot>
+    </template>
+    <template v-else>
+        <SMContainer class="page-error">
+            <div class="error-number" v-html="modifiedPageError"></div>
+            <div class="error-content">
+                <h2>Ooops!</h2>
+                <p v-if="pageError == 403">This page is not for you to view!</p>
+                <p v-else-if="pageError == 404">
+                    The page you are looking for does not exist!
+                </p>
+                <p v-else>
+                    We are working to fix that what was broken. Please try again
+                    later!
+                </p>
+                <SMButton label="Go Back" @click="handleClick" />
            </div>
-        </SMLoader>
-    </div>
+        </SMContainer>
+    </template>
 </template>

 <script setup lang="ts">
-import { useSlots } from "vue";
+import { useRouter } from "vue-router";
+import { useApplicationStore } from "../store/ApplicationStore";
 import { useUserStore } from "../store/UserStore";
-import SMErrorForbidden from "./errors/Forbidden.vue";
-import SMErrorInternal from "./errors/Internal.vue";
-import SMErrorNotFound from "./errors/NotFound.vue";
-import SMContainer from "./SMContainer.vue";
-import SMLoader from "./SMLoader.vue";
+import SMButton from "../components/SMButton.vue";
+import { computed, watch, ref } from "vue";
+
+const router = useRouter();
+const applicationStore = useApplicationStore();

 const props = defineProps({
    pageError: {
@@ -44,58 +47,79 @@ const props = defineProps({
        default: false,
        required: false,
    },
-    background: {
-        type: String,
-        default: "",
-        required: false,
-    },
-    noBreadcrumbs: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
 });

-const slots = useSlots();
-const userStore = useUserStore();
-let styleObject = {};
+const pageError = ref(props.pageError);

-if (props.background != "") {
-    styleObject["backgroundImage"] = `url('${props.background}')`;
-}
+watch(
+    () => props.pageError,
+    (newValue) => {
+        pageError.value = newValue;
+    }
+);

 /**
- * Return if the current user has the props.permission to view this page.
- *
- * @returns {boolean} If the user has the permission.
+ * Handle user clicking back/home button
 */
-const hasPermission = (): boolean => {
-    return (
-        props.permission.length == 0 ||
-        userStore.permissions.includes(props.permission)
-    );
+const handleClick = () => {
+    router.go(-1);
 };
+
+const modifiedPageError = computed(() => {
+    const errorNumber = pageError.value.toString(); // Convert to string
+    const middleDigit = errorNumber.charAt(1); // Get the middle digit
+
+    if (pageError.value >= 300) {
+        applicationStore.setDynamicTitle("Server Error");
+    }
+
+    if (middleDigit === "0") {
+        return errorNumber.replace(
+            middleDigit,
+            '<img src="/img/sad-monster.png" />'
+        ); // Replace with image
+    } else {
+        return errorNumber; // Use the entire number
+    }
+});
+
+const userStore = useUserStore();
+if (
+    props.permission.length !== 0 &&
+    userStore.permissions.includes(props.permission) == false &&
+    pageError.value < 300
+) {
+    pageError.value = 403;
+}
 </script>

 <style lang="scss">
-.sm-page-outer {
+.page-error {
    display: flex;
    flex-direction: column;
-    flex: 1;
-    width: 100%;
-    padding-bottom: calc(map-get($spacer, 5) * 2);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;

-    &.sm-no-breadcrumbs {
-        margin-bottom: 0;
+    .error-number {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 30vw;
+        font-weight: 600;
+        color: #295b7e;
+
+        img {
+            height: 25vw;
+            margin: 0 0.5rem 0 1rem;
+        }
    }

-    .sm-page {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
+    .error-content {
+        text-align: center;
+        font-size: 120%;
+
+        h2 {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+        }
    }
 }
 </style>
--- a/resources/js/components/errors/Internal.vue
+++ b/resources/js/components/errors/Internal.vue
@@ -1,35 +0,0 @@
-<template>
-    <SMPage no-breadcrumbs>
-        <div class="sm-page-error sm-error-not-found">
-            <div class="sm-error-number">
-                5<img src="/img/sad-monster.png" />0
-            </div>
-            <div class="sm-error-content">
-                <h2>Ooops!</h2>
-                <p>
-                    We are working to fix that what was broken. Please try again
-                    later!
-                </p>
-                <SMButton label="Go Back" @click="handleClick" />
-            </div>
-        </div>
-    </SMPage>
-</template>
-
-<script setup lang="ts">
-import SMButton from "../SMButton.vue";
-import { useRouter } from "vue-router";
-import { useApplicationStore } from "../../store/ApplicationStore";
-
-const router = useRouter();
-const applicationStore = useApplicationStore();
-
-applicationStore.setDynamicTitle("Server Error");
-
-/**
- * Handle user clicking back/home button
- */
-const handleClick = () => {
-    router.go(-1);
-};
-</script>
--- a/resources/js/views/Event.vue
+++ b/resources/js/views/Event.vue
@@ -1,9 +1,5 @@
 <template>
-    <SMPage
-        :full="true"
-        :loading="pageLoading"
-        class="sm-workshop-view"
-        :page-error="pageError">
+    <SMPage :page-error="pageError" permission="admin/userss">
        <div
            class="sm-workshop-image"
            :style="{
@@ -129,6 +125,7 @@ import { SMDate } from "../helpers/datetime";
 import { stringToNumber } from "../helpers/string";
 import { useApplicationStore } from "../store/ApplicationStore";
 import { mediaGetVariantUrl } from "../helpers/media";
+import SMPage from "../components/SMPage.vue";

 const applicationStore = useApplicationStore();

@@ -303,104 +300,102 @@ handleLoad();
 </script>

 <style lang="scss">
-.sm-workshop-view {
-    .sm-workshop-image {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: map-get($spacer, 5) * 4;
-        height: 20vw;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-color: #eee;
-        transition: background-image 0.2s;
+.sm-workshop-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: map-get($spacer, 5) * 4;
+    height: 20vw;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: #eee;
+    transition: background-image 0.2s;

-        .sm-workshop-image-loader {
-            font-size: 5rem;
-            color: $secondary-color;
-        }
+    .sm-workshop-image-loader {
+        font-size: 5rem;
+        color: $secondary-color;
+    }
+}
+
+.sm-workshop-page {
+    display: flex;
+    flex-direction: row;
+
+    .sm-workshop-body,
+    .sm-workshop-info {
+        line-height: 1.5rem;
    }

-    .sm-workshop-page {
-        display: flex;
-        flex-direction: row;
+    .sm-workshop-body {
+        flex: 1;
+        text-align: left;
+    }

-        .sm-workshop-body,
-        .sm-workshop-info {
-            line-height: 1.5rem;
+    .sm-workshop-info {
+        width: 18rem;
+        margin-left: 2rem;
+
+        h4 {
+            margin-bottom: 0.25rem;
+            display: flex;
+            align-items: center;
+            height: 1rem;
+
+            .icon {
+                display: inline-block;
+                width: 1rem;
+                margin-right: 0.5rem;
+                text-align: center;
+            }
        }

-        .sm-workshop-body {
-            flex: 1;
-            text-align: left;
+        p {
+            margin: 0;
+            padding-left: 1.5rem;
+            font-size: 90%;
        }

-        .sm-workshop-info {
-            width: 18rem;
-            margin-left: 2rem;
+        .sm-workshop-registration {
+            margin-top: 1.5rem;
+            line-height: 1.25rem;
+        }

-            h4 {
-                margin-bottom: 0.25rem;
-                display: flex;
-                align-items: center;
-                height: 1rem;
+        .sm-workshop-registration-none,
+        .sm-workshop-registration-soon,
+        .sm-workshop-registration-message {
+            border: 1px solid #ffeeba;
+            background-color: #fff3cd;
+            color: #856404;
+            text-align: center;
+            font-size: 80%;
+            padding: 0.5rem;
+        }

-                .icon {
-                    display: inline-block;
-                    width: 1rem;
-                    margin-right: 0.5rem;
-                    text-align: center;
-                }
-            }
+        .sm-workshop-registration-closed,
+        .sm-workshop-registration-cancelled {
+            border: 1px solid #f5c2c7;
+            background-color: #f8d7da;
+            color: #842029;
+            text-align: center;
+            font-size: 80%;
+            padding: 0.5rem;
+        }

-            p {
-                margin: 0;
-                padding-left: 1.5rem;
-                font-size: 90%;
-            }
+        .sm-workshop-date,
+        .sm-workshop-location,
+        .sm-workshop-price,
+        .sm-workshop-ages {
+            padding: 0 1rem;
+        }

-            .sm-workshop-registration {
-                margin-top: 1.5rem;
-                line-height: 1.25rem;
-            }
-
-            .sm-workshop-registration-none,
-            .sm-workshop-registration-soon,
-            .sm-workshop-registration-message {
-                border: 1px solid #ffeeba;
-                background-color: #fff3cd;
-                color: #856404;
-                text-align: center;
-                font-size: 80%;
-                padding: 0.5rem;
-            }
-
-            .sm-workshop-registration-closed,
-            .sm-workshop-registration-cancelled {
-                border: 1px solid #f5c2c7;
-                background-color: #f8d7da;
-                color: #842029;
-                text-align: center;
-                font-size: 80%;
-                padding: 0.5rem;
-            }
-
-            .sm-workshop-date,
-            .sm-workshop-location,
-            .sm-workshop-price,
-            .sm-workshop-ages {
-                padding: 0 1rem;
-            }
-
-            .sm-workshop-ages p {
-                margin-top: 0.5rem;
-                margin-left: 1rem;
-                padding: 0 0 0 0.5rem;
-                font-size: 80%;
-                border-left: 4px solid $warning-color;
-                line-height: 1.2rem;
-            }
+        .sm-workshop-ages p {
+            margin-top: 0.5rem;
+            margin-left: 1rem;
+            padding: 0 0 0 0.5rem;
+            font-size: 80%;
+            border-left: 4px solid $warning-color;
+            line-height: 1.2rem;
        }
    }
 }