add ordering

52North · Dec 6, 2024 · 81752c4 · 81752c4
1 parent a3c3a29
commit 81752c4
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 6 deletions.
diff --git a/src/apps/empty/components/Ordering.tsx 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>("SearchService");
+
+    const [orderOptions, setOrderOptions] = useState<OrderOption[]>([]);
+    const [filter] = useReactiveSnapshot(() => [searchSrvc.currentFilter], [searchSrvc]);
+
+    useEffect(() => {
+        searchSrvc.getOrderOptions().then((orderOptions) => setOrderOptions(orderOptions));
+    });
+
+    function setOrder(evt: ChangeEvent<HTMLSelectElement>): void {
+        const order = orderOptions.find((opt) => opt.key === evt.target.value);
+        if (order) {
+            searchSrvc.order = order;
+        }
+    }
+
+    return (
+        <Box>
+            <Select value={filter.order?.key} onChange={(evt) => setOrder(evt)}>
+                {orderOptions.map((e) => {
+                    return (
+                        <option key={e.key} value={e.key}>
+                            {e.label}
+                        </option>
+                    );
+                })}
+            </Select>
+        </Box>
+    );
+}
diff --git 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>("SearchService");
@@ -25,10 +26,11 @@ export function SearchView() {
                 <Center gap={2}>
                     <Box>{<Box>{resultCount} Results found</Box>}</Box>
                     <PageSizeSelection></PageSizeSelection>
+                    <Ordering></Ordering>
                 </Center>
 
                 <VStack>
-                    {results?.map((e) => <ResultEntry key={e.uuid} resultEntry={e}></ResultEntry>)}
+                    {results?.map((e) => <ResultEntry key={e.id} resultEntry={e}></ResultEntry>)}
                 </VStack>
 
                 <InfinitePageLoad></InfinitePageLoad>

diff --git 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<OrderOption[]>;
 }
 
 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<OrderOption[]> {
+        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
@@ -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<SearchResponse>;
+    getOrderOptions(): Promise<OrderOption[]>;
 }
diff --git 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<OrderOption[]> {
+        return new Promise<OrderOption[]>((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
         };