diff --git a/packages/Webkul/Ui/src/DataGrid/DataGrid.php b/packages/Webkul/Ui/src/DataGrid/DataGrid.php index 4a484efd8..2c6e54b8e 100644 --- a/packages/Webkul/Ui/src/DataGrid/DataGrid.php +++ b/packages/Webkul/Ui/src/DataGrid/DataGrid.php @@ -3,11 +3,13 @@ namespace Webkul\Ui\DataGrid; use Illuminate\Http\Request; use Illuminate\Support\Collection; +use Illuminate\Support\Validate; use Illuminate\Pagination\Paginator; use Illuminate\Support\Facades\DB; use Webkul\Ui\DataGrid\Helpers\Column; use Webkul\Ui\DataGrid\Helpers\Pagination; use Webkul\Ui\DataGrid\Helpers\Css; +use Webkul\Ui\DataGrid\Helpers\MassAction; class DataGrid { @@ -63,6 +65,11 @@ class DataGrid */ protected $css; + /** + * URL parse $parsed + * @var parse + */ + protected $parsed; /* public function __construct( $name = null , @@ -124,6 +131,21 @@ class DataGrid return $this; } + /** + * Make Mass Action + * + */ + public function makeMassAction($attributes) + { + $result = new MassAction(); + + if ($result->validateSchemaMassAction($attributes)) { + return true; + } else { + return false; + } + } + /** * Set Name. * @@ -270,7 +292,8 @@ class DataGrid /** * Add ColumnMultiple. - * + * Currently is not + * of any use. * @return $this */ @@ -332,6 +355,34 @@ class DataGrid return $this; } + /** + * Parse the URL + * and get it ready + * to be used. + */ + + private function parse() + { + //parse the url here + if (isset($_SERVER['QUERY_STRING'])) { + $qr = $_SERVER['QUERY_STRING']; + parse_str($qr, $parsed); + + foreach ($parsed as $k=>$v) { + parse_str($v, $parsed[$k]); + } + return $parsed; + } else { + return $parsed = []; + } + } + + /** + * Used for selecting + * the columns got in + * make from controller. + * @return $this + */ private function getSelect() { $select = []; @@ -346,6 +397,7 @@ class DataGrid /** * ->join('contacts', 'users.id', '=', 'contacts.user_id') + * @return $this->query */ private function getQueryWithJoin() @@ -382,20 +434,19 @@ class DataGrid } } + /** + * Used to get the filter + * params from the Url + * and processed manually + */ + private function getQueryWithFilters() { // the only use case remaining is making and testing the full validation and testing of // aliased case with alias used in column names also. if ($this->aliased) { //n of joins can lead to n number of aliases for columns and neglect the as for columns - if (isset($_SERVER['QUERY_STRING'])) { - $qr = $_SERVER['QUERY_STRING']; - $parsed; - parse_str($qr, $parsed); - } - foreach ($parsed as $k=>$v) { - parse_str($v, $parsed[$k]); - } + $parsed = $this->parse(); // dump($parsed); foreach ($parsed as $key => $value) { foreach ($value as $column => $filter) { @@ -411,13 +462,11 @@ class DataGrid array_values($filter)[0] ); } elseif ($column == "search") { - $this->query->where(function ($query) use ($filter){ + $this->query->where(function ($query) use ($filter) { foreach ($this->searchable as $search) { $query->orWhere($search['column'], 'like', '%'.array_values($filter)[0].'%'); } - }); - } else { $this->query->where( str_replace('_', '.', $column), @@ -428,15 +477,7 @@ class DataGrid } } } else { - if (isset($_SERVER['QUERY_STRING'])) { - $qr = $_SERVER['QUERY_STRING']; - $parsed; - parse_str($qr, $parsed); - } - - foreach ($parsed as $k=>$v) { - parse_str($v, $parsed[$k]); - } + $parsed = $this->parse(); foreach ($parsed as $key => $value) { foreach ($value as $column => $filter) { if (array_keys($filter)[0]=="like") { @@ -445,6 +486,12 @@ class DataGrid $this->operators[array_keys($filter)[0]], '%'.array_values($filter)[0].'%' ); + } elseif ($column == "search") { + $this->query->where(function ($query) use ($filter) { + foreach ($this->searchable as $search) { + $query->orWhere($search['column'], 'like', '%'.array_values($filter)[0].'%'); + } + }); } else { $this->query->where( $column, @@ -459,11 +506,12 @@ class DataGrid private function getDbQueryResults() { - if (isset($_SERVER['QUERY_STRING'])) { - $qr = $_SERVER['QUERY_STRING']; - $parsed; - parse_str($qr, $parsed); - } + // if (isset($_SERVER['QUERY_STRING'])) { + // $qr = $_SERVER['QUERY_STRING']; + // $parsed; + // parse_str($qr, $parsed); + // } + $parsed = $this->parse(); if ($this->aliased==true) { @@ -561,11 +609,13 @@ class DataGrid $this->getQueryWithColumnFilters(); //Run this if there are filters or sort params or range params in the urls - if (isset($_SERVER['QUERY_STRING'])) { - $qr = $_SERVER['QUERY_STRING']; - $parsed; - parse_str($qr, $parsed); - } + // if (isset($_SERVER['QUERY_STRING'])) { + // $qr = $_SERVER['QUERY_STRING']; + // $parsed; + // parse_str($qr, $parsed); + // } + $parsed = $this->parse(); + if (!empty($parsed)) { $this->getQueryWithFilters(); } else { @@ -580,11 +630,12 @@ class DataGrid $this->getSelect(); } $this->getQueryWithColumnFilters(); - if (isset($_SERVER['QUERY_STRING'])) { - $qr = $_SERVER['QUERY_STRING']; - $parsed; - parse_str($qr, $parsed); - } + // if (isset($_SERVER['QUERY_STRING'])) { + // $qr = $_SERVER['QUERY_STRING']; + // $parsed; + // parse_str($qr, $parsed); + // } + $parsed = $this->parse(); if (!empty($parsed)) { $this->getQueryWithFilters(); } else { @@ -596,6 +647,19 @@ class DataGrid } } + /** + * Render mass + * action instance + * @return view + */ + + private function renderMassAction(array $attributes) + { + + //probably render some view when mass action is needed + //the rendered view will have the needed javascript also. + } + /** * @return view */ diff --git a/packages/Webkul/Ui/src/DataGrid/Helpers/MassAction.php b/packages/Webkul/Ui/src/DataGrid/Helpers/MassAction.php new file mode 100644 index 000000000..0ff4dad02 --- /dev/null +++ b/packages/Webkul/Ui/src/DataGrid/Helpers/MassAction.php @@ -0,0 +1,30 @@ + + + + Checkbox-Dash + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss index a31e9539d..40187cebf 100644 --- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss @@ -600,20 +600,89 @@ h2 { .more-filters { margin-right: 5px; - .control { + .dropdown-toggle { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; font-family: "montserrat", sans-serif; padding-left: 5px; height: 36px; width: 150px; border: 2px solid $control-border-color; - border-radius: 3px; background-color: white; color: #8e8e8e; font-size: 14px; + + .dropdown-header { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + .arrow-down-icon { + margin-right: 5px; + } + } } .dropdown-list { .dropdown-container { ul { + li.filter-column-dropdown { + .filter-column-select { + background: #fff; + border: 2px solid #c7c7c7; + border-radius: 3px; + height: 36px; + display: inline-block; + vertical-align: middle; + -webkit-transition: 0.2s + cubic-bezier(0.4, 0, 0.2, 1); + transition: 0.2s + cubic-bezier(0.4, 0, 0.2, 1); + padding: 0px 5px; + font-family: "montserrat", sans-serif; + margin-top: 10px; + margin-bottom: 5px; + } + } + li { + select { + background: #fff; + border: 2px solid #c7c7c7; + border-radius: 3px; + height: 36px; + max-width: 100%; + display: inline-block; + vertical-align: middle; + -webkit-transition: 0.2s + cubic-bezier(0.4, 0, 0.2, 1); + transition: 0.2s + cubic-bezier(0.4, 0, 0.2, 1); + padding: 0px 5px; + font-family: "montserrat", sans-serif; + margin-top: 10px; + margin-bottom: 5px; + } + input { + background: #fff; + border: 2px solid #c7c7c7; + border-radius: 3px; + height: 36px; + max-width: 100%; + display: inline-block; + vertical-align: middle; + -webkit-transition: 0.2s + cubic-bezier(0.4, 0, 0.2, 1); + transition: 0.2s + cubic-bezier(0.4, 0, 0.2, 1); + padding: 0px 5px; + font-family: "montserrat", sans-serif; + margin-top: 10px; + margin-bottom: 5px; + } + } .filter-condition-dropdown-string { display: none; } @@ -623,6 +692,7 @@ h2 { .filter-condition-dropdown-datetime { display: none; } + .filter-response-string { display: none; } @@ -645,8 +715,8 @@ h2 { display: flex; flex-direction: row; flex-wrap: wrap; - margin-top: 15px; - margin-bottom: 15px; + margin-top: 6px; + margin-bottom: 6px; .filter-one { margin-right: 10px; @@ -674,6 +744,63 @@ h2 { } } } + .table { + .mass-action { + display: none; + padding-left: 10px; + + .mass-action-block { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + + .mass-action-remove { + margin-right: 15px; + margin-top: 8px; + } + .mass-action-dropdown { + height: 36px; + padding-top: 4px; + padding-bottom: 4px; + min-width: 160px; + max-width: 250px; + + .dropdown-toggle { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + font-family: "montserrat", sans-serif; + padding-left: 5px; + height: 36px; + width: 150px; + border: 2px solid $control-border-color; + background-color: white; + color: #8e8e8e; + font-size: 14px; + + .dropdown-header { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + .arrow-down-icon { + margin-right: 5px; + } + } + } + + .dropdown-list { + margin-top: 10px; + } + } + } + } + } } /* DataGrid css ends in here */ diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss index 8d06ad469..7c14ee518 100644 --- a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss +++ b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss @@ -116,6 +116,12 @@ height: 24px; } +.checkbox-dash-icon { + background-image: url("../images/Checkbox-Dash.svg"); + width: 24px; + height: 24px; +} + .active { .dashboard-icon { background-image: url("../images/Icon-Dashboard-Active.svg"); diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/filters/default.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/filters/default.blade.php new file mode 100644 index 000000000..23df1f10b --- /dev/null +++ b/packages/Webkul/Ui/src/Resources/views/datagrid/filters/default.blade.php @@ -0,0 +1,123 @@ +
+ {{-- for loading the filters from another file --}} +
+
+ +
+ +
+
+
+
+ {{-- +
+
+ Columns +
+ +
--}} + +
+
+
+
+ Filter {{-- Filter --}} + +
+ +
+ +
+
+
+
+ {{-- + + Stock + + + Available + + + --}} +
+
+ diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php index d5bf56d63..3c325bee4 100644 --- a/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php +++ b/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php @@ -1,160 +1,12 @@
-
-
-
- -
- -
-
-
-
- {{--
-
- Columns -
- -
--}} - -
-
-
-
- Filter - {{-- Filter --}} -
- -
- -
-
-
-
- {{-- - - Stock - - - Available - - - --}} -
-
-
- - - - - @foreach ($columns as $column) - {{-- {{ dd($column->sortable) }} --}} - @if($column->sortable == "true") - - @else - - @endif - @endforeach - - - + {{-- For loading the filters from includes directory file --}} + @include('ui::datagrid.filters.default') - @foreach ($results as $result) - - + {{-- for generating the table and its content --}} + @include('ui::datagrid.table.default') - @foreach ($columns as $column) - - @endforeach - - @endforeach - -
Mass Actionname }} data-column-sort="asc">{!! $column->sorting() !!}{!! $column->sorting() !!}
- - - - - {!! $column->render($result) !!}
- {{-- @include('ui::partials.pagination') --}} -
+ {{-- Section for datagrid javascript --}} @section('javascript') @endsection +
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php new file mode 100644 index 000000000..ae38c7794 --- /dev/null +++ b/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php @@ -0,0 +1,67 @@ +
+ + + + + @foreach ($columns as $column) {{-- {{ dd($column->sortable) }} --}} @if($column->sortable == "true") + + @else + + @endif @endforeach + + +
+
+ +
+ {{-- --}} +
+
+ Actions {{-- Filter --}} + +
+
+ + +
+ +
+
+ + + @foreach ($results as $result) + + + + @foreach ($columns as $column) + + @endforeach + + @endforeach + +
Mass Actionname }} data-column-sort="asc">{!! $column->sorting() !!}{!! $column->sorting() !!}
+ + + + + {!! $column->render($result) !!}
+ {{-- + @include('ui::partials.pagination') --}} +