add integration between ItemsSortBy.tsx button and getCollectionItems…

… use case
IQSS · Dec 16, 2024 · ca1cdf0 · ca1cdf0
1 parent a5cde99
commit ca1cdf0
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 36 deletions.
diff --git a/src/sections/collection/CollectionHelper.ts b/src/sections/collection/CollectionHelper.ts
@@ -1,5 +1,9 @@
 import { CollectionItemsQueryParams } from '@/collection/domain/models/CollectionItemsQueryParams'
-import { FilterQuery } from '@/collection/domain/models/CollectionSearchCriteria'
+import {
+  FilterQuery,
+  OrderType,
+  SortType
+} from '@/collection/domain/models/CollectionSearchCriteria'
 import { CollectionItemType } from '@/collection/domain/models/CollectionItemType'
 import { QueryParamKey } from '../Route.enum'
 
@@ -31,6 +35,10 @@ export class CollectionHelper {
           .filter((decodedFilter) => /^[^:]+:[^:]+$/.test(decodedFilter)) as FilterQuery[])
       : undefined
 
-    return { pageQuery, searchQuery, typesQuery, filtersQuery }
+    const sortQuery = (searchParams.get(CollectionItemsQueryParams.SORT) as SortType) ?? undefined
+    const orderQuery =
+      (searchParams.get(CollectionItemsQueryParams.ORDER) as OrderType) ?? undefined
+
+    return { pageQuery, searchQuery, typesQuery, filtersQuery, sortQuery, orderQuery }
   }
 }
