fixes

2023-08-25 11:30:57 +10:00
parent f50e6ad209
commit 622229cfc9
7 changed files with 243 additions and 106 deletions
--- a/resources/js/components/SMImageGallery.vue
+++ b/resources/js/components/SMImageGallery.vue
@@ -1,82 +1,86 @@
 <template>
-    <div
-        :class="[
-            'flex',
-            'gap-4',
-            'my-4',
-            'select-none',
-            props.showEditor
-                ? ['overflow-auto']
-                : ['flex-wrap', 'flex-justify-center'],
-        ]">
+    <div>
        <div
-            v-for="(image, index) in modelValue"
-            class="flex flex-col flex-justify-center relative sm-gallery-item p-1"
-            :key="index">
-            <img
-                :src="mediaGetThumbnail(image as Media, 'small')"
-                class="max-h-40 max-w-40 cursor-pointer"
-                @click="showGalleryModal(index)" />
+            :class="[
+                'flex',
+                'gap-4',
+                'my-4',
+                'select-none',
+                props.showEditor
+                    ? ['overflow-auto']
+                    : ['flex-wrap', 'flex-justify-center'],
+            ]">
+            <div
+                v-for="(image, index) in modelValue"
+                class="flex flex-col flex-justify-center relative sm-gallery-item p-1"
+                :key="index">
+                <img
+                    :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 as Media).id)">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-6 w-6 block"
+                        viewBox="0 0 24 24">
+                        <path
+                            d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+                            fill="rgba(185,28,28,1)" />
+                    </svg>
+                </div>
+            </div>
            <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 as Media).id)">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-6 w-6 block"
-                    viewBox="0 0 24 24">
-                    <path
-                        d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
-                        fill="rgba(185,28,28,1)" />
-                </svg>
+                class="flex flex-col flex-justify-center">
+                <div
+                    class="flex flex-col flex-justify-center flex-items-center h-23 w-40 cursor-pointer bg-gray-300 text-gray-800 hover:text-gray-600"
+                    @click="handleAddToGallery">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-15 w-15"
+                        viewBox="0 0 24 24">
+                        <title>Add image</title>
+                        <path
+                            d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z"
+                            fill="currentColor" />
+                    </svg>
+                </div>
            </div>
        </div>
-        <div v-if="props.showEditor" class="flex flex-col flex-justify-center">
+        <div
+            v-if="props.showEditor == false && showModalImage !== null"
+            :class="[
+                'image-gallery-modal',
+                { 'image-gallery-modal-buttons': showButtons },
+            ]"
+            @click="hideModal"
+            @mousemove="handleModalUpdateButtons"
+            @mouseleave="handleModalUpdateButtons">
+            <img
+                :src="mediaGetVariantUrl(modelValue[showModalImage] as Media)"
+                class="image-gallery-modal-image" />
            <div
-                class="flex flex-col flex-justify-center flex-items-center h-23 w-40 cursor-pointer bg-gray-300 text-gray-800 hover:text-gray-600"
-                @click="handleAddToGallery">
+                class="image-gallery-modal-prev"
+                @click.stop="handleModalPrevImage"></div>
+            <div
+                class="image-gallery-modal-next"
+                @click.stop="handleModalNextImage"></div>
+            <div class="image-gallery-modal-close" @click="hideModal">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-15 w-15"
+                    class="h-6 w-6"
                    viewBox="0 0 24 24">
-                    <title>Add image</title>
+                    <title>Close</title>
                    <path
-                        d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z"
+                        d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
                        fill="currentColor" />
                </svg>
            </div>
        </div>
    </div>
-    <div
-        v-if="props.showEditor == false && showModalImage !== null"
-        :class="[
-            'image-gallery-modal',
-            { 'image-gallery-modal-buttons': showButtons },
-        ]"
-        @click="hideModal"
-        @mousemove="handleModalUpdateButtons"
-        @mouseleave="handleModalUpdateButtons">
-        <img
-            :src="mediaGetVariantUrl(modelValue[showModalImage] as Media)"
-            class="image-gallery-modal-image" />
-        <div
-            class="image-gallery-modal-prev"
-            @click.stop="handleModalPrevImage"></div>
-        <div
-            class="image-gallery-modal-next"
-            @click.stop="handleModalNextImage"></div>
-        <div class="image-gallery-modal-close" @click="hideModal">
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6"
-                viewBox="0 0 24 24">
-                <title>Close</title>
-                <path
-                    d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-                    fill="currentColor" />
-            </svg>
-        </div>
-    </div>
 </template>

 <script setup lang="ts">
