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

Grid Sort Fixes

This commit is contained in:
prashant-webkul 2018-10-16 17:18:45 +05:30
parent 3a17aacd90
commit 91a4fabcfb
19 changed files with 501 additions and 583 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/Webkul/Admin/src/DataGrids/CustomerDataGrid.php
View File

@ -37,7 +37,7 @@ class CustomerDataGrid
'route' => route('admin.datagrid.delete'),
'method' => 'DELETE',
'label' => 'Delete',
'type' => 'button',
'type' => 'button', //select || button only
],
],
@ -55,20 +55,10 @@ class CustomerDataGrid
],
],
'join' => [
// [
// 'join' => 'leftjoin',
// 'table' => 'roles as r',
// 'primaryKey' => 'u.role_id',
// 'condition' => '=',
// 'secondaryKey' => 'r.id',
// ]
],
'join' => [],
//use aliasing on secodary columns if join is performed
'columns' => [
[
'name' => 'id',
'alias' => 'customerId',
@ -81,14 +71,14 @@ class CustomerDataGrid
'alias' => 'customerFirstName',
'type' => 'string',
'label' => 'Name',
'sortable' => true,
'sortable' => false,
],
[
'name' => 'email',
'alias' => 'customerEmail',
'type' => 'string',
'label' => 'Email',
'sortable' => true,
'sortable' => false,
],
[
'name' => 'phone',
@ -102,7 +92,7 @@ class CustomerDataGrid
'alias' => 'customerGroupId',
'type' => 'number',
'label' => 'Customer Group',
'sortable' => true,
'sortable' => false,
],
],

3
packages/Webkul/Shop/src/Http/routes.php
View File

@ -1,6 +1,7 @@
<?php
Route::group(['middleware' => ['web']], function () {
Route::get('/', 'Webkul\Shop\Http\Controllers\HomeController@index')->defaults('_config', [
'view' => 'shop::home.index'
])->name('shop.home.index');
@ -167,7 +168,6 @@ Route::group(['middleware' => ['web']], function () {
Route::post('address/edit', 'Webkul\Customer\Http\Controllers\AddressController@edit')->defaults('_config', [
'redirect' => 'customer.address.index'
])->name('customer.address.edit');
/* Routes for Addresses ends here */
/* Wishlist route */
@ -188,5 +188,4 @@ Route::group(['middleware' => ['web']], function () {
});
});
//customer routes end here
});

19
packages/Webkul/Shop/src/Resources/views/error.blade.php Normal file
View File

@ -0,0 +1,19 @@
@extends('shop::layouts.master')
@section('content-wrapper')
<div class="error-container" style="width: 100%; display: flex; justify-content: center;">
<div class="wrapper" style="display: flex; height: 100vh; width: 80vw;
justify-content: space-between; align-items: center;">
<div class="error-box">
<div class="error-title">404</div>
<div class="error-messgae">Page Not Found</div>
<div class="error-description"></div>
<a href="url()->to('/')">GO TO HOME</a>
{{-- pass the content dynamically --}}
Show the exception here or error message here.
</div>
<div class="error-graphic" style="height: 236px; width: 255px; border: 1px solid red; background-image: url('.{{ asset('images.error') }}.')">
</div>
</div>
</div>
@endsection

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

@ -596,7 +596,7 @@ class DataGrid
array_values($value)[0]
);
} else {
throw new \Exception('Multiple Sort keys Found, Please Resolve the URL Manually.');
throw new \Exception('Multiple Sort keys Found, Please Resolve the URL Manually');
}
} elseif ($key=="search") {

2
packages/Webkul/Ui/src/Providers/UiServiceProvider.php
View File

@ -20,6 +20,8 @@ class UiServiceProvider extends ServiceProvider
__DIR__ . '/../../publishable/assets' => public_path('vendor/webkul/ui/assets'),
], 'public');
$this->loadTranslationsFrom(__DIR__ . '/../Resources/lang', 'ui');
$this->loadViewsFrom(__DIR__ . '/../Resources/views', 'ui');
Paginator::defaultView('ui::partials.pagination');

