From ca1cdf0d4ce0c9c207897dc86116fe727c7b1dc3 Mon Sep 17 00:00:00 2001 From: Ellen Kraffmiller Date: Mon, 16 Dec 2024 16:41:32 -0500 Subject: [PATCH] add integration between ItemsSortBy.tsx button and getCollectionItems use case --- src/sections/collection/CollectionHelper.ts | 12 ++++- .../CollectionItemsPanel.tsx | 52 +++++++++++++++---- .../items-list/ItemsList.module.scss | 13 ++--- .../items-list/ItemsList.tsx | 5 +- .../items-list/ItemsSortBy.tsx | 38 ++++++++------ .../collection/useGetCollectionQueryParams.ts | 3 ++ 6 files changed, 87 insertions(+), 36 deletions(-) diff --git a/src/sections/collection/CollectionHelper.ts b/src/sections/collection/CollectionHelper.ts index 878640033..642d89503 100644 --- 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 index 5c0fd7b96..3bd47339d 100644 --- 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 index cfb126d35..12ed96a60 100644 --- 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 index 3b46d16d8..2cb7ea719 100644 --- 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}> diff --git a/src/sections/collection/collection-items-panel/items-list/ItemsSortBy.tsx b/src/sections/collection/collection-items-panel/items-list/ItemsSortBy.tsx index c4e4ad83c..208d8c169 100644 --- 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,22 +60,28 @@ export function ItemsSortBy({ currentSortType, currentSortOrder, onSortChange, + currentSearchText, isLoadingCollectionItems }: ItemsSortByProps) { const { t } = useTranslation('collection') const [selectedOption, setSelectedOption] = useState( - 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 ( } @@ -81,11 +89,11 @@ export function ItemsSortBy({ id="collection-items-sort" variant="secondary" onSelect={handleSortChange}> - {Object.values(SortOption).map((sortByOption) => ( + {Object.values(sortOptions).map((sortByOption) => ( + className={selectedOption === sortByOption ? styles['selected-sort-option'] : ''}> {t(`sort.options.${sortByOption}`)} ))} diff --git a/src/sections/collection/useGetCollectionQueryParams.ts b/src/sections/collection/useGetCollectionQueryParams.ts index 52baf0adc..73e60a6fd 100644 --- 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 => {