--- a/resources/js/components/dialogs/SMDialogMedia.vue
+++ b/resources/js/components/dialogs/SMDialogMedia.vue
@@ -142,6 +142,8 @@
                                            :style="{
                                                backgroundImage: `url('${mediaGetThumbnail(
                                                    item,
+                                                    null,
+                                                    true,
                                                )}')`,
                                                backgroundColor:
                                                    item.status === 'OK'
@@ -156,11 +158,18 @@
                                            <SMLoading
                                                v-if="
                                                    item.status !== 'OK' &&
-                                                    item.status !== 'Failed'
+                                                    item.status.startsWith(
+                                                        'Error',
+                                                    ) === false
                                                "
                                                small
                                                class="bg-white bg-op-90 w-full h-full" />
-                                            <div v-if="item.status == 'Failed'">
+                                            <div
+                                                v-if="
+                                                    item.status.startsWith(
+                                                        'Error',
+                                                    ) === true
+                                                ">
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    class="h-10 w-10"
@@ -232,7 +241,13 @@
                                <div
                                    class="flex text-xs border-b border-gray-3 pb-4">
                                    <img
-                                        :src="mediaGetThumbnail(lastSelected)"
+                                        :src="
+                                            mediaGetThumbnail(
+                                                lastSelected,
+                                                null,
+                                                true,
+                                            )
+                                        "
                                        class="max-h-20 max-w-20 mr-2" />
                                    <div class="flex flex-col w-100">
                                        <p class="m-0 text-bold">
@@ -256,7 +271,14 @@
                                        <p
                                            v-if="lastSelected.status != 'OK'"
                                            class="m-0 italic">
-                                            {{ lastSelected.status }}
+                                            {{
+                                                lastSelected.status.split(":")
+                                                    .length > 1
+                                                    ? lastSelected.status
+                                                          .split(":")[1]
+                                                          .trim()
+                                                    : lastSelected.status
+                                            }}
                                        </p>
                                        <p
                                            v-if="allowEditSelected"
@@ -388,6 +410,8 @@
                            :style="{
                                backgroundImage: `url('${mediaGetThumbnail(
                                    item,
+                                    null,
+                                    true,
                                )}')`,
                                backgroundColor:
                                    item.status === 'OK'
@@ -397,7 +421,7 @@
                            <SMLoading
                                v-if="
                                    item.status !== 'OK' &&
-                                    item.status !== 'Failed'
+                                    item.status.startsWith('Error') === false
                                "
                                small
                                class="bg-white bg-op-90 w-full h-full" />
@@ -804,6 +828,7 @@ const handleChangeSelectFile = async () => {
        handleFilesUpload(refUploadInput.value.files);
        showFileBrowserTab();
    }
