Merge pull request #2770 from Leantime/table-component

Table component
Leantime · Nov 11, 2024 · 1c87a8d · 1c87a8d
2 parents 32694ce + f76833d
commit 1c87a8d
Show file tree

Hide file tree

Showing 9 changed files with 494 additions and 373 deletions.
diff --git a/app/Domain/Tickets/Js/ticketsController.js b/app/Domain/Tickets/Js/ticketsController.js
@@ -1177,16 +1177,19 @@ export const initTicketsTable = function (groupBy) {
                 }
 
             },
-            "dom": '<"top">rt<"bottom"><"clear">',
-            "searching": false,
-            "stateSave": true,
+            "dom": '<"top"f>rt<"bottom"lip><"clear">',
+            "pagingType": "full_numbers",
+            "pageLength": 10,
+            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            "searching": true,
+            "stateSave": false,
             "displayLength":100,
             "order": defaultOrder,
             "columnDefs": [
-                    { "visible": false, "targets": 10 },
-                    { "visible": false, "targets": 11 },
+                    { "visible": false, "targets": 10, "searchable": false },
+                    { "visible": false, "targets": 11, "searchable": false },
                     { "target": "no-sort", "orderable": false},
-                ],
+            ],
             "footerCallback": function ( row, data, start, end, display ) {
                 var api = this.api(), data;
 
@@ -1200,7 +1203,6 @@ export const initTicketsTable = function (groupBy) {
 
                 // computing column Total of the complete result
 
-
                 var plannedHours = api
                     .column(10)
                     .data()
@@ -1263,6 +1265,29 @@ export const initTicketsTable = function (groupBy) {
 
         });
 
+        function format(d) {
+            return "foo";
+            // d[6];
+        }
+
+        // Add event listener for opening and closing child row
+        jQuery('.ticketTable tbody').on('click', 'td.dt-control', function (e) {
+            let tr = e.target.closest('tr');
+            // let tr = jQuery(this).closest('tr');
+            let row = allTickets.row(tr);
+
+            console.log("Row data is", row.data());
+
+            if (row.child.isShown()) {
+                row.child.hide();
+                tr.removeClass('shown');
+            } else {
+                row.child(format(row.data())).show();
+                tr.addClass('shown');
+            }
+        });
+
+
         var buttons = new jQuery.fn.dataTable.Buttons(allTickets.table(0), {
             buttons: [
                 {
@@ -1310,6 +1335,31 @@ export const initTicketsTable = function (groupBy) {
             allTickets.draw();
 
         });
+
+        // Testing add row
+        function addNewRow() {
+            allTickets.row
+                .add([
+                    "col 1",
+                    "col 2",
+                    "col 3",
+                    "col 4",
+                    "col 5",
+                    "col 6",
+                    "col 7",
+                    "col 8",
+                    "col 9",
+                    "col 10",
+                    "col 11",
+                    "col 12",
+                ])
+                .draw(false);
+
+        }
+
+        // document.querySelector('#addRow').addEventListener('click', addNewRow);
+        jQuery('#addRow').on('click', addNewRow);
+
     });
 };
 

diff --git a/app/Domain/Tickets/Templates/includes/ticketFilter.blade.php b/app/Domain/Tickets/Templates/includes/ticketFilter.blade.php
@@ -115,8 +115,6 @@
                     {{ __('buttons.search') }}
                 </x-global::forms.button>
             </div>
-
-
         </x-slot:cardContent>
     </x-global::actions.dropdown>
 

diff --git a/app/Domain/Tickets/Templates/showAll.blade.php b/app/Domain/Tickets/Templates/showAll.blade.php
diff --git a/app/Views/Templates/components/elements/table/cell.blade.php b/app/Views/Templates/components/elements/table/cell.blade.php
@@ -0,0 +1,3 @@
+<td {{ $attributes->merge(['class' => 'px-6 py-4 text-sm text-gray-500']) }}>
+    {{ $slot }}
+</td>
diff --git a/app/Views/Templates/components/elements/table/footer.blade.php b/app/Views/Templates/components/elements/table/footer.blade.php
@@ -0,0 +1,3 @@
+<tr {{ $attributes->merge(['class' => 'text-left text-xs font-medium text-gray-500 tracking-wider']) }}>
+    {{ $slot }}
+</tr>
diff --git a/app/Views/Templates/components/elements/table/header-cell.blade.php b/app/Views/Templates/components/elements/table/header-cell.blade.php
@@ -0,0 +1,3 @@
+<th {{ $attributes->merge(['class' => 'px-6 py-3']) }}>
+        {{ $slot }}
+</th>
diff --git a/app/Views/Templates/components/elements/table/header.blade.php b/app/Views/Templates/components/elements/table/header.blade.php
@@ -0,0 +1,3 @@
+<tr {{ $attributes->merge(['class' => 'text-left text-xs font-medium text-gray-500 tracking-wider']) }}>
+    {{ $slot }}
+</tr>
diff --git a/app/Views/Templates/components/elements/table/index.blade.php b/app/Views/Templates/components/elements/table/index.blade.php
@@ -0,0 +1,24 @@
+@props([
+    'header',
+    'body',
+    'footer',
+    'extraClass' => ''
+])
+
+<table {{ $attributes->merge(['class' => 'table table-bordered min-w-full bg-white border-separate border-spacing-0 '.$extraClass ]) }}>
+    @if(isset($header))
+        <thead class="bg-gray-50">
+            {{ $header }}
+        </thead>
+    @endif
+
+    <tbody class="bg-white divide-y divide-gray-200">
+        {{ $body }}
+    </tbody>
+
+    @if(isset($footer))
+        <tfoot class="bg-gray-50">
+            {{ $footer }}
+        </tfoot>
+    @endif
+</table>
diff --git a/app/Views/Templates/components/elements/table/row.blade.php b/app/Views/Templates/components/elements/table/row.blade.php
@@ -0,0 +1,3 @@
+<tr {{ $attributes->merge(['class' => 'hover:bg-gray-50']) }}>
+    {{ $slot }}
+</tr>