@evershop/evershop 1.0.0 → 1.1.0

package/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';
@@ -11,12 +11,13 @@ import StatusRow from '@components/common/grid/rows/StatusRow';
 import ProductPriceRow from '@components/admin/catalog/productGrid/rows/PriceRow';
 import BasicRow from '@components/common/grid/rows/BasicRow';
 import ThumbnailRow from '@components/admin/catalog/productGrid/rows/ThumbnailRow';
-import BasicColumnHeader from '@components/common/grid/headers/Basic';
-import FromToColumnHeader from '@components/common/grid/headers/FromTo';
-import DropdownColumnHeader from '@components/common/grid/headers/Dropdown';
 import { Card } from '@components/admin/cms/Card';
 import DummyColumnHeader from '@components/common/grid/headers/Dummy';
 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();
@@ -170,6 +171,136 @@ export default function ProductGrid({
 
   return (
     <Card>
+      <Card.Session
+        title={
+          <Form submitBtn={false}>
+            <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
+                  }
+                ]}
+                currentFilters={currentFilters}
+              />
+            </div>
+          </Form>
+        }
+        actions={[
+          {
+            variant: 'interactive',
+            name: 'Clear filter',
+            onAction: () => {
+              const url = new URL(document.location);
+              url.search = '';
+              window.location.href = url.href;
+            }
+          }
+        ]}
+      />
       <table className="listing sticky">
         <thead>
           <tr>
