From 81752c46af22ca6756403e6b49e1e0460ffaaab6 Mon Sep 17 00:00:00 2001 From: Jan Schulte Date: Fri, 6 Dec 2024 11:44:09 +0100 Subject: [PATCH] add ordering --- src/apps/empty/components/Ordering.tsx | 41 +++++++++++++++++++ src/apps/empty/components/SearchView.tsx | 4 +- src/apps/empty/search-service.ts | 13 +++++- .../geonode-catalog/CatalogService.ts | 9 +++- .../GeonodeCatalogServiceImpl.ts | 41 +++++++++++++++++-- 5 files changed, 102 insertions(+), 6 deletions(-) create mode 100644 src/apps/empty/components/Ordering.tsx diff --git a/src/apps/empty/components/Ordering.tsx b/src/apps/empty/components/Ordering.tsx new file mode 100644 index 0000000..eff3a07 --- /dev/null +++ b/src/apps/empty/components/Ordering.tsx @@ -0,0 +1,41 @@ +// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer) +// SPDX-License-Identifier: Apache-2.0 + +import { Box, Select } from "@open-pioneer/chakra-integration"; +import { SearchService } from "../search-service"; +import { useService } from "open-pioneer:react-hooks"; +import { ChangeEvent, useEffect, useState } from "react"; +import { OrderOption } from "geonode-catalog"; +import { useReactiveSnapshot } from "@open-pioneer/reactivity"; + +export function Ordering() { + const searchSrvc = useService("SearchService"); + + const [orderOptions, setOrderOptions] = useState([]); + const [filter] = useReactiveSnapshot(() => [searchSrvc.currentFilter], [searchSrvc]); + + useEffect(() => { + searchSrvc.getOrderOptions().then((orderOptions) => setOrderOptions(orderOptions)); + }); + + function setOrder(evt: ChangeEvent): void { + const order = orderOptions.find((opt) => opt.key === evt.target.value); + if (order) { + searchSrvc.order = order; + } + } + + return ( + + + + ); +} diff --git a/src/apps/empty/components/SearchView.tsx b/src/apps/empty/components/SearchView.tsx index ba22355..a595106 100644 --- a/src/apps/empty/components/SearchView.tsx +++ b/src/apps/empty/components/SearchView.tsx @@ -9,6 +9,7 @@ import { SearchInput } from "./SearchInput"; import { ResultEntry } from "./ResultEntry"; import { PageSizeSelection } from "./PageSizeSelection"; import { InfinitePageLoad } from "./InfinitePageLoad"; +import { Ordering } from "./Ordering"; export function SearchView() { const searchSrvc = useService("SearchService"); @@ -25,10 +26,11 @@ export function SearchView() {
{{resultCount} Results found} +
- {results?.map((e) => )} + {results?.map((e) => )} diff --git a/src/apps/empty/search-service.ts b/src/apps/empty/search-service.ts index 86e0992..b87407b 100644 --- a/src/apps/empty/search-service.ts +++ b/src/apps/empty/search-service.ts @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import { Reactive, reactive } from "@conterra/reactivity-core"; import { DeclaredService, ServiceOptions } from "@open-pioneer/runtime"; -import { CatalogService, SearchFilter, SearchResponse, SearchResultEntry } from "geonode-catalog"; +import { CatalogService, OrderOption, SearchFilter, SearchResultEntry } from "geonode-catalog"; import { API_URL } from "./constants"; interface References { @@ -16,7 +16,9 @@ export interface SearchService extends DeclaredService<"SearchService"> { currentFilter: SearchFilter; set pageSize(pageSize: number); set searchTerm(v: string); + set order(order: OrderOption); addNextPage(): void; + getOrderOptions(): Promise; } export class SearchServiceImpl implements SearchService { @@ -64,6 +66,11 @@ export class SearchServiceImpl implements SearchService { this.triggerSearch(); } + set order(order: OrderOption) { + this.#currentFilter.order = order; + this.triggerSearch(); + } + addNextPage(): void { console.log("start loading next page"); if (!this.#searching.value && this.#currentFilter.page !== undefined) { @@ -72,6 +79,10 @@ export class SearchServiceImpl implements SearchService { } } + getOrderOptions(): Promise { + return this.catalogSrvc.getOrderOptions(); + } + private triggerSearch(appendResults: boolean = false) { this.#searching.value = true; if (!appendResults) { diff --git a/src/packages/geonode-catalog/CatalogService.ts b/src/packages/geonode-catalog/CatalogService.ts index 6504cf0..7e38630 100644 --- a/src/packages/geonode-catalog/CatalogService.ts +++ b/src/packages/geonode-catalog/CatalogService.ts @@ -3,7 +3,7 @@ import { DeclaredService } from "@open-pioneer/runtime"; export interface SearchResultEntry { - uuid: string; + id: string; title: string; imageUrl?: string; abstract: string; @@ -14,12 +14,19 @@ export interface SearchResponse { results?: SearchResultEntry[]; } +export interface OrderOption { + key: string; + label: string; +} + export interface SearchFilter { searchTerm?: string; pageSize?: number; page?: number; + order?: OrderOption; } export interface CatalogService extends DeclaredService<"geonode-catalog.CatalogService"> { startSearch(url: string, filter: SearchFilter): Promise; + getOrderOptions(): Promise; } diff --git a/src/packages/geonode-catalog/GeonodeCatalogServiceImpl.ts b/src/packages/geonode-catalog/GeonodeCatalogServiceImpl.ts index 2132299..274f558 100644 --- a/src/packages/geonode-catalog/GeonodeCatalogServiceImpl.ts +++ b/src/packages/geonode-catalog/GeonodeCatalogServiceImpl.ts @@ -1,6 +1,12 @@ // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer) // SPDX-License-Identifier: Apache-2.0 -import { CatalogService, SearchFilter, SearchResponse, SearchResultEntry } from "./CatalogService"; +import { + CatalogService, + OrderOption, + SearchFilter, + SearchResponse, + SearchResultEntry +} from "./CatalogService"; import type { ServiceOptions } from "@open-pioneer/runtime"; import { HttpService } from "@open-pioneer/http"; @@ -10,7 +16,7 @@ interface References { interface GeonodeResource { title: string; - uuid: string; + pk: string; thumbnail_url: string; abstract: string; } @@ -39,6 +45,12 @@ export class GeonodeCatalogServiceImpl implements CatalogService { params.set("page", `${filter.page}`); } + if (filter.order !== undefined) { + params.set("sort[]", filter.order.key); + } + + params.set("api_preset", "catalog_list"); + const fetchUrl = `${url}resources?${params}`; return this.httpService @@ -56,11 +68,34 @@ export class GeonodeCatalogServiceImpl implements CatalogService { // }); } + getOrderOptions(): Promise { + return new Promise((resolve) => + resolve([ + { + key: "-date", + label: "Most recent" + }, + { + key: "date", + label: "Less recent" + }, + { + key: "title", + label: "A-Z" + }, + { + key: "-title", + label: "Z-A" + } + ]) + ); + } + // eslint-disable-next-line @typescript-eslint/no-explicit-any private parseResult(res: GeonodeResource): SearchResultEntry { return { title: res.title, - uuid: res.uuid, + id: res.pk, imageUrl: res.thumbnail_url, abstract: res.abstract };