+    refUploadInput.value.value = "";
 };

 const handleFilesUpload = (files: FileList) => {
@@ -861,7 +886,6 @@ const startFilesUpload = async () => {
                    },
                });
                if (result.data) {
-                    /* empty */
                    const data = result.data as MediaResponse;

                    const currentUploadFileNumStr =
@@ -901,7 +925,7 @@ const updateFiles = async () => {
            if (
                isUUID(item.id) &&
                item.status != "OK" &&
-                item.status != "Failed"
+                item.status.startsWith("Error") == false
            ) {
                remaining = true;

@@ -916,10 +940,23 @@ const updateFiles = async () => {
                            const updateData =
                                updateResult.data as MediaResponse;
                            if (updateData.medium.status == "OK") {
-                                totalItems.value++;
-                                mediaItems.value[index] = updateData.medium;
-                            } else if (updateData.medium.status == "Failed") {
                                mediaItems.value[index] = updateData.medium;
+                                if (
+                                    lastSelected.value &&
+                                    lastSelected.value.id ==
+                                        updateData.medium.id
+                                ) {
+                                    lastSelected.value = updateData.medium;
+                                }
+                            } else if (
+                                updateData.medium.status.startsWith("Error") ===
+                                true
+                            ) {
+                                mediaItems.value = mediaItems.value.filter(
+                                    (mediaItem) =>
+                                        mediaItem.id !== updateData.medium.id,
+                                );
+
                                useToastStore().addToast({
                                    title: "Upload failed",
                                    type: "danger",
@@ -931,13 +968,16 @@ const updateFiles = async () => {
                        }
                    })
                    .catch(() => {
-                        /* empty */
+                        /* error retreiving data */
+                        mediaItems.value = mediaItems.value.filter(
+                            (mediaItem) => mediaItem.id !== item.id,
+                        );
                    });
            }
        });

        mediaItems.value = mediaItems.value.filter(
-            (item) => item.status !== "Failed",
+            (item) => item.status.startsWith("Error") === false,
        );

        if (remaining) {
@@ -986,7 +1026,7 @@ const handleLoad = async () => {
    let params = {
        page: page.value,
        limit: perPage.value,
-        status: "!Failed",
+        status: "!Error",
    };

    if (mimeTypesFilter) {
@@ -1144,6 +1184,7 @@ const formatDate = (date) => {
 const allowEditSelected = computed(() => {
    return (
        lastSelected.value != null &&
+        lastSelected.value.status === "OK" &&
        userStore.id &&
        (userHasPermission("admin/media") ||
            lastSelected.value.user_id == userStore.id)
@@ -1176,7 +1217,7 @@ const handleRotateLeft = async (item: Media) => {
            id: item.id,
        },
        body: {
-            transform: "rotate-270",
+            transform: "rotate-90",
        },
    })
        .then((result) => {
@@ -1189,6 +1230,8 @@ const handleRotateLeft = async (item: Media) => {
                if (index !== -1) {
                    mediaItems.value[index] = data.medium;
                }
+
+                updateFiles();
            }
        })
        .catch(() => {
@@ -1203,7 +1246,7 @@ const handleRotateRight = async (item: Media) => {
            id: item.id,
        },
        body: {
-            transform: "rotate-90",
+            transform: "rotate-270",
        },
    })
        .then((result) => {
@@ -1216,6 +1259,8 @@ const handleRotateRight = async (item: Media) => {
                if (index !== -1) {
                    mediaItems.value[index] = data.medium;
                }
+
+                updateFiles();
            }
        })
        .catch(() => {
--- a/resources/js/helpers/media.ts
+++ b/resources/js/helpers/media.ts
@@ -40,8 +40,11 @@ export const mimeMatches = (

 export const mediaGetThumbnail = (
    media: Media,
-    useVariant: string = "",
+    useVariant: string | null = "",
+    forceRefresh: boolean = false,
 ): string => {
+    let url: string = "";
+
    if (!media) {
        return "";
    }
@@ -49,19 +52,35 @@ export const mediaGetThumbnail = (
    if (
        useVariant &&
        useVariant != "" &&
+        useVariant != null &&
        media.variants &&
        media.variants[useVariant]
    ) {
-        return media.url.replace(media.name, media.variants[useVariant]);
+        url = media.url.replace(media.name, media.variants[useVariant]);
    }

    if (media.thumbnail && media.thumbnail.length > 0) {
-        return media.thumbnail;
+        url = media.thumbnail;
    }

    if (media.variants && media.variants["thumb"]) {
-        return media.url.replace(media.name, media.variants["thumb"]);
+        url = media.url.replace(media.name, media.variants["thumb"]);
    }

-    return "/assets/fileicons/unknown.webp";
+    if (url === "") {
+        return "/assets/fileicons/unknown.webp";
+    }
+
+    if (forceRefresh == true) {
+        // Generate a random string
+        const randomString = Math.random().toString(36).substring(7);
+
+        // Check if the URL already has query parameters
+        const separator = url.includes("?") ? "&" : "?";
+
+        // Append the random string as a query parameter
+        url = `${url}${separator}_random=${randomString}`;
+    }
+
+    return url;
 };