@churchapps/apphelper 0.4.28 → 0.4.30
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/components/ImageEditor.d.ts.map +1 -1
- package/dist/components/ImageEditor.js +7 -2
- package/dist/components/ImageEditor.js.map +1 -1
- package/dist/components/TabPanel.d.ts +2 -2
- package/dist/components/TabPanel.d.ts.map +1 -1
- package/dist/components/TabPanel.js +5 -15
- package/dist/components/TabPanel.js.map +1 -1
- package/dist/components/gallery/GalleryModal.d.ts +10 -0
- package/dist/components/gallery/GalleryModal.d.ts.map +1 -0
- package/dist/components/gallery/GalleryModal.js +99 -0
- package/dist/components/gallery/GalleryModal.js.map +1 -0
- package/dist/components/gallery/StockPhotos.d.ts +10 -0
- package/dist/components/gallery/StockPhotos.d.ts.map +1 -0
- package/dist/components/gallery/StockPhotos.js +53 -0
- package/dist/components/gallery/StockPhotos.js.map +1 -0
- package/dist/components/gallery/index.d.ts +3 -0
- package/dist/components/gallery/index.d.ts.map +1 -0
- package/dist/components/gallery/index.js +3 -0
- package/dist/components/gallery/index.js.map +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ImageEditor.tsx +7 -2
- package/src/components/TabPanel.tsx +15 -23
- package/src/components/gallery/GalleryModal.tsx +174 -0
- package/src/components/gallery/StockPhotos.tsx +96 -0
- package/src/components/gallery/index.ts +2 -0
- package/src/components/index.tsx +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../src/components/ImageEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,8BAA8B,CAAC;AAKtC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../src/components/ImageEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,8BAA8B,CAAC;AAKtC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,2CA2IvC"}
|
|
@@ -11,7 +11,10 @@ export function ImageEditor(props) {
|
|
|
11
11
|
const [croppedImageDataUrl, setCroppedImageDataUrl] = useState("");
|
|
12
12
|
const cropperRef = useRef(null);
|
|
13
13
|
let timeout = null;
|
|
14
|
-
const handleSave = () =>
|
|
14
|
+
const handleSave = () => {
|
|
15
|
+
console.log('ImageEditor handleSave called, croppedImageDataUrl:', croppedImageDataUrl ? 'Data URL available' : 'No data URL');
|
|
16
|
+
props.onUpdate(croppedImageDataUrl);
|
|
17
|
+
};
|
|
15
18
|
const handleDelete = () => props.onUpdate("");
|
|
16
19
|
const handleUpload = (e) => {
|
|
17
20
|
e.preventDefault();
|
|
@@ -24,6 +27,7 @@ export function ImageEditor(props) {
|
|
|
24
27
|
const reader = new FileReader();
|
|
25
28
|
reader.onload = () => {
|
|
26
29
|
const url = reader.result.toString();
|
|
30
|
+
console.log('ImageEditor file uploaded, setting photoSrc');
|
|
27
31
|
setPhotoSrc(url);
|
|
28
32
|
setCroppedImageDataUrl("");
|
|
29
33
|
};
|
|
@@ -79,6 +83,7 @@ export function ImageEditor(props) {
|
|
|
79
83
|
height = imageData.naturalHeight;
|
|
80
84
|
}
|
|
81
85
|
const url = cropper.getCroppedCanvas({ width, height }).toDataURL("image/png", 0.4);
|
|
86
|
+
console.log('ImageEditor handleCrop setting croppedImageDataUrl');
|
|
82
87
|
setCroppedImageDataUrl(url);
|
|
83
88
|
}
|
|
84
89
|
}, 200);
|
|
@@ -86,7 +91,7 @@ export function ImageEditor(props) {
|
|
|
86
91
|
useEffect(() => { setPhotoSrc(props.photoUrl); }, [props.photoUrl]);
|
|
87
92
|
return (_jsx(InputBox, { id: "cropperBox", headerIcon: "", headerText: props.title, ariaLabelDelete: "deletePhoto", saveText: Locale.label("common.update"), saveFunction: handleSave, cancelFunction: props.onCancel, deleteFunction: (!props.hideDelete) && handleDelete, headerActionContent: _jsxs("div", { children: [_jsx("input", { type: "file", onChange: handleUpload, id: "fileUpload", accept: "image/*", style: { display: "none" } }), _jsx(SmallButton, { icon: "upload", text: "Upload", onClick: () => {
|
|
88
93
|
document.getElementById("fileUpload").click();
|
|
89
|
-
} })] }), children: _jsx(Suspense, { fallback: _jsx(Loading, {}), children: _jsx(Cropper, { ref: cropperRef, src: photoSrc, style: { height: 240, width: "100%" }, aspectRatio: props.aspectRatio, guides: false, crop: handleCrop, autoCropArea: 1, viewMode:
|
|
94
|
+
} })] }), children: _jsx(Suspense, { fallback: _jsx(Loading, {}), children: _jsx(Cropper, { ref: cropperRef, src: photoSrc, style: { height: 240, width: "100%" }, aspectRatio: props.aspectRatio, guides: false, crop: handleCrop, autoCropArea: 1, viewMode: 0, responsive: true, restore: false, checkOrientation: false, background: false, ready: () => {
|
|
90
95
|
setTimeout(selectDefaultCropZone, 100);
|
|
91
96
|
} }, photoSrc) }) }));
|
|
92
97
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageEditor.js","sourceRoot":"","sources":["../../src/components/ImageEditor.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,8BAA8B,CAAC;AAEtC,kCAAkC;AAClC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;AAalG,MAAM,UAAU,WAAW,CAAC,KAAY;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAClD,IAAI,OAAO,GAAkB,IAAI,CAAC;IAElC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageEditor.js","sourceRoot":"","sources":["../../src/components/ImageEditor.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
interface
|
|
2
|
+
interface TabPanelProps {
|
|
3
3
|
children?: React.ReactNode;
|
|
4
4
|
index: number;
|
|
5
5
|
value: number;
|
|
6
6
|
}
|
|
7
|
-
export declare
|
|
7
|
+
export declare function TabPanel(props: TabPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export {};
|
|
9
9
|
//# sourceMappingURL=TabPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../src/components/TabPanel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../src/components/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAkB5C"}
|
|
@@ -1,17 +1,7 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Box
|
|
4
|
-
export
|
|
5
|
-
const { children, value, index } = props;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
"& .MuiListItemButton-root": { paddingLeft: 30 },
|
|
9
|
-
"& .MuiListItemIcon-root": {
|
|
10
|
-
color: theme.palette.primary.main
|
|
11
|
-
},
|
|
12
|
-
"& .MuiListItemText-root": { color: theme.palette.text.primary },
|
|
13
|
-
"& .selected .MuiListItemText-root span": { fontWeight: "bold" }
|
|
14
|
-
}));
|
|
15
|
-
return (_jsx("div", { role: "tabpanel", hidden: value !== index, id: `userMenuPanel-${index}`, children: value === index && (_jsx(StyledMenuBox, { children: _jsx(Box, { children: children }) })) }));
|
|
16
|
-
};
|
|
2
|
+
import { Box } from "@mui/material";
|
|
3
|
+
export function TabPanel(props) {
|
|
4
|
+
const { children, value, index, ...other } = props;
|
|
5
|
+
return (_jsx("div", { role: "tabpanel", hidden: value !== index, id: `simple-tabpanel-${index}`, "aria-labelledby": `simple-tab-${index}`, ...other, children: value === index && (_jsx(Box, { sx: { p: 3 }, children: children })) }));
|
|
6
|
+
}
|
|
17
7
|
//# sourceMappingURL=TabPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../src/components/TabPanel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../src/components/TabPanel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAQpC,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEnD,OAAO,CACL,cACE,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,KAAK,KAAK,KAAK,EACvB,EAAE,EAAE,mBAAmB,KAAK,EAAE,qBACb,cAAc,KAAK,EAAE,KAClC,KAAK,YAER,KAAK,KAAK,KAAK,IAAI,CAClB,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,YACd,QAAQ,GACL,CACP,GACG,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface Props {
|
|
3
|
+
aspectRatio: number;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
onSelect: (img: string) => void;
|
|
6
|
+
contentRoot?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const GalleryModal: React.FC<Props>;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=GalleryModal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GalleryModal.d.ts","sourceRoot":"","sources":["../../../src/components/gallery/GalleryModal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,UAAU,KAAK;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2JxC,CAAC"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { FileHelper } from "../../helpers/FileHelper";
|
|
4
|
+
import { ApiHelper } from "../../helpers";
|
|
5
|
+
import { Locale } from "../../helpers";
|
|
6
|
+
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, Grid, IconButton, InputLabel, MenuItem, Select, Tab, Tabs, Tooltip, Icon } from "@mui/material";
|
|
7
|
+
import React, { useState } from "react";
|
|
8
|
+
import { ImageEditor } from "../ImageEditor";
|
|
9
|
+
import { TabPanel } from "../TabPanel";
|
|
10
|
+
import { StockPhotos } from "./StockPhotos";
|
|
11
|
+
export const GalleryModal = (props) => {
|
|
12
|
+
const [images, setImages] = useState([]);
|
|
13
|
+
const [tabIndex, setTabIndex] = React.useState(0);
|
|
14
|
+
const [aspectRatio, setAspectRatio] = React.useState(Math.round(props.aspectRatio * 100) / 100);
|
|
15
|
+
const [editorPhotoUrl, setEditorPhotoUrl] = React.useState("");
|
|
16
|
+
const contentRoot = props.contentRoot || "";
|
|
17
|
+
const handleTabChange = (el, newValue) => { setTabIndex(newValue); };
|
|
18
|
+
const loadData = () => { ApiHelper.get("/gallery/" + aspectRatio.toString(), "ContentApi").then((data) => setImages(data.images)); };
|
|
19
|
+
const handleImageUpdated = async (dataUrl) => {
|
|
20
|
+
console.log('handleImageUpdated called with dataUrl:', dataUrl ? 'Data URL received' : 'Empty dataUrl');
|
|
21
|
+
if (!dataUrl) {
|
|
22
|
+
console.warn('No dataUrl provided to handleImageUpdated');
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
try {
|
|
26
|
+
const fileName = Math.floor(Date.now() / 1000).toString() + ".jpg";
|
|
27
|
+
const blob = FileHelper.dataURLtoBlob(dataUrl);
|
|
28
|
+
const file = new File([blob], "file_name");
|
|
29
|
+
const params = { folder: aspectRatio.toString(), fileName };
|
|
30
|
+
console.log('Attempting to upload image with params:', params);
|
|
31
|
+
const presigned = await ApiHelper.post("/gallery/requestUpload", params, "ContentApi");
|
|
32
|
+
const doUpload = presigned.key !== undefined;
|
|
33
|
+
if (doUpload) {
|
|
34
|
+
console.log('Upload successful, uploading to presigned URL');
|
|
35
|
+
await FileHelper.postPresignedFile(presigned, file, () => { });
|
|
36
|
+
console.log('Image uploaded successfully');
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
console.warn('Upload failed - no presigned key received');
|
|
40
|
+
}
|
|
41
|
+
setTabIndex(0);
|
|
42
|
+
loadData();
|
|
43
|
+
}
|
|
44
|
+
catch (error) {
|
|
45
|
+
console.error('Error in handleImageUpdated:', error);
|
|
46
|
+
// In case of API failure, still provide feedback to user
|
|
47
|
+
alert('Image processing completed, but upload failed. API may not be available in this environment.');
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
const handleDelete = (folder, image) => {
|
|
51
|
+
if (window.confirm(Locale.label("gallery.confirmDelete"))) {
|
|
52
|
+
ApiHelper.delete("/gallery/" + folder + "/" + image, "ContentApi").then(() => { loadData(); });
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
React.useEffect(() => { if (aspectRatio !== props.aspectRatio)
|
|
56
|
+
setAspectRatio(Math.round(props.aspectRatio * 100) / 100); }, [props.aspectRatio]); //eslint-disable-line
|
|
57
|
+
React.useEffect(loadData, [aspectRatio]); //eslint-disable-line
|
|
58
|
+
const getImages = () => {
|
|
59
|
+
let result = [];
|
|
60
|
+
images.forEach((img) => {
|
|
61
|
+
const parts = img.split("/");
|
|
62
|
+
result.push(_jsx(Grid, { size: { xs: 12, md: 4 }, children: _jsxs(Box, { sx: { position: "relative", ":hover #deleteIcon": { visibility: "visible" } }, children: [_jsx("a", { href: "about:blank", onClick: (e) => { e.preventDefault(); props.onSelect(contentRoot + "/" + img); }, "aria-label": "Select image", "data-testid": "select-image", children: _jsx(Box, { component: "img", src: contentRoot + "/" + img, alt: "custom", sx: {
|
|
63
|
+
width: '100%',
|
|
64
|
+
height: 'auto',
|
|
65
|
+
maxWidth: '100%',
|
|
66
|
+
display: 'block'
|
|
67
|
+
} }) }), _jsx(Box, { id: "deleteIcon", sx: { position: "absolute", top: 3, right: 3, visibility: "hidden", backgroundColor: "whitesmoke", borderRadius: 5 }, children: _jsx(Tooltip, { title: "Delete", children: _jsx(IconButton, { size: "small", color: "error", onClick: () => handleDelete(parts[2], parts[3]), "aria-label": "Delete image", "data-testid": "delete-image", children: _jsx(Icon, { sx: { fontSize: "17px !important" }, children: "delete_outline" }) }) }) })] }) }));
|
|
68
|
+
});
|
|
69
|
+
return result;
|
|
70
|
+
};
|
|
71
|
+
const handleStockSelect = (url) => {
|
|
72
|
+
setEditorPhotoUrl(url);
|
|
73
|
+
setTabIndex(1);
|
|
74
|
+
};
|
|
75
|
+
const getDisplayAspect = () => {
|
|
76
|
+
let result = aspectRatio.toString();
|
|
77
|
+
if (aspectRatio === 0)
|
|
78
|
+
result = "Free Form";
|
|
79
|
+
else if (aspectRatio === 1)
|
|
80
|
+
result = "1:1";
|
|
81
|
+
else if (aspectRatio === 2)
|
|
82
|
+
result = "2:1";
|
|
83
|
+
else if (aspectRatio === 3)
|
|
84
|
+
result = "3:1";
|
|
85
|
+
else if (aspectRatio === 4)
|
|
86
|
+
result = "4:1";
|
|
87
|
+
else if (aspectRatio === 1.33)
|
|
88
|
+
result = "4:3";
|
|
89
|
+
else if (aspectRatio === 1.78)
|
|
90
|
+
result = "16:9";
|
|
91
|
+
else if (aspectRatio === 0.5)
|
|
92
|
+
result = "1:2";
|
|
93
|
+
else if (aspectRatio === 0.5625)
|
|
94
|
+
result = "9:16";
|
|
95
|
+
return result;
|
|
96
|
+
};
|
|
97
|
+
return (_jsx(_Fragment, { children: _jsxs(Dialog, { open: true, onClose: props.onClose, children: [_jsx(DialogTitle, { children: "Select a Photo" }), _jsxs(DialogContent, { style: { overflowX: "hidden" }, children: [(props.aspectRatio === 0) && (_jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: Locale.label("gallery.aspectRatio") }), _jsxs(Select, { size: "small", label: Locale.label("gallery.aspectRatio"), name: "aspectRatio", value: aspectRatio, onChange: (e) => setAspectRatio(parseFloat(e.target.value.toString())), children: [_jsx(MenuItem, { value: "0", children: Locale.label("gallery.freeForm") }), _jsx(MenuItem, { value: "1", children: "1:1" }), _jsx(MenuItem, { value: "2", children: "2:1" }), _jsx(MenuItem, { value: "3", children: "3:1" }), _jsx(MenuItem, { value: "4", children: "4:1" }), _jsx(MenuItem, { value: "1.33", children: "4:3" }), _jsx(MenuItem, { value: "1.78", children: "16:9" }), _jsx(MenuItem, { value: "0.5", children: "1:2" }), _jsx(MenuItem, { value: "0.5625", children: "9:16" })] })] })), _jsxs(Tabs, { variant: "fullWidth", value: tabIndex, onChange: handleTabChange, children: [_jsx(Tab, { label: "Gallery" }), _jsx(Tab, { label: "Upload" }), _jsx(Tab, { label: "Stock Photos" })] }), _jsx(TabPanel, { value: tabIndex, index: 0, children: _jsx(Grid, { container: true, spacing: 3, alignItems: "center", children: getImages() }) }), _jsxs(TabPanel, { value: tabIndex, index: 1, children: [_jsxs("div", { children: [Locale.label("gallery.aspectRatio"), ": ", getDisplayAspect()] }), _jsx(ImageEditor, { onUpdate: handleImageUpdated, photoUrl: editorPhotoUrl, aspectRatio: aspectRatio, outputWidth: 1280, outputHeight: 768, hideDelete: true })] }), _jsx(TabPanel, { value: tabIndex, index: 2, children: _jsx(StockPhotos, { aspectRatio: aspectRatio, onSelect: props.onSelect, onStockSelect: handleStockSelect, contentRoot: contentRoot }) })] }), _jsx(DialogActions, { sx: { paddingX: "16px", paddingBottom: "12px" }, children: _jsx(Button, { variant: "outlined", onClick: props.onClose, children: "Close" }) })] }) }));
|
|
98
|
+
};
|
|
99
|
+
//# sourceMappingURL=GalleryModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GalleryModal.js","sourceRoot":"","sources":["../../../src/components/gallery/GalleryModal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface Props {
|
|
3
|
+
aspectRatio: number;
|
|
4
|
+
onSelect: (img: string) => void;
|
|
5
|
+
onStockSelect: (img: string) => void;
|
|
6
|
+
contentRoot?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const StockPhotos: React.FC<Props>;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=StockPhotos.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StockPhotos.d.ts","sourceRoot":"","sources":["../../../src/components/gallery/StockPhotos.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,UAAU,KAAK;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAID,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgFvC,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { Button, Grid, TextField } from "@mui/material";
|
|
4
|
+
import React, { useState } from "react";
|
|
5
|
+
import { ApiHelper } from "../../helpers";
|
|
6
|
+
import { Locale } from "../../helpers";
|
|
7
|
+
export const StockPhotos = (props) => {
|
|
8
|
+
const [images, setImages] = useState([]);
|
|
9
|
+
const [searchText, setSearchText] = useState("");
|
|
10
|
+
const [searchResults, setSearchResults] = useState(null);
|
|
11
|
+
const contentRoot = props.contentRoot || "";
|
|
12
|
+
const loadData = () => { ApiHelper.getAnonymous("/gallery/stock/" + props.aspectRatio.toString(), "ContentApi").then((data) => setImages(data.images)); };
|
|
13
|
+
React.useEffect(loadData, [props.aspectRatio]); //eslint-disable-line
|
|
14
|
+
const handleChange = (e) => { e.preventDefault(); setSearchText(e.currentTarget.value); };
|
|
15
|
+
const handleSearch = (e) => {
|
|
16
|
+
if (e !== null)
|
|
17
|
+
e.preventDefault();
|
|
18
|
+
let term = searchText.trim();
|
|
19
|
+
ApiHelper.post("/stock/search", { term: term }, "ContentApi").then((data) => { setSearchResults(data); });
|
|
20
|
+
};
|
|
21
|
+
const getImages = () => {
|
|
22
|
+
if (searchResults)
|
|
23
|
+
return getResults();
|
|
24
|
+
else
|
|
25
|
+
return getSuggested();
|
|
26
|
+
};
|
|
27
|
+
const getResults = () => {
|
|
28
|
+
let result = [];
|
|
29
|
+
searchResults.forEach((p) => {
|
|
30
|
+
result.push(_jsxs(Grid, { size: { xs: 12, md: 4 }, children: [_jsx("a", { href: "about:blank", onClick: (e) => { e.preventDefault(); props.onStockSelect(p.large); }, children: _jsx("img", { src: p.thumbnail, alt: "stock", style: {
|
|
31
|
+
width: '100%',
|
|
32
|
+
height: 'auto',
|
|
33
|
+
maxWidth: '100%',
|
|
34
|
+
display: 'block'
|
|
35
|
+
} }) }), _jsx("div", { children: _jsxs("i", { style: { fontSize: 12 }, children: [_jsx("a", { href: p.url, target: "_blank", rel: "noreferrer noopener", children: Locale.label("stockPhotos.photoBy") }), " ", _jsx("a", { href: p.photographerUrl, target: "_blank", rel: "noreferrer noopener", children: p.photographer })] }) })] }));
|
|
36
|
+
});
|
|
37
|
+
return result;
|
|
38
|
+
};
|
|
39
|
+
const getSuggested = () => {
|
|
40
|
+
let result = [];
|
|
41
|
+
images.forEach((img) => {
|
|
42
|
+
result.push(_jsx(Grid, { size: { xs: 12, md: 4 }, children: _jsx("a", { href: "about:blank", onClick: (e) => { e.preventDefault(); props.onSelect(contentRoot + "/" + img); }, children: _jsx("img", { src: contentRoot + "/" + img, alt: "stock", style: {
|
|
43
|
+
width: '100%',
|
|
44
|
+
height: 'auto',
|
|
45
|
+
maxWidth: '100%',
|
|
46
|
+
display: 'block'
|
|
47
|
+
} }) }) }));
|
|
48
|
+
});
|
|
49
|
+
return result;
|
|
50
|
+
};
|
|
51
|
+
return (_jsxs(_Fragment, { children: [_jsx(TextField, { fullWidth: true, name: "personAddText", label: "Search Term", value: searchText, onChange: handleChange, InputProps: { endAdornment: _jsx(Button, { variant: "contained", id: "searchButton", "data-testid": "search-button", onClick: handleSearch, children: "Search" }) } }), searchResults && _jsxs("div", { children: [Locale.label("stockPhotos.providedBy"), " ", _jsx("a", { href: "https://pexels.com", children: "Pexels" }), "."] }), _jsx(Grid, { container: true, spacing: 3, alignItems: "center", children: getImages() })] }));
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=StockPhotos.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StockPhotos.js","sourceRoot":"","sources":["../../../src/components/gallery/StockPhotos.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/gallery/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/gallery/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}
|
|
@@ -13,7 +13,9 @@ export { PersonAvatar } from "./PersonAvatar";
|
|
|
13
13
|
export { QuestionEdit } from "./QuestionEdit";
|
|
14
14
|
export { SmallButton } from "./SmallButton";
|
|
15
15
|
export { SupportModal } from "./SupportModal";
|
|
16
|
+
export { TabPanel } from "./TabPanel";
|
|
16
17
|
export * from "./wrapper";
|
|
17
18
|
export * from "./notes";
|
|
18
19
|
export * from "./header";
|
|
20
|
+
export * from "./gallery";
|
|
19
21
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -13,7 +13,9 @@ export { PersonAvatar } from "./PersonAvatar";
|
|
|
13
13
|
export { QuestionEdit } from "./QuestionEdit";
|
|
14
14
|
export { SmallButton } from "./SmallButton";
|
|
15
15
|
export { SupportModal } from "./SupportModal";
|
|
16
|
+
export { TabPanel } from "./TabPanel";
|
|
16
17
|
export * from "./wrapper";
|
|
17
18
|
export * from "./notes";
|
|
18
19
|
export * from "./header";
|
|
20
|
+
export * from "./gallery";
|
|
19
21
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -25,7 +25,10 @@ export function ImageEditor(props: Props) {
|
|
|
25
25
|
const cropperRef = useRef<HTMLImageElement>(null);
|
|
26
26
|
let timeout: number | null = null;
|
|
27
27
|
|
|
28
|
-
const handleSave = () =>
|
|
28
|
+
const handleSave = () => {
|
|
29
|
+
console.log('ImageEditor handleSave called, croppedImageDataUrl:', croppedImageDataUrl ? 'Data URL available' : 'No data URL');
|
|
30
|
+
props.onUpdate(croppedImageDataUrl);
|
|
31
|
+
};
|
|
29
32
|
|
|
30
33
|
const handleDelete = () => props.onUpdate("");
|
|
31
34
|
|
|
@@ -40,6 +43,7 @@ export function ImageEditor(props: Props) {
|
|
|
40
43
|
const reader = new FileReader();
|
|
41
44
|
reader.onload = () => {
|
|
42
45
|
const url = reader.result.toString();
|
|
46
|
+
console.log('ImageEditor file uploaded, setting photoSrc');
|
|
43
47
|
setPhotoSrc(url);
|
|
44
48
|
setCroppedImageDataUrl("");
|
|
45
49
|
};
|
|
@@ -101,6 +105,7 @@ export function ImageEditor(props: Props) {
|
|
|
101
105
|
}
|
|
102
106
|
|
|
103
107
|
const url = cropper.getCroppedCanvas({ width, height }).toDataURL("image/png", 0.4);
|
|
108
|
+
console.log('ImageEditor handleCrop setting croppedImageDataUrl');
|
|
104
109
|
setCroppedImageDataUrl(url);
|
|
105
110
|
}
|
|
106
111
|
}, 200);
|
|
@@ -141,7 +146,7 @@ export function ImageEditor(props: Props) {
|
|
|
141
146
|
guides={false}
|
|
142
147
|
crop={handleCrop}
|
|
143
148
|
autoCropArea={1}
|
|
144
|
-
viewMode={
|
|
149
|
+
viewMode={0}
|
|
145
150
|
responsive={true}
|
|
146
151
|
restore={false}
|
|
147
152
|
checkOrientation={false}
|
|
@@ -1,35 +1,27 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Box } from "@mui/material";
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
import React from "react"
|
|
5
|
-
|
|
6
|
-
interface Props {
|
|
4
|
+
interface TabPanelProps {
|
|
7
5
|
children?: React.ReactNode;
|
|
8
6
|
index: number;
|
|
9
7
|
value: number;
|
|
10
8
|
}
|
|
11
9
|
|
|
12
|
-
export
|
|
13
|
-
|
|
14
|
-
const { children, value, index } = props;
|
|
15
|
-
const StyledMenuBox = styled(Box)(
|
|
16
|
-
({ theme }) => ({
|
|
17
|
-
paddingTop: 10,
|
|
18
|
-
"& .MuiListItemButton-root": { paddingLeft: 30 },
|
|
19
|
-
"& .MuiListItemIcon-root": {
|
|
20
|
-
color: theme.palette.primary.main
|
|
21
|
-
},
|
|
22
|
-
"& .MuiListItemText-root": { color: theme.palette.text.primary },
|
|
23
|
-
"& .selected .MuiListItemText-root span": { fontWeight: "bold" }
|
|
24
|
-
})
|
|
25
|
-
);
|
|
10
|
+
export function TabPanel(props: TabPanelProps) {
|
|
11
|
+
const { children, value, index, ...other } = props;
|
|
26
12
|
|
|
27
13
|
return (
|
|
28
|
-
<div
|
|
14
|
+
<div
|
|
15
|
+
role="tabpanel"
|
|
16
|
+
hidden={value !== index}
|
|
17
|
+
id={`simple-tabpanel-${index}`}
|
|
18
|
+
aria-labelledby={`simple-tab-${index}`}
|
|
19
|
+
{...other}
|
|
20
|
+
>
|
|
29
21
|
{value === index && (
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
</
|
|
22
|
+
<Box sx={{ p: 3 }}>
|
|
23
|
+
{children}
|
|
24
|
+
</Box>
|
|
33
25
|
)}
|
|
34
26
|
</div>
|
|
35
27
|
);
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { FileHelper } from "../../helpers/FileHelper";
|
|
4
|
+
import { ApiHelper } from "../../helpers";
|
|
5
|
+
import { Locale } from "../../helpers";
|
|
6
|
+
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, Grid, IconButton, InputLabel, MenuItem, Select, Tab, Tabs, Tooltip, Icon } from "@mui/material";
|
|
7
|
+
import React, { useState } from "react";
|
|
8
|
+
import { ImageEditor } from "../ImageEditor";
|
|
9
|
+
import { TabPanel } from "../TabPanel";
|
|
10
|
+
import { StockPhotos } from "./StockPhotos";
|
|
11
|
+
|
|
12
|
+
interface Props {
|
|
13
|
+
aspectRatio: number,
|
|
14
|
+
onClose: () => void,
|
|
15
|
+
onSelect: (img: string) => void,
|
|
16
|
+
contentRoot?: string
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export const GalleryModal: React.FC<Props> = (props: Props) => {
|
|
20
|
+
const [images, setImages] = useState<string[]>([]);
|
|
21
|
+
const [tabIndex, setTabIndex] = React.useState(0);
|
|
22
|
+
const [aspectRatio, setAspectRatio] = React.useState(Math.round(props.aspectRatio * 100) / 100);
|
|
23
|
+
const [editorPhotoUrl, setEditorPhotoUrl] = React.useState("");
|
|
24
|
+
|
|
25
|
+
const contentRoot = props.contentRoot || "";
|
|
26
|
+
|
|
27
|
+
const handleTabChange = (el: any, newValue: any) => { setTabIndex(newValue); }
|
|
28
|
+
|
|
29
|
+
const loadData = () => { ApiHelper.get("/gallery/" + aspectRatio.toString(), "ContentApi").then((data: any) => setImages(data.images)); }
|
|
30
|
+
|
|
31
|
+
const handleImageUpdated = async (dataUrl: string) => {
|
|
32
|
+
console.log('handleImageUpdated called with dataUrl:', dataUrl ? 'Data URL received' : 'Empty dataUrl');
|
|
33
|
+
|
|
34
|
+
if (!dataUrl) {
|
|
35
|
+
console.warn('No dataUrl provided to handleImageUpdated');
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
try {
|
|
40
|
+
const fileName = Math.floor(Date.now() / 1000).toString() + ".jpg"
|
|
41
|
+
const blob = FileHelper.dataURLtoBlob(dataUrl);
|
|
42
|
+
const file = new File([blob], "file_name");
|
|
43
|
+
|
|
44
|
+
const params = { folder: aspectRatio.toString(), fileName };
|
|
45
|
+
console.log('Attempting to upload image with params:', params);
|
|
46
|
+
|
|
47
|
+
const presigned = await ApiHelper.post("/gallery/requestUpload", params, "ContentApi");
|
|
48
|
+
const doUpload = presigned.key !== undefined;
|
|
49
|
+
|
|
50
|
+
if (doUpload) {
|
|
51
|
+
console.log('Upload successful, uploading to presigned URL');
|
|
52
|
+
await FileHelper.postPresignedFile(presigned, file, () => { });
|
|
53
|
+
console.log('Image uploaded successfully');
|
|
54
|
+
} else {
|
|
55
|
+
console.warn('Upload failed - no presigned key received');
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
setTabIndex(0);
|
|
59
|
+
loadData();
|
|
60
|
+
} catch (error) {
|
|
61
|
+
console.error('Error in handleImageUpdated:', error);
|
|
62
|
+
// In case of API failure, still provide feedback to user
|
|
63
|
+
alert('Image processing completed, but upload failed. API may not be available in this environment.');
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
const handleDelete = (folder: string, image: string) => {
|
|
68
|
+
if (window.confirm(Locale.label("gallery.confirmDelete"))) {
|
|
69
|
+
ApiHelper.delete("/gallery/" + folder + "/" + image, "ContentApi").then(() => { loadData(); });
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
React.useEffect(() => { if (aspectRatio !== props.aspectRatio) setAspectRatio(Math.round(props.aspectRatio * 100) / 100) }, [props.aspectRatio]); //eslint-disable-line
|
|
74
|
+
React.useEffect(loadData, [aspectRatio]); //eslint-disable-line
|
|
75
|
+
|
|
76
|
+
const getImages = () => {
|
|
77
|
+
let result: React.ReactElement[] = [];
|
|
78
|
+
images.forEach((img: any) => {
|
|
79
|
+
const parts = img.split("/");
|
|
80
|
+
|
|
81
|
+
result.push(<Grid size={{ xs: 12, md: 4 }}>
|
|
82
|
+
<Box sx={{ position: "relative", ":hover #deleteIcon": { visibility: "visible" } }}>
|
|
83
|
+
<a href="about:blank" onClick={(e) => { e.preventDefault(); props.onSelect(contentRoot + "/" + img) }} aria-label="Select image" data-testid="select-image">
|
|
84
|
+
<Box
|
|
85
|
+
component="img"
|
|
86
|
+
src={contentRoot + "/" + img}
|
|
87
|
+
alt="custom"
|
|
88
|
+
sx={{
|
|
89
|
+
width: '100%',
|
|
90
|
+
height: 'auto',
|
|
91
|
+
maxWidth: '100%',
|
|
92
|
+
display: 'block'
|
|
93
|
+
}}
|
|
94
|
+
/>
|
|
95
|
+
</a>
|
|
96
|
+
<Box id="deleteIcon" sx={{ position: "absolute", top: 3, right: 3, visibility: "hidden", backgroundColor: "whitesmoke", borderRadius: 5 }}>
|
|
97
|
+
<Tooltip title="Delete">
|
|
98
|
+
<IconButton size="small" color="error" onClick={() => handleDelete(parts[2], parts[3])} aria-label="Delete image" data-testid="delete-image">
|
|
99
|
+
<Icon sx={{ fontSize: "17px !important" }}>delete_outline</Icon>
|
|
100
|
+
</IconButton>
|
|
101
|
+
</Tooltip>
|
|
102
|
+
</Box>
|
|
103
|
+
</Box>
|
|
104
|
+
</Grid>);
|
|
105
|
+
})
|
|
106
|
+
return result;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
const handleStockSelect = (url: string) => {
|
|
110
|
+
setEditorPhotoUrl(url);
|
|
111
|
+
setTabIndex(1);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
const getDisplayAspect = () => {
|
|
115
|
+
let result = aspectRatio.toString();
|
|
116
|
+
if (aspectRatio === 0) result = "Free Form";
|
|
117
|
+
else if (aspectRatio === 1) result = "1:1";
|
|
118
|
+
else if (aspectRatio === 2) result = "2:1";
|
|
119
|
+
else if (aspectRatio === 3) result = "3:1";
|
|
120
|
+
else if (aspectRatio === 4) result = "4:1";
|
|
121
|
+
else if (aspectRatio === 1.33) result = "4:3";
|
|
122
|
+
else if (aspectRatio === 1.78) result = "16:9";
|
|
123
|
+
else if (aspectRatio === 0.5) result = "1:2";
|
|
124
|
+
else if (aspectRatio === 0.5625) result = "9:16";
|
|
125
|
+
return result;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
return (<>
|
|
129
|
+
<Dialog open={true} onClose={props.onClose}>
|
|
130
|
+
<DialogTitle>Select a Photo</DialogTitle>
|
|
131
|
+
<DialogContent style={{ overflowX: "hidden" }}>
|
|
132
|
+
|
|
133
|
+
{(props.aspectRatio === 0) && (
|
|
134
|
+
<FormControl fullWidth>
|
|
135
|
+
<InputLabel>{Locale.label("gallery.aspectRatio")}</InputLabel>
|
|
136
|
+
<Select size="small" label={Locale.label("gallery.aspectRatio")} name="aspectRatio" value={aspectRatio} onChange={(e) => setAspectRatio(parseFloat(e.target.value.toString()))}>
|
|
137
|
+
<MenuItem value="0">{Locale.label("gallery.freeForm")}</MenuItem>
|
|
138
|
+
<MenuItem value="1">1:1</MenuItem>
|
|
139
|
+
<MenuItem value="2">2:1</MenuItem>
|
|
140
|
+
<MenuItem value="3">3:1</MenuItem>
|
|
141
|
+
<MenuItem value="4">4:1</MenuItem>
|
|
142
|
+
<MenuItem value="1.33">4:3</MenuItem>
|
|
143
|
+
<MenuItem value="1.78">16:9</MenuItem>
|
|
144
|
+
<MenuItem value="0.5">1:2</MenuItem>
|
|
145
|
+
<MenuItem value="0.5625">9:16</MenuItem>
|
|
146
|
+
</Select>
|
|
147
|
+
</FormControl>
|
|
148
|
+
)}
|
|
149
|
+
|
|
150
|
+
<Tabs variant="fullWidth" value={tabIndex} onChange={handleTabChange}>
|
|
151
|
+
<Tab label="Gallery" />
|
|
152
|
+
<Tab label="Upload" />
|
|
153
|
+
<Tab label="Stock Photos" />
|
|
154
|
+
</Tabs>
|
|
155
|
+
<TabPanel value={tabIndex} index={0}>
|
|
156
|
+
|
|
157
|
+
<Grid container spacing={3} alignItems="center">
|
|
158
|
+
{getImages()}
|
|
159
|
+
</Grid>
|
|
160
|
+
</TabPanel>
|
|
161
|
+
<TabPanel value={tabIndex} index={1}>
|
|
162
|
+
<div>{Locale.label("gallery.aspectRatio")}: {getDisplayAspect()}</div>
|
|
163
|
+
<ImageEditor onUpdate={handleImageUpdated} photoUrl={editorPhotoUrl} aspectRatio={aspectRatio} outputWidth={1280} outputHeight={768} hideDelete={true} />
|
|
164
|
+
</TabPanel>
|
|
165
|
+
<TabPanel value={tabIndex} index={2}>
|
|
166
|
+
<StockPhotos aspectRatio={aspectRatio} onSelect={props.onSelect} onStockSelect={handleStockSelect} contentRoot={contentRoot} />
|
|
167
|
+
</TabPanel>
|
|
168
|
+
</DialogContent>
|
|
169
|
+
<DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
|
|
170
|
+
<Button variant="outlined" onClick={props.onClose}>Close</Button>
|
|
171
|
+
</DialogActions>
|
|
172
|
+
</Dialog>
|
|
173
|
+
</>);
|
|
174
|
+
};
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Button, Grid, TextField } from "@mui/material";
|
|
3
|
+
import React, { useState } from "react";
|
|
4
|
+
import { ApiHelper } from "../../helpers";
|
|
5
|
+
import { Locale } from "../../helpers";
|
|
6
|
+
|
|
7
|
+
interface Props {
|
|
8
|
+
aspectRatio: number,
|
|
9
|
+
onSelect: (img: string) => void,
|
|
10
|
+
onStockSelect: (img: string) => void,
|
|
11
|
+
contentRoot?: string
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
interface SearchResult { description: string, url: string, photographer: string, photographerUrl: string, large: string, thumbnail: string }
|
|
15
|
+
|
|
16
|
+
export const StockPhotos: React.FC<Props> = (props: Props) => {
|
|
17
|
+
const [images, setImages] = useState<string[]>([]);
|
|
18
|
+
const [searchText, setSearchText] = useState("");
|
|
19
|
+
const [searchResults, setSearchResults] = useState<SearchResult[]>(null);
|
|
20
|
+
|
|
21
|
+
const contentRoot = props.contentRoot || "";
|
|
22
|
+
|
|
23
|
+
const loadData = () => { ApiHelper.getAnonymous("/gallery/stock/" + props.aspectRatio.toString(), "ContentApi").then((data: any) => setImages(data.images)); }
|
|
24
|
+
|
|
25
|
+
React.useEffect(loadData, [props.aspectRatio]); //eslint-disable-line
|
|
26
|
+
|
|
27
|
+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setSearchText(e.currentTarget.value); }
|
|
28
|
+
|
|
29
|
+
const handleSearch = (e: React.MouseEvent) => {
|
|
30
|
+
if (e !== null) e.preventDefault();
|
|
31
|
+
let term = searchText.trim();
|
|
32
|
+
ApiHelper.post("/stock/search", { term: term }, "ContentApi").then((data: SearchResult[]) => { setSearchResults(data) });
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const getImages = () => {
|
|
36
|
+
if (searchResults) return getResults();
|
|
37
|
+
else return getSuggested();
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const getResults = () => {
|
|
41
|
+
let result: React.ReactElement[] = [];
|
|
42
|
+
searchResults.forEach((p: any) => {
|
|
43
|
+
result.push(<Grid size={{ xs: 12, md: 4 }}>
|
|
44
|
+
<a href="about:blank" onClick={(e) => { e.preventDefault(); props.onStockSelect(p.large) }}>
|
|
45
|
+
<img
|
|
46
|
+
src={p.thumbnail}
|
|
47
|
+
alt="stock"
|
|
48
|
+
style={{
|
|
49
|
+
width: '100%',
|
|
50
|
+
height: 'auto',
|
|
51
|
+
maxWidth: '100%',
|
|
52
|
+
display: 'block'
|
|
53
|
+
}}
|
|
54
|
+
/>
|
|
55
|
+
</a>
|
|
56
|
+
<div>
|
|
57
|
+
<i style={{ fontSize: 12 }}>
|
|
58
|
+
<a href={p.url} target="_blank" rel="noreferrer noopener">{Locale.label("stockPhotos.photoBy")}</a> <a href={p.photographerUrl} target="_blank" rel="noreferrer noopener">{p.photographer}</a></i>
|
|
59
|
+
</div>
|
|
60
|
+
</Grid>);
|
|
61
|
+
})
|
|
62
|
+
return result;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const getSuggested = () => {
|
|
66
|
+
let result: React.ReactElement[] = [];
|
|
67
|
+
images.forEach((img: any) => {
|
|
68
|
+
result.push(<Grid size={{ xs: 12, md: 4 }}>
|
|
69
|
+
<a href="about:blank" onClick={(e) => { e.preventDefault(); props.onSelect(contentRoot + "/" + img) }}>
|
|
70
|
+
<img
|
|
71
|
+
src={contentRoot + "/" + img}
|
|
72
|
+
alt="stock"
|
|
73
|
+
style={{
|
|
74
|
+
width: '100%',
|
|
75
|
+
height: 'auto',
|
|
76
|
+
maxWidth: '100%',
|
|
77
|
+
display: 'block'
|
|
78
|
+
}}
|
|
79
|
+
/>
|
|
80
|
+
</a>
|
|
81
|
+
</Grid>);
|
|
82
|
+
})
|
|
83
|
+
return result;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
return (<>
|
|
87
|
+
<TextField fullWidth name="personAddText" label="Search Term" value={searchText} onChange={handleChange}
|
|
88
|
+
InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-testid="search-button" onClick={handleSearch}>Search</Button> }}
|
|
89
|
+
/>
|
|
90
|
+
{searchResults && <div>{Locale.label("stockPhotos.providedBy")} <a href="https://pexels.com">Pexels</a>.</div>}
|
|
91
|
+
<Grid container spacing={3} alignItems="center">
|
|
92
|
+
{getImages()}
|
|
93
|
+
</Grid>
|
|
94
|
+
|
|
95
|
+
</>);
|
|
96
|
+
};
|
package/src/components/index.tsx
CHANGED
|
@@ -13,6 +13,8 @@ export { PersonAvatar } from "./PersonAvatar";
|
|
|
13
13
|
export { QuestionEdit } from "./QuestionEdit";
|
|
14
14
|
export { SmallButton } from "./SmallButton";
|
|
15
15
|
export { SupportModal } from "./SupportModal";
|
|
16
|
+
export { TabPanel } from "./TabPanel";
|
|
16
17
|
export * from "./wrapper";
|
|
17
18
|
export * from "./notes";
|
|
18
19
|
export * from "./header";
|
|
20
|
+
export * from "./gallery";
|