From f8fe5c92aadf8f87f57f72fde1ca9ce540741dba Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Fri, 28 Jul 2023 09:29:05 +1000
Subject: [PATCH] cleanup

---
 resources/js/components/SMImageGallery.vue |  6 +--
 resources/js/components/SMSelectImage.vue  |  6 +--
 resources/js/views/dashboard/MediaEdit.vue | 55 ++++++++++++----------
 resources/js/views/dashboard/MediaList.vue | 34 ++++++-------
 4 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/resources/js/components/SMImageGallery.vue b/resources/js/components/SMImageGallery.vue
index e033545..621b482 100644
--- a/resources/js/components/SMImageGallery.vue
+++ b/resources/js/components/SMImageGallery.vue
@@ -14,13 +14,13 @@
             class="flex flex-col flex-justify-center relative sm-gallery-item p-1"
             :key="index">
             <img
-                :src="mediaGetVariantUrl(image as Media, 'small')"
+                :src="mediaGetThumbnail(image as Media, 'small')"
                 class="max-h-40 max-w-40 cursor-pointer"
                 @click="showGalleryModal(index)" />
             <div
                 v-if="props.showEditor"
                 class="absolute rounded-5 bg-white -top-0.25 -right-0.25 hidden cursor-pointer item-delete"
-                @click="handleRemoveItem(image.id)">
+                @click="handleRemoveItem((image as Media).id)">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="h-6 w-6 block"
@@ -82,7 +82,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import { Media } from "../helpers/api.types";
-import { mediaGetVariantUrl } from "../helpers/media";
+import { mediaGetThumbnail, mediaGetVariantUrl } from "../helpers/media";
 import { openDialog } from "./SMDialog";
 import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
 
diff --git a/resources/js/components/SMSelectImage.vue b/resources/js/components/SMSelectImage.vue
index 220b3ba..1d76e23 100644
--- a/resources/js/components/SMSelectImage.vue
+++ b/resources/js/components/SMSelectImage.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="flex flex-col flex-1 flex-align-center">
         <label class="control-label" v-bind="{ for: id }">{{ label }}</label>
-        <div v-if="mediaUrl?.length > 0" class="text-center">
+        <div v-if="mediaUrl?.length > 0" class="text-center mb-4">
             <img
                 class="max-w-48 max-h-48"
-                :src="mediaGetVariantUrl(value, 'medium')" />
+                :src="mediaGetThumbnail(value, 'medium')" />
         </div>
         <svg
             v-else
@@ -32,7 +32,7 @@
 import { inject, watch, ref, useSlots, computed } from "vue";
 import { isEmpty, generateRandomElementId } from "../helpers/utils";
 import { toTitleCase } from "../helpers/string";
-import { mediaGetVariantUrl } from "../helpers/media";
+import { mediaGetThumbnail } from "../helpers/media";
 import { openDialog } from "./SMDialog";
 import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
 import { Media } from "../helpers/api.types";
diff --git a/resources/js/views/dashboard/MediaEdit.vue b/resources/js/views/dashboard/MediaEdit.vue
index 3d882e5..0309c2d 100644
--- a/resources/js/views/dashboard/MediaEdit.vue
+++ b/resources/js/views/dashboard/MediaEdit.vue
@@ -12,11 +12,7 @@
                 @submit="handleSubmit"
                 @failed-validation="handleFailValidation">
                 <div>
-                    <SMImage
-                        v-if="!editMultiple"
-                        class="mb-8"
-                        :src="imageUrl" />
-                    <SMImageStack v-else class="mb-8" :src="imageStackUrls" />
+                    <SMImageGallery class="mb-8" :model-value="galleryItems" />
                 </div>
                 <SMSelectImage
                     v-if="!editMultiple"
@@ -61,17 +57,20 @@
                     type="static"
                     label="URL" />
                 <SMInput class="mb-8" textarea control="description" />
-                <input
-                    role="button"
-                    type="submit"
-                    class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
-                    :value="editMultiple ? 'Save All' : 'Save'" />
-                <button
-                    v-if="route.params.id"
-                    type="button"
-                    @click="handleDelete">
-                    {{ editMultiple ? "Delete All" : "Delete" }}
-                </button>
+                <div class="flex flex-justify-end gap-4">
+                    <button
+                        v-if="route.params.id"
+                        type="button"
+                        class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-red-600 hover:bg-red-500 text-white cursor-pointer"
+                        @click="handleDelete">
+                        {{ editMultiple ? "Delete All" : "Delete" }}
+                    </button>
+                    <input
+                        role="button"
+                        type="submit"
+                        class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                        :value="editMultiple ? 'Save All' : 'Save'" />
+                </div>
             </SMForm>
         </div>
     </template>
@@ -83,7 +82,7 @@ import { useRoute, useRouter } from "vue-router";
 import { api } from "../../helpers/api";
 import { Form, FormControl } from "../../helpers/form";
 import { bytesReadable } from "../../helpers/types";
