From 4a7806e5ea9ae822b031f3e3b81022b77af6485f Mon Sep 17 00:00:00 2001 From: ducica Date: Sat, 15 Feb 2025 22:43:08 +0100 Subject: [PATCH] added toggler for all versions --- .../oarepo_ui/search/ActiveFiltersElement.jsx | 23 +++------ .../oarepo_ui/search/ClearFiltersButton.jsx | 17 +++---- .../js/oarepo_ui/search/SearchAppFacets.jsx | 17 ++++++- .../js/oarepo_ui/search/SearchAppLayout.jsx | 17 ++++--- .../search/SearchAppLayoutWithSearchbar.jsx | 12 +++-- .../search/SearchFiltersToggleElement.jsx | 48 ------------------- .../search/ShouldActiveFiltersRender.jsx | 13 +++-- .../semantic-ui/js/oarepo_ui/search/index.js | 1 - .../semantic-ui/js/oarepo_ui/search/util.js | 4 +- .../assets/semantic-ui/js/oarepo_ui/util.js | 3 ++ .../themes/default/views/card.overrides | 13 +++-- 11 files changed, 67 insertions(+), 101 deletions(-) delete mode 100644 oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchFiltersToggleElement.jsx diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ActiveFiltersElement.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ActiveFiltersElement.jsx index 8e77686f..f43ff01d 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ActiveFiltersElement.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ActiveFiltersElement.jsx @@ -5,7 +5,6 @@ import _map from "lodash/map"; import { Label, Icon, Grid } from "semantic-ui-react"; import { withState } from "react-searchkit"; import { SearchConfigurationContext } from "@js/invenio_search_ui/components"; -import _uniq from "lodash/merge"; import { ClearFiltersButton } from "@js/oarepo_ui"; // TODO: in next iteration, rethink how handling of initialFilters/ignored filters is to be handled // in the best way @@ -34,21 +33,14 @@ const ActiveFiltersElementComponent = ({ currentResultsState: { data: { aggregations }, }, - ignoredFilters, }) => { - const searchAppContext = useContext(SearchConfigurationContext); - const { - initialQueryState: { filters: initialFilters }, - } = searchAppContext; - const allFiltersToIgnore = _uniq([ - ...initialFilters.map((f) => f[0]), - ...ignoredFilters, - ]); - - const filtersWithoutInitialFilters = filters?.filter( - (f) => !allFiltersToIgnore.includes(f[0]) + const { aggs } = useContext(SearchConfigurationContext); + const aggNames = aggs.map((agg) => agg.aggName); + const activeFilters = filters.filter((filter) => + aggNames.includes(filter[0]) ); - const groupedData = _groupBy(filtersWithoutInitialFilters, 0); + + const groupedData = _groupBy(activeFilters, 0); return ( @@ -82,7 +74,7 @@ const ActiveFiltersElementComponent = ({ })} ))} - + @@ -93,7 +85,6 @@ export const ActiveFiltersElement = withState(ActiveFiltersElementComponent); ActiveFiltersElementComponent.propTypes = { filters: PropTypes.array, - ignoredFilters: PropTypes.array, removeActiveFilter: PropTypes.func.isRequired, currentResultsState: PropTypes.shape({ data: PropTypes.shape({ diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ClearFiltersButton.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ClearFiltersButton.jsx index 698305f8..0d3a6860 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ClearFiltersButton.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ClearFiltersButton.jsx @@ -4,7 +4,6 @@ import { Button } from "semantic-ui-react"; import { i18next } from "@translations/oarepo_ui/i18next"; import PropTypes from "prop-types"; import { SearchConfigurationContext } from "@js/invenio_search_ui/components"; -import _uniq from "lodash/uniq"; // TODO: in next iteration, rethink how handling of initialFilters/ignored filters is to be handled // in the best way @@ -14,20 +13,16 @@ const ClearFiltersButtonComponent = ({ updateQueryState, currentQueryState, currentResultsState, - ignoredFilters, clearFiltersButtonClassName, ...uiProps }) => { const { filters } = currentQueryState; - const searchAppContext = useContext(SearchConfigurationContext); - const { - initialQueryState: { filters: initialFilters }, - } = searchAppContext; + const { aggs } = useContext(SearchConfigurationContext); + + const filtersToIgnore = filters + .filter((filter) => !aggs.map((agg) => agg.aggName).includes(filter[0])) + .map((filter) => filter[0]); - const allFiltersToIgnore = _uniq([ - ...initialFilters.map((f) => f[0]), - ...ignoredFilters, - ]); return ( { - const _isChecked = (userSelectionFilters) => { - const isFilterActive = - userSelectionFilters.filter((filter) => filter[0] === filterValue[0]) - .length > 0; - return isFilterActive; - }; - - const onToggleClicked = () => { - updateQueryFilters(filterValue); - }; - - const isChecked = _isChecked(userSelectionFilters); - return ( - - - {title} - - - - - - ); -}; - -SearchFiltersToggleElement.propTypes = { - title: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - filterValue: PropTypes.array.isRequired, - userSelectionFilters: PropTypes.array.isRequired, - updateQueryFilters: PropTypes.func.isRequired, -}; diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ShouldActiveFiltersRender.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ShouldActiveFiltersRender.jsx index 7ebc51ab..e8e89852 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ShouldActiveFiltersRender.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/ShouldActiveFiltersRender.jsx @@ -9,14 +9,13 @@ const ShouldActiveFiltersRenderComponent = ({ children, }) => { const { filters } = currentQueryState; - const searchAppContext = useContext(SearchConfigurationContext); - const { - initialQueryState: { filters: initialFilters }, - } = searchAppContext; + const { aggs } = useContext(SearchConfigurationContext); + const aggNames = aggs.map((agg) => agg.aggName); + const activeFiltersNumber = filters + .map((filter) => filter[0]) + .filter((filter) => aggNames.includes(filter)).length; return ( - initialFilters?.length}> - {children} - + 0}>{children} ); }; diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/index.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/index.js index 28f165ca..b90f4952 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/index.js +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/index.js @@ -11,7 +11,6 @@ export { export { SearchAppResultOptions } from "./SearchAppResultOptions"; export { SearchAppSearchbarContainer } from "./SearchAppSearchbarContainer"; export { SearchAppSort } from "./SearchAppSort"; -export { SearchFiltersToggleElement } from "./SearchFiltersToggleElement"; export { SearchAppResults } from "./SearchAppResults"; export { EmptyResultsElement } from "./EmptyResultsElement"; export { ResultsPerPageLabel } from "./ResultsPerPageLabel"; diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/util.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/util.js index 909638ee..17fb4c29 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/util.js +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/util.js @@ -16,12 +16,12 @@ import { SearchAppLayout, SearchAppResultOptions, SearchAppSearchbarContainer, - SearchFiltersToggleElement, SearchAppSort, SearchAppResults, FoldableBucketAggregationElement, } from "@js/oarepo_ui/search"; import { loadAppComponents } from "../util"; +import { RDMToggleComponent } from "@js/invenio_app_rdm/search/components"; export function parseSearchAppConfigs( configDataAttr = "invenio-search-config" @@ -66,7 +66,7 @@ export function createSearchAppsInit({ [`${overridableIdPrefix}.SearchApp.searchbarContainer`]: SearchAppSearchbarContainerWithConfig, [`${overridableIdPrefix}.SearchFilters.Toggle.element`]: - SearchFiltersToggleElement, + RDMToggleComponent, [`${overridableIdPrefix}.SearchApp.sort`]: SearchAppSort, [`${overridableIdPrefix}.SearchApp.results`]: SearchAppResults, }; diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/util.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/util.js index 9939ff35..16041e60 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/util.js +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/util.js @@ -8,6 +8,7 @@ import * as Yup from "yup"; import { i18next } from "@translations/oarepo_ui/i18next"; import { format } from "date-fns"; import axios from "axios"; +import { overrideStore } from "react-overridable"; export const getInputFromDOM = (elementName) => { const element = document.getElementsByName(elementName); @@ -126,6 +127,8 @@ export async function loadAppComponents({ ...resourceConfigComponents, ...componentOverrides, ...templateComponents, + // make it possible to override from invenio.cfg as intermediary step, until this is decomissioned + ...overrideStore.getAll(), }; return loadComponents(overridableIdPrefix, components); diff --git a/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/views/card.overrides b/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/views/card.overrides index 5465f844..f5d751fb 100644 --- a/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/views/card.overrides +++ b/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/views/card.overrides @@ -1,4 +1,11 @@ -.ui.card.foldable.facet { - width: 100%; - padding-right: 1rem; +.ui.card { + &.foldable.facet { + width: 100%; + padding-right: 1rem; + } + &.borderless.facet { + .content { + border-top: none; + } + } }