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

Rearranged shop template page to better handle previews & template editor BOD-126

Browse Source
This commit is contained in:
Patrick Fic
2020-09-04 15:03:01 -07:00
parent 051be83303
commit af8e39da75
8 changed files with 129 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
client/src/components/shop-templates-list/shop-templates-list.container.jsx
View File

@@ -1,5 +1,5 @@
import { useQuery } from "@apollo/react-hooks";
import { List, Button } from "antd";
import { List, Button, Drawer } from "antd";
import React from "react";
import { QUERY_CUSTOM_TEMPLATES } from "../../graphql/templates.queries";
import AlertComponent from "../alert/alert.component";
@@ -11,7 +11,8 @@ import { TemplateList } from "../../utils/TemplateConstants";
import ShopTemplateAdd from "../shop-template-add/shop-template-add.component";
import ShopTemplateDeleteComponent from "../shop-template-delete/shop-template-delete.component";
export default function ShopTemplatesListContainer() {
export default function ShopTemplatesListContainer({ visibleState }) {
const [visible, setVisible] = visibleState;
const { loading, error, data, refetch } = useQuery(QUERY_CUSTOM_TEMPLATES);
const { t } = useTranslation();
const search = queryString.parse(useLocation().search);
@@ -31,37 +32,44 @@ export default function ShopTemplatesListContainer() {
};
return (
<div>
<div>{t("bodyshop.labels.customtemplates")}</div>
<ShopTemplateAdd
shopTemplateList={data ? data.templates : []}
refetch={refetch}
/>
<List
loading={loading}
itemLayout="horizontal"
dataSource={data ? data.templates : []}
renderItem={(item) => (
<List.Item
actions={[
<Button onClick={() => handleEdit(item)}>
{t("general.actions.edit")}
</Button>,
<ShopTemplateDeleteComponent
templateId={item.id}
refetch={refetch}
/>,
]}
>
<Skeleton title={false} loading={item.loading} active>
<div style={{ display: "flex", flexDirection: "column" }}>
<div>{TemplateList[item.name].title}</div>
<div>{TemplateList[item.name].description}</div>
</div>
</Skeleton>
</List.Item>
)}
/>
</div>
<Drawer
placement="left"
width="25%"
visible={visible}
onClose={() => setVisible(false)}
>
<div>
<div>{t("bodyshop.labels.customtemplates")}</div>
<ShopTemplateAdd
shopTemplateList={data ? data.templates : []}
refetch={refetch}
/>
<List
loading={loading}
itemLayout="horizontal"
dataSource={data ? data.templates : []}
renderItem={(item) => (
<List.Item
actions={[
<Button onClick={() => handleEdit(item)}>
{t("general.actions.edit")}
</Button>,
<ShopTemplateDeleteComponent
templateId={item.id}
refetch={refetch}
/>,
]}
>
<Skeleton title={false} loading={item.loading} active>
<div style={{ display: "flex", flexDirection: "column" }}>
<div>{TemplateList[item.name].title}</div>
<div>{TemplateList[item.name].description}</div>
</div>
</Skeleton>
</List.Item>
)}
/>
</div>
</Drawer>
);
}