Merge pull request #518 from evershopcommerce/dev

Dev
evershopcommerce · May 5, 2024 · 25da59c · 25da59c
2 parents 45daed3 + fbcb0fe
commit 25da59c
Show file tree

Hide file tree

Showing 5 changed files with 383 additions and 58 deletions.
diff --git a/packages/evershop/src/components/common/list/Filter.jsx b/packages/evershop/src/components/common/list/Filter.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Filter.scss';
+
+export default function Filter({ title, options, selectedOption }) {
+  const [show, setShow] = React.useState(false);
+
+  return (
+    <div className="filter-container">
+      <button
+        type="button"
+        onClick={() => setShow(!show)}
+        className="flex gap-1 justify-center items-center"
+      >
+        <span>{selectedOption || title}</span>
+        {!show && (
+          <svg
+            width="6"
+            height="5"
+            viewBox="0 0 118 106"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M54.6478 2.69522C56.5621 -0.689529 61.4379 -0.689535 63.3522 2.69521L117.134 97.7885C119.019 101.122 116.611 105.25 112.782 105.25H5.21828C1.38899 105.25 -1.01899 101.122 0.866121 97.7886L54.6478 2.69522Z"
+              fill="#2F2F2F"
+            />
+          </svg>
+        )}
+
+        {show && (
+          <svg
+            width="6"
+            height="5"
+            viewBox="0 0 118 106"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M63.3522 103.305C61.4379 106.69 56.5621 106.69 54.6478 103.305L0.866142 8.21144C-1.01897 4.8783 1.38901 0.749989 5.2183 0.749989L112.782 0.749998C116.611 0.749999 119.019 4.8783 117.134 8.21144L63.3522 103.305Z"
+              fill="#2F2F2F"
+            />
+          </svg>
+        )}
+      </button>
+      {show && (
+        <ul>
+          {options.map((option) => (
+            <li key={option.value}>
+              <a
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  option.onSelect();
+                }}
+              >
+                {option.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+Filter.propTypes = {
+  title: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string,
+      onSelect: PropTypes.func
+    })
+  ),
+  selectedOption: PropTypes.string
+};
+
+Filter.defaultProps = {
+  title: '',
+  options: [],
+  selectedOption: ''
+};
diff --git a/packages/evershop/src/components/common/list/Filter.scss b/packages/evershop/src/components/common/list/Filter.scss
@@ -0,0 +1,39 @@
+.filter-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  position: relative;
+}
+
+.filter-container button {
+    background: none;
+    border-bottom: 1px solid #ccc;
+    color: var(--color-text);
+    font-size: 1.5rem;
+    text-align: left;
+    font-size: 12px;
+    padding: 0 5px;
+    text-transform: capitalize;
+}
+
+.filter-container ul {
+  list-style: none;
+  padding: 10px;
+  position: absolute;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  top: 100%;
+  left: 0;
+  width: max-content;
+}
+
+.filter-container ul li {
+  padding: 3px 5px;
+  text-transform: capitalize;
+  &:hover {
+    background: #f9f9f9;
+  }
+}
diff --git a/packages/evershop/src/modules/catalog/pages/admin/productGrid/Grid.jsx b/packages/evershop/src/modules/catalog/pages/admin/productGrid/Grid.jsx
@@ -1,4 +1,4 @@
-/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react/no-unstable-nested-components,no-nested-ternary */
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import axios from 'axios';
@@ -17,6 +17,7 @@ import QtyRow from '@components/admin/catalog/productGrid/rows/QtyRow';
 import SortableHeader from '@components/common/grid/headers/Sortable';
 import { Form } from '@components/common/form/Form';
 import { Field } from '@components/common/form/Field';
+import Filter from '@components/common/list/Filter';
 
 function Actions({ products = [], selectedIds = [] }) {
   const { openAlert, closeAlert } = useAlertContext();
@@ -173,32 +174,130 @@ export default function ProductGrid({
       <Card.Session
         title={
           <Form submitBtn={false}>
-            <Field
-              type="text"
-              id="keyword"
-              placeholder="Search"
-              value={currentFilters.find((f) => f.key === 'keyword')?.value}
-              onKeyPress={(e) => {
-                // If the user press enter, we should submit the form
-                if (e.key === 'Enter') {
-                  const url = new URL(document.location);
-                  const keyword = document.getElementById('keyword')?.value;
-                  if (keyword) {
-                    url.searchParams.set('keyword', keyword);
-                  } else {
-                    url.searchParams.delete('keyword');
+            <div className="flex gap-2 justify-center items-center">
+              <Area
+                id="productGridFilter"
+                noOuter
+                coreComponents={[
+                  {
+                    component: {
+                      default: () => (
+                        <Field
+                          type="text"
+                          id="keyword"
+                          placeholder="Search"
+                          value={
+                            currentFilters.find((f) => f.key === 'keyword')
+                              ?.value
+                          }
+                          onKeyPress={(e) => {
+                            // If the user press enter, we should submit the form
+                            if (e.key === 'Enter') {
+                              const url = new URL(document.location);
+                              const keyword =
+                                document.getElementById('keyword')?.value;
+                              if (keyword) {
+                                url.searchParams.set('keyword', keyword);
+                              } else {
+                                url.searchParams.delete('keyword');
+                              }
+                              window.location.href = url;
+                            }
+                          }}
+                        />
+                      )
+                    },
+                    sortOrder: 5
+                  },
+                  {
+                    component: {
+                      default: () => (
+                        <Filter
+                          options={[
+                            {
+                              label: 'Enabled',
+                              value: '1',
+                              onSelect: () => {
+                                const url = new URL(document.location);
+                                url.searchParams.set('status', 1);
+                                window.location.href = url;
+                              }
+                            },
+                            {
+                              label: 'Disabled',
+                              value: '0',
+                              onSelect: () => {
+                                const url = new URL(document.location);
+                                url.searchParams.set('status', 0);
+                                window.location.href = url;
+                              }
+                            }
+                          ]}
+                          selectedOption={
+                            currentFilters.find((f) => f.key === 'status')
+                              ? currentFilters.find((f) => f.key === 'status')
+                                  .value === '1'
+                                ? 'Enabled'
+                                : 'Disabled'
+                              : undefined
+                          }
+                          title="Status"
+                        />
+                      )
+                    },
+                    sortOrder: 10
+                  },
+                  {
+                    component: {
+                      default: () => (
+                        <Filter
+                          options={[
+                            {
+                              label: 'Simple',
+                              value: '1',
+                              onSelect: () => {
+                                const url = new URL(document.location);
+                                url.searchParams.set('type', 'simple');
+                                window.location.href = url;
+                              }
+                            },
+                            {
+                              label: 'Configurable',
+                              value: '0',
+                              onSelect: () => {
+                                const url = new URL(document.location);
+                                url.searchParams.set('type', 'configurable');
+                                window.location.href = url;
+                              }
+                            }
+                          ]}
+                          selectedOption={
+                            currentFilters.find((f) => f.key === 'type')
+                              ? currentFilters.find((f) => f.key === 'type')
+                                  .value
+                              : undefined
+                          }
+                          title="Product type"
+                        />
+                      )
+                    },
+                    sortOrder: 15
                   }
-                  window.location.href = url;
-                }
-              }}
-            />
+                ]}
+                currentFilters={currentFilters}
+              />
+            </div>
           </Form>
         }
         actions={[
           {
             variant: 'interactive',
             name: 'Clear filter',
-            onAction: () => {}
+            onAction: () => {
+              const url = new URL(document.location);
+              url.search = '';
+              window.location.href = url.href;
+            }
           }
         ]}
       />

diff --git a/packages/evershop/src/modules/catalog/services/registerDefaultProductCollectionFilters.js b/packages/evershop/src/modules/catalog/services/registerDefaultProductCollectionFilters.js
@@ -117,6 +117,29 @@ module.exports = async function registerDefaultProductCollectionFilters() {
         });
       }
     },
+    {
+      key: 'type',
+      operation: ['eq'],
+      callback: (query, operation, value, currentFilters) => {
+        if (['simple', 'configurable'].includes(value)) {
+          switch (value) {
+            case 'simple':
+              query.andWhere('product.variant_group_id', 'IS NULL', null);
+              break;
+            case 'configurable':
+              query.andWhere('product.variant_group_id', 'IS NOT NULL', null);
+              break;
+            default:
+              break;
+          }
+          currentFilters.push({
+            key: 'type',
+            operation,
+            value
+          });
+        }
+      }
+    },
     {
       key: 'cat',
       operation: ['eq', 'in', 'nin'],