150 lines
12 KiB
HTML
150 lines
12 KiB
HTML
<!-- BEGIN: Inbox Filter -->
|
|
<div class="intro-y flex flex-col-reverse sm:flex-row items-center">
|
|
<div class="w-full sm:w-auto relative mr-auto mt-3 sm:mt-0">
|
|
<i class="w-4 h-4 absolute my-auto inset-y-0 ml-3 left-0 z-10 text-gray-700" data-feather="search"></i>
|
|
<input type="text" class="input w-full sm:w-64 box px-10 text-gray-700 placeholder-theme-13" placeholder="Filter">
|
|
<div class="inbox-filter dropdown absolute inset-y-0 mr-3 right-0 flex items-center">
|
|
<i class="dropdown-toggle w-4 h-4 cursor-pointer text-gray-700" data-feather="chevron-down"></i>
|
|
<div class="inbox-filter__dropdown-box dropdown-box mt-10 absolute top-0 left-0 z-20">
|
|
<div class="dropdown-box__content box p-5">
|
|
<div class="grid grid-cols-12 gap-4 row-gap-3">
|
|
<div class="col-span-6">
|
|
<div class="text-xs">Requested o</div>
|
|
<select id="" class="input w-full border mt-2 flex-1">
|
|
|
|
<option value="Today">Today</option>
|
|
<option value="Last 7 days">Last 7 days</option>
|
|
<option value="For all time">For all time</option>
|
|
<option value="date_range1">from date to date</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-span-6">
|
|
<div class="text-xs">Posted on</div>
|
|
<select data-placeholder="Select Posted on" id="" class="input w-full border mt-2 flex-1">
|
|
|
|
<option value="Today">Today</option>
|
|
<option value="Last 7 days">Last 7 days</option>
|
|
<option value="For all time">For all time</option>
|
|
<option value="date_range">from date to date</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-span-6">
|
|
<div class="text-xs">Applied on</div>
|
|
<select id="applied-select" class="input w-full border mt-2 flex-1">
|
|
<option value="Today">Today</option>
|
|
<option value="Last 7 days">Last 7 days</option>
|
|
<option value="For all time">For all time</option>
|
|
<option value="date_applied">from date to date</option>
|
|
</select>
|
|
|
|
<!-- обёртка для диапазона дат (по умолчанию скрыта) -->
|
|
<div id="date-range-wrapper" class="p-5 grid grid-cols-12 gap-4 row-gap-3 mt-4" style="display: none;">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label>From</label>
|
|
<input id="date-from" class="datepicker input w-full border mt-2">
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label>To</label>
|
|
<input id="date-to" class="datepicker input w-full border mt-2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const select = document.getElementById('applied-select');
|
|
const dateRangeWrapper = document.getElementById('date-range-wrapper');
|
|
const dateFrom = document.getElementById('date-from');
|
|
const dateTo = document.getElementById('date-to');
|
|
|
|
select.addEventListener('change', function () {
|
|
if (this.value === 'date_applied') {
|
|
dateRangeWrapper.style.display = 'grid';
|
|
} else {
|
|
dateRangeWrapper.style.display = 'none';
|
|
dateFrom.value = '';
|
|
dateTo.value = '';
|
|
}
|
|
});
|
|
|
|
// Если хочешь — можно сохранить даты как data-атрибут или передать их куда нужно
|
|
dateFrom.addEventListener('change', function () {
|
|
select.setAttribute('data-date-from', this.value);
|
|
});
|
|
|
|
dateTo.addEventListener('change', function () {
|
|
select.setAttribute('data-date-to', this.value);
|
|
});
|
|
</script>
|
|
|
|
<div class="col-span-6">
|
|
|
|
<div class="mt-3">
|
|
<label>Clients</label>
|
|
<div class="mt-2">
|
|
<select data-placeholder="Select Clients" id="clients-multiselect" class="select2 w-full" multiple="multiple">
|
|
{% set seen_ids = [] %}
|
|
{% for job in jobs %}
|
|
{% if job.client.id not in seen_ids %}
|
|
<option value="{{ job.client.id }}">{{ job.client.user_nicename }}</option>
|
|
{% set _ = seen_ids.append(job.client.id) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-span-6">
|
|
<div class="mt-3">
|
|
<label>Assignee</label>
|
|
<div class="mt-2">
|
|
<select data-placeholder="Select Assignee" class="select2 w-full" multiple="multiple" name="assignee">
|
|
<option value="">— Not selected —</option>
|
|
{% for user in users %}
|
|
<option value="{{ user.id }}"
|
|
{% if user.id in assigned_users_ids %}selected{% endif %}>
|
|
{{ user.username }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-6">
|
|
|
|
<div class="mt-3">
|
|
<label>Status</label>
|
|
<div class="mt-2">
|
|
<select data-placeholder="Select Status" class="select2 w-full" multiple>
|
|
<option value="Scheduled" >Scheduled</option>
|
|
<option value="Requested">Requested</option>
|
|
<option value="In-Progress">In-Progress</option>
|
|
<option value="Applied">Applied</option>
|
|
<option value="Issues Applying">Issues Applying</option>
|
|
<option value="Cancelled">Cancelled</option>
|
|
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 flex items-center mt-3">
|
|
|
|
<button class="button w-32 justify-center block bg-theme-1 text-white ml-2">Search</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full sm:w-auto flex">
|
|
|
|
<div class="dropdown relative">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END: Inbox Filter --> |