@evershop/evershop 1.0.0-beta

package/src/modules/cms/api/admin/cmsPageSavePost/[getConnection]updatePage[finish].js

@@ -0,0 +1,15 @@
+const { update } = require('@evershop/mysql-query-builder');
+
+module.exports = async (request, response, stack) => {
+  if (!request.body.cms_page_id) { return null; }
+  const data = request.body;
+  const connection = await stack.getConnection;
+  await update('cms_page').given(data)
+    .where('cms_page_id', '=', data.cms_page_id)
+    .execute(connection);
+  await update('cms_page_description')
+    .given(request.body).where('cms_page_description_cms_page_id', '=', data.cms_page_id)
+    .execute(connection);
+
+  return data.cms_page_id;
+};

package/src/modules/cms/api/admin/cmsPageSavePost/finish[apiResponse].js

@@ -0,0 +1,30 @@
+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;
+  try {
+    await Promise.all(promises);
+    await commit(connection);
+    response.json({
+      data: { redirectUrl: buildUrl('cmsPageGrid') },
+      success: true,
+      message: request.params.id ? 'Page was updated successfully' : 'Page was created successfully'
+    });
+  } catch (error) {
+    await rollback(connection);
+    response.json({
+      success: false,
+      message: error.message
+    });
+  }
+};

package/src/modules/cms/api/admin/cmsPageSavePost/getConnection.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/cms/api/admin/cmsPageSavePost/route

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

package/src/modules/cms/api/admin/fileBrowser/browser.js

@@ -0,0 +1,30 @@
+const { join } = require('path');
+const { existsSync, readdirSync } = require('fs');
+const { CONSTANTS } = require('../../../../../lib/helpers');
+const { buildUrl } = require('../../../../../lib/router/buildUrl');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (request, response, stack, next) => {
+  const path = request.params[0] || '';
+  if (!existsSync(join(CONSTANTS.MEDIAPATH, path))) {
+    response.json({
+      success: false,
+      message: 'Requested path does not exist'
+    });
+  } else {
+    response.json({
+      success: true,
+      data: {
+        folders: readdirSync(join(CONSTANTS.MEDIAPATH, path), { withFileTypes: true })
+          .filter((dirent) => dirent.isDirectory())
+          .map((dirent) => dirent.name),
+        files: readdirSync(join(CONSTANTS.MEDIAPATH, path), { withFileTypes: true })
+          .filter((dirent) => dirent.isFile())
+          .map((f) => ({
+            url: buildUrl('adminStaticAsset', [`${path}/${f.name}`]),
+            name: f.name
+          }))
+      }
+    });
+  }
+};

package/src/modules/cms/api/admin/fileBrowser/route

