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

packages/Webkul/Admin/package-lock.json

@@ -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",
+      "version": "2.0.0-rc.26",
-      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-2.1.0-beta.6.tgz",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-2.0.0-rc.26.tgz",
-      "integrity": "sha512-ED14wmxA1RlRkBUWowiKg0aV+Z0VOt67KkW2xRuM2uWh46paUhbnHc+5VogF4KVVj1s0P/Ci/IQz1ZxfUSn7MQ=="
+      "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",

packages/Webkul/Admin/package.json

@@ -1,23 +1,24 @@
 {
-  "private": true,
+    "private": true,
-  "scripts": {
+    "scripts": {
-    "dev": "npm run development",
+        "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",
+        "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": "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",
+        "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",
+        "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",
+        "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"
+        "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": {
+    "devDependencies": {
-    "axios": "^0.18",
+        "axios": "^0.18",
-    "cross-env": "^5.1.4",
+        "cross-env": "^5.1.4",
-    "laravel-mix": "^2.1",
+        "laravel-mix": "^2.1",
-    "laravel-mix-merge-manifest": "^0.1.1",
+        "laravel-mix-merge-manifest": "^0.1.1",
-    "jquery": "^3.2",
+        "jquery": "^3.2",
-    "vue": "^2.1.10"
+        "vue": "^2.1.10"
-  },
+    },
-  "dependencies": {
+    "dependencies": {
-    "vee-validate": "2.0.0-rc.26"
+        "vee-validate": "2.0.0-rc.26",
-  }
+        "vue-flatpickr": "^2.3.0"
+    }
 }

packages/Webkul/Admin/src/Http/Controllers/DataGridController.php

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

packages/Webkul/Admin/src/Http/ViewComposers/DataGrids/UserComposer.php

@@ -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',
+                    'join' => 'leftjoin',
-                //     'table' => 'roles as r',
+                    'table' => 'roles as r',
-                //     'primaryKey' => 'u.role_id',
+                    'primaryKey' => 'u.role_id',
-                //     'condition' => '=',
+                    'condition' => '=',
-                //     'secondaryKey' => 'r.id',
+                    'secondaryKey' => 'r.id',
-                // ]
+                ]
             ],
             'columns' => [
                 [
@@ -81,12 +80,12 @@ class UserComposer
                     'label' => 'Admin E-Mail',
                     'sortable' => true,
                 ],
-                // [
+                [
-                //     'name' => 'r.id',
+                    'name' => 'r.name as rolename',
-                //     'type' => 'string',
+                    'type' => 'string',
-                //     'label' => 'Content',
+                    'label' => 'Role Name',
-                //     'sortable' => true,
+                    '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",

packages/Webkul/Admin/src/Resources/assets/js/app.js

@@ -1,23 +1,30 @@
-window.jQuery = window.$ = $ = require('jquery');
+window.jQuery = window.$ = $ = require("jquery");
-window.Vue = require('vue');
+window.Vue = require("vue");
-window.VeeValidate = require('vee-validate');
+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.addServerErrors();
-            this.addFlashMessages()
+            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);
             }
         }
     });
-});
+});

packages/Webkul/Admin/src/Resources/assets/js/components/datetime.vue

@@ -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>

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

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

packages/Webkul/Admin/webpack.mix.js

@@ -1,19 +1,19 @@
-const { mix } = require('laravel-mix');
+const { mix } = require("laravel-mix");
-require('laravel-mix-merge-manifest');
+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')
+mix.js(__dirname + "/src/Resources/assets/js/app.js", "js/admin.js")
-    .copyDirectory( __dirname + '/src/Resources/assets/images', publicPath + '/images')
+    // .copyDirectory( __dirname + '/src/Resources/assets/images', publicPath + '/images')
-    .sass( __dirname + '/src/Resources/assets/sass/app.scss', 'css/admin.css')
+    .sass(__dirname + "/src/Resources/assets/sass/app.scss", "css/admin.css")
     .options({
-        'processCssUrls': false
+        processCssUrls: false
     });
 
 if (mix.inProduction()) {
     mix.version();
-}
+}

