move to dialog component #19

archesproject · Aug 28, 2024 · 38dd2b2 · 38dd2b2
1 parent d08c429
commit 38dd2b2
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 50 deletions.
diff --git a/arches_lingo/src/arches_lingo/components/basic-search/BasicSearchComponent.vue b/arches_lingo/src/arches_lingo/components/basic-search/BasicSearchComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, ref, watch } from "vue";
+import { nextTick, ref, watch, onMounted } from "vue";
 import { useGettext } from "vue3-gettext";
 
 import AutoComplete from "primevue/autocomplete";
@@ -89,6 +89,13 @@ const updateQueryString = (value: string | object) => {
         searchTerm.value = value;
     }
 };
+
+onMounted(() => {
+    if (autoCompleteInstance.value) {
+        // focus input on component load
+        autoCompleteInstance.value.$el.querySelector("input").focus();
+    }
+});
 </script>
 
 <template>
@@ -108,8 +115,9 @@ const updateQueryString = (value: string | object) => {
                 }),
                 overlay: () => ({
                     style: {
-                        transform: 'translateY(2.3rem)',
+                        transform: 'translateY(3.5rem)',
                         maxHeight: '60vh',
+                        borderRadius: 0,
                     },
                 }),
             }"
@@ -122,7 +130,10 @@ const updateQueryString = (value: string | object) => {
                 <SearchResult :search-result="slotProps" />
             </template>
             <template #footer>
+                <!-- currently not WCAG 2.0 compliant. See https://github.com/primefaces/primevue/issues/6304 -->
                 <SearchResultsFooter
+                    v-if="shouldShowClearInputButton"
+                    tabindex="0"
                     :search-results-per-page="searchResultsPerPage"
                     :total-search-results-count="totalSearchResultsCount"
                     @page-change="
@@ -165,7 +176,7 @@ const updateQueryString = (value: string | object) => {
 
 :deep(.p-autocomplete .p-autocomplete-input) {
     width: 100%;
-    padding-right: 2.5rem;
-    padding-left: 2.5rem;
+    padding: 1rem 2.5rem;
+    border: none;
 }
 </style>
diff --git a/arches_lingo/src/arches_lingo/components/basic-search/SearchResultsFooter.vue b/arches_lingo/src/arches_lingo/components/basic-search/SearchResultsFooter.vue
@@ -23,9 +23,9 @@ const emitPageChangeEvent = (event: typeof PageEvent) => {
 
 <template>
     <Paginator
+        style="position: sticky; bottom: 0"
         :rows="searchResultsPerPage"
         :total-records="totalSearchResultsCount"
-        style="position: sticky; bottom: 0"
         :always-show="false"
         @page="emitPageChangeEvent"
     />

diff --git a/arches_lingo/src/arches_lingo/components/basic-search/SortAndFilterControls.vue b/arches_lingo/src/arches_lingo/components/basic-search/SortAndFilterControls.vue
@@ -15,61 +15,64 @@ const querySortPreference = ref();
     <div
         class="p-autocomplete p-inputtext p-component"
         style="
-            height: 2rem;
-            margin-top: 0.2rem;
             display: flex;
             justify-content: space-between;
-            align-items: center;
+            border-left: none;
+            border-right: none;
+            border-bottom: none;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            padding: 1rem;
         "
     >
-        <div style="display: flex">
+        <div style="display: flex; align-items: center">
             <div>Placeholder Sorting:</div>
 
             <div style="display: flex">
                 <div class="query-sort-preference">
                     <RadioButton
                         v-model="querySortPreference"
                         input-id="querySortPreference1"
-                        name="querySortPreference"
+                        name="querySortPreference1"
                         value="Unsorted"
                     />
-                    <label for="querySortPreference1">{{
-                        $gettext("Unsorted")
-                    }}</label>
+                    <label for="querySortPreference1">
+                        {{ $gettext("Unsorted") }}
+                    </label>
                 </div>
                 <div class="query-sort-preference">
                     <RadioButton
                         v-model="querySortPreference"
                         input-id="querySortPreference2"
-                        name="querySortPreference"
+                        name="querySortPreference2"
                         value="A to Z"
                     />
-                    <label for="querySortPreference2">{{
-                        $gettext("A to Z")
-                    }}</label>
+                    <label for="querySortPreference2">
+                        {{ $gettext("A to Z") }}
+                    </label>
                 </div>
                 <div class="query-sort-preference">
                     <RadioButton
                         v-model="querySortPreference"
                         input-id="querySortPreference3"
-                        name="querySortPreference"
+                        name="querySortPreference3"
                         value="Z to A"
                     />
-                    <label for="querySortPreference3">{{
-                        $gettext("Z to A")
-                    }}</label>
+                    <label for="querySortPreference3">
+                        {{ $gettext("Z to A") }}
+                    </label>
                 </div>
             </div>
         </div>
-        <div style="display: flex">
-            <div>Placeholder filters:</div>
+        <div style="display: flex; align-items: center">
+            <div>Placeholder Include:</div>
 
             <div style="display: flex">
                 <div class="query-filter">
                     <Checkbox
                         v-model="queryFilters"
                         input-id="queryFilter1"
-                        name="queryFilters"
+                        name="queryFilter1"
                         value="Concepts"
                     />
                     <label for="queryFilter1">{{ $gettext("Concepts") }}</label>
@@ -78,7 +81,7 @@ const querySortPreference = ref();
                     <Checkbox
                         v-model="queryFilters"
                         input-id="queryFilter2"
-                        name="queryFilters"
+                        name="queryFilter2"
                         value="Places"
                     />
                     <label for="queryFilter2">{{ $gettext("Places") }}</label>
@@ -87,7 +90,7 @@ const querySortPreference = ref();
                     <Checkbox
                         v-model="queryFilters"
                         input-id="queryFilter3"
-                        name="queryFilters"
+                        name="queryFilter3"
                         value="People"
                     />
                     <label for="queryFilter3">{{ $gettext("People") }}</label>
@@ -96,16 +99,16 @@ const querySortPreference = ref();
                     <Checkbox
                         v-model="queryFilters"
                         input-id="queryFilter4"
-                        name="queryFilters"
+                        name="queryFilter4"
                         value="Groups"
                     />
                     <label for="queryFilter4">{{ $gettext("Groups") }}</label>
                 </div>
                 <div class="query-filter">
                     <Checkbox
                         v-model="queryFilters"
-                        input-id="queryFilter4"
-                        name="queryFilters"
+                        input-id="queryFilter5"
+                        name="queryFilter5"
                         value="Periods"
                     />
                     <label for="queryFilter4">{{ $gettext("Periods") }}</label>

diff --git a/arches_lingo/src/arches_lingo/components/header/PageHeader.vue b/arches_lingo/src/arches_lingo/components/header/PageHeader.vue
@@ -6,15 +6,11 @@ import Menubar from "primevue/menubar";
 
 import { routeNames } from "@/arches_lingo/routes.ts";
 import UserInteraction from "@/arches_lingo/components/user/UserInteraction.vue";
+import BasicSearch from "@/arches_lingo/pages/BasicSearch.vue";
 
 const { $gettext } = useGettext();
 
 const items = ref([
-    {
-        label: $gettext("Search"),
-        icon: "fa fa-search",
-        name: routeNames.search,
-    },
     {
         label: $gettext("Advanced Search"),
         icon: "fa fa-file",
@@ -35,6 +31,7 @@ const items = ref([
             >
                 <h2>{{ $gettext("Arches Lingo") }}</h2>
             </RouterLink>
+            <BasicSearch />
         </template>
         <template #item="{ item }">
             <RouterLink

diff --git a/arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue b/arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue
@@ -12,11 +12,6 @@ const items = ref([
         routeName: routeNames.root,
         linkName: $gettext("Home"),
     },
-    {
-        icon: "fa fa-search",
-        routeName: routeNames.search,
-        linkName: $gettext("Search"),
-    },
 ]);
 </script>
 

diff --git a/arches_lingo/src/arches_lingo/pages/BasicSearch.vue b/arches_lingo/src/arches_lingo/pages/BasicSearch.vue
@@ -1,9 +1,42 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+
 import BasicSearchComponent from "@/arches_lingo/components/basic-search/BasicSearchComponent.vue";
+
+const { $gettext } = useGettext();
+
+const visible = ref(false);
 </script>
 
 <template>
-    <div style="height: 100%; padding: 8rem 4rem">
+    <Button
+        icon="pi pi-search"
+        :label="$gettext('Search')"
+        @click="visible = true"
+    />
+
+    <Dialog
+        v-model:visible="visible"
+        :dismissable-mask="true"
+        :modal="true"
+        :close-on-escape="true"
+        :show-header="false"
+        :pt="{
+            content: () => ({
+                style: {
+                    padding: 0,
+                },
+            }),
+        }"
+        style="margin-top: 4rem; border-radius: 0"
+        position="top"
+    >
         <BasicSearchComponent :search-results-per-page="25" />
-    </div>
+    </Dialog>
 </template>
+
+<style scoped></style>
diff --git a/arches_lingo/src/arches_lingo/routes.ts b/arches_lingo/src/arches_lingo/routes.ts
@@ -17,15 +17,6 @@ export const routes = [
             requiresAuthentication: false,
         },
     },
-    {
-        path: "/search",
-        name: "search",
-        component: () => import("@/arches_lingo/pages/BasicSearch.vue"),
-        meta: {
-            shouldShowNavigation: true,
-            requiresAuthentication: true,
-        },
-    },
     {
         path: "/advanced-search",
         name: "advanced-search",