@@ -0,0 +1,2 @@
+GET,POST
+/file_browser/*

package/src/modules/cms/api/admin/fileDelete/delete.js

@@ -0,0 +1,24 @@
+const { join } = require('path');
+const { existsSync, unlinkSync, lstatSync } = require('fs');
+const { CONSTANTS } = require('../../../../../lib/helpers');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (request, response, stack, next) => {
+  const path = request.params[0] || '';
+  if (!existsSync(join(CONSTANTS.MEDIAPATH, path))) {
+    response.json({
+      success: false,
+      message: 'Requested path does not exist'
+    });
+  } else if (lstatSync(join(CONSTANTS.MEDIAPATH, path)).isDirectory()) {
+    response.json({
+      success: false,
+      message: 'Requested path is not a file'
+    });
+  } else {
+    unlinkSync(join(CONSTANTS.MEDIAPATH, path));
+    response.json({
+      success: true
+    });
+  }
+};

package/src/modules/cms/api/admin/fileDelete/route

@@ -0,0 +1,2 @@
+GET,POST
+/file_delete/*

package/src/modules/cms/api/admin/folderCreate/create.js

@@ -0,0 +1,24 @@
+const { join, basename } = require('path');
+const { existsSync, mkdirSync } = require('fs');
+const { CONSTANTS } = require('../../../../../lib/helpers');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (request, response, stack, next) => {
+  const path = request.params[0] || '';
+  if (existsSync(join(CONSTANTS.MEDIAPATH, path))) {
+    response.json({
+      success: false,
+      message: 'Folder already existed',
+      data: {}
+    });
+  } else {
+    mkdirSync(join(CONSTANTS.MEDIAPATH, path), { recursive: true });
+    response.json({
+      success: true,
+      data: {
+        path,
+        name: basename(join(CONSTANTS.MEDIAPATH, path))
+      }
+    });
+  }
+};

package/src/modules/cms/api/admin/folderCreate/route

@@ -0,0 +1,2 @@
+GET,POST
+/folder_create/*

package/src/modules/cms/api/admin/imageUpload/[context]multerFile[auth].js

@@ -0,0 +1,36 @@
+const { mkdirSync } = require('fs');
+const { join } = require('path');
+const multer = require('multer');
+const { CONSTANTS } = require('../../../../../lib/helpers');
+
+const storage = multer.diskStorage({
+  destination(request, file, cb) {
+    const path = join(CONSTANTS.MEDIAPATH, (request.params[0] || '').replace(/\s/g, '-'));
+    mkdirSync(path, { recursive: true });
+    cb(null, path);
+  },
+  filename(request, file, cb) {
+    cb(null, file.originalname.replace(/\s/g, '-'));
+  }
+});
+
+function fileFilter(request, file, cb) {
+  // Only accept images
+  if (!/\.(jpe?g|png|gif)$/i.test(file.originalname)) {
+    cb(null, false);
+  } else {
+    cb(null, true);
+  }
+}
+
+const upload = multer({ storage, fileFilter });
+
+module.exports = (request, response, stack, next) => {
+  const path = request.params[0] || '';
+  // eslint-disable-next-line no-useless-escape
+  if (!path || !/^[a-z0-9\/]+$/i.test(path)) {
+    response.json({ success: false, message: 'Invalid path' });
+  } else {
+    upload.array('images', 20)(request, response, next);
+  }
+};

package/src/modules/cms/api/admin/imageUpload/[multerFile]upload.js

@@ -0,0 +1,29 @@
+const { resolve } = require('path');
+const { CONSTANTS } = require('../../../../../lib/helpers');
+const { buildUrl } = require('../../../../../lib/router/buildUrl');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (request, response, stack, next) => {
+  if (!request.files || request.files.length === 0) {
+    response.json({
+      success: false,
+      message: 'No image was provided'
+    });
+  } else {
+    response.json({
+      success: true,
+      message: 'OK',
+      data: {
+        files: request.files.map(
+          (f) => ({
+            name: f.filename,
+            type: f.minetype,
+            size: f.size,
+            path: f.path.replace(resolve(CONSTANTS.MEDIAPATH), '').split('\\').join('/'),
+            url: buildUrl('adminStaticAsset', [f.path.replace(resolve(CONSTANTS.MEDIAPATH), '').split('\\').join('/')])
+          })
+        )
+      }
+    });
+  }
+};

package/src/modules/cms/api/admin/imageUpload/route

@@ -0,0 +1,2 @@
+POST
+/image/upload/*

package/src/modules/cms/api/admin/search/route

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

package/src/modules/cms/api/admin/search/searchResponse.js

@@ -0,0 +1,26 @@
+// eslint-disable-next-line no-unused-vars
+module.exports = async (request, response, delegate, next) => {
+  try {
+    const promises = [];
+    Object.keys(delegate).forEach((id) => {
+      // Check if middleware is async
+      if (delegate[id] instanceof Promise) {
+        promises.push(delegate[id]);
+      }
+    });
+
+    await Promise.all(promises);
+    const results = response.payload || [];
+
+    response.json({
+      success: true,
+      data: { payload: results }
+    });
+  } catch (e) {
+    response.json({
+      success: false,
+      message: e.message,
+      data: { payload: [] }
+    });
+  }
+};

package/src/modules/cms/components/admin/Card.js

@@ -0,0 +1,122 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import './Card.scss';
+
+function Card({
+  title, actions = [], subdued = false, children
+}) {
+  return (
+    <div className={subdued ? 'card shadow subdued' : 'card shadow'}>
+      {(title || actions.length > 0) && (
+        <div className="flex justify-between card-header">
+          {title && <h2 className="card-title">{title}</h2>}
+          {actions.length > 0 && (
+            <div className="flex space-x-075">
+              {actions.map((action, index) => {
+                const className = {
+                  primary: 'text-primary',
+                  critical: 'text-critical',
+                  interactive: 'text-interactive',
+                  secondary: 'text-secondary'
+                };
+                return (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <div key={index} className="card-action">
+                    <a
+                      href="#"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        if (action.onAction) action.onAction.call();
+                      }}
+                      className={className[action.variant ? action.variant : 'interactive']}
+                    >
+                      {action.name}
+                    </a>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+Card.propTypes = {
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    onAction: PropTypes.func,
+    variant: PropTypes.string,
+    name: PropTypes.string
+  })),
+  children: PropTypes.node.isRequired,
+  subdued: PropTypes.bool,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+
+Card.defaultProps = {
+  actions: [],
+  subdued: false,
+  title: ''
+};
+
+const Session = function Session({ actions = [], title, children }) {
+  return (
+    <div className="card-section border-b box-border">
+      {(title || actions.length > 0) && (
+        <div className="flex justify-between card-section-header mb-1">
+          {title && <h3 className="card-session-title">{title}</h3>}
+          {actions.length > 0 && (
+            <div className="flex space-x-075">
+              {actions.map((action, index) => {
+                const className = {
+                  primary: 'text-primary',
+                  critical: 'text-critical',
+                  interactive: 'text-interactive',
+                  secondary: 'text-secondary'
+                };
+                return (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <div key={index} className="card-action">
+                    <a
+                      href="#"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        if (action.onAction) action.onAction.call();
+                      }}
+                      className={className[action.variant ? action.variant : 'interactive']}
+                    >
+                      {action.name}
+                    </a>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+      <div className="card-session-content pt-lg">{children}</div>
+    </div>
+  );
+};
+
+Session.propTypes = {
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    onAction: PropTypes.func,
+    variant: PropTypes.string,
+    name: PropTypes.string
+  })),
+  children: PropTypes.node,
+  title: PropTypes.string
+};
+
+Session.defaultProps = {
+  actions: [],
+  title: '',
+  children: null
+};
+
+Card.Session = Session;
+
+export { Card };

package/src/modules/cms/components/admin/Card.scss

@@ -0,0 +1,38 @@
+.card {
+    background-color: white;
+    border-radius: 6px;
+    &.subdued {
+        background-color: #fafbfb;
+    }
+}
+.card-title {
+    font-size: 1.6rem;
+    font-weight: 600;
+}
+.card-header {
+    padding: 2rem;
+}
+.card-section {
+    border-color: var(--divider);
+    padding: 2rem;
+    .card-section {
+        padding: 0;
+    }
+}
+.card .card-section:last-child {
+    border-bottom: none;
+}
+.card-header + .card-section {
+    padding-top: 0;
+}
+.card-session-title {
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+.card-session-title + .card-session-content {
+    padding-top: 0.85rem;
+}
+.card-action a:hover {
+    text-decoration: underline;
+}

package/src/modules/cms/components/admin/Dot.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function Dot({ color = 'primary' }) {
+  const style = {
+    borderRadius: '100%', with: '0.25rem', height: '0.25rem', backgroundColor: `var(--${color})`
+  };
+  return (
+    <div style={style} />
+  );
+}
+
+Dot.propTypes = {
+  color: PropTypes.string.isRequired
+};
+
+export default Dot;

package/src/modules/cms/components/admin/NavigationItem.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import './NavigationItem.scss';
+
+export default function NavigationItem({ Icon, url, title }) {
+  const [isActive, setIsActive] = React.useState(false);
+  React.useEffect(() => {
+    const currentUrl = window.location.href;
+    const baseUrl = window.location.origin;
+    const check = currentUrl.split(baseUrl + url);
+    if (check.length === 2 && url.indexOf('products/new') === -1) { // TODO: Fix me
+      if (url.split('/').length === 2) {
+        if (check[1] === '' || !/^\/[a-zA-Z1-9]/.test(check[1])) {
+          setIsActive(true);
+        }
+      } else {
+        setIsActive(true);
+      }
+    }
+  }, []);
+
+  return (
+    <li className={isActive ? 'active nav-item' : 'nav-item'}>
+      <a href={url} className="flex justify-left">
+        <i className="menu-icon">
+          <Icon />
+        </i>
+        {title}
+      </a>
+    </li>
+  );
+}
+
+NavigationItem.propTypes = {
+  Icon: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired
+};

package/src/modules/cms/components/admin/NavigationItem.scss

@@ -0,0 +1,10 @@
+.nav-item {
+    .menu-icon {
+        padding-right: 10px;
+        align-self: center;
+        svg {
+            width: 15px;
+            height: 15px;
+        }
+    }
+}

package/src/modules/cms/components/admin/NavigationItemGroup.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../../../lib/components/Area';
+import Open from '@heroicons/react/solid/esm/ChevronDoubleDownIcon';
+import Close from '@heroicons/react/solid/esm/ChevronDoubleUpIcon';
+import NavigationItem from './NavigationItem';
+import './NavigationItemGroup.scss';
+
+export default function NavigationItemGroup({ id, name, items = [], Icon = null, url = null }) {
+  return (
+    <li className='root-nav-item nav-item'>
+      <div className='flex justify-between items-center'>
+        <div className="root-label flex justify-between items-center">
+          {Icon && <span><Icon /></span>}
+          {!url && <span>{name}</span>}
+          {url && <a href={url}>{name}</a>}
+        </div>
+      </div>
+      <ul className="item-group">
+        <Area
+          id={id}
+          noOuter
+          coreComponents={items.map((item) => {
+            return {
+              component: { default: () => <NavigationItem {...item} /> }
+            }
+          })}
+        />
+      </ul>
+    </li>
+  );
+}
+
+NavigationItemGroup.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
+};

package/src/modules/cms/components/admin/NavigationItemGroup.scss

@@ -0,0 +1,34 @@
+.nav-item {
+    // Open, close transition
+    transition: all 0.9s ease-in-out;
+    &.closed {
+        // Close transition
+        transition: all 0.9s ease-in-out;
+        // Hide the children
+        .item-group {
+            display: none;
+        }
+    }
+    .item-group{
+        .nav-item {
+            > a {
+                padding-left: 2rem;
+            }
+        }
+    }
+}
+.root-label {
+    span:first-child {
+        padding-right: 10px;
+    }
+}
+.root-nav-item {
+    &:last-child {
+        position: fixed;
+        bottom: 0px;
+        left: 0px;
+        width: 200px;
+        background-color: rgba(246, 246, 247, 0.9882352941);
+        padding-bottom: 2rem;
+    }
+}

package/src/modules/cms/components/admin/PageHeading.js

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../../../lib/components/Area';
+import './PageHeading.scss';
+
+function BreadcrumbIcon({ backUrl }) {
+  if (!backUrl) return null;
+  return (
+    <a href={backUrl} className="breadcrum-icon border block border-border rounded mr-075">
+      <span className="flex items-center justify-center"><svg className="text-icon" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M17 9H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 11H17a1 1 0 1 0 0-2z" /></svg></span>
+    </a>
+  );
+}
+
+BreadcrumbIcon.propTypes = {
+  backUrl: PropTypes.string
+};
+
+BreadcrumbIcon.defaultProps = {
+  backUrl: undefined
+};
+
+function Heading({ heading }) {
+  return <div className="self-center"><h1 className="page-heading-title">{heading}</h1></div>;
+}
+
+Heading.propTypes = {
+  heading: PropTypes.string.isRequired
+};
+
+function PageHeading({ backUrl, heading }) {
+  if (!heading) { return null; }
+
+  return (
+    <div className="page-heading flex justify-between items-center">
+      <div className="flex justify-start space-x-1 items-center">
+        <Area
+          id="pageHeadingLeft"
+          noOuter
+          coreComponents={[
+            {
+              component: { default: BreadcrumbIcon },
+              props: {
+                backUrl
+              },
+              sortOrder: 0,
+              id: 'breadcrumb'
+            },
+            {
+              component: { default: Heading },
+              props: {
+                heading
+              },
+              sortOrder: 0,
+              id: 'heading'
+            }
+          ]}
+        />
+      </div>
+      <div className="flex justify-end space-x-1 items-center">
+        <Area
+          id="pageHeadingRight"
+          noOuter
+          coreComponents={[]}
+        />
+      </div>
+    </div>
+  );
+}
+
+PageHeading.propTypes = {
+  backUrl: PropTypes.string
+};
+
+PageHeading.defaultProps = {
+  backUrl: undefined
+};
+
+export default PageHeading;

package/src/modules/cms/components/admin/PageHeading.scss

@@ -0,0 +1,19 @@
+.page-heading {
+    margin: 1.6rem auto 2rem;
+    h1 {
+        font-size: 2rem;
+        font-weight: 600;
+    }
+}
+.breadcrum-icon {
+    width: 3.4rem;
+    height: 3.4rem;
+    span {
+        width: 100%;
+        height: 100%;
+        svg {
+            fill: var(--icon);
+            width: 65%;
+        }
+    }
+}

package/src/modules/cms/components/admin/Title.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function Title({ title }) {
+  return <h3 className="page-title">{title}</h3>;
+}
+
+Title.propTypes = {
+  title: PropTypes.string.isRequired
+};