packages/Webkul/Ui/src/DataGrid/DataGrid.php

@@ -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'];
+            if (isset($_SERVER['QUERY_STRING'])) {
-            $parsed;
+                $qr = $_SERVER['QUERY_STRING'];
-            parse_str($qr, $parsed);
+                $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'];
+            if (isset($_SERVER['QUERY_STRING'])) {
-            $parsed;
+                $qr = $_SERVER['QUERY_STRING'];
-            parse_str($qr, $parsed);
+                $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'];
+        if (isset($_SERVER['QUERY_STRING'])) {
-        $parsed;
+            $qr = $_SERVER['QUERY_STRING'];
-        parse_str($qr, $parsed);
+            $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'];
+            if (isset($_SERVER['QUERY_STRING'])) {
-            $parsed;
+                $qr = $_SERVER['QUERY_STRING'];
-            parse_str($qr, $parsed);
+                $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'];
+            if (isset($_SERVER['QUERY_STRING'])) {
-            $parsed;
+                $qr = $_SERVER['QUERY_STRING'];
-            parse_str($qr, $parsed);
+                $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,
         ]);
     }

packages/Webkul/Ui/src/DataGrid/Helpers/Column.php

@@ -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 {

packages/Webkul/Ui/src/Resources/assets/js/app.js

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

packages/Webkul/Ui/src/Resources/assets/js/components/datagrid/datetime.vue

@@ -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>

packages/Webkul/Ui/src/Resources/assets/js/components/datagrid/filter.vue

@@ -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>

packages/Webkul/Ui/src/Resources/assets/sass/app.scss

@@ -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;
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }

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

@@ -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=""/>
+                <input type="search" class="control filter-field" placeholder="Search Users" value=""/>
-                <span class="btn-filter icon search-icon" style="border:2px solid #c7c7c7; height:36px; width:39px;"></span>
+                <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">
+                    {{-- <div class="dropdown-toggle">
-                        <option selected disabled>Columns</option>
+                        <div style="display: inline-block; vertical-align: middle;">
-                        @foreach($columns as $column)
+                            <span class="name">Columns</span>
-                            <option value="{{ $column->name }}">{{ $column->label }}</option>
+                        </div>
-                        @endforeach
+                        <i class="icon arrow-down-icon active"></i>
-                    </select>
+                    </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">
+                    <div class="dropdown-toggle">
-                        <option selected disabled>Filters</option>
+                        <div style="display: inline-block; vertical-align: middle;">
-                        @foreach($operators as $key=>$value)
+                            <span class="name">Filter</span>
-                            <option>{{ $key }}</option>
+                            {{-- <span class="role">Filter</span> --}}
-                        @endforeach
+                        </div>
-                    </select>
+                        <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/>
+            {{-- {{ $columns }}<br/>
-            {{ json_encode($operators) }}
+            {{ 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-btn').click(function(){
-                filter_value = $(".filter-value").val();
+                filter_value = $(".filter-field").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');
             });
+
+            $('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
 

packages/Webkul/Ui/webpack.mix.js

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

public/vendor/webkul/ui/assets/css/ui.css

@@ -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;

public/vendor/webkul/ui/assets/js/ui.js

@@ -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-wrapper", __webpack_require__(3));
-Vue.component('flash', __webpack_require__(6));
+Vue.component("flash", __webpack_require__(6));
-Vue.component('accordian', __webpack_require__(9));
+Vue.component("accordian", __webpack_require__(9));
-Vue.component('tree-view', __webpack_require__(12));
+Vue.component("tree-view", __webpack_require__(12));
-Vue.component('tree-item', __webpack_require__(14));
+Vue.component("tree-item", __webpack_require__(14));
-Vue.component('tree-checkbox', __webpack_require__(16));
+Vue.component("tree-checkbox", __webpack_require__(16));
+// Vue.component("datetime", require("./components/datetime"));
 
 /***/ }),
 /* 3 */