tab filter

app/DataTables/WorklistDataTable.php

@@ -51,6 +51,23 @@ public function dataTable(QueryBuilder $query): EloquentDataTable
             $rawColumns[] = $column;
         }
 
+        // Apply the status filter
+        if (($status = strtolower($this->request()->get('status'))) && $status !== 'all') {
+            $data_table->filter(function ($query) use ($status) {
+                switch ($status) {
+                    case 'unread':
+                        $query->whereNull('read_at');
+                        break;
+                    case 'read':
+                        $query->whereNotNull('read_at');
+                        break;
+                    case 'progress':
+                        $query->whereNotNull('locked_at');
+                        break;
+                }
+            });
+        }
+
         $data_table
             ->orderColumn(WorklistColumn::PatientName->value, sprintf('%s $1', WorklistColumn::PatientName->value))
             ->rawColumns($rawColumns)

resources/views/staff/worklist/index.blade.php

@@ -17,12 +17,12 @@
 @section('vendor-style')
     @vite([
         'resources/fontawesome/scss/fontawesome.scss',
-        'resources/fontawesome/scss/solid.scss',
+        //'resources/fontawesome/scss/solid.scss',
         'resources/fontawesome/scss/light.scss',
         'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
         'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
-        'resources/assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.scss',
-        'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss'
+        //'resources/assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.scss',
+        //'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss'
     ])
 @endsection
 
@@ -39,10 +39,10 @@
         'resources/assets/js/ui-popover.js'
     ])
 
-    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
+    {{ $dataTable->scripts() }}
 
     <script type="text/javascript">
-        $(document).ready(function () {
+        $(function() {
             $('body').on('click', '.showStudy', function () {
                 var study_id = $(this).data('id');
                 $.get("{{ route('staff.studies.show') }}", {hashid: study_id}, function (data) {
@@ -81,6 +81,45 @@
 
     </script>
 
+    <script type="text/javascript">
+        $(function() {
+            let _status = '';
+
+            function initTable() {
+                const tableId = '#worklist-table';
+                if ($.fn.dataTable.isDataTable(tableId)) {
+                    console.log('getting old table');
+                    return $(tableId).DataTable();
+                }
+
+                console.log('Creating new table');
+                return $(tableId).DataTable(
+                    {
+                        destroy: true,
+                        retrieve: true
+                    }
+                );
+            }
+
+            function filterTable(status) {
+                _status = status;
+                const table = initTable();
+                console.log(table);
+                //table.clear();
+                table.ajax.url('{{ route('staff.worklist.index') }}?status=' + status).load();
+            }
+
+            // Set default filter to 'Pending'
+            filterTable('unread');
+
+            $('a[data-bs-toggle="tab"]').on('click', function (e) {
+                console.log($(e.target).attr('id'));
+                const tab_status = $(e.target).attr('id').replace('nav-', '');
+                filterTable(tab_status);
+            });
+        });
+    </script>
+
 @endsection
 
 @section('content')

resources/views/staff/worklist/partials/_nav-item.blade.php

@@ -1,5 +1,5 @@
 <li class="nav-item">
-    <a type="button" href="{{ $url ?? '#' }}" class="nav-link {{ $active }}" role="tab"
-       data-bs-toggle="tab" data-bs-target="#{{ $id }}"
-       aria-controls="{{ $id }}" aria-selected="true">{{ $text }}</a>
+    <a href="#" type="button" class="nav-link {{ $active }}" role="tab" data-bs-toggle="tab" id="{{ $id }}">
+        {{ $text }}
+    </a>
 </li>

resources/views/staff/worklist/partials/_nav-top.blade.php

@@ -1,8 +1,8 @@
 <div class="nav-align-top">
     <ul class="nav nav-tabs" role="tablist">
-        @include('staff.worklist.partials._nav-item', ['id' => 'nav-pending', 'text' => 'Pending', 'active' => 'active'])
+        @include('staff.worklist.partials._nav-item', ['id' => 'nav-unread', 'text' => 'Pending', 'active' => 'active'])
         @include('staff.worklist.partials._nav-item', ['id' => 'nav-progress', 'text' => 'In Progress', 'active' => ''])
-        @include('staff.worklist.partials._nav-item', ['id' => 'nav-complete', 'text' => 'Complete', 'active' => ''])
+        @include('staff.worklist.partials._nav-item', ['id' => 'nav-read', 'text' => 'Complete', 'active' => ''])
         @include('staff.worklist.partials._nav-item', ['id' => 'nav-all', 'text' => 'All', 'active' => ''])
     </ul>
 </div>