wip

app/DataTables/WorklistDataTable.php

@@ -3,6 +3,7 @@
 namespace App\DataTables;
 
 use App\DAL\Studies\WorklistFactory;
+use App\Domain\Report\ReportStatus;
 use App\Models\Study;
 use App\Services\ACL\WorklistButton;
 use App\Services\ACL\WorklistColumn;
@@ -41,25 +42,25 @@ private static function renderDateColumn(Carbon|CarbonImmutable|null $dt): ?stri
 
     public function dataTable(QueryBuilder $query): EloquentDataTable
     {
-        $data_table = new EloquentDataTable($query);
+        $dataTable = new EloquentDataTable($query);
         $rawColumns = [
             'priority_icon',
             'report_status_led',
         ];
         foreach ($this->renderCustomColumns() as $column => $content) {
-            $data_table->addColumn($column, $content);
+            $dataTable->addColumn($column, $content);
             $rawColumns[] = $column;
         }
 
-        // Apply the status filter
+        // Apply status filter
         if (($status = strtolower($this->request()->get('status'))) && $status !== 'all') {
-            $data_table->filter(function ($query) use ($status) {
+            $dataTable->filter(function ($query) use ($status) {
                 switch ($status) {
                     case 'unread':
-                        $query->whereNull('read_at');
+                        $query->where('report_status', '<', ReportStatus::Finalized->value);
                         break;
                     case 'read':
-                        $query->whereNotNull('read_at');
+                        $query->where('report_status', '>=', ReportStatus::Finalized->value);
                         break;
                     case 'progress':
                         $query->whereNotNull('locked_at');
@@ -68,12 +69,36 @@ public function dataTable(QueryBuilder $query): EloquentDataTable
             });
         }
 
-        $data_table
+        // Apply date range filter
+        if ($sfrom = $this->request()->get('s_f')) {
+            $study_from = Carbon::parse($sfrom);
+            $sto = $this->request()->get('s_t');
+            if ($sto) {
+                $study_to = Carbon::parse($sto);
+
+                if ($study_from->eq($study_to)) {
+                    $dataTable->filter(function ($query) use ($study_from) {
+                        $query->whereDate('study_date', $study_from);
+                    });
+                } else {
+                    $dataTable->filter(function ($query) use ($study_from, $study_to) {
+                        $query->whereDate('study_date', '>=', $study_from)
+                            ->whereDate('study_date', '<=', $study_to);
+                    });
+                }
+            } else {
+                $dataTable->filter(function ($query) use ($study_from) {
+                    $query->whereDate('study_date', $study_from);
+                });
+            }
+        }
+
+        $dataTable
             ->orderColumn(WorklistColumn::PatientName->value, sprintf('%s $1', WorklistColumn::PatientName->value))
             ->rawColumns($rawColumns)
             ->setRowId('id');
 
-        return $data_table;
+        return $dataTable;
     }
 
     /**

resources/assets/js/forms-pickers.js

@@ -1,11 +1,302 @@
+/**
+ * Form Picker
+ */
+
 'use strict';
 
 (function () {
-    const flatpickrDate = document.querySelector('.flatpickr-date');
+  // Flat Picker
+  // --------------------------------------------------------------------
+  const flatpickrDate = document.querySelector('#flatpickr-date'),
+    flatpickrTime = document.querySelector('#flatpickr-time'),
+    flatpickrDateTime = document.querySelector('#flatpickr-datetime'),
+    flatpickrMulti = document.querySelector('#flatpickr-multi'),
+    flatpickrRange = document.querySelector('#flatpickr-range'),
+    flatpickrInline = document.querySelector('#flatpickr-inline'),
+    flatpickrFriendly = document.querySelector('#flatpickr-human-friendly'),
+    flatpickrDisabledRange = document.querySelector('#flatpickr-disabled-range');
 
+  // Date
   if (flatpickrDate) {
     flatpickrDate.flatpickr({
       monthSelectorType: 'static'
     });
   }
+
+  // Time
+  if (flatpickrTime) {
+    flatpickrTime.flatpickr({
+      enableTime: true,
+      noCalendar: true
+    });
+  }
+
+  // Datetime
+  if (flatpickrDateTime) {
+    flatpickrDateTime.flatpickr({
+      enableTime: true,
+      dateFormat: 'Y-m-d H:i'
+    });
+  }
+
+  // Multi Date Select
+  if (flatpickrMulti) {
+    flatpickrMulti.flatpickr({
+      weekNumbers: true,
+      enableTime: true,
+      mode: 'multiple',
+      minDate: 'today'
+    });
+  }
+
+  // Range
+  if (typeof flatpickrRange != undefined) {
+    flatpickrRange.flatpickr({
+      mode: 'range'
+    });
+  }
+
+  // Inline
+  if (flatpickrInline) {
+    flatpickrInline.flatpickr({
+      inline: true,
+      allowInput: false,
+      monthSelectorType: 'static'
+    });
+  }
+
+  // Human Friendly
+  if (flatpickrFriendly) {
+    flatpickrFriendly.flatpickr({
+      altInput: true,
+      altFormat: 'F j, Y',
+      dateFormat: 'Y-m-d'
+    });
+  }
+
+  // Disabled Date Range
+  if (flatpickrDisabledRange) {
+    const fromDate = new Date(Date.now() - 3600 * 1000 * 48);
+    const toDate = new Date(Date.now() + 3600 * 1000 * 48);
+
+    flatpickrDisabledRange.flatpickr({
+      dateFormat: 'Y-m-d',
+      disable: [
+        {
+          from: fromDate.toISOString().split('T')[0],
+          to: toDate.toISOString().split('T')[0]
+        }
+      ]
+    });
+  }
 })();
+
+// * Pickers with jQuery dependency (jquery)
+$(function () {
+  // Bootstrap Datepicker
+  // --------------------------------------------------------------------
+  var bsDatepickerBasic = $('#bs-datepicker-basic'),
+    bsDatepickerFormat = $('#bs-datepicker-format'),
+    bsDatepickerRange = $('#bs-datepicker-daterange'),
+    bsDatepickerDisabledDays = $('#bs-datepicker-disabled-days'),
+    bsDatepickerMultidate = $('#bs-datepicker-multidate'),
+    bsDatepickerOptions = $('#bs-datepicker-options'),
+    bsDatepickerAutoclose = $('#bs-datepicker-autoclose'),
+    bsDatepickerInlinedate = $('#bs-datepicker-inline');
+
+  // Basic
+  if (bsDatepickerBasic.length) {
+    bsDatepickerBasic.datepicker({
+      todayHighlight: true,
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Format
+  if (bsDatepickerFormat.length) {
+    bsDatepickerFormat.datepicker({
+      todayHighlight: true,
+      format: 'dd/mm/yyyy',
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Range
+  if (bsDatepickerRange.length) {
+    bsDatepickerRange.datepicker({
+      todayHighlight: true,
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Disabled Days
+  if (bsDatepickerDisabledDays.length) {
+    bsDatepickerDisabledDays.datepicker({
+      todayHighlight: true,
+      daysOfWeekDisabled: [0, 6],
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Multiple
+  if (bsDatepickerMultidate.length) {
+    bsDatepickerMultidate.datepicker({
+      multidate: true,
+      todayHighlight: true,
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Options
+  if (bsDatepickerOptions.length) {
+    bsDatepickerOptions.datepicker({
+      calendarWeeks: true,
+      clearBtn: true,
+      todayHighlight: true,
+      orientation: isRtl ? 'auto left' : 'auto right'
+    });
+  }
+
+  // Auto close
+  if (bsDatepickerAutoclose.length) {
+    bsDatepickerAutoclose.datepicker({
+      todayHighlight: true,
+      autoclose: true,
+      orientation: isRtl ? 'auto right' : 'auto left'
+    });
+  }
+
+  // Inline picker
+  if (bsDatepickerInlinedate.length) {
+    bsDatepickerInlinedate.datepicker({
+      todayHighlight: true
+    });
+  }
+
+  // Bootstrap Daterange Picker
+  // --------------------------------------------------------------------
+  var bsRangePickerBasic = $('#bs-rangepicker-basic'),
+    bsRangePickerSingle = $('#bs-rangepicker-single'),
+    bsRangePickerTime = $('#bs-rangepicker-time'),
+    bsRangePickerRange = $('#bs-rangepicker-range'),
+    bsRangePickerWeekNum = $('#bs-rangepicker-week-num'),
+    bsRangePickerDropdown = $('#bs-rangepicker-dropdown');
+
+  // Basic
+  if (bsRangePickerBasic.length) {
+    bsRangePickerBasic.daterangepicker({
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+
+  // Single
+  if (bsRangePickerSingle.length) {
+    bsRangePickerSingle.daterangepicker({
+      singleDatePicker: true,
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+
+  // Time & Date
+  if (bsRangePickerTime.length) {
+    bsRangePickerTime.daterangepicker({
+      timePicker: true,
+      timePickerIncrement: 30,
+      locale: {
+        format: 'MM/DD/YYYY h:mm A'
+      },
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+
+  if (bsRangePickerRange.length) {
+    bsRangePickerRange.daterangepicker({
+      ranges: {
+        Today: [moment(), moment()],
+        Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+        'This Month': [moment().startOf('month'), moment().endOf('month')],
+        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+      },
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+
+  // Week Numbers
+  if (bsRangePickerWeekNum.length) {
+    bsRangePickerWeekNum.daterangepicker({
+      showWeekNumbers: true,
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+  // Dropdown
+  if (bsRangePickerDropdown.length) {
+    bsRangePickerDropdown.daterangepicker({
+      showDropdowns: true,
+      opens: isRtl ? 'left' : 'right'
+    });
+  }
+
+  // jQuery Timepicker
+  // --------------------------------------------------------------------
+  var basicTimepicker = $('#timepicker-basic'),
+    minMaxTimepicker = $('#timepicker-min-max'),
+    disabledTimepicker = $('#timepicker-disabled-times'),
+    formatTimepicker = $('#timepicker-format'),
+    stepTimepicker = $('#timepicker-step'),
+    altHourTimepicker = $('#timepicker-24hours');
+
+  // Basic
+  if (basicTimepicker.length) {
+    basicTimepicker.timepicker({
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+
+  // Min & Max
+  if (minMaxTimepicker.length) {
+    minMaxTimepicker.timepicker({
+      minTime: '2:00pm',
+      maxTime: '7:00pm',
+      showDuration: true,
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+
+  // Disabled Picker
+  if (disabledTimepicker.length) {
+    disabledTimepicker.timepicker({
+      disableTimeRanges: [
+        ['12am', '3am'],
+        ['4am', '4:30am']
+      ],
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+
+  // Format Picker
+  if (formatTimepicker.length) {
+    formatTimepicker.timepicker({
+      timeFormat: 'H:i:s',
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+
+  // Steps Picker
+  if (stepTimepicker.length) {
+    stepTimepicker.timepicker({
+      step: 15,
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+
+  // 24 Hours Format
+  if (altHourTimepicker.length) {
+    altHourTimepicker.timepicker({
+      show: '24:00',
+      timeFormat: 'H:i:s',
+      orientation: isRtl ? 'r' : 'l'
+    });
+  }
+});

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

@@ -23,6 +23,9 @@
         '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/flatpickr/flatpickr.scss',
+        'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
+        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
     ])
 @endsection
 
@@ -31,11 +34,15 @@
 
     @vite([
         'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
+        'resources/assets/vendor/libs/flatpickr/flatpickr.js',
+        'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
+        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
     ])
 @endsection
 
 @section('page-script')
     @vite([
+        //'resources/assets/js/forms-pickers.js',
         'resources/assets/js/ui-popover.js'
     ])
 
@@ -83,39 +90,70 @@
 
     <script type="text/javascript">
         $(function () {
-            let _status = '';
+            function generateUrl(status, sf, st) {
+                const url = new URL("{{ route('staff.worklist.index') }}");
+                if (status) {
+                    url.searchParams.set('status', status);
+                }
+                if (sf) {
+                    url.searchParams.set('s_f', sf);
+                }
+                if (st) {
+                    url.searchParams.set('s_t', st);
+                }
+                return url.toString();
+            }
+
+            const fp_study = $('#study_date_range').flatpickr({
+                mode: 'range',
+                dateFormat: 'Y-m-d'
+            });
+
+            let _status = null;
+            let _study_from = null;
+            let _study_to = null;
 
-            function initTable() {
             const tableId = '#worklist-table';
-                if ($.fn.dataTable.isDataTable(tableId)) {
+            const table = $(tableId).DataTable({
-                    console.log('getting old table');
-                    return $(tableId).DataTable();
-                }
-
-                console.log('Creating new table');
-                return $(tableId).DataTable(
-                    {
-                        destroy: true,
                 retrieve: true
-                    }
+            });
-                );
+
+            function getActiveTabStatus() {
+                return $('.nav-tabs .active').attr('id').replace('nav-', '');
             }
 
-            function filterTable(status) {
+            function filterTableStatus(status) {
                 _status = status;
-                const table = initTable();
+                table.ajax.url(generateUrl(_status, null, null)).load();
-                console.log(table);
-                //table.clear();
-                table.ajax.url('{{ route('staff.worklist.index') }}?status=' + status).load();
             }
 
-            // Set default filter to 'Pending'
+            function filterTableStudyDate(from, to) {
-            filterTable('unread');
+                table.ajax.url(generateUrl(_status, from, to)).load();
+            }
+
+            function filterTable() {
+                table.ajax.url(generateUrl(_status, _study_from, _study_to)).load();
+            }
+
+            function formatDate(date) {
+                return new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10);
+            }
+
+            filterTableStatus('unread');
 
             $('a[data-bs-toggle="tab"]').on('click', function (e) {
-                console.log($(e.target).attr('id'));
+                _status = $(e.target).attr('id').replace('nav-', '');
-                const tab_status = $(e.target).attr('id').replace('nav-', '');
+                filterTable();
-                filterTable(tab_status);
+            });
+
+            $('#study_date_search').on('click', function () {
+                const dateRange = fp_study.selectedDates;
+                console.log(dateRange[0].toDateString());
+                if (dateRange.length == 2) {
+                    _study_from = formatDate(dateRange[0]);
+                    _study_to = formatDate(dateRange[1]);
+                    filterTable();
+                }
             });
         });
     </script>
@@ -124,6 +162,7 @@ function filterTable(status) {
 
 @section('content')
     @include('staff.worklist.partials._stats')
+    @include('staff.worklist.partials._filter-panel')
 
     @include('staff.worklist.partials._nav-top')
 

resources/views/staff/worklist/partials/_filter-panel.blade.php

@@ -0,0 +1,28 @@
+<div class="row">
+
+    <!-- Flat Picker -->
+    <div class="col-12 mb-6">
+        <div class="card">
+            <h5 class="card-header">Filter</h5>
+            <div class="card-body">
+                <div class="row">
+
+                    <div class="col-md-6 col-6 mb-6">
+                        <div class="form-floating form-floating-outline">
+                            <input type="text" class="form-control" id="study_date_range"
+                                   placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range"/>
+                            <label for="flatpickr-range">Study Date</label>
+                        </div>
+                    </div>
+
+                    <div class="col-4">
+                        <button id="study_date_search" class="btn btn-outline-primary">
+                            <i class="fa-regular fa-calendar me-2" ></i>Search
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>