23
packages/Webkul/Ui/src/Resources/assets/images/Icon-Sort-Up.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="10px" height="14px" viewBox="0 0 10 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
<title>Icon-Sort-Down</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Settings-Users-Roles" transform="translate(-451.000000, -218.000000)" stroke="#979797">
<g id="Paper" transform="translate(344.000000, 145.000000)">
<g id="Table" transform="translate(0.000000, 61.000000)">
<g id="Strip-Head">
<g id="Icon-Sort-Up" transform="translate(103.000000, 10.000000)">
<g id="Icon-Sort-Down" transform="translate(9.000000, 9.000000) scale(1, -1) rotate(90.000000) translate(-9.000000, -9.000000) translate(3.000000, 5.000000)">
<path d="M1.13686838e-12,4 L10.068125,4" id="Path-3" stroke-width="2"></path>
<polyline id="Path-4" stroke-width="2" points="8 0 12 4.08548298 8 8"></polyline>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
packages/Webkul/Ui/src/Resources/assets/images/sort-up-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 B

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

@ -1,6 +1,7 @@
// Icon scss
@import "icons";
@import "variables";
@import "components";
@import "mixins";
@import "animations";
@ -671,263 +672,6 @@ h2 {
}
}
/* Data grid css starts here */
.grid-container {
user-select: none;
.filter-wrapper {
display: block;
box-sizing: border-box;
.filter-row-one,
.filter-row-two {
display: flex;
flex-direction: row;
}
.filter-row-one {
height: 40px;
align-items: center;
justify-content: space-between;
.search-filter {
.control {
font-family: "montserrat", sans-serif;
padding-left: 5px;
width: 380px;
height: 36px;
border: 2px solid $control-border-color;
border-radius: 3px;
border-right: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
font-size: 14px;
}
.ic-wrapper {
display: block;
height: 36px;
width: 36px;
border: 2px solid $control-border-color;
border-left: none;
border-radius: 2px;
.search-icon {
margin-left: 4px;
margin-top: 4px;
height: 24px;
width: 24px;
}
}
}
.dropdown-filters {
display: inline-flex;
.more-filters {
margin-right: 5px;
.dropdown-toggle {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-family: "montserrat", sans-serif;
padding-left: 5px;
height: 36px;
width: 150px;
border: 2px solid $control-border-color;
border-radius: 2px;
background-color: $color-white;
color: $filter-toggle-color;
font-size: 14px;
.dropdown-header {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.arrow-down-icon {
margin-right: 5px;
}
}
}
.dropdown-list {
.dropdown-container {
ul {
li.filter-column-dropdown {
.filter-column-select {
width: 100%;
background: $color-white;
border: 2px solid $control-border-color;
border-radius: 3px;
height: 36px;
display: inline-block;
vertical-align: middle;
-webkit-transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
padding: 0px 5px;
font-family: "montserrat", sans-serif;
margin-top: 10px;
margin-bottom: 5px;
}
}
li {
select {
background: $color-white;
border: 2px solid $control-border-color;
border-radius: 3px;
height: 36px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
-webkit-transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
padding: 0px 5px;
font-family: "montserrat", sans-serif;
margin-top: 10px;
margin-bottom: 5px;
}
input {
background: #fff;
border: 2px solid #c7c7c7;
border-radius: 3px;
height: 36px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
-webkit-transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
padding: 0px 5px;
font-family: "montserrat", sans-serif;
margin-top: 10px;
margin-bottom: 5px;
}
}
.filter-condition-dropdown-string {
display: none;
}
.filter-condition-dropdown-number {
display: none;
}
.filter-condition-dropdown-datetime {
display: none;
}
.filter-response-string {
display: none;
}
.filter-response-boolean {
display: none;
}
.filter-response-datetime {
display: none;
}
.filter-response-number {
display: none;
}
}
}
}
}
}
}
.filter-row-two {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 6px;
margin-bottom: 6px;
.filter-one {
margin-right: 10px;
.filter-name {
margin-right: 5px;
}
.filter-value {
display: inline-flex;
background: #e7e7e7;
padding-left: 5px;
color: $color-black-shade;
vertical-align: middle;
.f-value {
margin: auto;
}
.cross-icon {
margin: 5px;
height: 18px !important;
width: 18px !important;
cursor: pointer;
}
}
}
}
}
.table {
thead {
.mass-action-wrapper {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.massaction-remove {
margin-top: 10px;
margin-right: 10px;
}
form {
margin-top: 8px;
}
.selected-items {
margin-right: 15px;
}
}
tr {
th.grid_head {
cursor:pointer;
.sort-down-icon {
margin-left: 5px;
margin-top: -3px;
vertical-align: middle;
cursor: pointer;
}
}
th {
text-transform: capitalize;
}
}
}
tbody {
td.action {
a:first-child {
margin-right: 10px;
}
}
}
.pagination {
margin-top:20px;
}
}
}
/* DataGrid css ends in here */
.modal-open {
overflow: hidden;
}

