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

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" />;
return (
<div>
<AutoComplete
dropdownMatchSelectWidth={false}
style={{ width: 200 }}
options={options}
onSearch={handleSearch}
>
<Input.Search loading={loading} />
</AutoComplete>
</div>
<AutoComplete
dropdownMatchSelectWidth={false}
style={{ flex: 2 }}
options={options}
onSearch={handleSearch}
>
<Input.Search loading={loading} />
</AutoComplete>
);
}

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

@@ -67,12 +67,11 @@ function Header({
const { t } = useTranslation();
return (
<div style={{ display: "flex" }}>
<div style={{ display: "flex", alignItems: "center" }}>
<Menu
mode="horizontal"
theme="dark"
style={{ flex: 1 }}
className="header-main-menu"
// theme="dark"
style={{ flex: 5 }}
selectedKeys={[selectedHeader]}
onClick={handleMenuClick}
subMenuCloseDelay={0.3}
@@ -271,11 +270,13 @@ function Header({
{t("menus.header.temporarydocs")}
</Link>
</Menu.Item>
<Menu.Item key="shop-templates">
<Link to="/manage/shop/templates">
{t("menus.header.shop_templates")}
</Link>
</Menu.Item>
{
// <Menu.Item key="shop-templates">
// <Link to="/manage/shop/templates">
// {t("menus.header.shop_templates")}
// </Link>
// </Menu.Item>
}
<Menu.Item
key="reportcenter"
onClick={() => {
@@ -300,8 +301,8 @@ function Header({
<GlobalSearch />
<Menu
mode="horizontal"
theme="dark"
className="header-main-menu"
// theme="dark"
selectedKeys={[selectedHeader]}
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/lint";
// import "codemirror-graphql/mode";
// import "codemirror/addon/hint/show-hint";
// import "codemirror/addon/lint/lint";
// import "codemirror/lib/codemirror.css";
// import "codemirror/theme/material.css";
import React, { useEffect, useRef, useState } from "react";
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 "codemirror-graphql/hint";
// // import "codemirror-graphql/lint";
// // import "codemirror-graphql/mode";
// // import "codemirror/addon/hint/show-hint";
// // import "codemirror/addon/lint/lint";
// // import "codemirror/lib/codemirror.css";
// // import "codemirror/theme/material.css";
// import React, { useEffect, useRef, useState } from "react";
// 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";
export default function ShopTemplateEditorComponent({
templateId,
html,
gql,
json,
editorState,
}) {
const [editorContent, seteditorContent] = editorState;
const [editorLoaded, setEditorLoaded] = useState(false);
const emailEditorRef = useRef(null);
// export default function ShopTemplateEditorComponent({
// templateId,
// html,
// gql,
// json,
// editorState,
// }) {
// const [editorContent, seteditorContent] = editorState;
// const [editorLoaded, setEditorLoaded] = useState(false);
// const emailEditorRef = useRef(null);
useEffect(() => {
if (json && Object.keys(json).length > 0 && editorLoaded) {
console.log(emailEditorRef.current, !!emailEditorRef.current.loadDesign);
emailEditorRef.current.loadDesign(json);
}
}, [json, emailEditorRef, editorLoaded]);
// useEffect(() => {
// if (json && Object.keys(json).length > 0 && editorLoaded) {
// console.log(emailEditorRef.current, !!emailEditorRef.current.loadDesign);
// emailEditorRef.current.loadDesign(json);
// }
// }, [json, emailEditorRef, editorLoaded]);
useEffect(() => {
seteditorContent((prevstate) => {
return { ...prevstate, gql: gql };
});
}, [gql, seteditorContent]);
// useEffect(() => {
// seteditorContent((prevstate) => {
// return { ...prevstate, gql: gql };
// });
// }, [gql, seteditorContent]);
return (
<div>
{
// <EmailEditor
// style={{ width: "100%" }}
// ref={emailEditorRef}
// minHeight="700px"
// onLoad={() => setEditorLoaded(true)}
// options={{
// // customCSS: [
// // window.location.protocol +
// // "//" +
// // window.location.host +
// // "/render-styles.css",
// // ],
// customJS: [
// window.location.protocol +
// "//" +
// window.location.host +
// "/editor.js",
// ],
// }}
// />
}
// return (
// <div>
// {
// // <EmailEditor
// // style={{ width: "100%" }}
// // ref={emailEditorRef}
// // minHeight="700px"
// // onLoad={() => setEditorLoaded(true)}
// // options={{
// // // customCSS: [
// // // window.location.protocol +
// // // "//" +
// // // window.location.host +
// // // "/render-styles.css",
// // // ],
// // customJS: [
// // window.location.protocol +
// // "//" +
// // window.location.host +
// // "/editor.js",
// // ],
// // }}
// // />
// }
<div style={{ display: "flex", width: "90vw", margin: "2rem" }}>
{
// <CmEditor
// style={{ flex: 1 }}
// value={editorContent.gql}
// options={{
// mode: "graphql",
// lint: {
// schema: GqlSchema,
// },
// hintOptions: {
// schema: GqlSchema,
// },
// lineNumbers: true,
// }}
// onBeforeChange={(editor, data, value) => {
// seteditorContent({ ...editorContent, gql: value });
// }}
// />
}
<ShopTemplateTestRender
style={{ flex: 1 }}
query={editorContent.gql}
emailEditorRef={emailEditorRef}
/>
<ShopTemplateEditorSaveButton
templateId={templateId}
gql={editorContent.gql}
emailEditorRef={emailEditorRef}
/>
</div>
</div>
);
}
// <div style={{ display: "flex", width: "90vw", margin: "2rem" }}>
// {
// // <CmEditor
// // style={{ flex: 1 }}
// // value={editorContent.gql}
// // options={{
// // mode: "graphql",
// // lint: {
// // schema: GqlSchema,
// // },
// // hintOptions: {
// // schema: GqlSchema,
// // },
// // lineNumbers: true,
// // }}
// // onBeforeChange={(editor, data, value) => {
// // seteditorContent({ ...editorContent, gql: value });
// // }}
// // />
// }
// <ShopTemplateTestRender
// style={{ flex: 1 }}
// query={editorContent.gql}
// emailEditorRef={emailEditorRef}
// />
// <ShopTemplateEditorSaveButton
// templateId={templateId}
// gql={editorContent.gql}
// emailEditorRef={emailEditorRef}
// />
// </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 queryString from "query-string";
import React, { useState } from "react";
import { useLocation } from "react-router-dom";
import { QUERY_TEMPLATE_BY_PK } from "../../graphql/templates.queries";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import ShopTemplateEditorComponent from "./shop-template-editor.component";
// import { useQuery } from "@apollo/client";
// import queryString from "query-string";
// import React, { useState } from "react";
// import { useLocation } from "react-router-dom";
// import { QUERY_TEMPLATE_BY_PK } from "../../graphql/templates.queries";
// import AlertComponent from "../alert/alert.component";
// import LoadingSpinner from "../loading-spinner/loading-spinner.component";
// import ShopTemplateEditorComponent from "./shop-template-editor.component";
export default function ShopTemplateEditorContainer() {
const search = queryString.parse(useLocation().search);
const editorState = useState({ html: "", gql: "" });
// export default function ShopTemplateEditorContainer() {
// const search = queryString.parse(useLocation().search);
// const editorState = useState({ html: "", gql: "" });
const { loading, error, data } = useQuery(QUERY_TEMPLATE_BY_PK, {
variables: {
templateId: search.customTemplateId,
},
skip: !!!search.customTemplateId,
});
// const { loading, error, data } = useQuery(QUERY_TEMPLATE_BY_PK, {
// variables: {
// templateId: search.customTemplateId,
// },
// skip: !!!search.customTemplateId,
// });
if (!!!search.customTemplateId) return <span>No selection.</span>;
if (error) return <AlertComponent message={error.message} type="error" />;
// if (!!!search.customTemplateId) return <span>No selection.</span>;
// if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div>
{loading ? (
<LoadingSpinner />
) : (
<ShopTemplateEditorComponent
templateId={search.customTemplateId}
json={
data && data.templates_by_pk && data.templates_by_pk.jsontemplate
}
gql={data && data.templates_by_pk ? data.templates_by_pk.query : ""}
editorState={editorState}
/>
)}
{data && data.templates_by_pk ? data.templates_by_pk.name : ""}
</div>
);
}
// return (
// <div>
// {loading ? (
// <LoadingSpinner />
// ) : (
// <ShopTemplateEditorComponent
// templateId={search.customTemplateId}
// json={
// data && data.templates_by_pk && data.templates_by_pk.jsontemplate
// }
// gql={data && data.templates_by_pk ? data.templates_by_pk.query : ""}
// editorState={editorState}
// />
// )}
// {data && data.templates_by_pk ? data.templates_by_pk.name : ""}
// </div>
// );
// }