web: People: Changed filter work

products/ASC.People/Client/src/components/pages/Home/Section/Paging/index.js

@@ -32,61 +32,75 @@ import Filter from '../../../../../helpers/filter';
   }
 ];*/
 
-
 const SectionPagingContent = ({ fetchPeople, filter }) => {
   const onNextClick = useCallback(e => {
-    if(!filter.hasNext) {
+    if(!filter.hasNext()) {
       e.preventDefault();
       return;
     }
     console.log("Next Clicked", e);
-    const newFilter = Filter.nextPage(filter);
+
+    const newFilter = filter.clone();
+    newFilter.page++;
     fetchPeople(newFilter);
+
   }, [filter, fetchPeople]);
 
   const onPrevClick = useCallback(e => {
-    if(!filter.hasPrev) {
+    if(!filter.hasPrev()) {
       e.preventDefault();
       return;
     }
+
     console.log("Prev Clicked", e);
-    const newFilter = Filter.prevPage(filter);
+
+    const newFilter = filter.clone();
+    newFilter.page--;
     fetchPeople(newFilter);
+
   }, [filter, fetchPeople]);
 
-  const onChangePageSize = useCallback(pageCount => {
-    const newFilter = new Filter(0, pageCount, filter.total, filter.sortby, filter.sortorder, filter.employeestatus, filter.activationstatus);
+  const onChangePageSize = useCallback(pageItem => {
+    console.log("Paging onChangePageSize", pageItem);
+    
+    const newFilter = filter.clone();
+    newFilter.page = 0;
+    newFilter.pageCount = pageItem.key;
     fetchPeople(newFilter);
+
   }, [filter, fetchPeople]);
 
+  /*const onChangePage = useCallback(pageItem => {
+    console.log("Paging onChangePage", pageItem);
+  }, []);*/
+
   const perPageItems = useMemo(() => [
     {
-      key: "25",
-      label: "25 per page",
-      onClick: () => onChangePageSize(25)
+      key: 25,
+      label: "25 per page"
     },
     {
-      key: "50",
-      label: "50 per page",
-      onClick: () => onChangePageSize(50)
+      key: 50,
+      label: "50 per page"
     },
     {
-      key: "100",
-      label: "100 per page",
-      onClick: () => onChangePageSize(100)
+      key: 100,
+      label: "100 per page"
     }
-  ], [onChangePageSize]);
+  ], []);
 
   console.log("SectionPagingContent render", filter);
   return (
     <Paging
       previousLabel="Previous"
       nextLabel="Next"
-      // pageItems={pageItems}
+      //pageItems={pageItems}
+      //onSelectPage={onChangePage}
       perPageItems={perPageItems}
+      onSelectPerPage={onChangePageSize}
       displayItems={false}
-      disablePrevious={!filter.hasPrev}
-      disableNext={!filter.hasNext}
+      disablePrevious={!filter.hasPrev()}
+      disableNext={!filter.hasNext()}
       previousAction={onPrevClick}
       nextAction={onNextClick}
       openDirection="top"

products/ASC.People/Client/src/helpers/filter.js

@@ -5,101 +5,71 @@ class Filter {
     return new Filter(0, 25, total);
   }
 
-  static nextPage(filter) {
-    const {
-      page,
-      pageCount,
-      total,
-      sortby,
-      sortorder,
-      employeestatus,
-      activationstatus
-    } = filter;
-
-    let nextPage = page + 1;
-
-    const nextFilter = new Filter(
-      nextPage,
-      pageCount,
-      total,
-      sortby,
-      sortorder,
-      employeestatus,
-      activationstatus
-    );
-
-    return nextFilter;
-  }
-
-  static prevPage(filter) {
-    const {
-      page,
-      pageCount,
-      total,
-      sortby,
-      sortorder,
-      employeestatus,
-      activationstatus
-    } = filter;
-
-    let prevPage = page - 1;
-
-    const nextFilter = new Filter(
-      prevPage,
-      pageCount,
-      total,
-      sortby,
-      sortorder,
-      employeestatus,
-      activationstatus
-    );
-
-    return nextFilter;
-  }
-
   constructor(
     page = 0,
     pageCount = 25,
     total = 0,
-    sortby = "firstname",
-    sortorder = "ascending",
-    employeestatus = null,
-    activationstatus = null
+    sortBy = "firstname",
+    sortOrder = "ascending",
+    employeeStatus = null,
+    activationStatus = null
   ) {
     this.page = page;
-    this.startIndex = page * pageCount;
     this.pageCount = pageCount;
-    this.sortby = sortby;
-    this.sortorder = sortorder;
-    this.employeestatus = employeestatus;
-    this.activationstatus = activationstatus;
+    this.sortBy = sortBy;
+    this.sortOrder = sortOrder;
+    this.employeeStatus = employeeStatus;
+    this.activationStatus = activationStatus;
     this.total = total;
-    this.hasNext = total - this.startIndex > pageCount;
-    this.hasPrev = page > 0;
   }
 
+  getStartIndex = () => {
+    return this.page * this.pageCount;
+  };
+
+  hasNext = () => {
+    return this.total - this.getStartIndex() > this.pageCount;
+  };
+
+  hasPrev = () => {
+    return this.page > 0;
+  };
+
   toDto = () => {
     const {
-      startIndex,
       pageCount,
-      sortby,
-      sortorder,
-      employeestatus,
-      activationstatus
+      sortBy,
+      sortOrder,
+      employeeStatus,
+      activationStatus
     } = this;
     return {
-      StartIndex: startIndex,
+      StartIndex: this.getStartIndex(),
       Count: pageCount,
-      sortby,
-      sortorder,
-      employeestatus,
-      activationstatus
+      sortby: sortBy,
+      sortorder: sortOrder,
+      employeestatus: employeeStatus,
+      activationstatus: activationStatus
     };
   };
 
   toUrlParams = () => {
-    return toUrlParams(this.toDto(), true);
+    const dtoFilter = this.toDto();
+    const str = toUrlParams(dtoFilter, true);
+    return str;
   };
+
+  clone() {
+    return new Filter(
+      this.page,
+      this.pageCount,
+      this.total,
+      this.sortBy,
+      this.sortOrder,
+      this.employeeStatus,
+      this.activationStatus
+    );
+  }
 }
 
 export default Filter;