unnecessary code is removed
This commit is contained in:
Prashant Singh
parent
ca95d1d595
commit
9b85622533
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,208 +2,146 @@
|
|||
|
||||
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 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' => [
|
||||
0 => true,
|
||||
1 => false,
|
||||
]
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
]
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
namespace Webkul\Admin\DataGrids;
|
||||
|
||||
use Webkul\Ui\DataGrid\AbsGrid;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use DB;
|
||||
|
||||
/**
|
||||
|
|
@ -11,7 +11,7 @@ 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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,197 +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 $enableMassAction = false;
|
||||
// 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]);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,19 +11,19 @@
|
|||
|
||||
@foreach($columns as $column)
|
||||
@php
|
||||
$indexName = explode('.', $column['index']);
|
||||
$tableIndex = explode('.', $column['index']);
|
||||
|
||||
$indexName = end($indexName);
|
||||
$tableIndex = end($tableIndex);
|
||||
@endphp
|
||||
|
||||
@if(isset($column['wrapper']))
|
||||
@if(isset($column['closure']) && $column['closure'] == true)
|
||||
<td>{!! $column['wrapper']($record->{$index}) !!}</td>
|
||||
<td>{!! $column['wrapper']($record->{$tableIndex}) !!}</td>
|
||||
@else
|
||||
<td>{{ $column['wrapper']($record->{$index}) }}</td>
|
||||
<td>{{ $column['wrapper']($record->{$tableIndex}) }}</td>
|
||||
@endif
|
||||
@else
|
||||
<td>{{ $record->{$index} }}</td>
|
||||
<td>{{ $record->{$tableIndex} }}</td>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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> --}}
|
||||
0
packages/Webkul/Ui/src/Resources/views/datagrid/pagination.blade.php
Executable file → Normal file
0
packages/Webkul/Ui/src/Resources/views/datagrid/pagination.blade.php
Executable file → Normal file
|
|
@ -1,11 +1,637 @@
|
|||
<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::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::datagrid.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() {
|
||||
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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="filter-wrapper">
|
||||
|
||||
</div>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="pagination">
|
||||
{{ $results->links() }}
|
||||
</div>
|
||||
|
|
@ -1,637 +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() {
|
||||
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>
|
||||
Loading…
Reference in New Issue