(PC-31918)[PRO] feat: Manage collective table pagination and sort fro…

…m the screen.

pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.module.scss

@@ -2,17 +2,13 @@
 @use "styles/mixins/_fonts.scss" as fonts;
 @use "styles/variables/_size.scss" as size;
 
-.offers-pagination {
-  margin-top: rem.torem(32px);
-}
-
 .select-all-container {
   display: flex;
   align-items: center;
   position: relative;
   margin-bottom: rem.torem(20px);
 
-  label {
+  &-label {
     @include fonts.caption;
   }
 }

pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.tsx

@@ -2,28 +2,22 @@ import { CollectiveOfferResponseModel } from 'apiClient/v1'
 import { MAX_OFFERS_TO_DISPLAY } from 'core/Offers/constants'
 import { CollectiveSearchFiltersParams } from 'core/Offers/types'
 import { hasCollectiveSearchFilters } from 'core/Offers/utils/hasSearchFilters'
-import { SortingMode, useColumnSorting } from 'hooks/useColumnSorting'
-import { usePagination } from 'hooks/usePagination'
+import { SortingMode } from 'hooks/useColumnSorting'
 import { getOffersCountToDisplay } from 'pages/Offers/domain/getOffersCountToDisplay'
+import { CollectiveOffersSortingColumn } from 'screens/CollectiveOffersScreen/CollectiveOffersScreen'
 import { NoResults } from 'screens/IndividualOffersScreen/NoResults/NoResults'
 import { Banner } from 'ui-kit/Banners/Banner/Banner'
 import { BaseCheckbox } from 'ui-kit/form/shared/BaseCheckbox/BaseCheckbox'
-import { Pagination } from 'ui-kit/Pagination/Pagination'
 import { Spinner } from 'ui-kit/Spinner/Spinner'
 
 import styles from './CollectiveOffersTable.module.scss'
 import { CollectiveOffersTableBody } from './CollectiveOffersTableBody/CollectiveOffersTableBody'
 import { CollectiveOffersTableHead } from './CollectiveOffersTableHead/CollectiveOffersTableHead'
 
 type CollectiveOffersTableProps = {
-  applyUrlFiltersAndRedirect: (
-    filters: CollectiveSearchFiltersParams,
-    isRefreshing: boolean
-  ) => void
   areAllOffersSelected: boolean
   hasOffers: boolean
   isLoading: boolean
-  pageCount: number
   resetFilters: () => void
   setSelectedOffer: (offer: CollectiveOfferResponseModel) => void
   toggleSelectAllCheckboxes: () => void
@@ -32,88 +26,31 @@ type CollectiveOffersTableProps = {
   isRestrictedAsAdmin?: boolean
   selectedOffers: CollectiveOfferResponseModel[]
   offers: CollectiveOfferResponseModel[]
+  onColumnHeaderClick: (
+    headersName: CollectiveOffersSortingColumn
+  ) => SortingMode
+  currentSortingColumn: CollectiveOffersSortingColumn | null
+  currentSortingMode: SortingMode
+  currentPageItems: CollectiveOfferResponseModel[]
 }
 
-export enum CollectiveOffersSortingColumn {
-  EVENT_DATE = 'EVENT_DATE',
-}
-
-const sortByEventDate = (
-  offerA: CollectiveOfferResponseModel,
-  offerB: CollectiveOfferResponseModel
-) => {
-  const bookingDateOne = offerA.dates
-    ? new Date(offerA.dates.start)
-    : new Date()
-  const bookingDateTwo = offerB.dates
-    ? new Date(offerB.dates.start)
-    : new Date()
-  if (bookingDateOne > bookingDateTwo) {
-    return 1
-  } else if (bookingDateOne < bookingDateTwo) {
-    return -1
-  }
-  return 0
-}
-
-const sortOffers = (
-  offers: CollectiveOfferResponseModel[] | undefined,
-  currentSortingColumn: CollectiveOffersSortingColumn | null,
-  sortingMode: SortingMode
-) => {
-  if (!offers) {
-    return []
-  }
-
-  if (sortingMode === SortingMode.NONE) {
-    return offers
-  }
-
-  const sortedOffers = offers.slice()
-
-  switch (currentSortingColumn) {
-    case CollectiveOffersSortingColumn.EVENT_DATE:
-      return sortedOffers.sort(
-        (a, b) =>
-          sortByEventDate(a, b) * (sortingMode === SortingMode.ASC ? 1 : -1)
-      )
-    default:
-      return sortedOffers
-  }
-}
-
-const OFFERS_PER_PAGE = 10
-
 export const CollectiveOffersTable = ({
   areAllOffersSelected,
   hasOffers,
   isLoading,
-  pageCount,
   resetFilters,
   selectedOffers,
-  applyUrlFiltersAndRedirect,
   setSelectedOffer,
   toggleSelectAllCheckboxes,
   urlSearchFilters,
   isAtLeastOneOfferChecked,
   isRestrictedAsAdmin = false,
   offers,
+  onColumnHeaderClick,
+  currentSortingColumn,
+  currentSortingMode,
+  currentPageItems,
 }: CollectiveOffersTableProps) => {
-  const { currentSortingColumn, currentSortingMode, onColumnHeaderClick } =
-    useColumnSorting<CollectiveOffersSortingColumn>()
-
-  const sortedOffers = sortOffers(
-    offers,
-    currentSortingColumn,
-    currentSortingMode
-  )
-
-  const { page, previousPage, nextPage, currentPageItems } = usePagination(
-    sortedOffers,
-    OFFERS_PER_PAGE,
-    urlSearchFilters.page
-  )
-
   return (
     <div>
       <div role="status">
@@ -146,9 +83,15 @@ export const CollectiveOffersTable = ({
                   disabled={isRestrictedAsAdmin}
                   onChange={toggleSelectAllCheckboxes}
                   label={
-                    areAllOffersSelected
-                      ? 'Tout désélectionner'
-                      : 'Tout sélectionner'
+                    areAllOffersSelected ? (
+                      <span className={styles['select-all-container-label']}>
+                        Tout désélectionner
+                      </span>
+                    ) : (
+                      <span className={styles['select-all-container-label']}>
+                        Tout sélectionner
+                      </span>
+                    )
                   }
                 />
               </div>
@@ -168,28 +111,6 @@ export const CollectiveOffersTable = ({
               </table>
             </>
           )}
-          {hasOffers && (
-            <div className={styles['offers-pagination']}>
-              <Pagination
-                currentPage={page}
-                pageCount={pageCount}
-                onPreviousPageClick={() => {
-                  previousPage()
-                  applyUrlFiltersAndRedirect(
-                    { ...urlSearchFilters, page: page - 1 },
-                    false
-                  )
-                }}
-                onNextPageClick={() => {
-                  nextPage()
-                  applyUrlFiltersAndRedirect(
-                    { ...urlSearchFilters, page: page + 1 },
-                    false
-                  )
-                }}
-              />
-            </div>
-          )}
           {!hasOffers && hasCollectiveSearchFilters(urlSearchFilters) && (
             <NoResults resetFilters={resetFilters} />
           )}

pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTableHead/CollectiveOffersTableHead.tsx

@@ -3,8 +3,7 @@ import classNames from 'classnames'
 import { SortArrow } from 'components/StocksEventList/SortArrow'
 import { useActiveFeature } from 'hooks/useActiveFeature'
 import { SortingMode } from 'hooks/useColumnSorting'
-
-import { CollectiveOffersSortingColumn } from '../CollectiveOffersTable'
+import { CollectiveOffersSortingColumn } from 'screens/CollectiveOffersScreen/CollectiveOffersScreen'
 
 import styles from './CollectiveOffersTableHead.module.scss'
 

pro/src/screens/CollectiveOffersScreen/CollectiveOffersScreen.module.scss

@@ -20,3 +20,7 @@
     }
   }
 }
+
+.offers-pagination {
+  margin-top: rem.torem(32px);
+}

pro/src/screens/CollectiveOffersScreen/CollectiveOffersScreen.tsx

@@ -15,9 +15,13 @@ import {
 import { CollectiveSearchFiltersParams } from 'core/Offers/types'
 import { hasCollectiveSearchFilters } from 'core/Offers/utils/hasSearchFilters'
 import { SelectOption } from 'custom_types/form'
+import { useColumnSorting } from 'hooks/useColumnSorting'
+import { usePagination } from 'hooks/usePagination'
 import { CollectiveOffersActionsBar } from 'pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersActionsBar/CollectiveOffersActionsBar'
 import { CollectiveOffersTable } from 'pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable'
 import { isSameOffer } from 'pages/Offers/utils/isSameOffer'
+import { Pagination } from 'ui-kit/Pagination/Pagination'
+import { sortCollectiveOffers } from 'utils/sortCollectiveOffers'
 
 import styles from './CollectiveOffersScreen.module.scss'
 import { CollectiveOffersSearchFilters } from './CollectiveOffersSearchFilters/CollectiveOffersSearchFilters'
@@ -43,6 +47,10 @@ export type CollectiveOffersScreenProps = {
   offers: CollectiveOfferResponseModel[]
 }
 
+export enum CollectiveOffersSortingColumn {
+  EVENT_DATE = 'EVENT_DATE',
+}
+
 export const CollectiveOffersScreen = ({
   currentPageNumber,
   isLoading,
@@ -94,9 +102,25 @@ export const CollectiveOffersScreen = ({
   const numberOfPages = Math.ceil(offers.length / NUMBER_OF_OFFERS_PER_PAGE)
   const pageCount = Math.min(numberOfPages, MAX_TOTAL_PAGES)
 
+  const { currentSortingColumn, currentSortingMode, onColumnHeaderClick } =
+    useColumnSorting<CollectiveOffersSortingColumn>()
+
+  const sortedOffers = sortCollectiveOffers(
+    offers,
+    currentSortingColumn,
+    currentSortingMode
+  )
+
+  const { page, currentPageItems, setPage } = usePagination(
+    sortedOffers,
+    NUMBER_OF_OFFERS_PER_PAGE,
+    urlSearchFilters.page
+  )
+
   const applyUrlFiltersAndRedirect = (
     filters: CollectiveSearchFiltersParams
   ) => {
+    setPage(filters.page ?? 1)
     redirectWithUrlFilters(filters)
   }
 
@@ -155,20 +179,42 @@ export const CollectiveOffersScreen = ({
       ) : (
         <>
           <CollectiveOffersTable
-            applyUrlFiltersAndRedirect={applyUrlFiltersAndRedirect}
             areAllOffersSelected={areAllOffersSelected}
             hasOffers={hasOffers}
             isLoading={isLoading}
-            pageCount={pageCount}
             resetFilters={resetFilters}
             selectedOffers={selectedOffers}
             setSelectedOffer={onSetSelectedOffer}
             toggleSelectAllCheckboxes={toggleSelectAllCheckboxes}
             urlSearchFilters={urlSearchFilters}
             isAtLeastOneOfferChecked={selectedOffers.length > 1}
             isRestrictedAsAdmin={isRestrictedAsAdmin}
-            offers={offers}
+            offers={sortedOffers}
+            onColumnHeaderClick={onColumnHeaderClick}
+            currentSortingColumn={currentSortingColumn}
+            currentSortingMode={currentSortingMode}
+            currentPageItems={currentPageItems}
           />
+          {hasOffers && (
+            <div className={styles['offers-pagination']}>
+              <Pagination
+                currentPage={page}
+                pageCount={pageCount}
+                onPreviousPageClick={() => {
+                  applyUrlFiltersAndRedirect({
+                    ...urlSearchFilters,
+                    page: page - 1,
+                  })
+                }}
+                onNextPageClick={() => {
+                  applyUrlFiltersAndRedirect({
+                    ...urlSearchFilters,
+                    page: page + 1,
+                  })
+                }}
+              />
+            </div>
+          )}
           <div role="status">
             {selectedOffers.length > 0 && (
               <CollectiveOffersActionsBar

pro/src/screens/TemplateCollectiveOffersScreen/TemplateCollectiveOffersScreen.module.scss

@@ -20,3 +20,7 @@
 
   margin-bottom: rem.torem(32px);
 }
+
+.offers-pagination {
+  margin-top: rem.torem(32px);
+}