admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme change & layout updates. Removed template editor.

Browse Source
This commit is contained in:
Patrick Fic
2021-02-24 09:18:02 -08:00
parent 46014261d6
commit 57600a1e5a
7 changed files with 7117 additions and 8806 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15502
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
client/src/components/global-search/global-search.component.jsx
View File

@@ -142,15 +142,13 @@ export default function GlobalSearch() {
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<div> <AutoComplete
<AutoComplete dropdownMatchSelectWidth={false}
dropdownMatchSelectWidth={false} style={{ flex: 2 }}
style={{ width: 200 }} options={options}
options={options} onSearch={handleSearch}
onSearch={handleSearch} >
> <Input.Search loading={loading} />
<Input.Search loading={loading} /> </AutoComplete>
</AutoComplete>
</div>
); );
} }

23
client/src/components/header/header.component.jsx
View File

@@ -67,12 +67,11 @@ function Header({
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div style={{ display: "flex" }}> <div style={{ display: "flex", alignItems: "center" }}>
<Menu <Menu
mode="horizontal" mode="horizontal"
theme="dark" // theme="dark"
style={{ flex: 1 }} style={{ flex: 5 }}
className="header-main-menu"
selectedKeys={[selectedHeader]} selectedKeys={[selectedHeader]}
onClick={handleMenuClick} onClick={handleMenuClick}
subMenuCloseDelay={0.3} subMenuCloseDelay={0.3}
@@ -271,11 +270,13 @@ function Header({
{t("menus.header.temporarydocs")} {t("menus.header.temporarydocs")}
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="shop-templates"> {
<Link to="/manage/shop/templates"> // <Menu.Item key="shop-templates">
{t("menus.header.shop_templates")} // <Link to="/manage/shop/templates">
</Link> // {t("menus.header.shop_templates")}
</Menu.Item> // </Link>
// </Menu.Item>
}
<Menu.Item <Menu.Item
key="reportcenter" key="reportcenter"
onClick={() => { onClick={() => {
@@ -300,8 +301,8 @@ function Header({
<GlobalSearch /> <GlobalSearch />
<Menu <Menu
mode="horizontal" mode="horizontal"
theme="dark" // theme="dark"
className="header-main-menu"
selectedKeys={[selectedHeader]} selectedKeys={[selectedHeader]}
onClick={handleMenuClick} onClick={handleMenuClick}
> >

178
client/src/components/shop-template-editor/shop-template-editor.component.jsx
View File

@@ -1,94 +1,94 @@
// import "codemirror-graphql/hint"; // // import "codemirror-graphql/hint";
// import "codemirror-graphql/lint"; // // import "codemirror-graphql/lint";
// import "codemirror-graphql/mode"; // // import "codemirror-graphql/mode";
// import "codemirror/addon/hint/show-hint"; // // import "codemirror/addon/hint/show-hint";
// import "codemirror/addon/lint/lint"; // // import "codemirror/addon/lint/lint";
// import "codemirror/lib/codemirror.css"; // // import "codemirror/lib/codemirror.css";
// import "codemirror/theme/material.css"; // // import "codemirror/theme/material.css";
import React, { useEffect, useRef, useState } from "react"; // import React, { useEffect, useRef, useState } from "react";
import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component"; // import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component";
import ShopTemplateTestRender from "../shop-template-test-render/shop-template-test-render.component"; // import ShopTemplateTestRender from "../shop-template-test-render/shop-template-test-render.component";
export default function ShopTemplateEditorComponent({ // export default function ShopTemplateEditorComponent({
templateId, // templateId,
html, // html,
gql, // gql,
json, // json,
editorState, // editorState,
}) { // }) {
const [editorContent, seteditorContent] = editorState; // const [editorContent, seteditorContent] = editorState;
const [editorLoaded, setEditorLoaded] = useState(false); // const [editorLoaded, setEditorLoaded] = useState(false);
const emailEditorRef = useRef(null); // const emailEditorRef = useRef(null);
useEffect(() => { // useEffect(() => {
if (json && Object.keys(json).length > 0 && editorLoaded) { // if (json && Object.keys(json).length > 0 && editorLoaded) {
console.log(emailEditorRef.current, !!emailEditorRef.current.loadDesign); // console.log(emailEditorRef.current, !!emailEditorRef.current.loadDesign);
emailEditorRef.current.loadDesign(json); // emailEditorRef.current.loadDesign(json);
} // }
}, [json, emailEditorRef, editorLoaded]); // }, [json, emailEditorRef, editorLoaded]);
useEffect(() => { // useEffect(() => {
seteditorContent((prevstate) => { // seteditorContent((prevstate) => {
return { ...prevstate, gql: gql }; // return { ...prevstate, gql: gql };
}); // });
}, [gql, seteditorContent]); // }, [gql, seteditorContent]);
return ( // return (
<div> // <div>
{ // {
// <EmailEditor // // <EmailEditor
// style={{ width: "100%" }} // // style={{ width: "100%" }}
// ref={emailEditorRef} // // ref={emailEditorRef}
// minHeight="700px" // // minHeight="700px"
// onLoad={() => setEditorLoaded(true)} // // onLoad={() => setEditorLoaded(true)}
// options={{ // // options={{
// // customCSS: [ // // // customCSS: [
// // window.location.protocol + // // // window.location.protocol +
// // "//" + // // // "//" +
// // window.location.host + // // // window.location.host +
// // "/render-styles.css", // // // "/render-styles.css",
// // ], // // // ],
// customJS: [ // // customJS: [
// window.location.protocol + // // window.location.protocol +
// "//" + // // "//" +
// window.location.host + // // window.location.host +
// "/editor.js", // // "/editor.js",
// ], // // ],
// }} // // }}
// /> // // />
} // }
<div style={{ display: "flex", width: "90vw", margin: "2rem" }}> // <div style={{ display: "flex", width: "90vw", margin: "2rem" }}>
{ // {
// <CmEditor // // <CmEditor
// style={{ flex: 1 }} // // style={{ flex: 1 }}
// value={editorContent.gql} // // value={editorContent.gql}
// options={{ // // options={{
// mode: "graphql", // // mode: "graphql",
// lint: { // // lint: {
// schema: GqlSchema, // // schema: GqlSchema,
// }, // // },
// hintOptions: { // // hintOptions: {
// schema: GqlSchema, // // schema: GqlSchema,
// }, // // },
// lineNumbers: true, // // lineNumbers: true,
// }} // // }}
// onBeforeChange={(editor, data, value) => { // // onBeforeChange={(editor, data, value) => {
// seteditorContent({ ...editorContent, gql: value }); // // seteditorContent({ ...editorContent, gql: value });
// }} // // }}
// /> // // />
} // }
<ShopTemplateTestRender // <ShopTemplateTestRender
style={{ flex: 1 }} // style={{ flex: 1 }}
query={editorContent.gql} // query={editorContent.gql}
emailEditorRef={emailEditorRef} // emailEditorRef={emailEditorRef}
/> // />
<ShopTemplateEditorSaveButton // <ShopTemplateEditorSaveButton
templateId={templateId} // templateId={templateId}
gql={editorContent.gql} // gql={editorContent.gql}
emailEditorRef={emailEditorRef} // emailEditorRef={emailEditorRef}
/> // />
</div> // </div>
</div> // </div>
); // );
} // }

74
client/src/components/shop-template-editor/shop-template-editor.container.jsx
View File

@@ -1,41 +1,41 @@
import { useQuery } from "@apollo/client"; // import { useQuery } from "@apollo/client";
import queryString from "query-string"; // import queryString from "query-string";
import React, { useState } from "react"; // import React, { useState } from "react";
import { useLocation } from "react-router-dom"; // import { useLocation } from "react-router-dom";
import { QUERY_TEMPLATE_BY_PK } from "../../graphql/templates.queries"; // import { QUERY_TEMPLATE_BY_PK } from "../../graphql/templates.queries";
import AlertComponent from "../alert/alert.component"; // import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component"; // import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import ShopTemplateEditorComponent from "./shop-template-editor.component"; // import ShopTemplateEditorComponent from "./shop-template-editor.component";
export default function ShopTemplateEditorContainer() { // export default function ShopTemplateEditorContainer() {
const search = queryString.parse(useLocation().search); // const search = queryString.parse(useLocation().search);
const editorState = useState({ html: "", gql: "" }); // const editorState = useState({ html: "", gql: "" });
const { loading, error, data } = useQuery(QUERY_TEMPLATE_BY_PK, { // const { loading, error, data } = useQuery(QUERY_TEMPLATE_BY_PK, {
variables: { // variables: {
templateId: search.customTemplateId, // templateId: search.customTemplateId,
}, // },
skip: !!!search.customTemplateId, // skip: !!!search.customTemplateId,
}); // });
if (!!!search.customTemplateId) return <span>No selection.</span>; // if (!!!search.customTemplateId) return <span>No selection.</span>;
if (error) return <AlertComponent message={error.message} type="error" />; // if (error) return <AlertComponent message={error.message} type="error" />;
return ( // return (
<div> // <div>
{loading ? ( // {loading ? (
<LoadingSpinner /> // <LoadingSpinner />
) : ( // ) : (
<ShopTemplateEditorComponent // <ShopTemplateEditorComponent
templateId={search.customTemplateId} // templateId={search.customTemplateId}
json={ // json={
data && data.templates_by_pk && data.templates_by_pk.jsontemplate // data && data.templates_by_pk && data.templates_by_pk.jsontemplate
} // }
gql={data && data.templates_by_pk ? data.templates_by_pk.query : ""} // gql={data && data.templates_by_pk ? data.templates_by_pk.query : ""}
editorState={editorState} // editorState={editorState}
/> // />
)} // )}
{data && data.templates_by_pk ? data.templates_by_pk.name : ""} // {data && data.templates_by_pk ? data.templates_by_pk.name : ""}
</div> // </div>
); // );
} // }

24
client/src/pages/manage/manage.page.component.jsx
View File

@@ -1,6 +1,7 @@
import { Elements } from "@stripe/react-stripe-js"; import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js"; import { loadStripe } from "@stripe/stripe-js";
import { BackTop, Layout } from "antd"; import { BackTop, Layout } from "antd";
import preval from "preval.macro";
import React, { lazy, Suspense, useEffect } from "react"; import React, { lazy, Suspense, useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -11,7 +12,6 @@ import ChatAffixContainer from "../../components/chat-affix/chat-affix.container
import ConflictComponent from "../../components/conflict/conflict.component"; import ConflictComponent from "../../components/conflict/conflict.component";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component"; import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
import FcmNotification from "../../components/fcm-notification/fcm-notification.component"; import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
import preval from "preval.macro";
//import FooterComponent from "../../components/footer/footer.component"; //import FooterComponent from "../../components/footer/footer.component";
//Component Imports //Component Imports
import HeaderContainer from "../../components/header/header.container"; import HeaderContainer from "../../components/header/header.container";
@@ -100,9 +100,9 @@ const ProductionListPage = lazy(() =>
const ProductionBoardPage = lazy(() => const ProductionBoardPage = lazy(() =>
import("../production-board/production-board.container") import("../production-board/production-board.container")
); );
const ShopTemplates = lazy(() => // const ShopTemplates = lazy(() =>
import("../shop-templates/shop-templates.container") // import("../shop-templates/shop-templates.container")
); // );
const JobIntake = lazy(() => const JobIntake = lazy(() =>
import("../jobs-intake/jobs-intake.page.container") import("../jobs-intake/jobs-intake.page.container")
); );
@@ -177,7 +177,7 @@ export function Manage({ match, conflict }) {
return ( return (
<Layout className="layout-container"> <Layout className="layout-container">
<Header> <Header style={{ backgroundColor: "#fff" }}>
<HeaderContainer /> <HeaderContainer />
</Header> </Header>
<Content className="content-container"> <Content className="content-container">
@@ -342,11 +342,15 @@ export function Manage({ match, conflict }) {
component={JobsAvailablePage} component={JobsAvailablePage}
/> />
<Route exact path={`${match.path}/shop/`} component={ShopPage} /> <Route exact path={`${match.path}/shop/`} component={ShopPage} />
<Route
exact {
path={`${match.path}/shop/templates`} // <Route
component={ShopTemplates} // exact
/> // path={`${match.path}/shop/templates`}
// component={ShopTemplates}
// />
}
<Route <Route
exact exact
path={`${match.path}/shop/vendors`} path={`${match.path}/shop/vendors`}

104
client/src/pages/shop-templates/shop-templates.container.js
View File

@@ -1,56 +1,56 @@
import { Button } from "antd"; // import { Button } from "antd";
import React, { useEffect, useState } from "react"; // import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; // import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; // import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; // import { createStructuredSelector } from "reselect";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; // import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
import ShopTemplateEditor from "../../components/shop-template-editor/shop-template-editor.container"; // import ShopTemplateEditor from "../../components/shop-template-editor/shop-template-editor.container";
import ShopTemplatesListContainer from "../../components/shop-templates-list/shop-templates-list.container"; // import ShopTemplatesListContainer from "../../components/shop-templates-list/shop-templates-list.container";
import { // import {
setBreadcrumbs, // setBreadcrumbs,
setSelectedHeader, // setSelectedHeader,
} from "../../redux/application/application.actions"; // } from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors"; // import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({ // const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, // bodyshop: selectBodyshop,
}); // });
const mapDispatchToProps = (dispatch) => ({ // const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), // setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), // setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
}); // });
export function ShopTemplatesContainer({ // export function ShopTemplatesContainer({
setBreadcrumbs, // setBreadcrumbs,
bodyshop, // bodyshop,
setSelectedHeader, // setSelectedHeader,
}) { // }) {
const { t } = useTranslation(); // const { t } = useTranslation();
const drawerVisibility = useState(false); // const drawerVisibility = useState(false);
useEffect(() => { // useEffect(() => {
document.title = t("titles.shop-templates"); // document.title = t("titles.shop-templates");
setSelectedHeader("shop-templates"); // setSelectedHeader("shop-templates");
setBreadcrumbs([ // setBreadcrumbs([
{ // {
link: "/manage/shop", // link: "/manage/shop",
label: t("titles.bc.shop", { shopname: bodyshop.shopname }), // label: t("titles.bc.shop", { shopname: bodyshop.shopname }),
}, // },
{ link: "/manage/shop/templates", label: t("titles.bc.shop-templates") }, // { link: "/manage/shop/templates", label: t("titles.bc.shop-templates") },
]); // ]);
}, [t, setBreadcrumbs, bodyshop.shopname, setSelectedHeader]); // }, [t, setBreadcrumbs, bodyshop.shopname, setSelectedHeader]);
return ( // return (
<RbacWrapper action="shop:templates"> // <RbacWrapper action="shop:templates">
<div> // <div>
<ShopTemplatesListContainer visibleState={drawerVisibility} /> // <ShopTemplatesListContainer visibleState={drawerVisibility} />
<Button onClick={() => drawerVisibility[1](true)}>Show List</Button> // <Button onClick={() => drawerVisibility[1](true)}>Show List</Button>
<ShopTemplateEditor /> // <ShopTemplateEditor />
</div> // </div>
</RbacWrapper> // </RbacWrapper>
); // );
} // }
export default connect( // export default connect(
mapStateToProps, // mapStateToProps,
mapDispatchToProps // mapDispatchToProps
)(ShopTemplatesContainer); // )(ShopTemplatesContainer);