ordering-ui-admin-external 1.43.84 → 1.43.86

package/src/components/Delivery/DriversGroupAddForm/BusinessesForm/index.js

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 
 import { Checkbox, Button } from '../../../../styles'
-import { SearchBar } from '../../../Shared'
+import { Pagination, SearchBar } from '../../../Shared'
+import { PaginationWrapper } from '../../../../styles/MultiSelect/styles'
 
 import {
   Container,
@@ -30,6 +31,36 @@ export const BusinessesForm = (props) => {
   const [, t] = useLanguage()
   const [searchValue, setSearchValue] = useState(null)
   const [filteredBusinesses, setFilteredBusinesses] = useState([])
+  const [pagination, setPagination] = useState({
+    currentPage: 1,
+    pageSize: 10,
+    totalItems: null,
+    totalPages: null
+  })
+
+  const handleChangePage = (page) => {
+    setPagination({
+      ...pagination,
+      currentPage: page
+    })
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(((pagination?.currentPage - 1) * pagination?.pageSize + 1) / pageSize)
+    setPagination({
+      ...pagination,
+      currentPage: expectedPage,
+      pageSize,
+      totalPages: Math.ceil(filteredBusinesses?.length / pageSize)
+    })
+  }
+
+  const filterFunction = (_, index) => {
+    const validation = pagination?.currentPage === 1
+      ? index < (pagination.pageSize * pagination.currentPage)
+      : (index >= (pagination.pageSize * (pagination.currentPage - 1))) && (index < (pagination.pageSize * pagination.currentPage))
+    return validation
+  }
 
   useEffect(() => {
     let _filteredBusinesses = []
@@ -39,6 +70,12 @@ export const BusinessesForm = (props) => {
       _filteredBusinesses = [...businesses]
     }
     setFilteredBusinesses(_filteredBusinesses)
+    setPagination({
+      ...pagination,
+      currentPage: 1,
+      totalItems: _filteredBusinesses?.length,
+      totalPages: Math.ceil(_filteredBusinesses?.length / pagination.pageSize)
+    })
   }, [searchValue, businesses])
 
   return (
@@ -92,7 +129,7 @@ export const BusinessesForm = (props) => {
           </>
         ) : (
           <>
-            {filteredBusinesses.map(business => (
+            {filteredBusinesses.filter(filterFunction).map(business => (
               <BusinessWrapper
                 key={business.id}
                 isDisabed={actionState.loading}
@@ -110,6 +147,17 @@ export const BusinessesForm = (props) => {
           </>
         )}
       </BusinessesContainer>
+      {pagination && handleChangePageSize && handleChangePage && (
+        <PaginationWrapper>
+          <Pagination
+            currentPage={pagination?.currentPage}
+            totalPages={pagination?.totalPages}
+            handleChangePage={handleChangePage}
+            handleChangePageSize={handleChangePageSize}
+            defaultPageSize={pagination?.pageSize}
+          />
+        </PaginationWrapper>
+      )}
     </Container>
   )
 }

package/src/components/Delivery/DriversGroupBusinesses/index.js

@@ -3,7 +3,7 @@ import { useLanguage } from 'ordering-components-admin-external'
 import { useForm } from 'react-hook-form'
 
 import { Checkbox, Button } from '../../../styles'
-import { SearchBar } from '../../Shared'
+import { Pagination, SearchBar } from '../../Shared'
 
 import {
   Container,
@@ -17,6 +17,7 @@ import {
   SkeletonContainer
 } from './styles'
 import Skeleton from 'react-loading-skeleton'
+import { PaginationWrapper } from '../../../styles/MultiSelect/styles'
 
 export const DriversGroupBusinesses = (props) => {
   const {
@@ -38,6 +39,36 @@ export const DriversGroupBusinesses = (props) => {
 
   const [searchValue, setSearchValue] = useState(null)
   const [filteredBusinesses, setFilteredBusinesses] = useState([])
+  const [pagination, setPagination] = useState({
+    currentPage: 1,
+    pageSize: 10,
+    totalItems: null,
+    totalPages: null
+  })
+
+  const handleChangePage = (page) => {
+    setPagination({
+      ...pagination,
+      currentPage: page
+    })
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(((pagination?.currentPage - 1) * pagination?.pageSize + 1) / pageSize)
+    setPagination({
+      ...pagination,
+      currentPage: expectedPage,
+      pageSize,
+      totalPages: Math.ceil(filteredBusinesses?.length / pageSize)
+    })
+  }
+
+  const filterFunction = (_, index) => {
+    const validation = pagination?.currentPage === 1
+      ? index < (pagination.pageSize * pagination.currentPage)
+      : (index >= (pagination.pageSize * (pagination.currentPage - 1))) && (index < (pagination.pageSize * pagination.currentPage))
+    return validation
+  }
 
   useEffect(() => {
     let _filteredBusinesses = []
@@ -47,6 +78,12 @@ export const DriversGroupBusinesses = (props) => {
       _filteredBusinesses = [...businesses]
     }
     setFilteredBusinesses(_filteredBusinesses)
+    setPagination({
+      ...pagination,
+      currentPage: 1,
+      totalItems: _filteredBusinesses?.length,
+      totalPages: Math.ceil(_filteredBusinesses?.length / pagination.pageSize)
+    })
   }, [searchValue, businesses])
 
   const onSubmit = () => {
@@ -111,7 +148,7 @@ export const DriversGroupBusinesses = (props) => {
           </>
         ) : (
           <>
-            {filteredBusinesses.map(business => (
+            {filteredBusinesses.filter(filterFunction).map(business => (
               <BusinessWrapper
                 key={business.id}
                 isDisabed={actionState.loading}
@@ -128,6 +165,17 @@ export const DriversGroupBusinesses = (props) => {
             ))}
           </>
         )}
+        {pagination && handleChangePageSize && handleChangePage && (
+          <PaginationWrapper>
+            <Pagination
+              currentPage={pagination?.currentPage}
+              totalPages={pagination?.totalPages}
+              handleChangePage={handleChangePage}
+              handleChangePageSize={handleChangePageSize}
+              defaultPageSize={pagination?.pageSize}
+            />
+          </PaginationWrapper>
+        )}
       </BusinessesContainer>
       <Button
         borderRadius='8px'

package/src/components/Delivery/DriversGroupDrivers/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
-import { SearchBar, Modal } from '../../Shared'
+import { SearchBar, Modal, Pagination } from '../../Shared'
 import { Button, Checkbox } from '../../../styles'
 import { DriverTemporalSchedule } from '../DriverTemporalSchedule'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
@@ -17,6 +17,7 @@ import {
   DriverTemporaryContainer
 } from './styles'
 import moment from 'moment'
+import { PaginationWrapper } from '../../../styles/MultiSelect/styles'
 
 export const DriversGroupDrivers = (props) => {
   const {
@@ -33,12 +34,42 @@ export const DriversGroupDrivers = (props) => {
   const [filteredDrivers, setFilteredDrivers] = useState([])
   const [driverTemporalSchedule, setDriverTemporalScheduleModal] = useState(false)
   const [driverSchedule, setDriverSchedule] = useState(null)
+  const [pagination, setPagination] = useState({
+    currentPage: 1,
+    pageSize: 10,
+    totalItems: null,
+    totalPages: null
+  })
 
   const handleOpenModal = (driver) => {
     setDriverSchedule(driver)
     setDriverTemporalScheduleModal(true)
   }
 
+  const handleChangePage = (page) => {
+    setPagination({
+      ...pagination,
+      currentPage: page
+    })
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(((pagination?.currentPage - 1) * pagination?.pageSize + 1) / pageSize)
+    setPagination({
+      ...pagination,
+      currentPage: expectedPage,
+      pageSize,
+      totalPages: Math.ceil(filteredDrivers?.length / pageSize)
+    })
+  }
+
+  const filterFunction = (_, index) => {
+    const validation = pagination?.currentPage === 1
+      ? index < (pagination.pageSize * pagination.currentPage)
+      : (index >= (pagination.pageSize * (pagination.currentPage - 1))) && (index < (pagination.pageSize * pagination.currentPage))
+    return validation
+  }
+
   useEffect(() => {
     let _filteredDrivers = []
     if (searchValue) {
@@ -53,6 +84,12 @@ export const DriversGroupDrivers = (props) => {
       _filteredDrivers = [...drivers]
     }
     setFilteredDrivers(_filteredDrivers)
+    setPagination({
+      ...pagination,
+      currentPage: 1,
+      totalItems: _filteredDrivers?.length,
+      totalPages: Math.ceil(_filteredDrivers?.length / pagination.pageSize)
+    })
   }, [searchValue])
 
   return (
@@ -83,7 +120,7 @@ export const DriversGroupDrivers = (props) => {
         </Button>
       </ButtonGroup>
       <BusinessesContainer>
-        {filteredDrivers.map(driver => (
+        {filteredDrivers.filter(filterFunction).map(driver => (
           <BusinessWrapper
             key={driver.id}
             isDisabed={actionState.loading}
@@ -117,7 +154,17 @@ export const DriversGroupDrivers = (props) => {
           </BusinessWrapper>
         ))}
       </BusinessesContainer>
-
+      {pagination && handleChangePageSize && handleChangePage && (
+        <PaginationWrapper>
+          <Pagination
+            currentPage={pagination?.currentPage}
+            totalPages={pagination?.totalPages}
+            handleChangePage={handleChangePage}
+            handleChangePageSize={handleChangePageSize}
+            defaultPageSize={pagination?.pageSize}
+          />
+        </PaginationWrapper>
+      )}
       <Modal
         width='385px'
         height='auto'

package/src/components/Delivery/DriversGroupsList/index.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import MdCheckBoxOutlineBlank from '@meronex/icons/md/MdCheckBoxOutlineBlank'
@@ -38,50 +37,42 @@ export const DriversGroupsList = (props) => {
     handleSelectGroup,
     handleAllSelectGroup,
     actionDisabled,
-    isUseQuery
+    isUseQuery,
+    pagination,
+    setPagination
   } = props
 
   const [, t] = useLanguage()
-  const query = new URLSearchParams(useLocation().search)
-  const defaultPage = query.get('page') || 1
-  const defaultPageSize = query.get('pageSize') || 10
-
-  // Change page
-  const [currentPage, setCurrentPage] = useState(Number(defaultPage) || 1)
-  const [groupsPerPage, setGroupsPerPage] = useState(Number(defaultPageSize) || 10)
 
   // Get current groups
   const [currentGroups, setCurrentGroups] = useState([])
   const [totalPages, setTotalPages] = useState(null)
 
   const handleChangePage = (page) => {
-    setCurrentPage(page)
+    setPagination({
+      ...pagination,
+      currentPage: page
+    })
   }
 
   const handleChangePageSize = (pageSize) => {
-    const expectedPage = Math.ceil(((currentPage - 1) * groupsPerPage + 1) / pageSize)
-    setCurrentPage(expectedPage)
-    setGroupsPerPage(pageSize)
+    setPagination({
+      ...pagination,
+      pageSize
+    })
   }
 
   useEffect(() => {
     if (driversGroupsState.loading) return
-    let _totalPages
     let groups = []
     if (searchValue) {
       groups = driversGroupsState.groups.filter(plugin => plugin.name?.toLowerCase().includes(searchValue?.toLowerCase()))
     } else {
       groups = [...driversGroupsState.groups]
     }
-    if (groups.length > 0) {
-      _totalPages = Math.ceil(groups.length / groupsPerPage)
-    }
-    const indexOfLastPost = currentPage * groupsPerPage
-    const indexOfFirstPost = indexOfLastPost - groupsPerPage
-    const _currentGroups = groups.slice(indexOfFirstPost, indexOfLastPost)
-    setTotalPages(_totalPages)
-    setCurrentGroups(_currentGroups)
-  }, [driversGroupsState, currentPage, groupsPerPage, searchValue])
+    setTotalPages(pagination.totalPages)
+    setCurrentGroups(groups)
+  }, [driversGroupsState, searchValue])
 
   const handleClickDriverGroup = (e, group) => {
     const isInvalid = e.target.closest('.group-checkbox') || e.target.closest('.group-enabled')
@@ -99,12 +90,12 @@ export const DriversGroupsList = (props) => {
   }
 
   useEffect(() => {
-    if (!isUseQuery || !currentPage || !groupsPerPage || !totalPages) return
+    if (!isUseQuery || !totalPages) return
     addQueryToUrl({
-      page: currentPage,
-      pageSize: groupsPerPage
+      page: pagination.currentPage,
+      pageSize: pagination.pageSize
     })
-  }, [currentPage, groupsPerPage, totalPages])
+  }, [pagination, totalPages])
 
   return (
     <>
@@ -157,7 +148,7 @@ export const DriversGroupsList = (props) => {
               </tr>
             </thead>
             {driversGroupsState.loading ? (
-              [...Array(groupsPerPage).keys()].map(i => (
+              [...Array(pagination.pageSize).keys()].map(i => (
                 <tbody key={i}>
                   <tr>
                     <td>
@@ -286,10 +277,10 @@ export const DriversGroupsList = (props) => {
             )}
             {currentGroups?.length > 0 && (
               <Pagination
-                currentPage={currentPage}
-                totalPages={totalPages}
+                currentPage={pagination.currentPage}
+                totalPages={pagination.totalPages}
                 handleChangePage={handleChangePage}
-                defaultPageSize={groupsPerPage}
+                defaultPageSize={pagination.pageSize}
                 handleChangePageSize={handleChangePageSize}
               />
             )}

package/src/components/Delivery/DriversGroupsListing/index.js

@@ -36,7 +36,9 @@ const DriversGroupsListingUI = (props) => {
     handleDeleteDriversGroup,
     driversCompanyList,
     actionDisabled,
-    isUseQuery
+    isUseQuery,
+    pagination,
+    setPagination
   } = props
 
   const history = useHistory()
@@ -210,6 +212,8 @@ const DriversGroupsListingUI = (props) => {
             handleAllSelectGroup={handleAllSelectGroup}
             actionDisabled={actionDisabled}
             isUseQuery={isUseQuery}
+            pagination={pagination}
+            setPagination={setPagination}
           />
         ) : (
           <DriversGroupAddForm

package/src/components/Orders/DriversGroupTypeSelector/index.js

@@ -66,18 +66,13 @@ export const DriversGroupTypeSelector = (props) => {
       }
     }
     setGroupTypes(_groupList)
+    setPagination({
+      ...pagination,
+      totalItems: _groupList?.length,
+      totalPages: Math.ceil(_groupList?.length / pagination.pageSize)
+    })
   }, [driverGroupList, searchValue])
 
-  useEffect(() => {
-    if (groupTypes?.length) {
-      setPagination({
-        ...pagination,
-        totalItems: groupTypes?.length,
-        totalPages: Math.ceil(groupTypes?.length / 10)
-      })
-    }
-  }, [groupTypes])
-
   return (
     <>
       {!driverGroupList.loading ? (

package/src/components/Shared/Pagination/styles.js

@@ -17,7 +17,7 @@ export const PaginationButtonContainer = styled.div`
   `}
 `
 
-export const PageButton = styled.button`
+export const PageButton = styled.div`
   background-color: transparent;
   font-size: 14px;
   color: ${props => props.theme.colors.headingColor};
@@ -29,6 +29,7 @@ export const PageButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
   padding: 0px 7px;
 
   ${props => props.theme?.rtl ? css`

package/src/components/Stores/BusinessDeliveryGroupsDetails/index.js

@@ -19,7 +19,9 @@ const DriversGroupsListingDetailsUI = (props) => {
     handleAllSelectGroup,
     actionState,
     handleUpdateDriversGroup,
-    paginationSettings
+    paginationSettings,
+    pagination,
+    setPagination
   } = props
 
   const history = useHistory()
@@ -72,6 +74,8 @@ const DriversGroupsListingDetailsUI = (props) => {
           handleSelectGroup={handleSelectGroup}
           handleAllSelectGroup={handleAllSelectGroup}
           paginationSettings={paginationSettings}
+          pagination={pagination}
+          setPagination={setPagination}
         />
       </DriversGroupsListingContainer>
       <Alert

package/src/styles/Select/index.js

@@ -3,7 +3,7 @@ import { useSession } from 'ordering-components-admin-external'
 import { usePopper } from 'react-popper'
 import { CaretDownFill } from 'react-bootstrap-icons'
 import FiChevronDown from '@meronex/icons/fi/FiChevronDown'
-import { SearchBar } from '../../components/Shared'
+import { Pagination, SearchBar } from '../../components/Shared'
 
 import {
   Selected,
@@ -19,6 +19,7 @@ import {
   HeaderItem,
   PopoverBody
 } from './styles'
+import { PaginationWrapper } from '../MultiSelect/styles'
 
 export const Select = (props) => {
   const {
@@ -38,7 +39,12 @@ export const Select = (props) => {
     className,
     isShowCustomOption,
     customOptionTitle,
-    handleCustomOptionClick
+    handleCustomOptionClick,
+    pagination,
+    handleChangePage,
+    handleChangePageSize,
+    useLazyPagination,
+    isHidePagecontrol
   } = props
   const defaultOption = options?.find(
     (option) => option.value === defaultValue
@@ -89,6 +95,11 @@ export const Select = (props) => {
     }
   }
 
+  const handlerChangePage = (page) => {
+    setOpen(true)
+    handleChangePage(page)
+  }
+
   useEffect(() => {
     window.addEventListener('mouseup', handleClickOutside)
     window.addEventListener('keydown', handleKeyDown)
@@ -104,7 +115,9 @@ export const Select = (props) => {
       const _defaultOption = options?.find(
         (option) => option.value === defaultValue
       )
-      setSelectedOption(_defaultOption)
+      if (!(useLazyPagination && pagination)) {
+        setSelectedOption(_defaultOption)
+      }
       setValue(defaultValue)
     }
   }, [defaultValue, options, searchValue])
@@ -124,6 +137,14 @@ export const Select = (props) => {
     setOpen(!open)
   }
 
+  const filterFunction = (_, index) => {
+    if (!pagination || useLazyPagination) return true
+    const validation = pagination?.currentPage === 1
+      ? index < (pagination.pageSize * pagination.currentPage)
+      : (index >= (pagination.pageSize * (pagination.currentPage - 1))) && (index < (pagination.pageSize * pagination.currentPage))
+    return validation
+  }
+
   const popStyle = { ...styles.popper, display: open ? 'block' : 'none', minWidth: referenceElement?.current?.offsetWidth || '100px' }
   if (!open) {
     popStyle.transform = 'translate3d(0px, 0px, 0px)'
@@ -173,7 +194,7 @@ export const Select = (props) => {
             optionInnerMargin={props.optionInnerMargin}
             optionInnerMaxHeight={props.optionInnerMaxHeight}
           >
-            {options.map((option, i) => (
+            {options.filter(filterFunction).map((option, i) => (
               <Option
                 key={i}
                 selected={value === option.value}
@@ -200,6 +221,18 @@ export const Select = (props) => {
               {customOptionTitle}
             </Option>
           )}
+          {pagination && handleChangePageSize && handleChangePage && (
+            <PaginationWrapper>
+              <Pagination
+                currentPage={pagination?.currentPage}
+                totalPages={pagination?.totalPages}
+                handleChangePage={handlerChangePage}
+                handleChangePageSize={handleChangePageSize}
+                defaultPageSize={pagination?.pageSize}
+                isHidePagecontrol={isHidePagecontrol}
+              />
+            </PaginationWrapper>
+          )}
         </Options>
       </PopoverBody>
     </div>