Merge pull request #445 from prashant-webkul/development

Datagrid enhancements for massupdate and multiple minor enhancements
This commit is contained in:
JItendra Singh 2019-01-11 19:59:27 +05:30 committed by GitHub
commit b8bfe8b907
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
41 changed files with 1120 additions and 3022 deletions

View File

@ -13,8 +13,9 @@ return [
* * Accepted Values = Array
*/
'order' => [
'column' => 'id',
'direction' => 'desc'
'default' => 'descending',
'descending' => 'desc',
'ascending' => 'asc'
],
/**
@ -29,7 +30,7 @@ return [
*
* Accepted Value = integer
*/
// 'pagination' => 10,
'pagination' => 10,
'operators' => [
'eq' => "=",
@ -84,6 +85,6 @@ return [
7 => "orders",
8 => "limit",
9 => "offset",
10 => "lock",
10 => "lock"
]
];

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,15 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class AttributeDataGrid extends AbsGrid
class AttributeDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct()
{
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('attributes')->select('id')->addSelect('id', 'code', 'admin_name', 'type', 'is_required', 'is_unique', 'value_per_locale', 'value_per_channel');
@ -22,7 +27,8 @@ class AttributeDataGrid extends AbsGrid
$this->setQueryBuilder($queryBuilder);
}
public function setIndex() {
public function setIndex()
{
$this->index = 'id'; //the column that needs to be treated as index column
}
@ -76,7 +82,7 @@ class AttributeDataGrid extends AbsGrid
'sortable' => true,
'searchable' => false,
'width' => '100px',
'wrapper' => function($value){
'wrapper' => function($value) {
if($value == 1)
return 'True';
else
@ -92,7 +98,7 @@ class AttributeDataGrid extends AbsGrid
'sortable' => true,
'searchable' => false,
'width' => '100px',
'wrapper' => function($value){
'wrapper' => function($value) {
if($value == 1)
return 'True';
else
@ -108,7 +114,7 @@ class AttributeDataGrid extends AbsGrid
'sortable' => true,
'searchable' => false,
'width' => '100px',
'wrapper' => function($value){
'wrapper' => function($value) {
if($value == 1)
return 'True';
else
@ -124,7 +130,7 @@ class AttributeDataGrid extends AbsGrid
'sortable' => true,
'searchable' => false,
'width' => '100px',
'wrapper' => function($value){
'wrapper' => function($value) {
if($value == 1)
return 'True';
else
@ -133,7 +139,8 @@ class AttributeDataGrid extends AbsGrid
]);
}
public function prepareActions() {
public function prepareActions()
{
$this->addAction([
'type' => 'Edit',
'route' => 'admin.catalog.attributes.edit',
@ -147,7 +154,8 @@ class AttributeDataGrid extends AbsGrid
]);
}
public function prepareMassActions() {
public function prepareMassActions()
{
$this->addMassAction([
'type' => 'delete',
'action' => route('admin.catalog.attributes.massdelete'),

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class AttributeFamilyDataGrid extends AbsGrid
class AttributeFamilyDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('attribute_families')->select('id')->addSelect('id', 'code', 'name');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class CategoryDataGrid extends AbsGrid
class CategoryDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('categories as cat')->select('cat.id', 'ct.name', 'cat.position', 'cat.status', 'ct.locale')->leftJoin('category_translations as ct', 'cat.id', '=', 'ct.category_id');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class ChannelDataGrid extends AbsGrid
class ChannelDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('channels')->addSelect('id', 'code', 'name', 'hostname');

View File

@ -1,113 +0,0 @@
<?php
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use DB;
/**
* Product Data Grid class
*
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class CountryDataGrid extends AbsGrid
{
public $allColumns = [];
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('countries')->select('id')->addSelect($this->columns);
$this->setQueryBuilder($queryBuilder);
}
public function addColumns()
{
$this->addColumn([
'column' => 'id',
'alias' => 'countryId',
'label' => 'ID',
'type' => 'number',
'searchable' => false,
'sortable' => true,
'width' => '40px'
]);
$this->addColumn([
'column' => 'code',
'alias' => 'countryCode',
'label' => 'Code',
'type' => 'string',
'searchable' => true,
'sortable' => true,
'width' => '100px'
]);
$this->addColumn([
'column' => 'name',
'alias' => 'countryName',
'label' => 'Name',
'type' => 'string',
'searchable' => true,
'sortable' => true,
'width' => '100px'
]);
$this->addColumn([
'column' => 'status',
'alias' => 'countryStatus',
'label' => 'Status',
'type' => 'number',
'sortable' => true,
'searchable' => true,
'width' => '100px'
]);
}
public function prepareActions() {
$this->prepareAction([
'type' => 'Edit',
'route' => 'admin.catalog.products.edit',
'icon' => 'icon pencil-lg-icon'
]);
$this->prepareAction([
'type' => 'Delete',
'route' => 'admin.catalog.products.delete',
'confirm_text' => trans('ui::app.datagrid.massaction.delete', ['resource' => 'product']),
'icon' => 'icon trash-icon'
]);
}
public function prepareMassActions() {
// $this->prepareMassAction([
// 'type' => 'delete',
// 'action' => route('admin.catalog.products.massdelete'),
// 'method' => 'DELETE'
// ]);
// $this->prepareMassAction([
// 'type' => 'update',
// 'action' => route('admin.catalog.products.massupdate'),
// 'method' => 'PUT',
// 'options' => [
// 0 => true,
// 1 => false,
// ]
// ]);
}
public function render()
{
$this->addColumns();
$this->prepareActions();
$this->prepareMassActions();
$this->prepareQueryBuilder();
return view('ui::testgrid.table')->with('results', ['records' => $this->getCollection(), 'columns' => $this->allColumns, 'actions' => $this->actions, 'massactions' => $this->massActions]);
}
}

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class CurrencyDataGrid extends AbsGrid
class CurrencyDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('currencies')->addSelect('id', 'name', 'code');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class CustomerDataGrid extends AbsGrid
class CustomerDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('customers as cus')->addSelect('cus.id', 'cus.first_name', 'cus.email', 'cg.name')->leftJoin('customer_groups as cg', 'cus.customer_group_id', '=', 'cg.id');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class CustomerGroupDataGrid extends AbsGrid
class CustomerGroupDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('customer_groups')->addSelect('id', 'name');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class CustomerReviewDataGrid extends AbsGrid
class CustomerReviewDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('product_reviews as pr')->addSelect('pr.id', 'pr.title', 'pr.comment', 'pg.name', 'pr.status')->leftjoin('products_grid as pg', 'pr.product_id', '=', 'pg.id');
@ -103,17 +107,17 @@ class CustomerReviewDataGrid extends AbsGrid
public function prepareMassActions() {
$this->addMassAction([
'type' => 'delete',
'action' => route('admin.catalog.products.massdelete'),
'action' => route('admin.customer.review.massdelete'),
'method' => 'DELETE'
]);
$this->addMassAction([
'type' => 'update',
'action' => route('admin.catalog.products.massupdate'),
'action' => route('admin.customer.review.massupdate'),
'method' => 'PUT',
'options' => [
0 => true,
1 => false,
'Disapprove' => 0,
'Approve' => 1
]
]);
}

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class ExchangeRatesDataGrid extends AbsGrid
class ExchangeRatesDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('currency_exchange_rates as cer')->addSelect('cer.id', 'curr.name', 'cer.rate')->leftJoin('currencies as curr', 'cer.target_currency', '=', 'curr.id');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class InventorySourcesDataGrid extends AbsGrid
class InventorySourcesDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('inventory_sources')->addSelect('id', 'code', 'name', 'priority', 'status');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class LocalesDataGrid extends AbsGrid
class LocalesDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('locales')->addSelect('id', 'code', 'name');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class NewsLetterDataGrid extends AbsGrid
class NewsLetterDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('subscribers_list')->addSelect('id', 'is_subscribed', 'email');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class OrderDataGrid extends AbsGrid
class OrderDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('orders')->select('id', 'base_grand_total', 'grand_total', 'created_at', 'channel_name', 'status')->addSelect(DB::raw('CONCAT(customer_first_name, " ", customer_last_name) as fullname'));

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class OrderInvoicesDataGrid extends AbsGrid
class OrderInvoicesDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('invoices')->select('id', 'order_id', 'state', 'grand_total', 'created_at');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class OrderShipmentsDataGrid extends AbsGrid
class OrderShipmentsDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('shipments as ship')->select('ship.id', 'ship.order_id', 'ship.total_qty', 'is.name', 'ors.created_at as orderdate', 'ship.created_at')->addSelect(DB::raw('CONCAT(ors.customer_first_name, " ", ors.customer_last_name) as custname'))->leftJoin('orders as ors', 'ship.order_id', '=', 'ors.id')->leftJoin('inventory_sources as is', 'ship.inventory_source_id', '=', 'is.id');

312
packages/Webkul/Admin/src/DataGrids/ProductDataGrid.php Executable file → Normal file
View File

@ -2,208 +2,150 @@
namespace Webkul\Admin\DataGrids;
use Illuminate\View\View;
use Webkul\Ui\DataGrid\Facades\DataGrid;
use Webkul\Channel\Repositories\ChannelRepository;
use Webkul\Product\Repositories\ProductRepository;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
* Product DataGrid
* Product Data Grid class
*
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class ProductDataGrid
class ProductDataGrid extends DataGrid
{
public $allColumns = [];
/**
* The Data Grid implementation for Products
*/
public function createProductDataGrid()
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
return DataGrid::make([
'name' => 'Products',
'table' => 'products_grid as prods',
'select' => 'prods.product_id',
'perpage' => 10,
'aliased' => false, //use this with false as default and true in case of joins
$queryBuilder = DB::table('products_grid')->addSelect('products_grid.product_id', 'products_grid.sku', 'products_grid.name', 'products.type', 'products_grid.status', 'products_grid.price', 'products_grid.quantity')->leftJoin('products', 'products_grid.product_id', '=', 'products.id');
'massoperations' => [
0 => [
'type' => 'delete', //all lower case will be shifted in the configuration file for better control and increased fault tolerance
'action' => route('admin.catalog.products.massdelete'),
'method' => 'DELETE'
],
$this->setQueryBuilder($queryBuilder);
}
1 => [
'type' => 'update', //all lower case will be shifted in the configuration file for better control and increased fault tolerance
'action' => route('admin.catalog.products.massupdate'),
'method' => 'PUT',
'options' => [
0 => 'In Active',
1 => 'Active',
]
]
],
public function setIndex() {
$this->index = 'product_id'; //the column that needs to be treated as index column
}
'actions' => [
[
'type' => 'Edit',
'route' => 'admin.catalog.products.edit',
// 'confirm_text' => trans('ui::app.datagrid.massaction.edit', ['resource' => 'product']),
'icon' => 'icon pencil-lg-icon'
], [
'type' => 'Delete',
'route' => 'admin.catalog.products.delete',
'confirm_text' => trans('ui::app.datagrid.massaction.delete', ['resource' => 'product']),
'icon' => 'icon trash-icon'
]
],
// public function setGridName() {
// $this->gridName = 'products_grid'; // should be the table name for getting proper index
// }
'join' => [
],
//use aliasing on secodary columns if join is performed
'columns' => [
//name, alias, type, label, sortable
[
'name' => 'prods.product_id',
'alias' => 'id',
'type' => 'string',
'label' => 'ID',
'sortable' => true,
], [
'name' => 'prods.sku',
'alias' => 'productSku',
'type' => 'string',
'label' => 'SKU',
'sortable' => true,
], [
'name' => 'prods.name',
'alias' => 'ProductName',
'type' => 'string',
'label' => 'Name',
'sortable' => true,
], [
'name' => 'prods.type',
'alias' => 'ProductType',
'type' => 'string',
'label' => 'Type',
'sortable' => true,
], [
'name' => 'prods.status',
'alias' => 'ProductStatus',
'type' => 'boolean',
'label' => 'Status',
'sortable' => true,
'wrapper' => function ($value) {
if($value == 1)
return 'Active';
else
return 'Inactive';
},
], [
'name' => 'prods.price',
'alias' => 'ProductPrice',
'type' => 'string',
'label' => 'Price',
'sortable' => true,
'wrapper' => function ($value) {
return core()->formatBasePrice($value);
},
], [
'name' => 'prods.attribute_family_name',
'alias' => 'productattributefamilyname',
'type' => 'string',
'label' => 'Attribute Family',
'sortable' => true,
], [
'name' => 'prods.quantity',
'alias' => 'ProductQuantity',
'type' => 'string',
'label' => 'Product Quantity',
'sortable' => true,
]
],
'filterable' => [
//column, alias, type, and label
[
'column' => 'prods.product_id',
'alias' => 'productID',
'type' => 'number',
'label' => 'ID',
], [
'column' => 'prods.sku',
'alias' => 'productSku',
'type' => 'string',
'label' => 'SKU',
], [
'column' => 'prods.name',
'alias' => 'ProductName',
'type' => 'string',
'label' => 'Product Name',
], [
'column' => 'prods.type',
'alias' => 'ProductType',
'type' => 'string',
'label' => 'Product Type',
], [
'column' => 'prods.status',
'alias' => 'ProductStatus',
'type' => 'boolean',
'label' => 'Status'
]
],
//don't use aliasing in case of searchables
'searchable' => [
//column, type and label
[
'column' => 'prods.product_id',
'type' => 'number',
'label' => 'ID',
], [
'column' => 'prods.sku',
'type' => 'string',
'label' => 'SKU',
], [
'column' => 'prods.name',
'type' => 'string',
'label' => 'Product Name',
], [
'column' => 'prods.type',
'type' => 'string',
'label' => 'Product Type',
]
],
//list of viable operators that will be used
'operators' => [
'eq' => "=",
'lt' => "<",
'gt' => ">",
'lte' => "<=",
'gte' => ">=",
'neqs' => "<>",
'neqn' => "!=",
'like' => "like",
'nlike' => "not like",
],
// 'css' => []
public function addColumns()
{
$this->addColumn([
'index' => 'products_grid.product_id',
'alias' => 'productid',
'label' => 'ID',
'type' => 'number',
'searchable' => false,
'sortable' => true,
'width' => '40px'
]);
$this->addColumn([
'index' => 'products_grid.sku',
'alias' => 'productsku',
'label' => 'SKU',
'type' => 'string',
'searchable' => true,
'sortable' => true,
'width' => '100px'
]);
$this->addColumn([
'index' => 'products_grid.name',
'alias' => 'productname',
'label' => 'Name',
'type' => 'string',
'searchable' => true,
'sortable' => true,
'width' => '100px'
]);
$this->addColumn([
'index' => 'products.type',
'alias' => 'producttype',
'label' => 'Type',
'type' => 'string',
'sortable' => true,
'searchable' => true,
'width' => '100px'
]);
$this->addColumn([
'index' => 'products_grid.status',
'alias' => 'productstatus',
'label' => 'Status',
'type' => 'boolean',
'sortable' => true,
'searchable' => false,
'width' => '100px',
'wrapper' => function($value) {
if($value == 1)
return 'Active';
else
return 'Inactive';
}
]);
$this->addColumn([
'index' => 'products_grid.price',
'alias' => 'productprice',
'label' => 'Price',
'type' => 'number',
'sortable' => true,
'searchable' => false,
'width' => '100px',
'wrapper' => function($value) {
return core()->formatBasePrice($value);
}
]);
$this->addColumn([
'index' => 'products_grid.quantity',
'alias' => 'productqty',
'label' => 'Quantity',
'type' => 'number',
'sortable' => true,
'searchable' => false,
'width' => '100px'
]);
}
public function render()
{
return $this->createProductDataGrid()->render();
public function prepareActions() {
$this->addAction([
'type' => 'Edit',
'route' => 'admin.catalog.products.edit',
'icon' => 'icon pencil-lg-icon'
]);
$this->addAction([
'type' => 'Delete',
'route' => 'admin.catalog.products.delete',
'confirm_text' => trans('ui::app.datagrid.massaction.delete', ['resource' => 'product']),
'icon' => 'icon trash-icon'
]);
}
public function export()
{
$paginate = false;
return $this->createProductDataGrid()->render($paginate);
}
public function prepareMassActions() {
$this->addMassAction([
'type' => 'delete',
'action' => route('admin.catalog.products.massdelete'),
'method' => 'DELETE'
]);
$this->addMassAction([
'type' => 'update',
'action' => route('admin.catalog.products.massupdate'),
'method' => 'PUT',
'options' => [
'Active' => 1,
'Inactive' => 0
]
]);
}
}

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class RolesDataGrid extends AbsGrid
class RolesDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('roles')->addSelect('id', 'name', 'permission_type');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class SliderDataGrid extends AbsGrid
class SliderDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('sliders as sl')->addSelect('sl.id', 'sl.title', 'ch.name')->leftJoin('channels as ch', 'sl.channel_id', '=', 'ch.id');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class TaxCategoryDataGrid extends AbsGrid
class TaxCategoryDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('tax_categories')->addSelect('id', 'name', 'code');

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class TaxRateDataGrid extends AbsGrid
class TaxRateDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('tax_rates')->addSelect('id', 'identifier', 'state', 'country', 'tax_rate');

View File

@ -1,147 +0,0 @@
<?php
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use DB;
/**
* Product Data Grid class
*
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class TestDataGrid extends AbsGrid
{
public $allColumns = [];
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('products_grid')->addSelect('products_grid.product_id', 'products_grid.sku', 'products_grid.name', 'products.type', 'products_grid.status', 'products_grid.price', 'products_grid.quantity')->leftJoin('products', 'products_grid.product_id', '=', 'products.id');
$this->setQueryBuilder($queryBuilder);
}
public function setIndex() {
$this->index = 'product_id'; //the column that needs to be treated as index column
}
// public function setGridName() {
// $this->gridName = 'products_grid'; // should be the table name for getting proper index
// }
public function addColumns()
{
$this->addColumn([
'index' => 'products_grid.product_id',
'alias' => 'productid',
'label' => 'ID',
'type' => 'number',
'searchable' => false,
'sortable' => true,
'width' => '40px'
]);
$this->addColumn([
'index' => 'products_grid.sku',
'alias' => 'productsku',
'label' => 'SKU',
'type' => 'string',
'searchable' => true,
'sortable' => true,
'width' => '100px'
]);
$this->addColumn([
'index' => 'products_grid.name',
'alias' => 'productname',
'label' => 'Name',
'type' => 'string',
'searchable' => true,
'sortable' => true,
'width' => '100px'
]);
$this->addColumn([
'index' => 'products.type',
'alias' => 'producttype',
'label' => 'Type',
'type' => 'string',
'sortable' => true,
'searchable' => true,
'width' => '100px'
]);
$this->addColumn([
'index' => 'products_grid.status',
'alias' => 'productstatus',
'label' => 'Status',
'type' => 'boolean',
'sortable' => true,
'searchable' => false,
'width' => '100px',
'wrapper' => function($value) {
if($value == 1)
return 'Active';
else
return 'Inactive';
}
]);
$this->addColumn([
'index' => 'products_grid.price',
'alias' => 'productprice',
'label' => 'Price',
'type' => 'number',
'sortable' => true,
'searchable' => false,
'width' => '100px',
'wrapper' => function($value) {
return core()->formatBasePrice($value);
}
]);
$this->addColumn([
'index' => 'products_grid.quantity',
'alias' => 'productqty',
'label' => 'Quantity',
'type' => 'number',
'sortable' => true,
'searchable' => false,
'width' => '100px'
]);
}
public function prepareActions() {
$this->addAction([
'type' => 'Edit',
'route' => 'admin.catalog.products.edit',
'icon' => 'icon pencil-lg-icon'
]);
$this->addAction([
'type' => 'Delete',
'route' => 'admin.catalog.products.delete',
'confirm_text' => trans('ui::app.datagrid.massaction.delete', ['resource' => 'product']),
'icon' => 'icon trash-icon'
]);
}
public function prepareMassActions() {
$this->addMassAction([
'type' => 'delete',
'action' => route('admin.catalog.products.massdelete'),
'method' => 'DELETE'
]);
$this->addMassAction([
'type' => 'update',
'action' => route('admin.catalog.products.massupdate'),
'method' => 'PUT',
'options' => [
0 => true,
1 => false,
]
]);
}
}

View File

@ -2,7 +2,7 @@
namespace Webkul\Admin\DataGrids;
use Webkul\Ui\DataGrid\AbsGrid;
use Webkul\Ui\DataGrid\DataGrid;
use DB;
/**
@ -11,10 +11,14 @@ use DB;
* @author Prashant Singh <prashant.singh852@webkul.com> @prashant-webkul
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class UserDataGrid extends AbsGrid
class UserDataGrid extends DataGrid
{
public $allColumns = [];
public function __construct() {
$this->itemsPerPage = 5;
}
public function prepareQueryBuilder()
{
$queryBuilder = DB::table('admins as u')->addSelect('u.id', 'u.name', 'u.status', 'u.email', 'ro.name')->leftJoin('roles as ro', 'u.role_id', '=', 'ro.id');

View File

@ -22,7 +22,7 @@
{{-- @inject('product','Webkul\Admin\DataGrids\ProductDataGrid')
{!! $product->render() !!} --}}
@inject('products', 'Webkul\Admin\DataGrids\TestDataGrid')
@inject('products', 'Webkul\Admin\DataGrids\ProductDataGrid')
{!! $products->render() !!}
</div>
</div>

View File

@ -174,16 +174,18 @@ class ReviewController extends Controller
$review = $this->productReview->findOneByField('id', $value);
try {
if($data['massaction-type'] == 1 && $data['update-options'] == 1 && $data['selected-option-text'] == 'Approve') {
Event::fire('customer.review.update.before', $value);
if($data['massaction-type'] == 'update') {
if($data['update-options'] == 1) {
Event::fire('customer.review.update.before', $value);
$review->update(['status' => 'approved']);
$review->update(['status' => 'approved']);
Event::fire('customer.review.update.after', $review);
} else if($data['massaction-type'] == 1 && $data['update-options'] == 0 && $data['selected-option-text'] == 'Disapprove') {
$review->update(['status' => 'pending']);
} else {
continue;
Event::fire('customer.review.update.after', $review);
} else if($data['update-options'] == 0) {
$review->update(['status' => 'pending']);
} else {
continue;
}
}
} catch(\Exception $e) {
$suppressFlash = true;

View File

@ -1,196 +0,0 @@
<?php
namespace Webkul\Ui\DataGrid;
use Illuminate\Http\Request;
/**
* Product Data Grid class
*
* @author Jitendra Singh <jitendra@webkul.com>
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
abstract class AbsGrid
{
protected $index = null;
protected $columns = [];
protected $allColumns = [];
protected $queryBuilder = [];
protected $collection = [];
protected $actions = [];
protected $massActions = [];
protected $request;
protected $parse;
// protected $gridName = null;
abstract public function prepareMassActions();
abstract public function prepareActions();
abstract public function prepareQueryBuilder();
abstract public function addColumns();
abstract public function setIndex();
/**
* 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);
unset($parsed['page']);
}
return $parsed;
}
public function addColumn($column)
{
array_push($this->columns, $column);
$this->setAllColumnDetails($column);
}
public function setAllColumnDetails($column)
{
array_push($this->allColumns, $column);
}
public function setQueryBuilder($queryBuilder)
{
$this->queryBuilder = $queryBuilder;
}
public function addAction($action)
{
array_push($this->actions, $action);
}
public function addMassAction($massAction)
{
array_push($this->massActions, $massAction);
}
public function getCollection()
{
$p = $this->parse();
if(count($p)) {
$filteredOrSortedCollection = $this->sortOrFilterCollection($this->collection = $this->queryBuilder, $p);
// return $filteredOrSortedCollection->get();
if (config()->has('datagrid.pagination')) {
return $filteredOrSortedCollection->paginate(config('datagrid.pagination'));
} else {
return $filteredOrSortedCollection->get();
}
}
if (config()->has('datagrid.pagination')) {
$this->collection = $this->queryBuilder->paginate(config('datagrid.pagination'));
} else {
$this->collection = $this->queryBuilder->get();
}
if ($this->collection) {
return $this->collection;
} else {
dd('no records found');
}
}
/**
* To find the alias of the column and by taking the column name.
*
* @return string
*/
public function findColumnType($columnAlias) {
foreach($this->allColumns as $column) {
if($column['alias'] == $columnAlias) {
return [$column['type'], $column['index']];
}
}
}
public function sortOrFilterCollection($collection, $parseInfo) {
foreach($parseInfo as $key => $info) {
$columnType = $this->findColumnType($key)[0];
$columnName = $this->findColumnType($key)[1];
if($key == "sort") {
$count_keys = count(array_keys($info));
if ($count_keys > 1) {
throw new \Exception('Fatal Error! Multiple Sort keys Found, Please Resolve the URL Manually');
}
$columnName = $this->findColumnType(array_keys($info)[0]);
return $collection->orderBy(
$columnName[1],
array_values($info)[0]
);
} else if($key == "search") {
$count_keys = count(array_keys($info));
if($count_keys > 1) {
throw new \Exception('Multiple Search keys Found, Please Resolve the URL Manually');
}
if($count_keys == 1) {
return $collection->where(function() use($collection, $info) {
foreach ($this->allColumns as $column) {
if($column['searchable'] == true)
$collection->orWhere($column['index'], 'like', '%'.$info['all'].'%');
}
});
}
} else {
if (array_keys($info)[0] == "like" || array_keys($info)[0] == "nlike") {
foreach ($info as $condition => $filter_value) {
return $collection->where(
$columnName,
config("datagrid.operators.{$condition}"),
'%'.$filter_value.'%'
);
}
} else {
foreach ($info as $condition => $filter_value) {
if($columnType == 'datetime') {
return $collection->whereDate(
$columnName,
config("datagrid.operators.{$condition}"),
$filter_value
);
} else {
return $collection->where(
$columnName,
config("datagrid.operators.{$condition}"),
$filter_value
);
}
}
}
}
}
}
public function render()
{
$this->addColumns();
$this->setIndex();
$this->prepareActions();
$this->prepareMassActions();
$this->prepareQueryBuilder();
return view('ui::testgrid.table')->with('results', ['records' => $this->getCollection(), 'columns' => $this->allColumns, 'actions' => $this->actions, 'massactions' => $this->massActions, 'index' => $this->index]);
}
}

979
packages/Webkul/Ui/src/DataGrid/DataGrid.php Executable file → Normal file

File diff suppressed because it is too large Load Diff

View File

@ -2,12 +2,14 @@
return [
'datagrid' => [
'actions' => 'Actions',
'massaction' => [
'mass-delete-confirm' => 'Do you really want to delete these selected :resource?',
'mass-update-status' => 'Do you really want to update status of these selected :resource?',
'delete' => 'Do you really want to delete this :resource?',
'edit' => 'Do you really want to edit this :resource?',
],
'no-records' => 'No Records Found',
'filter-fields-missing' => 'Some of the required field is null, please check column, condition and value properly'
]

View File

@ -1,29 +1,31 @@
<tbody>
@foreach($records as $key => $record)
<tr>
<td>
<span class="checkbox">
<input type="checkbox" v-model="dataIds" @change="select" :value="{{ $record->{$index} }}">
@if($enableMassAction)
<td>
<span class="checkbox">
<input type="checkbox" v-model="dataIds" @change="select" value="{{ $record->{$index} }}">
<label class="checkbox-view" for="checkbox1"></label>
</span>
</td>
<label class="checkbox-view" for="checkbox"></label>
</span>
</td>
@endif
@foreach($columns as $column)
@php
$index = explode('.', $column['index']);
$columnIndex = explode('.', $column['index']);
$index = end($index);
$columnIndex = end($columnIndex);
@endphp
@if(isset($column['wrapper']))
@if(isset($column['closure']) && $column['closure'] == true)
<td>{!! $column['wrapper']($record->{$index}) !!}</td>
<td>{!! $column['wrapper']($record->{$columnIndex}) !!}</td>
@else
<td>{{ $column['wrapper']($record->{$index}) }}</td>
<td>{{ $column['wrapper']($record->{$columnIndex}) }}</td>
@endif
@else
<td>{{ $record->{$index} }}</td>
<td>{{ $record->{$columnIndex} }}</td>
@endif
@endforeach

View File

@ -1,132 +0,0 @@
<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" id="search-field" class="control" placeholder="Search Here..." value="" />
<div class="ic-wrapper">
<span class="icon search-icon search-btn"></span>
</div>
</div>
<div class="dropdown-filters">
<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->alias }}">
{{ $column->label }}
</li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="more-filters">
<div class="dropdown-toggle">
<div class="dropdown-header">
<span class="name">Filter</span>
{{-- <span class="role">Filter</span> --}}
<i class="icon arrow-down-icon active"></i>
</div>
</div>
<div class="dropdown-list bottom-right" style="display: none;">
<div class="dropdown-container">
<ul>
<li class="filter-column-dropdown">
<select class="filter-column-select">
<option selected disabled>Select Column</option>
@foreach($filterable as $fcol)
<option value="{{ $fcol['alias'] }}" data-type="{{ $fcol['type'] }}" data-label="{{ $fcol['label'] }}">{{ $fcol['label'] }}</option>
@endforeach
</select>
</li>
{{-- suitable for string columns --}}
<li class="filter-condition-dropdown-string">
<select class="control filter-condition-select-string">
<option selected disabled value="">Select Condition</option>
<option value="like">Contains</option>
<option value="nlike">Does not contains</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is not equal to</option>
</select>
</li>
{{-- suitable for numeric columns --}}
<li class="filter-condition-dropdown-number">
<select class="control filter-condition-select-number">
<option selected disabled value="">Select Condition</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is not equal to</option>
<option value="gt">Greater than</option>
<option value="lt">Less than</option>
<option value="gte">Greater than equals to</option>
<option value="lte">Less than equals to</option>
</select>
</li>
{{-- suitable for boolean columns --}}
<li class="filter-condition-dropdown-boolean">
<select class="control filter-condition-select-boolean">
<option selected disabled value="">Select Condition</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is no equal to</option>
</select>
</li>
{{-- suitable for date/time columns --}}
<li class="filter-condition-dropdown-datetime">
<select class="control filter-condition-select-datetime">
<option selected disabled value="">Select Condition</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is not equal to</option>
<option value="gt">Greater than</option>
<option value="lt">Less than</option>
<option value="gte">Greater than equals to</option>
<option value="lte">Less than equals to</option>
{{-- <option value="btw">Is Between</option> --}}
</select>
</li>
{{-- Response fields based on the type of columns to be filtered --}}
<li class="filter-response-string">
<input type="text" class="control response-string" placeholder="String Value here" value=""/>
</li>
<li class="filter-response-boolean">
<select class="control response-boolean">
<option selected disabled>Select Value</option>
<option value="1">True / Active</option>
<option value="0">False / Inactive</option>
</select>
</li>
<li class="filter-response-datetime">
{{-- use flatpickr here --}}
<input type="date" class="control response-datetime" placeholder="Date value here" />
</li>
<li class="filter-response-number">
<input type="text" class="control response-number" placeholder="Numeric Value here" value="" />
</li>
<li>
<button class="btn btn-sm btn-primary apply-filter">Apply</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="filter-row-two">
{{-- <span class="filter-one">
<span class="filter-name">
Stock
</span>
<span class="filter-value">
Available
<span class="icon cross-icon"></span>
</span>
</span> --}}
</div>
</div>

View File

@ -1,532 +0,0 @@
<div class="grid-container">
{{-- For loading the filters from includes directory file --}}
@include('ui::datagrid.filters')
{{-- for generating the table and its content --}}
@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() {
var actions = [];
@if(isset($massoperations) && count($massoperations))
const massactions = @json($massoperations);
for(var key in massactions) {
actions[key] = massactions[key].action;
// actions.push(massactions[key].action);
}
@endif
params = (new URL(document.location)).search;
if(params.length > 0) {
if(allFilters.length == 0) {
//call reverse url function
arrayFromUrl(params.slice(1, params.length));
}
}
$('.search-btn').click(function() {
search_value = $("#search-field").val();
formURL('search', 'all', search_value, params); //format for search
});
$(".search-field").on('keyup', function (e) {
if (e.keyCode == 13) {
search_value = $("#search-field").val();
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);
}
});
$('select.filter-column-select').change(function() {
typeValue = $('select.filter-column-select').find(':selected').data('type');
col_label = $('select.filter-column-select').find(':selected').data('label');
selectedColumn = $('select.filter-column-select').find(':selected').val();
if(typeValue == 'string') {
//default behaviour for strings
$('.filter-condition-dropdown-number').css('display', 'none');
$('.filter-condition-dropdown-datetime').css('display', 'none');
$('.filter-condition-dropdown-boolean').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
$('.filter-condition-dropdown-boolean').css('display', 'inherit');
$('.filter-response-boolean').css('display', 'inherit');
} else if(typeValue == 'datetime') {
//hide unwanted
$('.filter-condition-dropdown-string').css('display','none');
$('.filter-condition-dropdown-number').css('display','none');
$('.filter-condition-dropdown-boolean').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-condition-dropdown-boolean').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() {
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);
}
if(typeValue == 'boolean') { //use select dropdown with two values true and false
// console.log('boolean');
var conditionUsed = $('.filter-condition-dropdown-boolean').find(':selected').val();
var response = $('.response-boolean').val();
formURL(selectedColumn,conditionUsed,response,params, col_label);
}
});
});
//remove the filter and from clicking on cross icon on tag
$('.remove-filter').on('click', function() {
var id = $(this).parents('.filter-one').attr('id');
if(allFilters.length == 1) {
allFilters.pop();
var uri = window.location.href.toString();
if (uri.indexOf("?") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?"));
document.location = clean_uri;
}
}
else {
allFilters.splice(id, 1);
makeURL();
}
});
@if(isset($massoperations) && count($massoperations))
//Enable Mass Action Subsequency
var id=[]; //for getting the id of the selected fields
var y = parseInt(0);
$(".massaction-type").change(function() {
selectedType = $("#massaction-type").find(":selected").val();
selectedTypeText = $("#massaction-type").find(":selected").text();
//remove the hardcoding by using configuration
if(selectedType == 0 && selectedTypeText == 'delete') {
$('#update-options').css('display', 'none');
$('#mass-action-form').attr('action', actions[0]);
} else if(selectedType == 1 && selectedTypeText == 'update') {
$('#update-options').css('display', '');
selectedOptionText = $("#option-type").find(":selected").text();
$("input[id=selected-option-text]").val(selectedOptionText);
$('#mass-action-form').attr('action', actions[1]);
} else {
$('#update-options').css('display', 'none');
}
});
$("#option-type").click(function() {
selectedOption = $("#option-type").find(":selected").val();
selectedOptionText = $("#option-type").find(":selected").text();
$("input[id=selected-option-text]").val(selectedOptionText);
});
// master checkbox for selecting all entries
$("input[id=mastercheckbox]").change(function() {
if($("input[id=mastercheckbox]").prop('checked') == true) {
selectedOption = $("#massaction-type").find(":selected").val();
if(selectedOption == 0) {
$('#mass-action-form').attr('action', actions[0]);
} else if(selectedOption == 1) {
$('#mass-action-form').attr('action', actions[1]);
}
$('.indexers').each(function() {
this.checked = true;
if(this.checked) {
y = parseInt($(this).attr('id'));
id.push(y);
}
});
$('.mass-action').css('display', '');
$('.table-grid-header').css('display', 'none');
$('#indexes').val(id);
} else if($("input[id=mastercheckbox]").prop('checked') == false) {
id = [];
$('#mass-action-form').attr('action', ''); //set no actions when no index is there
$('.indexers').each(function() { this.checked = false; });
$('.mass-action').css('display', 'none');
$('.table-grid-header').css('display', '');
$('#indexes').val('');
}
});
$('.massaction-remove').on('click', function() {
id = [];
$('#mass-action-form').attr('action', ''); //set no actions when no index is there
$('.mass-action').css('display', 'none');
if($('#mastercheckbox').prop('checked')) {
$('#mastercheckbox').prop('checked', false);
}
$("input[class=indexers]").each(function() {
if($(this).prop('checked')) {
$(this).prop('checked',false);
}
});
$('.table-grid-header').css('display', '');
});
$("input[class=indexers]").change(function() {
if(this.checked) {
selectedOption = $("#massaction-type").find(":selected").val();
if(selectedOption == 0) {
$('#mass-action-form').attr('action', actions[0]);
} else if(selectedOption == 1) {
$('#mass-action-form').attr('action', actions[1]);
}
y = parseInt($(this).attr('id'));
id.push(y);
}
else {
y = parseInt($(this).attr('id'));
var index = id.indexOf(y);
id.splice(index, 1);
}
if (id.length > 0) {
$('.mass-action').css('display', '');
$('.table-grid-header').css('display', 'none');
$('#indexes').val(id);
} else if (id.length == 0) {
$('#mass-action-form').attr('action', ''); //set no actions when no index is there
$('.mass-action').css('display', 'none');
$('.table-grid-header').css('display', '');
$('#indexes').val('');
if ($('#mastercheckbox').prop('checked')) {
$('#mastercheckbox').prop('checked', false);
}
}
});
@endif
});
//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;
} else {
url = url + '&' + allFilters[i].column + '[' + allFilters[i].cond + ']' + '=' + allFilters[i].val;
}
}
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) {
url = '?' + allFilters[i].column + '[' + allFilters[i].cond + ']' + '=' + allFilters[i].val;
} 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;
}
}
//make the filter array from url after being redirected
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
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);
}
}
}
//This is being used for validation of url params and making array of filters
function formURL(column, condition, response, urlparams, clabel) {
/* validate the conditions here and do the replacements and
push here in the all filters array */
var obj1 = {};
if(column == "" || condition == "" || response == "") {
// alert('Some of the required field is null, please check column, condition and value properly');
alert('{{ __('ui::app.datagrid.filter-fields-missing') }}');
return false;
} else {
if(allFilters.length > 0) {
//case for repeated filter
if(column != "sort" && column != "search") {
filter_repeated = 0;
for(j = 0; j < allFilters.length; j++) {
if(allFilters[j].column == column && allFilters[j].cond == condition && allFilters[j].val == response) {
filter_repeated = 1;
return false;
} else if(allFilters[j].column == column) {
filter_repeated = 1;
allFilters[j].cond = condition;
allFilters[j].val = response;
makeURL(true);
}
}
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;
allFilters[j].label = clabel;
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;
obj1.val = response;
obj1.label = clabel;
allFilters.push(obj1);
obj1 = {};
makeURL();
}
}
} 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)) {
return true;
} else {
return false;
}
}
</script>
@endpush
</div>

