Skip to content

Commit

Permalink
Add fetch many resource renderer to other pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@SemaiCZE
SemaiCZE committed Oct 17, 2017
1 parent 79f3512 commit 6f33fd7
Show file tree
Hide file tree
Showing 7 changed files with 302 additions and 196 deletions.
6 changes: 3 additions & 3 deletions src/components/Assignments/EvaluationProgress/EvaluationProgress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ class EvaluationProgress extends Component {

return (
<Modal show={isOpen} backdrop="static">
<Modal.Header>
<Modal.Header closeButton>
<Modal.Title>
<FormattedMessage
id="app.evaluationProgress.title"
Expand All @@ -67,7 +67,7 @@ class EvaluationProgress extends Component {
>
<Table responsive>
<tbody>
{messages.map(({ wasSuccessful, text, status }, i) => (
{messages.map(({ wasSuccessful, text, status }, i) =>
<tr key={i}>
<td
className={classNames({
Expand Down Expand Up @@ -98,7 +98,7 @@ class EvaluationProgress extends Component {
<EvaluationStatusText status={status} />
</td>
</tr>
))}
)}
</tbody>
</Table>
</div>}
Expand Down
238 changes: 140 additions & 98 deletions src/pages/Pipelines/Pipelines.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,21 @@ import {
} from 'react-bootstrap';

import DeletePipelineButtonContainer from '../../containers/DeletePipelineButtonContainer';
import Page from '../../components/layout/Page';
import PageContent from '../../components/layout/PageContent';
import Box from '../../components/widgets/Box';
import { canEditPipeline } from '../../redux/selectors/users';
import { loggedInUserIdSelector } from '../../redux/selectors/auth';
import { AddIcon, EditIcon, SearchIcon } from '../../components/icons';
import { pipelinesSelector } from '../../redux/selectors/pipelines';
import {
pipelinesSelector,
fetchManyStatus
} from '../../redux/selectors/pipelines';
import {
fetchPipelines,
create as createPipeline
} from '../../redux/modules/pipelines';
import PipelinesList from '../../components/Pipelines/PipelinesList';
import FetchManyResourceRenderer from '../../components/helpers/FetchManyResourceRenderer';

import withLinks from '../../hoc/withLinks';

Expand Down Expand Up @@ -72,118 +76,154 @@ class Pipelines extends Component {
render() {
const {
pipelines,
fetchStatus,
isAuthorOfPipeline,
links: { PIPELINE_EDIT_URI_FACTORY }
} = this.props;

return (
<Page
resource={pipelines.toArray()}
title={
<FormattedMessage
id="app.pipelines.title"
defaultMessage="Pipeline list"
<FetchManyResourceRenderer
fetchManyStatus={fetchStatus}
loading={
<PageContent
title={
<FormattedMessage
id="app.page.pipelines.loading"
defaultMessage="Loading list of pipelines ..."
/>
}
description={
<FormattedMessage
id="app.page.pipelines.loadingDescription"
defaultMessage="Please wait while we are getting the list of pipelines ready."
/>
}
/>
}
description={
<FormattedMessage
id="app.pipelines.description"
defaultMessage="List and modify available pipelines."
failed={
<PageContent
title={
<FormattedMessage
id="app.page.users.failed"
defaultMessage="Cannot load the list of users"
/>
}
description={
<FormattedMessage
id="app.page.users.failedDescription"
defaultMessage="We are sorry for the inconvenience, please try again later."
/>
}
/>
}
breadcrumbs={[
{
text: (
>
{() =>
<PageContent
title={
<FormattedMessage
id="app.pipelines.title"
defaultMessage="Pipeline list"
/>
),
iconName: 'random'
}
]}
>
{(...pipelines) =>
<div>
<Box
title={
<FormattedMessage
id="app.pipelines.listTitle"
defaultMessage="Pipelines"
/>
}
footer={
<p className="text-center">
<Button
bsStyle="success"
className="btn-flat"
bsSize="sm"
onClick={() => {
this.newPipeline();
}}
>
<AddIcon />{' '}
<FormattedMessage
id="app.pipelines.add"
defaultMessage="Add pipeline"
/>
</Button>
</p>
}
description={
<FormattedMessage
id="app.pipelines.description"
defaultMessage="List and modify available pipelines."
/>
}
breadcrumbs={[
{
text: (
<FormattedMessage
id="app.pipelines.title"
defaultMessage="Pipeline list"
/>
),
iconName: 'random'
}
noPadding
unlimitedHeight
>
<div>
<form style={{ padding: '10px' }}>
<FormGroup>
<ControlLabel>
]}
>
<div>
<Box
title={
<FormattedMessage
id="app.pipelines.listTitle"
defaultMessage="Pipelines"
/>
}
footer={
<p className="text-center">
<Button
bsStyle="success"
className="btn-flat"
bsSize="sm"
onClick={() => {
this.newPipeline();
}}
>
<AddIcon />{' '}
<FormattedMessage
id="app.search.title"
defaultMessage="Search:"
/>
</ControlLabel>
<InputGroup>
<FormControl
onChange={e => {
this.query = e.target.value;
}}
id="app.pipelines.add"
defaultMessage="Add pipeline"
/>
<InputGroup.Button>
<Button
type="submit"
onClick={e => {
e.preventDefault();
this.onChange(this.query, pipelines);
</Button>
</p>
}
noPadding
unlimitedHeight
>
<div>
<form style={{ padding: '10px' }}>
<FormGroup>
<ControlLabel>
<FormattedMessage
id="app.search.title"
defaultMessage="Search:"
/>
</ControlLabel>
<InputGroup>
<FormControl
onChange={e => {
this.query = e.target.value;
}}
disabled={false}
>
<SearchIcon />
</Button>
</InputGroup.Button>
</InputGroup>
</FormGroup>
</form>
<PipelinesList
pipelines={this.state.visiblePipelines}
createActions={id =>
isAuthorOfPipeline(id) &&
<ButtonGroup>
<LinkContainer to={PIPELINE_EDIT_URI_FACTORY(id)}>
<Button bsSize="xs" bsStyle="warning">
<EditIcon />{' '}
<FormattedMessage
id="app.pipelines.listEdit"
defaultMessage="Edit"
/>
</Button>
</LinkContainer>
<DeletePipelineButtonContainer id={id} bsSize="xs" />
</ButtonGroup>}
/>
</div>
</Box>
</div>}
</Page>
/>
<InputGroup.Button>
<Button
type="submit"
onClick={e => {
e.preventDefault();
this.onChange(this.query, pipelines);
}}
disabled={false}
>
<SearchIcon />
</Button>
</InputGroup.Button>
</InputGroup>
</FormGroup>
</form>
<PipelinesList
pipelines={this.state.visiblePipelines}
createActions={id =>
isAuthorOfPipeline(id) &&
<ButtonGroup>
<LinkContainer to={PIPELINE_EDIT_URI_FACTORY(id)}>
<Button bsSize="xs" bsStyle="warning">
<EditIcon />{' '}
<FormattedMessage
id="app.pipelines.listEdit"
defaultMessage="Edit"
/>
</Button>
</LinkContainer>
<DeletePipelineButtonContainer id={id} bsSize="xs" />
</ButtonGroup>}
/>
</div>
</Box>
</div>
</PageContent>}
</FetchManyResourceRenderer>
);
}
}
Expand All @@ -194,7 +234,8 @@ Pipelines.propTypes = {
createPipeline: PropTypes.func.isRequired,
isAuthorOfPipeline: PropTypes.func.isRequired,
push: PropTypes.func.isRequired,
links: PropTypes.object.isRequired
links: PropTypes.object.isRequired,
fetchStatus: PropTypes.string
};

export default withLinks(
Expand All @@ -204,6 +245,7 @@ export default withLinks(

return {
pipelines: pipelinesSelector(state),
fetchStatus: fetchManyStatus(state),
isAuthorOfPipeline: pipelineId =>
canEditPipeline(userId, pipelineId)(state)
};
Expand Down
Loading

0 comments on commit 6f33fd7

Please sign in to comment.