@evershop/evershop 1.0.0 → 1.1.0

package/src/modules/customer/services/registerDefaultCustomerGroupCollectionFilters.js

@@ -0,0 +1,50 @@
+const {
+  OPERATION_MAP
+} = require('@evershop/evershop/src/lib/util/filterOperationMapp');
+const { getValueSync } = require('@evershop/evershop/src/lib/util/registry');
+
+module.exports =
+  async function registerDefaultCustomerGroupCollectionFilters() {
+    // List of default supported filters
+    const defaultFilters = [
+      {
+        key: 'name',
+        operation: ['like'],
+        callback: (query, operation, value, currentFilters) => {
+          query.andWhere(
+            'customer_group.group_name',
+            OPERATION_MAP[operation],
+            `%${value}%`
+          );
+          currentFilters.push({
+            key: 'name',
+            operation,
+            value
+          });
+        }
+      },
+      {
+        key: 'ob',
+        operation: ['eq'],
+        callback: (query, operation, value, currentFilters) => {
+          const customerGroupCollectionSortBy = getValueSync(
+            'customerGroupCollectionSortBy',
+            {
+              name: (query) => query.orderBy('customer_group.group_name')
+            }
+          );
+
+          if (customerGroupCollectionSortBy[value]) {
+            customerGroupCollectionSortBy[value](query, operation);
+            currentFilters.push({
+              key: 'ob',
+              operation,
+              value
+            });
+          }
+        }
+      }
+    ];
+
+    return defaultFilters;
+  };

package/src/modules/graphql/pages/global/[bodyParser]buildQuery[graphql].js

@@ -8,7 +8,7 @@ const {
 } = require('@evershop/evershop/src/lib/webpack/getRouteBuildPath');
 const { CONSTANTS } = require('@evershop/evershop/src/lib/helpers');
 const { getRoutes } = require('@evershop/evershop/src/lib/router/Router');
-const { error } = require('@evershop/evershop/src/lib/log/debuger');
+const { error } = require('@evershop/evershop/src/lib/log/logger');
 // eslint-disable-next-line no-unused-vars
 const { getContextValue } = require('../../services/contextHelper');
 

package/src/modules/graphql/pages/global/[buildQuery]graphql[notification].js

@@ -1,7 +1,7 @@
 const { execute } = require('graphql');
 const { parse } = require('graphql');
 const { validate } = require('graphql/validation');
-const { debug } = require('@evershop/evershop/src/lib/log/debuger');
+const { debug } = require('@evershop/evershop/src/lib/log/logger');
 const adminSchema = require('../../services/buildSchema');
 const storeFrontSchema = require('../../services/buildStoreFrontSchema');
 const { getContext } = require('../../services/contextHelper');

package/src/modules/graphql/services/graphqlMiddleware.js