View File

@ -1,18 +0,0 @@
{{-- <div class="{{ $css->datagrid }}">
<table class="{{ $css->table }}">
<thread class="{{ $css->thread }}">
<tr>
@foreach ($columns as $column)
<td class="{{ $css->thead_td }}">{{ $column->lable }}</td>
@endforeach
</tr>
</thread>
<tbody class="{{ $css->tbody }}">
<tr>
@foreach ($results as $result)
<td class="{{ $css->tbody_td }}">{{ $result->{$columns[$loop->index]->name} }}</td>
@endforeach
</tr>
</tbody>
</table>
</div> --}}

View File

View File

@ -1,11 +1,691 @@
<div class="table">
{{-- @foreach($massoperations as $key => $value)
{{ $value['type'] }}
@endforeach
{{ dd($massoperations) }} --}}
<table class="{{ $css->table }}">
@include('ui::datagrid.table.head')
@include('ui::datagrid.table.body')
</table>
@include('ui::datagrid.pagination')
<testgrid-filters></testgrid-filters>
@if(config('datagrid.pagination'))
@include('ui::datagrid.pagination', ['results' => $results['records']])
@endif
@push('scripts')
<script type="text/x-template" id="testgrid-filters">
{{-- start filter here --}}
<div class="grid-container">
<div class="filter-row-one" id="testgrid-filters">
<div class="search-filter">
<input type="search" id="search-field" class="control" placeholder="Search Here..." v-model="searchValue" />
<div class="icon-wrapper">
<span class="icon search-icon search-btn" v-on:click="searchCollection(searchValue)"></span>
</div>
</div>
<div class="dropdown-filters">
<div class="more-filters">
<div class="dropdown-toggle">
<div class="dropdown-header">
<span class="name">Filter</span>
<i class="icon arrow-down-icon active"></i>
</div>
</div>
<div class="dropdown-list bottom-right" style="display: none;">
<div class="dropdown-container">
<ul>
<li class="filter-column-dropdown">
<div class="control-group">
<select class="filter-column-select control" v-model="filterColumn" v-on:click="getColumnOrAlias(filterColumn)">
<option selected disabled>Select Column</option>
@foreach($results['columns'] as $column)
<option value="{{ $column['alias'] }}">
{{ $column['label'] }}
</option>
@endforeach
</select>
</div>
</li>
{{-- suitable for string columns --}}
<li class="filter-condition-dropdown-string" v-if='stringConditionSelect'>
<div class="control-group">
<select class="control" v-model="stringCondition">
<option selected disabled>Select Condition</option>
<option value="like">Contains</option>
<option value="nlike">Does not contains</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is not equal to</option>
</select>
</div>
</li>
{{-- Response fields based on the type of columns to be filtered --}}
<li class="filter-condition-dropdown-string" v-if='stringCondition != null'>
<div class="control-group">
<input type="text" class="control response-string" placeholder="String Value here" v-model="stringValue" />
</div>
</li>
{{-- suitable for numeric columns --}}
<li class="filter-condition-dropdown-number" v-if='numberConditionSelect'>
<div class="control-group">
<select class="control" v-model="numberCondition">
<option selected disabled>Select Condition</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is not equal to</option>
<option value="gt">Greater than</option>
<option value="lt">Less than</option>
<option value="gte">Greater than equals to</option>
<option value="lte">Less than equals to</option>
</select>
</div>
</li>
<li class="filter-response-number" v-if='numberCondition != null'>
<div class="control-group">
<input type="number" class="control response-number" placeholder="Numeric Value here" v-model="numberValue"/>
</div>
</li>
{{-- suitable for boolean columns --}}
<li class="filter-condition-dropdown-boolean" v-if='booleanConditionSelect'>
<div class="control-group">
<select class="control" v-model="booleanCondition">
<option selected disabled>Select Condition</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is no equal to</option>
</select>
</div>
</li>
<li class="filter-condition-dropdown-boolean" v-if='booleanCondition != null'>
<div class="control-group">
<select class="control" v-model="booleanValue">
<option selected disabled>Select Value</option>
<option value="1">True / Active</option>
<option value="0">False / Inactive</option>
</select>
</div>
</li>
{{-- suitable for date/time columns --}}
<li class="filter-condition-dropdown-datetime" v-if='datetimeConditionSelect'>
<div class="control-group">
<select class="control" v-model="datetimeCondition">
<option selected disabled>Select Condition</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is not equal to</option>
<option value="gt">Greater than</option>
<option value="lt">Less than</option>
<option value="gte">Greater than equals to</option>
<option value="lte">Less than equals to</option>
{{-- <option value="btw">Is Between</option> --}}
</select>
</div>
</li>
<li class="filter-condition-dropdown-boolean" v-if='datetimeCondition != null'>
<div class="control-group">
<input class="control" v-model="datetimeValue" type="date">
</div>
</li>
<button class="btn btn-sm btn-primary apply-filter" v-on:click="getResponse">Apply</button>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="filter-row-two">
<span class="filter-tag" v-if="filters.length > 0" v-for="filter in filters">
<span v-if="filter.column == 'sort'">@{{ filter.label }}</span>
<span v-else-if="filter.column == 'search'">Search</span>
<span v-else>@{{ filter.label }}</span>
<span class="wrapper">
@{{ filter.val }}
<span class="icon cross-icon" v-on:click="removeFilter(filter)"></span>
</span>
</span>
</div>
<table>
<thead v-if="massActionsToggle">
@if(isset($results['massactions']))
<tr class="mass-action" style="height: 63px;" v-if="massActionsToggle">
<th colspan="100" style="width: 100%;">
<div class="mass-action-wrapper" style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start;">
<span class="massaction-remove" v-on:click="removeMassActions" style="margin-right: 10px;">
<span class="icon checkbox-dash-icon"></span>
</span>
<form method="POST" id="mass-action-form" style="display: inline-flex;" action="">
@csrf()
<input type="hidden" id="indexes" name="indexes" v-model="dataIds">
<div class="control-group">
<select class="control" v-model="massActionType" @change="changeMassActionTarget" name="massaction-type">
<option v-for="(massAction, index) in massActions" :key="index">@{{ massAction.type }}</option>
</select>
</div>
<div class="control-group" style="margin-left: 10px;" v-if="massActionType == 'update'">
<select class="control" v-model="massActionUpdateValue" name="update-options">
<option v-for="(massActionValue, id) in massActionValues" :value="massActionValue">@{{ id }}</option>
</select>
</div>
<input type="submit" class="btn btn-sm btn-primary" style="margin-left: 10px;">
</form>
</div>
</th>
</tr>
@endif
</thead>
<thead v-if="massActionsToggle == false">
<tr>
@if($results['enableMassActions'])
<th class="grid_head" id="mastercheckbox" style="width: 50px;">
<span class="checkbox">
<input type="checkbox" v-model="allSelected" v-on:change="selectAll">
<label class="checkbox-view" for="checkbox"></label>
</span>
</th>
@endif
@foreach($results['columns'] as $key => $column)
<th class="grid_head" style="width: {{ $column['width'] }}" v-on:click="sortCollection('{{ $column['alias'] }}')">
{{ $column['label'] }}
</th>
@endforeach
<th>
Actions
</th>
</tr>
</thead>
@include('ui::datagrid.body', ['records' => $results['records'], 'actions' => $results['actions'], 'index' => $results['index'], 'columns' => $results['columns'],'enableMassAction' => $results['enableMassActions']])
</table>
</div>
</script>
<script>
Vue.component('testgrid-filters', {
template: '#testgrid-filters',
data: () => ({
gridCurrentData: @json($results['records']),
massActions: @json($results['massactions']),
massActionsToggle: false,
massActionTarget: null,
massActionType: null,
massActionValues: [],
massActionTargets: [],
massActionUpdateValue: null,
url: new URL(window.location.href),
currentSort: null,
dataIds: [],
allSelected: false,
sortDesc: 'desc',
sortAsc: 'asc',
sortUpIcon: 'sort-up-icon',
sortDownIcon: 'sort-down-icon',
currentSortIcon: null,
isActive: false,
isHidden: true,
searchValue: '',
filterColumn: true,
filters: [],
columnOrAlias: '',
type: null,
columns : @json($results['columns']),
stringCondition: null,
booleanCondition: null,
numberCondition: null,
datetimeCondition: null,
stringValue: null,
booleanValue: null,
datetimeValue: '2000-01-01',
numberValue: 0,
stringConditionSelect: false,
booleanConditionSelect: false,
numberConditionSelect: false,
datetimeConditionSelect: false
}),
mounted: function() {
this.setParamsAndUrl();
},
methods: {
getColumnOrAlias(columnOrAlias) {
this.columnOrAlias = columnOrAlias;
for(column in this.columns) {
if (this.columns[column].alias == this.columnOrAlias) {
this.type = this.columns[column].type;
if(this.type == 'string') {
this.stringConditionSelect = true;
this.datetimeConditionSelect = false;
this.booleanConditionSelect = false;
this.numberConditionSelect = false;
this.nullify();
} else if(this.type == 'datetime') {
this.datetimeConditionSelect = true;
this.stringConditionSelect = false;
this.booleanConditionSelect = false;
this.numberConditionSelect = false;
this.nullify();
} else if(this.type == 'boolean') {
this.booleanConditionSelect = true;
this.datetimeConditionSelect = false;
this.stringConditionSelect = false;
this.numberConditionSelect = false;
this.nullify();
} else if(this.type == 'number') {
this.numberConditionSelect = true;
this.booleanConditionSelect = false;
this.datetimeConditionSelect = false;
this.stringConditionSelect = false;
this.nullify();
}
}
}
},
nullify() {
this.stringCondition = null;
this.datetimeCondition = null;
this.booleanCondition = null;
this.numberCondition = null;
},
getResponse() {
label = '';
for(colIndex in this.columns) {
if(this.columns[colIndex].alias == this.columnOrAlias) {
label = this.columns[colIndex].label;
}
}
if(this.type == 'string') {
this.formURL(this.columnOrAlias, this.stringCondition, this.stringValue, label)
} else if(this.type == 'number') {
this.formURL(this.columnOrAlias, this.numberCondition, this.numberValue, label);
} else if(this.type == 'boolean') {
this.formURL(this.columnOrAlias, this.booleanCondition, this.booleanValue, label);
} else if(this.type == 'datetime') {
this.formURL(this.columnOrAlias, this.datetimeCondition, this.datetimeValue, label);
}
},
sortCollection(alias) {
label = '';
for(colIndex in this.columns) {
if(this.columns[colIndex].alias == this.columnOrAlias) {
label = this.columns[colIndex].label;
}
}
this.formURL("sort", alias, this.sortAsc, label);
},
searchCollection(searchValue) {
label = '';
for(colIndex in this.columns) {
if(this.columns[colIndex].alias == this.columnOrAlias) {
label = this.columns[colIndex].label;
}
}
this.formURL("search", 'all', searchValue, label);
},
// function triggered to check whether the query exists or not and then call the make filters from the url
setParamsAndUrl() {
params = (new URL(window.location.href)).search;
if(params.slice(1, params.length).length > 0) {
this.arrayFromUrl();
}
for(id in this.massActions) {
targetObj = {
'type': this.massActions[id].type,
'action': this.massActions[id].action
};
this.massActionTargets.push(targetObj);
targetObj = {};
if(this.massActions[id].type == 'update') {
this.massActionValues = this.massActions[id].options;
}
}
},
findCurrentSort() {
for(i in this.filters) {
if(this.filters[i].column == 'sort') {
this.currentSort = this.filters[i].val;
// if(this.currentSort = 'asc') {
// this.currentSortIcon = this.sortUpIcon;
// } else {
// this.currentSortIcon = this.sortDownIcon;
// }
}
}
},
changeMassActionTarget() {
if(this.massActionType == 'delete') {
for(i in this.massActionTargets) {
if(this.massActionTargets[i].type == 'delete') {
this.massActionTarget = this.massActionTargets[i].action;
break;
}
}
}
if(this.massActionType == 'update') {
for(i in this.massActionTargets) {
if(this.massActionTargets[i].type == 'update') {
this.massActionTarget = this.massActionTargets[i].action;
break;
}
}
}
document.getElementById('mass-action-form').action = this.massActionTarget;
},
//make array of filters, sort and search
formURL(column, condition, response, label) {
var obj = {};
if(column == "" || condition == "" || response == "" || column == null || condition == null || response == null) {
alert('{{ __('ui::app.datagrid.filter-fields-missing') }}');
return false;
} else {
if(this.filters.length > 0) {
if(column != "sort" && column != "search") {
filterRepeated = 0;
for(j = 0; j < this.filters.length; j++) {
if(this.filters[j].column == column) {
if(this.filters[j].cond == condition && this.filters[j].val == response) {
filterRepeated = 1;
return false;
}
}
}
if(filterRepeated == 0) {
obj.column = column;
obj.cond = condition;
obj.val = response;
obj.label = label;
this.filters.push(obj);
obj = {};
this.makeURL();
}
}
if(column == "sort") {
sort_exists = 0;
for(j = 0; j < this.filters.length; j++) {
if(this.filters[j].column == "sort") {
if(this.filters[j].column == column && this.filters[j].cond == condition) {
this.findCurrentSort();
if(this.currentSort == "asc") {
this.filters[j].column = column;
this.filters[j].cond = condition;
this.filters[j].val = this.sortDesc;
this.makeURL();
} else {
this.filters[j].column = column;
this.filters[j].cond = condition;
this.filters[j].val = this.sortAsc;
this.makeURL();
}
} else {
this.filters[j].column = column;
this.filters[j].cond = condition;
this.filters[j].val = response;
this.filters[j].label = label;
this.makeURL();
}
sort_exists = 1;
}
}
if(sort_exists == 0) {
if(this.currentSort == null)
this.currentSort = this.sortAsc;
obj.column = column;
obj.cond = condition;
obj.val = this.currentSort;
obj.label = label;
this.filters.push(obj);
obj = {};
this.makeURL();
}
}
if(column == "search") {
search_found = 0;
for(j = 0; j < this.filters.length; j++) {
if(this.filters[j].column == "search") {
this.filters[j].column = column;
this.filters[j].cond = condition;
this.filters[j].val = response;
this.filters[j].label = label;
this.makeURL();
}
}
for(j = 0;j < this.filters.length;j++) {
if(this.filters[j].column == "search") {
search_found = 1;
}
}
if(search_found == 0) {
obj.column = column;
obj.cond = condition;
obj.val = response;
obj.label = label;
this.filters.push(obj);
obj = {};
this.makeURL();
}
}
} else {
obj.column = column;
obj.cond = condition;
obj.val = response;
obj.label = label;
this.filters.push(obj);
obj = {};
this.makeURL();
}
}
},
// make the url from the array and redirect
makeURL() {
newParams = '';
for(i = 0; i < this.filters.length; i++) {
if(i == 0) {
newParams = '?' + this.filters[i].column + '[' + this.filters[i].cond + ']' + '=' + this.filters[i].val;
} else {
newParams = newParams + '&' + this.filters[i].column + '[' + this.filters[i].cond + ']' + '=' + this.filters[i].val;
}
}
var uri = window.location.href.toString();
var clean_uri = uri.substring(0, uri.indexOf("?")).trim();
window.location.href = clean_uri + newParams;
},
//make the filter array from url after being redirected
arrayFromUrl() {
var obj = {};
processedUrl = this.url.search.slice(1, this.url.length);
splitted = [];
moreSplitted = [];
splitted = processedUrl.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];
label = 'cannotfindthislabel';
// for(colIndex in this.columns) {
// if(this.columns[colIndex].alias == this.columnOrAlias) {
// label = this.columns[colIndex].label;
// }
// }
obj.column = col;
obj.cond = cond;
obj.val = val;
if(col == "sort") {
label = '';
for(colIndex in this.columns) {
if(this.columns[colIndex].alias == obj.cond) {
obj.label = this.columns[colIndex].label;
}
}
} else if(col == "search") {
obj.label = 'Search';
} else {
obj.label = '';
for(colIndex in this.columns) {
if(this.columns[colIndex].alias == obj.column) {
obj.label = this.columns[colIndex].label;
}
}
}
if(col != undefined && cond != undefined && val != undefined)
this.filters.push(obj);
obj = {};
}
},
removeFilter(filter) {
for(i in this.filters) {
if(this.filters[i].col == filter.col && this.filters[i].cond == filter.cond && this.filters[i].val == filter.val) {
this.filters.splice(i, 1);
this.makeURL();
}
}
},
//triggered when any select box is clicked in the datagrid
select() {
this.allSelected = false;
this.massActionsToggle = true;
},
//triggered when master checkbox is clicked
selectAll() {
this.dataIds = [];
this.massActionsToggle = true;
if (this.allSelected) {
if(this.gridCurrentData.hasOwnProperty("data")) {
for (currentData in this.gridCurrentData.data) {
i = 0;
for(currentId in this.gridCurrentData.data[currentData]) {
if(i==0)
this.dataIds.push(this.gridCurrentData.data[currentData][currentId]);
i++;
}
}
} else {
for (currentData in this.gridCurrentData) {
i = 0;
for(currentId in this.gridCurrentData[currentData]) {
if(i==0)
this.dataIds.push(this.gridCurrentData[currentData][currentId]);
i++;
}
}
}
}
// console.log(this.dataIds);
},
removeMassActions() {
this.dataIds = [];
this.massActionsToggle = false;
this.allSelected = false;
}
}
});
</script>
@endpush
</div>

