wip
This commit is contained in:
parent
2601b40ea3
commit
d37818b49f
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -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')
|
||||
|
||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user