@@ -189,15 +320,25 @@ export default function ProductGrid({
               noOuter
               coreComponents={[
                 {
-                  component: { default: () => <DummyColumnHeader /> },
+                  component: {
+                    default: () => (
+                      <th className="column">
+                        <div className="table-header id-header">
+                          <div className="font-medium uppercase text-xl">
+                            <span>Thumbnail</span>
+                          </div>
+                        </div>
+                      </th>
+                    )
+                  },
                   sortOrder: 5
                 },
                 {
                   component: {
                     default: () => (
-                      <BasicColumnHeader
-                        title="Product Name"
-                        id="name"
+                      <SortableHeader
+                        title="Name"
+                        name="name"
                         currentFilters={currentFilters}
                       />
                     )
@@ -207,9 +348,9 @@ export default function ProductGrid({
                 {
                   component: {
                     default: () => (
-                      <FromToColumnHeader
-                        id="price"
+                      <SortableHeader
                         title="Price"
+                        name="price"
                         currentFilters={currentFilters}
                       />
                     )
@@ -218,22 +359,16 @@ export default function ProductGrid({
                 },
                 {
                   component: {
-                    default: () => (
-                      <BasicColumnHeader
-                        title="SKU"
-                        id="sku"
-                        currentFilters={currentFilters}
-                      />
-                    )
+                    default: () => <DummyColumnHeader title="SKU" />
                   },
                   sortOrder: 20
                 },
                 {
                   component: {
                     default: () => (
-                      <FromToColumnHeader
-                        title="Qty"
-                        id="qty"
+                      <SortableHeader
+                        title="Stock"
+                        name="qty"
                         currentFilters={currentFilters}
                       />
                     )
@@ -243,14 +378,10 @@ export default function ProductGrid({
                 {
                   component: {
                     default: () => (
-                      <DropdownColumnHeader
-                        id="status"
+                      <SortableHeader
                         title="Status"
+                        name="status"
                         currentFilters={currentFilters}
-                        options={[
-                          { value: 1, text: 'Enabled' },
-                          { value: 0, text: 'Disabled' }
-                        ]}
                       />
                     )
                   },
@@ -432,6 +563,7 @@ export const query = `
         value
       }
     }
+    newProductUrl: url(routeId: "productNew")
   }
 `;
 

package/src/modules/catalog/pages/admin/productGrid/index.js

@@ -11,6 +11,5 @@ module.exports = (request, response) => {
     title: 'Products',
     description: 'Products'
   });
-  const { query } = request;
-  setContextValue(request, 'filtersFromUrl', buildFilterFromUrl(query));
+  setContextValue(request, 'filtersFromUrl', buildFilterFromUrl(request));
 };

package/src/modules/catalog/pages/frontStore/all/SearchBox.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
 import { Input } from '@components/common/form/fields/Input';
 import XIcon from '@heroicons/react/solid/esm/XIcon';
+import { _ } from '@evershop/evershop/src/lib/locale/translate';
 import './SearchBox.scss';
 
 export default function SearchBox({ searchPageUrl }) {
@@ -72,7 +73,7 @@ export default function SearchBox({ searchPageUrl }) {
                   />
                 </svg>
               }
-              placeholder="Search"
+              placeholder={_('Search')}
               ref={InputRef}
               value={keyword}
               onChange={(e) => {

package/src/modules/catalog/pages/frontStore/catalogSearch/[index]filters.js

@@ -1,66 +1,11 @@
 const {
-  translate
-} = require('@evershop/evershop/src/lib/locale/translate/translate');
+  buildFilterFromUrl
+} = require('@evershop/evershop/src/lib/util/buildFilterFromUrl');
 const {
   setContextValue
 } = require('@evershop/evershop/src/modules/graphql/services/contextHelper');
 
 module.exports = (request, response, delegate, next) => {
-  const { query } = request;
-  if (!query) {
-    setContextValue(request, 'filtersFromUrl', []);
-    next();
-  } else {
-    const filtersFromUrl = [];
-
-    const { sortBy } = query;
-    const sortOrder =
-      query.sortOrder && ['ASC', 'DESC'].includes(query.sortOrder.toUpperCase())
-        ? query.sortOrder.toUpperCase()
-        : 'ASC';
-    if (sortBy) {
-      filtersFromUrl.push({
-        key: 'sortBy',
-        operation: '=',
-        value: sortBy
-      });
-    }
-
-    if (sortOrder !== 'ASC') {
-      filtersFromUrl.push({
-        key: 'sortOrder',
-        operation: '=',
-        value: sortOrder
-      });
-    }
-    // Paging
-    const page = Number.isNaN(parseInt(query.page, 10))
-      ? '1'
-      : query.page.toString();
-    if (page !== '1') {
-      filtersFromUrl.push({ key: 'page', operation: '=', value: page });
-    }
-    const limit = Number.isNaN(parseInt(query.limit, 10))
-      ? '20'
-      : query.limit.toString(); // TODO: Get from config
-    if (limit !== '20') {
-      filtersFromUrl.push({ key: 'limit', operation: '=', value: limit });
-    }
-
-    // Remove html tags
-    const {keyword} = query;
-    setContextValue(request, 'pageInfo', {
-      title: translate('Search results for "${keyword}"', { keyword }),
-      description: translate('Search results for "${keyword}"', { keyword })
-    });
-
-    filtersFromUrl.push({
-      key: 'keyword',
-      operation: '=',
-      value: keyword
-    });
-
-    setContextValue(request, 'filtersFromUrl', filtersFromUrl);
-    next();
-  }
+  setContextValue(request, 'filtersFromUrl', buildFilterFromUrl(request));
+  next();
 };

package/src/modules/catalog/pages/frontStore/catalogSearch/index.js

@@ -1,4 +1,10 @@
+const {
+  translate
+} = require('@evershop/evershop/src/lib/locale/translate/translate');
 const { get } = require('@evershop/evershop/src/lib/util/get');
+const {
+  setContextValue
+} = require('@evershop/evershop/src/modules/graphql/services/contextHelper');
 
 module.exports = (request, response, delegate, next) => {
   // Get the keyword from the request query
@@ -7,6 +13,11 @@ module.exports = (request, response, delegate, next) => {
     // Redirect to the home page if no keyword is not provided
     response.redirect('/');
   } else {
+    setContextValue(request, 'pageInfo', {
+      title: translate('Search results for: ${keyword}', { keyword }),
+      description: translate('Search results for: ${keyword}', { keyword }),
+      url: request.url
+    });
     next();
   }
 };

package/src/modules/catalog/pages/frontStore/categoryView/Filter.jsx

@@ -30,24 +30,40 @@ export default function Filter({
       if (
         currentFilters[i].key === 'page' ||
         currentFilters[i].key === 'limit' ||
-        currentFilters[i].key === 'sortBy' ||
-        currentFilters[i].key === 'sortOrder'
+        currentFilters[i].key === 'ob' ||
+        currentFilters[i].key === 'od'
       ) {
         continue;
       }
-      url.searchParams.delete(currentFilters[i].key);
+      if (currentFilters[i].operation === 'eq') {
+        url.searchParams.delete(currentFilters[i].key);
+      } else {
+        url.searchParams.delete(`${currentFilters[i].key}[operation]`);
+        url.searchParams.delete(`${currentFilters[i].key}[value]`);
+      }
     }
 
     for (let i = 0; i < newFilters.length; i += 1) {
       if (
         newFilters[i].key === 'page' ||
         newFilters[i].key === 'limit' ||
-        newFilters[i].key === 'sortBy' ||
-        newFilters[i].key === 'sortOrder'
+        newFilters[i].key === 'ob' ||
+        newFilters[i].key === 'od'
       ) {
         continue;
       }
-      url.searchParams.append(newFilters[i].key, newFilters[i].value);
+      if (newFilters[i].operation === 'eq') {
+        url.searchParams.append(newFilters[i].key, newFilters[i].value);
+      } else {
+        url.searchParams.append(
+          `${newFilters[i].key}[operation]`,
+          newFilters[i].operation
+        );
+        url.searchParams.append(
+          `${newFilters[i].key}[value]`,
+          newFilters[i].value
+        );
+      }
     }
     // window.location.href = url;
     url.searchParams.delete('ajax', true);

package/src/modules/catalog/pages/frontStore/categoryView/Filter.scss

@@ -50,7 +50,9 @@ input[type='range'] {
 input[type='range'],
 input[type='range']::-webkit-slider-runnable-track,
 input[type='range']::-webkit-slider-thumb {
+  appearance: none;
   -webkit-appearance: none;
+  -moz-appearance: auto;
   background: none;
 }
 input[type='range']::-webkit-slider-runnable-track {

package/src/modules/catalog/pages/frontStore/categoryView/[index]filters.js

@@ -1,111 +1,11 @@
-const { select } = require('@evershop/postgres-query-builder');
-const { pool } = require('@evershop/evershop/src/lib/postgres/connection');
+const {
+  buildFilterFromUrl
+} = require('@evershop/evershop/src/lib/util/buildFilterFromUrl');
 const {
   setContextValue
 } = require('../../../../graphql/services/contextHelper');
 
 module.exports = async (request, response, delegate, next) => {
-  const filterableAttributes = await select()
-    .from('attribute')
-    .where('type', '=', 'select')
-    .and('is_filterable', '=', 1)
-    .execute(pool);
-
-  const { query } = request;
-  if (!query) {
-    setContextValue(request, 'filtersFromUrl', []);
-    next();
-  } else {
-    const filtersFromUrl = [];
-
-    // Price filter
-    // const priceFilter = query.price;
-    const minPrice = Object.keys(query).find((key) => key === 'minPrice');
-    const maxPrice = Object.keys(query).find((key) => key === 'maxPrice');
-    if (minPrice) {
-      filtersFromUrl.push({
-        key: 'minPrice',
-        operation: '=',
-        value: `${query[minPrice]}`
-      });
-    }
-    if (maxPrice) {
-      filtersFromUrl.push({
-        key: 'maxPrice',
-        operation: '=',
-        value: `${query[maxPrice]}`
-      });
-    }
-
-    // Category filter
-    const categoryFilter = Object.keys(query).find((key) => key === 'cat');
-    if (categoryFilter) {
-      filtersFromUrl.push({
-        key: 'cat',
-        operation: '=',
-        value: `${query[categoryFilter]}`
-      });
-    }
-    // Attribute filters
-    Object.keys(query).forEach((key) => {
-      const filter = query[key];
-      const attribute = filterableAttributes.find(
-        (a) => a.attribute_code === key
-      );
-      if (attribute) {
-        if (Array.isArray(filter)) {
-          const values = filter
-            .map((v) => parseInt(v, 10))
-            .filter((v) => Number.isNaN(v) === false);
-          if (values.length > 0) {
-            filtersFromUrl.push({
-              key,
-              operation: '=',
-              value: values.join(',')
-            });
-          }
-        } else {
-          filtersFromUrl.push({
-            key,
-            operation: '=',
-            value: filter
-          });
-        }
-      }
-    });
-
-    const { sortBy } = query;
-    const sortOrder =
-      query.sortOrder && ['ASC', 'DESC'].includes(query.sortOrder.toUpperCase())
-        ? query.sortOrder.toUpperCase()
-        : 'ASC';
-    if (sortBy) {
-      filtersFromUrl.push({
-        key: 'sortBy',
-        operation: '=',
-        value: sortBy.toString()
-      });
-    }
-
-    filtersFromUrl.push({
-      key: 'sortOrder',
-      operation: '=',
-      value: sortOrder
-    });
-    // Paging
-    const page = Number.isNaN(parseInt(query.page, 10))
-      ? '1'
-      : query.page.toString();
-    if (page !== '1') {
-      filtersFromUrl.push({ key: 'page', operation: '=', value: page });
-    }
-    const limit = Number.isNaN(parseInt(query.limit, 10))
-      ? '20'
-      : query.limit.toString(); // TODO: Get from config
-    if (limit !== '20') {
-      filtersFromUrl.push({ key: 'limit', operation: '=', value: limit });
-    }
-    setContextValue(request, 'filtersFromUrl', filtersFromUrl);
-    next();
-  }
+  setContextValue(request, 'filtersFromUrl', buildFilterFromUrl(request));
+  next();
 };

package/src/modules/catalog/pages/frontStore/homepage/FeaturedProducts.jsx

@@ -59,7 +59,7 @@ export const query = `
     collection (code: "homepage") {
       collectionId
       name
-      products (filters: [{key: "limit", operation: "=", value: "4"}]) {
+      products (filters: [{key: "limit", operation: eq, value: "4"}]) {
         items {
           productId
           name

package/src/modules/catalog/pages/frontStore/productView/Form.jsx

@@ -11,6 +11,7 @@ import Button from '@components/common/form/Button';
 import './Form.scss';
 import { useAppDispatch, useAppState } from '@components/common/context/app';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
+import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 
 function ToastMessage({ thumbnail, name, qty, count, cartUrl, toastId }) {
   return (
@@ -43,8 +44,12 @@ function ToastMessage({ thumbnail, name, qty, count, cartUrl, toastId }) {
         </div>
       </div>
       <div className="item-line flex justify-between">
-        <div className="popup-thumbnail flex justify-center">
-          <img src={thumbnail} alt={name} />
+        <div className="popup-thumbnail flex justify-center items-center">
+          {thumbnail ? (
+            <img src={thumbnail} alt={name} />
+          ) : (
+            <ProductNoThumbnail width={25} height={25} />
+          )}
         </div>
         <div className="item-info flex justify-between">
           <div className="name">
@@ -151,7 +156,7 @@ export default function ProductForm({ product, action }) {
             qty={response.data.item.qty}
             count={response.data.count}
             cartUrl="/cart"
-            toastId={toastId}
+            toastId={`${toastId}-${Math.random().toString(36).slice(2)}`}
           />,
           { closeButton: false }
         )