bananas-commerce-admin 0.21.0 → 0.21.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/extensions/pim/components/ProductAssetsCard.js +28 -0
- package/dist/esm/extensions/pim/components/ProductAssetsCard.js.map +1 -0
- package/dist/esm/extensions/pim/components/ProductAssetsGallery.js +39 -0
- package/dist/esm/extensions/pim/components/ProductAssetsGallery.js.map +1 -0
- package/dist/esm/extensions/pim/components/ProductAssetsTable.js +21 -0
- package/dist/esm/extensions/pim/components/ProductAssetsTable.js.map +1 -0
- package/dist/esm/extensions/pim/contrib/ArticleProduct.js +13 -56
- package/dist/esm/extensions/pim/contrib/ArticleProduct.js.map +1 -1
- package/dist/esm/extensions/pim/pages/product/detail.js +13 -0
- package/dist/esm/extensions/pim/pages/product/detail.js.map +1 -1
- package/dist/esm/extensions/pim/pages/product/list.js +2 -2
- package/dist/esm/extensions/pim/pages/product/list.js.map +1 -1
- package/dist/esm/extensions/pim/types/asset.js +2 -0
- package/dist/esm/extensions/pim/types/asset.js.map +1 -0
- package/dist/types/extensions/pim/components/ProductAssetsCard.d.ts +6 -0
- package/dist/types/extensions/pim/components/ProductAssetsGallery.d.ts +7 -0
- package/dist/types/extensions/pim/components/ProductAssetsTable.d.ts +7 -0
- package/dist/types/extensions/pim/types/asset.d.ts +9 -0
- package/package.json +1 -1
- package/src/extensions/pim/components/ProductAssetsCard.tsx +49 -0
- package/src/extensions/pim/components/ProductAssetsGallery.tsx +76 -0
- package/src/extensions/pim/components/ProductAssetsTable.tsx +50 -0
- package/src/extensions/pim/contrib/ArticleProduct.tsx +17 -106
- package/src/extensions/pim/pages/product/detail.tsx +17 -0
- package/src/extensions/pim/pages/product/list.tsx +2 -2
- package/src/extensions/pim/types/asset.ts +9 -0
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Card from "../../../components/Card";
|
|
3
|
+
import CardContent from "../../../components/Card/CardContent";
|
|
4
|
+
import CardHeader from "../../../components/Card/CardHeader";
|
|
5
|
+
import { useI18n } from "../../../contexts/I18nContext";
|
|
6
|
+
import { ProductAssetsGallery } from "./ProductAssetsGallery";
|
|
7
|
+
import { ProductAssetsTable } from "./ProductAssetsTable";
|
|
8
|
+
export const ProductAssetsCard = ({ assets }) => {
|
|
9
|
+
const { t } = useI18n();
|
|
10
|
+
const imageAssets = assets.filter((asset) => asset.asset_type == "image");
|
|
11
|
+
const otherAssets = assets.filter((asset) => asset.asset_type !== "image");
|
|
12
|
+
return (React.createElement(React.Fragment, null,
|
|
13
|
+
React.createElement(Card, { columns: 2, isEditable: false },
|
|
14
|
+
React.createElement(CardHeader, { title: t("Assets") }),
|
|
15
|
+
imageAssets.length > 0 && (React.createElement(React.Fragment, null,
|
|
16
|
+
React.createElement(CardContent, { sx: {
|
|
17
|
+
width: "100%",
|
|
18
|
+
height: 400,
|
|
19
|
+
overflowY: "scroll",
|
|
20
|
+
paddingTop: 0,
|
|
21
|
+
paddingBottom: 0,
|
|
22
|
+
paddingLeft: 3,
|
|
23
|
+
paddingRight: 3,
|
|
24
|
+
} },
|
|
25
|
+
React.createElement(ProductAssetsGallery, { assets: imageAssets })))),
|
|
26
|
+
otherAssets.length > 0 && React.createElement(ProductAssetsTable, { assets: otherAssets }))));
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=ProductAssetsCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProductAssetsCard.js","sourceRoot":"","sources":["../../../../../src/extensions/pim/components/ProductAssetsCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAC5C,OAAO,WAAW,MAAM,sCAAsC,CAAC;AAC/D,OAAO,UAAU,MAAM,qCAAqC,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAGxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAM1D,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,IAAI,OAAO,CAAC,CAAC;IAC1E,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC;IAE3E,OAAO,CACL;QACE,oBAAC,IAAI,IAAC,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK;YACjC,oBAAC,UAAU,IAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAI;YAEjC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB;gBACE,oBAAC,WAAW,IACV,EAAE,EAAE;wBACF,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,GAAG;wBACX,SAAS,EAAE,QAAQ;wBACnB,UAAU,EAAE,CAAC;wBACb,aAAa,EAAE,CAAC;wBAChB,WAAW,EAAE,CAAC;wBACd,YAAY,EAAE,CAAC;qBAChB;oBAED,oBAAC,oBAAoB,IAAC,MAAM,EAAE,WAAW,GAAI,CACjC,CACb,CACJ;YAEA,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,kBAAkB,IAAC,MAAM,EAAE,WAAW,GAAI,CACjE,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import Box from "@mui/material/Box";
|
|
3
|
+
import ImageList from "@mui/material/ImageList";
|
|
4
|
+
import ImageListItem from "@mui/material/ImageListItem";
|
|
5
|
+
import ImageListItemBar from "@mui/material/ImageListItemBar";
|
|
6
|
+
import Modal from "@mui/material/Modal";
|
|
7
|
+
export const ProductAssetsGallery = ({ assets }) => {
|
|
8
|
+
const [selectedAsset, setSelectedAsset] = useState(null);
|
|
9
|
+
const imageAssets = assets.filter((asset) => asset.asset_type == "image");
|
|
10
|
+
return (React.createElement(React.Fragment, null,
|
|
11
|
+
React.createElement(Modal, { "aria-describedby": "modal-modal-description", "aria-labelledby": "modal-modal-title", open: selectedAsset !== null, sx: () => ({
|
|
12
|
+
cursor: "pointer",
|
|
13
|
+
}), onClose: () => setSelectedAsset(null) },
|
|
14
|
+
React.createElement(Box, { sx: {
|
|
15
|
+
position: "absolute",
|
|
16
|
+
top: "50%",
|
|
17
|
+
left: "50%",
|
|
18
|
+
transform: "translate(-50%, -50%)",
|
|
19
|
+
width: "100vw", // Set explicit width
|
|
20
|
+
height: "100vh", // Set explicit height
|
|
21
|
+
bgcolor: "rgba(0, 0, 0, 0.7)", // Dark overlay background
|
|
22
|
+
boxShadow: 24,
|
|
23
|
+
p: 2, // Reduced padding
|
|
24
|
+
display: "flex",
|
|
25
|
+
justifyContent: "center",
|
|
26
|
+
alignItems: "center",
|
|
27
|
+
overflow: "hidden", // Hide any overflowing content
|
|
28
|
+
outline: "none",
|
|
29
|
+
}, onClick: () => setSelectedAsset(null) }, selectedAsset !== null && (React.createElement("img", { alt: selectedAsset.caption, loading: "lazy", src: selectedAsset.url, style: {
|
|
30
|
+
maxWidth: "100%",
|
|
31
|
+
maxHeight: "100%",
|
|
32
|
+
objectFit: "contain",
|
|
33
|
+
borderRadius: "8px", // Subtle rounded corners for the image
|
|
34
|
+
} })))),
|
|
35
|
+
React.createElement(ImageList, { cols: 3, gap: 8, variant: "masonry" }, imageAssets.map((asset) => (React.createElement(ImageListItem, { key: asset.id, onClick: () => setSelectedAsset(asset) },
|
|
36
|
+
React.createElement("img", { alt: asset.caption, loading: "lazy", src: asset.url }),
|
|
37
|
+
React.createElement(ImageListItemBar, { subtitle: asset.caption })))))));
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=ProductAssetsGallery.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProductAssetsGallery.js","sourceRoot":"","sources":["../../../../../src/extensions/pim/components/ProductAssetsGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,aAAa,MAAM,6BAA6B,CAAC;AACxD,OAAO,gBAAgB,MAAM,gCAAgC,CAAC;AAC9D,OAAO,KAAK,MAAM,qBAAqB,CAAC;AASxC,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACtF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkC,IAAI,CAAC,CAAC;IAC1F,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,IAAI,OAAO,CAAC,CAAC;IAE1E,OAAO,CACL;QACE,oBAAC,KAAK,wBACa,yBAAyB,qBAC1B,mBAAmB,EACnC,IAAI,EAAE,aAAa,KAAK,IAAI,EAC5B,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;gBACT,MAAM,EAAE,SAAS;aAClB,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;YAErC,oBAAC,GAAG,IACF,EAAE,EAAE;oBACF,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,KAAK;oBACV,IAAI,EAAE,KAAK;oBACX,SAAS,EAAE,uBAAuB;oBAClC,KAAK,EAAE,OAAO,EAAE,qBAAqB;oBACrC,MAAM,EAAE,OAAO,EAAE,sBAAsB;oBACvC,OAAO,EAAE,oBAAoB,EAAE,0BAA0B;oBACzD,SAAS,EAAE,EAAE;oBACb,CAAC,EAAE,CAAC,EAAE,kBAAkB;oBACxB,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,QAAQ;oBACxB,UAAU,EAAE,QAAQ;oBACpB,QAAQ,EAAE,QAAQ,EAAE,+BAA+B;oBACnD,OAAO,EAAE,MAAM;iBAChB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAEpC,aAAa,KAAK,IAAI,IAAI,CACzB,6BACE,GAAG,EAAE,aAAa,CAAC,OAAO,EAC1B,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,aAAa,CAAC,GAAG,EACtB,KAAK,EAAE;oBACL,QAAQ,EAAE,MAAM;oBAChB,SAAS,EAAE,MAAM;oBACjB,SAAS,EAAE,SAAS;oBACpB,YAAY,EAAE,KAAK,EAAE,uCAAuC;iBAC7D,GACD,CACH,CACG,CACA;QAER,oBAAC,SAAS,IAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,IAC1C,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,aAAa,IAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAClE,6BAAK,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,EAAC,MAAM,EAAC,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI;YAC1D,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,GAAI,CAC/B,CACjB,CAAC,CACQ,CACX,CACJ,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TableBody, TableHead, TableRow } from "@mui/material";
|
|
3
|
+
import Table from "../../../components/Table";
|
|
4
|
+
import { TableCell } from "../../../components/Table/TableCell";
|
|
5
|
+
import TableHeading from "../../../components/Table/TableHeading";
|
|
6
|
+
import { useI18n } from "../../../contexts/I18nContext";
|
|
7
|
+
export const ProductAssetsTable = ({ assets }) => {
|
|
8
|
+
const { t } = useI18n();
|
|
9
|
+
return (React.createElement(Table, { count: assets.length },
|
|
10
|
+
React.createElement(TableHead, null,
|
|
11
|
+
React.createElement(TableRow, null,
|
|
12
|
+
React.createElement(TableHeading, null, t("Asset ID")),
|
|
13
|
+
React.createElement(TableHeading, { align: "right" }, t("Type")),
|
|
14
|
+
React.createElement(TableHeading, { align: "right" }, t("Caption")))),
|
|
15
|
+
React.createElement(TableBody, { sx: { ".MuiTableRow-root:last-child > .MuiTableCell-root": { borderBottom: "none" } } }, assets.map((asset) => (React.createElement(TableRow, { key: asset.id, sx: { height: 56 } },
|
|
16
|
+
React.createElement(TableCell, { sx: { py: 0 } },
|
|
17
|
+
React.createElement("a", { href: asset.url, rel: "noreferrer", target: "_blank" }, asset.id)),
|
|
18
|
+
React.createElement(TableCell, { align: "right", sx: { py: 0 } }, asset.asset_type),
|
|
19
|
+
React.createElement(TableCell, { align: "right", sx: { py: 0 } }, asset.caption)))))));
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=ProductAssetsTable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProductAssetsTable.js","sourceRoot":"","sources":["../../../../../src/extensions/pim/components/ProductAssetsTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE/D,OAAO,KAAK,MAAM,2BAA2B,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAQxD,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IAClF,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM;QACzB,oBAAC,SAAS;YACR,oBAAC,QAAQ;gBACP,oBAAC,YAAY,QAAE,CAAC,CAAC,UAAU,CAAC,CAAgB;gBAC5C,oBAAC,YAAY,IAAC,KAAK,EAAC,OAAO,IAAE,CAAC,CAAC,MAAM,CAAC,CAAgB;gBACtD,oBAAC,YAAY,IAAC,KAAK,EAAC,OAAO,IAAE,CAAC,CAAC,SAAS,CAAC,CAAgB,CAChD,CACD;QAEZ,oBAAC,SAAS,IACR,EAAE,EAAE,EAAE,mDAAmD,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,IAEpF,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;YACzC,oBAAC,SAAS,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE;gBACtB,2BAAG,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,IACjD,KAAK,CAAC,EAAE,CACP,CACM;YACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IACnC,KAAK,CAAC,UAAU,CACP;YACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IACnC,KAAK,CAAC,OAAO,CACJ,CACH,CACZ,CAAC,CACQ,CACN,CACT,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,26 +1,18 @@
|
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
|
2
|
-
import { TableBody, TableHead, TableRow } from "@mui/material";
|
|
3
|
-
import Box from "@mui/material/Box";
|
|
4
|
-
import ImageList from "@mui/material/ImageList";
|
|
5
|
-
import ImageListItem from "@mui/material/ImageListItem";
|
|
6
|
-
import ImageListItemBar from "@mui/material/ImageListItemBar";
|
|
7
|
-
import Modal from "@mui/material/Modal";
|
|
8
2
|
import Card from "../../../components/Card";
|
|
9
3
|
import CardContent from "../../../components/Card/CardContent";
|
|
10
4
|
import CardFieldSelect from "../../../components/Card/CardFieldSelect";
|
|
11
5
|
import CardFieldText from "../../../components/Card/CardFieldText";
|
|
12
6
|
import CardHeader from "../../../components/Card/CardHeader";
|
|
13
7
|
import CardRow from "../../../components/Card/CardRow";
|
|
14
|
-
import Table from "../../../components/Table";
|
|
15
|
-
import { TableCell } from "../../../components/Table/TableCell";
|
|
16
|
-
import TableHeading from "../../../components/Table/TableHeading";
|
|
17
8
|
import { useApi } from "../../../contexts/ApiContext";
|
|
18
9
|
import { useI18n } from "../../../contexts/I18nContext";
|
|
10
|
+
import { ProductAssetsGallery } from "../components/ProductAssetsGallery";
|
|
11
|
+
import { ProductAssetsTable } from "../components/ProductAssetsTable";
|
|
19
12
|
import { ProductPropertyField } from "../components/ProductPropertyField";
|
|
20
13
|
const ArticleProductCard = ({ data, params }) => {
|
|
21
14
|
const { t } = useI18n();
|
|
22
15
|
const api = useApi();
|
|
23
|
-
const [selectedAsset, setSelectedAsset] = useState(null);
|
|
24
16
|
const [productItemTypes, setProductItemTypes] = useState([]);
|
|
25
17
|
const { code: articleCode } = params;
|
|
26
18
|
const { product, assets } = data;
|
|
@@ -59,52 +51,17 @@ const ArticleProductCard = ({ data, params }) => {
|
|
|
59
51
|
React.createElement(CardHeader, { title: t("Properties") }),
|
|
60
52
|
React.createElement(CardContent, null, productPropertiesRows.map((row, index) => (React.createElement(CardRow, { key: index }, row.map((prop) => (React.createElement(ProductPropertyField, { key: prop.name, property: prop, value: productProperties[prop.name] }))))))))),
|
|
61
53
|
articleAssets.length > 0 && React.createElement(CardHeader, { title: t("Assets") }),
|
|
62
|
-
imageAssets.length > 0 && (React.createElement(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
p: 2, // Reduced padding
|
|
74
|
-
display: "flex",
|
|
75
|
-
justifyContent: "center",
|
|
76
|
-
alignItems: "center",
|
|
77
|
-
overflow: "hidden", // Hide any overflowing content
|
|
78
|
-
outline: "none",
|
|
79
|
-
}, onClick: () => setSelectedAsset(null) }, selectedAsset !== null && (React.createElement("img", { alt: selectedAsset.caption, loading: "lazy", src: selectedAsset.url, style: {
|
|
80
|
-
maxWidth: "100%",
|
|
81
|
-
maxHeight: "100%",
|
|
82
|
-
objectFit: "contain",
|
|
83
|
-
borderRadius: "8px", // Subtle rounded corners for the image
|
|
84
|
-
} })))),
|
|
85
|
-
React.createElement(CardContent, { sx: {
|
|
86
|
-
width: "100%",
|
|
87
|
-
height: 400,
|
|
88
|
-
overflowY: "scroll",
|
|
89
|
-
paddingTop: 0,
|
|
90
|
-
paddingBottom: 0,
|
|
91
|
-
paddingLeft: 3,
|
|
92
|
-
paddingRight: 3,
|
|
93
|
-
} },
|
|
94
|
-
React.createElement(ImageList, { cols: 3, gap: 8, variant: "masonry" }, imageAssets.map((asset) => (React.createElement(ImageListItem, { key: asset.id, onClick: () => setSelectedAsset(asset) },
|
|
95
|
-
React.createElement("img", { alt: asset.caption, loading: "lazy", src: asset.url }),
|
|
96
|
-
React.createElement(ImageListItemBar, { subtitle: asset.caption })))))))),
|
|
97
|
-
otherAssets.length > 0 && (React.createElement(Table, { count: otherAssets.length },
|
|
98
|
-
React.createElement(TableHead, null,
|
|
99
|
-
React.createElement(TableRow, null,
|
|
100
|
-
React.createElement(TableHeading, null, t("Asset ID")),
|
|
101
|
-
React.createElement(TableHeading, { align: "right" }, t("Type")),
|
|
102
|
-
React.createElement(TableHeading, { align: "right" }, t("Caption")))),
|
|
103
|
-
React.createElement(TableBody, { sx: { ".MuiTableRow-root:last-child > .MuiTableCell-root": { borderBottom: "none" } } }, otherAssets.map((asset) => (React.createElement(TableRow, { key: asset.id, sx: { height: 56 } },
|
|
104
|
-
React.createElement(TableCell, { sx: { py: 0 } },
|
|
105
|
-
React.createElement("a", { href: asset.url, rel: "noreferrer", target: "_blank" }, asset.id)),
|
|
106
|
-
React.createElement(TableCell, { align: "right", sx: { py: 0 } }, asset.asset_type),
|
|
107
|
-
React.createElement(TableCell, { align: "right", sx: { py: 0 } }, asset.caption)))))))));
|
|
54
|
+
imageAssets.length > 0 && (React.createElement(CardContent, { sx: {
|
|
55
|
+
width: "100%",
|
|
56
|
+
height: 400,
|
|
57
|
+
overflowY: "scroll",
|
|
58
|
+
paddingTop: 0,
|
|
59
|
+
paddingBottom: 0,
|
|
60
|
+
paddingLeft: 3,
|
|
61
|
+
paddingRight: 3,
|
|
62
|
+
} },
|
|
63
|
+
React.createElement(ProductAssetsGallery, { assets: imageAssets }))),
|
|
64
|
+
otherAssets.length > 0 && React.createElement(ProductAssetsTable, { assets: otherAssets })));
|
|
108
65
|
};
|
|
109
66
|
export default ArticleProductCard;
|
|
110
67
|
//# sourceMappingURL=ArticleProduct.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleProduct.js","sourceRoot":"","sources":["../../../../../src/extensions/pim/contrib/ArticleProduct.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,
|
|
1
|
+
{"version":3,"file":"ArticleProduct.js","sourceRoot":"","sources":["../../../../../src/extensions/pim/contrib/ArticleProduct.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAC5C,OAAO,WAAW,MAAM,sCAAsC,CAAC;AAC/D,OAAO,eAAe,MAAM,0CAA0C,CAAC;AACvE,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,UAAU,MAAM,qCAAqC,CAAC;AAC7D,OAAO,OAAO,MAAM,kCAAkC,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAI1E,MAAM,kBAAkB,GAA6C,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IACxF,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACxB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IAEtF,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,MAA0B,CAAC;IACzD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAEjC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,IAAI,WAAW,IAAI,KAAK,CAAC,YAAY,IAAI,EAAE,CACzE,CAAC;IACF,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,IAAI,OAAO,CAAC,CAAC;IACjF,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC;IAElF,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAmC,CAAC;IACtE,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,OAAO,CAAC,SAAS,CAAC,CAAC;IAChG,MAAM,qBAAqB,GAAG,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACxF,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,MAAM,CACxD,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;QACpB,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;;YAClC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;IACd,CAAC,EACD,EAAE,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,GAAG,CAAC,UAAU,CAAC,wBAAwB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;YACxE,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;gBAChB,mBAAmB,CAAC,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;YAC7C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,IAAI,IAAC,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK;QACjC,oBAAC,UAAU,IAAC,KAAK,EAAC,SAAS,GAAG;QAE9B,oBAAC,WAAW;YACV,oBAAC,OAAO;gBACN,oBAAC,aAAa,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,GAAI;gBACxF,oBAAC,eAAe,IACd,QAAQ,EAAC,WAAW,EACpB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,OAAO,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;wBAC3C,EAAE,EAAE,QAAQ,CAAC,IAAI;wBACjB,KAAK,EAAE,QAAQ,CAAC,IAAI;qBACrB,CAAC,CAAC,EACH,QAAQ,EAAE,IAAI,EACd,IAAI,EAAE,CAAC,EACP,KAAK,EACH,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,GAErF,CACM;YACV,oBAAC,OAAO;gBACN,oBAAC,aAAa,IACZ,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EACvB,QAAQ,EAAE,IAAI,EACd,KAAK,EAAE,OAAO,CAAC,WAAW,GAC1B,CACM,CACE;QAEb,qBAAqB,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC;YACE,oBAAC,UAAU,IAAC,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,GAAI;YAEtC,oBAAC,WAAW,QACT,qBAAqB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACzC,oBAAC,OAAO,IAAC,GAAG,EAAE,KAAK,IAChB,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,oBAAC,oBAAoB,IACnB,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,QAAQ,EAAE,IAAI,EACd,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GACnC,CACH,CAAC,CACM,CACX,CAAC,CACU,CACb,CACJ;QAEA,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,UAAU,IAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAI;QAE9D,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,oBAAC,WAAW,IACV,EAAE,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG;gBACX,SAAS,EAAE,QAAQ;gBACnB,UAAU,EAAE,CAAC;gBACb,aAAa,EAAE,CAAC;gBAChB,WAAW,EAAE,CAAC;gBACd,YAAY,EAAE,CAAC;aAChB;YAED,oBAAC,oBAAoB,IAAC,MAAM,EAAE,WAAW,GAAI,CACjC,CACf;QAEA,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,kBAAkB,IAAC,MAAM,EAAE,WAAW,GAAI,CACjE,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -11,11 +11,13 @@ import { Tabs } from "../../../../components/Tabs";
|
|
|
11
11
|
import { TitleBar } from "../../../../components/TitleBar";
|
|
12
12
|
import Content, { LeftColumn, RightColumn } from "../../../../containers/Content";
|
|
13
13
|
import { useApi } from "../../../../contexts/ApiContext";
|
|
14
|
+
import { ProductAssetsCard } from "../../components/ProductAssetsCard";
|
|
14
15
|
import { ProductCard } from "../../components/ProductCard";
|
|
15
16
|
import { ProductPropertiesCard } from "../../components/ProductPropertiesCard";
|
|
16
17
|
const ProductDetailPage = ({ data }) => {
|
|
17
18
|
const [product, setProduct] = useState(data);
|
|
18
19
|
const [productItemTypes, setProductItemTypes] = useState([]);
|
|
20
|
+
const [productAssets, setProductAssets] = useState([]);
|
|
19
21
|
const api = useApi();
|
|
20
22
|
useEffect(() => {
|
|
21
23
|
api.operations["pim.item_types:options"].call({}).then(async (response) => {
|
|
@@ -24,6 +26,16 @@ const ProductDetailPage = ({ data }) => {
|
|
|
24
26
|
}
|
|
25
27
|
});
|
|
26
28
|
}, []);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
api.operations["pim.asset:list"]
|
|
31
|
+
.call({ query: { product_number: product.number } })
|
|
32
|
+
.then(async (response) => {
|
|
33
|
+
if (response.ok) {
|
|
34
|
+
const assetList = await response.json();
|
|
35
|
+
setProductAssets(assetList.results);
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
}, []);
|
|
27
39
|
const productItemType = productItemTypes.find((itemType) => itemType.name == product.item_type);
|
|
28
40
|
return (React.createElement(Page, null,
|
|
29
41
|
React.createElement(Header, { variant: "opaque" },
|
|
@@ -38,6 +50,7 @@ const ProductDetailPage = ({ data }) => {
|
|
|
38
50
|
React.createElement(LeftColumn, null,
|
|
39
51
|
React.createElement(ProductCard, { itemTypes: productItemTypes, product: product, onUpdated: setProduct }),
|
|
40
52
|
productItemType && (React.createElement(ProductPropertiesCard, { itemType: productItemType, productProperties: product.properties, setProductProperties: (properties) => setProduct((previous) => ({ ...previous, properties })) })),
|
|
53
|
+
productAssets.length > 0 && React.createElement(ProductAssetsCard, { assets: productAssets }),
|
|
41
54
|
React.createElement(ContribInlines, { contribParams: { number: data.number }, data: data })),
|
|
42
55
|
React.createElement(RightColumn, null,
|
|
43
56
|
React.createElement(ContribInlines, { contribParams: { number: data.number }, data: data, variant: "sidebar" })))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"detail.js","sourceRoot":"","sources":["../../../../../../src/extensions/pim/pages/product/detail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,oBAAoB,MAAM,sCAAsC,CAAC;AACxE,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,4BAA4B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,OAAO,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"detail.js","sourceRoot":"","sources":["../../../../../../src/extensions/pim/pages/product/detail.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,7 +22,7 @@ const ProductListPage = ({ data }) => {
|
|
|
22
22
|
return (React.createElement(Page, null,
|
|
23
23
|
React.createElement(Header, null,
|
|
24
24
|
React.createElement(TitleBar, { title: t("Products") },
|
|
25
|
-
React.createElement(SearchBar, { defaultValue: new URLSearchParams(window.location.search).get("
|
|
25
|
+
React.createElement(SearchBar, { defaultValue: new URLSearchParams(window.location.search).get("q") ?? "", placeholder: t("Search for product number or name"), onSubmit: (input) => {
|
|
26
26
|
if (input === "") {
|
|
27
27
|
navigate("pim.product:list", {
|
|
28
28
|
replace: true,
|
|
@@ -31,7 +31,7 @@ const ProductListPage = ({ data }) => {
|
|
|
31
31
|
else {
|
|
32
32
|
navigate("pim.product:list", {
|
|
33
33
|
query: {
|
|
34
|
-
|
|
34
|
+
q: input,
|
|
35
35
|
},
|
|
36
36
|
replace: true,
|
|
37
37
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../../../src/extensions/pim/pages/product/list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,KAAK,MAAM,8BAA8B,CAAC;AACjD,OAAO,SAAS,MAAM,wCAAwC,CAAC;AAC/D,OAAO,YAAY,MAAM,2CAA2C,CAAC;AACrE,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,OAAO,EAAE,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AACtF,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAGzD,MAAM,eAAe,GAA4C,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5E,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAC;IACjC,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC;IAC3B,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,MAAM;YACL,oBAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC;gBAC5B,oBAAC,SAAS,IACR,YAAY,EAAE,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../../../src/extensions/pim/pages/product/list.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"asset.js","sourceRoot":"","sources":["../../../../../src/extensions/pim/types/asset.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AssetList } from "../types/asset";
|
|
3
|
+
import { ArticleAsset } from "../types/contrib";
|
|
4
|
+
export interface ProductAssetsGalleryProps {
|
|
5
|
+
assets: AssetList[] | ArticleAsset[];
|
|
6
|
+
}
|
|
7
|
+
export declare const ProductAssetsGallery: React.FC<ProductAssetsGalleryProps>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AssetList } from "../types/asset";
|
|
3
|
+
import { ArticleAsset } from "../types/contrib";
|
|
4
|
+
export interface ProductAssetsTableProps {
|
|
5
|
+
assets: AssetList[] | ArticleAsset[];
|
|
6
|
+
}
|
|
7
|
+
export declare const ProductAssetsTable: React.FC<ProductAssetsTableProps>;
|
package/package.json
CHANGED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import Card from "../../../components/Card";
|
|
4
|
+
import CardContent from "../../../components/Card/CardContent";
|
|
5
|
+
import CardHeader from "../../../components/Card/CardHeader";
|
|
6
|
+
import { useI18n } from "../../../contexts/I18nContext";
|
|
7
|
+
import { AssetList } from "../types/asset";
|
|
8
|
+
|
|
9
|
+
import { ProductAssetsGallery } from "./ProductAssetsGallery";
|
|
10
|
+
import { ProductAssetsTable } from "./ProductAssetsTable";
|
|
11
|
+
|
|
12
|
+
export interface ProductAssetsCardProps {
|
|
13
|
+
assets: AssetList[];
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export const ProductAssetsCard: React.FC<ProductAssetsCardProps> = ({ assets }) => {
|
|
17
|
+
const { t } = useI18n();
|
|
18
|
+
|
|
19
|
+
const imageAssets = assets.filter((asset) => asset.asset_type == "image");
|
|
20
|
+
const otherAssets = assets.filter((asset) => asset.asset_type !== "image");
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<>
|
|
24
|
+
<Card columns={2} isEditable={false}>
|
|
25
|
+
<CardHeader title={t("Assets")} />
|
|
26
|
+
|
|
27
|
+
{imageAssets.length > 0 && (
|
|
28
|
+
<>
|
|
29
|
+
<CardContent
|
|
30
|
+
sx={{
|
|
31
|
+
width: "100%",
|
|
32
|
+
height: 400,
|
|
33
|
+
overflowY: "scroll",
|
|
34
|
+
paddingTop: 0,
|
|
35
|
+
paddingBottom: 0,
|
|
36
|
+
paddingLeft: 3,
|
|
37
|
+
paddingRight: 3,
|
|
38
|
+
}}
|
|
39
|
+
>
|
|
40
|
+
<ProductAssetsGallery assets={imageAssets} />
|
|
41
|
+
</CardContent>
|
|
42
|
+
</>
|
|
43
|
+
)}
|
|
44
|
+
|
|
45
|
+
{otherAssets.length > 0 && <ProductAssetsTable assets={otherAssets} />}
|
|
46
|
+
</Card>
|
|
47
|
+
</>
|
|
48
|
+
);
|
|
49
|
+
};
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
|
|
3
|
+
import Box from "@mui/material/Box";
|
|
4
|
+
import ImageList from "@mui/material/ImageList";
|
|
5
|
+
import ImageListItem from "@mui/material/ImageListItem";
|
|
6
|
+
import ImageListItemBar from "@mui/material/ImageListItemBar";
|
|
7
|
+
import Modal from "@mui/material/Modal";
|
|
8
|
+
|
|
9
|
+
import { AssetList } from "../types/asset";
|
|
10
|
+
import { ArticleAsset } from "../types/contrib";
|
|
11
|
+
|
|
12
|
+
export interface ProductAssetsGalleryProps {
|
|
13
|
+
assets: AssetList[] | ArticleAsset[];
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export const ProductAssetsGallery: React.FC<ProductAssetsGalleryProps> = ({ assets }) => {
|
|
17
|
+
const [selectedAsset, setSelectedAsset] = useState<AssetList | ArticleAsset | null>(null);
|
|
18
|
+
const imageAssets = assets.filter((asset) => asset.asset_type == "image");
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<>
|
|
22
|
+
<Modal
|
|
23
|
+
aria-describedby="modal-modal-description"
|
|
24
|
+
aria-labelledby="modal-modal-title"
|
|
25
|
+
open={selectedAsset !== null}
|
|
26
|
+
sx={() => ({
|
|
27
|
+
cursor: "pointer",
|
|
28
|
+
})}
|
|
29
|
+
onClose={() => setSelectedAsset(null)}
|
|
30
|
+
>
|
|
31
|
+
<Box
|
|
32
|
+
sx={{
|
|
33
|
+
position: "absolute",
|
|
34
|
+
top: "50%",
|
|
35
|
+
left: "50%",
|
|
36
|
+
transform: "translate(-50%, -50%)",
|
|
37
|
+
width: "100vw", // Set explicit width
|
|
38
|
+
height: "100vh", // Set explicit height
|
|
39
|
+
bgcolor: "rgba(0, 0, 0, 0.7)", // Dark overlay background
|
|
40
|
+
boxShadow: 24,
|
|
41
|
+
p: 2, // Reduced padding
|
|
42
|
+
display: "flex",
|
|
43
|
+
justifyContent: "center",
|
|
44
|
+
alignItems: "center",
|
|
45
|
+
overflow: "hidden", // Hide any overflowing content
|
|
46
|
+
outline: "none",
|
|
47
|
+
}}
|
|
48
|
+
onClick={() => setSelectedAsset(null)}
|
|
49
|
+
>
|
|
50
|
+
{selectedAsset !== null && (
|
|
51
|
+
<img
|
|
52
|
+
alt={selectedAsset.caption}
|
|
53
|
+
loading="lazy"
|
|
54
|
+
src={selectedAsset.url}
|
|
55
|
+
style={{
|
|
56
|
+
maxWidth: "100%",
|
|
57
|
+
maxHeight: "100%",
|
|
58
|
+
objectFit: "contain",
|
|
59
|
+
borderRadius: "8px", // Subtle rounded corners for the image
|
|
60
|
+
}}
|
|
61
|
+
/>
|
|
62
|
+
)}
|
|
63
|
+
</Box>
|
|
64
|
+
</Modal>
|
|
65
|
+
|
|
66
|
+
<ImageList cols={3} gap={8} variant="masonry">
|
|
67
|
+
{imageAssets.map((asset) => (
|
|
68
|
+
<ImageListItem key={asset.id} onClick={() => setSelectedAsset(asset)}>
|
|
69
|
+
<img alt={asset.caption} loading="lazy" src={asset.url} />
|
|
70
|
+
<ImageListItemBar subtitle={asset.caption} />
|
|
71
|
+
</ImageListItem>
|
|
72
|
+
))}
|
|
73
|
+
</ImageList>
|
|
74
|
+
</>
|
|
75
|
+
);
|
|
76
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import { TableBody, TableHead, TableRow } from "@mui/material";
|
|
4
|
+
|
|
5
|
+
import Table from "../../../components/Table";
|
|
6
|
+
import { TableCell } from "../../../components/Table/TableCell";
|
|
7
|
+
import TableHeading from "../../../components/Table/TableHeading";
|
|
8
|
+
import { useI18n } from "../../../contexts/I18nContext";
|
|
9
|
+
import { AssetList } from "../types/asset";
|
|
10
|
+
import { ArticleAsset } from "../types/contrib";
|
|
11
|
+
|
|
12
|
+
export interface ProductAssetsTableProps {
|
|
13
|
+
assets: AssetList[] | ArticleAsset[];
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export const ProductAssetsTable: React.FC<ProductAssetsTableProps> = ({ assets }) => {
|
|
17
|
+
const { t } = useI18n();
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<Table count={assets.length}>
|
|
21
|
+
<TableHead>
|
|
22
|
+
<TableRow>
|
|
23
|
+
<TableHeading>{t("Asset ID")}</TableHeading>
|
|
24
|
+
<TableHeading align="right">{t("Type")}</TableHeading>
|
|
25
|
+
<TableHeading align="right">{t("Caption")}</TableHeading>
|
|
26
|
+
</TableRow>
|
|
27
|
+
</TableHead>
|
|
28
|
+
|
|
29
|
+
<TableBody
|
|
30
|
+
sx={{ ".MuiTableRow-root:last-child > .MuiTableCell-root": { borderBottom: "none" } }}
|
|
31
|
+
>
|
|
32
|
+
{assets.map((asset) => (
|
|
33
|
+
<TableRow key={asset.id} sx={{ height: 56 }}>
|
|
34
|
+
<TableCell sx={{ py: 0 }}>
|
|
35
|
+
<a href={asset.url} rel="noreferrer" target="_blank">
|
|
36
|
+
{asset.id}
|
|
37
|
+
</a>
|
|
38
|
+
</TableCell>
|
|
39
|
+
<TableCell align="right" sx={{ py: 0 }}>
|
|
40
|
+
{asset.asset_type}
|
|
41
|
+
</TableCell>
|
|
42
|
+
<TableCell align="right" sx={{ py: 0 }}>
|
|
43
|
+
{asset.caption}
|
|
44
|
+
</TableCell>
|
|
45
|
+
</TableRow>
|
|
46
|
+
))}
|
|
47
|
+
</TableBody>
|
|
48
|
+
</Table>
|
|
49
|
+
);
|
|
50
|
+
};
|
|
@@ -1,32 +1,23 @@
|
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
|
2
2
|
|
|
3
|
-
import { TableBody, TableHead, TableRow } from "@mui/material";
|
|
4
|
-
import Box from "@mui/material/Box";
|
|
5
|
-
import ImageList from "@mui/material/ImageList";
|
|
6
|
-
import ImageListItem from "@mui/material/ImageListItem";
|
|
7
|
-
import ImageListItemBar from "@mui/material/ImageListItemBar";
|
|
8
|
-
import Modal from "@mui/material/Modal";
|
|
9
|
-
|
|
10
3
|
import Card from "../../../components/Card";
|
|
11
4
|
import CardContent from "../../../components/Card/CardContent";
|
|
12
5
|
import CardFieldSelect from "../../../components/Card/CardFieldSelect";
|
|
13
6
|
import CardFieldText from "../../../components/Card/CardFieldText";
|
|
14
7
|
import CardHeader from "../../../components/Card/CardHeader";
|
|
15
8
|
import CardRow from "../../../components/Card/CardRow";
|
|
16
|
-
import Table from "../../../components/Table";
|
|
17
|
-
import { TableCell } from "../../../components/Table/TableCell";
|
|
18
|
-
import TableHeading from "../../../components/Table/TableHeading";
|
|
19
9
|
import { useApi } from "../../../contexts/ApiContext";
|
|
20
10
|
import { useI18n } from "../../../contexts/I18nContext";
|
|
21
11
|
import { ContribComponent } from "../../../types";
|
|
12
|
+
import { ProductAssetsGallery } from "../components/ProductAssetsGallery";
|
|
13
|
+
import { ProductAssetsTable } from "../components/ProductAssetsTable";
|
|
22
14
|
import { ProductPropertyField } from "../components/ProductPropertyField";
|
|
23
|
-
import {
|
|
15
|
+
import { ArticleProductResponse } from "../types/contrib";
|
|
24
16
|
import { ProductItemTypeOption, ProductPropertiesData } from "../types/product";
|
|
25
17
|
|
|
26
18
|
const ArticleProductCard: ContribComponent<ArticleProductResponse> = ({ data, params }) => {
|
|
27
19
|
const { t } = useI18n();
|
|
28
20
|
const api = useApi();
|
|
29
|
-
const [selectedAsset, setSelectedAsset] = useState<ArticleAsset | null>(null);
|
|
30
21
|
const [productItemTypes, setProductItemTypes] = useState<ProductItemTypeOption[]>([]);
|
|
31
22
|
|
|
32
23
|
const { code: articleCode } = params as { code: string };
|
|
@@ -112,102 +103,22 @@ const ArticleProductCard: ContribComponent<ArticleProductResponse> = ({ data, pa
|
|
|
112
103
|
{articleAssets.length > 0 && <CardHeader title={t("Assets")} />}
|
|
113
104
|
|
|
114
105
|
{imageAssets.length > 0 && (
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
width: "100vw", // Set explicit width
|
|
129
|
-
height: "100vh", // Set explicit height
|
|
130
|
-
bgcolor: "rgba(0, 0, 0, 0.7)", // Dark overlay background
|
|
131
|
-
boxShadow: 24,
|
|
132
|
-
p: 2, // Reduced padding
|
|
133
|
-
display: "flex",
|
|
134
|
-
justifyContent: "center",
|
|
135
|
-
alignItems: "center",
|
|
136
|
-
overflow: "hidden", // Hide any overflowing content
|
|
137
|
-
outline: "none",
|
|
138
|
-
}}
|
|
139
|
-
onClick={() => setSelectedAsset(null)}
|
|
140
|
-
>
|
|
141
|
-
{selectedAsset !== null && (
|
|
142
|
-
<img
|
|
143
|
-
alt={selectedAsset.caption}
|
|
144
|
-
loading="lazy"
|
|
145
|
-
src={selectedAsset.url}
|
|
146
|
-
style={{
|
|
147
|
-
maxWidth: "100%",
|
|
148
|
-
maxHeight: "100%",
|
|
149
|
-
objectFit: "contain",
|
|
150
|
-
borderRadius: "8px", // Subtle rounded corners for the image
|
|
151
|
-
}}
|
|
152
|
-
/>
|
|
153
|
-
)}
|
|
154
|
-
</Box>
|
|
155
|
-
</Modal>
|
|
156
|
-
|
|
157
|
-
<CardContent
|
|
158
|
-
sx={{
|
|
159
|
-
width: "100%",
|
|
160
|
-
height: 400,
|
|
161
|
-
overflowY: "scroll",
|
|
162
|
-
paddingTop: 0,
|
|
163
|
-
paddingBottom: 0,
|
|
164
|
-
paddingLeft: 3,
|
|
165
|
-
paddingRight: 3,
|
|
166
|
-
}}
|
|
167
|
-
>
|
|
168
|
-
<ImageList cols={3} gap={8} variant="masonry">
|
|
169
|
-
{imageAssets.map((asset) => (
|
|
170
|
-
<ImageListItem key={asset.id} onClick={() => setSelectedAsset(asset)}>
|
|
171
|
-
<img alt={asset.caption} loading="lazy" src={asset.url} />
|
|
172
|
-
<ImageListItemBar subtitle={asset.caption} />
|
|
173
|
-
</ImageListItem>
|
|
174
|
-
))}
|
|
175
|
-
</ImageList>
|
|
176
|
-
</CardContent>
|
|
177
|
-
</>
|
|
106
|
+
<CardContent
|
|
107
|
+
sx={{
|
|
108
|
+
width: "100%",
|
|
109
|
+
height: 400,
|
|
110
|
+
overflowY: "scroll",
|
|
111
|
+
paddingTop: 0,
|
|
112
|
+
paddingBottom: 0,
|
|
113
|
+
paddingLeft: 3,
|
|
114
|
+
paddingRight: 3,
|
|
115
|
+
}}
|
|
116
|
+
>
|
|
117
|
+
<ProductAssetsGallery assets={imageAssets} />
|
|
118
|
+
</CardContent>
|
|
178
119
|
)}
|
|
179
120
|
|
|
180
|
-
{otherAssets.length > 0 &&
|
|
181
|
-
<Table count={otherAssets.length}>
|
|
182
|
-
<TableHead>
|
|
183
|
-
<TableRow>
|
|
184
|
-
<TableHeading>{t("Asset ID")}</TableHeading>
|
|
185
|
-
<TableHeading align="right">{t("Type")}</TableHeading>
|
|
186
|
-
<TableHeading align="right">{t("Caption")}</TableHeading>
|
|
187
|
-
</TableRow>
|
|
188
|
-
</TableHead>
|
|
189
|
-
|
|
190
|
-
<TableBody
|
|
191
|
-
sx={{ ".MuiTableRow-root:last-child > .MuiTableCell-root": { borderBottom: "none" } }}
|
|
192
|
-
>
|
|
193
|
-
{otherAssets.map((asset) => (
|
|
194
|
-
<TableRow key={asset.id} sx={{ height: 56 }}>
|
|
195
|
-
<TableCell sx={{ py: 0 }}>
|
|
196
|
-
<a href={asset.url} rel="noreferrer" target="_blank">
|
|
197
|
-
{asset.id}
|
|
198
|
-
</a>
|
|
199
|
-
</TableCell>
|
|
200
|
-
<TableCell align="right" sx={{ py: 0 }}>
|
|
201
|
-
{asset.asset_type}
|
|
202
|
-
</TableCell>
|
|
203
|
-
<TableCell align="right" sx={{ py: 0 }}>
|
|
204
|
-
{asset.caption}
|
|
205
|
-
</TableCell>
|
|
206
|
-
</TableRow>
|
|
207
|
-
))}
|
|
208
|
-
</TableBody>
|
|
209
|
-
</Table>
|
|
210
|
-
)}
|
|
121
|
+
{otherAssets.length > 0 && <ProductAssetsTable assets={otherAssets} />}
|
|
211
122
|
</Card>
|
|
212
123
|
);
|
|
213
124
|
};
|
|
@@ -14,13 +14,16 @@ import { TitleBar } from "../../../../components/TitleBar";
|
|
|
14
14
|
import Content, { LeftColumn, RightColumn } from "../../../../containers/Content";
|
|
15
15
|
import { useApi } from "../../../../contexts/ApiContext";
|
|
16
16
|
import { PageComponent } from "../../../../types";
|
|
17
|
+
import { ProductAssetsCard } from "../../components/ProductAssetsCard";
|
|
17
18
|
import { ProductCard } from "../../components/ProductCard";
|
|
18
19
|
import { ProductPropertiesCard } from "../../components/ProductPropertiesCard";
|
|
20
|
+
import { AssetList } from "../../types/asset";
|
|
19
21
|
import { ProductDetail, ProductItemTypeOption } from "../../types/product";
|
|
20
22
|
|
|
21
23
|
const ProductDetailPage: PageComponent<ProductDetail> = ({ data }) => {
|
|
22
24
|
const [product, setProduct] = useState(data);
|
|
23
25
|
const [productItemTypes, setProductItemTypes] = useState<ProductItemTypeOption[]>([]);
|
|
26
|
+
const [productAssets, setProductAssets] = useState<AssetList[]>([]);
|
|
24
27
|
const api = useApi();
|
|
25
28
|
|
|
26
29
|
useEffect(() => {
|
|
@@ -31,6 +34,17 @@ const ProductDetailPage: PageComponent<ProductDetail> = ({ data }) => {
|
|
|
31
34
|
});
|
|
32
35
|
}, []);
|
|
33
36
|
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
api.operations["pim.asset:list"]
|
|
39
|
+
.call({ query: { product_number: product.number } })
|
|
40
|
+
.then(async (response) => {
|
|
41
|
+
if (response.ok) {
|
|
42
|
+
const assetList = await response.json();
|
|
43
|
+
setProductAssets(assetList.results);
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
}, []);
|
|
47
|
+
|
|
34
48
|
const productItemType = productItemTypes.find((itemType) => itemType.name == product.item_type);
|
|
35
49
|
|
|
36
50
|
return (
|
|
@@ -66,6 +80,9 @@ const ProductDetailPage: PageComponent<ProductDetail> = ({ data }) => {
|
|
|
66
80
|
}
|
|
67
81
|
/>
|
|
68
82
|
)}
|
|
83
|
+
|
|
84
|
+
{productAssets.length > 0 && <ProductAssetsCard assets={productAssets} />}
|
|
85
|
+
|
|
69
86
|
<ContribInlines contribParams={{ number: data.number }} data={data} />
|
|
70
87
|
</LeftColumn>
|
|
71
88
|
<RightColumn>
|
|
@@ -30,7 +30,7 @@ const ProductListPage: PageComponent<LimitOffset<ProductList>> = ({ data }) => {
|
|
|
30
30
|
<Header>
|
|
31
31
|
<TitleBar title={t("Products")}>
|
|
32
32
|
<SearchBar
|
|
33
|
-
defaultValue={new URLSearchParams(window.location.search).get("
|
|
33
|
+
defaultValue={new URLSearchParams(window.location.search).get("q") ?? ""}
|
|
34
34
|
placeholder={t("Search for product number or name")}
|
|
35
35
|
onSubmit={(input) => {
|
|
36
36
|
if (input === "") {
|
|
@@ -40,7 +40,7 @@ const ProductListPage: PageComponent<LimitOffset<ProductList>> = ({ data }) => {
|
|
|
40
40
|
} else {
|
|
41
41
|
navigate("pim.product:list", {
|
|
42
42
|
query: {
|
|
43
|
-
|
|
43
|
+
q: input,
|
|
44
44
|
},
|
|
45
45
|
replace: true,
|
|
46
46
|
});
|