diff options
Diffstat (limited to 'sdnr/wt-odlux/odlux/apps/demoApp/src/views/authorsList.tsx')
-rw-r--r-- | sdnr/wt-odlux/odlux/apps/demoApp/src/views/authorsList.tsx | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/sdnr/wt-odlux/odlux/apps/demoApp/src/views/authorsList.tsx b/sdnr/wt-odlux/odlux/apps/demoApp/src/views/authorsList.tsx new file mode 100644 index 000000000..5d9f13a55 --- /dev/null +++ b/sdnr/wt-odlux/odlux/apps/demoApp/src/views/authorsList.tsx @@ -0,0 +1,93 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ +import React from 'react'; +import { withRouter, RouteComponentProps } from 'react-router-dom'; + +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; // means border + +import { connect } from '../../../../framework/src/flux/connect'; + +import { loadAllAuthorsAsync } from '../actions/authorActions'; +import { IAuthor } from '../models/author'; + +interface IAuthorsListProps { + authors: IAuthor[]; + busy: boolean; + onLoadAllAuthors: () => void; +} + +class AuthorsListComponent extends React.Component<RouteComponentProps & IAuthorsListProps> { + + render(): JSX.Element { + const { authors, busy } = this.props; + return busy + ? ( + <Paper> + Loading + </Paper> + ) + : ( + <Paper> + <Table padding="normal" > + <TableHead> + <TableRow> + <TableCell align="right">Id</TableCell> + <TableCell >First Name</TableCell> + <TableCell >Last Name</TableCell> + </TableRow> + </TableHead> + <TableBody> + {authors.map(author => ( + <TableRow key={author.id} onClick={(_e) => this.editAuthor(author)}> + <TableCell>{author.id}</TableCell> + <TableCell>{author.firstName}</TableCell> + <TableCell>{author.lastName}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </Paper> + ); + } + + public componentDidMount() { + this.props.onLoadAllAuthors(); + } + + private editAuthor = (author: IAuthor) => { + if (author) this.props.history.push(this.props.match.path + '/' + author.id); + }; +} + +export const AuthorsList = withRouter( + connect( + ({ demo: state }) => ({ + authors: state.listAuthors.authors, + busy: state.listAuthors.busy, + }), + (dispatcher) => ({ + onLoadAllAuthors: () => { + dispatcher.dispatch(loadAllAuthorsAsync); + }, + }))(AuthorsListComponent)); +export default AuthorsList; |