Added possibility for videos and documentation for usecases to map to workflows

This commit is contained in:
frikky
2022-03-04 03:50:28 +01:00
parent 80a6893b16
commit 3d25c768bf
2 changed files with 123 additions and 31 deletions
+1 -1
View File
@@ -2,7 +2,7 @@ module main
go 1.16 go 1.16
//replace github.com/shuffle/shuffle-shared => ../../../shuffle-shared replace github.com/shuffle/shuffle-shared => ../../../shuffle-shared
//replace github.com/frikky/kin-openapi => ../../../../git/kin-openapi //replace github.com/frikky/kin-openapi => ../../../../git/kin-openapi
//replace github.com/frikky/go-elasticsearch => ../../../../git/go-elasticsearch //replace github.com/frikky/go-elasticsearch => ../../../../git/go-elasticsearch
+122 -30
View File
@@ -20,6 +20,8 @@ import {
import { import {
Close as CloseIcon, Close as CloseIcon,
DoneAll as DoneAllIcon, DoneAll as DoneAllIcon,
Description as DescriptionIcon,
PlayArrow as PlayArrowIcon,
} from "@material-ui/icons"; } from "@material-ui/icons";
import WorkflowPaper from "../components/WorkflowPaper.jsx" import WorkflowPaper from "../components/WorkflowPaper.jsx"
@@ -87,8 +89,10 @@ const UsecaseListComponent = ({keys, isCloud}) => {
<Grid item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => { <Grid item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
if (selectedItem) { if (selectedItem) {
} else { } else {
setExpandedIndex(index) if (subcase.description !== undefined && subcase.description !== null && subcase.description.length > 0) {
setExpandedItem(subindex) setExpandedIndex(index)
setExpandedItem(subindex)
}
} }
}}> }}>
<Paper style={{padding: "30px 30px 30px 30px", minHeight: 75, cursor: !selectedItem ? "pointer" : "default", border: itemBorder, backgroundColor: backgroundColor,}} onClick={() => { <Paper style={{padding: "30px 30px 30px 30px", minHeight: 75, cursor: !selectedItem ? "pointer" : "default", border: itemBorder, backgroundColor: backgroundColor,}} onClick={() => {
@@ -96,23 +100,67 @@ const UsecaseListComponent = ({keys, isCloud}) => {
}}> }}>
{!selectedItem ? {!selectedItem ?
<div style={{textAlign: "left", position: "relative",}}> <div style={{textAlign: "left", position: "relative",}}>
<Typography variant="h6"> <Typography variant="h6" style={{maxWidth: 215}}>
<b>{subcase.name}</b> <b>{subcase.name}</b>
</Typography> </Typography>
{finished ? <div style={{position: "absolute", top: -26, right: -20, width: 50, }}>
<Tooltip {finished ?
title="A workflow has been assigned" <Tooltip
placement="top" title="A workflow has been assigned for this use case"
> placement="top"
<IconButton
style={{ position: "absolute", top: -20, right: -20}}
onClick={(e) => {
}}
> >
<DoneAllIcon style={{ color: usecase.color }} /> <IconButton
</IconButton> style={{}}
</Tooltip> onClick={(e) => {
}}
>
<DoneAllIcon style={{ color: usecase.color }} />
</IconButton>
</Tooltip>
: null}
{subcase.blogpost !== null && subcase.blogpost !== undefined && subcase.blogpost.length > 0 ?
<a
href={subcase.blogpost}
rel="noopener noreferrer"
target="_blank"
style={{ textDecoration: "none", color: "#f85a3e" }}
>
<Tooltip
title="Click to visit the blogpost"
placement="top"
>
<IconButton
style={{paddingTop: 5, }}
onClick={(e) => {
}}
>
<DescriptionIcon style={{ color: usecase.color }} />
</IconButton>
</Tooltip>
</a>
: null}
{subcase.video !== null && subcase.video !== undefined && subcase.video.length > 0 ?
<a
href={subcase.video}
rel="noopener noreferrer"
target="_blank"
style={{ textDecoration: "none", color: "#f85a3e" }}
>
<Tooltip
title="Click to see a video for this usecase"
placement="top"
>
<IconButton
style={{paddingTop: 5,}}
onClick={(e) => {
}}
>
<PlayArrowIcon style={{ color: usecase.color }} />
</IconButton>
</Tooltip>
</a>
: null} : null}
</div>
</div> </div>
: :
<div style={{textAlign: "left", position: "relative",}}> <div style={{textAlign: "left", position: "relative",}}>
@@ -122,21 +170,65 @@ const UsecaseListComponent = ({keys, isCloud}) => {
<Typography variant="body2"> <Typography variant="body2">
Description: {subcase.description} Description: {subcase.description}
</Typography> </Typography>
<Tooltip <div style={{ position: "absolute", top: 0, right: 0 }}>
title="Close window" {subcase.blogpost !== null && subcase.blogpost !== undefined && subcase.blogpost.length > 0 ?
placement="top" <a
style={{ zIndex: 10011 }} href={subcase.blogpost}
> rel="noopener noreferrer"
<IconButton target="_blank"
style={{ position: "absolute", top: 0, right: 0}} style={{ textDecoration: "none", color: "#f85a3e" }}
onClick={(e) => { >
setExpandedItem(-1) <Tooltip
setExpandedIndex(-1) title="Click to visit the blogpost"
}} placement="top"
> >
<CloseIcon style={{ color: "white" }} /> <IconButton
</IconButton> style={{paddingTop: 5, }}
</Tooltip> onClick={(e) => {
}}
>
<DescriptionIcon style={{ color: usecase.color }} />
</IconButton>
</Tooltip>
</a>
: null}
{subcase.video !== null && subcase.video !== undefined && subcase.video.length > 0 ?
<a
href={subcase.video}
rel="noopener noreferrer"
target="_blank"
style={{ textDecoration: "none", color: "#f85a3e" }}
>
<Tooltip
title="See video for this use case"
placement="top"
>
<IconButton
style={{paddingTop: 5,}}
onClick={(e) => {
}}
>
<PlayArrowIcon style={{ color: usecase.color }} />
</IconButton>
</Tooltip>
</a>
: null}
<Tooltip
title="Close window"
placement="top"
style={{ zIndex: 10011 }}
>
<IconButton
style={{}}
onClick={(e) => {
setExpandedItem(-1)
setExpandedIndex(-1)
}}
>
<CloseIcon style={{ color: "white" }} />
</IconButton>
</Tooltip>
</div>
<div style={{marginTop: 25, display: "flex", minHeight: 400, maxHeight: 400, }}> <div style={{marginTop: 25, display: "flex", minHeight: 400, maxHeight: 400, }}>
<img <img
alt={subcase.name} alt={subcase.name}