@evershop/evershop 1.0.0-beta

package/src/modules/catalog/api/admin/productSavePost/finish[apiResponse].js

@@ -0,0 +1,26 @@
+const { commit, rollback } = require('@evershop/mysql-query-builder');
+const { buildUrl } = require('../../../../../lib/router/buildUrl');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = async (request, response, stack, next) => {
+  const promises = [];
+  Object.keys(stack).forEach((id) => {
+    // Check if middleware is async
+    if (stack[id] instanceof Promise) {
+      promises.push(stack[id]);
+    }
+  });
+  const connection = await stack.getConnection;
+  const results = await Promise.allSettled(promises);
+  if (results.findIndex((r) => r.status === 'rejected') === -1) {
+    await commit(connection);
+    // Store success message to session
+    response.json({
+      data: { redirectUrl: buildUrl('productGrid') },
+      success: true,
+      message: request.body.product_id ? 'Product was updated successfully' : 'Product was created successfully'
+    });
+  } else {
+    await rollback(connection);
+  }
+};

package/src/modules/catalog/api/admin/productSavePost/getConnection[finish].js

@@ -0,0 +1,10 @@
+const { startTransaction } = require('@evershop/mysql-query-builder');
+const { getConnection } = require('../../../../../lib/mysql/connection');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = async (request, response) => {
+  const connection = await getConnection();
+  await startTransaction(connection);
+
+  return connection;
+};

package/src/modules/catalog/api/admin/productSavePost/route

@@ -0,0 +1,2 @@
+POST
+/product/save

package/src/modules/catalog/api/admin/productSavePost/validateProduct[getConnection].js

@@ -0,0 +1,29 @@
+const { select } = require("@evershop/mysql-query-builder");
+const { pool } = require("../../../../../lib/mysql/connection");
+
+module.exports = async (request, response, stack, next) => {
+  if (!request.body.sku) {
+    response.status(500).json({
+      success: false,
+      message: 'Sku is required'
+    });
+    return;
+  }
+
+  if (!request.body.group_id) {
+    response.status(500).json({
+      success: false,
+      message: 'Attribute group is required'
+    });
+    return;
+  }
+
+  if (!await select().from('attribute_group').where('attribute_group_id', '=', request.body.group_id).load(pool)) {
+    response.status(500).json({
+      success: false,
+      message: `Attribute group id ${request.body.group_id} is not existed`
+    });
+    return;
+  }
+  return next();
+};

package/src/modules/catalog/api/admin/search/searchProducts[searchResponse].js

@@ -0,0 +1,28 @@
+const { select } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../../../lib/mysql/connection');
+const { buildUrl } = require('../../../../../lib/router/buildUrl');
+const { assign } = require('../../../../../lib/util/assign');
+
+module.exports = async (request, response) => {
+  const { keyword } = request.query;
+
+  // Search products
+  const query = select('product_id', 'sku')
+    .select('d.`name`', 'name')
+    .from('product', 'p');
+  query.leftJoin('product_description', 'd')
+    .on('p.`product_id`', '=', 'd.`product_description_product_id`');
+  query.where('p.sku', 'LIKE', `%${keyword}%`)
+    .or('d.name', 'LIKE', `%${keyword}%`)
+    .or('d.description', 'LIKE', `%${keyword}%`);
+  query.limit(0, 20);
+  const products = (await query.execute(pool)).map((p) => ({
+    name: p.name,
+    url: buildUrl('productEdit', { id: p.product_id }),
+    description: `Sku ${p.sku}`
+  }));
+  if (products.length > 0) {
+    response.payload = response.payload || [];
+    assign(response.payload, [{ name: 'Products', items: products }]);
+  }
+};

package/src/modules/catalog/api/admin/unlinkVariant/[context]multerNone[auth].js

@@ -0,0 +1,7 @@
+const multer = require('multer');
+
+const upload = multer();
+
+module.exports = (request, response, stack, next) => {
+  upload.none()(request, response, next);
+};

package/src/modules/catalog/api/admin/unlinkVariant/route

@@ -0,0 +1,2 @@
+POST
+/variant/unlink

package/src/modules/catalog/api/admin/unlinkVariant/unlinkVariants.js

