Fix: Media Show and delete issues (#29)

* Fix: Media Show and delete issues * Fix styling by bot --------- Co-authored-by: anisAronno <[email protected]>
anisAronno · Jan 11, 2024 · d71965f · d71965f
1 parent 10855dd
commit d71965f
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 66 deletions.
diff --git a/.php-cs-fixer.cache b/.php-cs-fixer.cache
diff --git a/composer.json b/composer.json
@@ -19,7 +19,7 @@
   ],
   "require": {
     "php": "^8.1",
-    "anisaronno/laravel-media-gallery": "*",
+    "anisaronno/laravel-media-gallery": "0.4.1",
     "anisaronno/laravel-settings": "1.1.0",
     "guzzlehttp/guzzle": "^7.2",
     "laravel/framework": "^10.10",

diff --git a/composer.lock b/composer.lock
diff --git a/resources/views/auth/verify-email.blade.php b/resources/views/auth/verify-email.blade.php
@@ -1,32 +1,36 @@
 <x-guest-layout>
-    <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-        {{ __('Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another.') }}
-    </div>
+    <div class=" min-h-screen flex justify-center">
+        <div class="max-w-[500px] md:mt-[5%] space-y-5">
+            <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+                {{ __('Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another.') }}
+            </div>
 
-    @if (session('status') == 'verification-link-sent')
-        <div class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
-            {{ __('A new verification link has been sent to the email address you provided during registration.') }}
-        </div>
-    @endif
+            @if (session('status') == 'verification-link-sent')
+                <div class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
+                    {{ __('A new verification link has been sent to the email address you provided during registration.') }}
+                </div>
+            @endif
 
-    <div class="mt-4 flex items-center justify-between">
-        <form method="POST" action="{{ route('verification.send') }}">
-            @csrf
+            <div class="mt-4 flex items-center justify-between">
+                <form method="POST" action="{{ route('verification.send') }}">
+                    @csrf
 
-            <div>
-                <x-primary-button>
-                    {{ __('Resend Verification Email') }}
-                </x-primary-button>
-            </div>
-        </form>
+                    <div>
+                        <x-primary-button>
+                            {{ __('Resend Verification Email') }}
+                        </x-primary-button>
+                    </div>
+                </form>
 
-        <form method="POST" action="{{ route('logout') }}">
-            @csrf
+                <form method="POST" action="{{ route('logout') }}">
+                    @csrf
 
-            <button type="submit"
-                class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
-                {{ __('Log Out') }}
-            </button>
-        </form>
+                    <button type="submit"
+                        class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
+                        {{ __('Log Out') }}
+                    </button>
+                </form>
+            </div>
+        </div>
     </div>
 </x-guest-layout>
diff --git a/resources/views/components/media/centered-modal.blade.php b/resources/views/components/media/centered-modal.blade.php
@@ -22,11 +22,11 @@ class="w-full h-auto image-item object-cover">
                         <div class="border-b border-gray-500 pb-3 leading-normal ">
                             <div class="flex flex-wrap gap-3 md:gap-5 justify-start">
                                 <span class="font-medium">File name :</span>
-                                <span>{{ $media?->title }}</span>
+                                <span id="badge_title_{{ $media->id }}">{{ $media?->title }}</span>
                             </div>
                             <div class="flex flex-wrap gap-3 md:gap-5 justify-start">
                                 <span class="font-medium">Caption :</span>
-                                <span>{{ $media?->caption }}</span>
+                                <span id="badge_caption_{{ $media->id }}">{{ $media?->caption }}</span>
                             </div>
                             <div class="flex flex-wrap gap-3 md:gap-5 justify-start">
                                 <span class="font-medium">Directory :</span>
@@ -54,17 +54,33 @@ class="w-full h-auto image-item object-cover">
                                     <span>{{ $media?->created_at?->format('F d, Y') }}</span>
                                 </div>
                             @endif
+
+                            <div class="flex flex-wrap gap-3 md:gap-5 justify-start my-3">
+                                <a href="#"
+                                    onclick="event.preventDefault(); 
+                                         if(confirm('Are you sure you want to delete this file?')) { 
+                                             deleteFile('{{ route('media.destroy', $media?->id) }}', '{{ $media?->owner?->api_token }}');
+                                         }"
+                                    class="font-medium text-red-500 hover:text-red-700 dark:hover:text-red-400 flex items-center">
+                                    <i class="h-5 text-red-500 hover:text-red-700 dark:hover:text-red-400 mr-1"
+                                        data-feather="trash">
+                                    </i>
+                                    Delete this file
+                                </a>
+                            </div>
                         </div>
                         <div class="p-2 md:p-4 space-y-4">
                             <div class="flex flex-wrap">
                                 <label class="label label-required mb-1" for="title">Title: </label>
                                 <input type="text" class="input" id="title_{{ $media->id }}" placeholder="Title"
-                                    onkeypress="changeData('{{ $media->id }}')" value="{{ $media?->title }}">
+                                    onchange="updateData('{{ $media->id }}', '{{ $media?->owner?->api_token }}')"
+                                    value="{{ $media?->title }}">
                             </div>
                             <div class="flex flex-wrap">
                                 <label class="label mb-1" for="phone">Caption: </label>
                                 <input type="text" class="input" id="caption_{{ $media->id }}"
-                                    placeholder="Caption" onkeypress="changeData('{{ $media->id }}')"
+                                    placeholder="Caption"
+                                    onchange="updateData('{{ $media->id }}', '{{ $media?->owner?->api_token }}')"
                                     value="{{ $media?->caption }}">
                             </div>
                         </div>
@@ -73,26 +89,15 @@ class="w-full h-auto image-item object-cover">
             </div>
             <div class="modal-footer">
                 <div class="flex items-center justify-end gap-4">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
-                        id="modalCloseBtn_{{ $media->id }}">Ok</button>
-                    <button type="button" class="btn btn-primary hidden " id="modalUpdateBtn_{{ $media->id }}"
-                        onclick="updateMediaDetails(
-                        {{ $media->id }}, '{{ $media?->owner?->api_token }}')">Update</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
                 </div>
             </div>
         </div>
     </div>
 </div>
 
 <script>
