bananas-commerce-admin
Version:
What's this, an admin for apes?
101 lines • 5.68 kB
JavaScript
import React, { useCallback, useMemo } from "react";
import { useParams } from "react-router-dom";
import CancelIcon from "@mui/icons-material/Cancel";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import Card from "../../../components/Card";
import CardActions from "../../../components/Card/CardActions";
import CardCancelButton from "../../../components/Card/CardCancelButton";
import CardContent from "../../../components/Card/CardContent";
import CardFieldCheckbox from "../../../components/Card/CardFieldCheckbox";
import CardFieldText from "../../../components/Card/CardFieldText";
import CardHeader from "../../../components/Card/CardHeader";
import CardRow from "../../../components/Card/CardRow";
import CardSaveButton from "../../../components/Card/CardSaveButton";
import { useApi } from "../../../contexts/ApiContext";
import { useI18n } from "../../../contexts/I18nContext";
import { useUser } from "../../../contexts/UserContext";
import { hasPermission } from "../../../util/has_permission";
import { PHYSICAL_ITEM_TYPES } from "../utils";
export const ArticleCard = ({ article, create, onCreated, onUpdated, }) => {
const params = useParams();
const api = useApi();
const { t } = useI18n();
const { user } = useUser();
const canCreate = useMemo(() => hasPermission(user, "catalog.add_article"), [user]);
const canChange = useMemo(() => hasPermission(user, "catalog.change_article"), [user]);
article ??= {
id: 0,
name: "",
variant: "",
item_type: "",
code: "",
model_number: "",
product_number: "",
gtin: "",
tax_code: "",
is_active: true,
variants: [],
};
const handleSave = useCallback(async (values) => {
if (create != null) {
const action = api.operations["catalog.article:create"];
if (!action) {
throw new Error('Invalid action "catalog.article:create".');
}
const response = await action.call({
params,
body: values,
});
if (response.ok) {
const createdArticle = await response.json();
onCreated?.(createdArticle);
return t("Article created successfully.");
}
else {
console.error("[ARTICLE_CARD]", response);
throw new Error("creating article.");
}
}
else {
const action = api.operations["catalog.article:update"];
if (!action) {
throw new Error('Invalid action "catalog.article:update".');
}
const response = await action.call({
params,
body: values,
});
if (response.ok) {
const updatedArticle = await response.json();
onUpdated?.(updatedArticle);
return t("Article updated successfully.");
}
else {
console.error("[ARTICLE_CARD]", response);
throw new Error("updating article fields.");
}
}
}, [api, params, create, onCreated, onUpdated, t]);
return (React.createElement(Card, { alwaysEditable: create && canCreate, columns: 3, defaultEditing: create && canCreate, isEditable: (create && canCreate) || (!create && canChange), onSubmit: handleSave },
React.createElement(CardHeader, { title: t("Article") }),
React.createElement(CardContent, null,
React.createElement(CardRow, null,
React.createElement(CardFieldText, { formName: "item_type", label: t("Type"), required: true, size: 1, value: article.item_type })),
React.createElement(CardRow, null,
React.createElement(CardFieldText, { formName: "name", label: t("Name"), required: true, size: 2, value: article.name }),
React.createElement(CardFieldText, { formName: "variant", label: t("Variant"), size: 1, value: article.variant })),
React.createElement(CardRow, null,
React.createElement(CardFieldText, { formName: "code", label: t("Article number"), required: true, value: article.code }),
React.createElement(CardFieldText, { formName: "product_number", label: t("Product number"), value: article.product_number }),
React.createElement(CardFieldText, { formName: "model_number", label: t("Model number"), value: article.model_number })),
(PHYSICAL_ITEM_TYPES.includes(article.item_type) || create) && (React.createElement(React.Fragment, null,
React.createElement(CardRow, null,
React.createElement(CardFieldText, { formName: "tax_code", label: "Tax code", required: false, size: 1, value: article.tax_code }),
React.createElement(CardFieldText, { formName: "gtin", label: "GTIN", required: false, size: 1, value: article.gtin }),
React.createElement("input", { name: "is_active", type: "hidden", value: "false" }),
React.createElement(CardFieldCheckbox, { formName: "is_active", label: t("Active"), noValue: React.createElement(CancelIcon, { color: "error", fontSize: "small" }), size: 1, value: article.is_active, yesValue: React.createElement(CheckCircleIcon, { color: "success", fontSize: "small" }) }))))),
(canChange || canCreate) && (React.createElement(CardActions, null,
!create && React.createElement(CardCancelButton, null),
React.createElement(CardSaveButton, { label: create ? "Create" : "Save" })))));
};
//# sourceMappingURL=ArticleCard.js.map