show task files on step log instead of popover
parent
92fcc1bcb1
commit
6cf5848378
|
|
@ -1,6 +1,7 @@
|
||||||
import {
|
import {
|
||||||
Alert,
|
Alert,
|
||||||
Button,
|
Button,
|
||||||
|
Col,
|
||||||
Form,
|
Form,
|
||||||
Image,
|
Image,
|
||||||
Input,
|
Input,
|
||||||
|
|
@ -8,6 +9,7 @@ import {
|
||||||
Modal,
|
Modal,
|
||||||
Popover,
|
Popover,
|
||||||
Result,
|
Result,
|
||||||
|
Row,
|
||||||
Steps,
|
Steps,
|
||||||
Tag,
|
Tag,
|
||||||
notification,
|
notification,
|
||||||
|
|
@ -25,10 +27,9 @@ import {
|
||||||
GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
|
GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import {
|
import {
|
||||||
DownloadOutlined,
|
FileImageOutlined,
|
||||||
InfoCircleOutlined,
|
InfoCircleOutlined,
|
||||||
LockOutlined,
|
LockOutlined,
|
||||||
PaperClipOutlined,
|
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import { StlViewer } from "react-stl-viewer";
|
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 = () => {
|
const stepsItemHandler = () => {
|
||||||
let groupTaskSteps = [];
|
let groupTaskSteps = [];
|
||||||
let groupTasks = [];
|
let groupTasks = [];
|
||||||
|
|
@ -440,9 +368,12 @@ export default function GroupTasksViewModal({ isOpen }) {
|
||||||
taskLockedByUserId={groupTaskSteps[index].LockedByUserId}
|
taskLockedByUserId={groupTaskSteps[index].LockedByUserId}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
getGroupTaskStepLog(
|
groupTaskSteps[index].Log.length > 0 && (
|
||||||
groupTaskSteps[index].Log,
|
<GroupTaskStepLogHandler
|
||||||
groupTaskSteps[index].Files
|
currentGroupTaskId={currentGroupTask.Id}
|
||||||
|
log={groupTaskSteps[index].Log}
|
||||||
|
files={groupTaskSteps[index].Files}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -787,3 +718,118 @@ function InputRequiredHandler({
|
||||||
</Form>
|
</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