View File

@ -1,50 +0,0 @@
<tbody class="{{ $css->tbody }}">
@if(count($results) == 0)
<tr>
<td colspan="{{ count($columns)+1 }}" style="text-align: center;">
{{ __('ui::app.datagrid.no-records') }}
</td>
</tr>
@endif
@foreach ($results as $result)
<tr>
@if(count($massoperations))
<td>
<span class="checkbox">
<input type="checkbox" class="indexers" id="{{ $result->id }}" name="checkbox[]">
<label class="checkbox-view" for="checkbox1"></label>
</span>
</td>
@endif
@foreach ($columns as $column)
@if(isset($column->closure))
@if($column->closure == true)
<td>{!! $column->render($result) !!}</td>
@endif
@else
<td>{{ $column->render($result) }}</td>
@endif
@endforeach
@if(count($actions))
<td class="action">
@foreach($actions as $action)
<a
href="{{ route($action['route'], $result->id) }}"
class="Action-{{ $action['type'] }}"
id="{{ $result->id }}"
@if(isset($action['confirm_text']))
onclick="return confirm_click('{{ $action['confirm_text'] }}');"
@endif
>
<i
@if(isset($action['icon-alt']))
title="{{ $action['icon-alt'] }}"
@endif
class="{{ $action['icon'] }}"></i>
</a>
@endforeach
</td>
@endif
</tr>
@endforeach
</tbody>