diff --git a/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx b/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx
@@ -62,8 +62,8 @@ export const CollectionItemsPanel = ({
   const currentSearchCriteria = new CollectionSearchCriteria(
     collectionQueryParams.searchQuery,
     collectionQueryParams.typesQuery || [CollectionItemType.COLLECTION, CollectionItemType.DATASET],
-    undefined,
-    undefined,
+    collectionQueryParams.sortQuery,
+    collectionQueryParams.orderQuery,
     collectionQueryParams.filtersQuery
   )
 
@@ -133,7 +133,10 @@ export const CollectionItemsPanel = ({
     // WHEN SEARCHING, WE RESET THE PAGINATION INFO AND KEEP ALL ITEM TYPES!!
     const newCollectionSearchCriteria = new CollectionSearchCriteria(
       searchValue === '' ? undefined : searchValue,
-      [CollectionItemType.COLLECTION, CollectionItemType.DATASET, CollectionItemType.FILE]
+      [CollectionItemType.COLLECTION, CollectionItemType.DATASET, CollectionItemType.FILE],
+      undefined,
+      undefined,
+      undefined
     )
 
     const totalItemsCount = await loadMore(resetPaginationInfo, newCollectionSearchCriteria, true)
@@ -169,8 +172,37 @@ export const CollectionItemsPanel = ({
     const newCollectionSearchCriteria = new CollectionSearchCriteria(
       currentSearchCriteria.searchText,
       newItemsTypes,
-      undefined,
-      undefined,
+      currentSearchCriteria.sort,
+      currentSearchCriteria.order,
+      currentSearchCriteria.filterQueries
+    )
+
+    const totalItemsCount = await loadMore(resetPaginationInfo, newCollectionSearchCriteria, true)
+
+    if (totalItemsCount !== undefined) {
+      const paginationInfoUpdated = resetPaginationInfo.withTotal(totalItemsCount)
+      setPaginationInfo(paginationInfoUpdated)
+    }
+  }
+
+  const handleSortChange = async (sort: SortType, order: OrderType) => {
+    itemsListContainerRef.current?.scrollTo({ top: 0 })
+
+    const resetPaginationInfo = new CollectionItemsPaginationInfo()
+    setPaginationInfo(resetPaginationInfo)
+
+    // Update the URL with the new sort and order, keep other querys
+    setSearchParams((currentSearchParams) => {
+      currentSearchParams.set(CollectionItemsQueryParams.SORT, sort)
+      currentSearchParams.set(CollectionItemsQueryParams.ORDER, order)
+      return currentSearchParams
+    })
+
+    const newCollectionSearchCriteria = new CollectionSearchCriteria(
+      currentSearchCriteria.searchText,
+      currentSearchCriteria.itemTypes,
+      sort,
+      order,
       currentSearchCriteria.filterQueries
     )
 
@@ -182,7 +214,6 @@ export const CollectionItemsPanel = ({
     }
   }
 
-  const handleSortChange = async (sort: SortType, order: OrderType) => {}
   const handleFacetChange = async (filterQuery: FilterQuery, removeOrAdd: RemoveAddFacetFilter) => {
     const newFilterQueries =
       removeOrAdd === RemoveAddFacetFilter.ADD
@@ -219,8 +250,8 @@ export const CollectionItemsPanel = ({
     const newCollectionSearchCriteria = new CollectionSearchCriteria(
       currentSearchCriteria.searchText,
       currentSearchCriteria.itemTypes,
-      undefined,
-      undefined,
+      currentSearchCriteria.sort,
+      currentSearchCriteria.order,
       newFilterQueries
     )
 
@@ -239,8 +270,8 @@ export const CollectionItemsPanel = ({
     const newCollectionSearchCriteria = new CollectionSearchCriteria(
       collectionQueryParams.searchQuery,
       collectionQueryParams.typesQuery,
-      undefined,
-      undefined,
+      collectionQueryParams.sortQuery,
+      collectionQueryParams.orderQuery,
       collectionQueryParams.filtersQuery
     )
 
@@ -306,6 +337,7 @@ export const CollectionItemsPanel = ({
             filterQueriesSelected={currentSearchCriteria.filterQueries ?? []}
             sortSelected={currentSearchCriteria.sort}
             orderSelected={currentSearchCriteria.order}
+            searchText={currentSearchCriteria.searchText}
             paginationInfo={paginationInfo}
             onBottomReach={handleLoadMoreOnBottomReach}
             onSortChange={handleSortChange}

diff --git a/src/sections/collection/collection-items-panel/items-list/ItemsList.module.scss b/src/sections/collection/collection-items-panel/items-list/ItemsList.module.scss
@@ -1,4 +1,5 @@
 @import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module';
 @import 'src/assets/variables';
 
 .items-list-root-ref {
@@ -65,16 +66,12 @@
     }
   }
 
+  .selected-sort-option{
+    font-weight: $dv-font-weight-bold;
+  }
+
   .sort-button {
     text-align: end;
-
-    &.selected {
-      font-weight: 600;
-    }
-
-    &:disabled {
-      color: $dv-primary-color;
-    }
   }
 
   .icon {

diff --git a/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx b/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx
@@ -39,6 +39,7 @@ interface ItemsListProps {
   filterQueriesSelected: FilterQuery[]
   sortSelected?: SortType
   orderSelected?: OrderType
+  searchText?: string
 }
 
 export const ItemsList = forwardRef(
@@ -59,7 +60,8 @@ export const ItemsList = forwardRef(
       itemsTypesSelected,
       filterQueriesSelected,
       sortSelected,
-      orderSelected
+      orderSelected,
+      searchText
     }: ItemsListProps,
     ref
   ) => {
@@ -115,6 +117,7 @@ export const ItemsList = forwardRef(
                         isLoadingCollectionItems={isLoadingItems}
                         currentSortType={sortSelected}
                         currentSortOrder={orderSelected}
+                        currentSearchText={searchText}
                         onSortChange={onSortChange}></ItemsSortBy>
                     </Col>
                   </Row>

diff --git a/src/sections/collection/collection-items-panel/items-list/ItemsSortBy.tsx b/src/sections/collection/collection-items-panel/items-list/ItemsSortBy.tsx
@@ -17,24 +17,26 @@ export enum SortOption {
 interface ItemsSortByProps {
   currentSortType?: SortType
   currentSortOrder?: OrderType
-  currentQuery?: string
+  currentSearchText?: string
   onSortChange: (newSortType: SortType, newOrderType: OrderType) => void
   isLoadingCollectionItems: boolean
 }
 function convertToSortOption(
   sortType?: SortType,
   orderType?: OrderType,
-  query?: string
+  searchText?: string
 ): SortOption {
-  if (sortType === SortType.NAME) {
-    return orderType === OrderType.ASC ? SortOption.NAME_ASC : SortOption.NAME_DESC
+  let sortOption: SortOption
+  if (searchText) {
+    sortOption = SortOption.RELEVANCE
+  } else if (sortType === SortType.NAME) {
+    sortOption = orderType === OrderType.ASC ? SortOption.NAME_ASC : SortOption.NAME_DESC
   } else if (sortType === SortType.DATE) {
-    return orderType === OrderType.ASC ? SortOption.DATE_ASC : SortOption.DATE_DESC
-  } else if (query) {
-    return SortOption.RELEVANCE
+    sortOption = orderType === OrderType.ASC ? SortOption.DATE_ASC : SortOption.DATE_DESC
   } else {
-    return SortOption.DATE_DESC
+    sortOption = SortOption.DATE_DESC
   }
+  return sortOption
 }
 function convertFromSortOption(sortOption: SortOption): {
   sortType: SortType
@@ -58,34 +60,40 @@ export function ItemsSortBy({
   currentSortType,
   currentSortOrder,
   onSortChange,
+  currentSearchText,
   isLoadingCollectionItems
 }: ItemsSortByProps) {
   const { t } = useTranslation('collection')
   const [selectedOption, setSelectedOption] = useState<SortOption>(
-    convertToSortOption(currentSortType, currentSortOrder)
+    convertToSortOption(currentSortType, currentSortOrder, currentSearchText)
   )
   const handleSortChange = (eventKey: string | null) => {
-    if (selectedOption !== eventKey) {
-      setSelectedOption(eventKey as SortOption)
+    const newSortOption = eventKey as SortOption
+    if (selectedOption !== newSortOption) {
+      setSelectedOption(newSortOption)
       onSortChange(
-        convertFromSortOption(selectedOption).sortType,
-        convertFromSortOption(selectedOption).orderType
+        convertFromSortOption(newSortOption).sortType,
+        convertFromSortOption(newSortOption).orderType
       )
     }
   }
 
+  const sortOptions = Object.values(SortOption).filter(
+    (sortByOption) => sortByOption !== SortOption.RELEVANCE || currentSearchText !== undefined
+  )
+
   return (
     <DropdownButton
       icon={<ArrowDownUp className={styles.icon} role="img" aria-label={t('sort.title')} />}
       title={t('sort.title')}
       id="collection-items-sort"
       variant="secondary"
       onSelect={handleSortChange}>
-      {Object.values(SortOption).map((sortByOption) => (
+      {Object.values(sortOptions).map((sortByOption) => (
         <DropdownButtonItem
           key={sortByOption}
           eventKey={sortByOption}
-          className={selectedOption === sortByOption ? styles['sortButton.selected'] : ''}>
+          className={selectedOption === sortByOption ? styles['selected-sort-option'] : ''}>
           {t(`sort.options.${sortByOption}`)}
         </DropdownButtonItem>
       ))}

diff --git a/src/sections/collection/useGetCollectionQueryParams.ts b/src/sections/collection/useGetCollectionQueryParams.ts
@@ -2,12 +2,15 @@ import { useSearchParams } from 'react-router-dom'
 import { CollectionItemType } from '@/collection/domain/models/CollectionItemType'
 import { FilterQuery } from '@/collection/domain/models/CollectionSearchCriteria'
 import { CollectionHelper } from './CollectionHelper'
+import { SortType, OrderType } from '@/collection/domain/models/CollectionSearchCriteria'
 
 export interface UseCollectionQueryParamsReturnType {
   pageQuery: number
   searchQuery?: string
   typesQuery?: CollectionItemType[]
   filtersQuery?: FilterQuery[]
+  sortQuery?: SortType
+  orderQuery?: OrderType
 }
 
 export const useGetCollectionQueryParams = (): UseCollectionQueryParamsReturnType => {