Simplify course search functionality and update route names for clarity
This commit is contained in:
@@ -14,13 +14,13 @@
|
||||
</div>
|
||||
|
||||
|
||||
{{ html()->form('GET')->route('program.index')->class(['filter-form', 'filterForm'])->attributes(['id' => 'filter-form'])->open() }}
|
||||
{{ html()->form('GET')->route('program.coursefinder')->class(['filter-course-form'])->attributes(['id' => 'filter-course-form'])->open() }}
|
||||
<div class="row">
|
||||
<div class=" col col-md-9 ">
|
||||
<div class=" course-finder-top">
|
||||
<h2 class="text-black text-center text-24 py-10">Browse Subjects</h2>
|
||||
{{ html()->text('search')->value(request('search'))->placeholder('Search Program')->class('form-control px-10 py-10')->style('width: 95%;') }}
|
||||
<button type="submit" class="bg-transparent border-0"><i
|
||||
{{ html()->text('search')->placeholder('Search Program...')->class('form-control px-10 py-10')->style('width: 95%;') }}
|
||||
<button class="bg-transparent border-0"><i
|
||||
class="lqd-icn-ess icon-ld-search-2 text-24 font-bold"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -70,10 +70,9 @@
|
||||
|
||||
<div class="col col-sm-6 col-md-4">
|
||||
<div class="flex gap-10 items-center flex-wrp">
|
||||
<input class="text-14 px-5 py-10 w-50percent" type="text" name="min_score"
|
||||
placeholder="Min score" value="{{ request('min_score') }}">
|
||||
<input class="text-14 px-5 py-10 w-50percent" type="text" placeholder="Max Score"
|
||||
value="{{ request('max_score') }}">
|
||||
{{ html()->text('min_score')->class('form-control form-control-sm numeric bg-light text-14 px-5 py-10 w-50percent')->placeholder('Min score') }}
|
||||
|
||||
{{ html()->text('max_score')->class('form-control form-control-sm numeric bg-light text-14 px-5 py-10 w-50percent')->placeholder('Max score') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -82,102 +81,122 @@
|
||||
<button type="submit"
|
||||
class="text-14 px-20 py-10 rounded-10 bg-sec text-white border-0">Submit</button>
|
||||
<a href="javascript:void(0)" onclick="resetForm()"><button
|
||||
class="text-14 px-20 py-10 rounded-10 bg-brand text-white border-0">Reset</button></a>
|
||||
class="text-14 px-20 py-10 rounded-10 bg-brand text-white border-0 reset-course-filter">Reset</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ html()->form()->close() }}
|
||||
|
||||
|
||||
<div class="data-wrapper py-20">
|
||||
<h2 class="text-22 text-center text-sec font-bold">Available Courses</h2>
|
||||
@forelse ($programs as $item)
|
||||
<div class="course-finder-box">
|
||||
<div class="row">
|
||||
<div class="col col-md-2">
|
||||
<div class="sm:w-50percent w-full h-70">
|
||||
<img class="w-full h-full" src="{{ $item->institution?->image }}"
|
||||
alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col col-md-7">
|
||||
<div class="flex flex-col gap-5">
|
||||
<h3 class="text-20 font-medium">{{ $item->title }}</h3>
|
||||
<h5 class="text-16 font-lighter">{{ $item->institution?->title }} <span
|
||||
class="text-brand">{{ $item->institution?->country?->title }}</span>
|
||||
</h5>
|
||||
<div class="flex gap-10 items-center">
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">Code:</span>
|
||||
{{ !empty($item->code) ? $item->code : 'N/A' }}</h6>
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">Fee:</span>
|
||||
{{ !empty($item->fee) ? $item->fee : 'N/A' }}</h6>
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">Schlorship:</span>
|
||||
{{ !empty($item->scholarship) ? $item->scholarship : 'N/A' }}</h6>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="data-wrapper py-20" id="data-wrapper">
|
||||
@forelse ($programs as $item)
|
||||
<h2 class="text-22 text-center text-sec font-bold">Available Courses</h2>
|
||||
<div class="course-finder-box">
|
||||
<div class="row">
|
||||
<div class="col col-md-2">
|
||||
<div class="sm:w-50percent w-full h-70">
|
||||
<img class="w-full h-full" src="{{ $item->institution?->image }}"
|
||||
alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-10 items-center">
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">Level:</span>
|
||||
{{ !empty($item->programlevel?->title) ? $item->programlevel?->title : 'N/A' }}
|
||||
</h6>
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">Duration:</span>
|
||||
{{ !empty($item->year) ? $item->year : 'N/A' }}</h6>
|
||||
</h6>
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">PSW:</span>
|
||||
{{ !empty($item->psw) ? $item->psw : 'N/A' }}</h6>
|
||||
</h6>
|
||||
<div class="col col-md-7">
|
||||
<div class="flex flex-col gap-5">
|
||||
<h3 class="text-20 font-medium">{{ $item->title }}</h3>
|
||||
<h5 class="text-16 font-lighter">{{ $item->institution?->title }} <span
|
||||
class="text-brand">{{ $item->institution?->country?->title }}</span>
|
||||
</h5>
|
||||
<div class="flex gap-10 items-center">
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">Code:</span>
|
||||
{{ !empty($item->code) ? $item->code : 'N/A' }}</h6>
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">Fee:</span>
|
||||
{{ !empty($item->fee) ? $item->fee : 'N/A' }}</h6>
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">Schlorship:</span>
|
||||
{{ !empty($item->scholarship) ? $item->scholarship : 'N/A' }}
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-10 items-center">
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">Level:</span>
|
||||
{{ !empty($item->programlevel?->title) ? $item->programlevel?->title : 'N/A' }}
|
||||
</h6>
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">Duration:</span>
|
||||
{{ !empty($item->year) ? $item->year : 'N/A' }}</h6>
|
||||
</h6>
|
||||
<h6 class="text-grey font-medium text-14"><span
|
||||
class="font-bold">PSW:</span>
|
||||
{{ !empty($item->psw) ? $item->psw : 'N/A' }}</h6>
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col col-md-3">
|
||||
<div class="flex flex-col gap-10 ">
|
||||
@foreach ($item->tests as $index => $test)
|
||||
<h6 class="text-black text-16 font-medium"><span
|
||||
class="font-bold">{{ $test->title }}:</span>
|
||||
{{ $test->pivot?->min_score }}
|
||||
({{ $test->pivot?->band_score }})
|
||||
</h6>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-12">
|
||||
<div class="flex items-center gap-10">
|
||||
@if (!empty($item->intakes))
|
||||
<h6 class="text-16">Intake:</h6>
|
||||
@forelse ($item->intakes as $value)
|
||||
<h6
|
||||
class="bg-sec text-14 text-white px-5 py-5 rounded-10 font-bold">
|
||||
{{ $intakeOptions[$value] }}</h6>
|
||||
</h6>
|
||||
@empty
|
||||
<span class="fs-13 text-muted mb-0 text-center"><span
|
||||
class="badge bg-danger p-2">N/A</span></span>
|
||||
@endforelse
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col col-md-3">
|
||||
<div class="flex flex-col gap-10 ">
|
||||
@foreach ($item->tests as $index => $test)
|
||||
<h6 class="text-black text-16 font-medium"><span
|
||||
class="font-bold">{{ $test->title }}:</span>
|
||||
{{ $test->pivot?->min_score }}
|
||||
({{ $test->pivot?->band_score }})
|
||||
</h6>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-12">
|
||||
<div class="flex items-center gap-10">
|
||||
@if (!empty($item->intakes))
|
||||
<h6 class="text-16">Intake:</h6>
|
||||
@forelse ($item->intakes as $value)
|
||||
<h6 class="bg-sec text-14 text-white px-5 py-5 rounded-10 font-bold">
|
||||
{{ $intakeOptions[$value] }}</h6>
|
||||
</h6>
|
||||
@empty
|
||||
<span class="fs-13 text-muted mb-0 text-center"><span
|
||||
class="badge bg-danger p-2">N/A</span></span>
|
||||
@endforelse
|
||||
@endif
|
||||
@empty
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="data-wrapper py-20" id="data-wrapper">
|
||||
<div class="text-center">
|
||||
<h2 class="text-danger">No Course Found !!!</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endforelse
|
||||
{{ $programs->links() }}
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center">
|
||||
<p class="text-danger">No Course Found !!!</p>
|
||||
<div class="auto-load text-center" style="display: none;">
|
||||
<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="60"
|
||||
viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
|
||||
<path fill="#000"
|
||||
d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
|
||||
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
|
||||
dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
@endforelse
|
||||
{{ $programs->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-md-3">
|
||||
@@ -211,102 +230,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ html()->form()->close() }}
|
||||
|
||||
<!-- next row for b -->
|
||||
<!-- form starts -->
|
||||
</div>
|
||||
@endsection
|
||||
@push('js')
|
||||
<script>
|
||||
const url = "{{ route('program.getCoursesList') }}";
|
||||
let isLoading = false;
|
||||
$(document).ready(function() {
|
||||
setTimeout(() => {
|
||||
infiniteLoadMore(1)
|
||||
}, 2000);
|
||||
})
|
||||
|
||||
// var institutionSelect = $('.institution-select').select2();
|
||||
|
||||
$(document).on('submit', '#filter-course-form', function(event) {
|
||||
event.preventDefault();
|
||||
const page = 1;
|
||||
if (!isLoading) {
|
||||
isLoading = true;
|
||||
infiniteLoadMore(page);
|
||||
}
|
||||
})
|
||||
|
||||
// $(document).on('click', '.reset-course-filter', function(event) {
|
||||
// event.preventDefault();
|
||||
// const page = 1;
|
||||
|
||||
|
||||
// $('.institution-select').val(null).trigger('change.select2');
|
||||
|
||||
// institutionSelect.select2('destroy').select2();
|
||||
|
||||
// $('#filter-course-form')
|
||||
// .find('input:not([type="hidden"]), select, textarea')
|
||||
// .val('')
|
||||
// .prop('checked', false)
|
||||
// .prop('selected', false);
|
||||
|
||||
// if (!isLoading) {
|
||||
// isLoading = true;
|
||||
// infiniteLoadMore(page);
|
||||
// }
|
||||
// })
|
||||
|
||||
$(document).on('click', '.pagination .page-link', function(event) {
|
||||
event.preventDefault();
|
||||
const page = $(this).attr('href').split('page=')[1];
|
||||
|
||||
if (!isLoading) {
|
||||
isLoading = true;
|
||||
infiniteLoadMore(page);
|
||||
}
|
||||
});
|
||||
|
||||
function infiniteLoadMore(page) {
|
||||
$.ajax({
|
||||
url: `${url}?page=${page}`,
|
||||
datatype: "html",
|
||||
type: "GET",
|
||||
data: $('#filter-course-form').serializeArray(),
|
||||
beforeSend: function() {
|
||||
$("#data-wrapper").empty();
|
||||
$('.auto-load').show();
|
||||
}
|
||||
})
|
||||
.done(function(response) {
|
||||
if (response.html == '') {
|
||||
$('#total-result').text(`Total Results: ${response.queryCount}`);
|
||||
$('.pagination').closest().parent().find('nav').hide();
|
||||
$("#data-wrapper").empty().append(`
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="d-flex align-items-center justify-content-center">
|
||||
No data to display :(
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
$('.auto-load').hide();
|
||||
return;
|
||||
}
|
||||
|
||||
$('.auto-load').hide();
|
||||
$('#total-result').text(`Total Results: ${response.queryCount}`);
|
||||
$("#data-wrapper").empty().append(response.html);
|
||||
})
|
||||
.fail(function(jqXHR, ajaxOptions, thrownError) {
|
||||
console.log('Server error occurred');
|
||||
})
|
||||
.always(function() {
|
||||
isLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
|
||||
Reference in New Issue
Block a user