Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DIGG-446: Fixing special filter checkboxes and adding access fee to organisation search #535

Merged
merged 2 commits into from
Dec 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
390 changes: 56 additions & 334 deletions features/search/search-filters/index.tsx

Large diffs are not rendered by default.

203 changes: 111 additions & 92 deletions features/search/search-filters/search-active-filters/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,48 @@ import { SearchContextData } from "@/providers/search-provider";
import { SettingsContext } from "@/providers/settings-provider";
import { ESRdfType } from "@/types/entrystore-core";
import { SearchFacetValue } from "@/types/search";
import { clearCurrentScrollPos } from "@/utilities/scroll-helper";

import { SearchMode } from "../index";

interface SearchActiveFiltersProps {
search: SearchContextData;
query: string;
searchMode: SearchMode;
activeCheckboxFilters: Array<{
id: string;
label: string;
facetValue?: SearchFacetValue;
isSpecialFilter?: boolean;
}>;
}

export function SearchActiveFilters({
search,
query,
searchMode,
activeCheckboxFilters,
}: SearchActiveFiltersProps) {
const { t } = useTranslation();
const { iconSize } = useContext(SettingsContext);

const clearCurrentScrollPos = () => {
if (typeof localStorage != "undefined" && typeof location != "undefined") {
localStorage.setItem(`ScrollposY_${location.search}`, "0");
}
};
// Create an array of active special search filters
const activecustomSearchFilters = Object.entries(search.allFacets || {})
.filter(
// eslint-disable-next-line @typescript-eslint/no-unused-vars
([_, facet]) =>
facet.customSearch &&
facet.customSearch.length === search.request.esRdfTypes?.length &&
facet.customSearch.every(
(type) => search.request.esRdfTypes?.includes(type),
),
)
.map(([key, facet]) => ({
facet: key,
title: facet.title,
customSearch: facet.customSearch,
}));

const hasActiveFilters = () => {
return (
(search.request.facetValues && search.request.facetValues.length > 0) ||
activeCheckboxFilters.length > 0
);
};
const hasActiveFilters =
(search.request.facetValues && search.request.facetValues.length > 0) ||
activecustomSearchFilters.length > 0;

if (!hasActiveFilters()) return null;
if (!hasActiveFilters) {
return null;
}

return (
<div className="mt-lg flex flex-col gap-md md:flex-row md:items-center">
Expand All @@ -54,95 +58,110 @@ export function SearchActiveFilters({
</span>
<div className="flex flex-row flex-wrap gap-md md:items-center">
{search.request.facetValues?.map(
(facetValue: SearchFacetValue, index: number) =>
facetValue.facet !==
"http://data.europa.eu/r5r/applicableLegislation" &&
facetValue.facet !== "http://purl.org/dc/terms/subject" &&
facetValue.facet !== "http://purl.org/dc/terms/conformsTo" && (
<Button
variant="filter"
size="xs"
key={index}
label={facetValue.title || facetValue.resource}
aria-label={`${t("common|clear-filters")} ${
facetValue.title || facetValue.resource
}`}
icon={CrossIcon}
iconPosition="right"
className="w-fit justify-between py-xs text-left font-strong md:py-[2px]"
onClick={() => {
clearCurrentScrollPos();
search.toggleFacet(facetValue).then(() => {
search.doSearch();
});
}}
/>
),
(facetValue: SearchFacetValue, index: number) => {
if (!facetValue.customFilter && !facetValue.customSearch) {
return (
<Button
variant="filter"
size="xs"
key={index}
label={facetValue.title || facetValue.resource}
aria-label={`${t("common|clear-filters")} ${
facetValue.title || facetValue.resource
}`}
icon={CrossIcon}
iconPosition="right"
className="w-fit justify-between py-xs text-left font-strong md:py-[2px]"
onClick={() => {
clearCurrentScrollPos();
search.toggleFacet(facetValue).then(() => {
search.doSearch();
});
}}
/>
);
} else if (facetValue.customFilter) {
return (
<Button
variant="filter"
size="xs"
key={index}
label={t(`resources|${facetValue.facet}`)}
aria-label={`${t("common|clear-filters")} ${t(
`resources|${facetValue.facet}`,
)}`}
icon={CrossIcon}
iconPosition="right"
className="w-fit justify-between py-xs text-left font-strong md:py-[2px]"
onClick={() => {
clearCurrentScrollPos();
search.toggleFacet(facetValue).then(() => {
search.doSearch();
});
}}
/>
);
}
},
)}

{activeCheckboxFilters.map((filter) => (
{activecustomSearchFilters.map((filter, index) => (
<Button
key={filter.id}
variant="filter"
size="xs"
label={filter.label}
aria-label={`${t("common|clear-filters")} ${filter.label}`}
key={`special-search-${index}`}
label={t(`resources|${filter.facet}`)}
aria-label={`${t("common|clear-filters")} ${t(
`resources|${filter.facet}`,
)}`}
icon={CrossIcon}
iconPosition="right"
className="w-fit justify-between py-xs text-left font-strong md:py-[2px]"
onClick={() => {
clearCurrentScrollPos();
if (filter.isSpecialFilter) {
search
.set({
esRdfTypes: [
ESRdfType.dataset,
ESRdfType.data_service,
ESRdfType.dataset_series,
],
query: query,
})
.then(() => search.doSearch());
} else if (filter.facetValue) {
search.toggleFacet(filter.facetValue).then(() => {
search.doSearch();
});
}
}}
/>
))}
</div>

{((search.request.facetValues &&
search.request.facetValues.length >= 2) ||
activeCheckboxFilters.length >= 2) && (
<div className="mt-lg block whitespace-nowrap md:mt-none">
<Button
variant="plain"
size="xs"
icon={TrashIcon}
iconPosition="left"
onClick={() => {
clearCurrentScrollPos();
search
.set({
facetValues: [],
esRdfTypes:
searchMode === "datasets"
? [
ESRdfType.dataset,
ESRdfType.data_service,
ESRdfType.dataset_series,
]
: search.request.esRdfTypes,
esRdfTypes: [
ESRdfType.dataset,
ESRdfType.data_service,
ESRdfType.dataset_series,
],
query: query,
})
.then(() => search.doSearch());
}}
label={t("common|clear-filters")}
iconSize={iconSize * 1.5}
/>
</div>
)}
))}

{search.request.facetValues &&
search.request.facetValues.length >= 2 && (
<Button
variant="plain"
size="xs"
icon={TrashIcon}
iconPosition="left"
onClick={() => {
clearCurrentScrollPos();
search
.set({
facetValues: [],
esRdfTypes:
searchMode === "datasets"
? [
ESRdfType.dataset,
ESRdfType.data_service,
ESRdfType.dataset_series,
]
: search.request.esRdfTypes,
})
.then(() => search.doSearch());
}}
label={t("common|clear-filters")}
className="whitespace-nowrap"
iconSize={iconSize * 1.5}
/>
)}
</div>
</div>
);
}
7 changes: 1 addition & 6 deletions features/search/search-form/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Dispatch, SetStateAction, FC } from "react";
import { SearchMode } from "@/features/search/search-filters";
import { SearchInput } from "@/features/search/search-input";
import { SearchContextData } from "@/providers/search-provider";
import { clearCurrentScrollPos } from "@/utilities/scroll-helper";

interface SearchFormProps {
search: SearchContextData;
Expand All @@ -28,12 +29,6 @@ export const SearchForm: FC<SearchFormProps> = ({

const placeholder = t(`pages|${searchMode}$search`);

const clearCurrentScrollPos = () => {
if (typeof localStorage != "undefined" && typeof location != "undefined") {
localStorage.setItem(`ScrollposY_${location.search}`, "0");
}
};

const submitSearch = (newQuery: string) => {
search
.set({
Expand Down
27 changes: 1 addition & 26 deletions features/search/search-hit/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import Link from "next/link";
import useTranslation from "next-translate/useTranslation";
import { FC } from "react";

import { Badge } from "@/components/badge";
import { FileFormatBadge } from "@/components/file-format-badge";
import { Heading } from "@/components/typography/heading";
import { SearchHit as SearchHitType } from "@/types/search";
Expand All @@ -13,34 +11,17 @@ interface SearchHitProps {
onLinkClick?: () => void;
}

const HVD_URI = "http://data.europa.eu/r5r/applicableLegislation";
const NATIONAL_URI = "http://purl.org/dc/terms/subject";

function isHVD(dataset: object) {
return Object.values(dataset).some((ds) =>
Object.prototype.hasOwnProperty.call(ds, HVD_URI),
);
}

function isNational(dataset: object) {
return Object.values(dataset).some((ds) =>
Object.prototype.hasOwnProperty.call(ds, NATIONAL_URI),
);
}

export const SearchHit: FC<SearchHitProps> = ({
hit,
isCompact,
onLinkClick,
}) => {
const { t } = useTranslation();

return (
<li className="group relative max-w-lg space-y-sm">
<Link
href={hit.url}
onClick={onLinkClick}
className="focus--none before:focus--outline before:focus--out before:focus--primary block no-underline before:absolute before:inset-none"
className="search-result-link focus--none before:focus--outline before:focus--out before:focus--primary block no-underline before:absolute before:inset-none"
>
<Heading
level={3}
Expand Down Expand Up @@ -97,12 +78,6 @@ export const SearchHit: FC<SearchHitProps> = ({
{hit.metadata?.format_literal?.map((m: string, index: number) => (
<FileFormatBadge key={index} badgeName={m} />
))}
{hit.esEntry && isHVD(hit.esEntry._metadata._graph) && (
<Badge text={t("common|high-value-dataset")} />
)}
{hit.esEntry && isNational(hit.esEntry._metadata._graph) && (
<Badge text={t("common|national-dataset")} />
)}
</div>
</div>
</li>
Expand Down
2 changes: 1 addition & 1 deletion features/search/search-page-selector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export function SearchPageSelector({ query }: SearchTabsProps) {
href={`${path}?q=${query || ""}&f=`}
label={t(translationKey)}
locale={lang}
className={`button--large focus--in whitespace-nowrap rounded-t-md ${
className={`search-page-selector-button button--large focus--in whitespace-nowrap rounded-t-md ${
pathname === path ? "active" : ""
}`}
role="tab"
Expand Down
19 changes: 4 additions & 15 deletions features/search/search-page/search-page-content/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ import { SearchHitFragment } from "@/graphql/__generated__/operations";
import { SettingsContext } from "@/providers/settings-provider";
import { SearchHit, SearchRequest, SearchResult } from "@/types/search";
import { linkBase, querySearch } from "@/utilities";
import {
clearCurrentScrollPos,
saveCurrentScrollPos,
} from "@/utilities/scroll-helper";

interface SearchProps {
activeLink?: string;
Expand Down Expand Up @@ -66,21 +70,6 @@ export const SearchPageContent: FC<SearchProps> = () => {
setLoading(false);
};

const clearCurrentScrollPos = () => {
if (typeof localStorage != "undefined" && typeof location != "undefined") {
localStorage.setItem(`ScrollposY_${location.search}`, "0");
}
};

const saveCurrentScrollPos = () => {
if (typeof localStorage != "undefined" && typeof location != "undefined") {
localStorage.setItem(
`ScrollposY_${location.search}`,
JSON.stringify(window.scrollY),
);
}
};

const highlightWords = (text: string) => {
if (!text) return;

Expand Down
Loading
Loading