View File

@ -1,79 +0,0 @@
<thead>
@if(count($massoperations))
<tr class="mass-action" style="display: none; height: 63px;">
<th colspan="10" style="width: 100%;">
<div class="mass-action-wrapper">
<span class="massaction-remove">
<span class="icon checkbox-dash-icon"></span>
</span>
<form method="POST" style="display: inline-flex;" id="mass-action-form">
@csrf()
<input type="hidden" id="indexes" name="indexes" value="">
<div class="control-group">
<select class="control massaction-type" name="massaction-type" id="massaction-type">
@foreach($massoperations as $key => $massoperation)
<option @if($key == 0) selected @endif value="{{ $key }}">{{ $massoperation['type'] }}</option>
@endforeach
</select>
</div>
@foreach($massoperations as $key => $value)
@if($value['type'] == 'update')
<div class="control-group" style="display: none; margin-left: 10px;" id="update-options">
<select class="options control" name="update-options" id="option-type">
@foreach($value['options'] as $key => $value)
<option value="{{ $key }}" @if($key == 0) selected @endif>{{ $value }}</option>
@endforeach
</select>
<input type="hidden" name="selected-option-text" id="selected-option-text" value="">
</div>
@endif
@endforeach
<input type="submit" class="btn btn-sm btn-primary" style="margin-left: 10px;">
</form>
</div>
</th>
</tr>
@endif
<tr class="table-grid-header">
@if(count($massoperations))
<th>
<span class="checkbox">
<input type="checkbox" id="mastercheckbox">
<label class="checkbox-view" for="checkbox"></label>
</span>
</th>
@endif
@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
@if(count($actions))
<th style="width: 85px;">
{{ __('ui::app.datagrid.actions') }}
</th>
@endif
</tr>
</thead>

