TPS/elektronika_bagisto
TPS
/
elektronika_bagisto
6
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Bug fixes and UI touchups in DataGrid

This commit is contained in:
prashant-webkul 2018-08-06 15:21:24 +05:30
parent 7c5253aec2
commit ce1a3ebad6
10 changed files with 131 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/Webkul/Admin/src/Http/ViewComposers/DataGrids/UserComposer.php
View File

@ -30,13 +30,11 @@ class UserComposer
'name' => 'Admins',
'table' => 'admins as u',
'select' => 'u.id',
'aliased' => true, //boolean to validate aliasing on the basis of this.
'aliased' => true, //use this with false as default and true in case of joins
//don't use aliasing in case of filters
'filterable' => [
[
'column' => 'u.email',
'type' => 'string',
'label' => 'Admin E-Mail'
], [
'column' => 'u.name',
'type' => 'string',
'label' => 'Admin Name'
@ -51,6 +49,7 @@ class UserComposer
'label' => 'Role ID'
]
],
//don't use aliasing in case of searchables
'searchable' => [
[
'column' => 'u.email',
@ -90,6 +89,8 @@ class UserComposer
'secondaryKey' => 'r.id',
]
],
//use aliasing on secodary columns if join is performed
'columns' => [
[
'name' => 'u.id',
@ -110,13 +111,13 @@ class UserComposer
'sortable' => true,
],
[
'name' => 'r.name',
'name' => 'r.name as Role Name',
'type' => 'string',
'label' => 'Role Name',
'sortable' => true,
],
[
'name' => 'r.id as ds',
'name' => 'r.id as Role ID',
'type' => 'string',
'label' => 'Role ID',
'sortable' => true,

1
packages/Webkul/Admin/src/Resources/views/sliders/create.blade.php
View File

@ -49,6 +49,7 @@
<input type="file" class="control" id="add_image" name="image" value="" v-validate="'image|required'" placeholder="Upload from Outer"/>
<span class="control-error" v-if="errors.has('image')">@{{ errors.first('image') }}</span>
{{-- The image field validation is not working, resolve it. --}}
</image-upload>
</div>

225
packages/Webkul/Ui/src/DataGrid/DataGrid.php
View File

@ -186,7 +186,7 @@ class DataGrid
public function setSelect($select)
{
$this->select = $select ?: false;
$this->select = $select ? : false;
return $this;
}
@ -197,7 +197,7 @@ class DataGrid
public function setFilterable(array $filterable)
{
$this->filterable = $filterable ?: [];
$this->filterable = $filterable ? : [];
return $this;
}
@ -208,7 +208,7 @@ class DataGrid
public function setSearchable($searchable)
{
$this->searchable = $searchable ?: [];
$this->searchable = $searchable ? : [];
return $this;
}
@ -219,7 +219,7 @@ class DataGrid
public function setMassOperations($massops)
{
$this->massoperations = $massops ?: [];
$this->massoperations = $massops ? : [];
return $this;
}
@ -274,15 +274,23 @@ class DataGrid
}
/**
* setFilterableColumns
* @return $this
* Parse the URL
* and get it ready
* to be used.
*/
// public function setFilterableColumns($filterable_columns = [])
// {
// $this->join = $filterable_columns ?: [];
// return $this;
// }
private function parse()
{
$parsed = [];
$unparsed = url()->full();
if (count(explode('?', $unparsed))>1) {
$to_be_parsed = explode('?', $unparsed)[1];
parse_str($to_be_parsed, $parsed);
return $parsed;
} else {
return $parsed;
}
}
/**
* Add Columns.
@ -303,6 +311,35 @@ class DataGrid
return $this;
}
/**
* Adds expressional verbs to be used
* @return $this
*/
public function setOperators(array $operators)
{
$this->operators = $operators ?: [];
return $this;
}
/**
* Add Pagination.
*
* @return $this
*/
public function addPagination($pagination = [])
{
if ($pagination instanceof Pagination) {
$this->pagination = $pagination;
} elseif (gettype($pagination) == 'array' && $pagination) {
$this->pagination = new Pagination($pagination);
} else {
throw new \Exception("DataGrid: Pagination argument is not valid!");
}
return $this;
}
/**
* Add Column.
*
@ -357,34 +394,6 @@ class DataGrid
return $this;
}
/**
* Adds expressional verbs to be used
* @return $this
*/
public function setOperators(array $operators)
{
$this->operators = $operators ?: [];
return $this;
}
/**
* Add Pagination.
*
* @return $this
*/
public function addPagination($pagination = [])
{
if ($pagination instanceof Pagination) {
$this->pagination = $pagination;
} elseif (gettype($pagination) == 'array' && $pagination) {
$this->pagination = new Pagination($pagination);
} else {
throw new \Exception("DataGrid: Pagination argument is not valid!");
}
return $this;
}
/**
* Used for selecting
@ -392,6 +401,7 @@ class DataGrid
* make from controller.
* @return $this
*/
private function getSelect()
{
$select = [];
@ -404,25 +414,6 @@ class DataGrid
}
}
/**
* Parse the URL
* and get it ready
* to be used.
*/
private function parse()
{
$parsed = [];
$unparsed = url()->full();
if (count(explode('?', $unparsed))>1) {
$to_be_parsed = explode('?', $unparsed)[1];
parse_str($to_be_parsed, $parsed);
return $parsed;
} else {
return $parsed;
}
}
/**
* ->join('contacts', 'users.id', '=', 'contacts.user_id')
* @return $this->query
@ -464,74 +455,12 @@ class DataGrid
}
/**
* Used to get the filter
* params from the Url
* and processed manually
* Function runs when
* filters, sort, search
* any of it is applied
* @return $this->query
*/
// private function getQueryWithFilters()
// {
// // the only use case remaining is making and testing the full validation and testing of
// // aliased case with alias used in column names also.
// if ($this->aliased) {
// //n of joins can lead to n number of aliases for columns and neglect the as for columns
// $parsed = $this->parse();
// // dump($parsed);
// foreach ($parsed as $key => $value) {
// foreach ($value as $column => $filter) {
// if (array_keys($filter)[0]=="like") {
// $this->query->where(
// str_replace('_', '.', $column), //replace the logic of making the column name and consider the case for _ in column name already
// $this->operators[array_keys($filter)[0]],
// '%'.array_values($filter)[0].'%'
// );
// } elseif (array_keys($filter)[0]=="sort") {
// $this->query->orderBy(
// str_replace('_', '.', $column), //replace the logic of making the column name and consider the case for _
// array_values($filter)[0]
// );
// } elseif ($column == "search") {
// $this->query->where(function ($query) use ($filter) {
// foreach ($this->searchable as $search) {
// $query->orWhere($search['column'], 'like', '%'.array_values($filter)[0].'%');
// }
// });
// } else {
// $this->query->where(
// str_replace('_', '.', $column),
// $this->operators[array_keys($filter)[0]],
// array_values($filter)[0]
// );
// }
// }
// }
// } else {
// $parsed = $this->parse();
// foreach ($parsed as $key => $value) {
// foreach ($value as $column => $filter) {
// if (array_keys($filter)[0]=="like") {
// $this->query->where(
// $column,
// $this->operators[array_keys($filter)[0]],
// '%'.array_values($filter)[0].'%'
// );
// } elseif ($column == "search") {
// $this->query->where(function ($query) use ($filter) {
// foreach ($this->searchable as $search) {
// $query->orWhere($search['column'], 'like', '%'.array_values($filter)[0].'%');
// }
// });
// } else {
// $this->query->where(
// $column,
// $this->operators[array_keys($filter)[0]],
// array_values($filter)[0]
// );
// }
// }
// }
// }
// }
private function getQueryWithFilters()
{
$parsed = $this->parse();
@ -655,26 +584,8 @@ class DataGrid
$exploded_secondary = explode('.', $secondary_join_column);
$alias2 = trim($exploded_secondary[0]);
if ($alias1 == $alias2) {
//check whether secondary table columns are properly aliased
$alias_proper_secondary = true;
foreach ($this->columns as $column) {
if ($x = explode('.', $column->name)[0]) {
if (isset($x) && $x == $alias1) {
//check if this secondary column is using independent column alias
if (!strpos($column->name, 'as')) {
$alias_proper_secondary = false;
}
}
}
}
$this->getQueryWithJoin();
// if ($alias_proper_secondary) {
// $this->getQueryWithJoin();
// } else {
// throw new \Exception('Due to a bug in laravel, you can\'t use secondary table columns without aliasing');
// }
$alias_proper_secondary = true;
} else {
throw new \Exception('Aliases of Join table and the secondary key columns do not match');
}
@ -695,27 +606,25 @@ class DataGrid
}
//Check for column filter bags and resolve aliasing
//run this if there are columns with filter bag
$this->getQueryWithColumnFilters();
//Run this if there are filters or sort params or range params in the urls
// if (isset($_SERVER['QUERY_STRING'])) {
// $qr = $_SERVER['QUERY_STRING'];
// $parsed;
// parse_str($qr, $parsed);
// }
$parsed = $this->parse();
if (!empty($parsed)) {
$this->getQueryWithFilters();
} else {
$this->results = $this->query->get();
return $this->results;
}
$this->results = $this->query->get();
return $this->results;
} else {
$this->query = DB::table($this->table);
if (!empty($this->select)) {
$this->getSelect();
}
@ -726,6 +635,7 @@ class DataGrid
if (!empty($parsed)) {
$this->getQueryWithFilters();
} else {
$this->results = $this->query->get();
return $this->results;
}
@ -734,19 +644,6 @@ class DataGrid
}
}
/**
* Render mass
* action instance
* @return view
*/
// private function renderMassAction(array $attributes)
// {
// //probably render some view when mass action is needed
// //the rendered view will have the needed javascript also.
// }
/**
* @return view
*/

