fix(surveyor): perbaikan upload foto

app/Http/Controllers/SurveyorController.php

@@ -81,7 +81,7 @@ use Modules\Lpj\Http\Requests\SurveyorRequest;
 use Modules\Lpj\Http\Requests\FormSurveyorRequest;
 use Modules\Lpj\Emails\SendJadwalKunjunganEmail;
 use App\Helpers\Lpj;
-
+use Modules\Lpj\Models\Authorization;
 class SurveyorController extends Controller
 {
     public $user;
@@ -366,7 +366,7 @@ class SurveyorController extends Controller
                 return response()->json([
                     'success' => true,
                     'message' => 'Data berhasil disimpan',
-                    'file' => $newFoto
+                    'path' => $newFoto[0]['path'],
                 ], 200);
             }
 

resources/views/surveyor/components/foto.blade.php

@@ -176,7 +176,7 @@
             <input type="hidden" name="nomor_registrasi" value="{{ $permohonan->nomor_registrasi }}">
 
 
-            <div class="card border border-agi-100 bg-white rounded-lg shadow-md">
+            <div class="card border border-agi-100  rounded-lg shadow-md">
                 <div class="card-body">
                     <div class="  py-4 flex items-center justify-between">
                         <h1 class="text-md font-medium text-gray-900">Upload Foto</h1>
