|
|
@@ -1,11 +1,11 @@
|
|
|
|
import React, { useEffect, useContext } from "react";
|
|
|
|
import React, { useEffect } from "react";
|
|
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
|
|
import { useTheme } from "@material-ui/core/styles";
|
|
|
|
import { useTheme } from "@material-ui/core/styles";
|
|
|
|
import { Navigate } from "react-router-dom";
|
|
|
|
import { Navigate } from "react-router-dom";
|
|
|
|
//import { Redirect } from "react-router-dom";
|
|
|
|
//import { Redirect } from "react-router-dom";
|
|
|
|
|
|
|
|
|
|
|
|
import SecurityFramework from '../components/SecurityFramework.jsx';
|
|
|
|
//import SecurityFramework from '../components/SecurityFramework.jsx';
|
|
|
|
import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
|
|
|
|
//import { ShepherdTourContext } from 'react-shepherd'
|
|
|
|
import { isMobile } from "react-device-detect"
|
|
|
|
import { isMobile } from "react-device-detect"
|
|
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
import {
|
|
|
@@ -17,16 +17,13 @@ import {
|
|
|
|
ListSubheader,
|
|
|
|
ListSubheader,
|
|
|
|
Paper,
|
|
|
|
Paper,
|
|
|
|
Tooltip,
|
|
|
|
Tooltip,
|
|
|
|
Divider,
|
|
|
|
|
|
|
|
Button,
|
|
|
|
Button,
|
|
|
|
TextField,
|
|
|
|
TextField,
|
|
|
|
FormControl,
|
|
|
|
FormControl,
|
|
|
|
IconButton,
|
|
|
|
IconButton,
|
|
|
|
Menu,
|
|
|
|
Menu,
|
|
|
|
MenuItem,
|
|
|
|
MenuItem,
|
|
|
|
FormControlLabel,
|
|
|
|
|
|
|
|
Chip,
|
|
|
|
Chip,
|
|
|
|
Switch,
|
|
|
|
|
|
|
|
Typography,
|
|
|
|
Typography,
|
|
|
|
Zoom,
|
|
|
|
Zoom,
|
|
|
|
CircularProgress,
|
|
|
|
CircularProgress,
|
|
|
@@ -34,7 +31,6 @@ import {
|
|
|
|
DialogTitle,
|
|
|
|
DialogTitle,
|
|
|
|
DialogActions,
|
|
|
|
DialogActions,
|
|
|
|
DialogContent,
|
|
|
|
DialogContent,
|
|
|
|
OutlinedInput,
|
|
|
|
|
|
|
|
Checkbox,
|
|
|
|
Checkbox,
|
|
|
|
ListItemText,
|
|
|
|
ListItemText,
|
|
|
|
} from "@material-ui/core";
|
|
|
|
} from "@material-ui/core";
|
|
|
@@ -72,7 +68,7 @@ import {
|
|
|
|
ExpandMore as ExpandMoreIcon,
|
|
|
|
ExpandMore as ExpandMoreIcon,
|
|
|
|
} from "@material-ui/icons";
|
|
|
|
} from "@material-ui/icons";
|
|
|
|
|
|
|
|
|
|
|
|
import NestedMenuItem from "material-ui-nested-menu-item";
|
|
|
|
//import NestedMenuItem from "material-ui-nested-menu-item";
|
|
|
|
//import {Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon, Done as DoneIcon, Close as CloseIcon, Error as ErrorIcon, FindReplace as FindreplaceIcon, ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, MoreVert as MoreVertIcon, Apps as AppsIcon, Schedule as ScheduleIcon, FavoriteBorder as FavoriteBorderIcon, Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, ArrowBack as ArrowBackIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon} from '@material-ui/icons';
|
|
|
|
//import {Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon, Done as DoneIcon, Close as CloseIcon, Error as ErrorIcon, FindReplace as FindreplaceIcon, ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, MoreVert as MoreVertIcon, Apps as AppsIcon, Schedule as ScheduleIcon, FavoriteBorder as FavoriteBorderIcon, Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, ArrowBack as ArrowBackIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon} from '@material-ui/icons';
|
|
|
|
|
|
|
|
|
|
|
|
//https://next.material-ui.com/components/material-icons/
|
|
|
|
//https://next.material-ui.com/components/material-icons/
|
|
|
@@ -1906,7 +1902,6 @@ const Workflows = (props) => {
|
|
|
|
overflow: "hidden",
|
|
|
|
overflow: "hidden",
|
|
|
|
marginTop: 5,
|
|
|
|
marginTop: 5,
|
|
|
|
maxHeight: 28,
|
|
|
|
maxHeight: 28,
|
|
|
|
overflow: "hidden",
|
|
|
|
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{data.tags !== undefined && data.tags !== null
|
|
|
|
{data.tags !== undefined && data.tags !== null
|
|
|
@@ -2855,100 +2850,100 @@ const Workflows = (props) => {
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
const tourOptions = {
|
|
|
|
// const tourOptions = {
|
|
|
|
defaultStepOptions: {
|
|
|
|
// defaultStepOptions: {
|
|
|
|
classes: "shadow-md bg-purple-dark",
|
|
|
|
// classes: "shadow-md bg-purple-dark",
|
|
|
|
scrollTo: true
|
|
|
|
// scrollTo: true
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
useModalOverlay: true,
|
|
|
|
// useModalOverlay: true,
|
|
|
|
tourName: workflows,
|
|
|
|
// tourName: workflows,
|
|
|
|
exitOnEsc: true,
|
|
|
|
// exitOnEsc: true,
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
//classes: "custom-class-name-1 custom-class-name-2",
|
|
|
|
// //classes: "custom-class-name-1 custom-class-name-2",
|
|
|
|
const newSteps = [
|
|
|
|
// const newSteps = [
|
|
|
|
{
|
|
|
|
// {
|
|
|
|
id: "intro",
|
|
|
|
// id: "intro",
|
|
|
|
scrollTo: true,
|
|
|
|
// scrollTo: true,
|
|
|
|
beforeShowPromise: function() {
|
|
|
|
// beforeShowPromise: function() {
|
|
|
|
return new Promise(function(resolve) {
|
|
|
|
// return new Promise(function(resolve) {
|
|
|
|
setTimeout(function() {
|
|
|
|
// setTimeout(function() {
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
// window.scrollTo(0, 0);
|
|
|
|
resolve();
|
|
|
|
// resolve();
|
|
|
|
}, 500);
|
|
|
|
// }, 500);
|
|
|
|
});
|
|
|
|
// });
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
buttons: [
|
|
|
|
// buttons: [
|
|
|
|
{
|
|
|
|
// {
|
|
|
|
classes: "shepherd-button-primary",
|
|
|
|
// classes: "shepherd-button-primary",
|
|
|
|
style: {
|
|
|
|
// style: {
|
|
|
|
backgroundColor: "red",
|
|
|
|
// backgroundColor: "red",
|
|
|
|
color: "white",
|
|
|
|
// color: "white",
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
text: "Next",
|
|
|
|
// text: "Next",
|
|
|
|
type: "next"
|
|
|
|
// type: "next"
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
],
|
|
|
|
// ],
|
|
|
|
highlightClass: "highlight",
|
|
|
|
// highlightClass: "highlight",
|
|
|
|
showCancelLink: true,
|
|
|
|
// showCancelLink: true,
|
|
|
|
text: [
|
|
|
|
// text: [
|
|
|
|
"React-Shepherd is a JavaScript library for guiding users through your React app."
|
|
|
|
// "React-Shepherd is a JavaScript library for guiding users through your React app."
|
|
|
|
],
|
|
|
|
// ],
|
|
|
|
when: {
|
|
|
|
// when: {
|
|
|
|
show: () => {
|
|
|
|
// show: () => {
|
|
|
|
console.log("show step 1");
|
|
|
|
// console.log("show step 1");
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
hide: () => {
|
|
|
|
// hide: () => {
|
|
|
|
console.log("hide step 1");
|
|
|
|
// console.log("hide step 1");
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
{
|
|
|
|
// {
|
|
|
|
id: "second",
|
|
|
|
// id: "second",
|
|
|
|
attachTo: {
|
|
|
|
// attachTo: {
|
|
|
|
element: "second-step",
|
|
|
|
// element: "second-step",
|
|
|
|
on: "top"
|
|
|
|
// on: "top"
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
text: [
|
|
|
|
// text: [
|
|
|
|
"Yuk eksplorasi hasil Tes Minat Bakat-mu dan rekomendasi <b>Jurusan</b> dan Karier."
|
|
|
|
// "Yuk eksplorasi hasil Tes Minat Bakat-mu dan rekomendasi <b>Jurusan</b> dan Karier."
|
|
|
|
],
|
|
|
|
// ],
|
|
|
|
buttons: [
|
|
|
|
// buttons: [
|
|
|
|
{
|
|
|
|
// {
|
|
|
|
classes: "btn btn-info",
|
|
|
|
// classes: "btn btn-info",
|
|
|
|
text: "Kembali",
|
|
|
|
// text: "Kembali",
|
|
|
|
type: "back"
|
|
|
|
// type: "back"
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
{
|
|
|
|
// {
|
|
|
|
classes: "btn btn-success",
|
|
|
|
// classes: "btn btn-success",
|
|
|
|
text: "Saya Mengerti",
|
|
|
|
// text: "Saya Mengerti",
|
|
|
|
type: "cancel"
|
|
|
|
// type: "cancel"
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
],
|
|
|
|
// ],
|
|
|
|
when: {
|
|
|
|
// when: {
|
|
|
|
show: () => {
|
|
|
|
// show: () => {
|
|
|
|
console.log("show stepp");
|
|
|
|
// console.log("show stepp");
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
hide: () => {
|
|
|
|
// hide: () => {
|
|
|
|
console.log("complete step");
|
|
|
|
// console.log("complete step");
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
showCancelLink: false,
|
|
|
|
// showCancelLink: false,
|
|
|
|
scrollTo: true,
|
|
|
|
// scrollTo: true,
|
|
|
|
modalOverlayOpeningPadding: 4,
|
|
|
|
// modalOverlayOpeningPadding: 4,
|
|
|
|
useModalOverlay: false,
|
|
|
|
// useModalOverlay: false,
|
|
|
|
canClickTarget: false
|
|
|
|
// canClickTarget: false
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
]
|
|
|
|
// ]
|
|
|
|
|
|
|
|
|
|
|
|
function TourButton() {
|
|
|
|
// function TourButton() {
|
|
|
|
const tour = useContext(ShepherdTourContext);
|
|
|
|
// const tour = useContext(ShepherdTourContext);
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
// return (
|
|
|
|
<Button variant="contained" color="primary" onClick={tour.start}>
|
|
|
|
// <Button variant="contained" color="primary" onClick={tour.start}>
|
|
|
|
Start Tour
|
|
|
|
// Start Tour
|
|
|
|
</Button>
|
|
|
|
// </Button>
|
|
|
|
);
|
|
|
|
// );
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
const WorkflowView = () => {
|
|
|
|
const WorkflowView = () => {
|
|
|
|
if (workflows.length === 0) {
|
|
|
|
if (workflows.length === 0) {
|
|
|
|