frikky
333 lines
10 KiB
React
333 lines
10 KiB
React
import React, { useState, useEffect, useLayoutEffect } from "react";
|
|
import theme from '../theme.jsx';
|
|
|
|
import {
|
|
Chip,
|
|
Typography,
|
|
Paper,
|
|
Avatar,
|
|
Grid,
|
|
Tooltip,
|
|
Button,
|
|
} from "@material-ui/core";
|
|
|
|
import {
|
|
AvatarGroup,
|
|
} from "@mui/material"
|
|
|
|
import {
|
|
Restore as RestoreIcon,
|
|
Edit as EditIcon,
|
|
BubbleChart as BubbleChartIcon,
|
|
MoreVert as MoreVertIcon,
|
|
} from '@material-ui/icons';
|
|
|
|
import { useNavigate, Link, useParams } from "react-router-dom";
|
|
|
|
const workflowActionStyle = {
|
|
display: "flex",
|
|
width: 160,
|
|
height: 44,
|
|
justifyContent: "space-between",
|
|
}
|
|
|
|
const paperAppStyle = {
|
|
minHeight: 130,
|
|
maxHeight: 130,
|
|
overflow: "hidden",
|
|
width: "100%",
|
|
color: "white",
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
padding: "12px 12px 0px 15px",
|
|
borderRadius: 5,
|
|
display: "flex",
|
|
boxSizing: "border-box",
|
|
position: "relative",
|
|
}
|
|
|
|
const chipStyle = {
|
|
backgroundColor: "#3d3f43",
|
|
marginRight: 5,
|
|
paddingLeft: 5,
|
|
paddingRight: 5,
|
|
height: 28,
|
|
cursor: "pointer",
|
|
borderColor: "#3d3f43",
|
|
color: "white",
|
|
}
|
|
|
|
const WorkflowPaper = (props) => {
|
|
const { data } = props;
|
|
let navigate = useNavigate();
|
|
|
|
const [open, setOpen] = React.useState(false);
|
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
const appGroup = data.action_references === undefined || data.action_references === null ? [] : data.action_references
|
|
|
|
const activateWorkflow = (workflow) => {
|
|
console.log("Should activate: ", workflow)
|
|
|
|
}
|
|
|
|
//console.log("Workflow: ", data)
|
|
var boxColor = "#86c142";
|
|
|
|
var parsedName = data.name;
|
|
if (
|
|
parsedName !== undefined &&
|
|
parsedName !== null &&
|
|
parsedName.length > 35
|
|
) {
|
|
parsedName = parsedName.slice(0, 36) + "..";
|
|
}
|
|
|
|
const imageStyle = {
|
|
width: 28,
|
|
height: 28,
|
|
marginRight: 10,
|
|
border: "1px solid rgba(255,255,255,0.3)",
|
|
}
|
|
|
|
var image = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.image !== undefined && data.creator_info.image !== null && data.creator_info.image.length > 0 ? <Avatar alt={data.creator} src={data.creator_info.image} style={imageStyle}/> : <Avatar alt={"shuffle_image"} src={theme.palette.defaultImage} style={imageStyle}/>
|
|
const creatorname = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.username !== undefined && data.creator_info.username !== null && data.creator_info.username.length > 0 ? data.creator_info.username : "Shuffle"
|
|
var orgName = "";
|
|
var orgId = "";
|
|
if ((data.objectID === undefined || data.objectID === null) && data.id !== undefined && data.id !== null) {
|
|
data.objectID = data.id
|
|
}
|
|
|
|
//console.log("IMG: ", data)
|
|
var parsedUrl = `/workflows/${data.objectID}`
|
|
if (data.__queryID !== undefined && data.__queryID !== null) {
|
|
parsedUrl += `?queryID=${data.__queryID}`
|
|
}
|
|
|
|
const paperImgStyle = {
|
|
height: 150,
|
|
width: "100%",
|
|
backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)",
|
|
color: "white",
|
|
position: "relative",
|
|
borderRadius: "10px 10px 0% 0%",
|
|
}
|
|
|
|
const bgImage1 = "https://avatars.githubusercontent.com/u/5719530?v=4"
|
|
const bgImage2 = "https://avatars.githubusercontent.com/u/5719530?v=4"
|
|
const itemSize = 70
|
|
|
|
return (
|
|
<div style={{width: "100%", position: "relative",}}>
|
|
<div style={paperImgStyle}>
|
|
<div style={{position: "absolute", left: 55, top: 42, height: itemSize, width: itemSize, }}>
|
|
<img src={bgImage1} alt="Image alt" style={{overflow: "hidden", width: itemSize, height: itemSize, borderRadius: 50, border: "1px solid rgba(255,255,255,0.3)"}} />
|
|
</div>
|
|
<div style={{position: "absolute", left: 160, top: 42, height: itemSize, width: itemSize, }}>
|
|
<img src={bgImage2} alt="Image alt" style={{overflow: "hidden", width: itemSize, height: itemSize, borderRadius: 50, border: "1px solid rgba(255,255,255,0.3)"}} />
|
|
</div>
|
|
</div>
|
|
<Paper square style={paperAppStyle}>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
bottom: 1,
|
|
left: 1,
|
|
height: 12,
|
|
width: 12,
|
|
backgroundColor: boxColor,
|
|
borderRadius: "0 100px 0 0",
|
|
}}
|
|
/>
|
|
<Grid
|
|
item
|
|
style={{ display: "flex", flexDirection: "column", width: "100%" }}
|
|
>
|
|
<Grid item style={{ display: "flex", maxHeight: 34 }}>
|
|
<Tooltip title={`Released by ${creatorname}`} placement="bottom">
|
|
<div
|
|
style={{
|
|
cursor: data.creator_info !== undefined ? "pointer" : "inherit",
|
|
}}
|
|
onClick={() => {
|
|
if (data.creator_info !== undefined) {
|
|
navigate("/creators/"+data.creator_info.username)
|
|
}
|
|
}}
|
|
>
|
|
{image}
|
|
</div>
|
|
</Tooltip>
|
|
<Tooltip title={`See ${data.name}`} placement="bottom">
|
|
<Typography
|
|
variant="h6"
|
|
style={{
|
|
marginBottom: 0,
|
|
paddingBottom: 0,
|
|
maxHeight: 30,
|
|
flex: 10,
|
|
}}
|
|
>
|
|
<Link
|
|
to={parsedUrl}
|
|
style={{ textDecoration: "none", color: "inherit" }}
|
|
>
|
|
{parsedName}
|
|
</Link>
|
|
</Typography>
|
|
</Tooltip>
|
|
</Grid>
|
|
<Grid item style={workflowActionStyle}>
|
|
{/*
|
|
{appGroup.length > 0 ?
|
|
<div style={{display: "flex", marginTop: 8, }}>
|
|
<AvatarGroup max={4} style={{marginLeft: 5, maxHeight: 24,}}>
|
|
{appGroup.map((app, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
height: 24,
|
|
width: 24,
|
|
filter: "brightness(0.6)",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
navigate("/apps/"+app.id)
|
|
}}
|
|
>
|
|
<Tooltip color="primary" title={app.name} placement="bottom">
|
|
<Avatar alt={app.name} src={app.image_url} style={{width: 24, height: 24}}/>
|
|
</Tooltip>
|
|
</div>
|
|
)
|
|
})}
|
|
</AvatarGroup>
|
|
</div>
|
|
:
|
|
<Tooltip color="primary" title="Action amount" placement="bottom">
|
|
<span style={{ color: "#979797", display: "flex" }}>
|
|
<BubbleChartIcon
|
|
style={{ marginTop: "auto", marginBottom: "auto" }}
|
|
/>
|
|
<Typography
|
|
style={{
|
|
marginLeft: 5,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
{data.actions === undefined || data.actions === null ? 1 : data.actions.length}
|
|
</Typography>
|
|
</span>
|
|
</Tooltip>
|
|
}
|
|
*/}
|
|
{/*
|
|
<Tooltip
|
|
color="primary"
|
|
title="Trigger amount"
|
|
placement="bottom"
|
|
>
|
|
<span
|
|
style={{ marginLeft: 15, color: "#979797", display: "flex" }}
|
|
>
|
|
<RestoreIcon
|
|
style={{
|
|
color: "#979797",
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
/>
|
|
<Typography
|
|
style={{
|
|
marginLeft: 5,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
{data.triggers === undefined || data.triggers === null ? 1 : data.triggers.length}
|
|
</Typography>
|
|
</span>
|
|
</Tooltip>
|
|
<Tooltip color="primary" title="Subflows used" placement="bottom">
|
|
<span
|
|
style={{
|
|
marginLeft: 15,
|
|
display: "flex",
|
|
color: "#979797",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
}}
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
style={{
|
|
color: "#979797",
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
<path
|
|
d="M0 0H15V15H0V0ZM16 16H18V18H16V16ZM16 13H18V15H16V13ZM16 10H18V12H16V10ZM16 7H18V9H16V7ZM16 4H18V6H16V4ZM13 16H15V18H13V16ZM10 16H12V18H10V16ZM7 16H9V18H7V16ZM4 16H6V18H4V16Z"
|
|
fill="#979797"
|
|
/>
|
|
</svg>
|
|
<Typography
|
|
style={{
|
|
marginLeft: 5,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}
|
|
>
|
|
{0}
|
|
</Typography>
|
|
</span>
|
|
</Tooltip>
|
|
*/}
|
|
</Grid>
|
|
{/*
|
|
<Grid
|
|
item
|
|
style={{
|
|
justifyContent: "left",
|
|
overflow: "hidden",
|
|
marginTop: 5,
|
|
}}
|
|
>
|
|
{data.tags !== undefined && data.tags !== null
|
|
? data.tags.map((tag, index) => {
|
|
if (index >= 3) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Chip
|
|
key={index}
|
|
style={chipStyle}
|
|
label={tag}
|
|
variant="outlined"
|
|
color="primary"
|
|
/>
|
|
);
|
|
})
|
|
: null}
|
|
</Grid>
|
|
*/}
|
|
|
|
<Button variant="outlined" style={{textDecoration: "none", borderRadius: 25,}} onClick={() => {
|
|
activateWorkflow(data)
|
|
}}>
|
|
Try this workflow
|
|
</Button>
|
|
</Grid>
|
|
</Paper>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default WorkflowPaper
|