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

filters running dynamically, figure out sort and search now

This commit is contained in:
prashant-webkul 2018-07-18 12:10:47 +05:30
parent 54a36819a6
commit c01ddc2ebb
1 changed files with 105 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php
View File

@ -2,9 +2,9 @@
<div class="{{ $css->filter }}filter-wrapper">
<div class="filter-row-one">
<div class="search-filter" style="display: inline-flex; align-items: center;">
<input type="search" class="control filter-field" placeholder="Search Users" value=""/>
<input type="search" class="control search-field" placeholder="Search Users" value=""/>
<div class="ic-wrapper">
<span class="icon search-icon filter-btn"></span>
<span class="icon search-icon search-btn"></span>
</div>
</div>
@ -85,7 +85,7 @@
</li>
{{-- Response fields based on the type of columns to be filtered --}}
<li class="filter-response-string">
<input type="text" class="control conditional-response" placeholder="Value here" />
<input type="text" class="control response-string" placeholder="Value here" />
</li>
<li class="filter-response-boolean">
<select class="control select-boolean">
@ -94,10 +94,13 @@
</select>
</li>
<li class="filter-response-datetime">
<input type="datetime-local" class="control conditional-response" placeholder="Value here" />
<input type="datetime-local" class="control response-datetime" placeholder="Value here" />
</li>
<li class="filter-response-number">
<input type="text" class="control conditional-response" placeholder="Value here" />
<input type="text" class="control response-number" placeholder="Value here" />
</li>
<li>
<button class="btn btn-sm btn-primary apply-filter">Apply</button>
</li>
</ul>
</div>
@ -173,21 +176,23 @@
var filter_value;
var filter_column;
var filter_condition;
var filter_range;
var filt = '';
var count_filters = 0;
var url;
var flag = 0;
var array_start = '{';
var array_end = '}';
var array_start = '[';
var array_end = ']';
var typeValue;
var selectedColumn = '';
var myURL = document.location;
let params;
$(document).ready(function(){
console.log('ready');
$('.filter-btn').click(function(){
filter_value = $(".filter-field").val();
$('.search-btn').click(function(){
filter_value = $(".search-field").val();
});
$('select.filter-column-select').change(function() {
typeValue = $('select.filter-column-select').find(':selected').data('type');
console.log(typeValue);
selectedColumn = $('select.filter-column-select').find(':selected').val();
if(typeValue == 'string'){
//default behaviour for strings
$('.filter-condition-dropdown-number').css('display','none');
@ -196,62 +201,125 @@
$('.filter-response-datetime').css('display','none');
$('.filter-response-boolean').css('display','none');
//show the two wanted
$('.filter-condition-dropdown-string').css('display','inherit');
$('.filter-response-string').css('display','inherit');
}
else if(typeValue == 'boolean'){
//make another list component
//hide unwanted
$('.filter-condition-dropdown-string').css('display','none');
$('.filter-condition-dropdown-number').css('display','none');
$('.filter-condition-dropdown-datetime').css('display','none');
$('.filter-response-string').css('display','none');
$('.filter-response-number').css('display','none');
$('.filter-response-datetime').css('display','none');
$('.filter-condition-dropdown').css('display','none');
//show what is wanted
//only true or false for that column is needed as input
$('.filter-response-boolean').css('display','inherit');
}
else if(typeValue == 'datetime'){
//make another list component
//hide unwanted
$('.filter-condition-dropdown-string').css('display','none');
$('.filter-condition-dropdown-number').css('display','none');
$('.filter-response-string').css('display','none');
$('.filter-response-number').css('display','none');
$('.filter-response-boolean').css('display','none');
//show what is wanted
$('.filter-condition-dropdown-datetime').css('display','inherit');
$('.filter-response-datetime').css('display','inherit');
$('.filter-condition-dropdown').css('display','inherit');
}
else if(typeValue == 'number'){
//make another list component
//hide unwanted
$('.filter-condition-dropdown-string').css('display','none');
$('.filter-condition-dropdown-datetime').css('display','none');
$('.filter-response-string').css('display','none');
$('.filter-response-datetime').css('display','none');
$('.filter-response-boolean').css('display','none');
//show what is wanted
$('.filter-condition-dropdown-number').css('display','inherit');
$('.filter-response-number').css('display','inherit');
$('.filter-condition-dropdown').css('display','inherit');
}
$('.apply-filter').on('click',function(){
params = (new URL(document.location)).search;
if(typeValue == 'number'){
var conditionUsed = $('.filter-condition-dropdown-number').find(':selected').val();
var response = $('.response-number').val();
console.log(selectedColumn,conditionUsed,response);
formURL(selectedColumn,conditionUsed,response,params);
}
if(typeValue == 'string'){
var conditionUsed = $('.filter-condition-dropdown-string').find(':selected').val();
var response = $('.response-string').val();
console.log(selectedColumn,conditionUsed,response);
formURL(selectedColumn,conditionUsed,response,params);
}
if(typeValue == 'datetime'){
var conditionUsed = $('.filter-condition-dropdown-datetime').find(':selected').val();
var response = $('.response-datetime').val();
console.log(selectedColumn,conditionUsed,response);
formURL(selectedColumn,conditionUsed,response,params);
}
if(typeValue == 'boolean'){
console.log('boolean');
}
});
});
// $('.filter-column-select').click(function(){
// var column = $('.filter-column-select').val();
// console.log(column);
// });
});
function formURL(a,b,c){
//form the array object here and convert it to string and pass it in url
if(count_filters == 0){
filt = array_start+count_filters+'=>'+array_start+filter_column+'=>'+array_start+filter_condition+'=>'+filter_value+array_end+array_end+array_end;
function formURL(column, condition, response,urlparams){
// console.log("url params=",urlparams.trim());
// console.log(params.indexOf("?"));
var pos = params.lastIndexOf("&");
var pos1 = params.lastIndexOf("?");
if(pos == -1 && pos1!=-1){
count_filters = parseInt(params.slice(1,2).trim());
console.log('use count for ?',parseInt(count_filters));
}
console.log(filt);
console.log(JSON.parse(filt))
count_filters++;
else if(pos == -1 && pos1 == -1){
count_filters = parseInt(0);
console.log('no search params found');
}
else if(pos!= -1 && pos1!= -1){
count_filters = parseInt(params.slice(pos+1,pos+2).trim());
console.log('both & and ? present so using index=',count_filters);
}
else{
count_filters = parseInt(params.slice(pos+1,pos+2).trim());
console.log(count_filters);
}
if(count_filters==0 && pos == -1 && pos1!=-1)
{
filt = filt + '&' + parseInt(count_filters+1) + '=' + selectedColumn + array_start + condition + array_end + '=' + response;
console.log(filt);
// count_filters++;
document.location = myURL + filt;
}
else if(count_filters==0 && pos==-1 && pos1==-1)
{
filt = '?' + parseInt(count_filters+1) + '=' + selectedColumn + array_start + condition + array_end + '=' + response;
console.log(filt);
// count_filters++;
document.location = myURL + filt;
}
else if(count_filters>0 && pos!=-1 && pos1!=-1){
filt = filt + '&' + parseInt(count_filters+1) + '=' + selectedColumn + array_start + condition + array_end + '=' + response;
console.log(filt);
document.location = myURL + filt;
}
else{
filt = '?' + parseInt(count_filters) + '=' + selectedColumn + array_start + condition + array_end + '=' + response;
console.log(filt);
// count_filters++;
document.location = myURL + filt;
}
// console.log(filt);
}
</script>