Category and product table with filter feature

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style =space
+indent_size =4
+tab_size=4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

resources/components/catalog/category/CategoryTable.vue

@@ -11,7 +11,6 @@
             :items="categories.data"
             :filerable="true"
             @changeFilter="filterTableData"
-            :filter-url="filterUrl"
         >
           <template slot="name" slot-scope="{item}">
               <a :href="`${baseUrl}/category/${item.id}/edit`" class="text-red-700 hover:text-red-600">

resources/components/catalog/product/ProductTable.vue

@@ -1,110 +1,139 @@
 <template>
     <div class="mt-3">
-         <avored-table
+        <avored-table
             :columns="columns"
-            :from="initProducts.from"
-            :to="initProducts.to"
-            :total="initProducts.total"
-            :prev_page_url="initProducts.prev_page_url"
-            :next_page_url="initProducts.next_page_url"
-            :items="initProducts.data"
+            :from="products.from"
+            :to="products.to"
+            :total="products.total"
+            :prev_page_url="products.prev_page_url"
+            :next_page_url="products.next_page_url"
+            :items="products.data"
+            :filerable="true"
+            @changeFilter="filterTableData"
         >
-          >
-          <template slot="name" slot-scope="{item}">
-              <a :href="`${baseUrl}/product/${item.id}/edit`" class="text-red-700 hover:text-red-600">
-                  {{ item.name }}
-              </a>
-          </template>
-          <template slot="price" slot-scope="{item}">
+            <template slot="name" slot-scope="{ item }">
+                <a
+                    :href="`${baseUrl}/product/${item.id}/edit`"
+                    class="text-red-700 hover:text-red-600"
+                >
+                    {{ item.name }}
+                </a>
+            </template>
+            <template slot="price" slot-scope="{ item }">
                 {{ parseFloat(item.price).toFixed(2) }}
-          </template>
-          <template slot="productType" slot-scope="{item}">
-            {{ item.type }}
-          </template>
-          <template slot="action" slot-scope="{item}">
-            <div class="flex items-center">
-            <a :href="getEditUrl(item)">
-              <svg class="h-6 w-6" fill="currentColor">
-                <path
-                  class="heroicon-ui"
-                  d="M6.3 12.3l10-10a1 1 0 011.4 0l4 4a1 1 0 010 1.4l-10 10a1 1 0 01-.7.3H7a1 1 0 01-1-1v-4a1 1 0 01.3-.7zM8 16h2.59l9-9L17 4.41l-9 9V16zm10-2a1 1 0 012 0v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6c0-1.1.9-2 2-2h6a1 1 0 010 2H4v14h14v-6z"
-                />
-              </svg>
-            </a>
+            </template>
+            <template slot="productType" slot-scope="{ item }">
+                {{ item.type }}
+            </template>
+            <template slot="action" slot-scope="{ item }">
+                <div class="flex items-center">
+                    <a :href="getEditUrl(item)">
+                        <svg class="h-6 w-6" fill="currentColor">
+                            <path
+                                class="heroicon-ui"
+                                d="M6.3 12.3l10-10a1 1 0 011.4 0l4 4a1 1 0 010 1.4l-10 10a1 1 0 01-.7.3H7a1 1 0 01-1-1v-4a1 1 0 01.3-.7zM8 16h2.59l9-9L17 4.41l-9 9V16zm10-2a1 1 0 012 0v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6c0-1.1.9-2 2-2h6a1 1 0 010 2H4v14h14v-6z"
+                            />
+                        </svg>
+                    </a>
 
