@evershop/evershop 1.0.0-beta

package/src/modules/cms/pages/admin/all/SearchBox.js

@@ -0,0 +1,149 @@
+import PropTypes from 'prop-types';
+import React, { useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import { Input } from '../../../../../lib/components/form/fields/Input';
+import { get } from '../../../../../lib/util/get';
+import { NoResult } from './search/NoResult';
+import { Results } from './search/Results';
+import './SearchBox.scss';
+
+const useClickOutside = (ref, callback) => {
+  const handleClick = (e) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+  React.useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  });
+};
+
+export default function SearchBox({ searchAPI, resourceLinks }) {
+  const InputRef = useRef();
+  const [showResult, setShowResult] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [results, setResults] = useState([]);
+  const [typeTimeout, setTypeTimeout] = React.useState(null);
+
+  const clickRef = React.useRef();
+  const onClickOutside = () => {
+    if (InputRef.current !== document.activeElement) {
+      setShowResult(false);
+    }
+  };
+  useClickOutside(clickRef, onClickOutside);
+
+  const search = () => {
+    setLoading(true);
+    if (!InputRef.current.value) {
+      setResults([]);
+      setLoading(false);
+      return;
+    }
+    if (typeTimeout) clearTimeout(typeTimeout);
+    setTypeTimeout(setTimeout(() => {
+      const url = new URL(searchAPI, window.location.origin);
+      url.searchParams.set('keyword', InputRef.current.value);
+
+      fetch(
+        url,
+        {
+          method: 'GET',
+          headers: {
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        }
+      ).then((response) => {
+        if (!response.headers.get('content-type') || !response.headers.get('content-type').includes('application/json')) { throw new TypeError('Something wrong. Please try again'); }
+
+        return response.json();
+      })
+        .then((response) => {
+          if (get(response, 'success') === true) {
+            setResults(get(response, 'data.payload', []));
+          } else {
+            setResults([]);
+          }
+        })
+        .catch(
+          (error) => {
+            toast.error(error.message);
+          }
+        )
+        .finally(() => {
+          // e.target.value = null
+          setLoading(false);
+        });
+    }, 1500));
+  };
+
+  return (
+    <div className="search-box">
+      <Input
+        prefix={(
+          <svg xmlns="http://www.w3.org/2000/svg" style={{ width: '1.8rem', height: '1.8rem' }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        )}
+        placeholder="Search"
+        ref={InputRef}
+        onChange={() => search()}
+        onFocus={() => { setShowResult(true); }}
+      />
+      {showResult === true && (
+        <div className="search-result" ref={clickRef}>
+          {loading === true && (
+            <div className="loading">
+              <svg style={{ background: 'rgb(255, 255, 255, 0)', display: 'block', shapeRendering: 'auto' }} width="2rem" height="2rem" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+                <circle cx="50" cy="50" fill="none" stroke="var(--primary)" strokeWidth="10" r="43" strokeDasharray="202.63272615654165 69.54424205218055">
+                  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1" />
+                </circle>
+              </svg>
+            </div>
+          )}
+          {(!InputRef.current.value) && <div className="text-center"><span>Search for products, order and other resources</span></div>}
+          {(results.length === 0
+            && InputRef.current.value && loading === false)
+            && (
+              <NoResult
+                keyword={InputRef.current && InputRef.current.value}
+                resourseLinks={resourceLinks}
+              />
+            )}
+          {results.length > 0 && (
+            <Results
+              keyword={InputRef.current && InputRef.current.value}
+              results={results}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+SearchBox.propTypes = {
+  resourceLinks: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string,
+    name: PropTypes.string
+  })),
+  searchAPI: PropTypes.string.isRequired
+};
+
+SearchBox.defaultProps = {
+  resourceLinks: []
+};
+
+export const layout = {
+  areaId: 'header',
+  sortOrder: 20
+}
+
+export const query = `
+  query Query {
+    searchAPI: url(routeId: "search")
+  }
+`

package/src/modules/cms/pages/admin/all/SearchBox.scss

@@ -0,0 +1,65 @@
+.search-box {
+    align-self: center;
+    margin-left: 23.3rem;
+    width: 55rem;
+    position: relative;
+    .field-wrapper {
+        background-color: #f1f2f3;
+        border-radius: 3px;
+    }
+    .field-border {
+        border-color: #f1f2f3 !important;
+    }
+    .field-prefix {
+        padding-left: 0.85rem;
+    }
+    .search-result {
+        position: absolute;
+        top: calc(100% + 1rem);
+        left: 0;
+        background-color: #202123;
+        border-radius: 5px;
+        width: 100%;
+        color: #999fa4;
+        padding: 2rem 1rem;
+        .loading {
+            color: var(--primary);
+            position: absolute;
+            top: calc(50% - 1rem);
+            left: calc(50% - 1rem);
+        }
+    }
+    .no-result {
+        h3 {
+            font-size: 2.6rem;
+            color: white;
+        }
+    }
+    .results {
+        max-height: 20rem;
+        overflow-y: auto;
+        h3 {
+            color: white;
+            font-size: 2.6rem;
+        }
+        .result-category {
+            text-transform: uppercase;
+        }
+        .item-list {
+            margin-top: 1rem;
+            .result-category {
+                margin-bottom: 5px;
+            }
+            .item-category {
+                a {
+                    margin-top: 2px;
+                    border-radius: 3px;
+                    padding: 3px 10px;
+                    &:hover {
+                        background-color: #2f3133;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/modules/cms/pages/admin/all/search/NoResult.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Dot from '../../../../../../lib/components/Dot';
+
+export function NoResult({ keyword, resourseLinks = [] }) {
+  return (
+    <div className="no-result items-center text-center">
+      <h3>
+        No results for &quot;
+        {keyword}
+        &quot;
+      </h3>
+      <div>TRY OTHER RESOURCES</div>
+      <div className="grid grid-cols-2 mt-1">
+        {resourseLinks.map((link, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <div key={index} className="flex space-x-1 justify-center items-center">
+            <Dot variant="info" />
+            <a href={link.url} className="text-divider hover:underline">{link.name}</a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+NoResult.propTypes = {
+  keyword: PropTypes.string,
+  resourseLinks: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string,
+    name: PropTypes.string
+  }))
+};
+
+NoResult.defaultProps = {
+  keyword: '',
+  resourseLinks: undefined
+};

package/src/modules/cms/pages/admin/all/search/Results.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export function Results({ keyword, results = [] }) {
+  return (
+    <div className="results">
+      <h3>
+        Results for &quot;
+        {keyword}
+        &quot;
+      </h3>
+      <div className="item-list">
+        {results.map((category, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <div key={index} className="item-category flex flex-col space-x-1">
+            <div className="result-category">{category.name}</div>
+            {category.items.map((item, key) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <a href={item.url} key={key}>
+                <div className="font-bold">{item.name}</div>
+                <div>{item.description}</div>
+              </a>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+Results.propTypes = {
+  keyword: PropTypes.string,
+  results: PropTypes.arrayOf(PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.shape({
+      url: PropTypes.string,
+      name: PropTypes.string,
+      description: PropTypes.string
+    }))
+  }))
+};
+
+Results.defaultProps = {
+  keyword: undefined,
+  results: []
+};

package/src/modules/cms/pages/admin/all/tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/modules/cms/pages/admin/cmsPageEdit/index.js

@@ -0,0 +1,27 @@
+const { select } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../../../lib/mysql/connection');
+const { setContextValue } = require('../../../../graphql/services/contextHelper');
+
+module.exports = async (request, response, delegate, next) => {
+  try {
+    const query = select();
+    query.from('cms_page')
+    query.andWhere('cms_page.`cms_page_id`', '=', request.params.id);
+    query.leftJoin('cms_page_description').on('cms_page_description.`cms_page_description_cms_page_id`', '=', 'cms_page.`cms_page_id`')
+    const cmsPage = await query.load(pool);
+
+    if (cmsPage === null) {
+      response.status(404);
+      next();
+    } else {
+      setContextValue(request, 'cmsPageId', cmsPage.cms_page_id);
+      setContextValue(request, 'pageInfo', {
+        title: cmsPage.name,
+        description: cmsPage.name
+      });
+      next();
+    }
+  } catch (e) {
+    next(e);
+  }
+};

package/src/modules/cms/pages/admin/cmsPageEdit/route

@@ -0,0 +1,2 @@
+GET
+/pages/edit/:id(\\d+)

package/src/modules/cms/pages/admin/cmsPageEdit+cmsPageNew/General.js

@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import { get } from '../../../../../lib/util/get';
+import { Field } from '../../../../../lib/components/form/Field';
+import { TextArea } from '../../../../../lib/components/form/fields/Textarea';
+import { Card } from '../../../components/admin/Card';
+
+export default function General({
+  page, browserApi, deleteApi, uploadApi, folderCreateApi
+}) {
+  const fields = [
+    {
+      component: { default: Field },
+      props: {
+        type: 'text',
+        id: 'name',
+        name: 'name',
+        label: 'Name',
+        placeholder: 'Name',
+        validationRules: ['notEmpty']
+      },
+      sortOrder: 10
+    },
+    {
+      component: { default: Field },
+      props: {
+        id: 'cmsPageId',
+        name: 'cms_page_id',
+        type: 'hidden'
+      },
+      sortOrder: 10
+    },
+    {
+      component: { default: Field },
+      props: {
+        type: 'radio',
+        id: 'status',
+        name: 'status',
+        label: 'Status',
+        options: [{ value: 0, text: 'Disabled' }, { value: 1, text: 'Enabled' }]
+      },
+      sortOrder: 20
+    },
+    {
+      component: { default: TextArea },
+      props: {
+        id: 'content',
+        name: 'content',
+        label: 'Content',
+        browserApi,
+        deleteApi,
+        uploadApi,
+        folderCreateApi
+      },
+      sortOrder: 30
+    }
+  ].filter((f) => {
+    // eslint-disable-next-line no-param-reassign
+    if (get(page, `${f.props.id}`) !== undefined) { f.props.value = get(page, `${f.props.id}`); }
+    return f;
+  });
+
+  return (
+    <Card title="General">
+      <Card.Session>
+        <Area id="pageEditGeneral" coreComponents={fields} />
+      </Card.Session>
+    </Card>
+  );
+}
+
+General.propTypes = {
+  browserApi: PropTypes.string.isRequired,
+  deleteApi: PropTypes.string.isRequired,
+  folderCreateApi: PropTypes.string.isRequired,
+  uploadApi: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'leftSide',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    page: cmsPage(id: getContextValue("cmsPageId", null)) {
+      cmsPageId
+      name
+      content
+      status
+    }
+    browserApi: url(routeId: "fileBrowser", params: [{key: "0", value: ""}])
+    deleteApi: url(routeId: "fileDelete", params: [{key: "0", value: ""}])
+    uploadApi: url(routeId: "fileDelete", params: [{key: "0", value: ""}])
+    folderCreateApi: url(routeId: "imageUpload", params: [{key: "0", value: ""}])
+  }
+`;

package/src/modules/cms/pages/admin/cmsPageEdit+cmsPageNew/PageEditForm.js

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import Button from '../../../../../lib/components/form/Button';
+import { Form } from '../../../../../lib/components/form/Form';
+
+export default function CMSPageEditForm({
+  action, gridUrl
+}) {
+  const id = 'CMSPageEditForm'
+  return (
+    <Form
+      method={"POST"}
+      action={action}
+      submitBtn={false}
+      id={id}
+    >
+      <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">
+          <Area id="leftSide" noOuter />
+        </div>
+
+        <div className="col-span-1 grid grid-cols-1 gap-2 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">
+        <Button
+          title="Cancel"
+          variant="critical"
+          outline
+          onAction={
+            () => {
+              window.location = gridUrl;
+            }
+          }
+        />
+        <Button
+          title="Save"
+          onAction={
+            () => { document.getElementById(id).dispatchEvent(new Event('submit', { cancelable: true, bubbles: true })); }
+          }
+        />
+      </div>
+    </Form>
+  );
+}
+
+CMSPageEditForm.propTypes = {
+  action: PropTypes.string.isRequired,
+  gridUrl: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    action: url(routeId: "cmsPageSavePost")
+    gridUrl: url(routeId: "cmsPageGrid")
+  }
+`;

package/src/modules/cms/pages/admin/cmsPageEdit+cmsPageNew/PageHeading.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PageHeading from '../../../../cms/components/admin/PageHeading';
+
+export default function PageEditPageHeading({ backUrl, page }) {
+  return <PageHeading backUrl={backUrl} heading={page ? `Editing ${page.name}` : `Create A New Page`} />
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 5
+}
+
+export const query = `
+  query Query {
+    page: cmsPage(id: getContextValue("cmsPageId", null)) {
+      name
+    }
+    backUrl: url(routeId: "cmsPageGrid")
+  }
+`

package/src/modules/cms/pages/admin/cmsPageEdit+cmsPageNew/Seo.js

@@ -0,0 +1,81 @@
+/* eslint-disable no-param-reassign */
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import { Field } from '../../../../../lib/components/form/Field';
+import { get } from '../../../../../lib/util/get';
+import { Card } from '../../../components/admin/Card';
+
+export default function Seo({ page }) {
+  const fields = [
+    {
+      component: { default: Field },
+      props: {
+        type: 'text',
+        id: 'urlKey',
+        name: 'url_key',
+        label: 'Url key',
+        validationRules: ['notEmpty']
+      },
+      sortOrder: 0
+    },
+    {
+      component: { default: Field },
+      props: {
+        type: 'text',
+        id: 'metaTitle',
+        name: 'meta_title',
+        label: 'Meta title',
+        placeholder: 'Meta title'
+      },
+      sortOrder: 10
+    },
+    {
+      component: { default: Field },
+      props: {
+        type: 'text',
+        id: 'metaKeywords',
+        name: 'meta_keywords',
+        label: 'Meta keywords',
+        placeholder: 'Meta keywords'
+      },
+      sortOrder: 20
+    },
+    {
+      component: { default: Field },
+      props: {
+        type: 'textarea',
+        id: 'metaDescription',
+        name: 'meta_description',
+        label: 'Meta description'
+      },
+      sortOrder: 30
+    }
+  ].filter((f) => {
+    if (get(page, `${f.props.id}`) !== undefined) { f.props.value = get(page, `${f.props.id}`); }
+    return f;
+  });
+
+  return (
+    <Card title="Search Engine Optimization">
+      <Card.Session>
+        <Area id="pageEditSeo" coreComponents={fields} />
+      </Card.Session>
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'leftSide',
+  sortOrder: 30
+}
+
+export const query = `
+  query Query {
+    page: cmsPage(id: getContextValue('cmsPageId', null)) {
+      urlKey
+      metaTitle
+      metaKeywords
+      metaDescription
+    }
+  }
+`