@evershop/evershop 1.0.0 → 1.1.0

package/src/modules/catalog/pages/admin/attributeGrid/Grid.jsx

@@ -12,9 +12,11 @@ import AttributeNameRow from '@components/admin/catalog/attributeGrid/rows/Attri
 import GroupRow from '@components/admin/catalog/attributeGrid/rows/GroupRow';
 import BasicRow from '@components/common/grid/rows/BasicRow';
 import YesNoRow from '@components/common/grid/rows/YesNoRow';
-import BasicColumnHeader from '@components/common/grid/headers/Basic';
-import GroupHeader from '@components/admin/catalog/attributeGrid/headers/GroupHeader';
-import DropdownColumnHeader from '@components/common/grid/headers/Dropdown';
+import SortableHeader from '@components/common/grid/headers/Sortable';
+import DummyColumnHeader from '@components/common/grid/headers/Dummy';
+import { Form } from '@components/common/form/Form';
+import { Field } from '@components/common/form/Field';
+import { toast } from 'react-toastify';
 
 function Actions({ attributes = [], selectedIds = [] }) {
   const { openAlert, closeAlert } = useAlertContext();
@@ -22,13 +24,29 @@ function Actions({ attributes = [], selectedIds = [] }) {
 
   const deleteAttributes = async () => {
     setIsLoading(true);
-    const promises = attributes
-      .filter((attribute) => selectedIds.includes(attribute.uuid))
-      .map((attribute) => axios.delete(attribute.deleteApi));
-    await Promise.all(promises);
-    setIsLoading(false);
-    // Refresh the page
-    window.location.reload();
+    try {
+      const promises = attributes
+        .filter((attribute) => selectedIds.includes(attribute.uuid))
+        .map((attribute) =>
+          axios.delete(attribute.deleteApi, {
+            validateStatus: () => true
+          })
+        );
+      const responses = await Promise.allSettled(promises);
+      setIsLoading(false);
+      responses.forEach((response) => {
+        // Get the axios response status code
+        const { status } = response.value;
+        if (status !== 200) {
+          throw new Error(response.value.data.error.message);
+        }
+      });
+      // Refresh the page
+      window.location.reload();
+    } catch (e) {
+      setIsLoading(false);
+      toast.error(e.message);
+    }
   };
 
   const actions = [
@@ -107,6 +125,45 @@ export default function AttributeGrid({
 
   return (
     <Card>
+      <Card.Session
+        title={
+          <Form submitBtn={false}>
+            <Field
+              type="text"
+              id="name"
+              placeholder="Search"
+              value={currentFilters.find((f) => f.key === 'name')?.value}
+              onKeyPress={(e) => {
+                // If the user press enter, we should submit the form
+                if (e.key === 'Enter') {
+                  const url = new URL(document.location);
+                  const name = document.getElementById('name')?.value;
+                  if (name) {
+                    url.searchParams.set('name[operation]', 'like');
+                    url.searchParams.set('name[value]', name);
+                  } else {
+                    url.searchParams.delete('name[operation]');
+                    url.searchParams.delete('name[value]');
+                  }
+                  window.location.href = url;
+                }
+              }}
+            />
+          </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>
@@ -127,8 +184,8 @@ export default function AttributeGrid({
                 {
                   component: {
                     default: () => (
-                      <BasicColumnHeader
-                        id="name"
+                      <SortableHeader
+                        name="name"
                         title="Attribute Name"
                         currentFilters={currentFilters}
                       />
@@ -138,25 +195,17 @@ export default function AttributeGrid({
                 },
                 {
                   component: {
-                    default: () => (
-                      <GroupHeader id="group" currentFilters={currentFilters} />
-                    )
+                    default: () => <DummyColumnHeader title="Groups" />
                   },
                   sortOrder: 15
                 },
                 {
                   component: {
                     default: () => (
-                      <DropdownColumnHeader
-                        id="type"
+                      <SortableHeader
+                        name="type"
                         title="Type"
                         currentFilters={currentFilters}
-                        options={[
-                          { value: 'text', text: 'Text' },
-                          { value: 'select', text: 'Select' },
-                          { value: 'multiselect', text: 'Multi Select' },
-                          { value: 'textarea', text: 'Text Area' }
-                        ]}
                       />
                     )
                   },
@@ -165,14 +214,10 @@ export default function AttributeGrid({
                 {
                   component: {
                     default: () => (
-                      <DropdownColumnHeader
-                        id="isRequired"
+                      <SortableHeader
+                        name="is_required"
                         title="Is Required?"
                         currentFilters={currentFilters}
-                        options={[
-                          { value: 1, text: 'Yes' },
-                          { value: 0, text: 'No' }
-                        ]}
                       />
                     )
                   },
@@ -181,14 +226,10 @@ export default function AttributeGrid({
                 {
                   component: {
                     default: () => (
-                      <DropdownColumnHeader
-                        id="isFilterable"
+                      <SortableHeader
+                        name="is_filterable"
                         title="Is Filterable?"
                         currentFilters={currentFilters}
-                        options={[
-                          { value: 1, text: 'Yes' },
-                          { value: 0, text: 'No' }
-                        ]}
                       />
                     )
                   },
@@ -238,7 +279,7 @@ export default function AttributeGrid({
                   },
                   {
                     component: {
-                      default: () => <GroupRow groups={a.groups} />
+                      default: () => <GroupRow groups={a.groups?.items} />
                     },
                     sortOrder: 15
                   },
@@ -329,9 +370,11 @@ export const query = `
         updateApi
         deleteApi
         groups {
-          attributeGroupId
-          groupName
-          updateApi
+          items {
+            attributeGroupId
+            groupName
+            updateApi
+          }
         }
       }
       total

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

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

package/src/modules/catalog/pages/admin/categoryEdit/Products.jsx

@@ -46,13 +46,13 @@ export default function Products({ category: { categoryId, addProductApi } }) {
       id: parseInt(categoryId, 10),
       filters: !keyword
         ? [
-            { key: 'page', operation: '=', value: page.toString() },
-            { key: 'limit', operation: '=', value: '10' }
+            { key: 'page', operation: 'eq', value: page.toString() },
+            { key: 'limit', operation: 'eq', value: '10' }
           ]
         : [
-            { key: 'page', operation: '=', value: page.toString() },
-            { key: 'limit', operation: '=', value: '10' },
-            { key: 'keyword', operation: '=', value: keyword }
+            { key: 'page', operation: 'eq', value: page.toString() },
+            { key: 'limit', operation: 'eq', value: '10' },
+            { key: 'keyword', operation: 'eq', value: keyword }
           ]
     },
     pause: true

package/src/modules/catalog/pages/admin/categoryGrid/Grid.jsx

@@ -10,10 +10,11 @@ import { useAlertContext } from '@components/common/modal/Alert';
 import { Checkbox } from '@components/common/form/fields/Checkbox';
 import { Card } from '@components/admin/cms/Card';
 import CategoryNameRow from '@components/admin/catalog/categoryGrid/rows/CategoryName';
-import BasicColumnHeader from '@components/common/grid/headers/Basic';
-import DropdownColumnHeader from '@components/common/grid/headers/Dropdown';
 import StatusRow from '@components/common/grid/rows/StatusRow';
 import YesNoRow from '@components/common/grid/rows/YesNoRow';
+import SortableHeader from '@components/common/grid/headers/Sortable';
+import { Form } from '@components/common/form/Form';
+import { Field } from '@components/common/form/Field';
 
 function Actions({ categories = [], selectedIds = [] }) {
   const { openAlert, closeAlert } = useAlertContext();
@@ -106,6 +107,45 @@ export default function CategoryGrid({
 
   return (
     <Card>
+      <Card.Session
+        title={
+          <Form submitBtn={false}>
+            <Field
+              type="text"
+              id="name"
+              placeholder="Search"
+              value={currentFilters.find((f) => f.key === 'name')?.value}
+              onKeyPress={(e) => {
+                // If the user press enter, we should submit the form
+                if (e.key === 'Enter') {
+                  const url = new URL(document.location);
+                  const name = document.getElementById('name')?.value;
+                  if (name) {
+                    url.searchParams.set('name[operation]', 'like');
+                    url.searchParams.set('name[value]', name);
+                  } else {
+                    url.searchParams.delete('name[operation]');
+                    url.searchParams.delete('name[value]');
+                  }
+                  window.location.href = url;
+                }
+              }}
+            />
+          </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>
@@ -128,9 +168,9 @@ export default function CategoryGrid({
                 {
                   component: {
                     default: () => (
-                      <BasicColumnHeader
+                      <SortableHeader
                         title="Category Name"
-                        id="name"
+                        name="name"
                         currentFilters={currentFilters}
                       />
                     )
@@ -140,14 +180,10 @@ export default function CategoryGrid({
                 {
                   component: {
                     default: () => (
-                      <DropdownColumnHeader
-                        id="status"
+                      <SortableHeader
+                        name="status"
                         title="Status"
                         currentFilters={currentFilters}
-                        options={[
-                          { value: 1, text: 'Enabled' },
-                          { value: 0, text: 'Disabled' }
-                        ]}
                       />
                     )
                   },
@@ -156,14 +192,10 @@ export default function CategoryGrid({
                 {
                   component: {
                     default: () => (
-                      <DropdownColumnHeader
-                        id="includeInNav"
+                      <SortableHeader
+                        name="include_in_nav"
                         title="Include In Menu"
                         currentFilters={currentFilters}
-                        options={[
-                          { value: 1, text: 'Yes' },
-                          { value: 0, text: 'No' }
-                        ]}
                       />
                     )
                   },

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

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

package/src/modules/catalog/pages/admin/collectionEdit/Products.jsx

@@ -46,13 +46,13 @@ export default function Products({ collection: { code, addProductApi } }) {
       code,
       filters: !keyword
         ? [
-            { key: 'page', operation: '=', value: page.toString() },
-            { key: 'limit', operation: '=', value: '10' }
+            { key: 'page', operation: 'eq', value: page.toString() },
+            { key: 'limit', operation: 'eq', value: '10' }
           ]
         : [
-            { key: 'page', operation: '=', value: page.toString() },
-            { key: 'limit', operation: '=', value: '10' },
-            { key: 'keyword', operation: '=', value: keyword }
+            { key: 'page', operation: 'eq', value: page.toString() },
+            { key: 'limit', operation: 'eq', value: '10' },
+            { key: 'keyword', operation: 'eq', value: keyword }
           ]
     },
     pause: true

package/src/modules/catalog/pages/admin/collectionGrid/Grid.jsx

@@ -10,9 +10,11 @@ import { useAlertContext } from '@components/common/modal/Alert';
 import { Checkbox } from '@components/common/form/fields/Checkbox';
 import { Card } from '@components/admin/cms/Card';
 import CollectionNameRow from '@components/admin/catalog/collectionGrid/rows/CollectionNameRow';
-import BasicColumnHeader from '@components/common/grid/headers/Basic';
 import TextRow from '@components/common/grid/rows/TextRow';
 import DummyColumnHeader from '@components/common/grid/headers/Dummy';
+import SortableHeader from '@components/common/grid/headers/Sortable';
+import { Form } from '@components/common/form/Form';
+import { Field } from '@components/common/form/Field';
 
 function Actions({ collections = [], selectedIds = [] }) {
   const { openAlert, closeAlert } = useAlertContext();
@@ -106,6 +108,45 @@ export default function CollectionGrid({
   return (
     <div className="w-2/3" style={{ margin: '0 auto' }}>
       <Card>
+        <Card.Session
+          title={
+            <Form submitBtn={false}>
+              <Field
+                type="text"
+                id="name"
+                placeholder="Search"
+                value={currentFilters.find((f) => f.key === 'name')?.value}
+                onKeyPress={(e) => {
+                  // If the user press enter, we should submit the form
+                  if (e.key === 'Enter') {
+                    const url = new URL(document.location);
+                    const name = document.getElementById('name')?.value;
+                    if (name) {
+                      url.searchParams.set('name[operation]', 'like');
+                      url.searchParams.set('name[value]', name);
+                    } else {
+                      url.searchParams.delete('name[operation]');
+                      url.searchParams.delete('name[value]');
+                    }
+                    window.location.href = url;
+                  }
+                }}
+              />
+            </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>
@@ -140,9 +181,9 @@ export default function CollectionGrid({
                   {
                     component: {
                       default: () => (
-                        <BasicColumnHeader
+                        <SortableHeader
                           title="Collection Name"
-                          id="name"
+                          name="name"
                           currentFilters={currentFilters}
                         />
                       )
@@ -152,9 +193,9 @@ export default function CollectionGrid({
                   {
                     component: {
                       default: () => (
-                        <BasicColumnHeader
+                        <SortableHeader
                           title="Code"
-                          id="code"
+                          name="code"
                           currentFilters={currentFilters}
                         />
                       )

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

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

package/src/modules/catalog/pages/admin/productEdit+productNew/Attributes.jsx

@@ -66,7 +66,7 @@ export default function Attributes({ product, groups: { items } }) {
       <Card.Session title="Attributes">
         <table className="table table-auto">
           <tbody>
-            {currentGroup.attributes.map((attribute, index) => {
+            {currentGroup.attributes.items.map((attribute, index) => {
               const valueIndex = attributeIndex.find(
                 (idx) => idx.attributeId === attribute.attributeId
               );
@@ -210,21 +210,23 @@ Attributes.propTypes = {
       PropTypes.shape({
         groupId: PropTypes.number,
         groupName: PropTypes.string,
-        attributes: PropTypes.arrayOf(
-          PropTypes.shape({
-            attributeId: PropTypes.number,
-            attributeName: PropTypes.string,
-            attributeCode: PropTypes.string,
-            type: PropTypes.string,
-            isRequired: PropTypes.number,
-            options: PropTypes.arrayOf(
-              PropTypes.shape({
-                optionId: PropTypes.number,
-                optionText: PropTypes.string
-              })
-            )
-          })
-        )
+        attributes: {
+          items: PropTypes.arrayOf(
+            PropTypes.shape({
+              attributeId: PropTypes.number,
+              attributeName: PropTypes.string,
+              attributeCode: PropTypes.string,
+              type: PropTypes.string,
+              isRequired: PropTypes.number,
+              options: PropTypes.arrayOf(
+                PropTypes.shape({
+                  optionId: PropTypes.number,
+                  optionText: PropTypes.string
+                })
+              )
+            })
+          )
+        }
       })
     )
   }),
@@ -267,14 +269,16 @@ export const query = `
         groupId: attributeGroupId
         groupName
         attributes {
-          attributeId
-          attributeName
-          attributeCode
-          type
-          isRequired
-          options {
-            optionId: attributeOptionId
-            optionText
+          items {
+            attributeId
+            attributeName
+            attributeCode
+            type
+            isRequired
+            options {
+              optionId: attributeOptionId
+              optionText
+            }
           }
         }
       }