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