DONE: confirmation and list online form

2026-09-03 15:34:52 +08:00
parent 6f4507dc08
commit effe268e3b
15 changed files with 1976 additions and 87 deletions
@@ -0,0 +1,137 @@
+@props([
+    'id',
+    'columns' => [],
+    'exportable' => true,
+    'filename' => '',
+    'skipExport' => ['Bil', 'Cetak'],
+])
+
+<style>
+    .erahn-datatable {
+        width: 100%;
+        max-width: 100%;
+    }
+    .erahn-datatable .dataTables_wrapper {
+        width: 100%;
+        overflow-x: auto;
+    }
+    .erahn-datatable table {
+        width: 100% !important;
+        margin: 0;
+    }
+    .erahn-datatable table th,
+    .erahn-datatable table td {
+        white-space: nowrap;
+        vertical-align: middle;
+    }
+    .erahn-datatable .dt-buttons {
+        margin: 0 0 8px 8px;
+    }
+    .erahn-datatable .dt-button {
+        border: 0;
+        border-radius: 4px;
+        padding: 6px 12px;
+        margin-left: 4px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        background: #17a2b8;
+        color: #fff;
+    }
+    .erahn-datatable .dt-button:hover {
+        opacity: 0.9;
+    }
+    .erahn-datatable .buttons-excel {
+        background: #28a745;
+    }
+    .erahn-datatable .buttons-csv {
+        background: #6c757d;
+    }
+</style>
+
+<script>
+    if (typeof window.initErahnDatatable !== 'function') {
+        window.initErahnDatatable = function (selector, options) {
+            var $table = $(selector);
+            var exportable = $table.data('exportable');
+            var filename = $table.data('export-filename') || $table.attr('id') || 'export';
+            var defaults = {
+                scrollX: true,
+                autoWidth: false,
+                language: {
+                    emptyTable: 'Tiada rekod'
+                }
+            };
+
+            if ((exportable === undefined || exportable === 1 || exportable === true) &&
+                $.fn.dataTable && $.fn.dataTable.Buttons) {
+                defaults.dom = 'lBfrtip';
+                defaults.buttons = [
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'buttons-excel',
+                        title: filename,
+                        filename: filename,
+                        exportOptions: {
+                            columns: ':not(.no-export)',
+                            format: {
+                                body: function (data) {
+                                    return $('<div>').html(data).text().replace(/\s+/g, ' ').trim();
+                                }
+                            }
+                        }
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'buttons-csv',
+                        bom: true,
+                        title: filename,
+                        filename: filename,
+                        exportOptions: {
+                            columns: ':not(.no-export)',
+                            format: {
+                                body: function (data) {
+                                    return $('<div>').html(data).text().replace(/\s+/g, ' ').trim();
+                                }
+                            }
+                        }
+                    }
+                ];
+            }
+
+            return $table.DataTable($.extend(true, {}, defaults, options || {}));
+        };
+    }
+    if (typeof window.adjustErahnDatatables !== 'function') {
+        window.adjustErahnDatatables = function () {
+            if (!$.fn.dataTable) {
+                return;
+            }
+            setTimeout(function () {
+                $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
+            }, 50);
+        };
+    }
+</script>
+
+<div class="erahn-datatable">
+    <table
+        id="{{ $id }}"
+        {{ $attributes->merge(['class' => 'table table-striped table-hover nowrap']) }}
+        style="width:100%"
+        data-exportable="{{ $exportable ? 1 : 0 }}"
+        data-export-filename="{{ $filename !== '' ? $filename : $id }}"
+    >
+        <thead class="thead-dark">
+            <tr>
+                @foreach ($columns as $column)
+                    <th @if(in_array($column, $skipExport, true)) class="no-export" @endif>{{ $column }}</th>
+                @endforeach
+            </tr>
+        </thead>
+        <tbody></tbody>
+        {{ $slot }}
+    </table>
+</div>