GUI Dashboard: data storages panel improvements (paging)

epam · Oct 26, 2024 · b9d37ed · b9d37ed
1 parent f8ba231
commit b9d37ed
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/client/src/components/main/home/panels/MyDataPanel.js b/client/src/components/main/home/panels/MyDataPanel.js
@@ -38,8 +38,7 @@ export default class MyDataPanel extends React.Component {
   };
 
   state = {
-    search: null,
-    showMax: 50
+    search: null
   };
 
   searchStorageFn = (item, search) => {
@@ -115,15 +114,6 @@ export default class MyDataPanel extends React.Component {
     const navigate = ({id}) => {
       this.props.router && this.props.router.push(`/storage/${id}`);
     };
-    const {
-      showMax
-    } = this.state;
-    const {storages} = this;
-    const hasMore = storages.length > showMax;
-    const filtered = storages.slice(0, showMax);
-    const onShowMore = () => {
-      this.setState({showMax: showMax + 50});
-    };
     return (
       <div key="cards" style={{flex: 1, overflow: 'auto'}}>
         <CardsPanel
@@ -141,10 +131,9 @@ export default class MyDataPanel extends React.Component {
               : 'There are no personal data storages'
           }
           childRenderer={this.renderStorage}
-          hasMore={hasMore}
-          onShowMore={onShowMore}
+          pageSize={10}
         >
-          {filtered}
+          {this.storages}
         </CardsPanel>
       </div>
     );

diff --git a/client/src/components/main/home/panels/components/CardsPanel.js b/client/src/components/main/home/panels/components/CardsPanel.js
@@ -56,9 +56,7 @@ export default class CardsPanel extends React.Component {
     getFavourites: PropTypes.func,
     setFavourites: PropTypes.func,
     hovered: PropTypes.object,
-    hasMore: PropTypes.bool,
-    onShowMore: PropTypes.func,
-    moreTitle: PropTypes.node
+    pageSize: PropTypes.number
   };
 
   static defaultProps = {
@@ -70,7 +68,8 @@ export default class CardsPanel extends React.Component {
     actionInProgress: false,
     inProgressActionsTitle: null,
     popovers: [],
-    search: null
+    search: null,
+    showMax: undefined
   };
 
   onActionClicked = (e, action, source) => {
@@ -383,22 +382,38 @@ export default class CardsPanel extends React.Component {
 
   onSearchChange = (e) => {
     this.setState({
-      search: e.target.value
+      search: e.target.value,
+      showMax: undefined
     });
   };
 
+  onShowMore = () => {
+    const {
+      pageSize
+    } = this.props;
+    const {
+      showMax = pageSize
+    } = this.state;
+    if (pageSize) {
+      this.setState({showMax: showMax + pageSize});
+    }
+  };
+
   render () {
     const {
-      onShowMore,
-      hasMore = onShowMore !== undefined,
-      moreTitle = 'Show more'
+      pageSize = undefined
     } = this.props;
+    const {
+      showMax = pageSize
+    } = this.state;
     const items = this.props.search && this.props.search.searchFn
       ? (this.props.children || [])
         .filter(item => this.props.search.searchFn(item, this.state.search))
       : (this.props.children || []);
-    const personalItemsFiltered = items.filter(item => !item.isGlobal);
-    const globalItemsFiltered = items.filter(item => item.isGlobal);
+    const filtered = showMax && showMax > 0 ? items.slice(0, showMax) : items;
+    const hasMore = showMax && showMax < items.length;
+    const personalItemsFiltered = filtered.filter(item => !item.isGlobal);
+    const globalItemsFiltered = filtered.filter(item => item.isGlobal);
     let personalItems = [
       ...personalItemsFiltered,
       ...globalItemsFiltered.filter(this.childIsFavourite)
@@ -456,9 +471,9 @@ export default class CardsPanel extends React.Component {
             }
           </Row>
           {
-            hasMore && onShowMore && (
+            hasMore && (
               <Row type="flex" justify="center" style={{margin: 10}}>
-                <a onClick={onShowMore}>{moreTitle}</a>
+                <a onClick={this.onShowMore}>Show more</a>
               </Row>
             )
           }