bananas-commerce-admin
Version:
What's this, an admin for apes?
87 lines • 6.22 kB
JavaScript
import React, { useState } from "react";
import CategoryOutlinedIcon from "@mui/icons-material/CategoryOutlined";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import { TableBody, TableRow } from "@mui/material";
import Typography from "@mui/material/Typography";
import Card from "../../../../components/Card";
import CardContent from "../../../../components/Card/CardContent";
import CardHeader from "../../../../components/Card/CardHeader";
import { ContribInlines } from "../../../../components/ContribInlines";
import { Header } from "../../../../components/Header";
import { Page } from "../../../../components/Page";
import { Tab } from "../../../../components/Tab";
import Table from "../../../../components/Table";
import { TableCell } from "../../../../components/Table/TableCell";
import { TabPanel } from "../../../../components/TabPanel";
import { TabPanels } from "../../../../components/TabPanels";
import { Tabs } from "../../../../components/Tabs";
import { TitleBar } from "../../../../components/TitleBar";
import Content, { LeftColumn, RightColumn } from "../../../../containers/Content";
import { useI18n } from "../../../../contexts/I18nContext";
import { useRouter } from "../../../../contexts/RouterContext";
import { ArticleCard } from "../../components/ArticleCard";
import { MeasurementsCard } from "../../components/MeasurementsCard";
import { PHYSICAL_ITEM_TYPES } from "../../utils";
const ArticleDetailPage = ({ data }) => {
const [article, setArticle] = useState(data);
const { t } = useI18n();
const { navigate } = useRouter();
const hasOtherVariants = article.variants.some((variant) => variant.id !== article.id);
return (React.createElement(Page, null,
React.createElement(Header, { variant: "opaque" },
React.createElement(TitleBar, { title: React.createElement(React.Fragment, null,
data.name,
React.createElement(Typography, { sx: { pl: 1 }, variant: "button" }, data.code)) }),
React.createElement(Tabs, { data: article },
React.createElement(Tab, { key: "default", icon: React.createElement(CategoryOutlinedIcon, null), label: "Article", value: "default" }))),
React.createElement(TabPanels, { contribParams: { code: data.code } },
React.createElement(TabPanel, { key: "default", value: "default" },
React.createElement(Content, { layout: "fixedWidth" },
React.createElement(LeftColumn, null,
React.createElement(ArticleCard, { article: article, onUpdated: setArticle }),
React.createElement(ContribInlines, { contribParams: { code: data.code }, data: data })),
React.createElement(RightColumn, null,
PHYSICAL_ITEM_TYPES.includes(article.item_type) && (React.createElement(MeasurementsCard, { measurements: article.measurements, setMeasurements: (measurements) => setArticle((previous) => ({ ...previous, measurements })) })),
hasOtherVariants && (React.createElement(Card, null,
React.createElement(CardHeader, { title: t("Variants") }),
React.createElement(CardContent, { sx: {
p: 0,
"&:last-child": { pb: 0 },
} },
React.createElement(Table, { count: article.variants.length, tableContainerProps: {
sx: (theme) => ({
borderTop: `1px solid ${theme.palette.divider}`,
px: 0,
}),
} },
React.createElement(TableBody, { sx: {
"& .MuiTableRow-root:first-of-type .MuiTableCell-root": (theme) => ({
borderTop: `1px solid ${theme.palette.divider}`,
}),
"& .MuiTableRow-root:last-of-type .MuiTableCell-root": {
borderBottom: "none",
},
} }, article.variants.map((variant) => {
const isCurrent = variant.id === article.id;
return (React.createElement(TableRow, { key: variant.id, hover: true, selected: isCurrent, sx: (theme) => ({
cursor: "pointer",
...(isCurrent
? {
backgroundColor: theme.palette.action.hover,
"& .MuiTableCell-root": {
fontWeight: 600,
},
}
: undefined),
}), onClick: () => navigate("catalog.article:detail", { params: { id: variant.id } }) },
React.createElement(TableCell, null, variant.variant),
React.createElement(TableCell, { typographyProps: {
variant: "caption",
color: "text.secondary",
} }, variant.code),
React.createElement(TableCell, { align: "right", padding: "checkbox" },
React.createElement(NavigateNextIcon, { color: "action", fontSize: "small" }))));
}))))))))))));
};
export default ArticleDetailPage;
//# sourceMappingURL=detail.js.map