|
@@ -6,18 +6,27 @@
|
|
#mcp-client-messages-filters .mw-100px {
|
|
#mcp-client-messages-filters .mw-100px {
|
|
min-width: 100px;
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
- .filter-container {
|
|
|
|
|
|
+ .filter-container, .filter-child-container {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
.filter-container >div {
|
|
.filter-container >div {
|
|
- width: 30%;
|
|
|
|
|
|
+ width: 180px;
|
|
|
|
+ }
|
|
|
|
+ .filter-container >div:not(:last-child) {
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ }
|
|
|
|
+ .filter-child-container >div {
|
|
|
|
+ width: 85px;
|
|
|
|
+ }
|
|
|
|
+ .filter-child-container >div:not(:last-child) {
|
|
|
|
+ margin-right: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
<form id="mcp-client-messages-filters" method="GET" action="{{ route('mcp.client_messages') }}" class="filter-container" v-cloak>
|
|
<form id="mcp-client-messages-filters" method="GET" action="{{ route('mcp.client_messages') }}" class="filter-container" v-cloak>
|
|
<!-- DATE -->
|
|
<!-- DATE -->
|
|
- <div class="mx-3">
|
|
|
|
|
|
+ <div>
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
<label>Date:</label>
|
|
<label>Date:</label>
|
|
<select name="date_category" class="form-control input-sm" v-model="filters.date_category">
|
|
<select name="date_category" class="form-control input-sm" v-model="filters.date_category">
|
|
@@ -28,18 +37,18 @@
|
|
<option value="BETWEEN">Between</option>
|
|
<option value="BETWEEN">Between</option>
|
|
<option value="NOT_BETWEEN">Not Between</option>
|
|
<option value="NOT_BETWEEN">Not Between</option>
|
|
</select>
|
|
</select>
|
|
- <div v-show="filters.date_category" class="row mt-2">
|
|
|
|
- <div :class="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
|
|
|
|
|
|
+ <div v-show="filters.date_category" class="filter-child-container mt-2">
|
|
|
|
+ <div>
|
|
<input name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
|
|
<input name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
|
|
</div>
|
|
</div>
|
|
- <div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="col-md-6">
|
|
|
|
|
|
+ <div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
|
|
<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
|
|
<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- TO OR FROM ME -->
|
|
<!-- TO OR FROM ME -->
|
|
- <!-- <div class="mx-3">
|
|
|
|
|
|
+ <!-- <div>
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
<label>To or From Me:</label>
|
|
<label>To or From Me:</label>
|
|
<select name="to_or_from_me" class="form-control input-sm" v-model="filters.to_or_from_me">
|
|
<select name="to_or_from_me" class="form-control input-sm" v-model="filters.to_or_from_me">
|
|
@@ -50,7 +59,7 @@
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div> -->
|
|
<!-- STATUS -->
|
|
<!-- STATUS -->
|
|
- <div class="mx-3">
|
|
|
|
|
|
+ <div>
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
<label>Status:</label>
|
|
<label>Status:</label>
|
|
<select name="sms_status" class="form-control input-sm" v-model="filters.sms_status">
|
|
<select name="sms_status" class="form-control input-sm" v-model="filters.sms_status">
|
|
@@ -60,7 +69,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1">
|
|
|
|
|
|
+ <div>
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
<label> </label>
|
|
<label> </label>
|
|
<div class="d-flex">
|
|
<div class="d-flex">
|