-import { And, FileSize, Required } from "../../helpers/validate";
+import { And, Required } from "../../helpers/validate";
 import { MediaResponse } from "../../helpers/api.types";
 import { openDialog } from "../../components/SMDialog";
 import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
@@ -92,17 +91,15 @@ import SMInput from "../../components/SMInput.vue";
 import SMMastHead from "../../components/SMMastHead.vue";
 import SMLoading from "../../components/SMLoading.vue";
 import { useToastStore } from "../../store/ToastStore";
-import SMImage from "../../components/SMImage.vue";
-import SMImageStack from "../../components/SMImageStack.vue";
 import SMPageStatus from "../../components/SMPageStatus.vue";
 import SMSelectImage from "../../components/SMSelectImage.vue";
 import { userHasPermission } from "../../helpers/utils";
+import SMImageGallery from "../../components/SMImageGallery.vue";
 
 const route = useRoute();
 const router = useRouter();
 
 const pageError = ref(200);
-const pageLoading = ref(true);
 const editMultiple = "id" in route.params && route.params.id.includes(",");
 const pageHeading = route.params.id
     ? editMultiple
@@ -110,7 +107,7 @@ const pageHeading = route.params.id
         : "Edit Media"
     : "Upload Media";
 const progressText = ref("");
-const imageStackUrls = ref([]);
+const galleryItems = ref([]);
 
 const form = reactive(
     Form({
@@ -124,7 +121,7 @@ const form = reactive(
 const fileData = reactive({
     url: "Not available",
     mime_type: "--",
-    size: "--",
+    size: 0,
     storage: "--",
     status: "--",
     dimensions: "--",
@@ -137,6 +134,8 @@ const handleLoad = async () => {
     if (route.params.id) {
         if (editMultiple === false) {
             try {
+                form.loading(true);
+
                 let result = await api.get({
                     url: "/media/{id}",
                     params: {
@@ -146,7 +145,7 @@ const handleLoad = async () => {
 
                 const data = result.data as MediaResponse;
 
-                form.controls.file.value = data.medium.name;
+                form.controls.file.value = data.medium;
                 form.controls.title.value = data.medium.title;
                 form.controls.description.value = data.medium.description;
                 form.controls.permission.value = data.medium.permission;
@@ -162,10 +161,14 @@ const handleLoad = async () => {
                 imageUrl.value = fileData.url;
             } catch (err) {
                 pageError.value = err.status;
+            } finally {
+                form.loading(false);
             }
         } else {
             (route.params.id as string).split(",").forEach(async (id) => {
                 try {
+                    form.loading(true);
+
                     let result = await api.get({
                         url: "/media/{id}",
                         params: {
@@ -174,15 +177,15 @@ const handleLoad = async () => {
                     });
 
                     const data = result.data as MediaResponse;
-                    imageStackUrls.value.push(data.medium.url);
+                    galleryItems.value.push(data.medium);
                 } catch (err) {
                     pageError.value = err.status;
+                } finally {
+                    form.loading(false);
                 }
             });
         }
     }
-
-    pageLoading.value = false;
 };
 
 const handleSubmit = async (enableFormCallBack) => {
diff --git a/resources/js/views/dashboard/MediaList.vue b/resources/js/views/dashboard/MediaList.vue
index a834385..29aff0c 100644
--- a/resources/js/views/dashboard/MediaList.vue
+++ b/resources/js/views/dashboard/MediaList.vue
@@ -62,7 +62,7 @@
                 <SMTable
                     :headers="headers"
                     :items="items"
-                    class="sm-table-media">
+                    class="sm-table-media mb-4">
                     <template #item-select="item">
                         <SMCheckbox
                             v-model="itemsSelected[item.id]"
@@ -121,22 +121,24 @@
                         </button>
                     </template>
                 </SMTable>
-                <div class="align-items-center">
-                    <div>
-                        <button
-                            type="button"
-                            :disabled="computedSelectedCount == 0"
-                            @click="handleDeleteSelected">
-                            Delete Selected
-                        </button>
-                        <button
-                            type="button"
-                            :disabled="computedSelectedCount == 0"
-                            @click="handleEditSelected">
-                            Edit Selected
-                        </button>
+                <div class="flex flex-justify-start gap-4 flex-items-center">
+                    <button
+                        type="button"
+                        class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer disabled:bg-gray-3 disabled:text-white disabled:cursor-not-allowed disabled:hover:shadow-none"
+                        :disabled="computedSelectedCount == 0"
+                        @click="handleEditSelected">
+                        Edit Selected
+                    </button>
+                    <button
+                        type="button"
+                        class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-red-600 hover:bg-red-500 text-white cursor-pointer disabled:bg-gray-3 disabled:text-white disabled:cursor-not-allowed disabled:hover:shadow-none"
+                        :disabled="computedSelectedCount == 0"
+                        @click="handleDeleteSelected">
+                        Delete Selected
+                    </button>
+                    <div class="small">
+                        {{ computedSelectedCount }} selected
                     </div>
-                    <div>{{ computedSelectedCount }} selected</div>
                 </div>
             </template>
         </div>