View File

@ -1,3 +0,0 @@
<div class="filter-wrapper">
</div>

View File

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

View File

@ -1,639 +0,0 @@
<div class="table">
<testgrid-filters></testgrid-filters>
@if(config('datagrid.pagination'))
@include('ui::testgrid.pagination', ['results' => $results['records']])
@endif
@push('scripts')
<script type="text/x-template" id="testgrid-filters">
{{-- start filter here --}}
<div class="grid-container">
<div class="filter-row-one" id="testgrid-filters">
<div class="search-filter">
<input type="search" id="search-field" class="control" placeholder="Search Here..." v-model="searchValue" />
<div class="icon-wrapper">
<span class="icon search-icon search-btn" v-on:click="searchCollection(searchValue)"></span>
</div>
</div>
<div class="dropdown-filters">
<div class="more-filters">
<div class="dropdown-toggle">
<div class="dropdown-header">
<span class="name">Filter</span>
<i class="icon arrow-down-icon active"></i>
</div>
</div>
<div class="dropdown-list bottom-right" style="display: none;">
<div class="dropdown-container">
<ul>
<li class="filter-column-dropdown">
<div class="control-group">
<select class="filter-column-select control" v-model="filterColumn" v-on:click="getColumnOrAlias(filterColumn)">
<option selected disabled>Select Column</option>
@foreach($results['columns'] as $column)
<option value="{{ $column['alias'] }}">
{{ $column['label'] }}
</option>
@endforeach
</select>
</div>
</li>
{{-- suitable for string columns --}}
<li class="filter-condition-dropdown-string" v-if='stringConditionSelect'>
<div class="control-group">
<select class="control" v-model="stringCondition">
<option selected disabled>Select Condition</option>
<option value="like">Contains</option>
<option value="nlike">Does not contains</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is not equal to</option>
</select>
</div>
</li>
{{-- Response fields based on the type of columns to be filtered --}}
<li class="filter-condition-dropdown-string" v-if='stringCondition != null'>
<div class="control-group">
<input type="text" class="control response-string" placeholder="String Value here" v-model="stringValue" />
</div>
</li>
{{-- suitable for numeric columns --}}
<li class="filter-condition-dropdown-number" v-if='numberConditionSelect'>
<div class="control-group">
<select class="control" v-model="numberCondition">
<option selected disabled>Select Condition</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is not equal to</option>
<option value="gt">Greater than</option>
<option value="lt">Less than</option>
<option value="gte">Greater than equals to</option>
<option value="lte">Less than equals to</option>
</select>
</div>
</li>
<li class="filter-response-number" v-if='numberCondition != null'>
<div class="control-group">
<input type="number" class="control response-number" placeholder="Numeric Value here" v-model="numberValue"/>
</div>
</li>
{{-- suitable for boolean columns --}}
<li class="filter-condition-dropdown-boolean" v-if='booleanConditionSelect'>
<div class="control-group">
<select class="control" v-model="booleanCondition">
<option selected disabled>Select Condition</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is no equal to</option>
</select>
</div>
</li>
<li class="filter-condition-dropdown-boolean" v-if='booleanCondition != null'>
<div class="control-group">
<select class="control" v-model="booleanValue">
<option selected disabled>Select Value</option>
<option value="1">True / Active</option>
<option value="0">False / Inactive</option>
</select>
</div>
</li>
{{-- suitable for date/time columns --}}
<li class="filter-condition-dropdown-datetime" v-if='datetimeConditionSelect'>
<div class="control-group">
<select class="control" v-model="datetimeCondition">
<option selected disabled>Select Condition</option>
<option value="eq">Is equal to</option>
<option value="neqs">Is not equal to</option>
<option value="gt">Greater than</option>
<option value="lt">Less than</option>
<option value="gte">Greater than equals to</option>
<option value="lte">Less than equals to</option>
{{-- <option value="btw">Is Between</option> --}}
</select>
</div>
</li>
<li class="filter-condition-dropdown-boolean" v-if='datetimeCondition != null'>
<div class="control-group">
<input class="control" v-model="datetimeValue" type="date">
</div>
</li>
<button class="btn btn-sm btn-primary apply-filter" v-on:click="getResponse">Apply</button>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="filter-row-two">
<span class="filter-tag" v-if="filters.length > 0" v-for="filter in filters">
<span v-if="filter.column == 'sort'">@{{ filter.cond }}</span>
<span v-else-if="filter.column == 'search'">Search</span>
<span v-else>@{{ filter.column }}</span>
<span class="wrapper">
@{{ filter.val }}
<span class="icon cross-icon" v-on:click="removeFilter(filter)"></span>
</span>
</span>
</div>
<table>
<thead v-if="massActionsToggle">
@if(isset($results['massactions']))
<tr class="mass-action" style="height: 63px;" v-if="massActionsToggle">
<th colspan="100" style="width: 100%;">
<div class="mass-action-wrapper" style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start;">
<span class="massaction-remove" v-on:click="removeMassActions" style="margin-right: 10px;">
<span class="icon checkbox-dash-icon"></span>
</span>
<form method="POST" id="mass-action-form" style="display: inline-flex;" action="">
@csrf()
<input type="hidden" id="indexes" name="indexes" v-model="dataIds">
<div class="control-group">
<select class="control" v-model="massActionType" @change="changeMassActionTarget" name="massaction-type">
<option v-for="(massAction, index) in massActions" :key="index">@{{ massAction.type }}</option>
</select>
</div>
<div class="control-group" style="margin-left: 10px;" v-if="massActionType == 'update'">
<select class="control" v-model="massActionUpdateValue" name="update-options">
<option v-for="(massActionValue, id) in massActionValues" :value="massActionValue">@{{ massActionValue }}</option>
</select>
</div>
<input type="submit" class="btn btn-sm btn-primary" style="margin-left: 10px;">
</form>
</div>
</th>
</tr>
@endif
</thead>
<thead v-if="massActionsToggle == false">
<tr>
<th class="grid_head" id="mastercheckbox" style="width: 50px;">
<span class="checkbox">
<input type="checkbox" v-model="allSelected" v-on:change="selectAll">
<label class="checkbox-view" for="checkbox"></label>
</span>
</th>
@foreach($results['columns'] as $key => $column)
<th class="grid_head" style="width: {{ $column['width'] }}" v-on:click="sortCollection('{{ $column['alias'] }}')">
{{ $column['label'] }}
</th>
@endforeach
<th>
Actions
</th>
</tr>
</thead>
@include('ui::testgrid.body', ['records' => $results['records'], 'actions' => $results['actions'], 'index' => $results['index'], 'columns' => $results['columns']])
</table>
</div>
</script>
<script>
Vue.component('testgrid-filters', {
template: '#testgrid-filters',
data: () => ({
gridCurrentData: @json($results['records']),
massActions: @json($results['massactions']),
massActionsToggle: false,
massActionTarget: null,
massActionType: null,
massActionValues: [],
massActionTargets: [],
massActionUpdateValue: null,
url: new URL(window.location.href),
currentSort: null,
dataIds: [],
allSelected: false,
sortDesc: 'desc',
sortAsc: 'asc',
sortUpIcon: 'sort-up-icon',
sortDownIcon: 'sort-down-icon',
currentSortIcon: null,
isActive: false,
isHidden: true,
searchValue: '',
filterColumn: true,
filters: [],
columnOrAlias: '',
type: null,
columns : @json($results['columns']),
stringCondition: null,
booleanCondition: null,
numberCondition: null,
datetimeCondition: null,
stringValue: null,
booleanValue: null,
datetimeValue: '2000-01-01',
numberValue: 0,
stringConditionSelect: false,
booleanConditionSelect: false,
numberConditionSelect: false,
datetimeConditionSelect: false
}),
mounted: function() {
this.setParamsAndUrl();
},
methods: {
getColumnOrAlias(columnOrAlias) {
this.columnOrAlias = columnOrAlias;
for(column in this.columns) {
if (this.columns[column].alias == this.columnOrAlias) {
this.type = this.columns[column].type;
if(this.type == 'string') {
this.stringConditionSelect = true;
this.datetimeConditionSelect = false;
this.booleanConditionSelect = false;
this.numberConditionSelect = false;
this.nullify();
} else if(this.type == 'datetime') {
this.datetimeConditionSelect = true;
this.stringConditionSelect = false;
this.booleanConditionSelect = false;
this.numberConditionSelect = false;
this.nullify();
} else if(this.type == 'boolean') {
this.booleanConditionSelect = true;
this.datetimeConditionSelect = false;
this.stringConditionSelect = false;
this.numberConditionSelect = false;
this.nullify();
} else if(this.type == 'number') {
this.numberConditionSelect = true;
this.booleanConditionSelect = false;
this.datetimeConditionSelect = false;
this.stringConditionSelect = false;
this.nullify();
}
}
}
},
nullify() {
this.stringCondition = null;
this.datetimeCondition = null;
this.booleanCondition = null;
this.numberCondition = null;
},
getResponse() {
if(this.type == 'string') {
this.formURL(this.columnOrAlias, this.stringCondition, this.stringValue)
} else if(this.type == 'number') {
this.formURL(this.columnOrAlias, this.numberCondition, this.numberValue);
} else if(this.type == 'boolean') {
this.formURL(this.columnOrAlias, this.booleanCondition, this.booleanValue);
} else if(this.type == 'datetime') {
this.formURL(this.columnOrAlias, this.datetimeCondition, this.datetimeValue);
}
},
sortCollection(alias) {
this.formURL("sort", alias, this.sortAsc);
},
searchCollection(searchValue) {
this.formURL("search", 'all', searchValue);
},
// function triggered to check whether the query exists or not and then call the make filters from the url
setParamsAndUrl() {
params = (new URL(window.location.href)).search;
if(params.slice(1, params.length).length > 0) {
this.arrayFromUrl();
}
for(id in this.massActions) {
targetObj = {
'type': this.massActions[id].type,
'action': this.massActions[id].action
};
this.massActionTargets.push(targetObj);
targetObj = {};
if(this.massActions[id].type == 'update') {
this.massActionValues = this.massActions[id].options;
}
}
},
findCurrentSort() {
for(i in this.filters) {
if(this.filters[i].column == 'sort') {
this.currentSort = this.filters[i].val;
// if(this.currentSort = 'asc') {
// this.currentSortIcon = this.sortUpIcon;
// } else {
// this.currentSortIcon = this.sortDownIcon;
// }
}
}
},
changeMassActionTarget() {
if(this.massActionType == 'delete') {
for(i in this.massActionTargets) {
if(this.massActionTargets[i].type == 'delete') {
this.massActionTarget = this.massActionTargets[i].action;
break;
}
}
}
if(this.massActionType == 'update') {
for(i in this.massActionTargets) {
if(this.massActionTargets[i].type == 'update') {
this.massActionTarget = this.massActionTargets[i].action;
break;
}
}
}
document.getElementById('mass-action-form').action = this.massActionTarget;
},
//make array of filters, sort and search
formURL(column, condition, response) {
var obj = {};
if(column == "" || condition == "" || response == "" || column == null || condition == null || response == null) {
alert('{{ __('ui::app.datagrid.filter-fields-missing') }}');
return false;
} else {
if(this.filters.length > 0) {
if(column != "sort" && column != "search") {
filterRepeated = 0;
for(j = 0; j < this.filters.length; j++) {
if(this.filters[j].column == column) {
if(this.filters[j].cond == condition && this.filters[j].val == response) {
return false;
}
filterRepeated = 1;
this.filters[j].cond = condition;
this.filters[j].val = response;
this.makeURL();
}
}
if(filterRepeated == 0) {
obj.column = column;
obj.cond = condition;
obj.val = response;
this.filters.push(obj);
obj = {};
this.makeURL();
}
}
if(column == "sort") {
sort_exists = 0;
for(j = 0; j < this.filters.length; j++) {
if(this.filters[j].column == "sort") {
if(this.filters[j].column == column && this.filters[j].cond == condition) {
this.findCurrentSort();
if(this.currentSort == "asc") {
this.filters[j].column = column;
this.filters[j].cond = condition;
this.filters[j].val = this.sortDesc;
this.makeURL();
} else {
this.filters[j].column = column;
this.filters[j].cond = condition;
this.filters[j].val = this.sortAsc;
this.makeURL();
}
} else {
this.filters[j].column = column;
this.filters[j].cond = condition;
this.filters[j].val = response;
this.makeURL();
}
sort_exists = 1;
}
}
if(sort_exists == 0) {
if(this.currentSort == null)
this.currentSort = this.sortAsc;
obj.column = column;
obj.cond = condition;
obj.val = this.currentSort;
this.filters.push(obj);
obj = {};
this.makeURL();
}
}
if(column == "search") {
search_found = 0;
for(j = 0;j < this.filters.length;j++) {
if(this.filters[j].column == "search") {
this.filters[j].column = column;
this.filters[j].cond = condition;
this.filters[j].val = response;
this.makeURL();
}
}
for(j = 0;j < this.filters.length;j++) {
if(this.filters[j].column == "search") {
search_found = 1;
}
}
if(search_found == 0) {
obj.column = column;
obj.cond = condition;
obj.val = response;
this.filters.push(obj);
obj = {};
this.makeURL();
}
}
} else {
obj.column = column;
obj.cond = condition;
obj.val = response;
this.filters.push(obj);
obj = {};
this.makeURL();
}
}
},
// make the url from the array and redirect
makeURL() {
newParams = '';
for(i = 0; i < this.filters.length; i++) {
if(i == 0) {
newParams = '?' + this.filters[i].column + '[' + this.filters[i].cond + ']' + '=' + this.filters[i].val;
} else {
newParams = newParams + '&' + this.filters[i].column + '[' + this.filters[i].cond + ']' + '=' + this.filters[i].val;
}
}
var uri = window.location.href.toString();
var clean_uri = uri.substring(0, uri.indexOf("?")).trim();
window.location.href = clean_uri + newParams;
},
//make the filter array from url after being redirected
arrayFromUrl() {
var obj = {};
processedUrl = this.url.search.slice(1, this.url.length);
splitted = [];
moreSplitted = [];
splitted = processedUrl.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)
this.filters.push(obj);
obj = {};
}
},
removeFilter(filter) {
for(i in this.filters) {
if(this.filters[i].col == filter.col && this.filters[i].cond == filter.cond && this.filters[i].val == filter.val) {
this.filters.splice(i, 1);
this.makeURL();
}
}
},
//triggered when any select box is clicked in the datagrid
select() {
console.log(this.dataIds);
this.allSelected = false;
this.massActionsToggle = true;
},
//triggered when master checkbox is clicked
selectAll() {
this.dataIds = [];
this.massActionsToggle = true;
if (this.allSelected) {
if(this.gridCurrentData.hasOwnProperty("data")) {
for (currentData in this.gridCurrentData.data) {
i = 0;
for(currentId in this.gridCurrentData.data[currentData]) {
if(i==0)
this.dataIds.push(this.gridCurrentData.data[currentData][currentId]);
i++;
}
}
} else {
for (currentData in this.gridCurrentData) {
i = 0;
for(currentId in this.gridCurrentData[currentData]) {
if(i==0)
this.dataIds.push(this.gridCurrentData[currentData][currentId]);
i++;
}
}
}
}
console.log(this.dataIds);
},
removeMassActions() {
this.dataIds = [];
this.massActionsToggle = false;
this.allSelected = false;
}
}
});
</script>
@endpush
</div>