import * as React from 'react';
import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Switch } from '@material-ui/core';
+import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Typography } from '@material-ui/core';
+import { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
-type CssRules = 'root' | 'label' | 'value' | 'switch' | 'grid';
+type CssRules = 'root' | 'title' | 'gridFilter';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
- fontSize: '0.875rem'
+ fontSize: '0.875rem',
+ height: '100%'
},
- label: {
- color: theme.palette.grey["500"],
- marginBottom: theme.spacing.unit
+ title: {
+ color: theme.palette.grey["700"]
},
- value: {
- marginBottom: theme.spacing.unit
- },
- switch: {
- '& span:first-child': {
- height: '18px'
- }
- },
- grid: {
- marginLeft: '22px'
+ gridFilter: {
+ height: '20px',
+ marginBottom: theme.spacing.unit,
+ paddingTop: '0px!important',
+ paddingBottom: '0px!important',
}
});
-type SubprocessesProps = WithStyles<CssRules>;
-
-export const SubprocessesCard = withStyles(styles)(
- class extends React.Component<SubprocessesProps> {
-
- state = {
- queued: true,
- active: true,
- completed: true,
- failed: true
- };
+interface SubprocessesDataProps {
+ subprocessesAmount: number;
+ filters: SubprocessFilterDataProps[];
+ onToggle: (status: string) => void;
+}
- handleChange = (name: string) => (event: any) => {
- this.setState({ [name]: event.target.checked });
- }
+type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
- render() {
- const { classes } = this.props;
- return (
- <Card className={classes.root}>
- <CardHeader title="Subprocesses and filters" />
- <CardContent>
- <Grid container direction="row" spacing={16} justify="flex-start" alignItems="stretch">
- <Grid item>
- <Grid container direction="column" alignItems="flex-end" spacing={8}>
- <Grid item className={classes.label}>Subprocesses:</Grid>
- <Grid item className={classes.label}>Queued:</Grid>
- <Grid item className={classes.label}>Active:</Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction="column" alignItems="flex-start" spacing={8}>
- <Grid item className={classes.value}>1</Grid>
- <Grid item className={classes.value}>
- 2
- <Switch classes={{ root: classes.switch }}
- checked={this.state.queued}
- onChange={this.handleChange('queued')}
- value="queued"
- color="primary" />
- </Grid>
- <Grid item className={classes.value}>
- 3
- <Switch classes={{ root: classes.switch }}
- checked={this.state.active}
- onChange={this.handleChange('active')}
- value="active"
- color="primary" />
- </Grid>
- </Grid>
- </Grid>
- <Grid item className={classes.grid}>
- <Grid container direction="column" alignItems="flex-end" spacing={8}>
- <Grid item className={classes.label}> </Grid>
- <Grid item className={classes.label}>Completed:</Grid>
- <Grid item className={classes.label}>Failed:</Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction="column" alignItems="flex-end" spacing={8}>
- <Grid item className={classes.value}> </Grid>
- <Grid item className={classes.value}>
- 2
- <Switch classes={{ root: classes.switch }}
- checked={this.state.completed}
- onChange={this.handleChange('completed')}
- value="completed"
- color="primary" />
- </Grid>
- <Grid item className={classes.value}>
- 1
- <Switch classes={{ root: classes.switch }}
- checked={this.state.failed}
- onChange={this.handleChange('failed')}
- value="failed"
- color="primary" />
- </Grid>
- </Grid>
- </Grid>
+export const SubprocessesCard = withStyles(styles)(
+ ({ classes, filters, subprocessesAmount, onToggle }: SubprocessesProps) =>
+ <Card className={classes.root}>
+ <CardHeader
+ className={classes.title}
+ title={
+ <Typography noWrap variant="title" color='inherit'>
+ Subprocess and filters
+ </Typography>} />
+ <CardContent>
+ <Grid container direction="column" spacing={16}>
+ <Grid item xs={12} container spacing={16}>
+ <Grid item md={12} lg={6}>
+ <SubprocessFilter label='Subprocesses' value={subprocessesAmount} />
</Grid>
- </CardContent>
- </Card>
- );
- }
- }
+ <Grid item md={12} lg={6}/>
+ {
+ filters.map(filter =>
+ <Grid item md={12} lg={6} key={filter.key} className={classes.gridFilter}>
+ <SubprocessFilter {...filter} onToggle={() => onToggle(filter.label)} />
+ </Grid>
+ )
+ }
+ </Grid>
+ </Grid>
+ </CardContent>
+ </Card>
);
\ No newline at end of file