wip filtering

This commit is contained in:
Dr Masroor Ehsan 2025-01-20 13:08:21 +06:00
parent 749cb8fa24
commit eb92cd64d6
4 changed files with 102 additions and 42 deletions

View File

@ -99,28 +99,53 @@
<script type="text/javascript"> <script type="text/javascript">
$(function () { $(function () {
function generateUrl(status, sf, st) { let _status, _study_from, _study_to, _receive_from, _receive_to, _modality, _read_by = null;
function generateUrl() {
const url = new URL("{{ route('staff.worklist.index') }}"); const url = new URL("{{ route('staff.worklist.index') }}");
if (status) { if (_status) url.searchParams.set('status', _status);
url.searchParams.set('status', status); if (_study_from) url.searchParams.set('study_from', _study_from);
} if (_study_to) url.searchParams.set('study_to', _study_to);
if (sf) { if (_receive_from) url.searchParams.set('receive_from', _receive_from);
url.searchParams.set('s_f', sf); if (_receive_to) url.searchParams.set('receive_to', _receive_to);
} if (_modality) url.searchParams.set('modality', _modality);
if (st) { if (_read_by) url.searchParams.set('read_by', _read_by);
url.searchParams.set('s_t', st);
}
return url.toString(); return url.toString();
} }
const fp_study = $('#study_date_range').flatpickr({ const date_range_config = {
mode: 'range', mode: 'range',
dateFormat: 'Y-m-d' dateFormat: 'Y-m-d',
}); altInput: true,
altFormat: "j M (D)",
disable: [
function (givenDate) {
const today = new Date();
const maxDate = new Date(today);
maxDate.setDate(today.getDate() + 1);
return givenDate > maxDate;
}
]
};
let _status = null; const fp_study = $('#study_date_range').flatpickr(date_range_config);
let _study_from = null; const fp_receive = $('#receive_date_range').flatpickr(date_range_config);
let _study_to = null;
$('#search_button').on('click', function () {
const study_range = fp_study.selectedDates;
if (study_range.length == 2) {
_study_from = formatDate(study_range[0]);
_study_to = formatDate(study_range[1]);
}
const receive_range = fp_receive.selectedDates;
if (receive_range.length == 2) {
_receive_from = formatDate(receive_range[0]);
_receive_to = formatDate(receive_range[1]);
}
filterTable();
});
const tableId = '#worklist-table'; const tableId = '#worklist-table';
const table = $(tableId).DataTable({ const table = $(tableId).DataTable({
@ -133,15 +158,15 @@ function getActiveTabStatus() {
function filterTableStatus(status) { function filterTableStatus(status) {
_status = status; _status = status;
table.ajax.url(generateUrl(_status, null, null)).load(); table.ajax.url(generateUrl()).load();
} }
function filterTableStudyDate(from, to) { function filterTableStudyDate(from, to) {
table.ajax.url(generateUrl(_status, from, to)).load(); table.ajax.url(generateUrl()).load();
} }
function filterTable() { function filterTable() {
table.ajax.url(generateUrl(_status, _study_from, _study_to)).load(); table.ajax.url(generateUrl()).load();
} }
function formatDate(date) { function formatDate(date) {
@ -155,15 +180,6 @@ function formatDate(date) {
filterTable(); 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> </script>

View File

@ -0,0 +1,9 @@
@php
if (!isset($id)) {
$id = 'chk_' . $value . '_' . random_int(100, 999);
}
@endphp
<div class="form-check form-check-inline">
<input class="form-check-input" type="{{ $type ?? 'checkbox' }}" id="{{ $id }}" value="{{ $value }}">
<label class="form-check-label" for="{{ $id }}">{{ $label ?? $value }}</label>
</div>

View File

@ -0,0 +1,6 @@
<div class="col-md-3 col-3 mb-4 me-4">
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" id="{{ $id }}" placeholder="YYYY-MM-DD to YYYY-MM-DD"/>
<label for="{{ $id }}">{{ $label }}</label>
</div>
</div>

View File

@ -1,28 +1,57 @@
<div class="row"> <div class="container-xxl flex-grow-1 container-p-y">
<!-- Flat Picker --> <div class="card card-action mb-6">
<div class="col-12 mb-6"> <div class="card-header">
<div class="card"> <h5 class="card-action-title mb-0">Filter Studies</h5>
<h5 class="card-header">Filter</h5> <div class="card-action-element">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-collapsible">
<i class="tf-icons ri-arrow-up-s-line"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="collapse show">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row g-2">
@include('staff.worklist.partials._date-range', ['id' => 'study_date_range', 'label' => 'Study Date'])
@include('staff.worklist.partials._date-range', ['id' => 'receive_date_range', 'label' => 'Receive Date'])
</div>
<div class="col-md-6 col-6 mb-6"> <div class="row g-2">
<div class="form-floating form-floating-outline"> <div class="col-md p-2">
<input type="text" class="form-control" id="study_date_range" <small class="text-light fw-medium d-block">Study Modalities</small>
placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range"/> <div class="mt-4">
<label for="flatpickr-range">Study Date</label> @include('staff.worklist.partials._check-inline', ['value' => 'CT'])
@include('staff.worklist.partials._check-inline', ['value' => 'MR'])
@include('staff.worklist.partials._check-inline', ['value' => 'CR'])
@include('staff.worklist.partials._check-inline', ['value' => 'DX'])
@include('staff.worklist.partials._check-inline', ['value' => 'US'])
@include('staff.worklist.partials._check-inline', ['value' => 'MG'])
</div> </div>
</div> </div>
</div>
<div class="col-4"> <div class="row row-bordered g-2">
<button id="study_date_search" class="btn btn-outline-primary"> <div class="col-sm">
<i class="fa-regular fa-calendar me-2" ></i>Search <button id="search_button" class="btn btn-primary me-4">
<i class="fa-regular fa-magnifying-glass me-2"></i>Search
</button>
<button class="btn btn-outline-danger"
onclick="window.location.href='{{ route('staff.worklist.index') }}'">
<i class="fa-regular fa-broom-wide me-2"></i>Clear
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>