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

Data grid front implemented with columns and filters, last part of url encoder and decoder and sort ui events are remaining

This commit is contained in:
prashant-webkul 2018-07-17 19:02:45 +05:30
parent 74d1c3b3ea
commit 54a36819a6
21 changed files with 16964 additions and 15990 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5842
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
packages/Webkul/Admin/package-lock.json generated
View File

@ -4124,6 +4124,11 @@
"integrity": "sha1-Wb+1DNkF9g18OUzT2ayqtOatk04=",
"dev": true
},
"flatpickr": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-2.6.3.tgz",
"integrity": "sha1-RXNXUy3rE189pktCW/RDVzeWFWQ="
},
"flatten": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
@ -13412,9 +13417,9 @@
"dev": true
},
"vee-validate": {
"version": "2.1.0-beta.6",
"resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-2.1.0-beta.6.tgz",
"integrity": "sha512-ED14wmxA1RlRkBUWowiKg0aV+Z0VOt67KkW2xRuM2uWh46paUhbnHc+5VogF4KVVj1s0P/Ci/IQz1ZxfUSn7MQ=="
"version": "2.0.0-rc.26",
"resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-2.0.0-rc.26.tgz",
"integrity": "sha512-v77fLMfshDBOAXeoN2ZhoMxO4cwoauq51Z8A2u/ElA/EKOap5tlRBkRS9W+PcW8OPWU5ZUxjsb6960JxqsQ+ng=="
},
"vendors": {
"version": "1.0.2",
@ -13522,6 +13527,14 @@
"integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ==",
"dev": true
},
"vue-flatpickr": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/vue-flatpickr/-/vue-flatpickr-2.3.0.tgz",
"integrity": "sha1-Tf5I7qORud3LpIrcxJZ0k/pXad4=",
"requires": {
"flatpickr": "2.6.3"
}
},
"vue-hot-reload-api": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz",

43
packages/Webkul/Admin/package.json
View File

@ -1,23 +1,24 @@
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"cross-env": "^5.1.4",
"laravel-mix": "^2.1",
"laravel-mix-merge-manifest": "^0.1.1",
"jquery": "^3.2",
"vue": "^2.1.10"
},
"dependencies": {
"vee-validate": "2.0.0-rc.26"
}
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"cross-env": "^5.1.4",
"laravel-mix": "^2.1",
"laravel-mix-merge-manifest": "^0.1.1",
"jquery": "^3.2",
"vue": "^2.1.10"
},
"dependencies": {
"vee-validate": "2.0.0-rc.26",
"vue-flatpickr": "^2.3.0"
}
}

10
packages/Webkul/Admin/src/Http/Controllers/DataGridController.php
View File