@@ -38,7 +38,7 @@ module.exports.graphqlMiddleware = (schema) =>
         });
         if (data.errors) {
           // Create an Error instance with message and stack trace
-          next(new Error(data.errors[0].message));
+          next(data.errors[0]);
         } else {
           response.status(OK).json({
             data: data.data

package/src/modules/oms/bootstrap.js

@@ -1,4 +1,9 @@
 const config = require('config');
+const registerDefaultOrderCollectionFilters = require('./services/registerDefaultOrderCollectionFilters');
+const {
+  defaultPaginationFilters
+} = require('../../lib/util/defaultPaginationFilters');
+const { addProcessor } = require('../../lib/util/registry');
 
 module.exports = () => {
   // Default order status and carriers configuration
@@ -57,4 +62,16 @@ module.exports = () => {
     }
   };
   config.util.setModuleDefaults('oms', orderStatusConfig);
+
+  // Reigtering the default filters for attribute collection
+  addProcessor(
+    'orderCollectionFilters',
+    registerDefaultOrderCollectionFilters,
+    1
+  );
+  addProcessor(
+    'orderCollectionFilters',
+    (filters) => [...filters, ...defaultPaginationFilters],
+    2
+  );
 };

package/src/modules/oms/graphql/types/Order/Order.admin.resolvers.js

@@ -8,7 +8,7 @@ module.exports = {
     orders: async (_, { filters = [] }) => {
       const query = getOrdersBaseQuery();
       const root = new OrderCollection(query);
-      await root.init({}, { filters });
+      await root.init(filters);
       return root;
     }
   },

package/src/modules/oms/graphql/types/Order/Order.resolvers.js

@@ -2,11 +2,12 @@ const { select } = require('@evershop/postgres-query-builder');
 const { camelCase } = require('@evershop/evershop/src/lib/util/camelCase');
 const { getConfig } = require('@evershop/evershop/src/lib/util/getConfig');
 const { buildUrl } = require('@evershop/evershop/src/lib/router/buildUrl');
+const { getOrdersBaseQuery } = require('../../../services/getOrdersBaseQuery');
 
 module.exports = {
   Query: {
     order: async (_, { uuid }, { pool }) => {
-      const query = select().from('order');
+      const query = getOrdersBaseQuery();
       query.where('uuid', '=', uuid);
       const order = await query.load(pool);
       if (!order) {

package/src/modules/oms/pages/admin/orderGrid/Grid.jsx

@@ -7,16 +7,16 @@ import Pagination from '@components/common/grid/Pagination';
 import { Checkbox } from '@components/common/form/fields/Checkbox';
 import { useAlertContext } from '@components/common/modal/Alert';
 import { Card } from '@components/admin/cms/Card';
-import BasicColumnHeader from '@components/common/grid/headers/Basic';
-import FromToColumnHeader from '@components/common/grid/headers/FromTo';
-import ShipmentStatusColumnHeader from '@components/admin/oms/orderGrid/headers/ShipmentStatusColumnHeader';
-import PaymentStatusColumnHeader from '@components/admin/oms/orderGrid/headers/PaymentStatusColumnHeader';
 import OrderNumberRow from '@components/admin/oms/orderGrid/rows/OrderNumberRow';
 import BasicRow from '@components/common/grid/rows/BasicRow';
 import ShipmentStatusRow from '@components/admin/oms/orderGrid/rows/ShipmentStatus';
 import PaymentStatusRow from '@components/admin/oms/orderGrid/rows/PaymentStatus';
 import TotalRow from '@components/admin/oms/orderGrid/rows/TotalRow';
 import CreateAt from '@components/admin/customer/customerGrid/rows/CreateAt';
+import { Form } from '@components/common/form/Form';
+import { Field } from '@components/common/form/Field';
+import SortableHeader from '@components/common/grid/headers/Sortable';
+import Filter from '@components/common/list/Filter';
 
 function Actions({ orders = [], selectedIds = [] }) {
   const { openAlert, closeAlert } = useAlertContext();
@@ -104,8 +104,8 @@ Actions.propTypes = {
 
 export default function OrderGrid({
   orders: { items: orders, total, currentFilters = [] },
-  shipmentStatusList,
-  paymentStatusList
+  paymentStatusList,
+  shipmentStatusList
 }) {
   const page = currentFilters.find((filter) => filter.key === 'page')
     ? currentFilters.find((filter) => filter.key === 'page').value
@@ -119,6 +119,125 @@ export default function OrderGrid({
 
   return (
     <Card>
+      <Card.Session
+        title={
+          <Form submitBtn={false}>
+            <div className="flex gap-2 justify-center items-center">
+              <Area
+                id="orderGridFilter"
+                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={paymentStatusList.map((status) => ({
+                            label: status.name,
+                            value: status.code,
+                            onSelect: () => {
+                              const url = new URL(document.location);
+                              url.searchParams.set(
+                                'payment_status',
+                                status.code
+                              );
+                              window.location.href = url;
+                            }
+                          }))}
+                          selectedOption={
+                            currentFilters.find(
+                              (f) => f.key === 'payment_status'
+                            )
+                              ? currentFilters.find(
+                                  (f) => f.key === 'payment_status'
+                                ).value
+                              : undefined
+                          }
+                          title="Payment status"
+                        />
+                      )
+                    },
+                    sortOrder: 10
+                  },
+                  {
+                    component: {
+                      default: () => (
+                        <Filter
+                          options={shipmentStatusList.map((status) => ({
+                            label: status.name,
+                            value: status.code,
+                            onSelect: () => {
+                              const url = new URL(document.location);
+                              url.searchParams.set(
+                                'shipment_status',
+                                status.code
+                              );
+                              window.location.href = url;
+                            }
+                          }))}
+                          selectedOption={
+                            currentFilters.find(
+                              (f) => f.key === 'shipment_status'
+                            )
+                              ? currentFilters.find(
+                                  (f) => f.key === 'shipment_status'
+                                ).value
+                              : undefined
+                          }
+                          title="Shipment status"
+                        />
+                      )
+                    },
+                    sortOrder: 15
+                  }
+                ]}
+                currentFilters={currentFilters}
+              />
+            </div>
+          </Form>
+        }
+        actions={[
+          {
+            variant: 'interactive',
+            name: 'Clear filter',
+            onAction: () => {
+              // Just get the url and remove all query params
+              const url = new URL(document.location);
+              url.search = '';
+              window.location.href = url.href;
+            }
+          }
+        ]}
+      />
       <table className="listing sticky">
         <thead>
           <tr>
@@ -141,9 +260,9 @@ export default function OrderGrid({
                 {
                   component: {
                     default: () => (
-                      <BasicColumnHeader
+                      <SortableHeader
                         title="Order Number"
-                        id="orderNumber"
+                        name="number"
                         currentFilters={currentFilters}
                       />
                     )
@@ -153,9 +272,9 @@ export default function OrderGrid({
                 {
                   component: {
                     default: () => (
-                      <FromToColumnHeader
+                      <SortableHeader
                         title="Date"
-                        id="createdAt"
+                        name="created_at"
                         currentFilters={currentFilters}
                       />
                     )
@@ -165,9 +284,9 @@ export default function OrderGrid({
                 {
                   component: {
                     default: () => (
-                      <BasicColumnHeader
+                      <SortableHeader
                         title="Customer Email"
-                        id="customerEmail"
+                        name="email"
                         currentFilters={currentFilters}
                       />
                     )
@@ -177,10 +296,9 @@ export default function OrderGrid({
                 {
                   component: {
                     default: () => (
-                      <ShipmentStatusColumnHeader
+                      <SortableHeader
                         title="Shipment Status"
-                        id="shipmentStatus"
-                        shipmentStatusList={shipmentStatusList}
+                        name="shipment_status"
                         currentFilters={currentFilters}
                       />
                     )
@@ -190,10 +308,9 @@ export default function OrderGrid({
                 {
                   component: {
                     default: () => (
-                      <PaymentStatusColumnHeader
+                      <SortableHeader
                         title="Payment Status"
-                        id="paymentStatus"
-                        paymentStatusList={paymentStatusList}
+                        name="payment_status"
                         currentFilters={currentFilters}
                       />
                     )
@@ -203,9 +320,9 @@ export default function OrderGrid({
                 {
                   component: {
                     default: () => (
-                      <FromToColumnHeader
+                      <SortableHeader
                         title="Total"
-                        id="grandTotal"
+                        name="total"
                         currentFilters={currentFilters}
                       />
                     )
@@ -308,22 +425,6 @@ export default function OrderGrid({
 }
 
 OrderGrid.propTypes = {
-  paymentStatusList: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-      badge: PropTypes.string.isRequired,
-      progress: PropTypes.number.isRequired
-    })
-  ).isRequired,
-  shipmentStatusList: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-      badge: PropTypes.string.isRequired,
-      progress: PropTypes.number.isRequired
-    })
-  ).isRequired,
   orders: PropTypes.shape({
     items: PropTypes.arrayOf(
       PropTypes.shape({
@@ -364,12 +465,16 @@ OrderGrid.propTypes = {
       })
     ).isRequired
   }).isRequired,
-  total: PropTypes.number.isRequired,
-  currentFilters: PropTypes.arrayOf(
+  paymentStatusList: PropTypes.arrayOf(
+    PropTypes.shape({
+      code: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  shipmentStatusList: PropTypes.arrayOf(
     PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      operation: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired
+      code: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
     })
   ).isRequired
 };
@@ -417,17 +522,13 @@ export const query = `
         value
       }
     }
-    shipmentStatusList {
-      text: name
-      value: code
-      badge
-      progress
-    }
     paymentStatusList {
-      text: name
-      value: code
-      badge
-      progress
+      code
+      name
+    }
+    shipmentStatusList {
+      code
+      name
     }
   }
 `;

package/src/modules/oms/pages/admin/orderGrid/index.js

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

package/src/modules/oms/services/OrderCollection.js

@@ -1,158 +1,38 @@
 const { camelCase } = require('@evershop/evershop/src/lib/util/camelCase');
 const { pool } = require('@evershop/evershop/src/lib/postgres/connection');
+const { getValue } = require('@evershop/evershop/src/lib/util/registry');
 
 class OrderCollection {
   constructor(baseQuery) {
     this.baseQuery = baseQuery;
+    this.baseQuery.orderBy('order.order_id', 'DESC');
   }
 
-  async init(args, { filters = [] }) {
+  async init(filters = []) {
     const currentFilters = [];
 
-    // Number filter
-    const numberFilter = filters.find((f) => f.key === 'orderNumber');
-    if (numberFilter) {
-      this.baseQuery.andWhere(
-        'order.order_number',
-        'ILIKE',
-        `%${numberFilter.value}%`
-      );
-      currentFilters.push({
-        key: 'orderNumber',
-        operation: '=',
-        value: numberFilter.value
-      });
-    }
-
-    // Email filter
-    const customerEmailFilter = filters.find((f) => f.key === 'customerEmail');
-    if (customerEmailFilter) {
-      this.baseQuery.andWhere(
-        'order.customer_email',
-        'ILIKE',
-        `%${customerEmailFilter.value}%`
-      );
-      currentFilters.push({
-        key: 'customerEmail',
-        operation: '=',
-        value: customerEmailFilter.value
-      });
-    }
-
-    // Keyword search
-    const keywordFilter = filters.find((f) => f.key === 'keyword');
-    if (keywordFilter) {
-      this.baseQuery
-        .andWhere('order.customer_email', 'ILIKE', `%${keywordFilter.value}%`)
-        .or('order.order_number', 'ILIKE', `%${keywordFilter.value}%`)
-        .or('order.customer_full_name', 'ILIKE', `%${keywordFilter.value}%`);
-      currentFilters.push({
-        key: 'keyword',
-        operation: '=',
-        value: keywordFilter.value
-      });
-    }
-
-    // Status filter
-    const shipmentStatusFilter = filters.find(
-      (f) => f.key === 'shipmentStatus'
-    );
-    if (shipmentStatusFilter) {
-      this.baseQuery.andWhere(
-        'order.shipment_status',
-        '=',
-        shipmentStatusFilter.value
-      );
-      currentFilters.push({
-        key: 'shipmentStatus',
-        operation: '=',
-        value: shipmentStatusFilter.value
-      });
-    }
-
-    // Status filter
-    const paymentStatusFilter = filters.find((f) => f.key === 'paymentStatus');
-    if (paymentStatusFilter) {
-      this.baseQuery.andWhere(
-        'order.payment_status',
-        '=',
-        paymentStatusFilter.value
-      );
-      currentFilters.push({
-        key: 'paymentStatus',
-        operation: '=',
-        value: paymentStatusFilter.value
-      });
-    }
-
-    // Order Total filter
-    const totalFilter = filters.find((f) => f.key === 'total');
-    if (totalFilter) {
-      const [min, max] = totalFilter.value.split('-').map((v) => parseFloat(v));
-      let currentTotalFilter;
-      if (Number.isNaN(min) === false) {
-        this.baseQuery.andWhere('order.grand_total', '>=', min);
-        currentTotalFilter = { key: 'total', value: `${min}` };
-      }
-
-      if (Number.isNaN(max) === false) {
-        this.baseQuery.andWhere('order.grand_total', '<=', max);
-        currentTotalFilter = {
-          key: 'total',
-          value: `${currentTotalFilter.value}-${max}`
-        };
+    // Apply the filters
+    const orderCollectionFilters = await getValue('orderCollectionFilters', []);
+    orderCollectionFilters.forEach((filter) => {
+      const check = filters.find((f) => f.key === filter.key);
+      if (check) {
+        if (filter.operation.includes(check.operation)) {
+          filter.callback(
+            this.baseQuery,
+            check.operation,
+            check.value,
+            currentFilters
+          );
+        }
       }
-      if (currentTotalFilter) {
-        currentFilters.push(currentTotalFilter);
-      }
-    }
-
-    const sortBy = filters.find((f) => f.key === 'sortBy');
-    const sortOrder = filters.find(
-      (f) => f.key === 'sortOrder' && ['ASC', 'DESC'].includes(f.value)
-    ) || { value: 'ASC' };
-
-    if (sortBy && sortBy.value === 'orderNumber') {
-      this.baseQuery.orderBy('order.order_number', sortOrder.value);
-      currentFilters.push({
-        key: 'sortBy',
-        operation: '=',
-        value: sortBy.value
-      });
-    } else {
-      this.baseQuery.orderBy('order.order_id', 'DESC');
-    }
-    if (sortOrder.key) {
-      currentFilters.push({
-        key: 'sortOrder',
-        operation: '=',
-        value: sortOrder.value
-      });
-    }
+    });
 
     // Clone the main query for getting total right before doing the paging
     const totalQuery = this.baseQuery.clone();
     totalQuery.select('COUNT("order".order_id)', 'total');
     totalQuery.removeOrderBy();
-    // Paging
-    const page = filters.find((f) => f.key === 'page') || { value: 1 };
-    const limit = filters.find((f) => f.key === 'limit' && f.value > 0) || {
-      value: 20
-    }; // TODO: Get from the config
-    currentFilters.push({
-      key: 'page',
-      operation: '=',
-      value: page.value
-    });
-    currentFilters.push({
-      key: 'limit',
-      operation: '=',
-      value: limit.value
-    });
-    this.baseQuery.limit(
-      (page.value - 1) * parseInt(limit.value, 10),
-      parseInt(limit.value, 10)
-    );
+    totalQuery.removeLimit();
+
     this.currentFilters = currentFilters;
     this.totalQuery = totalQuery;
   }