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 { DetailsAttribute } from '~/components/details-attribute/details-attribute';
+import { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
-type CssRules = 'root' | 'label' | 'value' | 'switch';
+type CssRules = 'root';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
-
- },
- label: {
- paddingRight: theme.spacing.unit * 2,
- textAlign: 'right'
- },
- value: {
-
- },
- switch: {
- height: '18px'
+ fontSize: '0.875rem'
}
});
-type SubprocessesProps = WithStyles<CssRules>;
-
-export const SubprocessesCard = withStyles(styles)(
- class extends React.Component<SubprocessesProps> {
+interface SubprocessesDataProps {
+ subprocesses: number;
+ filters: SubprocessFilterDataProps[];
+ onToggle: (filter: SubprocessFilterDataProps) => void;
+}
- state = {
- queued: true,
- active: true,
- completed: true,
- failed: true
- };
+type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
- handleChange = (name: string) => (event: any) => {
- this.setState({ [name]: event.target.checked });
- }
-
- render() {
- const { classes } = this.props;
- return (
- <Card className={classes.root}>
- <CardHeader title="Subprocesses and filters" />
- <CardContent>
- <Grid container direction="row">
- <Grid item xs={3}>
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Subprocesses:' value="6" />
- </Grid>
- </Grid>
- <Grid container direction="row">
- <Grid item xs={3}>
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Queued:' value='2'>
- <Switch classes={{ bar: classes.switch }}
- checked={this.state.queued}
- onChange={this.handleChange('queued')}
- value="queued"
- color="primary" />
- </DetailsAttribute>
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Active:' value='1'>
- <Switch classes={{ bar: classes.switch }}
- checked={this.state.active}
- onChange={this.handleChange('active')}
- value="active"
- color="primary" />
- </DetailsAttribute>
- </Grid>
- <Grid item xs={3}>
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Completed:' value='2'>
- <Switch classes={{ bar: classes.switch }}
- checked={this.state.completed}
- onChange={this.handleChange('completed')}
- value="completed"
- color="primary" />
- </DetailsAttribute>
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Failed:' value='1'>
- <Switch classes={{ bar: classes.switch }}
- checked={this.state.failed}
- onChange={this.handleChange('failed')}
- value="failed"
- color="primary" />
- </DetailsAttribute>
- </Grid>
- </Grid>
- </CardContent>
- </Card>
- );
- }
- }
+export const SubprocessesCard = withStyles(styles)(
+ ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) =>
+ <Card className={classes.root}>
+ <CardHeader title="Subprocess and filters" />
+ <CardContent>
+ <Grid container direction="column" spacing={16}>
+ <Grid item xs={12} container spacing={16}>
+ <SubprocessFilter label='Subprocesses' value={subprocesses} />
+ </Grid>
+ <Grid item xs={12} container spacing={16}>
+ {
+ filters.map(filter =>
+ <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter)} />
+ )
+ }
+ </Grid>
+ </Grid>
+ </CardContent>
+ </Card>
);
\ No newline at end of file