@@ -273,10 +273,11 @@
         Dropzone.autoDiscover = false;
         document.addEventListener('DOMContentLoaded', function() {
             let myDropzone = null;
+            let uploadQueue = 0;
+            let uploadBatch = [];
 
             function initDropzone(selector, paramName) {
                 try {
-                    // Pastikan elemen ada sebelum membuat Dropzone
                     const dropzoneElement = document.querySelector(selector);
                     if (!dropzoneElement) {
                         console.error(`Dropzone element not found: ${selector}`);
@@ -286,7 +287,7 @@
                     myDropzone = new Dropzone(selector, {
                         url: "{{ route('surveyor.storeFoto') }}",
                         paramName: paramName,
-                        maxFilesize: 10,
+                        maxFilesize: 30,
                         acceptedFiles: 'image/*',
                         uploadMultiple: false,
                         parallelUploads: 1,
@@ -304,32 +305,135 @@
                             param_name: paramName,
                             nomor_registrasi: '{{ $permohonan->nomor_registrasi ?? '' }}',
                         },
-                        error: function(file, response) {
+
-                            Swal.fire({
+                        addedfiles: function(files) {
-                                icon: 'error',
+                            uploadQueue += files.length;
-                                title: 'Upload Gagal',
+                            uploadBatch = Array.from(files);
-                                text: response.message || 'Error tidak diketahui'
+                            if (files.length > 0) showLoadingOverlay();
-                            });
                         },
 
+                        error: function(file, response) {
+                            handleUploadComplete(file, false, response.message);
+                        },
                         success: function(file, response) {
                             if (response.success) {
-                                Swal.fire({
+                                const fileData = {
-                                    icon: 'success',
+                                    path: response.path || file.path,
-                                    title: 'Upload Berhasil',
+                                    name: file.name,
-                                    toast: true,
+                                    description: '',
-                                    position: 'top-end',
+                                    category: 'lainnya',
-                                    showConfirmButton: false,
+                                    sub: '',
-                                    timer: 1500
+                                    param_name: paramName
-                                });
+                                };
-                                updatePhotoGallery();
+
+                                addEditAndDeleteButtons(file, fileData);
+                                handleUploadComplete(file, true);
+                            } else {
+                                handleUploadComplete(file, false, response.message);
                             }
                         },
 
                         init: function() {
                             // var myDropzone = this;
-                            var loadingIndicator = $(`
+                            loadExistingPhotos(this, paramName);
-                                <div class="loading-overlay" style="
+                        }
+
+                    });
+
+                    return myDropzone;
+                } catch (error) {
+                    console.error('Dropzone initialization error:', error);
+                    return null;
+                }
+            }
+
+            function loadExistingPhotos(dropzone, paramName) {
+                showLoadingOverlay();
+
+                $.ajax({
+                    url: "{{ route('surveyor.getFoto') }}",
+                    method: 'GET',
+                    data: {
+                        permohonan_id: {{ $permohonan->id ?? 0 }},
+                        dokument_id: '{{ request('dokument') ?? '' }}',
+                        param_name: paramName
+                    },
+                    headers: {
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    },
+                    success: function(response) {
+                        if (response.fotos && response.fotos.length) {
+                            response.fotos.forEach(function(foto) {
+                                var mockFile = {
+                                    name: foto.name,
+                                    size: foto.size || 12345,
+                                    originalPath: foto.path
+                                };
+
+                                dropzone.emit("addedfile", mockFile);
+                                dropzone.emit("thumbnail", mockFile, foto.path);
+                                dropzone.emit("complete", mockFile);
+                                addEditAndDeleteButtons(mockFile, {
+                                    path: foto.path,
+                                    name: foto.name,
+                                    description: foto.description || '',
+                                    category: foto.category || 'lainnya',
+                                    sub: foto.sub || '',
+                                    param_name: paramName
+                                });
+                            });
+                        }
+                    },
+                    error: function(xhr, status, error) {
+                        console.error('Gagal memuat foto:', error);
+                        showErrorMessage('Gagal memuat foto yang ada');
+                    },
+                    complete: function() {
+                        hideLoadingOverlay();
+                    }
+                });
+            }
+
+            function handleUploadComplete(file, isSuccess, errorMessage = null) {
+                uploadQueue--;
+                const index = uploadBatch.indexOf(file);
+                if (index > -1) {
+                    uploadBatch.splice(index, 1);
+                }
+
+                // Show individual error if any
+                if (!isSuccess && errorMessage) {
+                    showErrorMessage(errorMessage);
+                }
+
+                // If all uploads are complete
+                if (uploadQueue === 0) {
+                    hideLoadingOverlay();
+
+                    // Show final status message
+                    const totalFiles = uploadBatch.length + 1; // +1 for current file
+                    if (totalFiles === 1) {
+                        // Single file upload
+                        if (isSuccess) {
+                            showSuccessMessage('Foto berhasil diupload');
+                        }
+                    } else {
+                        // Multiple files upload
+                        showSuccessMessage(`${totalFiles} foto berhasil diupload`);
+                    }
+
+                    // Reset batch
+                    uploadBatch = [];
+                }
+            }
+
+            function showLoadingOverlay() {
+                const overlay = document.querySelector('.loading-overlay');
+                if (!overlay) {
+                    const dropzoneElement = document.querySelector('#upload-dropzone');
+                    const loadingOverlay = document.createElement('div');
+                    loadingOverlay.className = 'loading-overlay';
+                    loadingOverlay.style.cssText = `
                 position: absolute;
                 top: 0;
                 left: 0;
@@ -340,145 +444,39 @@
                 justify-content: center;
                 align-items: center;
                 z-index: 1000;
-                                ">
-                                    <div class="loader"></div>
-                                </div>
-                            `);
-
-                            var $dropzoneElement = $(selector);
-                            $dropzoneElement.css('position', 'relative');
-                            $dropzoneElement.append(loadingIndicator);
-
-                            $.ajax({
-                                url: "{{ route('surveyor.getFoto') }}",
-                                method: 'GET',
-                                data: {
-                                    permohonan_id: {{ $permohonan->id ?? 0 }},
-                                    dokument_id: '{{ request('dokument') ?? '' }}',
-                                    param_name: paramName
-                                },
-                                headers: {
-                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                                },
-                                beforeSend: function() {
-                                    loadingIndicator.show();
-                                },
-                                success: function(response) {
-                                    if (response.fotos && response.fotos.length) {
-                                        response.fotos.forEach(function(foto) {
-                                            var mockFile = {
-                                                name: foto.name,
-                                                size: foto.size || 12345,
-                                                originalPath: foto.path
-                                            };
-
-                                            myDropzone.emit("addedfile", mockFile);
-                                            myDropzone.emit("thumbnail", mockFile,
-                                                foto.path);
-                                            myDropzone.emit("complete", mockFile);
-                                            addEditAndDeleteButtons(mockFile, {
-                                                path: foto.path,
-                                                name: foto.name,
-                                                description: foto
-                                                    .description || '',
-                                                category: foto.category ||
-                                                    'lainnya',
-                                                sub: foto.sub || '',
-                                                param_name: paramName
-                                            });
-                                        });
-                                    }
-                                },
-                                error: function(xhr, status, error) {
-                                    console.error('Gagal memuat foto:', error);
-                                },
-                                complete: function() {
-                                    loadingIndicator.hide();
-                                }
-                            });
-                        }
-
-                    });
-                    return myDropzone;
-                } catch (error) {
-                    console.error('Dropzone initialization error:', error);
-                    return null;
-                }
-            }
-
-            function updatePhotoGallery() {
-                const gallery = document.querySelector('#upload-dropzone');
-
-                if (!myDropzone) {
-                    console.error('Dropzone is not initialized');
-                    return;
-                }
-
-                gallery.innerHTML = `
-                    <div style="
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 100%;
-                        height: 100%;
-                        background: rgba(255,255,255,0.7);
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        z-index: 1000;">
-                        <div class="loader"></div>
-                    </div>
             `;
-
+                    loadingOverlay.innerHTML = '<div class="loader"></div>';
-                $.ajax({
+                    dropzoneElement.appendChild(loadingOverlay);
-                    url: "{{ route('surveyor.getFoto') }}",
-                    method: 'GET',
-                    data: {
-                        permohonan_id: {{ $permohonan->id ?? 0 }},
-                        dokument_id: '{{ request('dokument') ?? '' }}',
-                        param_name: 'upload_foto'
-                    },
-                    headers: {
-                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                    },
-                    success: function(response) {
-                        if (response.fotos && response.fotos.length) {
-                            gallery.innerHTML = '';
-
-                            response.fotos.forEach(function(foto) {
-                                var mockFile = {
-                                    name: foto.name,
-                                    size: foto.size || 12345,
-                                    originalPath: foto.path
-                                };
-
-                                myDropzone.emit("addedfile", mockFile);
-                                myDropzone.emit("thumbnail", mockFile, foto.path);
-                                myDropzone.emit("complete", mockFile);
-                                addEditAndDeleteButtons(mockFile, {
-                                    path: foto.path,
-                                    name: foto.name,
-                                    description: foto.description || '',
-                                    category: foto.category || 'lainnya',
-                                    sub: foto.sub || '',
-                                    param_name: 'upload_foto'
-                                });
-                            });
                 } else {
-                            gallery.innerHTML = '<p>Tidak ada foto yang ditemukan.</p>';
+                    overlay.style.display = 'flex';
                 }
-                    },
-                    error: function(xhr, status, error) {
-                        console.error('Gagal memuat foto:', error);
-                        gallery.innerHTML = '<p>Gagal memuat foto. Silakan coba lagi.</p>';
-                    },
-                    complete: function() {
-                        gallery.innerHTML = gallery.innerHTML.includes('loader') ? '' : gallery
-                            .innerHTML;
             }
+
+            function hideLoadingOverlay() {
+                const overlay = document.querySelector('.loading-overlay');
+                if (overlay) overlay.style.display = 'none';
+            }
+
+            function showSuccessMessage(message) {
+                Swal.fire({
+                    icon: 'success',
+                    title: message,
+                    toast: true,
+                    position: 'top-end',
+                    showConfirmButton: false,
+                    timer: 1500
                 });
             }
 
+            function showErrorMessage(message) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Upload Gagal',
+                    text: message || 'Error tidak diketahui'
+                });
+            }
+
+
             // Inisialisasi Dropzone untuk elemen awal dengan pengecekan
             function safeInitDropzone(selector, paramName) {
                 setTimeout(() => {
@@ -492,15 +490,12 @@
             // Inisialisasi dropzone untuk elemen awal
             safeInitDropzone('#upload-dropzone', 'upload_foto');
 
-
-            // Event listener untuk menambah lantai
-
         });
 
         let fotoObjekJaminan = @json($fotoObjekJaminan);
 
         // Fungsi untuk membuka modal dan mengatur data
-        function openEditDataModal(file, response) {
+        window.openEditDrawer = function(file, response) {
             // Mengisi data input berdasarkan respons
             document.getElementById('editDataFilePath').value = response.path || '';
             document.getElementById('editDataName').value = response.name || '';
@@ -567,12 +562,10 @@
                 cssMaxHeight: 500
             });
 
-
-
             // openModal('editPhotoModal');
         }
 
-        function addEditAndDeleteButtons(file, response) {
+        window.addEditAndDeleteButtons = function(file, response) {
 
             const filePreviewElement = file.previewElement;
 
@@ -592,7 +585,8 @@
             editButton.style.cursor = 'pointer';
             editButton.setAttribute("data-drawer-toggle", "#drawer_2_2");
             editButton.onclick = function() {
-                openEditDataModal(file, response);
+                // e.preventDefault();
+                openEditDrawer(file, response);
             };
 
             // Tombol Hapus