@@ -0,0 +1,23 @@
+const { update } = require('@evershop/mysql-query-builder');
+const { getConnection } = require('../../../../../lib/mysql/connection');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = async (request, response, stack, next) => {
+  const connection = await getConnection();
+  try {
+    await update('product')
+      .given({ variant_group_id: null, visibility: null })
+      .where('product_id', '=', parseInt(`0${request.body.id}`, 10))
+      .execute(connection);
+    response.json({
+      data: {},
+      success: true
+    });
+  } catch (e) {
+    response.json({
+      data: {},
+      message: e.message,
+      success: false
+    });
+  }
+};

package/src/modules/catalog/api/admin/variantSearch/loadVariants.js

@@ -0,0 +1,71 @@
+const { select } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../../../lib/mysql/connection');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = async (request, response, stack, next) => {
+  const query = select()
+    .select('product_id', 'variant_product_id')
+    .select('sku')
+    .select('name')
+    .select('status')
+    .select('price')
+    .select('qty')
+    .select('product.`image`')
+    .select('product_image.`image`', 'gallery')
+    .from('product');
+
+  query.leftJoin('product_image')
+    .on('product.`product_id`', '=', 'product_image.`product_image_product_id`');
+
+  query.leftJoin('product_description')
+    .on('product.`product_id`', '=', 'product_description.`product_description_product_id`');
+
+  // Only return item that not assigned to any group
+  query.where('variant_group_id', 'IS', null);
+
+  if (request.query.keyword) {
+    query.andWhere('name', 'LIKE', `%${request.query.keyword}%`)
+      .or('sku', 'LIKE', `%${request.query.keyword}%`);
+  }
+
+  const results = await query.execute(pool);
+
+  const variants = [];
+  results.forEach((variant) => {
+    const index = variants.findIndex((v) => v.variant_product_id === variant.variant_product_id);
+    if (index === -1) {
+      variants.push(
+        {
+          ...variant,
+          image: {
+            url: variant.image
+          },
+          images: [
+            variant.image ? { url: variant.image, path: variant.image } : null,
+            variant.gallery ? {
+              url: variant.gallery,
+              path: variant.gallery
+            } : null].filter((i) => i !== null)
+        }
+      );
+    } else {
+      variants[index] = {
+        ...variants[index],
+        images: variants[index].images.concat({ url: variant.gallery, path: variant.gallery })
+      };
+    }
+  });
+
+  for (let i = 0; i < variants.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    variants[i].attributes = JSON.parse(JSON.stringify(await select()
+      .from('product_attribute_value_index')
+      .where('product_id', '=', variants[i].variant_product_id)
+      .execute(pool)));
+  }
+
+  response.json({
+    data: { variants },
+    success: true
+  });
+};

package/src/modules/catalog/api/admin/variantSearch/route

@@ -0,0 +1,2 @@
+GET, POST
+/variant/search

package/src/modules/catalog/components/product/list/List.js

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Name } from './item/Name';
+import { Thumbnail } from './item/Thumbnail';
+import { Price } from './item/Price';
+import Area from '../../../../../lib/components/Area';
+import { get } from '../../../../../lib/util/get';
+
+export default function ProductList({ products = [] }) {
+  if (products.length === 0) {
+    return (
+      <div className="product-list">
+        <div className="text-center">There is no product to display</div>
+      </div>
+    );
+  }
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+      {
+        products.map((p) => (
+          <Area
+            id="productListingItem"
+            className="listing-tem"
+            product={p}
+            key={p.productId}
+            coreComponents={[
+              {
+                component: { default: Thumbnail },
+                props: { imageUrl: get(p, 'image.url'), alt: p.name },
+                sortOrder: 10,
+                id: 'thumbnail'
+              },
+              {
+                component: { default: Name },
+                props: { name: p.name, url: p.url, id: p.productId },
+                sortOrder: 20,
+                id: 'name'
+              },
+              {
+                component: { default: Price },
+                props: { ...p.price },
+                sortOrder: 30,
+                id: 'price'
+              }
+            ]}
+          />
+        ))
+      }
+    </div>
+  );
+}
+
+ProductList.propTypes = {
+  products: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    productId: PropTypes.number,
+    url: PropTypes.string,
+    price: PropTypes.shape({
+      regular: PropTypes.shape({
+        value: PropTypes.number,
+        text: PropTypes.string
+      }),
+      special: PropTypes.shape({
+        value: PropTypes.number,
+        text: PropTypes.string
+      })
+    }),
+    image: PropTypes.shape({
+      alt: PropTypes.string,
+      listing: PropTypes.string
+    }),
+  })).isRequired
+};