-            <button type="button" @click.prevent="deleteOnClick(item)">
-              <svg class="h-6 w-6" fill="currentColor">
-                <path class="heroicon-ui" d="M8 6V4c0-1.1.9-2 2-2h4a2 2 0 012 2v2h5a1 1 0 010 2h-1v12a2 2 0 01-2 2H6a2 2 0 01-2-2V8H3a1 1 0 110-2h5zM6 8v12h12V8H6zm8-2V4h-4v2h4zm-4 4a1 1 0 011 1v6a1 1 0 01-2 0v-6a1 1 0 011-1zm4 0a1 1 0 011 1v6a1 1 0 01-2 0v-6a1 1 0 011-1z"/>
-              </svg>
-            </button>
-            </div>
-          </template>
+                    <button type="button" @click.prevent="deleteOnClick(item)">
+                        <svg class="h-6 w-6" fill="currentColor">
+                            <path
+                                class="heroicon-ui"
+                                d="M8 6V4c0-1.1.9-2 2-2h4a2 2 0 012 2v2h5a1 1 0 010 2h-1v12a2 2 0 01-2 2H6a2 2 0 01-2-2V8H3a1 1 0 110-2h5zM6 8v12h12V8H6zm8-2V4h-4v2h4zm-4 4a1 1 0 011 1v6a1 1 0 01-2 0v-6a1 1 0 011-1zm4 0a1 1 0 011 1v6a1 1 0 01-2 0v-6a1 1 0 011-1z"
+                            />
+                        </svg>
+                    </button>
+                </div>
+            </template>
         </avored-table>
     </div>
 </template>
 <script>
-import isNil from 'lodash/isNil'
+import isNil from "lodash/isNil";
 
 export default {
-  props: ['baseUrl', 'initProducts'],
-  data () {
-    return {
-        columns: [],    
-    };
-  },
+    props: ["baseUrl", "initProducts", "filterUrl"],
+    data() {
+        return {
+            columns: [],
+            products: []
+        };
+    },
 
-  methods: {
-      getEditUrl(record) {
-          return this.baseUrl + '/product/' + record.id + '/edit'
-      },
-      getDeleteUrl(record) {
-          return this.baseUrl + '/product/' + record.id
-      },
-      deleteOnClick(record) {
-        var url = this.baseUrl  + '/product/' + record.id
-        var app = this
-        this.$confirm({message: this.$t('system.delete_modal_message', {name: record.name, term: this.$t('system.product')}), callback: () => {
-           axios.delete(url)
-              .then(response =>  {
-                  if (response.data.success === true) {
-                      app.$alert(response.data.message)
-                  }
-                  window.location.reload();
-              })
-              .catch(errors => {
-                  app.$alert(errors.message)
-              });
-        }})
-        
+    methods: {
+        filterTableData(e) {
+            let app = this;
+            var data = { filter: e.target.value };
+            axios.post(this.filterUrl, data).then(response => {
+                app.products = response.data;
+            });
+        },
+        getEditUrl(record) {
+            return this.baseUrl + "/product/" + record.id + "/edit";
+        },
+        getDeleteUrl(record) {
+            return this.baseUrl + "/product/" + record.id;
+        },
+        deleteOnClick(record) {
+            var url = this.baseUrl + "/product/" + record.id;
+            var app = this;
+            this.$confirm({
+                message: this.$t("system.delete_modal_message", {
+                    name: record.name,
+                    term: this.$t("system.product")
+                }),
+                callback: () => {
+                    axios
+                        .delete(url)
+                        .then(response => {
+                            if (response.data.success === true) {
+                                app.$alert(response.data.message);
+                            }
+                            window.location.reload();
+                        })
+                        .catch(errors => {
+                            app.$alert(errors.message);
+                        });
+                }
+            });
+        }
     },
-  },
-  mounted() {
-    this.columns = [
-      {
-        label: this.$t('system.id'),
-        fieldKey: "id"
-      },
-      {
-        label: this.$t('system.name'),
-        slotName: "name"
-      },
-       {
-        label: this.$t('system.price'),
-        slotName: "price"
-      },
-      {
-        label: this.$t('system.type'),
-        slotName: "productType"
-      },
-      {
-        label: this.$t('system.slug'),
-        fieldKey: "slug"
-      },
-      {
-        label: this.$t('system.actions'),
-        slotName: "action"
-      }
-    ];
-  }
+    mounted() {
+        this.columns = [
+            {
+                label: this.$t("system.id"),
+				fieldKey: "id",
+				visible: true
+            },
+            {
+                label: this.$t("system.name"),
+				slotName: "name",
+				visible: true
+			},
+			{
+                label: this.$t("system.slug"),
+				fieldKey: "slug",
+				visible: true
+			},
+			{
+                label: this.$t("system.type"),
+				slotName: "productType",
+				visible: false
+            },
+            {
+                label: this.$t("system.price"),
+				slotName: "price",
+				visible: true
+            },
+            {
+                label: this.$t("system.actions"),
+				slotName: "action",
+				visible: true
+            }
+        ];
+
+        this.products = this.initProducts;
+    }
 };
 </script>

resources/views/catalog/product/index.blade.php

@@ -25,6 +25,7 @@ class="px-4 py-2 font-semibold leading-7 text-white hover:text-white bg-red-600
 @section('content')
     <product-table
             :init-products="{{ json_encode($products) }}"
+            filter-url="{{ route('admin.product.filter') }}"
             base-url="{{ asset(config('avored.admin_url')) }}"
     ></product-table>
 @endsection

routes/web.php

@@ -119,6 +119,10 @@
             'category/filter',
             [\AvoRed\Framework\Catalog\Controllers\CategoryController::class, 'filter']
         )->name('category.filter');
