@evershop/evershop 1.1.0 → 1.2.1

package/src/modules/catalog/graphql/types/Category/Category.graphql

@@ -2,12 +2,13 @@
 The `Category` type represents a category object.
 """
 type Category {
-  categoryId: ID!
+  categoryId: Int!
   uuid: String!
   name: String!
   status: Int!
   includeInNav: Int!
-  description: String
+  showProducts: Int!
+  description: JSON
   urlKey: String
   metaTitle: String
   metaDescription: String
@@ -49,7 +50,7 @@ enum FilterOperation {
 input FilterInput {
   key: String!
   operation: FilterOperation!
-  value: String
+  value: ID
 }
 
 """

package/src/modules/catalog/graphql/types/Category/Category.resolvers.js

@@ -1,3 +1,4 @@
+const { v4: uuidv4 } = require('uuid');
 const { select, execute } = require('@evershop/postgres-query-builder');
 const { buildUrl } = require('@evershop/evershop/src/lib/router/buildUrl');
 const { camelCase } = require('@evershop/evershop/src/lib/util/camelCase');
@@ -145,6 +146,39 @@ module.exports = {
         );
       query.where('category.category_id', '=', category.parentId);
       return camelCase(await query.load(pool));
+    },
+    description: ({ description }) => {
+      try {
+        return JSON.parse(description);
+      } catch (e) {
+        // This is for backward compatibility. If the description is not a JSON string then it is a raw HTML block
+        const rowId = `r__${uuidv4()}`;
+        return [
+          {
+            size: 1,
+            id: rowId,
+            columns: [
+              {
+                id: 'c__c5d90067-c786-4324-8e24-8e30520ac3d7',
+                size: 1,
+                data: {
+                  time: 1723347125344,
+                  blocks: [
+                    {
+                      id: 'AU89ItzUa7',
+                      type: 'raw',
+                      data: {
+                        html: description
+                      }
+                    }
+                  ],
+                  version: '2.30.2'
+                }
+              }
+            ]
+          }
+        ];
+      }
     }
   },
   Product: {

package/src/modules/catalog/graphql/types/Collection/Collection.graphql

@@ -2,10 +2,10 @@
 The `Collection` type represents a product collection.
 """
 type Collection {
-  collectionId: ID!
+  collectionId: Int!
   uuid: String!
   name: String!
-  description: String
+  description: JSON
   code: String!
   products(filters: [FilterInput]): ProductCollection
 }

package/src/modules/catalog/graphql/types/Collection/Collection.resolvers.js

@@ -1,3 +1,4 @@
+const { v4: uuidv4 } = require('uuid');
 const { select } = require('@evershop/postgres-query-builder');
 const { camelCase } = require('@evershop/evershop/src/lib/util/camelCase');
 const { ProductCollection } = require('../../../services/ProductCollection');
@@ -32,6 +33,39 @@ module.exports = {
       const root = new ProductCollection(query);
       await root.init(filters, !!user);
       return root;
+    },
+    description: ({ description }) => {
+      try {
+        return JSON.parse(description);
+      } catch (e) {
+        // This is for backward compatibility. If the description is not a JSON string then it is a raw HTML block
+        const rowId = `r__${uuidv4()}`;
+        return [
+          {
+            size: 1,
+            id: rowId,
+            columns: [
+              {
+                id: 'c__c5d90067-c786-4324-8e24-8e30520ac3d7',
+                size: 1,
+                data: {
+                  time: 1723347125344,
+                  blocks: [
+                    {
+                      id: 'AU89ItzUa7',
+                      type: 'raw',
+                      data: {
+                        html: description
+                      }
+                    }
+                  ],
+                  version: '2.30.2'
+                }
+              }
+            ]
+          }
+        ];
+      }
     }
   },
   Product: {

package/src/modules/catalog/graphql/types/Product/Attribute/ProductAttribute.resolvers.js

@@ -20,6 +20,7 @@ module.exports = {
       if (!user) {
         query.andWhere('attribute.display_on_frontend', '=', true);
       }
+      query.orderBy('attribute.sort_order', 'ASC');
       const attributes = await query.execute(pool);
       return attributes.map((a) => camelCase(a));
     },

package/src/modules/catalog/graphql/types/Product/Product.graphql

@@ -9,7 +9,7 @@ type Product {
   sku: String!
   weight: Weight!
   taxClass: Int
-  description: String
+  description: JSON
   urlKey: String
   metaTitle: String
   metaDescription: String

package/src/modules/catalog/graphql/types/Product/Product.resolvers.js

@@ -1,3 +1,4 @@
+const { v4: uuidv4 } = require('uuid');
 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');
@@ -20,6 +21,39 @@ module.exports = {
       } else {
         return urlRewrite.request_path;
       }
+    },
+    description: ({ description }) => {
+      try {
+        return JSON.parse(description);
+      } catch (e) {
+        // This is for backward compatibility. If the description is not a JSON string then it is a raw HTML block
+        const rowId = `r__${uuidv4()}`;
+        return [
+          {
+            size: 1,
+            id: rowId,
+            columns: [
+              {
+                id: 'c__c5d90067-c786-4324-8e24-8e30520ac3d7',
+                size: 1,
+                data: {
+                  time: 1723347125344,
+                  blocks: [
+                    {
+                      id: 'AU89ItzUa7',
+                      type: 'raw',
+                      data: {
+                        html: description
+                      }
+                    }
+                  ],
+                  version: '2.30.2'
+                }
+              }
+            ]
+          }
+        ];
+      }
     }
   },
   Query: {

package/src/modules/catalog/graphql/types/Widget/CollectionProductsWidget/CollectionProductsWidget.graphql

@@ -0,0 +1,11 @@
+"""
+Return a collection products Widget
+"""
+type CollectionProductsWidget {
+  collection: String
+  count: Int
+}
+
+extend type Query {
+  collectionProductsWidget(collection: String, count: Int): CollectionProductsWidget
+}

package/src/modules/catalog/graphql/types/Widget/CollectionProductsWidget/CollectionProductsWidget.resolvers.js

@@ -0,0 +1,8 @@
+module.exports = {
+  Query: {
+    collectionProductsWidget: async (root, { collection, count }) => ({
+      collection,
+      count: count ? parseInt(count, 10) : 5
+    })
+  }
+};

package/src/modules/catalog/migration/Version-1.0.0.js

@@ -353,6 +353,7 @@ module.exports = exports = async (connection) => {
   "parent_id" INT DEFAULT NULL,
   "include_in_nav" boolean NOT NULL,
   "position" smallint DEFAULT NULL,
+  "show_products" boolean DEFAULT TRUE,
   "created_at" TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
   "updated_at" TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT "CATEGORY_UUID_UNIQUE" UNIQUE ("uuid")

package/src/modules/catalog/migration/Version-1.0.7.js

@@ -0,0 +1,10 @@
+const { execute } = require('@evershop/postgres-query-builder');
+
+// eslint-disable-next-line no-multi-assign
+module.exports = exports = async (connection) => {
+  // rename the image column in the product_image table to origin_image
+  await execute(
+    connection,
+    `ALTER TABLE category ADD COLUMN IF NOT EXISTS show_products boolean DEFAULT TRUE`
+  );
+};

package/src/modules/catalog/pages/admin/attributeEdit+attributeNew/FormContent.jsx

@@ -9,15 +9,15 @@ export default function FormContent({ gridUrl }) {
   const { state } = useFormContext();
   return (
     <>
-      <div className="grid grid-cols-3 gap-x-2 grid-flow-row ">
-        <div className="col-span-2 grid grid-cols-1 gap-2 auto-rows-max">
+      <div className="grid grid-cols-3 gap-x-8 grid-flow-row ">
+        <div className="col-span-2 grid grid-cols-1 gap-8 auto-rows-max">
           <Area id="leftSide" noOuter />
         </div>
-        <div className="col-span-1 grid grid-cols-1 gap-2 auto-rows-max">
+        <div className="col-span-1 grid grid-cols-1 gap-8 auto-rows-max">
           <Area id="rightSide" noOuter />
         </div>
       </div>
-      <div className="form-submit-button flex border-t border-divider mt-15 pt-15 justify-between">
+      <div className="form-submit-button flex border-t border-divider mt-6 pt-6 justify-between">
         <Button
           title="Cancel"
           variant="critical"

package/src/modules/catalog/pages/admin/attributeEdit+attributeNew/General.jsx

@@ -63,8 +63,8 @@ function Groups({ groups, createGroupApi }) {
 
   return (
     <div>
-      <div className="mb-1">Select groups the attribute belongs to</div>
-      <div className="grid gap-2 grid-cols-2">
+      <div className="mb-4">Select groups the attribute belongs to</div>
+      <div className="grid gap-8 grid-cols-2">
         <div>
           <Select
             name="groups[]"
@@ -74,7 +74,7 @@ function Groups({ groups, createGroupApi }) {
             defaultValue={groups}
           />
         </div>
-        <div className="grid gap-2 grid-cols-1">
+        <div className="grid gap-8 grid-cols-1">
           <div>
             <Input
               type="text"
@@ -151,7 +151,7 @@ function Options({ originOptions = [] }) {
       {options.map((option, index) => {
         const { uuid, optionId, optionText } = option;
         return (
-          <div key={uuid} className="flex mb-05 space-x-2">
+          <div key={uuid} className="flex mb-2 space-x-8">
             <div>
               <Field
                 key={uuid}
@@ -179,7 +179,7 @@ function Options({ originOptions = [] }) {
           </div>
         );
       })}
-      <div className="mt-1">
+      <div className="mt-4">
         <a
           href="#"
           onClick={(e) => addOption(e)}

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

@@ -80,7 +80,7 @@ function Actions({ attributes = [], selectedIds = [] }) {
       {selectedIds.length > 0 && (
         <td style={{ borderTop: 0 }} colSpan="100">
           <div className="inline-flex border border-divider rounded justify-items-start">
-            <a href="#" className="font-semibold pt-075 pb-075 pl-15 pr-15">
+            <a href="#" className="font-semibold pt-3 pb-3 pl-6 pr-6">
               {selectedIds.length} selected
             </a>
             {actions.map((action) => (
@@ -90,7 +90,7 @@ function Actions({ attributes = [], selectedIds = [] }) {
                   e.preventDefault();
                   action.onAction();
                 }}
-                className="font-semibold pt-075 pb-075 pl-15 pr-15 block border-l border-divider self-center"
+                className="font-semibold pt-3 pb-3 pl-6 pr-6 block border-l border-divider self-center"
               >
                 <span>{action.name}</span>
               </a>

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

@@ -142,7 +142,7 @@ export default function Products({ category: { categoryId, addProductApi } }) {
         )}
         <Card.Session>
           <div>
-            <div className="border rounded border-divider mb-2">
+            <div className="border rounded border-divider mb-8">
               <input
                 type="text"
                 value={keyword}
@@ -161,7 +161,7 @@ export default function Products({ category: { categoryId, addProductApi } }) {
                   </div>
                   <div>
                     {data.category.products.total > 10 && (
-                      <div className="flex justify-between gap-1">
+                      <div className="flex justify-between gap-4">
                         {page > 1 && (
                           <a
                             className="text-interactive"
@@ -195,9 +195,9 @@ export default function Products({ category: { categoryId, addProductApi } }) {
                     // eslint-disable-next-line react/no-array-index-key
                     <div
                       key={p.uuid}
-                      className="grid grid-cols-8 gap-2 py-1 border-divider items-center"
+                      className="grid grid-cols-8 gap-8 py-4 border-divider items-center"
                     >
-                      <div className="grid-thumbnail text-border border border-divider p-075 rounded flex justify-center col-span-1">
+                      <div className="grid-thumbnail text-border border border-divider p-3 rounded flex justify-center col-span-1">
                         {p.image?.url && (
                           <img
                             className="self-center"

package/src/modules/catalog/pages/admin/categoryEdit+categoryNew/FormContent.jsx

@@ -9,15 +9,15 @@ export default function FormContent({ gridUrl }) {
   const { state } = useFormContext();
   return (
     <>
-      <div className="grid grid-cols-3 gap-x-2 grid-flow-row ">
-        <div className="col-span-2 grid grid-cols-1 gap-2 auto-rows-max">
+      <div className="grid grid-cols-3 gap-x-8 grid-flow-row ">
+        <div className="col-span-2 grid grid-cols-1 gap-8 auto-rows-max">
           <Area id="leftSide" noOuter />
         </div>
-        <div className="col-span-1 grid grid-cols-1 gap-2 auto-rows-max">
+        <div className="col-span-1 grid grid-cols-1 gap-8 auto-rows-max">
           <Area id="rightSide" noOuter />
         </div>
       </div>
-      <div className="form-submit-button flex border-t border-divider mt-15 pt-15 justify-between">
+      <div className="form-submit-button flex border-t border-divider mt-6 pt-6 justify-between">
         <Button
           title="Cancel"
           variant="critical"

package/src/modules/catalog/pages/admin/categoryEdit+categoryNew/General.jsx

@@ -4,25 +4,25 @@ import Area from '@components/common/Area';
 import { get } from '@evershop/evershop/src/lib/util/get';
 import { Field } from '@components/common/form/Field';
 import { Card } from '@components/admin/cms/Card';
-import CkeditorField from '@components/common/form/fields/Ckeditor';
 import CategoryTree from '@components/admin/catalog/productEdit/category/CategoryTree';
+import Editor from '@components/common/form/fields/Editor';
 
 function ParentCategory({ currentId, parent }) {
   const [selecting, setSelecting] = React.useState(false);
   const [category, setCategory] = React.useState(parent || null);
 
   return (
-    <div className="mt-15 relative">
-      <div className="mb-1">Parent category</div>
+    <div className="mt-6 relative">
+      <div className="mb-4">Parent category</div>
       {category && (
-        <div className="border rounded border-[#c9cccf] mb-1 p-1">
+        <div className="border rounded border-[#c9cccf] mb-4 p-4">
           {category.path.map((item, index) => (
             <span key={item.name} className="text-gray-500">
               {item.name}
               {index < category.path.length - 1 && ' > '}
             </span>
           ))}
-          <span className="text-interactive pl-2">
+          <span className="text-interactive pl-8">
             <a
               href="#"
               onClick={(e) => {
@@ -48,18 +48,16 @@ function ParentCategory({ currentId, parent }) {
         </a>
       )}
       {selecting && (
-        <div className="absolute top-5 left-0 right-0 bg-[#eff2f5] z-50 border rounded border-[#c9cccf] p-[10px]">
-          <CategoryTree
-            selectedCategory={category}
-            setSelectedCategory={(c) => {
-              if (c.categoryId === currentId) {
-                return;
-              }
-              setCategory(c);
-              setSelecting(false);
-            }}
-          />
-        </div>
+        <CategoryTree
+          selectedCategory={category}
+          setSelectedCategory={(c) => {
+            if (c.categoryId === currentId) {
+              return;
+            }
+            setCategory(c);
+            setSelecting(false);
+          }}
+        />
       )}
       <input
         type="hidden"
@@ -127,7 +125,7 @@ export default function General({
       sortOrder: 20
     },
     {
-      component: { default: CkeditorField },
+      component: { default: Editor },
       props: {
         id: 'description',
         name: 'description',

package/src/modules/catalog/pages/admin/categoryEdit+categoryNew/Image.jsx

@@ -83,7 +83,6 @@ export default function Image({ category, imageUploadUrl }) {
               <div className="uploader-icon flex justify-center">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
                   viewBox="0 0 20 20"
                   fill="currentColor"
                 >
@@ -101,7 +100,7 @@ export default function Image({ category, imageUploadUrl }) {
                   onAction={() => ref.current.click()}
                 />
               </div>
-              <div className="flex justify-center mt-1">
+              <div className="flex justify-center mt-4">
                 <span style={{ color: '#6d7175', fontSize: '1.2rem' }}>
                   click to upload an image
                 </span>

package/src/modules/catalog/pages/admin/categoryEdit+categoryNew/Status.jsx

@@ -30,6 +30,19 @@ export default function Status({ category }) {
           }
         />
       </Card.Session>
+      <Card.Session title="Show Products?">
+        <Field
+          type="radio"
+          name="show_products"
+          options={[
+            { value: 0, text: 'No' },
+            { value: 1, text: 'Yes' }
+          ]}
+          value={
+            category?.showProducts === undefined ? 1 : category.showProducts
+          }
+        />
+      </Card.Session>
     </Card>
   );
 }
@@ -37,7 +50,8 @@ export default function Status({ category }) {
 Status.propTypes = {
   category: PropTypes.shape({
     status: PropTypes.number,
-    includeInNav: PropTypes.number
+    includeInNav: PropTypes.number,
+    showProducts: PropTypes.number
   })
 };
 
@@ -55,6 +69,7 @@ export const query = `
     category(id: getContextValue("categoryId", null)) {
       status
       includeInNav
+      showProducts
     }
   }
 `;

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

@@ -62,7 +62,7 @@ function Actions({ categories = [], selectedIds = [] }) {
       {selectedIds.length > 0 && (
         <td style={{ borderTop: 0 }} colSpan="100">
           <div className="inline-flex border border-divider rounded justify-items-start">
-            <a href="#" className="font-semibold pt-075 pb-075 pl-15 pr-15">
+            <a href="#" className="font-semibold pt-3 pb-3 pl-6 pr-6">
               {selectedIds.length} selected
             </a>
             {actions.map((action, index) => (
@@ -73,7 +73,7 @@ function Actions({ categories = [], selectedIds = [] }) {
                   e.preventDefault();
                   action.onAction();
                 }}
-                className="font-semibold pt-075 pb-075 pl-15 pr-15 block border-l border-divider self-center"
+                className="font-semibold pt-3 pb-3 pl-6 pr-6 block border-l border-divider self-center"
               >
                 <span>{action.name}</span>
               </a>
@@ -145,7 +145,7 @@ export default function CategoryGrid({
             }
           }
         ]}
-       />
+      />
       <table className="listing sticky">
         <thead>
           <tr>

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

@@ -142,7 +142,7 @@ export default function Products({ collection: { code, addProductApi } }) {
         )}
         <Card.Session>
           <div>
-            <div className="border rounded border-divider mb-2">
+            <div className="border rounded border-divider mb-8">
               <input
                 type="text"
                 value={keyword}
@@ -161,7 +161,7 @@ export default function Products({ collection: { code, addProductApi } }) {
                   </div>
                   <div>
                     {data.collection.products.total > 10 && (
-                      <div className="flex justify-between gap-1">
+                      <div className="flex justify-between gap-4">
                         {page > 1 && (
                           <a
                             className="text-interactive"
@@ -195,9 +195,9 @@ export default function Products({ collection: { code, addProductApi } }) {
                     // eslint-disable-next-line react/no-array-index-key
                     <div
                       key={p.uuid}
-                      className="grid grid-cols-8 gap-2 py-1 border-divider items-center"
+                      className="grid grid-cols-8 gap-8 py-4 border-divider items-center"
                     >
-                      <div className="grid-thumbnail text-border border border-divider p-075 rounded flex justify-center col-span-1">
+                      <div className="grid-thumbnail text-border border border-divider p-3 rounded flex justify-center col-span-1">
                         {p.image?.url && (
                           <img
                             className="self-center"

package/src/modules/catalog/pages/admin/collectionEdit+collectionNew/FormContent.jsx

@@ -9,10 +9,10 @@ export default function FormContent({ gridUrl }) {
   const { state } = useFormContext();
   return (
     <div className="w-2/3" style={{ margin: '0 auto' }}>
-      <div className="grid gap-2">
+      <div className="grid gap-8">
         <Area id="collectionFormInner" noOuter />
       </div>
-      <div className="form-submit-button flex border-t border-divider mt-15 pt-15 justify-between">
+      <div className="form-submit-button flex border-t border-divider mt-6 pt-6 justify-between">
         <Button
           title="Cancel"
           variant="critical"

package/src/modules/catalog/pages/admin/collectionEdit+collectionNew/General.jsx

@@ -4,7 +4,7 @@ import Area from '@components/common/Area';
 import { get } from '@evershop/evershop/src/lib/util/get';
 import { Field } from '@components/common/form/Field';
 import { Card } from '@components/admin/cms/Card';
-import CkeditorField from '@components/common/form/fields/Ckeditor';
+import Editor from '@components/common/form/fields/Editor';
 
 export default function General({
   collection,
@@ -50,7 +50,7 @@ export default function General({
       sortOrder: 10
     },
     {
-      component: { default: CkeditorField },
+      component: { default: Editor },
       props: {
         id: 'description',
         name: 'description',

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

@@ -62,7 +62,7 @@ function Actions({ collections = [], selectedIds = [] }) {
       {selectedIds.length > 0 && (
         <td style={{ borderTop: 0 }} colSpan="100">
           <div className="inline-flex border border-divider rounded justify-items-start">
-            <a href="#" className="font-semibold pt-075 pb-075 pl-15 pr-15">
+            <a href="#" className="font-semibold pt-3 pb-3 pl-6 pr-6">
               {selectedIds.length} selected
             </a>
             {actions.map((action, index) => (
@@ -73,7 +73,7 @@ function Actions({ collections = [], selectedIds = [] }) {
                   e.preventDefault();
                   action.onAction();
                 }}
-                className="font-semibold pt-075 pb-075 pl-15 pr-15 block border-l border-divider self-center"
+                className="font-semibold pt-3 pb-3 pl-6 pr-6 block border-l border-divider self-center"
               >
                 <span>{action.name}</span>
               </a>
@@ -146,7 +146,7 @@ export default function CollectionGrid({
               }
             }
           ]}
-         />
+        />
         <table className="listing sticky">
           <thead>
             <tr>

package/src/modules/catalog/pages/admin/productEdit/Collection.jsx

@@ -8,13 +8,13 @@ export default function Collections({ product: { collections } }) {
     <Card title="Collections" subdued>
       <Card.Session>
         {collections.map((collection) => (
-            <div className="flex justify-start gap-1 items-center align-middle">
-              <CollectionIcon width={16} height={16} fill="#2c6ecb" />
-              <a href={collection.editUrl} className="hover:underline">
-                <span>{collection.name}</span>
-              </a>
-            </div>
-          ))}
+          <div className="flex justify-start gap-4 items-center align-middle">
+            <CollectionIcon width={16} height={16} fill="#2c6ecb" />
+            <a href={collection.editUrl} className="hover:underline">
+              <span>{collection.name}</span>
+            </a>
+          </div>
+        ))}
         {collections.length === 0 && (
           <div className="text-gray-500">No collections</div>
         )}