workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx

   1 /*
   2 * Copyright © 2018 European Support Limited
   3 *
   4 * Licensed under the Apache License, Version 2.0 (the "License");
   5 * you may not use this file except in compliance with the License.
   6 * You may obtain a copy of the License at
   7 *
   8 *      http: //www.apache.org/licenses/LICENSE-2.0
   9 *
  10 * Unless required by applicable law or agreed to in writing, software
  11 * distributed under the License is distributed on an "AS IS" BASIS,
  12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 * See the License for the specific language governing permissions and
  14 * limitations under the License.
  15 */
  16
  17 import React from 'react';
  18 import PropTypes from 'prop-types';
  19 import InfiniteScroll from 'shared/scroll/InfiniteScroll';
  20 import Workflows from 'features/catalog/views/Workflows';
  21 import AddWorkflow from 'features/catalog/views/AddWorkflow';
  22
  23 import Header from 'features/catalog/views/Header';
  24 import Main from 'features/catalog/views/Main';
  25
  26 import { NAME, ASC, DESC } from 'features/catalog/catalogConstants';
  27
  28 class CatalogView extends React.Component {
  29     componentDidMount() {
  30         const { clearWorkflow } = this.props;
  31
  32         clearWorkflow();
  33     }
  34
  35     componentWillUnmount() {
  36         this.props.handleResetWorkflow();
  37     }
  38
  39     handleAlphabeticalOrderByClick = e => {
  40         e.preventDefault();
  41
  42         const {
  43             handleFetchWorkflow,
  44             catalog: { sort }
  45         } = this.props;
  46
  47         const payload = { ...sort };
  48
  49         payload[NAME] = payload[NAME] === ASC ? DESC : ASC;
  50
  51         handleFetchWorkflow(payload);
  52     };
  53
  54     handleScroll = () => {
  55         const {
  56             catalog: {
  57                 paging: { offset },
  58                 sort
  59             },
  60             handleFetchWorkflow
  61         } = this.props;
  62
  63         handleFetchWorkflow(sort, offset);
  64     };
  65
  66     goToOverviewPage = id => {
  67         const { history } = this.props;
  68         history.push('/workflow/' + id + '/overview');
  69     };
  70
  71     render() {
  72         const { catalog, showNewWorkflowModal } = this.props;
  73         const {
  74             sort,
  75             paging: { hasMore, total },
  76             items
  77         } = catalog;
  78         const alphabeticalOrder = sort[NAME];
  79
  80         return (
  81             <div className="wf-catalog">
  82                 <Header />
  83                 <InfiniteScroll
  84                     useWindow={false}
  85                     loadMore={this.handleScroll}
  86                     hasMore={hasMore}>
  87                     <Main
  88                         total={total}
  89                         alphabeticalOrder={alphabeticalOrder}
  90                         onAlphabeticalOrderByClick={
  91                             this.handleAlphabeticalOrderByClick
  92                         }>
  93                         <div className="main__content">
  94                             <AddWorkflow onClick={showNewWorkflowModal} />
  95                             <Workflows
  96                                 items={items}
  97                                 onWorkflowClick={this.goToOverviewPage}
  98                             />
  99                         </div>
 100                     </Main>
 101                 </InfiniteScroll>
 102             </div>
 103         );
 104     }
 105 }
 106
 107 CatalogView.propTypes = {
 108     history: PropTypes.object,
 109     catalog: PropTypes.object,
 110     handleResetWorkflow: PropTypes.func,
 111     handleFetchWorkflow: PropTypes.func,
 112     showNewWorkflowModal: PropTypes.func,
 113     clearWorkflow: PropTypes.func
 114 };
 115
 116 CatalogView.defaultProps = {
 117     showNewWorkflowModal: () => {},
 118     clearWorkflow: () => {}
 119 };
 120
 121 export default CatalogView;