package/src/modules/catalog/components/product/list/Pagination.js

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import './Pagination.scss';
+
+export function Pagination({
+  total, limit, currentPage
+}) {
+  const [, setIsOnEdit] = React.useState(false);
+  const [, setInPutVal] = React.useState(currentPage);
+
+  const max = Math.ceil(total / limit);
+  React.useEffect(() => {
+    setInPutVal(currentPage);
+  }, [currentPage]);
+
+  const onPage = (page) => {
+    let pageNum;
+    if (page < 1) pageNum = 1;
+    else if (page > max) pageNum = max;
+    else pageNum = page;
+    const url = new URL(window.location.href, window.location.origin);
+    url.searchParams.set('page', pageNum);
+    window.location.href = url;
+    setIsOnEdit(false);
+  };
+
+  const onPrev = (e) => {
+    e.preventDefault();
+    const prev = currentPage - 1;
+    if (currentPage === 1) { return; }
+    const url = new URL(currentUrl, window.location.origin);
+    url.searchParams.set('page', prev);
+    window.location.href = url;
+  };
+
+  const onNext = (e) => {
+    e.preventDefault();
+    const next = currentPage + 1;
+    if (currentPage * limit >= total) { return; }
+    const url = new URL(currentUrl, window.location.origin);
+    url.searchParams.set('page', next);
+    window.location.href = url;
+  };
+
+  return (
+    <div className="products-pagination">
+      <ul className="pagination flex justify-center space-x-1">
+        {currentPage > 1 && (
+          <li className="page-item prev self-center">
+            <button type="button" className="link-button page-link" onClick={(e) => onPrev(e)}>
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
+              </svg>
+            </button>
+          </li>
+        )}
+        {Array.from({ length: max }, (_, i) => i + 1).map((page) => {
+          if (parseInt(page) === parseInt(currentPage)) {
+            return (
+              <li key={page} className="page-item current self-center">
+                <button type="button" className="link-button page-link" onClick={(e) => { e.preventDefault(); }}>{page}</button>
+              </li>
+            );
+          } else {
+            return (
+              <li key={page} className="page-item self-center">
+                <button type="button" className="link-button page-link" onClick={(e) => { e.preventDefault(); onPage(page); }}>{page}</button>
+              </li>
+            );
+          }
+        })}
+        {(currentPage * limit) < total && (
+          <li className="page-item next self-center">
+            <button type="button" className="page-link link-button" onClick={(e) => onNext(e)}>
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
+              </svg>
+            </button>
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+}
+
+Pagination.propTypes = {
+  currentPage: PropTypes.number.isRequired,
+  limit: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired
+};

package/src/modules/catalog/components/product/list/Pagination.scss

@@ -0,0 +1,21 @@
+.products-pagination {
+    margin-top: 5rem;
+    .page-item {
+        width: 2.2rem;
+        height: 2.2rem;
+        border: 1px solid var(--primary);
+        border-radius: 100%;
+        justify-content: center;
+        display: flex;
+        align-items: center;
+        &.current {
+            border-color: var(--success);
+            color: var(--success);
+        }
+        svg {
+            width: 1.5rem;
+            height: 1.5rem;
+            color: var(--primary);
+        }
+    }
+}

package/src/modules/catalog/components/product/list/Sorting.js

@@ -0,0 +1,87 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import { Select } from '../../../../../lib/components/form/fields/Select';
+
+export default function Sorting({ currentFilters }) {
+  // TODO: make this list configurable
+  const sortingOptions = [{ code: 'price', name: 'Price' }, { code: 'name', name: 'Name' }];
+  const sortOrder = currentFilters.find((f) => f.key === 'sortOrder') || { value: 'asc' };
+  const sortBy = currentFilters.find((f) => f.key === 'sortBy') || { value: 'id' };
+
+  const onChangeSort = (e) => {
+    const currentUrl = window.location.href;
+    e.preventDefault();
+    const url = new URL(currentUrl, window.location.origin);
+    url.searchParams.set('sortBy', e.target.value);
+    window.location.href = url;
+  };
+
+  const onChangeDirection = (e) => {
+    const currentUrl = window.location.href;
+    e.preventDefault();
+    const url = new URL(currentUrl, window.location.origin);
+    if (sortOrder.value.toLowerCase() === 'asc') {
+      url.searchParams.set('sortOrder', 'desc');
+      window.location.href = url;
+    } else {
+      url.searchParams.set('sortOrder', 'asc');
+      window.location.href = url;
+    }
+  };
+
+  if (sortingOptions.length === 0) { return (null); }
+
+  return (
+    <div className="product-sorting">
+      <div className="product-sorting-inner flex justify-end space-x-05">
+        <Select
+          className="form-control"
+          onChange={(e) => onChangeSort(e)}
+          value={sortBy.value.toLowerCase()}
+          options={[{
+            value: '',
+            text: 'Please select'
+          }]
+            .concat(sortingOptions.map((o) => ({ value: o.code, text: o.name })))}
+        />
+        <div className="sort-direction self-center">
+          <a onClick={(e) => onChangeDirection(e)} href="#">
+            {sortOrder.value.toLowerCase() === 'desc' ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="feather feather-arrow-up"
+              >
+                <line x1="12" y1="19" x2="12" y2="5" />
+                <polyline points="5 12 12 5 19 12" />
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="feather feather-arrow-down"
+              >
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <polyline points="19 12 12 19 5 12" />
+              </svg>
+            )}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/modules/catalog/components/product/list/item/Name.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function Name({ name, url }) {
+  return (
+    <div className="product-name product-list-name mt-1 mb-025">
+      <a href={url} className="font-bold hover:underline h5"><span>{name}</span></a>
+    </div>
+  );
+}
+
+Name.propTypes = {
+  url: PropTypes.string,
+  name: PropTypes.string
+};
+
+Name.defaultProps = {
+  url: '',
+  name: ''
+};
+
+export { Name };

package/src/modules/catalog/components/product/list/item/Name.scss

@@ -0,0 +1,3 @@
+.product-name {
+    text-transform: capitalize;
+}

package/src/modules/catalog/components/product/list/item/Price.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function Price({ regular, special }) {
+  return (
+    <div className="product-price-listing">
+      {regular.value === special.value && (
+        <div>
+          <span className="sale-price font-semibold">{regular.text}</span>
+        </div>
+      )}
+      {special.value < regular.value && (
+        <div>
+          <span className="sale-price text-critical font-semibold">{special.text}</span>
+          {' '}
+          <span className="regular-price font-semibold">{regular.text}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+Price.propTypes = {
+  regular: PropTypes.shape({
+    value: PropTypes.number,
+    text: PropTypes.string
+  }),
+  special: PropTypes.shape({
+    value: PropTypes.number,
+    text: PropTypes.string
+  }),
+};
+
+export { Price };

package/src/modules/catalog/components/product/list/item/Thumbnail.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import './Thumbnail.scss';
+
+function Thumbnail({ imageUrl, alt }) {
+  return (
+    <div className="product-thumbnail-listing">
+      {imageUrl && <img src={imageUrl} alt={alt} />}
+      {!imageUrl && (
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={0.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+      )}
+    </div>
+  );
+}
+
+Thumbnail.propTypes = {
+  alt: PropTypes.string,
+  imageUrl: PropTypes.string
+};
+
+Thumbnail.defaultProps = {
+  alt: '',
+  imageUrl: ''
+};
+
+export { Thumbnail };

package/src/modules/catalog/components/product/list/item/Thumbnail.scss

@@ -0,0 +1,9 @@
+.product-thumbnail-listing {
+    background-color: #f6f6f6;
+    color: #3131;
+    min-height: 250px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}

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

@@ -0,0 +1,37 @@
+type AttributeGroup {
+  attributeGroupId: ID!
+  groupName: String!
+  attributes: [Attribute]
+}
+
+type AttributeOption {
+  attributeOptionId: ID!
+  optionText: String!
+}
+
+type Attribute {
+  attributeId: ID!
+  attributeCode: String!
+  attributeName: String!
+  type: String!
+  isRequired: Int!
+  displayOnFrontend: Int!
+  sortOrder: Int!
+  isFilterable: Int!
+  options: [AttributeOption]
+  groups: [AttributeGroup]
+  editUrl: String!
+}
+
+type AttributeCollection {
+  items: [Attribute]
+  currentPage: Int!
+  total: Int!
+  currentFilters: [Filter]
+}
+
+extend type Query {
+  attribute(id: Int): Attribute
+  attributes(filters: [FilterInput]): AttributeCollection
+  attributeGroups: [AttributeGroup]!
+}