2
packages/Webkul/Ui/src/Resources/assets/js/app.js vendored
View File

@ -6,4 +6,4 @@ Vue.component("tree-item", require("./components/tree-view/tree-item"));
Vue.component("tree-checkbox", require("./components/tree-view/tree-checkbox"));
Vue.component("tree-radio", require("./components/tree-view/tree-radio"));
Vue.component("modal", require("./components/modal"));
Vue.component("image-upload", require("./components/image/image-upload-single"));
Vue.component("image-upload", require("./components/image/image-upload"));

0
packages/Webkul/Ui/src/Resources/assets/js/components/image/image-upload-multiple.vue
View File

2
packages/Webkul/Ui/src/Resources/assets/js/components/image/image-upload-single.vue → packages/Webkul/Ui/src/Resources/assets/js/components/image/image-upload.vue
View File

@ -28,7 +28,7 @@
mounted: function() {
this.sample = "http://www.etaletaculture.fr/wp-content/uploads/2012/10/lorem-ipsum.jpg";
this.sample = "";
var element = this.$el.getElementsByTagName("input")[0];
var this_this = this;
element.onchange = function() {

28
packages/Webkul/Ui/src/Resources/assets/sass/app.scss vendored
View File

@ -663,21 +663,21 @@ h2 {
.dropdown-filters {
display: inline-flex;
.column-filter {
margin-right: 5px;
// .column-filter {
// margin-right: 5px;
.control {
font-family: "montserrat", sans-serif;
padding-left: 5px;
height: 36px;
width: 150px;
border: 2px solid $control-border-color;
border-radius: 3px;
background-color: white;
color: #8e8e8e;
font-size: 14px;
}
}
// .control {
// font-family: "montserrat", sans-serif;
// padding-left: 5px;
// height: 36px;
// width: 150px;
// border: 2px solid $control-border-color;
// border-radius: 3px;
// background-color: white;
// color: #8e8e8e;
// font-size: 14px;
// }
// }
.more-filters {
margin-right: 5px;

9
packages/Webkul/Ui/src/Resources/views/datagrid/filters/default.blade.php
View File

@ -8,14 +8,17 @@
</div>
</div>
<div class="dropdown-filters">
<div class="column-filter">
<div class="dropdown-list bottom-right" style="display: none;">
<div class="column-filter" style="display: none;">
<div class="dropdown-list bottom-right">
<div class="dropdown-container">
<ul>
@foreach($columns as $column)
<li data-name="{{ $column->name }}">
{{ $column->label }}
<span class="checkbox"><input type="checkbox" id="{{ $column->id }}" name="checkbox1[]"> <label for="checkbox1" class="checkbox-view"></label></span>
<span class="checkbox">
<input type="checkbox" id="{{ $column->id }}" name="checkbox1[]">
<label for="checkbox1" class="checkbox-view"></label>
</span>
</li>
@endforeach
</ul>

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

@ -195,16 +195,21 @@
id.splice(index,1);
}
if(id.length>0) {
$('.mass-action').css('display','');
$('.table-grid-header').css('display','none');
// $('.selected-items').html(id.toString());
$('#indexes').val(id);
}else if(id.length == 0) {
$('.mass-action').css('display','none');
$('.table-grid-header').css('display','');
$('#indexes').val('');
if($('#mastercheckbox').prop('checked')) {
$('#mastercheckbox').prop('checked',false);
}
}
});
@ -216,7 +221,6 @@
if(allFilters1.length>0)
{
for(i=0;i<allFilters1.length;i++) {
console.log(allFilters1[i]);
if(i==0){
url = '?' + allFilters1[i].column + '[' + allFilters1[i].cond + ']' + '=' + allFilters1[i].val;
}
@ -254,14 +258,32 @@
makeTagsTestPrior();
}
var label; //use the label to prevent the display of column name on the body
//use the label to prevent the display of column name on the body
function makeTagsTestPrior() {
var filterRepeat = 0;
console.log(allFilters1);
if(allFilters1.length!=0)
for(var i = 0;i<allFilters1.length;i++) {
col_label_tag = $('li[data-name="'+allFilters1[i].column+'"]').text();
var filter_card = '<span class="filter-one" id="'+ i +'"><span class="filter-name">'+ col_label_tag +'</span><span class="filter-value"><span class="f-value">'+ allFilters1[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
$('.filter-row-two').append(filter_card);
if(allFilters1[i].column == "sort") {
col_label_tag = $('li[data-name="'+allFilters1[i].cond+'"]').text();
var filter_card = '<span class="filter-one" id="'+ i +'"><span class="filter-name">'+ col_label_tag +'</span><span class="filter-value"><span class="f-value">'+ allFilters1[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
$('.filter-row-two').append(filter_card);
} else if(allFilters1[i].column == "search") {
col_label_tag = "Search";
var filter_card = '<span class="filter-one" id="'+ i +'"><span class="filter-name">'+ col_label_tag +'</span><span class="filter-value"><span class="f-value">'+ allFilters1[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
$('.filter-row-two').append(filter_card);
} else {
col_label_tag = $('li[data-name="'+allFilters1[i].column+'"]').text();
var filter_card = '<span class="filter-one" id="'+ i +'"><span class="filter-name">'+ col_label_tag +'</span><span class="filter-value"><span class="f-value">'+ allFilters1[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
$('.filter-row-two').append(filter_card);
}
}
}
@ -270,7 +292,7 @@
/*validate the conditions here and do the replacements and
push here in the all filters array*/
var obj1 = {};
if(column == "" || condition == "" || response == ""){
if(column == "" || condition == "" || response == "") {
alert("Please mention all the fields for column, condition and match params for proper functioning");
return false;
}
@ -303,7 +325,7 @@
if(allFilters1[j].column == "sort") {
if(allFilters1[j].column==column && allFilters1[j].cond==condition && allFilters1[j].val==response){
if(response=="asc"){
if(response=="asc") {
allFilters1[j].column = column;
allFilters1[j].cond = condition;
allFilters1[j].val = "desc";
@ -367,7 +389,6 @@
makeURL();
}
}
}
</script>
@endsection

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

@ -90,7 +90,15 @@
</span>
</th>
@foreach ($columns as $column) @if($column->sortable == "true")
<th class="labelled-col grid_head sort-head" data-column-name="{{ $column->name }}" data-column-label="{{ $column->label }}"
<th class="labelled-col grid_head sort-head"
@if(strpos($column->name, ' as '))
<?php $exploded_name = explode(' as ',$column->name); ?>
data-column-name="{{ $exploded_name[0] }}"
@else
data-column-name="{{ $column->name }}"
@endif
data-column-label="{{ $column->label }}"
data-column-sort="asc">{!! $column->sorting() !!}<span class="icon sort-down-icon"></span>
</th>
@else