@ -147,6 +147,16 @@ class DataGridController extends Controller
'type' => 'string'
]
],
'searchables' =>[
[
'name' => 'a.id',
'label' => 'ID'
],
[
'name' => 'a.name',
'label' => 'Name'
]
],
'join' => [
[
'join' => 'leftjoin',

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

@ -43,24 +43,23 @@ class UserComposer
'aliased' => true , //boolean to validate aliasing on the basis of this.
'filterable' => [
[
'column' => 'u.id',
'type' => 'integer'
], [
'column' => 'u.email',
'type' => 'string'
'type' => 'string',
'label' => 'Admin E-Mail'
], [
'column' => 'u.name',
'type' => 'string'
'type' => 'string',
'label' => 'Admin Name'
]
],
'join' => [
// [
// 'join' => 'leftjoin',
// 'table' => 'roles as r',
// 'primaryKey' => 'u.role_id',
// 'condition' => '=',
// 'secondaryKey' => 'r.id',
// ]
[
'join' => 'leftjoin',
'table' => 'roles as r',
'primaryKey' => 'u.role_id',
'condition' => '=',
'secondaryKey' => 'r.id',
]
],
'columns' => [
[
@ -81,12 +80,12 @@ class UserComposer
'label' => 'Admin E-Mail',
'sortable' => true,
],
// [
// 'name' => 'r.id',
// 'type' => 'string',
// 'label' => 'Content',
// 'sortable' => true,
// ],
[
'name' => 'r.name as rolename',
'type' => 'string',
'label' => 'Role Name',
'sortable' => true,
],
// [
// 'name' => 'a.first_name',
// 'type' => 'string',
@ -129,7 +128,7 @@ class UserComposer
'lte' => "<=",
'gte' => ">=",
'neqs' => "<>",
// 'neqn' => "!=",
'neqn' => "!=",
// 'ceq' => "<=>",
'like' => "like",
// 'likebin' => "like binary",

38
packages/Webkul/Admin/src/Resources/assets/js/app.js vendored
View File

@ -1,23 +1,30 @@
window.jQuery = window.$ = $ = require('jquery');
window.Vue = require('vue');
window.VeeValidate = require('vee-validate');
window.jQuery = window.$ = $ = require("jquery");
window.Vue = require("vue");
window.VeeValidate = require("vee-validate");
Vue.use(VeeValidate);
$(document).ready(function () {
//register single file components here
// import VueFlatpickr from "vue-flatpickr";
// import "vue-flatpickr/theme/dark.css";
// Vue.use(VueFlatpickr);
Vue.component("datetime", require("./components/datetime"));
$(document).ready(function() {
const app = new Vue({
el: '#app',
el: "#app",
mounted: function() {
this.addServerErrors()
this.addFlashMessages()
this.addServerErrors();
this.addFlashMessages();
},
methods: {
onSubmit: function(e) {
this.$validator.validateAll().then((result) => {
this.$validator.validateAll().then(result => {
if (result) {
e.target.submit()
e.target.submit();
}
});
},
@ -25,25 +32,28 @@ $(document).ready(function () {
addServerErrors: function() {
var scope = null;
for (var key in serverErrors) {
const field = this.$validator.fields.find({ name: key, scope: scope });
const field = this.$validator.fields.find({
name: key,
scope: scope
});
if (field) {
this.$validator.errors.add({
id: field.id,
field: key,
msg: serverErrors[key][0],
scope: scope,
scope: scope
});
}
}
},
addFlashMessages: function() {
const flashes = this.$refs.flashes
const flashes = this.$refs.flashes;
flashMessages.forEach(function(flash) {
flashes.addFlash(flash)
flashes.addFlash(flash);
}, this);
}
}
});
});
});

38
packages/Webkul/Admin/src/Resources/assets/js/components/datetime.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<Flatpickr class="datetime-field" :options="fpOptions" />
</template>
<script>
window.Vue = require("vue");
import VueFlatpickr from "vue-flatpickr";
import "vue-flatpickr/theme/airbnb.css";
Vue.use(VueFlatpickr);
export default {
data() {
const now = new Date();
console.log(now);
return {
fpOptions: {
utc: false,
defaultDate: now,
enableTime: true
}
};
},
mounted: function() {
console.log("Date time compoenent mounted");
}
};
</script>
<style>
.datetime-field {
border: 2px solid #c7c7c7;
border-radius: 3px;
font-family: "Montserrat", sans-serif;
height: 35px;
padding-left: 5px;
color: gray;
}
</style>

2
packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php
View File

@ -19,7 +19,9 @@
</div>
<div class="page-content">
{!! $datagrid->render() !!}
{{-- <datetime></datetime> --}}
</div>
</div>

16
packages/Webkul/Admin/webpack.mix.js vendored
View File

@ -1,19 +1,19 @@
const { mix } = require('laravel-mix');
require('laravel-mix-merge-manifest');
const { mix } = require("laravel-mix");
require("laravel-mix-merge-manifest");
// var publicPath = 'publishable/assets';
var publicPath = '../../../public/vendor/webkul/admin/assets';
var publicPath = "../../../public/vendor/webkul/admin/assets";
mix.setPublicPath(publicPath).mergeManifest();
mix.disableNotifications();
mix.js(__dirname + '/src/Resources/assets/js/app.js', 'js/admin.js')
.copyDirectory( __dirname + '/src/Resources/assets/images', publicPath + '/images')
.sass( __dirname + '/src/Resources/assets/sass/app.scss', 'css/admin.css')
mix.js(__dirname + "/src/Resources/assets/js/app.js", "js/admin.js")
// .copyDirectory( __dirname + '/src/Resources/assets/images', publicPath + '/images')
.sass(__dirname + "/src/Resources/assets/sass/app.scss", "css/admin.css")
.options({
'processCssUrls': false
processCssUrls: false
});
if (mix.inProduction()) {
mix.version();
}
}

695
packages/Webkul/Ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -376,20 +376,20 @@ class DataGrid
// 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
$qr = $_SERVER['QUERY_STRING'];
$parsed;
parse_str($qr, $parsed);
if (isset($_SERVER['QUERY_STRING'])) {
$qr = $_SERVER['QUERY_STRING'];
$parsed;
parse_str($qr, $parsed);
}
foreach ($parsed as $k=>$v) {
// dump($k, $v);
parse_str($v, $parsed[$k]);
}
foreach ($parsed as $key => $value) {
foreach ($value as $column => $filter) {
// dd($column);
if (array_keys($filter)[0]=="like") {
$this->query->where(
str_replace('_', '.', $column),
str_replace('_', '.', $column), //replace the logic of making the column name and consider the case for _ in column name already
$this->operators[array_keys($filter)[0]],
'%'.array_values($filter)[0].'%'
);
@ -403,9 +403,12 @@ class DataGrid
}
}
} else {
$qr = $_SERVER['QUERY_STRING'];
$parsed;
parse_str($qr, $parsed);
if (isset($_SERVER['QUERY_STRING'])) {
$qr = $_SERVER['QUERY_STRING'];
$parsed;
parse_str($qr, $parsed);
}
foreach ($parsed as $k=>$v) {
parse_str($v, $parsed[$k]);
}
@ -431,9 +434,13 @@ class DataGrid
private function getDbQueryResults()
{
$qr = $_SERVER['QUERY_STRING'];
$parsed;
parse_str($qr, $parsed);
if (isset($_SERVER['QUERY_STRING'])) {
$qr = $_SERVER['QUERY_STRING'];
$parsed;
parse_str($qr, $parsed);
}
if ($this->aliased==true) {
//flags
$table_alias = false;
@ -469,41 +476,57 @@ class DataGrid
if (!empty($this->join)) {
foreach ($this->join as $join) {
$name = strtolower($join['join']);
//Allow joins i.e left or right
if ($name=='leftjoin' || $name=='left join' || $name=='rightjoin' || $name=='right join') {
//check if the aliasing on the primary table and primaryKey in join is also the same
//check if the aliasing on the primary table and primaryKey in join is also the same
$primary_key_alias = trim(explode('.', $join['primaryKey'])[0]);
//got allowed joins i.e left or right
if ($primary_key_alias == $table_alias) {
$join_table_alias = explode('as', $join['table']);
if (isset($join_table_alias)) {
$alias1 = trim($join_table_alias[1]);
$alias1 = trim($join_table_alias[1]); //important!!!!!
//check if the secondary table match column is not having '.' and has proper alias
$secondary_join_column = $join['secondaryKey'];
if (isset($secondary_join_column)) {
$exploded_secondary = explode('.', $secondary_join_column);
$alias2 = trim($exploded_secondary[0]);
if ($alias1 == $alias2) {
$this->getQueryWithJoin();
//check whether secondary table columns are properly aliased
$alias_proper_secondary = true;
foreach ($this->columns as $column) {
if ($x = explode('.', $column->name)[0]) {
if (isset($x) && $x == $alias1) {
//check if this secondary column is using independent column alias
if (!strpos($column->name, 'as')) {
$alias_proper_secondary = false;
}
}
}
}
if ($alias_proper_secondary) {
$this->getQueryWithJoin();
} else {
throw new \Exception('Due to a bug in laravel, you can\'t use secondary table columns without aliasing');
}
} else {
throw new \Exception('Aliases of Join table and the secondary key columns do not match');
}
} else {
throw new \Exception('Improper aliasing on secondary/join columns for join');
throw new \Exception('Improper aliasing on secondary/join column for join');
}
} else {
throw new \Exception('join / secondary table alias is not found for join');
throw new \Exception('Join/Secondary table alias is not found for join');
}
} else {
throw new \Exception('primary key and primary table aliases do not match for join');
throw new \Exception('Primary key and primary table aliases do not match for join');
}
} else {
$other_joins = true;
throw new \Exception('Please check if there is some fault in your aliasing and do not use as in column names');
throw new \Exception('Please check if there is some fault in your aliasing and do not use as in column names or you might have been using a join that is not allowed i.e cross, inner, etc use left and right join only');
}
}
}
@ -513,11 +536,12 @@ class DataGrid
$this->getQueryWithColumnFilters();
//Run this if there are filters or sort params or range params in the urls
$qr = $_SERVER['QUERY_STRING'];
$parsed;
parse_str($qr, $parsed);
if (isset($_SERVER['QUERY_STRING'])) {
$qr = $_SERVER['QUERY_STRING'];
$parsed;
parse_str($qr, $parsed);
}
if (!empty($parsed)) {
// dump('parsed url is not empty');
$this->getQueryWithFilters();
} else {
$this->results = $this->query->get();
@ -531,11 +555,12 @@ class DataGrid
$this->getSelect();
}
$this->getQueryWithColumnFilters();
$qr = $_SERVER['QUERY_STRING'];
$parsed;
parse_str($qr, $parsed);
if (isset($_SERVER['QUERY_STRING'])) {
$qr = $_SERVER['QUERY_STRING'];
$parsed;
parse_str($qr, $parsed);
}
if (!empty($parsed)) {
// dump('parsed url is not empty');
$this->getQueryWithFilters();
} else {
$this->results = $this->query->get();
@ -558,6 +583,7 @@ class DataGrid
'css' => $this->css,
'results' => $this->results,
'columns' => $this->columns,
'filterable' =>$this->filterable,
'operators' => $this->operators,
]);
}

1
packages/Webkul/Ui/src/DataGrid/Helpers/Column.php
View File

@ -143,6 +143,7 @@ class Column extends AbstractFillable
*/
public function sorting()
{
return $this->label;
if ($this->sortable) {
return vsprintf($this->sortHtml, [$this->sortingUrl(), $this->label]);
} else {

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

@ -1,6 +1,7 @@
Vue.component('flash-wrapper', require('./components/flash-wrapper'))
Vue.component('flash', require('./components/flash'))
Vue.component('accordian', require('./components/accordian'))
Vue.component('tree-view', require('./components/tree-view/tree-view'))
Vue.component('tree-item', require('./components/tree-view/tree-item'))
Vue.component('tree-checkbox', require('./components/tree-view/tree-checkbox'))
Vue.component("flash-wrapper", require("./components/flash-wrapper"));
Vue.component("flash", require("./components/flash"));
Vue.component("accordian", require("./components/accordian"));
Vue.component("tree-view", require("./components/tree-view/tree-view"));
Vue.component("tree-item", require("./components/tree-view/tree-item"));
Vue.component("tree-checkbox", require("./components/tree-view/tree-checkbox"));
// Vue.component("datetime", require("./components/datetime"));

38
packages/Webkul/Ui/src/Resources/assets/js/components/datagrid/datetime.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<Flatpickr class="datetime-field" :options="fpOptions" />
</template>
<script>
window.Vue = require("vue");
import VueFlatpickr from "vue-flatpickr";
import "vue-flatpickr/theme/airbnb.css";
Vue.use(VueFlatpickr);
export default {
data() {
const now = new Date();
console.log(now);
return {
fpOptions: {
utc: false,
defaultDate: now,
enableTime: true
}
};
},
mounted: function() {
console.log("Date time compoenent mounted");
}
};
</script>
<style>
.datetime-field {
border: 2px solid #c7c7c7;
border-radius: 3px;
font-family: "Montserrat", sans-serif;
height: 35px;
padding-left: 5px;
color: gray;
}
</style>

67
packages/Webkul/Ui/src/Resources/assets/js/components/datagrid/filter.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<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" class="control filter-value" placeholder="Search Users" style="border-radius: 0px;border-right:0px;" value=""/>
<span class="btn-filter icon search-icon" style="border:2px solid #c7c7c7; height:36px; width:39px;"></span>
</div>
<div class="dropdown-filters">
<div class="column-filter">
<select class="control filter-col">
<option selected disabled>Columns</option>
@foreach($columns as $column)
<option value="{{ $column->name }}">{{ $column->label }}</option>
@endforeach
</select>
</div>
<div class="more-filters">
<select class="control filter-cond">
<option selected disabled>Filters</option>
@foreach($operators as $key=>$value)
<option>{{ $key }}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="filter-row-two">
{{ $columns }}<br/>
{{ json_encode($operators) }}
<span class="filter-one">
<span class="filter-name">
Stock
</span>
<span class="filter-value">
Available
<span class="icon cross-icon"></span>
</span>
</span>
<span class="filter-one">
<span class="filter-name">
Stock
</span>
<span class="filter-value">
Available
<span class="icon cross-icon"></span>
</span>
</span>
<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>
</template>
<script>
export default {
mounted: function() {
console.log("Filter compoenent mounted");
}
};
</script>

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

@ -557,8 +557,25 @@ h2 {
height: 36px;
border: 2px solid $control-border-color;
border-radius: 3px;
border-right: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
font-size: 14px;
}
.ic-wrapper {
display: block;
height: 36px;
width: 36px;
border: 2px solid $control-border-color;
border-left: none;
.search-icon {
margin-left: 4px;
margin-top: 4px;
height: 24px;
width: 24px;
}
}
}
.dropdown-filters {
@ -594,6 +611,33 @@ h2 {
color: #8e8e8e;
font-size: 14px;
}
.dropdown-list {
.dropdown-container {
ul {
.filter-condition-dropdown-string {
display: none;
}
.filter-condition-dropdown-number {
display: none;
}
.filter-condition-dropdown-datetime {
display: none;
}
.filter-response-string {
display: none;
}
.filter-response-boolean {
display: none;
}
.filter-response-datetime {
display: none;
}
.filter-response-number {
display: none;
}
}
}
}
}
}
}

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

@ -2,31 +2,112 @@
<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" class="control filter-value" placeholder="Search Users" style="border-radius: 0px;border-right:0px;" value=""/>
<span class="btn-filter icon search-icon" style="border:2px solid #c7c7c7; height:36px; width:39px;"></span>
<input type="search" class="control filter-field" placeholder="Search Users" value=""/>
<div class="ic-wrapper">
<span class="icon search-icon filter-btn"></span>
</div>
</div>
<div class="dropdown-filters">
<div class="column-filter">
<select class="control filter-col">
<option selected disabled>Columns</option>
@foreach($columns as $column)
<option value="{{ $column->name }}">{{ $column->label }}</option>
@endforeach
</select>
{{-- <div class="dropdown-toggle">
<div style="display: inline-block; vertical-align: middle;">
<span class="name">Columns</span>
</div>
<i class="icon arrow-down-icon active"></i>
</div> --}}
<div class="dropdown-list bottom-right" style="display: none;">
<div class="dropdown-container">
<ul>
@foreach($columns as $column)
<li data-name="{{ $column->name }}">
{{ $column->label }}
<span class="checkbox"><input type="checkbox" id="{{ $column->id }}" name="checkbox1[]"> <label for="checkbox1" class="checkbox-view"></label></span>
</li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="more-filters">
<select class="control filter-cond">
<option selected disabled>Filters</option>
@foreach($operators as $key=>$value)
<option>{{ $key }}</option>
@endforeach
</select>
<div class="dropdown-toggle">
<div style="display: inline-block; vertical-align: middle;">
<span class="name">Filter</span>
{{-- <span class="role">Filter</span> --}}
</div>
<i class="icon arrow-down-icon active"></i>
</div>
<div class="dropdown-list bottom-right" style="display: none;">
<div class="dropdown-container">
<ul>
<li class="filter-column-dropdown">
<select class="control filter-column-select">
<option selected disabled>Select Column</option>
@foreach($filterable as $fcol)
<option value="{{ $fcol['column'] }}" data-type="{{ $fcol['type'] }}">{{ $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>Select Condition</option>
<option value="like">Contains</option>
<option value="not like">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>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 date/time columns --}}
<li class="filter-condition-dropdown-datetime">
<select class="control filter-condition-select-datetime">
<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>
</li>
{{-- Response fields based on the type of columns to be filtered --}}
<li class="filter-response-string">
<input type="text" class="control conditional-response" placeholder="Value here" />
</li>
<li class="filter-response-boolean">
<select class="control select-boolean">
<option value="true">Is True</option>
<option value="false">Is False</option>
</select>
</li>
<li class="filter-response-datetime">
<input type="datetime-local" class="control conditional-response" placeholder="Value here" />
</li>
<li class="filter-response-number">
<input type="text" class="control conditional-response" placeholder="Value here" />
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="filter-row-two">
{{ $columns }}<br/>
{{ json_encode($operators) }}
{{-- {{ $columns }}<br/>
{{ json_encode($operators) }} --}}
<span class="filter-one">
<span class="filter-name">
Stock
@ -63,7 +144,7 @@
<tr>
<th class="{{-- $css->thead_td --}}">Mass Action</th>
@foreach ($columns as $column)
<th class="{{-- $css->thead_td --}}">{!! $column->sorting() !!}</th>
<th class="$css->thead_td grid_head">{!! $column->sorting() !!}</th>
@endforeach
</tr>
</thead>
@ -71,7 +152,13 @@
@foreach ($results as $result)
<tr>
<td class="{{-- $css->tbody_td --}}"><input type="checkbox" /></td>
<td class="{{-- $css->tbody_td --}}">
<span class="checkbox">
<input type="checkbox" id="{{ $result->id }}" name="checkbox[]">
<label class="checkbox-view" for="checkbox1"></label>
</span>
</td>
@foreach ($columns as $column)
<td class="{{-- $css->tbody_td --}}">{!! $column->render($result) !!}</td>
@endforeach
@ -91,21 +178,71 @@
var flag = 0;
var array_start = '{';
var array_end = '}';
var typeValue;
$(document).ready(function(){
console.log('ready');
$('.btn-filter').click(function(){
filter_value = $(".filter-value").val();
filter_column = $(".filter-col").val();
filter_condition = $(".filter-cond").val();
if(filter_value!="" && filter_condition!=null || filter_column!=null)
flag=1;
if(flag==1){
formURL(filter_value,filter_column,filter_condition);
}
else
alert('Please enter filter criteria in all three fields above');
$('.filter-btn').click(function(){
filter_value = $(".filter-field").val();
});
$('select.filter-column-select').change(function() {
typeValue = $('select.filter-column-select').find(':selected').data('type');
console.log(typeValue);
if(typeValue == 'string'){
//default behaviour for strings
$('.filter-condition-dropdown-number').css('display','none');
$('.filter-condition-dropdown-datetime').css('display','none');
$('.filter-response-number').css('display','none');
$('.filter-response-datetime').css('display','none');
$('.filter-response-boolean').css('display','none');
$('.filter-condition-dropdown-string').css('display','inherit');
$('.filter-response-string').css('display','inherit');
}
else if(typeValue == 'boolean'){
//make another list component
//hide unwanted
$('.filter-response-string').css('display','none');
$('.filter-response-number').css('display','none');
$('.filter-response-datetime').css('display','none');
$('.filter-condition-dropdown').css('display','none');
//show what is wanted
$('.filter-response-boolean').css('display','inherit');
}
else if(typeValue == 'datetime'){
//make another list component
//hide unwanted
$('.filter-response-string').css('display','none');
$('.filter-response-number').css('display','none');
$('.filter-response-boolean').css('display','none');
//show what is wanted
$('.filter-response-datetime').css('display','inherit');
$('.filter-condition-dropdown').css('display','inherit');
}
else if(typeValue == 'number'){
//make another list component
//hide unwanted
$('.filter-response-string').css('display','none');
$('.filter-response-datetime').css('display','none');
$('.filter-response-boolean').css('display','none');
//show what is wanted
$('.filter-response-number').css('display','inherit');
$('.filter-condition-dropdown').css('display','inherit');
}
});
// $('.filter-column-select').click(function(){
// var column = $('.filter-column-select').val();
// console.log(column);
// });
});
function formURL(a,b,c){
//form the array object here and convert it to string and pass it in url

5
packages/Webkul/Ui/webpack.mix.js vendored
View File

@ -14,10 +14,7 @@ mix.js(
],
"js/ui.js"
)
.copyDirectory(
__dirname + "/src/Resources/assets/images",
publicPath + "/images"
)
// .copy(__dirname + "/src/Resources/assets/images", publicPath + "/images")
.sass(__dirname + "/src/Resources/assets/sass/app.scss", "css/ui.css")
.options({
processCssUrls: false

25706
public/vendor/webkul/admin/assets/js/admin.js vendored
View File

File diff suppressed because one or more lines are too long

46
public/vendor/webkul/ui/assets/css/ui.css vendored
View File

@ -789,9 +789,27 @@ h2 {
height: 36px;
border: 2px solid #C7C7C7;
border-radius: 3px;
border-right: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
font-size: 14px;
}
.grid-container .filter-wrapper .filter-row-one .search-filter .ic-wrapper {
display: block;
height: 36px;
width: 36px;
border: 2px solid #C7C7C7;
border-left: none;
}
.grid-container .filter-wrapper .filter-row-one .search-filter .ic-wrapper .search-icon {
margin-left: 4px;
margin-top: 4px;
height: 24px;
width: 24px;
}
.grid-container .filter-wrapper .filter-row-one .dropdown-filters {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@ -830,6 +848,34 @@ h2 {
font-size: 14px;
}
.grid-container .filter-wrapper .filter-row-one .dropdown-filters .more-filters .dropdown-list .dropdown-container ul .filter-condition-dropdown-string {
display: none;
}
.grid-container .filter-wrapper .filter-row-one .dropdown-filters .more-filters .dropdown-list .dropdown-container ul .filter-condition-dropdown-number {
display: none;
}
.grid-container .filter-wrapper .filter-row-one .dropdown-filters .more-filters .dropdown-list .dropdown-container ul .filter-condition-dropdown-datetime {
display: none;
}
.grid-container .filter-wrapper .filter-row-one .dropdown-filters .more-filters .dropdown-list .dropdown-container ul .filter-response-string {
display: none;
}
.grid-container .filter-wrapper .filter-row-one .dropdown-filters .more-filters .dropdown-list .dropdown-container ul .filter-response-boolean {
display: none;
}
.grid-container .filter-wrapper .filter-row-one .dropdown-filters .more-filters .dropdown-list .dropdown-container ul .filter-response-datetime {
display: none;
}
.grid-container .filter-wrapper .filter-row-one .dropdown-filters .more-filters .dropdown-list .dropdown-container ul .filter-response-number {
display: none;
}
.grid-container .filter-wrapper .filter-row-two {
display: -webkit-box;
display: -ms-flexbox;

13
public/vendor/webkul/ui/assets/js/ui.js vendored
View File

@ -185,12 +185,13 @@ module.exports = __webpack_require__(21);
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
Vue.component('flash-wrapper', __webpack_require__(3));
Vue.component('flash', __webpack_require__(6));
Vue.component('accordian', __webpack_require__(9));
Vue.component('tree-view', __webpack_require__(12));
Vue.component('tree-item', __webpack_require__(14));
Vue.component('tree-checkbox', __webpack_require__(16));
Vue.component("flash-wrapper", __webpack_require__(3));
Vue.component("flash", __webpack_require__(6));
Vue.component("accordian", __webpack_require__(9));
Vue.component("tree-view", __webpack_require__(12));
Vue.component("tree-item", __webpack_require__(14));
Vue.component("tree-checkbox", __webpack_require__(16));
// Vue.component("datetime", require("./components/datetime"));
/***/ }),
/* 3 */