@@ -1,79 +1,79 @@
|
||||
import { useQuery } from "@apollo/client";
|
||||
import { List, Button, Drawer } from "antd";
|
||||
import {useQuery} from "@apollo/client";
|
||||
import {Button, Drawer, List} from "antd";
|
||||
import React from "react";
|
||||
import { QUERY_CUSTOM_TEMPLATES } from "../../graphql/templates.queries";
|
||||
import {QUERY_CUSTOM_TEMPLATES} from "../../graphql/templates.queries";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import Skeleton from "../loading-skeleton/loading-skeleton.component";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {useLocation, useNavigate} from "react-router-dom";
|
||||
import queryString from "query-string";
|
||||
import { TemplateList } from "../../utils/TemplateConstants";
|
||||
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({ openState }) {
|
||||
const [open, setOpen] = openState;
|
||||
const { loading, error, data, refetch } = useQuery(QUERY_CUSTOM_TEMPLATES, {
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
const { t } = useTranslation();
|
||||
const search = queryString.parse(useLocation().search);
|
||||
const history = useNavigate();
|
||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||
export default function ShopTemplatesListContainer({openState}) {
|
||||
const [open, setOpen] = openState;
|
||||
const {loading, error, data, refetch} = useQuery(QUERY_CUSTOM_TEMPLATES, {
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
const {t} = useTranslation();
|
||||
const search = queryString.parse(useLocation().search);
|
||||
const history = useNavigate();
|
||||
if (error) return <AlertComponent message={error.message} type="error"/>;
|
||||
|
||||
const handleEdit = (record) => {
|
||||
if (record) {
|
||||
if (record.id) {
|
||||
search.customTemplateId = record.id;
|
||||
history({ search: queryString.stringify(search) });
|
||||
}
|
||||
} else {
|
||||
delete search.customTemplateId;
|
||||
history({ search: queryString.stringify(search) });
|
||||
}
|
||||
};
|
||||
const handleEdit = (record) => {
|
||||
if (record) {
|
||||
if (record.id) {
|
||||
search.customTemplateId = record.id;
|
||||
history({search: queryString.stringify(search)});
|
||||
}
|
||||
} else {
|
||||
delete search.customTemplateId;
|
||||
history({search: queryString.stringify(search)});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
(<Drawer
|
||||
placement="left"
|
||||
width="25%"
|
||||
open={open}
|
||||
onClose={() => setOpen(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 rootStyle={{ display: "flex", flexDirection: "column" }}>
|
||||
<div>{TemplateList()[item.name].title}</div>
|
||||
<div>{TemplateList()[item.name].description}</div>
|
||||
<div>{TemplateList()[item.name].drivingid}</div>
|
||||
</div>
|
||||
</Skeleton>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Drawer>)
|
||||
);
|
||||
return (
|
||||
(<Drawer
|
||||
placement="left"
|
||||
width="25%"
|
||||
open={open}
|
||||
onClose={() => setOpen(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 rootStyle={{display: "flex", flexDirection: "column"}}>
|
||||
<div>{TemplateList()[item.name].title}</div>
|
||||
<div>{TemplateList()[item.name].description}</div>
|
||||
<div>{TemplateList()[item.name].drivingid}</div>
|
||||
</div>
|
||||
</Skeleton>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Drawer>)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user