258
packages/Webkul/Ui/src/Resources/assets/sass/components.scss vendored Normal file
View File

@ -0,0 +1,258 @@
/* Data grid css starts here */
.grid-container {
user-select: none;
.filter-wrapper {
display: block;
box-sizing: border-box;
.filter-row-one,
.filter-row-two {
display: flex;
flex-direction: row;
}
.filter-row-one {
height: 40px;
align-items: center;
justify-content: space-between;
.search-filter {
.control {
font-family: "montserrat", sans-serif;
padding-left: 5px;
width: 380px;
height: 36px;
border: 2px solid $control-border-color;
border-radius: 3px;
border-right: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
font-size: 14px;
}
.ic-wrapper {
display: block;
height: 36px;
width: 36px;
border: 2px solid $control-border-color;
border-left: none;
border-radius: 2px;
.search-icon {
margin-left: 4px;
margin-top: 4px;
height: 24px;
width: 24px;
}
}
}
.dropdown-filters {
display: inline-flex;
.more-filters {
margin-right: 5px;
.dropdown-toggle {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-family: "montserrat", sans-serif;
padding-left: 5px;
height: 36px;
width: 150px;
border: 2px solid $control-border-color;
border-radius: 2px;
background-color: $color-white;
color: $filter-toggle-color;
font-size: 14px;
.dropdown-header {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.arrow-down-icon {
margin-right: 5px;
}
}
}
.dropdown-list {
.dropdown-container {
ul {
li.filter-column-dropdown {
.filter-column-select {
width: 100%;
background: $color-white;
border: 2px solid $control-border-color;
border-radius: 3px;
height: 36px;
display: inline-block;
vertical-align: middle;
-webkit-transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
padding: 0px 5px;
font-family: "montserrat", sans-serif;
margin-top: 10px;
margin-bottom: 5px;
}
}
li {
select {
background: $color-white;
border: 2px solid $control-border-color;
border-radius: 3px;
height: 36px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
-webkit-transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
padding: 0px 5px;
font-family: "montserrat", sans-serif;
margin-top: 10px;
margin-bottom: 5px;
}
input {
background: #fff;
border: 2px solid #c7c7c7;
border-radius: 3px;
height: 36px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
-webkit-transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
transition: 0.2s
cubic-bezier(0.4, 0, 0.2, 1);
padding: 0px 5px;
font-family: "montserrat", sans-serif;
margin-top: 10px;
margin-bottom: 5px;
}
}
.filter-condition-dropdown-string {
display: none;
}
.filter-condition-dropdown-number {
display: none;
}
.filter-condition-dropdown-datetime {
display: none;
}
.filter-response-string {
display: none;
}
.filter-response-boolean {
display: none;
}
.filter-response-datetime {
display: none;
}
.filter-response-number {
display: none;
}
}
}
}
}
}
}
.filter-row-two {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 6px;
margin-bottom: 6px;
.filter-one {
margin-right: 10px;
.filter-name {
margin-right: 5px;
}
.filter-value {
display: inline-flex;
background: #e7e7e7;
padding-left: 5px;
color: $color-black-shade;
vertical-align: middle;
.f-value {
margin: auto;
}
.cross-icon {
margin: 5px;
height: 18px !important;
width: 18px !important;
cursor: pointer;
}
}
}
}
}
.table {
thead {
.mass-action-wrapper {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.massaction-remove {
margin-top: 10px;
margin-right: 10px;
}
form {
margin-top: 8px;
}
.selected-items {
margin-right: 15px;
}
}
tr {
th.grid_head {
.sort-down-icon, .sort-up-icon {
margin-left: 5px;
margin-top: -3px;
vertical-align: middle;
}
}
th.grid_head.sortable {
cursor: pointer;
}
th {
text-transform: capitalize;
}
}
}
tbody {
td.action {
a:first-child {
margin-right: 10px;
}
}
}
.pagination {
margin-top:20px;
}
}
}
/* DataGrid css ends in here */

