Skip to content

Commit f28ae96

Browse files
author
Mark van Aalst
committed
fix search rendering
1 parent 869c478 commit f28ae96

8 files changed

Lines changed: 194 additions & 392 deletions

File tree

‎package-lock.json‎

Lines changed: 8 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/integrations/sitecore-search/QuerySummary.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,10 @@ export const QuerySummary = (props: IQuerySummary) => {
1212
const showResultTo = showResultFrom + resultsPerPage - 1;
1313

1414
return (
15-
<p>
15+
<p className="text-sm text-muted-foreground">
1616
Showing <strong>{showResultFrom}</strong> to
17-
<strong>
18-
{" "}
19-
{showResultTo < totalResults ? showResultTo : totalResults}{" "}
20-
</strong>
21-
from <strong>{totalResults} </strong> results for{" "}
22-
<strong>&quot;{title}&quot;</strong>
17+
<strong> {showResultTo < totalResults ? showResultTo : totalResults} </strong>
18+
from <strong>{totalResults} </strong> results for <strong>&quot;{title}&quot;</strong>
2319
</p>
2420
);
2521
};

‎src/components/integrations/sitecore-search/SearchFacets.tsx‎

Lines changed: 45 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,13 @@
11
/* eslint-disable no-unused-vars */
2-
"use client";
2+
'use client';
33

4-
import type { SearchResponseFacet } from "@sitecore-search/react";
5-
import {
6-
AccordionFacets,
7-
SearchResultsAccordionFacets,
8-
} from "@sitecore-search/ui";
9-
import {
10-
Accordion,
11-
AccordionContent,
12-
AccordionItem,
13-
AccordionTrigger,
14-
} from "@src/components/ui/accordion";
15-
import { Button } from "@src/components/ui/button";
16-
import { Card, CardContent, CardHeader } from "@src/components/ui/card";
17-
import { Checkbox } from "@src/components/ui/checkbox";
18-
import { useState } from "react";
4+
import type { FacetChoiceChangedPayload, SearchResponseFacet } from '@sitecore-search/react';
5+
import { AccordionFacets, SearchResultsAccordionFacets } from '@sitecore-search/ui';
6+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@src/components/ui/accordion';
7+
import { Button } from '@src/components/ui/button';
8+
import { Checkbox } from '@src/components/ui/checkbox';
9+
import { useState } from 'react';
10+
import { Separator } from '../../ui/separator';
1911

