feat(penilai): tambahkan fitur unggah foto dan simpan memo dengan foto

- Menambahkan metode `uploadTempPhoto` untuk mengunggah foto sementara. - Menambahkan metode `storeMemoWithPhotos` untuk menyimpan memo beserta foto. - Memperbarui rute untuk mendukung pengunggahan foto dan penyimpanan memo. - Memperbarui tampilan untuk menampilkan foto yang sudah ada dan mengubah ID dropzone.
2025-03-07 09:53:55 +07:00
parent 5d380f1a68
commit f7c85fc24e
3 changed files with 170 additions and 22 deletions
--- a/app/Http/Controllers/PenilaiController.php
+++ b/app/Http/Controllers/PenilaiController.php
@@ -4,6 +4,7 @@ namespace Modules\Lpj\Http\Controllers;

 use Illuminate\Http\Request;
 use Barryvdh\DomPDF\Facade\Pdf;  // https://github.com/barryvdh/laravel-dompdf
+use Illuminate\Support\Facades\Storage;
 use Modules\Lpj\Models\Permohonan;
 use Modules\Lpj\Models\Inspeksi;
 use Modules\Lpj\Models\Penilai;
@@ -756,10 +757,10 @@ class PenilaiController extends Controller


            if (!$allComplete) {
-                $message = $rap 
-                    ? 'Harap Mengisi laporan terlebih dahulu' 
+                $message = $rap
+                    ? 'Harap Mengisi laporan terlebih dahulu'
                    : 'Harap Mengisi laporan terlebih dahulu atau kertas kerja';
-    
+
                return response()->json([
                    'success' => false,
                    'message' => $message,
@@ -801,6 +802,18 @@ class PenilaiController extends Controller
        }
    }

+    public function uploadTempPhoto(Request $request)
+    {
+        if ($request->hasFile('file')) {
+            $file = $request->file('file');
+            $filename = time() . '_' . $file->getClientOriginalName();
+            $path = $file->storeAs('temp_photos', $filename, 'public');
+            return response()->json(['success' => true, 'id' => $path]);
+        }
+
+        return response()->json(['success' => false], 400);
+    }
+
    public function storeResume(Request $request)
    {
        try {
@@ -919,6 +932,59 @@ class PenilaiController extends Controller
        }
    }

+    public function storeMemoWithPhotos(Request $request)
+    {
+        try {
+            $validatedData = $request->validate([
+                'permohonan_id' => 'required|integer',
+                'document_id'   => 'required|integer',
+                'inspeksi_id'   => 'required|integer',
+                'memo'          => 'required',
+            ]);
+
+            $memoData = json_decode($validatedData['memo'], true);
+
+            $memo = Penilai::updateOrCreate(
+                [
+                    'permohonan_id' => $validatedData['permohonan_id'],
+                    'dokument_id'   => $validatedData['document_id'],
+                    'inspeksi_id'   => $validatedData['inspeksi_id'],
+                ],
+                [
+                    'memo' => json_encode($memoData),
+                ]
+            );
+
+            // Simpan foto-foto
+            if ($request->hasFile('foto_0')) {
+                $photoUrls = [];
+                $index     = 0;
+                while ($request->hasFile("foto_$index")) {
+                    $file        = $request->file("foto_$index");
+                    $fileName    = time() . '_' . $file->getClientOriginalName();
+                    $filePath    = $file->storeAs('public/memo_photos', $fileName);
+                    $photoUrls[] = Storage::url($filePath);
+                    $index++;
+                }
+
+                // Tambahkan URL foto ke data memo
+                $memoData['foto'] = $photoUrls;
+                $memo->memo       = json_encode($memoData);
+                $memo->save();
+            }
+
+            return response()->json([
+                'success' => true,
+                'message' => 'Memo dan foto berhasil disimpan',
+            ]);
+        } catch (Exception $e) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Terjadi kesalahan: ' . $e->getMessage(),
+            ], 500);
+        }
+    }
+
    public function storeLpjSederhanadanStandard(Request $request)
    {
        DB::beginTransaction();
--- a/resources/views/penilai/components/memo.blade.php
+++ b/resources/views/penilai/components/memo.blade.php
@@ -295,7 +295,7 @@
                        <h1 class="text-md font-medium text-gray-900">Upload Foto</h1>
                    </div>

-                    <div class="dropzone" id="upload-dropzone">
+                    <div class="dropzone" id="dropzone-upload">
                        <div class="dz-message needsclick" data-foto-type="upload_foto">
                            <i class="ki-duotone ki-file-up  text-primary text-3xl"><span class="path1"></span><span
                                    class="path2"></span></i>
@@ -306,6 +306,9 @@
                        </div>
                    </div>
                </div>
+                <div class="card-footer">
+                    <div id="existing-photos" class="flex gap-5"></div>
+                </div>
            </div>

            {{-- @include('lpj::penilai.components.foto-lampiran') --}}
@@ -337,7 +340,75 @@
    </div>
@endsection
@include('lpj::surveyor.js.utils')
-<script>
+@push('scripts')
+    <script>
+        Dropzone.autoDiscover = false;
+        let myDropzone;
+
+        document.addEventListener('DOMContentLoaded', function() {
+            myDropzone = new Dropzone("#dropzone-upload", {
+                url: "{{ route('penilai.uploadTempPhoto') }}", // Temporary upload route
+                paramName: "file",
+                maxFilesize: 5, // MB
+                acceptedFiles: "image/*",
+                addRemoveLinks: true,
+                headers: {
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                },
+                init: function() {
+                    this.on("success", function(file, response) {
+                        file.serverId = response.id; // Store the server's file ID
+                    });
+
+                    // Load existing photos
+                    loadExistingPhotos();
+                }
+            });
+        });
+
+        function loadExistingPhotos() {
+            const existingPhotosContainer = document.getElementById('existing-photos');
+            if (!existingPhotosContainer) return;
+
+            @if(isset($memo) && isset($memo->foto))
+            let existingPhotos;
+            try {
+                existingPhotos = @json($memo->foto);
+            } catch (e) {
+                console.error('Error parsing existing photos:', e);
+                return;
+            }
+
+            if (Array.isArray(existingPhotos)) {
+                existingPhotos.forEach(function(photoPath) {
+                    if (typeof photoPath === 'string') {
+                        const photoDiv = document.createElement('div');
+                        photoDiv.className = 'col-md-3 mb-3';
+
+                        const img = document.createElement('img');
+                        img.src = photoPath;
+                        img.className = 'img-fluid';
+                        img.style.maxHeight = '150px';
+
+                        photoDiv.appendChild(img);
+                        existingPhotosContainer.appendChild(photoDiv);
+
+                        if (myDropzone) {
+                            let mockFile = { name: photoPath.split('/').pop(), size: 12345 };
+                            myDropzone.emit("addedfile", mockFile);
+                            myDropzone.emit("thumbnail", mockFile, photoPath);
+                            myDropzone.emit("complete", mockFile);
+                            mockFile.previewElement.classList.add("dz-success");
+                            mockFile.previewElement.classList.add("dz-complete");
+                        }
+                    }
+                });
+            } else {
+                console.error('Existing photos is not an array:', existingPhotos);
+            }
+            @endif
+        }
+
    function saveMemo() {
        const form = document.getElementById('form-memo');
        const formData = new FormData(form);
@@ -371,17 +442,26 @@
        const documentId = urlParams.get('documentId');
        const inspeksiId = urlParams.get('inspeksiId');

-        const requestUrl = `{{ route('penilai.storeMemo') }}`;
+        // Create a new FormData object to send both JSON and files
+        const sendFormData = new FormData();
+        sendFormData.append('permohonan_id', permohonanId);
+        sendFormData.append('document_id', documentId);
+        sendFormData.append('inspeksi_id', inspeksiId);
+        sendFormData.append('memo', JSON.stringify(jsonData));
+
+        // Append all files from Dropzone
+        myDropzone.getAcceptedFiles().forEach((file, index) => {
+            sendFormData.append(`foto_${index}`, file);
+        });
+
+        const requestUrl = `{{ route('penilai.storeMemoWithPhotos') }}`;
+
        $.ajax({
            url: requestUrl,
            type: 'POST',
-            data: JSON.stringify({
-                permohonan_id: permohonanId,
-                document_id: documentId,
-                inspeksi_id: inspeksiId,
-                memo: jsonData,
-            }),
-            contentType: 'application/json',
+            data: sendFormData,
+            processData: false,
+            contentType: false,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
@@ -409,17 +489,15 @@
                console.log(response);
            },
            error: function(xhr, status, error) {
-                let errors = xhr.responseJSON?.errors;
-                $('.alert').text('');
-                if (errors) {
-                    $.each(errors, function(key, value) {
-                        $(`#error-${key}`).text(value[0]);
-                        toastrErrorBuild(value[0]);
-                    });
-                }
                hideLoadingSwal();
-                console.log(errors);
+                Swal.fire({
+                    title: 'Error!',
+                    text: 'Terjadi kesalahan saat mengirim data',
+                    icon: 'error',
+                    confirmButtonText: 'OK'
+                });
            }
        });
    }
 </script>
+    @endpush
--- a/routes/web.php
+++ b/routes/web.php
@@ -616,7 +616,11 @@ Route::middleware(['auth'])->group(function () {
        Route::post('/preoses-laporan/{id}', [PenilaiController::class, 'storePenilaian'])->name('proses.laporan');

        Route::post('storeResume', [PenilaiController::class, 'storeResume'])->name('storeResume');
+
        Route::post('storeMemo', [PenilaiController::class, 'storeMemo'])->name('storeMemo');
+        Route::post('store-memo-with-photos', [PenilaiController::class, 'storeMemoWithPhotos'])->name('storeMemoWithPhotos');
+        Route::post('upload-temp-photo', [PenilaiController::class, 'uploadTempPhoto'])->name('uploadTempPhoto');
+
        Route::post('storeRap', [PenilaiController::class, 'storeRap'])->name('storeRap');
        Route::post('storeLpjSederhanadanStandard', [PenilaiController::class, 'storeLpjSederhanadanStandard'])->name('storeLpjSederhanadanStandard');
        Route::put('revisi-surveyor/{id}', [PenilaiController::class, 'revisiSurveyor'])->name('revisiSurveyor');