Merge branch '193-reskin-global-search' into 'master'
Update global search layout and use single template for both views #193 Closes #193 See merge request jankstudio/resq!228
This commit is contained in:
commit
c37323924a
5 changed files with 241 additions and 175 deletions
|
|
@ -276,3 +276,22 @@ span.has-danger,
|
|||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.input-group-prepend, .input-group-append {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,9 +25,10 @@ class SearchController extends BaseController
|
|||
{
|
||||
$this->denyaccessUnlessGranted('general.search', null, 'No access.');
|
||||
$params = $this->initParameters('general_search');
|
||||
$params["mode"] = "form";
|
||||
|
||||
// response
|
||||
return $this->render('search/list.html.twig', $params);
|
||||
return $this->render('search/form.html.twig', $params);
|
||||
}
|
||||
|
||||
public function search(Request $req, GeneralSearch $search)
|
||||
|
|
@ -39,6 +40,10 @@ class SearchController extends BaseController
|
|||
$results = $search->search($search_term);
|
||||
|
||||
$params['data'] = $results;
|
||||
return $this->render('search/results.html.twig', $params);
|
||||
$params['search_term'] = $search_term;
|
||||
$params['mode'] = "results";
|
||||
|
||||
// response
|
||||
return $this->render('search/form.html.twig', $params);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
215
templates/search/form.html.twig
Normal file
215
templates/search/form.html.twig
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block body %}
|
||||
<!-- BEGIN: Subheader -->
|
||||
<div class="m-subheader">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="mr-auto">
|
||||
<h3 class="m-subheader__title">
|
||||
{% if mode == 'form' %}
|
||||
Search
|
||||
{% else %}
|
||||
Search results for "<span class="text-primary">{{ search_term }}</span>"
|
||||
{% endif %}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Subheader -->
|
||||
<div class="m-content">
|
||||
<!--Begin::Section-->
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="m-portlet m-portlet--mobile">
|
||||
<div class="m-portlet__head">
|
||||
<div class="m-portlet__head-caption">
|
||||
<div class="m-portlet__head-title">
|
||||
<span class="m-portlet__head-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<h3 class="m-portlet__head-text">
|
||||
Enter a search term
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form id="search-form" autocomplete="off" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="get" action="{{ url('search_history') }}">
|
||||
<div class="m-portlet__body">
|
||||
<div class="form-group m-form__group row">
|
||||
<input name="search" type="search" class="form-control" placeholder="Search for..." value="{{ search_term|default("") }}" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-portlet__foot m-portlet__foot--fit">
|
||||
<div class="m-form__actions m-form__actions--solid m-form__actions--right">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<button type="submit" class="btn btn-success">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if mode == 'results' %}
|
||||
<!-- legacy job orders -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="m-portlet m-portlet--mobile">
|
||||
<div class="m-portlet__head">
|
||||
<div class="m-portlet__head-caption">
|
||||
<div class="m-portlet__head-title">
|
||||
<h3 class="m-portlet__head-text">
|
||||
Legacy Job Orders
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-portlet__body">
|
||||
{% if data.legacy_job_orders is empty %}
|
||||
<div class="m-alert m-alert--icon m-alert--icon-solid m-alert--outline alert alert-brand" role="alert">
|
||||
<div class="m-alert__icon">
|
||||
<i class="flaticon-exclamation-2"></i>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="m-alert__text">
|
||||
No records for legacy job orders.
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<table class="table table-striped m-table">
|
||||
<thead>
|
||||
<tr class="m-table__row--brand">
|
||||
<th>ID</th>
|
||||
<th>Last Name</th>
|
||||
<th>First Name</th>
|
||||
<th>Plate Number</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for key, result in data.legacy_job_orders %}
|
||||
<tr>
|
||||
<td>{{ result.getID|default("") }}</td>
|
||||
<td>{{ result.getCustLastName|default('') }}</td>
|
||||
<td>{{ result.getCustFirstName|default('') }}</td>
|
||||
<td>{{ result.getPlateNumber|default('') }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end legacy job orders -->
|
||||
|
||||
<!-- job orders -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="m-portlet m-portlet--mobile">
|
||||
<div class="m-portlet__head">
|
||||
<div class="m-portlet__head-caption">
|
||||
<div class="m-portlet__head-title">
|
||||
<h3 class="m-portlet__head-text">
|
||||
Job Orders
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-portlet__body">
|
||||
{% if data.job_orders is empty %}
|
||||
<div class="m-alert m-alert--icon m-alert--icon-solid m-alert--outline alert alert-brand" role="alert">
|
||||
<div class="m-alert__icon">
|
||||
<i class="flaticon-exclamation-2"></i>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="m-alert__text">
|
||||
No records for job orders.
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<table class="table table-striped m-table">
|
||||
<thead>
|
||||
<tr class="m-table__row--brand">
|
||||
<th>ID</th>
|
||||
<th>Last Name</th>
|
||||
<th>First Name</th>
|
||||
<th>Plate Number</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for key, result in data.job_orders %}
|
||||
<tr>
|
||||
<td>{{ result.getID|default("") }}</td>
|
||||
<td>{{ result.getCustomer.getLastName|default("") }}</td>
|
||||
<td>{{ result.getCustomer.getFirstName|default("") }}</td>
|
||||
<td>{{ result.getCustomerVehicle.getPlateNumber|default("") }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end job orders -->
|
||||
|
||||
|
||||
<!-- warranties -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="m-portlet m-portlet--mobile">
|
||||
<div class="m-portlet__head">
|
||||
<div class="m-portlet__head-caption">
|
||||
<div class="m-portlet__head-title">
|
||||
<h3 class="m-portlet__head-text">
|
||||
Warranties
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-portlet__body">
|
||||
{% if data.warranties is empty %}
|
||||
<div class="m-alert m-alert--icon m-alert--icon-solid m-alert--outline alert alert-brand" role="alert">
|
||||
<div class="m-alert__icon">
|
||||
<i class="flaticon-exclamation-2"></i>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="m-alert__text">
|
||||
No records for warranties.
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<table class="table table-striped m-table">
|
||||
<thead>
|
||||
<tr class="m-table__row--brand">
|
||||
<th>ID</th>
|
||||
<th>Last Name</th>
|
||||
<th>First Name</th>
|
||||
<th>Plate Number</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for key, result in data.warranties %}
|
||||
<tr>
|
||||
<td>{{ result.getID|default("") }}</td>
|
||||
<td>{{ result.getLastName|default("") }}</td>
|
||||
<td>{{ result.getFirstName|default("") }}</td>
|
||||
<td>{{ result.getPlateNumber|default("") }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end warranties -->
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block body %}
|
||||
<!-- BEGIN: Subheader -->
|
||||
<div class="m-subheader">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="mr-auto">
|
||||
<h3 class="m-subheader__title">
|
||||
Search
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Subheader -->
|
||||
<div class="m-content">
|
||||
<!--Begin::Section-->
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="m-portlet m-portlet--mobile">
|
||||
<div class="m-portlet__body">
|
||||
<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 order-2 order-xl-1">
|
||||
<div class="form-group m-form__group row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<form action= "{{ url('search_history') }}" method="get" onsubmit="handle">
|
||||
<div class="m-input-icon m-input-icon--left">
|
||||
<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search" name="search" >
|
||||
<span class="m-input-icon__icon m-input-icon__icon--left">
|
||||
<span><i class="la la-search"></i></span>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--begin: Datatable -->
|
||||
<div id="data-rows">
|
||||
</div>
|
||||
<!--end: Datatable -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
function handle(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block body %}
|
||||
<!-- BEGIN: Subheader -->
|
||||
<div class="m-subheader">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="mr-auto">
|
||||
<h3 class="m-subheader__title">
|
||||
Search
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Subheader -->
|
||||
<div class="m-content">
|
||||
<!--Begin::Section-->
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="m-portlet m-portlet--mobile">
|
||||
<div class="m-portlet__body">
|
||||
<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-8 order-2 order-xl-1">
|
||||
<div class="form-group m-form__group row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<form action= "{{ url('search_history') }}" method="get" onsubmit="handle">
|
||||
<div class="m-input-icon m-input-icon--left">
|
||||
<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search" name="search" >
|
||||
<span class="m-input-icon__icon m-input-icon__icon--left">
|
||||
<span><i class="la la-search"></i></span>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--begin: Datatable -->
|
||||
<div id="data-rows">
|
||||
<p> Legacy Job Orders </p>
|
||||
<table>
|
||||
{% if data.legacy_job_orders is empty %}
|
||||
<td colspan=100> No records for legacy job orders </td>
|
||||
{% else %}
|
||||
<th> ID </th>
|
||||
<th> Last Name </th>
|
||||
<th> Plate Number </th>
|
||||
{% for key, result in data.legacy_job_orders %}
|
||||
<tr>
|
||||
<td> {{ result.getID }} </td>
|
||||
<td> {{ result.getCustLastName | default('') }} </td>
|
||||
<td> {{ result.getCustFirstNamei | default('') }} </td>
|
||||
<td> {{ result.getPlateNumber | default('') }} </td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</table>
|
||||
<p> Job Orders </p>
|
||||
<table>
|
||||
{% if data.job_orders is empty %}
|
||||
<td colspan=100> No records for job orders </td>
|
||||
{% else %}
|
||||
<th> ID </th>
|
||||
<th> Last Name </th>
|
||||
<th> Plate Number </th>
|
||||
{% for result in data.job_orders %}
|
||||
<tr>
|
||||
<td> {{ result.getID }} </td>
|
||||
<td> {{ result.getCustomer.getLastName }} </td>
|
||||
<td> {{ result.getCustomer.getFirstName }}</td>
|
||||
<td> {{ result.getCustomerVehicle.getPlateNumber }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</table>
|
||||
<p> Warranties </p>
|
||||
<table>
|
||||
{% if data.warranties is empty %}
|
||||
<td colspan=100> No records for warranties </td>
|
||||
{% else %}
|
||||
<th> ID </th>
|
||||
<th> Last Name </th>
|
||||
<th> Plate Number </th>
|
||||
{% for result in data.warranties %}
|
||||
<tr>
|
||||
<td> {{ result.getID }} </td>
|
||||
<td> {{ result.getLastName }} </td>
|
||||
<td> {{ result.getFirstName }} </td>
|
||||
<td> {{ result.getPlateNumber }} </td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</table>
|
||||
</div>
|
||||
<!--end: Datatable -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
function handle(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in a new issue