2012
export interface SearchFacetsType {
2113
onFacetClick: (facet: any) => void;
@@ -50,19 +42,14 @@ export const MobileFacets = (props: SearchFacetsType) => {
5042
const { onFacetClick, facets } = props;
5143

5244
return (
53-
<SearchResultsAccordionFacets
54-
defaultFacetTypesExpandedList={facets.map((x) => x.name)}
55-
onFacetValueClick={onFacetClick}
56-
>
45+
<SearchResultsAccordionFacets defaultFacetTypesExpandedList={facets.map((x) => x.name)} onFacetValueClick={onFacetClick}>
5746
{facets.map((facet) => (
5847
<Accordion key={facet.name} type="single" collapsible>
5948
<AccordionItem value={facet.name}>
6049
<AccordionFacets.Facet facetId={facet.name}>
6150
<AccordionFacets.Content>
6251
<AccordionTrigger>
63-
<span className="text-sm uppercase tracking-wide text-muted-foreground">
64-
{facet.label}
65-
</span>
52+
<span className="text-sm uppercase tracking-wide text-muted-foreground">{facet.label}</span>
6653
</AccordionTrigger>
6754
<AccordionContent>
6855
<AccordionFacets.ValueList asChild>
@@ -77,16 +64,10 @@ export const MobileFacets = (props: SearchFacetsType) => {
7764
}}
7865
>
7966
<div className="flex items-center gap-2">
80-
<Checkbox
81-
asChild
82-
aria-labelledby={`facet-label-${facet.name}-${v.id}`}
83-
>
67+
<Checkbox asChild aria-labelledby={`facet-label-${facet.name}-${v.id}`}>
8468
<AccordionFacets.ItemCheckbox />
8569
</Checkbox>
86-
<span
87-
id={`facet-label-${facet.name}-${v.id}`}
88-
className="text-sm"
89-
>
70+
<span id={`facet-label-${facet.name}-${v.id}`} className="text-sm">
9071
{v.text} {v.count && `(${v.count})`}
9172
</span>
9273
</div>
@@ -108,58 +89,44 @@ export const Facets = (props: SearchFacetsType) => {
10889
const { onFacetClick, facets } = props;
10990

11091
return (
111-
<SearchResultsAccordionFacets
112-
defaultFacetTypesExpandedList={facets.map((x) => x.name)}
113-
onFacetValueClick={onFacetClick}
114-
>
92+
<SearchResultsAccordionFacets defaultFacetTypesExpandedList={facets.map((x) => x.name)} onFacetValueClick={(e) => onFacetClick(e as FacetChoiceChangedPayload)}>
11593
{facets.map((facet) => (
116-
<Card className="bg-muted mb-4" key={facet.name}>
117-
<AccordionFacets.Facet facetId={facet.name}>
118-
<AccordionFacets.Header>
119-
<CardHeader>
120-
<AccordionFacets.Trigger>
121-
<p className="text-sm uppercase tracking-wide text-muted-foreground">
122-
{facet.label}
123-
</p>
124-
</AccordionFacets.Trigger>
125-
</CardHeader>
94+
<div key={facet.name}>
95+
<AccordionFacets.Facet key={facet.name} facetId={facet.name} className="w-full">
96+
<AccordionFacets.Header className="mb-4 font-heading">
97+
<AccordionFacets.Trigger className="flex w-full text-lg font-bold text-left uppercase group">
98+
<div className="capitalize grow">{facet.label} </div>
99+
<div className="inline-flex ml-8 w-4 h-4 group-data-[state=open]:rotate-180">
100+
<svg fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
101+
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
102+
</svg>
103+
</div>
104+
</AccordionFacets.Trigger>
126105
</AccordionFacets.Header>
127-
128106
<AccordionFacets.Content>
129-
<CardContent>
130-
<AccordionFacets.ValueList asChild>
131-
<div className="flex flex-col gap-2">
132-
{facet.value.map((v, index) => (
133-
<AccordionFacets.Item
134-
asChild
135-
key={v.id}
136-
{...{
137-
index,
138-
facetValueId: v.id,
139-
}}
140-
>
141-
<div className="flex items-center gap-2">
142-
<Checkbox
143-
asChild
144-
aria-labelledby={`facet-desktop-label-${facet.name}-${v.id}`}
145-
>
146-
<AccordionFacets.ItemCheckbox />
147-
</Checkbox>
148-
<span
149-
id={`facet-desktop-label-${facet.name}-${v.id}`}
150-
className="text-sm"
151-
>
152-
{v.text} {v.count && `(${v.count})`}
153-
</span>
154-
</div>
155-
</AccordionFacets.Item>
156-
))}
157-
</div>
158-
</AccordionFacets.ValueList>
159-
</CardContent>
107+
<AccordionFacets.ValueList className="not-prose px-0 py-0">
108+
{facet.value.map((v, index) => (
109+
<AccordionFacets.Item
110+
className="pr-2 my-2 flex capitalize items-center"
111+
key={v.id}
112+
{...{
113+
index,
114+
facetValueId: v.id,
115+
}}
116+
>
117+
<AccordionFacets.ItemCheckbox asChild className="align-middle data-[state=checked]:bg-violet-800 data-[state=checked]:border-violet-800">
118+
<Checkbox className="bg-white data-[state=checked]:bg-violet-800 data-[state=checked]:border-violet-800" />
119+
</AccordionFacets.ItemCheckbox>
120+
<AccordionFacets.ItemLabel className="overflow-hidden ml-2 text-sm whitespace-nowrap cursor-pointer text-ellipsis" title={`${v.text}${v.count ? ` (${v.count})` : ''}`}>
121+
{v.text} {v.count && `(${v.count})`}
122+
</AccordionFacets.ItemLabel>
123+
</AccordionFacets.Item>
124+
))}
125+
</AccordionFacets.ValueList>
160126
</AccordionFacets.Content>
161127
</AccordionFacets.Facet>
162-
</Card>
128+
<Separator className="my-4" />
129+
</div>
163130
))}
164131
</SearchResultsAccordionFacets>
165132
);

‎src/components/integrations/sitecore-search/SearchPagination.tsx‎

Lines changed: 26 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
/* eslint-disable no-unused-vars */
22

3-
import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
4-
import Icon from "@mdi/react";
5-
import { Pagination } from "@sitecore-search/ui";
6-
import { Button } from "@src/components/ui/button";
7-
import {
8-
Tooltip,
9-
TooltipContent,
10-
TooltipProvider,
11-
TooltipTrigger,
12-
} from "@src/components/ui/tooltip";
3+
import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
4+
import Icon from '@mdi/react';
5+
import { Pagination } from '@sitecore-search/ui';
6+
import { Button } from '@src/components/ui/button';
7+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@src/components/ui/tooltip';
138

149
export interface SearchPaginationType {
1510
page: number;
@@ -25,48 +20,29 @@ enum PaginationRenderType {
2520
}
2621

2722
export const SearchPagination = (props: SearchPaginationType) => {
28-
const { defaultCurrentPage, onPageNumberChange, totalItems, pageSize } =
29-
props;
23+
const { defaultCurrentPage, onPageNumberChange, totalItems, pageSize } = props;
3024
let { page } = props;
31-
const pageCount =
32-
totalItems < pageSize ? 1 : Math.ceil(totalItems / pageSize);
25+
const pageCount = totalItems < pageSize ? 1 : Math.ceil(totalItems / pageSize);
3326
let pages = Array.from(Array(pageCount).keys()).map((x) => x + 1);
34-
const paginationRenderType: PaginationRenderType =
35-
pageCount < 10
36-
? PaginationRenderType.AllPages
37-
: PaginationRenderType.TruncatePages;
27+
const paginationRenderType: PaginationRenderType = pageCount < 10 ? PaginationRenderType.AllPages : PaginationRenderType.TruncatePages;
3828

3929
if (paginationRenderType === PaginationRenderType.TruncatePages) {
40-
pages =
41-
page >= 5
42-
? pages.slice(page - 5, parseInt(page.toString(), 10) + 4)
43-
: pages.slice(0, 9);
30+
pages = page >= 5 ? pages.slice(page - 5, parseInt(page.toString(), 10) + 4) : pages.slice(0, 9);
4431
}
4532

46-
if (typeof page === "string") {
33+
if (typeof page === 'string') {
4734
page = parseInt(page, 10);
4835
}
4936

5037
return (
5138
<div className="flex items-center justify-center">
52-
<Pagination.Root
53-
currentPage={page}
54-
defaultCurrentPage={defaultCurrentPage}
55-
totalPages={pageCount}
56-
onPageChange={onPageNumberChange}
57-
className="flex items-center justify-center mt-8"
58-
>
39+
<Pagination.Root currentPage={page} defaultCurrentPage={defaultCurrentPage} totalPages={pageCount} onPageChange={onPageNumberChange} className="flex items-center justify-center mt-8">
5940
<div className="flex items-center gap-1 mt-8">
6041
<Pagination.PrevPage onClick={(e) => e.preventDefault()}>
6142
<TooltipProvider>
6243
<Tooltip>
6344
<TooltipTrigger asChild>
64-
<Button
65-
variant="outline"
66-
size="sm"
67-
disabled={page === 1}
68-
aria-label="Previous"
69-
>
45+
<Button variant="outline" size="sm" disabled={page === 1} aria-label="Previous">
7046
<Icon path={mdiChevronLeft} size={1} />
7147
</Button>
7248
</TooltipTrigger>
@@ -76,42 +52,30 @@ export const SearchPagination = (props: SearchPaginationType) => {
7652
</Tooltip>
7753
</TooltipProvider>
7854
</Pagination.PrevPage>
79-
{paginationRenderType === PaginationRenderType.TruncatePages &&
80-
page > 5 && (
81-
<Button variant="ghost" disabled>
82-
…
83-
</Button>
84-
)}
85-
<Pagination.Pages>
55+
{paginationRenderType === PaginationRenderType.TruncatePages && page > 5 && (
56+
<Button variant="ghost" disabled>
57+
…
58+
</Button>
59+
)}
60+
<Pagination.Pages className="flex gap-2">
8661
{pages.map((p) => (
87-
<Pagination.Page
88-
key={p}
89-
aria-label={`Page ${p}`}
90-
page={p}
91-
onClick={(e) => e.preventDefault()}
92-
>
93-
<Button variant={p === page ? "default" : "outline"} size="sm">
62+
<Pagination.Page key={p} aria-label={`Page ${p}`} page={p} onClick={(e) => e.preventDefault()}>
63+
<Button variant={p === page ? 'default' : 'outline'} size="sm">
9464
{p}
9565
</Button>
9666
</Pagination.Page>
9767
))}
9868
</Pagination.Pages>
99-
{paginationRenderType === PaginationRenderType.TruncatePages &&
100-
pageCount !== 1 && (
101-
<Button variant="ghost" disabled>
102-
…
103-
</Button>
104-
)}
69+
{paginationRenderType === PaginationRenderType.TruncatePages && pageCount !== 1 && (
70+
<Button variant="ghost" disabled>
71+
…
72+
</Button>
73+
)}
10574
<Pagination.NextPage onClick={(e) => e.preventDefault()}>
10675
<TooltipProvider>
10776
<Tooltip>
10877
<TooltipTrigger asChild>
109-
<Button
110-
variant="outline"
111-
size="sm"
112-
disabled={page === pageCount}
113-
aria-label="Next"
114-
>
78+
<Button variant="outline" size="sm" disabled={page === pageCount} aria-label="Next">
11579
<Icon path={mdiChevronRight} size={1} />
11680
</Button>
11781
</TooltipTrigger>

0 commit comments

Comments
 (0)