Customizing Filters Display in the Search Information Block
- Cedric
- Romaric Pighetti
- Guylaine BASSETTE
Valid from Datafari 6.2 (DatafariUI v2)
The search information block consists in the information traditionally shown above the search results. It provides several insights about the current search such as the terms of the search, the number of results and the filters currently in use. It is shown with a red bar on the side below:
For example, the custom date range that is part of the creation date facet has a customized rendering. If we want to avoid such rendering:
And have this:
All is done in the SearchInformation component (https://gitlab.datafari.com/datafari-community/datafariui-v2/-/blob/main/src/app/Components/Widgets/SearchInformation/SearchInformation.jsx). For the date, it is related to a Query Facet Field, so the formatting is required in the renderQueryFacetSection function:
/**
* Renders the query facet section.
*
* @param {string} id - The ID of the query facet.
* @param {string} title - The title of the section.
* @returns {JSX.Element|null} The rendered query facet section or null if no filters.
*/
const renderQueryFacetSection = (id, title) => {
const filterValue = queryFacetFilters[id];
if (!filterValue) {
return null;
}
return (
<div key={id} className={styles.filters}>
<p className={styles.titleFilter}>{t(`userPreferences.options.${title}`)}: </p>
<p className={styles.itemFilter}>
{formatDateFilter(filterValue)}
<Button onClick={() => handleClearQueryFacetFilter(id, filterValue)}>
<img src={closeIcon} alt="" />
</Button>
</p>
</div>
);
};The filterValue is the “last_modified:[2024-09-30T22:00:00Z TO 2024-10-28T23:00:00Z]” to be formatted. And formatDateFilter is the function that formats the value as follow:
/**
* Formats a filter string with a date range into a human-readable format.
*
* @param {string} filterStr - The filter string in the format "field:[startDate TO endDate]".
* Example: "creation_date:[2024-10-07T22:00:00Z TO 2024-10-23T22:00:00Z]"
* @returns {string} The formatted filter string in the format "field: From DD/MM/YYYY To DD/MM/YYYY"
* using French locale (fr-FR) for the date format.
* Example: "creation_date: From 07/10/2024 To 23/10/2024"
*/
function formatDateFilter(filterStr) {
const match = filterStr.match(/(last_modified|creation_date):\\[(.*?) TO (.*?)\\]/);
if (!match) return filterStr;
const [, filterType, startDate, endDate] = match;
// Проверяем, что startDate и endDate валидные даты
const start = isValidDate(new Date(startDate))
? new Date(startDate).toLocaleDateString('fr-FR')
: '*';
const end = isValidDate(new Date(endDate))
? new Date(endDate).toLocaleDateString('fr-FR')
: '*';
return `${filterType}: From ${start} To ${end}`;
}The formatting function uses regular expression to identify the filter value type and extract the useful data to be used for formatting.
👉 You can modify this example to add other filters using the matching found or not to go to another format function you added. The most important is to locate where to inject your new code. For Query Facet it is in renderQueryFacetSection and for Field Facet and HierarchicalFacet it is in renderFieldFacetSection
/**
* Renders the field facet section.
*
* @param {string} title - The title of the section.
* @param {string} field - The field of the facet.
* @returns {JSX.Element|null} The rendered field facet section or null if no filters.
*/
const renderFieldFacetSection = (title, field) => {
return (
fieldFacetFilters[field] &&
fieldFacetFilters[field].length > 0 && (
<div key={field} className={styles.filters}>
<p className={styles.titleFilter}>{t(`userPreferences.options.${title}`)}: </p>
{fieldFacetFilters[field].map((value) => (
<p key={value} className={styles.itemFilter}>
{value}
<Button onClick={() => handleClearFieldFacetFilter(field, value)}>
<img src={closeIcon} alt="" />
</Button>
</p>
))}
</div>
)
);
};
Valid from Datafari 5.2 to 6.1 (DatafariUI v1)