addresses PR comments #19

archesproject · Oct 29, 2024 · 6fe8434 · 6fe8434
1 parent 14de455
commit 6fe8434
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 102 deletions.
diff --git a/arches_lingo/src/arches_lingo/api.ts b/arches_lingo/src/arches_lingo/api.ts
@@ -60,11 +60,14 @@ export const fetchSearchResults = async (
     items: number,
     page: number,
 ) => {
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+    const params = new URLSearchParams({
+        term: searchTerm,
+        items: items.toString(),
+        page: page.toString(),
+    });
+
+    const url = `${arches.urls.api_search}?${params.toString()}`;
 
-    const url = `
-        ${arches.urls.api_search}?term=${encodeURIComponent(searchTerm)}&items=${encodeURIComponent(items)}&page=${encodeURIComponent(page)}
-    `;
     const response = await fetch(url);
     try {
         const responseJson = await response.json();

diff --git a/arches_lingo/src/arches_lingo/components/basic-search/BasicSearch.vue b/arches_lingo/src/arches_lingo/components/basic-search/BasicSearch.vue
@@ -13,6 +13,8 @@ import SearchResult from "@/arches_lingo/components/basic-search/SearchResult.vu
 import { fetchSearchResults } from "@/arches_lingo/api.ts";
 import { DEFAULT_ERROR_TOAST_LIFE, ERROR } from "@/arches_lingo/constants.ts";
 
+import type { VirtualScrollerLazyEvent } from "primevue/virtualscroller";
+
 import type { Concept } from "@/arches_lingo/types.ts";
 
 const { $gettext } = useGettext();
@@ -107,10 +109,7 @@ const keepOverlayVisible = () => {
     }
 };
 
-const loadAdditionalSearchResults = (event: {
-    first: number;
-    last: number;
-}) => {
+const loadAdditionalSearchResults = (event: VirtualScrollerLazyEvent) => {
     if (
         event.last >= searchResultsPage.value * props.searchResultsPerPage &&
         event.last <= searchResultsTotalCount.value
@@ -167,15 +166,22 @@ watch(searchResults, (searchResults) => {
 </script>
 
 <template>
-    <div style="width: 100%; font-family: sans-serif">
+    <div
+        id="basic-search-container"
+        style="width: 100%; font-family: sans-serif"
+    >
         <div style="display: flex; align-items: center">
-            <i class="pi pi-search search-icon" />
+            <i
+                class="pi pi-search search-icon"
+                aria-hidden="true"
+            />
 
             <AutoComplete
                 ref="autoCompleteInstance"
                 :key="autoCompleteKey"
                 v-model="query"
                 option-label="id"
+                append-to="#basic-search-container"
                 :loading="isLoading && !isLoadingAdditionalResults"
                 :placeholder="$gettext('Quick Search')"
                 :pt="{
@@ -186,8 +192,10 @@ watch(searchResults, (searchResults) => {
                         },
                     },
                     overlay: {
-                        class: 'basic-search-overlay',
-                        style: {},
+                        style: {
+                            padding: '0',
+                            borderRadius: '0',
+                        },
                     },
                     list: {
                         style: {
@@ -239,6 +247,9 @@ watch(searchResults, (searchResults) => {
                     <div class="footer">
                         <i
                             class="pi pi-spin pi-spinner p-virtualscroller-loader"
+                            :aria-label="
+                                $gettext('Loading additional search results')
+                            "
                         />
                     </div>
                 </template>
@@ -295,18 +306,10 @@ watch(searchResults, (searchResults) => {
     padding: 1rem 2.5rem;
     border: none;
 }
-</style>
 
-<!-- NOT scoped because overlay gets appended to <body> and is unreachable via scoped styles -->
-<style>
-.basic-search-overlay {
-    transform: translateY(3.4rem) !important;
-    border-radius: 0 !important;
-}
-
-@media screen and (max-width: 960px) {
-    .basic-search-overlay {
-        transform: translateY(10rem) !important;
-    }
+:deep(.p-autocomplete-overlay) {
+    position: static !important;
 }
 </style>
+
+<style></style>
diff --git a/arches_lingo/src/arches_lingo/components/basic-search/SearchResult.vue b/arches_lingo/src/arches_lingo/components/basic-search/SearchResult.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import type { Concept } from "@/arches_lingo/types.ts";
 import { getItemLabel } from "@/arches_vue_utils/utils.ts";
 
+import type { PropType } from "vue";
+import type { Concept } from "@/arches_lingo/types.ts";
+
 defineProps({
     searchResult: {
-        type: Object,
+        type: Object as PropType<{ index: number; option: Concept }>,
         required: true,
     },
 });
@@ -27,7 +29,10 @@ const getParentLabels = (item: Concept, preferredLanguage: string): string => {
         class="search-result"
         :class="{ 'is-even': searchResult.index % 2 === 0 }"
     >
-        <i class="pi pi-paperclip" />
+        <i
+            class="pi pi-paperclip"
+            aria-hidden="true"
+        />
 
         <div style="margin: 0 0.5rem">
             {{ getItemLabel(searchResult.option, "en-US", "en-US").value }}

diff --git a/arches_lingo/src/arches_lingo/components/header/PageHeader.vue b/arches_lingo/src/arches_lingo/components/header/PageHeader.vue
@@ -6,7 +6,7 @@ import Menubar from "primevue/menubar";
 
 import { routeNames } from "@/arches_lingo/routes.ts";
 import UserInteraction from "@/arches_lingo/components/user/UserInteraction.vue";
-import SearchDialogue from "@/arches_lingo/components/header/SearchDialogue.vue";
+import SearchDialog from "@/arches_lingo/components/header/SearchDialog.vue";
 
 const { $gettext } = useGettext();
 
@@ -31,7 +31,7 @@ const items = ref([
             >
                 <h2>{{ $gettext("Arches Lingo") }}</h2>
             </RouterLink>
-            <SearchDialogue />
+            <SearchDialog />
         </template>
         <template #item="{ item }">
             <RouterLink

diff --git a/...ingo/components/header/SearchDialogue.vue → ..._lingo/components/header/SearchDialog.vue b/...ingo/components/header/SearchDialogue.vue → ..._lingo/components/header/SearchDialog.vue
@@ -7,12 +7,14 @@ import Dialog from "primevue/dialog";
 
 import BasicSearch from "@/arches_lingo/components/basic-search/BasicSearch.vue";
 
+import {
+    SEARCH_RESULTS_PER_PAGE,
+    SEARCH_RESULT_ITEM_SIZE,
+} from "@/arches_lingo/constants.ts";
+
 const { $gettext } = useGettext();
 
 const visible = ref(false);
-
-const SEARCH_RESULTS_PER_PAGE = 25;
-const SEARCH_RESULT_ITEM_SIZE = 38;
 </script>
 
 <template>
@@ -25,13 +27,15 @@ const SEARCH_RESULT_ITEM_SIZE = 38;
     <Dialog
         v-model:visible="visible"
         position="top"
+        :header="$gettext('Search')"
         :dismissable-mask="true"
         :close-on-escape="true"
         :modal="true"
         :pt="{
             content: {
                 style: {
                     padding: 0,
+                    overflow: 'visible',
                 },
             },
             root: {

diff --git a/arches_lingo/src/arches_lingo/constants.ts b/arches_lingo/src/arches_lingo/constants.ts
@@ -4,6 +4,9 @@ import type { UserRefAndSetter } from "@/arches_lingo/types.ts";
 
 export const ANONYMOUS = "anonymous";
 export const ERROR = "error";
+
 export const DEFAULT_ERROR_TOAST_LIFE = 8000;
+export const SEARCH_RESULTS_PER_PAGE = 25;
+export const SEARCH_RESULT_ITEM_SIZE = 38;
 
 export const USER_KEY = Symbol() as InjectionKey<UserRefAndSetter>;
diff --git a/arches_lingo/src/arches_lingo/pages/BasicSearch.vue b/arches_lingo/src/arches_lingo/pages/BasicSearch.vue
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
@@ -16,11 +16,7 @@ export interface UserRefAndSetter {
 
 export interface Concept {
     id: string;
-    labels: {
-        language: string;
-        value: string;
-        valuetype: string;
-    }[];
+    labels: Label[];
     parents: {
         id: string;
         labels: Label[];

diff --git a/arches_lingo/views/api/concepts.py b/arches_lingo/views/api/concepts.py
@@ -70,7 +70,7 @@ def get(self, request):
 
         return JSONResponse(
             {
-                "current_page": paginator.get_page(page_number),
+                "current_page": paginator.get_page(page_number).number,
                 "total_pages": paginator.num_pages,
                 "results_per_page": paginator.per_page,
                 "total_results": paginator.count,