+        Route::post(
+            'product/filter',
+            [\AvoRed\Framework\Catalog\Controllers\ProductController::class, 'filter']
+        )->name('product.filter');
 
         Route::resource('admin-user', User\Controllers\AdminUserController::class);
         Route::resource('attribute', Catalog\Controllers\AttributeController::class);

src/Catalog/Controllers/CategoryController.php

@@ -26,15 +26,6 @@ public function __construct(
         $this->categoryRepository = $categoryRepository;
     }
 
-    /**
-     * Filter for Category Table.
-     * @return \Illuminate\View\View
-     */
-    public function filter(Request $request)
-    {
-        return $this->categoryRepository->filter($request->get('filter'));
-    }
-
     /**
      * Show Category Index Page.
      * @return \Illuminate\View\View
@@ -122,4 +113,13 @@ public function destroy(Category $category)
             ),
         ]);
     }
+
+    /**
+     * Filter for Category Table.
+     * @return \Illuminate\View\View
+     */
+    public function filter(Request $request)
+    {
+        return $this->categoryRepository->filter($request->get('filter'));
+    }
 }

src/Catalog/Controllers/ProductController.php

@@ -565,4 +565,13 @@ private function makeCombinations(array $data, array &$all = [], array $group =
 
         return $all;
     }
+
+    /**
+     * Filter for Category Table.
+     * @return \Illuminate\View\View
+     */
+    public function filter(Request $request)
+    {
+        return $this->productRepository->filter($request->get('filter'));
+    }
 }

src/Database/Repository/CategoryRepository.php

@@ -29,15 +29,6 @@ public function __construct()
         $this->model = new Category;   
     }
 
-
-    public function filter($filter)
-    {
-        return $this->query()
-            ->where('name', 'like', '%'. $filter .'%' )
-            ->orWhere('slug', 'like', '%'. $filter .'%' )
-            ->paginate($this->perPage);
-    }
-
     /**
      * Find Category Resource into a database.
      * @param string $slug

src/Database/Repository/ProductRepository.php

@@ -90,4 +90,17 @@ public function model()
     {
         return $this->model;
     }
+
+
+    /**
+     * Filter the Data for Category Filter
+     * @string $filter
+     */
+    public function filter($filter)
+    {
+        return $this->query()
+            ->where('name', 'like', '%'. $filter .'%' )
+            ->orWhere('slug', 'like', '%'. $filter .'%' )
+            ->paginate($this->perPage);
+    }
 }

src/Graphql/Queries/Admin/Catalog/Category/CategoryTableQuery.php

@@ -8,7 +8,6 @@
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Support\Facades\Auth;
 use Rebing\GraphQL\Support\Facades\GraphQL;
-use Rebing\GraphQL\Support\SelectFields;
 use Rebing\GraphQL\Support\Query;
 
 class CategoryTableQuery extends Query