10
packages/Webkul/Ui/src/Resources/assets/sass/icons.scss vendored
View File

@ -117,6 +117,16 @@
height: 18px;
}
.sort-up-icon {
// background-image: url("../images/Icon-Sort-Up.svg");
// width: 18px;
// height: 18px;
background-image: url("../images/Icon-Sort-Down.svg");
width: 18px;
height: 18px;
transform: rotate(180deg);
}
.primary-back-icon {
background-image: url("../images/Icon-Back-Primary.svg");
width: 24px;

6
packages/Webkul/Ui/src/Resources/lang/en/app.php Normal file
View File

@ -0,0 +1,6 @@
<?php
return [
'datagrid' => [
'actions' => 'Actions'
]
];

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

@ -1,5 +1,4 @@
<div class="{{ $css->filter }}filter-wrapper">
{{-- for loading the filters from another file --}}
<div class="filter-row-one">
<div class="search-filter" style="display: inline-flex; align-items: center;">
<input type="search" class="control search-field" placeholder="Search Users" value="" />

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

@ -1,73 +1,53 @@
<div class="grid-container {{-- $css->datagrid --}}">
<div class="grid-container">
{{-- For loading the filters from includes directory file --}}
@include('ui::datagrid.filters.default')
@include('ui::datagrid.filters')
{{-- for generating the table and its content --}}
@include('ui::datagrid.table.default')
@include('ui::datagrid.table')
{{-- Section for datagrid javascript --}}
@push('scripts')
<script type="text/javascript">
var columns = @json($columns); //referential
var allFilters = [];
var search_value;
var filter_column;
var filter_condition;
var filter_range;
var count_filters = parseInt(0);
var url;
var array_start = '[';
var array_end = ']';
var typeValue;
var selectedColumn = '';
var myURL = document.location;
let params;
$(document).ready(function() {
params = (new URL(document.location)).search;
if(params.length>0) {
if(params.length > 0) {
if(allFilters.length == 0) {
//call reverse url function
arrayFromUrl(params.slice(1,params.length));
arrayFromUrl(params.slice(1, params.length));
}
}
$('.search-btn').click(function() {
search_value = $(".search-field").val();
formURL('search','all', search_value, params); //format for search
formURL('search', 'all', search_value, params); //format for search
});
//controls for header when sorting is done
$('.grid_head').on('click', function() {
var column = $(this).data('column-name');
var currentSort = $(this).data('column-sort');
if(currentSort == "asc")
formURL("sort",column,"desc",params);
else if(currentSort == "desc")
formURL("sort",column,"asc",params);
if(currentSort == "asc") {
formURL("sort", column, "desc", params);
}
else if(currentSort == "desc") {
formURL("sort", column, "asc", params);
}
});
$('select.filter-column-select').change(function() {
@ -80,32 +60,22 @@
if(typeValue == 'string') {
//default behaviour for strings
$('.filter-condition-dropdown-number').css('display','none');
$('.filter-condition-dropdown-datetime').css('display','none');
$('.filter-response-number').css('display','none');
$('.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') {
//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');
//only true or false for that column is needed as input
@ -114,37 +84,26 @@
else if(typeValue == 'datetime') {
//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');
}
else if(typeValue == 'number') {
//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');
}
$('.apply-filter').on('click',function() {
@ -152,26 +111,19 @@
params = (new URL(document.location)).search;
if(typeValue == 'number') {
var conditionUsed = $('.filter-condition-dropdown-number').find(':selected').val();
var response = $('.response-number').val();
formURL(selectedColumn,conditionUsed,response,params,col_label);
}
if(typeValue == 'string') {
var conditionUsed = $('.filter-condition-dropdown-string').find(':selected').val();
var response = $('.response-string').val();
formURL(selectedColumn,conditionUsed,response,params,col_label);
}
if(typeValue == 'datetime') {
var conditionUsed = $('.filter-condition-dropdown-datetime').find(':selected').val();
var response = $('.response-datetime').val();
formURL(selectedColumn,conditionUsed,response,params,col_label);
@ -217,22 +169,17 @@
});
$('.mass-action').css('display','');
$('.table-grid-header').css('display','none');
// $('.selected-items').html(id.toString());
$('#indexes').val(id);
}
else if($("input[id=mastercheckbox]").prop('checked') == false) {
$('.indexers').each(function(){ this.checked = false; });
id = [];
$('.mass-action').css('display','none');
$('.table-grid-header').css('display','');
$('#indexes').val('');
}
});
@ -269,25 +216,18 @@
}
if(id.length>0) {
$('.mass-action').css('display','');
$('.table-grid-header').css('display','none');
$('#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);
}
}
});
@ -296,10 +236,8 @@
//make the url from the array and redirect
function makeURL(repetition = false) {
if(allFilters.length>0 && repetition == false)
{
for(i=0;i<allFilters.length;i++) {
if(i==0){
url = '?' + allFilters[i].column + '[' + allFilters[i].cond + ']' + '=' + allFilters[i].val;
@ -310,27 +248,22 @@
document.location = url;
} else if(allFilters.length>0 && repetition == true) {
//this is the case when the filter is being repeated on a single column with different condition and value
for(i=0;i<allFilters.length;i++) {
if(i==0){
if(i==0) {
url = '?' + allFilters[i].column + '[' + allFilters[i].cond + ']' + '=' + allFilters[i].val;
}
else
else {
url = url + '&' + allFilters[i].column + '[' + allFilters[i].cond + ']' + '=' + allFilters[i].val;
}
}
document.location = url;
} else {
var uri = window.location.href.toString();
var clean_uri = uri.substring(0, uri.indexOf("?"));
document.location = clean_uri;
}
}
@ -338,72 +271,63 @@
function arrayFromUrl(urlstring) {
var obj={};
t = urlstring.slice(0,urlstring.length);
splitted = [];
moreSplitted = [];
splitted = t.split('&');
for(i=0;i<splitted.length;i++) {
moreSplitted.push(splitted[i].split('='));
}
for(i=0;i<moreSplitted.length;i++) {
col = moreSplitted[i][0].replace(']','').split('[')[0];
cond = moreSplitted[i][0].replace(']','').split('[')[1]
val = moreSplitted[i][1];
obj.column = col;
obj.cond = cond;
obj.val = val;
if(col!=undefined && cond!=undefined && val!=undefined)
allFilters.push(obj);
obj = {};
}
makeTags();
}
//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 makeTags() {
var filterRepeat = 0;
if(allFilters.length!=0)
for(var i = 0;i<allFilters.length;i++) {
if(allFilters[i].column == "sort") {
col_label_tag = $('li[data-name="'+allFilters[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">'+ allFilters[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
sorted_col = allFilters[i].cond;
var apply_on_column = $('th[data-column-name="'+sorted_col+'"]').children('.icon');
if(allFilters[i].val == "asc") {
apply_on_column.addClass('sort-down-icon');
} else {
apply_on_column.addClass('sort-up-icon');
}
$('.filter-row-two').append(filter_card);
} else if(allFilters[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">'+ allFilters[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="'+allFilters[i].column+'"]').text().trim();
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">'+ allFilters[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
$('.filter-row-two').append(filter_card);
}
}
@ -414,13 +338,11 @@
/* validate the conditions here and do the replacements and
push here in the all filters array */
var obj1 = {};
console.log(allFilters.length);
if(column == "" || condition == "" || response == "") {
alert("Some of the required field is null, please check column, condition and value properly.");
return false;
@ -441,11 +363,9 @@
return false;
} else if(allFilters[j].column == column) {
filter_repeated = 1;
allFilters[j].cond = condition;
allFilters[j].val = response;
makeURL(true);
@ -454,84 +374,55 @@
if(filter_repeated == 0) {
obj1.column = column;
obj1.cond = condition;
obj1.val = response;
obj1.label = clabel;
allFilters.push(obj1);
obj1 = {};
makeURL();
}
}
if(column == "sort") {
sort_exists = 0;
for(j=0;j<allFilters.length;j++) {
if(allFilters[j].column == "sort") {
if(allFilters[j].column==column && allFilters[j].cond==condition && allFilters[j].val==response) {
if(response=="asc") {
allFilters[j].column = column;
allFilters[j].cond = condition;
allFilters[j].val = "desc";
allFilters[j].label = clabel;
makeURL();
}
else {
allFilters[j].column = column;
allFilters[j].cond = condition;
allFilters[j].val = "asc";
allFilters[j].label = clabel;
makeURL();
}
}
else {
allFilters[j].column = column;
allFilters[j].cond = condition;
allFilters[j].val = response;
allFilters[j].label = clabel;
makeURL();
}
}
}
}
if(column == "search") {
search_found = 0;
for(j=0;j<allFilters.length;j++) {
if(allFilters[j].column == "search") {
allFilters[j].column = column;
allFilters[j].cond = condition;
allFilters[j].val = response;
@ -539,13 +430,11 @@
makeURL();
}
}
for(j=0;j<allFilters.length;j++) {
if(allFilters[j].column == "search") {
search_found = 1;
}
}
if(search_found == 0) {
obj1.column = column;
obj1.cond = condition;
@ -557,27 +446,21 @@
}
}
} else {
obj1.column = column;
obj1.cond = condition;
obj1.val = response;
obj1.label = clabel;
allFilters.push(obj1);
obj1 = {};
makeURL();
}
}
}
function confirm_click(message){
if (confirm(message)) {
//do the action required
} else {
return false;
}

0
packages/Webkul/Ui/src/Resources/views/datagrid/column.blade.php → packages/Webkul/Ui/src/Resources/views/datagrid/notused/column.blade.php
View File

3
packages/Webkul/Ui/src/Resources/views/datagrid/pagination.blade.php Normal file
View File

@ -0,0 +1,3 @@
<div class="pagination">
{{ $results->links() }}
</div>

7
packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php Normal file
View File

@ -0,0 +1,7 @@
<div class="table">
<table class="{{ $css->table }}">
@include('ui::datagrid.table.head')
@include('ui::datagrid.table.body')
</table>
@include('ui::datagrid.pagination')
</div>

32
packages/Webkul/Ui/src/Resources/views/datagrid/table/body.blade.php Normal file
View File

@ -0,0 +1,32 @@
<tbody class="{{ $css->tbody }}">
@if(count($results) == 0)
<tr>
<td colspan="{{ count($columns)+1 }}" style="text-align: center;">
No Records Found.
</td>
</tr>
@endif
@foreach ($results as $result)
<tr>
<td class="">
<span class="checkbox">
<input type="checkbox" class="indexers" id="{{ $result->id }}" name="checkbox[]">
<label class="checkbox-view" for="checkbox1"></label>
</span>
</td>
@foreach ($columns as $column)
<td class="">{!! $column->render($result) !!}</td>
@endforeach
<td class="action">
@foreach($actions as $action)
<a @if($action['type'] == "Edit") href="{{ url()->current().'/edit/'.$result->id }}" @elseif($action['type']=="Delete") href="{{ url()->current().'/delete/'.$result->id }}" @endif class="Action-{{ $action['type'] }}" id="{{ $result->id }}" onclick="return confirm_click('{{ $action['confirm_text'] }}');">
<i class="{{ $action['icon'] }}"></i>
</a>
@endforeach
</td>
</tr>
@endforeach
</tbody>

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

@ -1,162 +0,0 @@
<div class="table">
<table class="{{ $css->table }}">
<thead>
<tr class="mass-action" style="display: none; height:63px;">
<th colspan="{{ count($columns)+1 }}">
<div class="mass-action-wrapper">
<span class="massaction-remove">
<span class="icon checkbox-dash-icon"></span>
</span>
@foreach($massoperations as $massoperation)
@if($massoperation['type'] == "button")
<form onsubmit="return confirm('Are You Sure?');"
@if(strtoupper($massoperation[ 'method'])=="GET" || strtoupper($massoperation['method'])=="POST" )
method="{{ strtoupper($massoperation['method']) }}"
@else
method="POST"
@endif
action="{{ $massoperation['route'] }}">
{{ csrf_field() }}
@if(strtoupper($massoperation['method'])!= "GET" && strtoupper($massoperation['method'])!= "POST")
@method($massoperation['method'])
@endif
<input type="hidden" id="indexes" name="indexes" value="">
<input class="btn btn-primary btn-sm" type="submit" value="Delete">
</form>
@elseif($massoperation['type'] == "select")
<form
@if(strtoupper($massoperation[ 'method'])=="GET" || strtoupper($massoperation[ 'method'])=="POST" )
method="{{ strtoupper($massoperation['method']) }}"
@else
method="POST"
@endif
action="{{ $massoperation['route'] }}">
{{ csrf_field() }}
@if(strtoupper($massoperation['method'])!= "GET" && strtoupper($massoperation['method'])!= "POST")
@method($massoperation['method'])
@endif
<input type="hidden" id="indexes" name="indexes" value="">
<select name="choices">
@foreach($massoperation['options'] as $option)
<option>{{ $option }}</option>
@endforeach
</select>
<input class="btn btn-primary btn-sm" type="submit" value="Submit">
</form>
@endif
@endforeach
</div>
</th>
</tr>
<tr class="table-grid-header">
<th>
<span class="checkbox">
<input type="checkbox" id="mastercheckbox">
<label class="checkbox-view" for="checkbox"></label>
</span>
</th>
@foreach ($columns as $column)
@if($column->sortable == "true")
<th class="grid_head"
@if(strpos($column->alias, ' as '))
<?php $exploded_name = explode(' as ',$column->name); ?>
data-column-name="{{ $exploded_name[0] }}"
@else
data-column-name="{{ $column->alias }}"
@endif
data-column-label="{{ $column->label }}"
data-column-sort="asc">{!! $column->sorting() !!}<span class="icon sort-down-icon"></span>
</th>
@else
<th class="grid_head" data-column-name="{{ $column->alias }}" data-column-label="{{ $column->label }}">{!! $column->sorting() !!}</th>
@endif
@endforeach
{{-- @if(isset($attribute_columns))
@foreach($attribute_columns as $key => $value)
<th>
{{ $value }}
</th>
@endforeach
@endif --}}
<th>
Actions
</th>
</tr>
</thead>
<tbody class="{{ $css->tbody }}">
@if(count($results) == 0)
<tr>
<td colspan="{{ count($columns)+1 }}" style="text-align: center;">
No Records Found.
</td>
</tr>
@endif
@foreach ($results as $result)
<tr>
<td class="">
<span class="checkbox">
<input type="checkbox" class="indexers" id="{{ $result->id }}" name="checkbox[]">
<label class="checkbox-view" for="checkbox1"></label>
</span>
</td>
@foreach ($columns as $column)
<td class="">{!! $column->render($result) !!}</td>
@endforeach
{{-- @if(isset($attribute_columns))
@foreach ($attribute_columns as $atc)
<td>{{ $result->{$atc} }}</td>
@endforeach
@endif --}}
<td class="action">
@foreach($actions as $action)
<a @if($action['type'] == "Edit") href="{{ url()->current().'/edit/'.$result->id }}" @elseif($action['type']=="Delete") href="{{ url()->current().'/delete/'.$result->id }}" @endif class="Action-{{ $action['type'] }}" id="{{ $result->id }}" onclick="return confirm_click('{{ $action['confirm_text'] }}');">
<i class="{{ $action['icon'] }}"></i>
</a>
@endforeach
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="pagination">
{{ $results->links() }}
</div>
</div>

105
packages/Webkul/Ui/src/Resources/views/datagrid/table/head.blade.php Normal file
View File

@ -0,0 +1,105 @@
<thead>
<tr class="mass-action" style="display: none; height:63px;">
<th colspan="{{ count($columns)+1 }}">
<div class="mass-action-wrapper">
<span class="massaction-remove">
<span class="icon checkbox-dash-icon"></span>
</span>
{{-- Mass operation implementation --}}
@foreach($massoperations as $massoperation)
@if($massoperation['type'] == "button")
<form onsubmit="return confirm('Are You Sure?');"
@if(strtoupper($massoperation[ 'method'])=="GET" || strtoupper($massoperation['method'])=="POST" )
method="{{ strtoupper($massoperation['method']) }}"
@else
method="POST"
@endif
action="{{ $massoperation['route'] }}">
{{ csrf_field() }}
@if(strtoupper($massoperation['method'])!= "GET" && strtoupper($massoperation['method'])!= "POST")
@method($massoperation['method'])
@endif
<input type="hidden" id="indexes" name="indexes" value="">
<input class="btn btn-primary btn-sm" type="submit" value="Delete">
</form>
@elseif($massoperation['type'] == "select")
<form
@if(strtoupper($massoperation[ 'method'])=="GET" || strtoupper($massoperation[ 'method'])=="POST" )
method="{{ strtoupper($massoperation['method']) }}"
@else
method="POST"
@endif
action="{{ $massoperation['route'] }}">
{{ csrf_field() }}
@if(strtoupper($massoperation['method'])!= "GET" && strtoupper($massoperation['method'])!= "POST")
@method($massoperation['method'])
@endif
<input type="hidden" id="indexes" name="indexes" value="">
<select name="choices">
@foreach($massoperation['options'] as $option)
<option>{{ $option }}</option>
@endforeach
</select>
<input class="btn btn-primary btn-sm" type="submit" value="Submit">
</form>
@endif
@endforeach
</div>
</th>
</tr>
<tr class="table-grid-header">
<th>
<span class="checkbox">
<input type="checkbox" id="mastercheckbox">
<label class="checkbox-view" for="checkbox"></label>
</span>
</th>
@foreach ($columns as $column)
@if($column->sortable == "true")
<th class="grid_head sortable"
@if(strpos($column->alias, ' as '))
<?php $exploded_name = explode(' as ',$column->name); ?>
data-column-name="{{ $exploded_name[0] }}"
@else
data-column-name="{{ $column->alias }}"
@endif
data-column-label="{{ $column->label }}"
data-column-sort="asc">
{!! $column->sorting() !!}<span class="icon"></span>
</th>
@else
<th class="grid_head"
data-column-name="{{ $column->alias }}"
data-column-label="{{ $column->label }}">
{!! $column->sorting() !!}
</th>
@endif
@endforeach
<th>
{{ __('ui::app.datagrid.actions') }}
</th>
</tr>
</thead>