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, { Component } 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 import { WORKFLOW_STATUS } from 'features/workflow/workflowConstants';
  23
  24 import Header from 'features/catalog/views/Header';
  25 import Main from 'features/catalog/views/Main';
  26 import { NAME, ASC, DESC } from 'features/catalog/catalogConstants';
  27
  28 class CatalogView extends Component {
  29     constructor(props) {
  30         super(props);
  31     }
  32
  33     componentDidMount() {
  34         const { clearWorkflow } = this.props;
  35         clearWorkflow();
  36         this.fetchWorkflows();
  37     }
  38
  39     fetchWorkflows = () => {
  40         const {
  41             catalog: { sort, status, searchNameFilter },
  42             handleFetchWorkflow
  43         } = this.props;
  44         handleFetchWorkflow({
  45             sort,
  46             searchNameFilter,
  47             status
  48         });
  49     };
  50
  51     handleAlphabeticalOrderByClick = e => {
  52         e.preventDefault();
  53
  54         const {
  55             handleFetchWorkflow,
  56             catalog: { sort, status, searchNameFilter }
  57         } = this.props;
  58
  59         const payload = {
  60             ...sort
  61         };
  62
  63         payload[NAME] = payload[NAME] === ASC ? DESC : ASC;
  64         handleFetchWorkflow({
  65             sort: payload,
  66             searchNameFilter,
  67             status
  68         });
  69     };
  70     handleStatusChange = value => {
  71         const {
  72             handleFetchWorkflow,
  73             searchNameFilter,
  74             catalog: { sort }
  75         } = this.props;
  76
  77         handleFetchWorkflow({
  78             sort,
  79             searchNameFilter,
  80             status: value
  81         });
  82     };
  83
  84     handleScroll = () => {
  85         const {
  86             catalog: {
  87                 paging: { offset },
  88                 sort,
  89                 status,
  90                 searchNameFilter
  91             },
  92             handleFetchWorkflow
  93         } = this.props;
  94         handleFetchWorkflow({
  95             sort,
  96             offset,
  97             searchNameFilter,
  98             status
  99         });
 100     };
 101
 102     goToOverviewPage = id => {
 103         const { history } = this.props;
 104         history.push('/workflow/' + id + '/overview');
 105     };
 106
 107     searchChange = searchValue => {
 108         this.setState({ searchValue: searchValue });
 109         this.dispatchChange(searchValue);
 110     };
 111
 112     dispatchChange = searchValue => {
 113         const { searchInputChanged, catalog } = this.props;
 114         searchInputChanged({
 115             ...catalog,
 116             searchNameFilter: searchValue
 117         });
 118         sessionStorage.setItem('searchNameFilter', searchValue);
 119     };
 120
 121     render() {
 122         const { catalog, showNewWorkflowModal } = this.props;
 123         const {
 124             sort,
 125             paging: { hasMore, total },
 126             items,
 127             status,
 128             searchNameFilter
 129         } = catalog;
 130         const alphabeticalOrder = sort[NAME];
 131
 132         return (
 133             <div className="wf-catalog">
 134                 <Header
 135                     status={status}
 136                     statusChange={this.handleStatusChange}
 137                     searchChange={this.searchChange}
 138                     searchValue={searchNameFilter}
 139                 />
 140                 <InfiniteScroll
 141                     useWindow={false}
 142                     loadMore={this.handleScroll}
 143                     hasMore={hasMore}>
 144                     <Main
 145                         total={total}
 146                         alphabeticalOrder={alphabeticalOrder}
 147                         onAlphabeticalOrderByClick={
 148                             this.handleAlphabeticalOrderByClick
 149                         }>
 150                         <div className="main__content">
 151                             {status === WORKFLOW_STATUS.ACTIVE && (
 152                                 <AddWorkflow onClick={showNewWorkflowModal} />
 153                             )}
 154                             <Workflows
 155                                 items={items}
 156                                 onWorkflowClick={this.goToOverviewPage}
 157                             />
 158                         </div>
 159                     </Main>
 160                 </InfiniteScroll>
 161             </div>
 162         );
 163     }
 164 }
 165
 166 CatalogView.propTypes = {
 167     history: PropTypes.object,
 168     catalog: PropTypes.object,
 169     handleResetWorkflow: PropTypes.func,
 170     handleFetchWorkflow: PropTypes.func,
 171     showNewWorkflowModal: PropTypes.func,
 172     clearWorkflow: PropTypes.func,
 173     searchInputChanged: PropTypes.func,
 174     searchNameFilter: PropTypes.string
 175 };
 176
 177 CatalogView.defaultProps = {
 178     showNewWorkflowModal: () => {},
 179     clearWorkflow: () => {}
 180 };
 181
 182 export default CatalogView;