From 4fe33d45ce0870f0209ba2cef114546679f90120 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Tue, 24 Aug 2021 09:39:51 +0530 Subject: [PATCH] added sorting on explore page (#279) * added sorting on explore page * minor change * chnaged filter position * addressing review comment --- .../resources/ui/src/axiosAPIs/miscAPI.ts | 8 +- .../src/components/dropdown/DropDownList.tsx | 4 +- .../resources/ui/src/constants/constants.ts | 15 +++ .../resources/ui/src/pages/explore/index.tsx | 105 ++++++++++++++++-- .../resources/ui/src/utils/svgconstant.tsx | 2 +- 5 files changed, 121 insertions(+), 13 deletions(-) diff --git a/catalog-rest-service/src/main/resources/ui/src/axiosAPIs/miscAPI.ts b/catalog-rest-service/src/main/resources/ui/src/axiosAPIs/miscAPI.ts index ea1c0269d20..6bcd29dfb09 100644 --- a/catalog-rest-service/src/main/resources/ui/src/axiosAPIs/miscAPI.ts +++ b/catalog-rest-service/src/main/resources/ui/src/axiosAPIs/miscAPI.ts @@ -23,7 +23,9 @@ export const searchData: Function = ( queryString: string, from: number, size: number, - filters: string + filters: string, + sortField: string, + sortOrder: string ): Promise => { const start = (from - 1) * size; const query = queryString ? `*${queryString}*` : '*'; @@ -31,7 +33,9 @@ export const searchData: Function = ( return APIClient.get( `/search/query?q=${query}${ filters ? ` AND ${filters}` : '' - }&from=${start}&size=${size}` + }&from=${start}&size=${size}${sortField ? `&sort_field=${sortField}` : ''}${ + sortOrder ? `&sort_order=${sortOrder}` : '' + }` ); }; diff --git a/catalog-rest-service/src/main/resources/ui/src/components/dropdown/DropDownList.tsx b/catalog-rest-service/src/main/resources/ui/src/components/dropdown/DropDownList.tsx index 3d9038e4dbc..624e6bb6304 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/dropdown/DropDownList.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/dropdown/DropDownList.tsx @@ -49,7 +49,7 @@ const DropDownList: FunctionComponent = ({ = ({ aria-labelledby="menu-button" aria-orientation="vertical" className={classNames( - 'dropdown-list', + 'dropdown-list tw-mt-0.5', horzPosRight ? 'dd-horz-right' : 'dd-horz-left' )} role="menu"> diff --git a/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts b/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts index 6362dcfb297..d6e6f4404df 100644 --- a/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts +++ b/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts @@ -48,6 +48,21 @@ export const tiers = [ { key: 'Tier.Tier5', doc_count: 0 }, ]; +export const sortingFields = [ + { name: 'Weekly Stats', value: 'weekly_stats' }, + { name: 'Daily Stats', value: 'daily_stats' }, + { name: 'Monthly Stats', value: 'monthly_stats' }, + { + name: 'Last Updated Timestamp', + value: 'last_updated_timestamp', + }, +]; + +export const sortingOrder = [ + { name: 'Ascending', value: 'asc' }, + { name: 'Descending', value: 'desc' }, +]; + export const ROUTES = { HOME: '/', CALLBACK: '/callback', diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx index d40a950ceb5..73617922b95 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx @@ -26,14 +26,23 @@ import { import React, { useCallback, useEffect, useRef, useState } from 'react'; import { useLocation, useParams } from 'react-router-dom'; import { searchData } from '../../axiosAPIs/miscAPI'; +import { Button } from '../../components/buttons/Button/Button'; import Error from '../../components/common/error/Error'; import FacetFilter from '../../components/common/facetfilter/FacetFilter'; +import DropDownList from '../../components/dropdown/DropDownList'; import SearchedData from '../../components/searched-data/SearchedData'; -import { ERROR404, ERROR500, PAGE_SIZE } from '../../constants/constants'; +import { + ERROR404, + ERROR500, + PAGE_SIZE, + sortingFields, + sortingOrder, +} from '../../constants/constants'; import useToastContext from '../../hooks/useToastContext'; import { getAggregationList } from '../../utils/AggregationUtils'; import { formatDataResponse } from '../../utils/APIUtils'; import { getFilterString } from '../../utils/FilterUtils'; +import { dropdownIcon as DropDownIcon } from '../../utils/svgconstant'; import { getAggrWithDefaultValue } from './explore.constants'; import { Params } from './explore.interface'; @@ -75,6 +84,10 @@ const ExplorePage: React.FC = (): React.ReactElement => { const [isLoading, setIsLoading] = useState(true); const [searchTag, setSearchTag] = useState(location.search); const [error, setError] = useState(''); + const [fieldListVisible, setFieldListVisible] = useState(false); + const [orderListVisible, setOrderListVisible] = useState(false); + const [sortField, setSortField] = useState(sortingFields[3].value); + const [sortOrder, setSortOrder] = useState(sortingOrder[1].value); const isMounting = useRef(true); const handleSelectedFilter = ( @@ -162,25 +175,33 @@ const ExplorePage: React.FC = (): React.ReactElement => { searchText, currentPage, PAGE_SIZE, - getFilterString(filters) + getFilterString(filters), + sortField, + sortOrder ); const serviceTypeAgg = searchData( searchText, currentPage, 0, - getFilterString(filters, ['service type']) + getFilterString(filters, ['service type']), + sortField, + sortOrder ); const tierAgg = searchData( searchText, currentPage, 0, - getFilterString(filters, ['tier']) + getFilterString(filters, ['tier']), + sortField, + sortOrder ); const tagAgg = searchData( searchText, currentPage, 0, - getFilterString(filters, ['tags']) + getFilterString(filters, ['tags']), + sortField, + sortOrder ); Promise.all([searchResults, serviceTypeAgg, tierAgg, tagAgg]) @@ -240,6 +261,73 @@ const ExplorePage: React.FC = (): React.ReactElement => { return facetFilters; }; + const handleFieldDropDown = ( + _e: React.MouseEvent, + value?: string + ) => { + setSortField(value || sortingFields[3].value); + setFieldListVisible(false); + }; + const handleOrderDropDown = ( + _e: React.MouseEvent, + value?: string + ) => { + setSortOrder(value || sortingOrder[1].value); + setOrderListVisible(false); + }; + + const getSortingElements = () => { + return ( +
+
+
+
+ Sort by : + + + {fieldListVisible && ( + + )} + +
+
+ Order by : + + + {orderListVisible && ( + + )} + +
+
+
+ ); + }; + useEffect(() => { setSearchText(searchQuery || ''); setCurrentPage(1); @@ -253,7 +341,7 @@ const ExplorePage: React.FC = (): React.ReactElement => { useEffect(() => { fetchTableData(true); - }, [searchText]); + }, [searchText, sortField, sortOrder]); useEffect(() => { if (!isMounting.current) { @@ -290,8 +378,9 @@ const ExplorePage: React.FC = (): React.ReactElement => { isLoading={isLoading} paginate={paginate} searchText={searchText} - totalValue={totalNumberOfValue} - /> + totalValue={totalNumberOfValue}> + {getSortingElements()} + )} ); diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/svgconstant.tsx b/catalog-rest-service/src/main/resources/ui/src/utils/svgconstant.tsx index e434c681caf..c000fdd53ef 100644 --- a/catalog-rest-service/src/main/resources/ui/src/utils/svgconstant.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/utils/svgconstant.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties } from 'react'; -export const dropdownIcon = ({ style }: { style: CSSProperties }) => { +export const dropdownIcon = ({ style }: { style?: CSSProperties }) => { return (