@evershop/evershop 1.0.0 → 1.1.0

package/src/modules/customer/api/createCustomer/[bodyParser]createCustomer.js

@@ -3,7 +3,7 @@ const {
   INTERNAL_SERVER_ERROR
 } = require('@evershop/evershop/src/lib/util/httpStatus');
 const { buildUrl } = require('@evershop/evershop/src/lib/router/buildUrl');
-const { debug } = require('@evershop/evershop/src/lib/log/debuger');
+const { error } = require('@evershop/evershop/src/lib/log/logger');
 const createCustomer = require('../../services/customer/createCustomer');
 
 // eslint-disable-next-line no-unused-vars
@@ -36,7 +36,7 @@ module.exports = async (request, response, delegate, next) => {
     };
     next();
   } catch (e) {
-    debug('critical', e);
+    error(e);
     response.status(INTERNAL_SERVER_ERROR);
     response.json({
       error: {

package/src/modules/customer/api/resetPassword/[bodyParser]resetPassword.js

@@ -4,7 +4,7 @@ const {
   OK,
   INTERNAL_SERVER_ERROR
 } = require('@evershop/evershop/src/lib/util/httpStatus');
-const { debug } = require('@evershop/evershop/src/lib/log/debuger');
+const { error } = require('@evershop/evershop/src/lib/log/logger');
 const crypto = require('crypto');
 
 // eslint-disable-next-line no-unused-vars
@@ -45,7 +45,7 @@ module.exports = async (request, response, delegate, next) => {
     // An extension can add a middleware to this route to send email
     next();
   } catch (e) {
-    debug('critical', e);
+    error(e);
     response.status(INTERNAL_SERVER_ERROR);
     response.json({
       error: {

package/src/modules/customer/api/updatePassword/[bodyParser]updatePassword.js

@@ -9,7 +9,7 @@ const {
   INTERNAL_SERVER_ERROR,
   INVALID_PAYLOAD
 } = require('@evershop/evershop/src/lib/util/httpStatus');
-const { debug } = require('@evershop/evershop/src/lib/log/debuger');
+const { error } = require('@evershop/evershop/src/lib/log/logger');
 const { getConfig } = require('@evershop/evershop/src/lib/util/getConfig');
 const updatePassword = require('../../services/customer/updatePassword');
 
@@ -72,7 +72,7 @@ module.exports = async (request, response, delegate, next) => {
     response.$body = {};
     next();
   } catch (e) {
-    debug('critical', e);
+    error(e);
     response.status(INTERNAL_SERVER_ERROR);
     response.json({
       error: {

package/src/modules/customer/bootstrap.js

@@ -5,6 +5,11 @@ const { select } = require('@evershop/postgres-query-builder');
 const { comparePassword } = require('../../lib/util/passwordHelper');
 const { translate } = require('../../lib/locale/translate/translate');
 const { addProcessor } = require('../../lib/util/registry');
+const registerDefaultCustomerCollectionFilters = require('./services/registerDefaultCustomerCollectionFilters');
+const {
+  defaultPaginationFilters
+} = require('../../lib/util/defaultPaginationFilters');
+const registerDefaultCustomerGroupCollectionFilters = require('./services/registerDefaultCustomerGroupCollectionFilters');
 
 module.exports = () => {
   addProcessor('cartFields', (fields) => {
@@ -155,4 +160,28 @@ module.exports = () => {
     }
   };
   config.util.setModuleDefaults('customer', customerConfig);
+
+  // Reigtering the default filters for customer collection
+  addProcessor(
+    'customerCollectionFilters',
+    registerDefaultCustomerCollectionFilters,
+    1
+  );
+  addProcessor(
+    'customerCollectionFilters',
+    (filters) => [...filters, ...defaultPaginationFilters],
+    2
+  );
+
+  // Reigtering the default filters for customer group collection
+  addProcessor(
+    'customerGroupCollectionFilters',
+    registerDefaultCustomerGroupCollectionFilters,
+    1
+  );
+  addProcessor(
+    'customerGroupCollectionFilters',
+    (filters) => [...filters, ...defaultPaginationFilters],
+    2
+  );
 };

package/src/modules/customer/graphql/types/Customer/Customer.admin.resolvers.js

@@ -1,4 +1,3 @@
-const { select } = require('@evershop/postgres-query-builder');
 const { buildUrl } = require('@evershop/evershop/src/lib/router/buildUrl');
 const { camelCase } = require('@evershop/evershop/src/lib/util/camelCase');
 const {
@@ -9,16 +8,15 @@ const { CustomerCollection } = require('../../../services/CustomerCollection');
 module.exports = {
   Query: {
     customer: async (root, { id }, { pool }) => {
-      const query = select().from('customer');
+      const query = getCustomersBaseQuery();
       query.where('uuid', '=', id);
-
       const customer = await query.load(pool);
       return customer ? camelCase(customer) : null;
     },
     customers: async (_, { filters = [] }) => {
       const query = getCustomersBaseQuery();
       const root = new CustomerCollection(query);
-      await root.init({}, { filters });
+      await root.init(filters);
       return root;
     }
   },

package/src/modules/customer/pages/admin/customerGrid/Grid.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import axios from 'axios';
@@ -7,11 +8,13 @@ import { Checkbox } from '@components/common/form/fields/Checkbox';
 import { useAlertContext } from '@components/common/modal/Alert';
 import StatusRow from '@components/common/grid/rows/StatusRow';
 import BasicRow from '@components/common/grid/rows/BasicRow';
-import BasicColumnHeader from '@components/common/grid/headers/Basic';
-import DropdownColumnHeader from '@components/common/grid/headers/Dropdown';
 import { Card } from '@components/admin/cms/Card';
 import CustomerNameRow from '@components/admin/customer/customerGrid/rows/CustomerName';
 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({ customers = [], selectedIds = [] }) {
   const { openAlert, closeAlert } = useAlertContext();
@@ -127,6 +130,101 @@ export default function CustomerGrid({
 
   return (
     <Card>
+      <Card.Session
+        title={
+          <Form submitBtn={false}>
+            <div className="flex gap-2 justify-center items-center">
+              <Area
+                id="customerGridFilter"
+                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
+                  }
+                ]}
+                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>
@@ -147,9 +245,9 @@ export default function CustomerGrid({
                   // eslint-disable-next-line react/no-unstable-nested-components
                   component: {
                     default: () => (
-                      <BasicColumnHeader
+                      <SortableHeader
                         title="Full Name"
-                        id="full_name"
+                        name="full_name"
                         currentFilters={currentFilters}
                       />
                     )
@@ -160,9 +258,9 @@ export default function CustomerGrid({
                   // eslint-disable-next-line react/no-unstable-nested-components
                   component: {
                     default: () => (
-                      <BasicColumnHeader
+                      <SortableHeader
                         title="Email"
-                        id="email"
+                        email="email"
                         currentFilters={currentFilters}
                       />
                     )
@@ -173,14 +271,10 @@ export default function CustomerGrid({
                   // eslint-disable-next-line react/no-unstable-nested-components
                   component: {
                     default: () => (
-                      <DropdownColumnHeader
+                      <SortableHeader
                         title="Status"
-                        id="status"
+                        name="status"
                         currentFilters={currentFilters}
-                        options={[
-                          { value: 1, text: 'Enabled' },
-                          { value: 0, text: 'Disabled' }
-                        ]}
                       />
                     )
                   },
@@ -190,9 +284,9 @@ export default function CustomerGrid({
                   // eslint-disable-next-line react/no-unstable-nested-components
                   component: {
                     default: () => (
-                      <BasicColumnHeader
+                      <SortableHeader
                         title="Created At"
-                        id="created_at"
+                        name="created_at"
                         currentFilters={currentFilters}
                       />
                     )

package/src/modules/customer/pages/admin/customerGrid/index.js

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

package/src/modules/customer/pages/frontStore/login/LoginForm.jsx

@@ -33,7 +33,6 @@ export default function LoginForm({
               }
             }}
             btnText={_('SIGN IN')}
-            submitBtn={false}
           >
             <Area
               id="loginFormInner"

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

@@ -1,123 +1,42 @@
 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 CustomerCollection {
   constructor(baseQuery) {
     this.baseQuery = baseQuery;
+    this.baseQuery.orderBy('customer.customer_id', 'DESC');
   }
 
-  async init(args, { filters = [] }) {
+  async init(filters = []) {
     const currentFilters = [];
 
-    // Name filter
-    const nameFilter = filters.find((f) => f.key === 'full_name');
-    if (nameFilter) {
-      this.baseQuery.andWhere(
-        'customer.full_name',
-        'ILIKE',
-        `%${nameFilter.value}%`
-      );
-      currentFilters.push({
-        key: 'full_name',
-        operation: '=',
-        value: nameFilter.value
-      });
-    }
-
-    // Email filter
-    const emailFilter = filters.find((f) => f.key === 'email');
-    if (emailFilter) {
-      this.baseQuery.andWhere(
-        'customer.email',
-        'ILIKE',
-        `%${emailFilter.value}%`
-      );
-      currentFilters.push({
-        key: 'email',
-        operation: '=',
-        value: emailFilter.value
-      });
-    }
-
-    // Keyword search
-    const keywordFilter = filters.find((f) => f.key === 'keyword');
-    if (keywordFilter) {
-      this.baseQuery
-        .andWhere('customer.full_name', 'ILIKE', `%${keywordFilter.value}%`)
-        .or('customer.email', 'ILIKE', `%${keywordFilter.value}%`);
-      currentFilters.push({
-        key: 'keyword',
-        operation: '=',
-        value: keywordFilter.value
-      });
-    }
-
-    // Status filter
-    const statusFilter = filters.find((f) => f.key === 'status');
-    if (statusFilter) {
-      this.baseQuery.andWhere('customer.status', '=', statusFilter.value);
-      currentFilters.push({
-        key: 'status',
-        operation: '=',
-        value: statusFilter.value
-      });
-    }
-
-    const sortBy = filters.find((f) => f.key === 'sortBy');
-    const sortOrder = filters.find(
-      (f) =>
-        f.key === 'sortOrder' &&
-        ['ASC', 'DESC', 'asc', 'desc'].includes(f.value)
-    ) || { value: 'DESC' };
+    // Apply the filters
+    const customerCollectionFilters = await getValue(
+      'customerCollectionFilters',
+      []
+    );
 
-    if (sortBy && sortBy.value === 'full_name') {
-      this.baseQuery.orderBy('customer.full_name', sortOrder.value);
-      currentFilters.push({
-        key: 'sortBy',
-        operation: '=',
-        value: sortBy.value
-      });
-    } else if (sortBy && sortBy.value === 'email') {
-      this.baseQuery.orderBy('customer.email', sortOrder.value);
-      currentFilters.push({
-        key: 'sortBy',
-        operation: '=',
-        value: sortBy.value
-      });
-    } else {
-      this.baseQuery.orderBy('customer.customer_id', 'DESC');
-    }
-    if (sortOrder.key) {
-      currentFilters.push({
-        key: 'sortOrder',
-        operation: '=',
-        value: sortOrder.value
-      });
-    }
+    customerCollectionFilters.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
+          );
+        }
+      }
+    });
 
     // Clone the main query for getting total right before doing the paging
     const totalQuery = this.baseQuery.clone();
     totalQuery.select('COUNT(customer.customer_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;
   }

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

@@ -1,5 +1,6 @@
 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 CustomerGroupCollection {
   constructor(baseQuery) {
@@ -9,82 +10,32 @@ class CustomerGroupCollection {
   async init(args, { filters = [] }) {
     const currentFilters = [];
 
-    // Name filter
-    const nameFilter = filters.find((f) => f.key === 'group_name');
-    if (nameFilter) {
-      this.baseQuery.andWhere(
-        'customer_group.group_name',
-        'ILIKE',
-        `%${nameFilter.value}%`
-      );
-      currentFilters.push({
-        key: 'group_name',
-        operation: '=',
-        value: nameFilter.value
-      });
-    }
-
-    // Keyword search
-    const keywordFilter = filters.find((f) => f.key === 'keyword');
-    if (keywordFilter) {
-      this.baseQuery.andWhere(
-        'customer_group.group_name',
-        'ILIKE',
-        `%${keywordFilter.value}%`
-      );
-      currentFilters.push({
-        key: 'keyword',
-        operation: '=',
-        value: keywordFilter.value
-      });
-    }
-
-    const sortBy = filters.find((f) => f.key === 'sortBy');
-    const sortOrder = filters.find(
-      (f) =>
-        f.key === 'sortOrder' &&
-        ['ASC', 'DESC', 'asc', 'desc'].includes(f.value)
-    ) || { value: 'DESC' };
+    // Apply the filters
+    const customerGroupCollectionFilters = await getValue(
+      'customerGroupCollectionFilters',
+      []
+    );
 
-    if (sortBy && sortBy.value === 'group_name') {
-      this.baseQuery.orderBy('customer_group.group_name', sortOrder.value);
-      currentFilters.push({
-        key: 'sortBy',
-        operation: '=',
-        value: sortBy.value
-      });
-    } else {
-      this.baseQuery.orderBy('customer_group.customer_group_id', 'DESC');
-    }
-    if (sortOrder.key) {
-      currentFilters.push({
-        key: 'sortOrder',
-        operation: '=',
-        value: sortOrder.value
-      });
-    }
+    customerGroupCollectionFilters.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
+          );
+        }
+      }
+    });
 
     // Clone the main query for getting total right before doing the paging
     const totalQuery = this.baseQuery.clone();
     totalQuery.select('COUNT(*)', 'total');
     totalQuery.removeOrderBy();
-    // Paging
-    const page = filters.find((f) => f.key === 'page') || { value: 1 };
-    const limit = filters.find((f) => f.key === 'limit') || { 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;
   }

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

@@ -0,0 +1,90 @@
+const {
+  OPERATION_MAP
+} = require('@evershop/evershop/src/lib/util/filterOperationMapp');
+const { getValueSync } = require('@evershop/evershop/src/lib/util/registry');
+
+module.exports = async function registerDefaultCustomerCollectionFilters() {
+  // List of default supported filters
+  const defaultFilters = [
+    {
+      key: 'keyword',
+      operation: ['eq'],
+      callback: (query, operation, value, currentFilters) => {
+        query
+          .andWhere('customer.full_name', 'ILIKE', `%${value}%`)
+          .or('customer.email', 'ILIKE', `%${value}%`);
+        currentFilters.push({
+          key: 'keyword',
+          operation,
+          value
+        });
+      }
+    },
+    {
+      key: 'full_name',
+      operation: ['like', 'nlike'],
+      callback: (query, operation, value, currentFilters) => {
+        query.andWhere(
+          'customer.full_name',
+          OPERATION_MAP[operation],
+          `%${value}%`
+        );
+        currentFilters.push({
+          key: 'full_name',
+          operation,
+          value
+        });
+      }
+    },
+    {
+      key: 'email',
+      operation: ['eq', 'like', 'nlike'],
+      callback: (query, operation, value, currentFilters) => {
+        query.andWhere('customer.email', OPERATION_MAP[operation], value);
+        currentFilters.push({
+          key: 'email',
+          operation,
+          value
+        });
+      }
+    },
+    {
+      key: 'status',
+      operation: ['eq'],
+      callback: (query, operation, value, currentFilters) => {
+        query.andWhere('customer.status', OPERATION_MAP[operation], value);
+        currentFilters.push({
+          key: 'status',
+          operation,
+          value
+        });
+      }
+    },
+    {
+      key: 'ob',
+      operation: ['eq'],
+      callback: (query, operation, value, currentFilters) => {
+        const customerCollectionSortBy = getValueSync(
+          'customerCollectionSortBy',
+          {
+            email: (query) => query.orderBy('customer.email'),
+            name: (query) => query.orderBy('customer.full_name'),
+            status: (query) => query.orderBy('customer.status'),
+            created_at: (query) => query.orderBy('customer.created_at')
+          }
+        );
+
+        if (customerCollectionSortBy[value]) {
+          customerCollectionSortBy[value](query, operation);
+          currentFilters.push({
+            key: 'ob',
+            operation,
+            value
+          });
+        }
+      }
+    }
+  ];
+
+  return defaultFilters;
+};