This commit is contained in:
Dr Masroor Ehsan 2025-01-19 01:12:01 +06:00
parent 2601b40ea3
commit d37818b49f
4 changed files with 424 additions and 41 deletions

View File

@ -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;
}
/**

View File

@ -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');
if (flatpickrDate) {
flatpickrDate.flatpickr({
monthSelectorType: 'static'
});
}
// 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'
});
}
});

View File

@ -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,18 +34,22 @@
@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'
])
{{ $dataTable->scripts() }}
<script type="text/javascript">
$(function() {
$(function () {
$('body').on('click', '.showStudy', function () {
var study_id = $(this).data('id');
$.get("{{ route('staff.studies.show') }}", {hashid: study_id}, function (data) {
@ -82,40 +89,71 @@
</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();
$(function () {
function generateUrl(status, sf, st) {
const url = new URL("{{ route('staff.worklist.index') }}");
if (status) {
url.searchParams.set('status', status);
}
console.log('Creating new table');
return $(tableId).DataTable(
{
destroy: true,
retrieve: true
}
);
if (sf) {
url.searchParams.set('s_f', sf);
}
if (st) {
url.searchParams.set('s_t', st);
}
return url.toString();
}
function filterTable(status) {
const fp_study = $('#study_date_range').flatpickr({
mode: 'range',
dateFormat: 'Y-m-d'
});
let _status = null;
let _study_from = null;
let _study_to = null;
const tableId = '#worklist-table';
const table = $(tableId).DataTable({
retrieve: true
});
function getActiveTabStatus() {
return $('.nav-tabs .active').attr('id').replace('nav-', '');
}
function filterTableStatus(status) {
_status = status;
const table = initTable();
console.log(table);
//table.clear();
table.ajax.url('{{ route('staff.worklist.index') }}?status=' + status).load();
table.ajax.url(generateUrl(_status, null, null)).load();
}
// Set default filter to 'Pending'
filterTable('unread');
function filterTableStudyDate(from, to) {
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'));
const tab_status = $(e.target).attr('id').replace('nav-', '');
filterTable(tab_status);
_status = $(e.target).attr('id').replace('nav-', '');
filterTable();
});
$('#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')

View File

@ -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>