update by CODEX

2025-10-23 17:21:46 +07:00
parent 4e0ab80520
commit 6f9f0d34a3
12 changed files with 457 additions and 326 deletions
@@ -49,14 +49,53 @@

    function ensureEmptyRowState($tbody) {
      if ($tbody.find('.meeting-attachment-row').length === 0) {
+        const columnCount = $tbody.closest('table').find('thead th').length || 4;
        $tbody.html(
          '<tr class="meeting-empty-row">' +
-            '<td colspan="4" class="text-center text-muted">Belum ada attachment.</td>' +
+            '<td colspan="' + columnCount + '" class="text-center text-muted">Belum ada lampiran.</td>' +
          '</tr>'
        );
      }
    }

+    function resetInlinePreview($row) {
+      const $previewBox = $row.find('.meeting-attachment-inline-preview');
+      if ($previewBox.length) {
+        $previewBox
+          .removeClass('bg-light')
+          .html('<i class="fas fa-file-upload text-muted"></i>');
+      }
+    }
+
+    function setInlinePreview($row, type, source) {
+      const $previewBox = $row.find('.meeting-attachment-inline-preview');
+      if (!$previewBox.length) {
+        return;
+      }
+
+      resetInlinePreview($row);
+
+      if (type === 'image' && source) {
+        $previewBox
+          .addClass('bg-light')
+          .html('<img src="' + source + '" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Pratinjau lampiran">');
+        return;
+      }
+
+      if (type === 'pdf') {
+        $previewBox
+          .addClass('bg-light')
+          .html('<i class="fas fa-file-pdf text-danger fa-lg"></i>');
+        return;
+      }
+
+      if (type && source) {
+        $previewBox
+          .addClass('bg-light')
+          .html('<i class="fas fa-file text-secondary fa-lg"></i>');
+      }
+    }
+
    function cleanupPreviewButton($button) {
      const objectUrl = $button.data('objectUrl');
      if (objectUrl) {
@@ -68,6 +107,7 @@
        .data('downloadUrl', null)
        .data('objectUrl', null)
        .data('filename', null);
+      resetInlinePreview($button.closest('tr'));
    }

    function resetAttachmentRow($row) {
@@ -77,6 +117,7 @@
      $row.find('.meeting-selected-filename').text('');
      const $fileInput = $row.find('.meeting-new-attachment-file');
      $fileInput.val('');
+      resetInlinePreview($row);
    }

    function getFileExtension(filename) {
@@ -220,12 +261,19 @@
            '</select>' +
          '</td>' +
          '<td>' +
-            '<input type="file" class="form-control meeting-new-attachment-file" name="attachments[' + index + '][file_path]">' +
-            '<small class="form-text text-muted meeting-selected-filename"></small>' +
+            '<div class="d-flex align-items-center" style="gap: 0.75rem;">' +
+              '<div class="meeting-attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white" style="width: 56px; height: 56px;">' +
+                '<i class="fas fa-file-upload text-muted"></i>' +
+              '</div>' +
+              '<div class="flex-grow-1">' +
+                '<input type="file" class="form-control meeting-new-attachment-file" name="attachments[' + index + '][file_path]">' +
+                '<small class="form-text text-muted meeting-selected-filename"></small>' +
+              '</div>' +
+            '</div>' +
          '</td>' +
          '<td class="text-center">' +
            '<button type="button" class="btn btn-sm btn-outline-secondary meeting-preview-trigger d-none">' +
-              'Preview' +
+              'Pratinjau' +
            '</button>' +
          '</td>' +
          '<td class="text-center">' +
@@ -296,14 +344,15 @@

      const extension = getFileExtension(filename);
      const previewType = getPreviewType(extension);
-
      $previewButton.data('previewType', previewType);
      $previewButton.data('filename', filename);

      if (previewType === 'image') {
        const reader = new FileReader();
        reader.onload = function (event) {
-          $previewButton.data('previewSource', event.target.result);
+          const result = event.target.result;
+          $previewButton.data('previewSource', result);
+          setInlinePreview($row, 'image', result);
        };
        reader.readAsDataURL(file);
      } else if (previewType === 'pdf') {
@@ -311,10 +360,12 @@
        $previewButton.data('previewSource', objectUrl);
        $previewButton.data('downloadUrl', objectUrl);
        $previewButton.data('objectUrl', objectUrl);
+        setInlinePreview($row, 'pdf', objectUrl);
      } else {
        const objectUrl = URL.createObjectURL(file);
        $previewButton.data('downloadUrl', objectUrl);
        $previewButton.data('objectUrl', objectUrl);
+        setInlinePreview($row, previewType, objectUrl);
      }

      $previewButton.removeClass('d-none');
@@ -349,12 +400,12 @@
            _token: $('meta[name="csrf-token"]').attr('content')
          },
          success: function (response) {
-            showAlert(response.message || 'Attachment berhasil dihapus.', 'success');
+            showAlert(response.message || 'Lampiran berhasil dihapus.', 'success');
            $row.remove();
            ensureEmptyRowState($('#meeting-existing-attachments-table tbody'));
          },
          error: function (xhr) {
-            const message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Gagal menghapus attachment.';
+            const message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Gagal menghapus lampiran.';
            showAlert(message);
          }
        });