show task files on step log instead of popover
parent
92fcc1bcb1
commit
6cf5848378
|
|
@ -1,6 +1,7 @@
|
|||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Col,
|
||||
Form,
|
||||
Image,
|
||||
Input,
|
||||
|
|
@ -8,6 +9,7 @@ import {
|
|||
Modal,
|
||||
Popover,
|
||||
Result,
|
||||
Row,
|
||||
Steps,
|
||||
Tag,
|
||||
notification,
|
||||
|
|
@ -25,10 +27,9 @@ import {
|
|||
GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
|
||||
} from "../../utils";
|
||||
import {
|
||||
DownloadOutlined,
|
||||
FileImageOutlined,
|
||||
InfoCircleOutlined,
|
||||
LockOutlined,
|
||||
PaperClipOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { StlViewer } from "react-stl-viewer";
|
||||
|
||||
|
|
@ -207,79 +208,6 @@ export default function GroupTasksViewModal({ isOpen }) {
|
|||
}
|
||||
};
|
||||
|
||||
const getGroupTaskStepLog = (log, files) => {
|
||||
const getPopoverContent = (file) => {
|
||||
const fileExtension = file.SystemFileName.split(".")[1];
|
||||
const fileUrl = `${Constants.STATIC_CONTENT_ADDRESS}grouptasks/${currentGroupTask.Id}/${file.SystemFileName}`;
|
||||
|
||||
switch (fileExtension) {
|
||||
case "png":
|
||||
return <Image width={200} src={fileUrl} />;
|
||||
case "stl":
|
||||
return (
|
||||
<StlViewer
|
||||
style={{ top: 0, left: 0, width: "30vw", height: "30vh" }}
|
||||
orbitControls
|
||||
url={fileUrl}
|
||||
canvasId="test"
|
||||
modelProps={{
|
||||
color: Constants.COLORS.PRIMARY,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<>
|
||||
<span>Preview not supported</span>
|
||||
<br />
|
||||
<a
|
||||
href={fileUrl}
|
||||
download="test"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ width: "100%", marginTop: 10 }}
|
||||
icon={<DownloadOutlined />}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return log.length === 0 ? (
|
||||
""
|
||||
) : (
|
||||
<span style={{ whiteSpace: "pre-line" }}>
|
||||
{log}
|
||||
|
||||
{files !== "" &&
|
||||
JSON.parse(files).map((file) => {
|
||||
return (
|
||||
<Popover
|
||||
key={file.SystemFileName}
|
||||
content={getPopoverContent(file)}
|
||||
placement="rightTop"
|
||||
>
|
||||
<Tag
|
||||
key={file.SystemFileName}
|
||||
icon={<PaperClipOutlined />}
|
||||
color="processing"
|
||||
>
|
||||
{file.OriginalFileName}
|
||||
</Tag>
|
||||
</Popover>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const stepsItemHandler = () => {
|
||||
let groupTaskSteps = [];
|
||||
let groupTasks = [];
|
||||
|
|
@ -440,9 +368,12 @@ export default function GroupTasksViewModal({ isOpen }) {
|
|||
taskLockedByUserId={groupTaskSteps[index].LockedByUserId}
|
||||
/>
|
||||
) : (
|
||||
getGroupTaskStepLog(
|
||||
groupTaskSteps[index].Log,
|
||||
groupTaskSteps[index].Files
|
||||
groupTaskSteps[index].Log.length > 0 && (
|
||||
<GroupTaskStepLogHandler
|
||||
currentGroupTaskId={currentGroupTask.Id}
|
||||
log={groupTaskSteps[index].Log}
|
||||
files={groupTaskSteps[index].Files}
|
||||
/>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
|
@ -787,3 +718,118 @@ function InputRequiredHandler({
|
|||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
function GroupTaskStepLogHandler({ currentGroupTaskId, log, files }) {
|
||||
const getDownloadUrl = (file) => {
|
||||
return `${Constants.STATIC_CONTENT_ADDRESS}grouptasks/${currentGroupTaskId}/${file.SystemFileName}`;
|
||||
};
|
||||
|
||||
const getTag = (file) => {
|
||||
return (
|
||||
<a
|
||||
key={"a" + file.SystemFileName}
|
||||
href={getDownloadUrl(file)}
|
||||
download="test"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Tag
|
||||
icon={<FileImageOutlined />}
|
||||
color="processing"
|
||||
style={{ marginTop: 6 }}
|
||||
>
|
||||
{file.OriginalFileName}
|
||||
</Tag>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
const fileContent = (files) => {
|
||||
const nonImageFiles = [];
|
||||
const imageFiles = [];
|
||||
|
||||
for (const file of files) {
|
||||
const fileExtension = file.SystemFileName.split(".")[1];
|
||||
|
||||
if (
|
||||
fileExtension === "png" ||
|
||||
fileExtension === "jpeg" ||
|
||||
fileExtension === "jpg" ||
|
||||
fileExtension === "webp"
|
||||
) {
|
||||
imageFiles.push(file);
|
||||
} else {
|
||||
nonImageFiles.push(file);
|
||||
}
|
||||
}
|
||||
|
||||
const elements = [];
|
||||
|
||||
for (const nonImageFile of nonImageFiles) {
|
||||
const fileExtension = nonImageFile.SystemFileName.split(".")[1];
|
||||
|
||||
if (fileExtension === "stl") {
|
||||
elements.push(
|
||||
<div key={"tag" + nonImageFile.SystemFileName}>
|
||||
<div style={{ height: 300, backgroundColor: "#fff" }}>
|
||||
<StlViewer
|
||||
style={{ top: 0, left: 0, height: "100%" }}
|
||||
orbitControls
|
||||
modelProps={{
|
||||
color: Constants.COLORS.SECONDARY,
|
||||
scale: 1,
|
||||
positionX: 200,
|
||||
positionY: 200,
|
||||
}}
|
||||
shadows
|
||||
floorProps={{ gridWidth: 400 }}
|
||||
url={getDownloadUrl(nonImageFile)}
|
||||
onFinishLoading={(ev) => {
|
||||
console.log("ev", ev);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{getTag(nonImageFile)}
|
||||
</div>
|
||||
);
|
||||
console.log("stl download", nonImageFile.SystemFileName);
|
||||
} else {
|
||||
elements.push(getTag(nonImageFile));
|
||||
}
|
||||
}
|
||||
|
||||
const imageFileElements = [];
|
||||
|
||||
for (const imageFile of imageFiles) {
|
||||
imageFileElements.push(
|
||||
<Col
|
||||
key={imageFile.SystemFileName}
|
||||
style={{ marginTop: 6 }}
|
||||
className="gutter-row"
|
||||
span={6}
|
||||
>
|
||||
<Image width={"100%"} src={getDownloadUrl(imageFile)} />
|
||||
{getTag(imageFile)}
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
|
||||
if (imageFileElements.length > 0) {
|
||||
elements.push(
|
||||
<Row key={"imgrow"} gutter={16}>
|
||||
{imageFileElements}
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
return elements;
|
||||
};
|
||||
|
||||
return (
|
||||
<span style={{ whiteSpace: "pre-line" }}>
|
||||
{log}
|
||||
|
||||
{files !== "" && fileContent(JSON.parse(files))}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue