bug fixes

resources/js/components/SMImage.vue

@@ -45,6 +45,7 @@ const imgError = ref(false);
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        margin: 0 auto;
 
         ion-icon {
             font-size: 300%;

resources/js/components/SMInput.vue

@@ -572,7 +572,7 @@ const handleMediaSelect = async () => {
                 border-style: solid;
                 border-color: var(--base-color-darker);
                 border-radius: 0 8px 8px 0;
-                padding: 15px 30px;
+                padding: 16px 30px;
                 width: auto;
             }
 

resources/js/router/index.js

@@ -324,7 +324,7 @@ export const routes = [
                             import("@/views/dashboard/MediaEdit.vue"),
                     },
                     {
-                        path: "edit/:id",
+                        path: ":id",
                         name: "dashboard-media-edit",
                         meta: {
                             title: "Edit Media",

resources/js/views/dashboard/MediaEdit.vue

@@ -11,11 +11,9 @@
                 :model-value="form"
                 @submit="handleSubmit"
                 @failed-validation="handleFailValidation">
-                <SMRow>
+                <SMRow v-if="route.params.id">
                     <SMColumn class="media-container">
-                        <!-- <div class="media-container"> -->
                         <SMImage :src="imageUrl" />
-                        <!-- </div> -->
                     </SMColumn>
                 </SMRow>
                 <SMRow>
@@ -79,7 +77,7 @@
                     <template #left>
                         <SMButton
                             :form="form"
-                            v-if="route.params.id !== 'create'"
+                            v-if="route.params.id"
                             type="danger"
                             label="Delete"
                             @click="handleDelete" />
@@ -91,7 +89,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from "vue";
+import { computed, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { api } from "../../helpers/api";
 import { Form, FormControl } from "../../helpers/form";
@@ -116,8 +114,7 @@ const router = useRouter();
 
 const pageError = ref(200);
 const pageLoading = ref(true);
-const pageHeading =
-    route.params.id !== "create" ? "Edit Media" : "Upload Media";
+const pageHeading = route.params.id ? "Edit Media" : "Upload Media";
 
 const form = reactive(
     Form({
@@ -141,7 +138,7 @@ const fileData = reactive({
 const imageUrl = ref("");
 
 const handleLoad = async () => {
-    if (route.params.id !== "create") {
+    if (route.params.id) {
         try {
             let result = await api.get({
                 url: "/media/{id}",
@@ -196,7 +193,7 @@ const handleSubmit = async () => {
             form.controls.description.value as string
         );
 
-        if (route.params.id !== "create") {
+        if (route.params.id) {
             await api.put({
                 url: "/media/{id}",
                 params: {
@@ -222,10 +219,7 @@ const handleSubmit = async () => {
         }
 
         useToastStore().addToast({
-            title:
-                route.params.id !== "create"
-                    ? "Media Updated"
-                    : "Media Created",
+            title: route.params.id ? "Media Updated" : "Media Created",
             content: route.params.id
                 ? "The media item has been updated."
                 : "The media item been created.",