merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Issue #3331 fixed

This commit is contained in:
Pranshu Tomar 2020-06-24 17:31:28 +05:30
parent b300b97917
commit 35b200a7cf
8 changed files with 190 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/Webkul/Admin/publishable/assets/css/admin.css vendored
View File

File diff suppressed because one or more lines are too long

2
packages/Webkul/Admin/publishable/assets/mix-manifest.json
View File

@ -1,4 +1,4 @@
{
"/js/admin.js": "/js/admin.js?id=a14c779523092ac32b88",
"/css/admin.css": "/css/admin.css?id=c17742537767f5fbf06d"
"/css/admin.css": "/css/admin.css?id=56c882a611bdf3c058cb"
}

2
packages/Webkul/Admin/src/Resources/assets/sass/partials/_default.scss vendored
View File

@ -76,7 +76,7 @@ body {
.dropdown-list {
top: 63px;
right: 0px !important;
right: 0px;
bottom: inherit !important;
}

52
packages/Webkul/Admin/src/Resources/assets/sass/partials/_rtl.scss vendored
View File

@ -102,56 +102,6 @@
float: left;
}
// ui
.grid-container {
.filter-row-one .search-filter {
border: 2px solid #c7c7c7;
border-radius: 2px;
.control {
border: none;
padding-right: 10px;
}
.icon-wrapper {
border: none;
padding-top: 2px;
padding-right: 5px;
border-right: 2px solid #c7c7c7;
border-radius: 0px;
}
}
.filter-row-two .filter-tag {
.wrapper,
.icon.cross-icon {
margin-right: 10px;
margin-left: 0px;
}
}
.filter-row-one .dropdown-filters {
right: unset;
position: static !important;
left: 25px;
.per-page-label {
position: static !important;
}
}
}
.grid-container
.filter-wrapper
.filter-row-one
.dropdown-filters
.more-filters
.dropdown-toggle
.dropdown-header
span {
padding-right: 5px;
}
.grid-container .table tbody td.action a:first-child {
margin-left: 10px;
margin-right: 0px;
@ -172,7 +122,7 @@
.dropdown-list.bottom-right {
left: 0px;
right: auto;
right: auto !important;
}
.dropdown-list .dropdown-container {

2
packages/Webkul/Ui/publishable/assets/css/ui.css vendored
View File

File diff suppressed because one or more lines are too long

2
packages/Webkul/Ui/publishable/assets/mix-manifest.json
View File

@ -1,4 +1,4 @@
{
"/js/ui.js": "/js/ui.js?id=e5e928de0a10dc274cd5",
"/css/ui.css": "/css/ui.css?id=15b25d80644cec0d2e89"
"/css/ui.css": "/css/ui.css?id=1247d8ac0913336ea356"
}

80
packages/Webkul/Ui/src/Resources/assets/sass/components.scss vendored
View File

@ -5,31 +5,45 @@
width: 100%;
}
.filter-row-one {
.datagrid-filters {
display: inline-flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.dropdown-filters {
position: absolute;
right: 25px;
.filter-left {
float: left;
}
.per-page {
right: 250px;
.filter-right {
float: right;
}
.per-page-label {
position: absolute;
right: 120px;
width: 100%;
top: 8px;
.dropdown-filters {
display: inline-block;
&.per-page {
margin-right: 10px;
.control-group {
label {
width: auto;
float: left;
margin-top: 7px;
margin-right: 10px;
}
.control {
width: auto;
margin: 0;
}
}
}
}
}
.filter-row-two {
.filtered-tags {
display: inline-flex;
align-items: flex-start;
flex-wrap: wrap;
@ -37,15 +51,12 @@
}
.search-filter {
display: inline-flex;
.control {
font-size: 15px;
border: 2px solid $control-border-color;
border-right: none;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-radius: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
height: 36px;
width: 280px;
padding-left: 10px;
@ -63,11 +74,38 @@
border-bottom-left-radius: 0px;
height: 36px;
width: 36px;
margin-left: -1px;
padding: 3px;
float: right;
}
}
.search-icon {
margin-top: 3px;
margin-left: 3px;
.rtl {
.control {
padding-right: 10px;
border-left: 0;
border-right: 2px solid #C7C7C7;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.search-filter {
.icon-wrapper {
float: left;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
}
.dropdown-filters {
display: inline-block;
&.per-page {
margin-left: 10px;
margin-right: 10px;
}
}
}

245
packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
View File

@ -8,147 +8,152 @@
@push('scripts')
<script type="text/x-template" id="datagrid-filters">
<div class="grid-container">
<div class="filter-row-one" id="datagrid-filters">
<div class="search-filter">
<input type="search" id="search-field" class="control" placeholder="{{ __('ui::app.datagrid.search') }}" v-model="searchValue" v-on:keyup.enter="searchCollection(searchValue)" />
<div class="datagrid-filters" id="datagrid-filters">
<div class="icon-wrapper">
<span class="icon search-icon search-btn" v-on:click="searchCollection(searchValue)"></span>
<div class="filter-left">
<div class="search-filter">
<input type="search" id="search-field" class="control" placeholder="{{ __('ui::app.datagrid.search') }}" v-model="searchValue" v-on:keyup.enter="searchCollection(searchValue)" />
<div class="icon-wrapper">
<span class="icon search-icon search-btn" v-on:click="searchCollection(searchValue)"></span>
</div>
</div>
</div>
<div class="dropdown-filters">
<div class="dropdown-toggle">
<div class="grid-dropdown-header">
<span class="name">{{ __('ui::app.datagrid.filter') }}</span>
<i class="icon arrow-down-icon active"></i>
<div class="filter-right">
<div class="dropdown-filters per-page">
<div class="control-group">
<label class="per-page-label" for="perPage">
{{ __('ui::app.datagrid.items-per-page') }}
</label>
<select id="perPage" name="perPage" class="control" v-model="perPage" v-on:change="paginate">
<option value="10"> 10 </option>
<option value="20"> 20 </option>
<option value="30"> 30 </option>
<option value="40"> 40 </option>
<option value="50"> 50 </option>
</select>
</div>
</div>
<div class="dropdown-list dropdown-container" style="display: none;">
<ul>
<li>
<div class="control-group">
<select class="filter-column-select control" v-model="filterColumn" v-on:click="getColumnOrAlias(filterColumn)">
<option selected disabled>{{ __('ui::app.datagrid.column') }}</option>
@foreach($results['columns'] as $column)
@if(isset($column['filterable']) && $column['filterable'])
<option value="{{ $column['index'] }}">
{{ $column['label'] }}
</option>
@endif
@endforeach
</select>
</div>
</li>
<div class="dropdown-filters">
<div class="dropdown-toggle">
<div class="grid-dropdown-header">
<span class="name">{{ __('ui::app.datagrid.filter') }}</span>
<i class="icon arrow-down-icon active"></i>
</div>
</div>
{{-- suitable for string columns --}}
<li v-if='stringConditionSelect'>
<div class="control-group">
<select class="control" v-model="stringCondition">
<option selected disabled>{{ __('ui::app.datagrid.condition') }}</option>
<option value="like">{{ __('ui::app.datagrid.contains') }}</option>
<option value="nlike">{{ __('ui::app.datagrid.ncontains') }}</option>
<option value="eq">{{ __('ui::app.datagrid.equals') }}</option>
<option value="neqs">{{ __('ui::app.datagrid.nequals') }}</option>
</select>
</div>
</li>
<div class="dropdown-list dropdown-container" style="display: none;">
<ul>
<li>
<div class="control-group">
<select class="filter-column-select control" v-model="filterColumn" v-on:click="getColumnOrAlias(filterColumn)">
<option selected disabled>{{ __('ui::app.datagrid.column') }}</option>
@foreach($results['columns'] as $column)
@if(isset($column['filterable']) && $column['filterable'])
<option value="{{ $column['index'] }}">
{{ $column['label'] }}
</option>
@endif
@endforeach
</select>
</div>
</li>
{{-- Response fields based on the type of columns to be filtered --}}
<li v-if='stringCondition != null'>
<div class="control-group">
<input type="text" class="control response-string" placeholder="{{ __('ui::app.datagrid.value-here') }}" v-model="stringValue" />
</div>
</li>
{{-- suitable for string columns --}}
<li v-if='stringConditionSelect'>
<div class="control-group">
<select class="control" v-model="stringCondition">
<option selected disabled>{{ __('ui::app.datagrid.condition') }}</option>
<option value="like">{{ __('ui::app.datagrid.contains') }}</option>
<option value="nlike">{{ __('ui::app.datagrid.ncontains') }}</option>
<option value="eq">{{ __('ui::app.datagrid.equals') }}</option>
<option value="neqs">{{ __('ui::app.datagrid.nequals') }}</option>
</select>
</div>
</li>
{{-- suitable for numeric columns --}}
<li v-if='numberConditionSelect'>
<div class="control-group">
<select class="control" v-model="numberCondition">
<option selected disabled>{{ __('ui::app.datagrid.condition') }}</option>
<option value="eq">{{ __('ui::app.datagrid.equals') }}</option>
<option value="neqs">{{ __('ui::app.datagrid.nequals') }}</option>
<option value="gt">{{ __('ui::app.datagrid.greater') }}</option>
<option value="lt">{{ __('ui::app.datagrid.less') }}</option>
<option value="gte">{{ __('ui::app.datagrid.greatere') }}</option>
<option value="lte">{{ __('ui::app.datagrid.lesse') }}</option>
</select>
</div>
</li>
{{-- Response fields based on the type of columns to be filtered --}}
<li v-if='stringCondition != null'>
<div class="control-group">
<input type="text" class="control response-string" placeholder="{{ __('ui::app.datagrid.value-here') }}" v-model="stringValue" />
</div>
</li>
<li v-if='numberCondition != null'>
<div class="control-group">
<input type="number" class="control response-number" placeholder="{{ __('ui::app.datagrid.numeric-value-here') }}" v-model="numberValue"/>
</div>
</li>
{{-- suitable for numeric columns --}}
<li v-if='numberConditionSelect'>
<div class="control-group">
<select class="control" v-model="numberCondition">
<option selected disabled>{{ __('ui::app.datagrid.condition') }}</option>
<option value="eq">{{ __('ui::app.datagrid.equals') }}</option>
<option value="neqs">{{ __('ui::app.datagrid.nequals') }}</option>
<option value="gt">{{ __('ui::app.datagrid.greater') }}</option>
<option value="lt">{{ __('ui::app.datagrid.less') }}</option>
<option value="gte">{{ __('ui::app.datagrid.greatere') }}</option>
<option value="lte">{{ __('ui::app.datagrid.lesse') }}</option>
</select>
</div>
</li>
{{-- suitable for boolean columns --}}
<li v-if='booleanConditionSelect'>
<div class="control-group">
<select class="control" v-model="booleanCondition">
<option selected disabled>{{ __('ui::app.datagrid.condition') }}</option>
<option value="eq">{{ __('ui::app.datagrid.equals') }}</option>
<option value="neqs">{{ __('ui::app.datagrid.nequals') }}</option>
</select>
</div>
</li>
<li v-if='numberCondition != null'>
<div class="control-group">
<input type="number" class="control response-number" placeholder="{{ __('ui::app.datagrid.numeric-value-here') }}" v-model="numberValue"/>
</div>
</li>
<li v-if='booleanCondition != null'>
<div class="control-group">
<select class="control" v-model="booleanValue">
<option selected disabled>{{ __('ui::app.datagrid.value') }}</option>
<option value="1">{{ __('ui::app.datagrid.true') }}</option>
<option value="0">{{ __('ui::app.datagrid.false') }}</option>
</select>
</div>
</li>
{{-- suitable for boolean columns --}}
<li v-if='booleanConditionSelect'>
<div class="control-group">
<select class="control" v-model="booleanCondition">
<option selected disabled>{{ __('ui::app.datagrid.condition') }}</option>
<option value="eq">{{ __('ui::app.datagrid.equals') }}</option>
<option value="neqs">{{ __('ui::app.datagrid.nequals') }}</option>
</select>
</div>
</li>
{{-- suitable for date/time columns --}}
<li v-if='datetimeConditionSelect'>
<div class="control-group">
<select class="control" v-model="datetimeCondition">
<option selected disabled>{{ __('ui::app.datagrid.condition') }}</option>
<option value="eq">{{ __('ui::app.datagrid.equals') }}</option>
<option value="neqs">{{ __('ui::app.datagrid.nequals') }}</option>
<option value="gt">{{ __('ui::app.datagrid.greater') }}</option>
<option value="lt">{{ __('ui::app.datagrid.less') }}</option>
<option value="gte">{{ __('ui::app.datagrid.greatere') }}</option>
<option value="lte">{{ __('ui::app.datagrid.lesse') }}</option>
{{-- <option value="btw">{{ __('ui::app.datagrid.between') }}</option> --}}
</select>
</div>
</li>
<li v-if='booleanCondition != null'>
<div class="control-group">
<select class="control" v-model="booleanValue">
<option selected disabled>{{ __('ui::app.datagrid.value') }}</option>
<option value="1">{{ __('ui::app.datagrid.true') }}</option>
<option value="0">{{ __('ui::app.datagrid.false') }}</option>
</select>
</div>
</li>
<li v-if='datetimeCondition != null'>
<div class="control-group">
<input class="control" v-model="datetimeValue" type="date">
</div>
</li>
{{-- suitable for date/time columns --}}
<li v-if='datetimeConditionSelect'>
<div class="control-group">
<select class="control" v-model="datetimeCondition">
<option selected disabled>{{ __('ui::app.datagrid.condition') }}</option>
<option value="eq">{{ __('ui::app.datagrid.equals') }}</option>
<option value="neqs">{{ __('ui::app.datagrid.nequals') }}</option>
<option value="gt">{{ __('ui::app.datagrid.greater') }}</option>
<option value="lt">{{ __('ui::app.datagrid.less') }}</option>
<option value="gte">{{ __('ui::app.datagrid.greatere') }}</option>
<option value="lte">{{ __('ui::app.datagrid.lesse') }}</option>
{{-- <option value="btw">{{ __('ui::app.datagrid.between') }}</option> --}}
</select>
</div>
</li>
<button class="btn btn-sm btn-primary apply-filter" v-on:click="getResponse">{{ __('ui::app.datagrid.apply') }}</button>
</ul>
</div>
</div>
<li v-if='datetimeCondition != null'>
<div class="control-group">
<input class="control" v-model="datetimeValue" type="date">
</div>
</li>
<div class="dropdown-filters per-page">
<div class="control-group">
<label class="per-page-label" for="perPage">
{{ __('ui::app.datagrid.items-per-page') }}
</label>
<select id="perPage" name="perPage" class="control" v-model="perPage" v-on:change="paginate">
<option value="10"> 10 </option>
<option value="20"> 20 </option>
<option value="30"> 30 </option>
<option value="40"> 40 </option>
<option value="50"> 50 </option>
</select>
<button class="btn btn-sm btn-primary apply-filter" v-on:click="getResponse">{{ __('ui::app.datagrid.apply') }}</button>
</ul>
</div>
</div>
</div>
</div>
<div class="filter-row-two">
<div class="filtered-tags">
<span class="filter-tag" v-if="filters.length > 0" v-for="filter in filters" style="text-transform: capitalize;">
<span v-if="filter.column == 'sort'">@{{ filter.label }}</span>
<span v-else-if="filter.column == 'search'">Search</span>