-    function changeData(id) {
-        const modalUpdateBtn = document.getElementById(`modalUpdateBtn_${id}`);
-        const modalCloseBtn = document.getElementById(`modalCloseBtn_${id}`);
-        modalUpdateBtn.classList.remove('hidden');
-        modalCloseBtn.innerText = 'Cancel';
-    }
-
-    function updateMediaDetails(id, token) {
+    function updateData(id, token) {
         const titleInput = document.getElementById(`title_${id}`);
         const captionInput = document.getElementById(`caption_${id}`);
 
@@ -109,20 +114,16 @@ function updateMediaDetails(id, token) {
             return;
         }
 
-        const closeModal = () => {
-            const modal = document.getElementById(`modal-centered-${id}`);
-            const modalUpdateBtn = document.getElementById(`modalUpdateBtn_${id}`);
-            const modalCloseBtn = document.getElementById(`modalCloseBtn_${id}`);
-
-            modal.classList.remove('show');
-            modal.removeAttribute('style');
-            modalUpdateBtn.classList.add('hidden');
-            modalCloseBtn.innerText = 'Ok';
-        };
+        const updateBadge = () => {
+            const badgeTitle = document.getElementById(`badge_title_${id}`);
+            const badgeCaption = document.getElementById(`badge_caption_${id}`);
+            badgeTitle.innerText = title;
+            badgeCaption.innerText = caption;
+        }
 
         axios.post(`/api/media/update/${id}`, {
                 title: title,
-                caption: caption
+                caption: caption,
             }, {
                 headers: {
                     'Authorization': `Bearer ${token}`
@@ -131,14 +132,14 @@ function updateMediaDetails(id, token) {
             .then(response => {
                 if (response.data && response.status === 200) {
                     toast.success(response.data.message);
-                    closeModal();
+                    updateBadge();
+
                 } else {
                     toast.warning('Update was not successful.');
                 }
             })
             .catch(error => {
                 const errorMessage = error.response?.data?.message || error.message;
-
                 toast.danger(`Error: ${errorMessage}`, {
                     style: {
                         background: '#f00',
@@ -151,4 +152,37 @@ function updateMediaDetails(id, token) {
                 captionInput.value = caption;
             });
     }
+
+    function deleteFile(route, apiToken) {
+        const headers = {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiToken}`
+        };
+
+        axios.delete(route, {
+                headers
+            })
+            .then(response => {
+                if (response.status === 200) {
+                    toast.success(response.data.message);
+                    const deletedFileElement = document.getElementById(`file-${response.data.fileId}`);
+                    if (deletedFileElement) {
+                        deletedFileElement.remove();
+                    }
+                } else {
+                    toast.warning('Deletion was not successful.');
+                }
+            })
+            .catch(error => {
+                const errorMessage = error.response?.data?.message || error.message;
+                toast.danger(`Error: ${errorMessage}`, {
+                    style: {
+                        background: '#f00',
+                        color: '#fff'
+                    }
+                });
+            }).finally(() => {
+                location.reload()
+            })
+    }
 </script>
diff --git a/resources/views/components/media/media.blade.php b/resources/views/components/media/media.blade.php
@@ -9,6 +9,8 @@ class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 grow gap-5
                 <img src="{{ Media::getURL($media->url) }}" alt="{{ $media->title }}"
                     class="w-full h-auto image-item object-cover">
             </div>
+            <x-media.centered-modal :media="$media" />
+
          @endforeach
     </div>
     <div class="grid grid-cols-1 justify-between items-start md:items-center space-y-3 md:space-y-0 p-4 w-full text-gray-700 dark:text-gray-100"

diff --git a/resources/views/profile/partials/update-profile-information-form.blade.php b/resources/views/profile/partials/update-profile-information-form.blade.php
@@ -38,7 +38,7 @@
             <x-input-error class="mt-2" :messages="$errors->get('phone')" />
         </div>
 
-        <div> 
+        <div>
             <x-input-label for="phone" :value="__('Gender')" />
             <select class="select select-lg mt-1 block w-full bg-white dark:bg-slate-900" id="gender" name="gender"
                 required autofocus autocomplete="gender">
@@ -84,8 +84,7 @@ class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 da
             <x-primary-button>{{ __('Save') }}</x-primary-button>
 
             @if (session('status') === 'profile-updated')
-                <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 2000)"
-                    class="text-sm text-gray-600 dark:text-gray-400">{{ __('Saved.') }}</p>
+                <p x-data="{ show: true }" class="text-sm text-gray-600 dark:text-gray-400">{{ __('Saved.') }}</p>
             @endif
         </div>
     </form>