added toggler for all versions

oarepo · Feb 15, 2025 · 4a7806e · 4a7806e
1 parent 85221c3
commit 4a7806e
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 101 deletions.
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
@@ -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 (
     <Grid>
       <Grid.Column only="computer">
@@ -82,7 +74,7 @@ const ActiveFiltersElementComponent = ({
               })}
             </Label.Group>
           ))}
-          <ClearFiltersButton ignoredFilters={ignoredFilters} />
+          <ClearFiltersButton />
         </div>
       </Grid.Column>
     </Grid>
@@ -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
@@ -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 (
     <Button
       className={clearFiltersButtonClassName}
@@ -36,7 +31,7 @@ const ClearFiltersButtonComponent = ({
       onClick={() =>
         updateQueryState({
           ...currentQueryState,
-          filters: filters.filter((f) => allFiltersToIgnore.includes(f[0])),
+          filters: filters.filter((f) => filtersToIgnore.includes(f[0])),
         })
       }
       icon="delete"

diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppFacets.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppFacets.jsx
@@ -1,11 +1,19 @@
 import React from "react";
-import { BucketAggregation } from "react-searchkit";
+import { BucketAggregation, Toggle } from "react-searchkit";
 import PropTypes from "prop-types";
+import { i18next } from "@translations/oarepo_ui/i18next";
 
-export const SearchAppFacets = ({ aggs, appName }) => {
+export const SearchAppFacets = ({ aggs, appName, allVersionsToggle }) => {
   return (
     <div className="facets-container">
       <div className="facet-list">
+        {allVersionsToggle && (
+          <Toggle
+            title={i18next.t("Versions")}
+            label={i18next.t("View all versions")}
+            filterValue={["allversions", "true"]}
+          />
+        )}
         {aggs.map((agg) => (
           <BucketAggregation key={agg.aggName} title={agg.title} agg={agg} />
         ))}
@@ -17,4 +25,9 @@ export const SearchAppFacets = ({ aggs, appName }) => {
 SearchAppFacets.propTypes = {
   aggs: PropTypes.array.isRequired,
   appName: PropTypes.string.isRequired,
+  allVersionsToggle: PropTypes.bool,
+};
+
+SearchAppFacets.defaultProps = {
+  allVersionsToggle: false,
 };
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppLayout.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppLayout.jsx
@@ -23,14 +23,17 @@ export const ActiveFiltersCountFloatingLabelComponent = ({
   className,
 }) => {
   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 (
-    <Label floating circular size="mini" className={className}>
-      {filters.length - initialFilters.length}
-    </Label>
+    activeFiltersNumber > 0 && (
+      <Label floating circular size="mini" className={className}>
+        {activeFiltersNumber}
+      </Label>
+    )
   );
 };
 

diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppLayoutWithSearchbar.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppLayoutWithSearchbar.jsx
@@ -42,7 +42,13 @@ export const SearchAppLayoutWithSearchbarHOC = ({
                 />
               </Overridable>
             </ShouldActiveFiltersRender>
-            <SearchAppFacets aggs={config.aggs} appName={appName} />
+            <Overridable
+              id={buildUID("SearchApp.facets")}
+              aggs={config.aggs}
+              appName={appName}
+            >
+              <SearchAppFacets aggs={config.aggs} appName={appName} />
+            </Overridable>
           </GridResponsiveSidebarColumn>
           <Grid.Column computer={12} mobile={16} tablet={16}>
             <Grid columns="equal">
@@ -68,9 +74,7 @@ export const SearchAppLayoutWithSearchbarHOC = ({
                   className="facets-sidebar-open-button"
                 >
                   <Icon name="filter"></Icon>
-                  <ShouldActiveFiltersRender>
-                    <ActiveFiltersCountFloatingLabel />
-                  </ShouldActiveFiltersRender>
+                  <ActiveFiltersCountFloatingLabel />
                 </Button>
               </Grid.Column>
               <Grid.Column

diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchFiltersToggleElement.jsx b/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/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 (
-    <ShouldRender condition={filters?.length > initialFilters?.length}>
-      {children}
-    </ShouldRender>
+    <ShouldRender condition={activeFiltersNumber > 0}>{children}</ShouldRender>
   );
 };
 

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
@@ -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
@@ -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
@@ -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
@@ -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;
+    }
+  }
 }