app layour + active filters

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppActiveFilters.jsx

@@ -0,0 +1,57 @@
+import PropTypes from "prop-types";
+import React from "react";
+import _groupBy from "lodash/groupBy";
+import _map from "lodash/map";
+import { Label, Icon } from "semantic-ui-react";
+import { withState } from "react-searchkit";
+
+const SearchAppActiveFiltersComponent = ({
+  filters,
+  removeActiveFilter,
+  getLabel,
+  currentResultsState: {
+    data: { aggregations },
+  },
+}) => {
+  const groupedData = _groupBy(filters, 0);
+
+  return (
+    <>
+      {_map(groupedData, (filters, key) => (
+        <Label.Group key={key}>
+          <Label pointing="right">{aggregations[key]?.label}</Label>
+          {filters.map((filter, index) => {
+            const { label, activeFilter } = getLabel(filter);
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              <Label
+                color="blue"
+                key={activeFilter}
+                onClick={() => removeActiveFilter(activeFilter)}
+              >
+                <Icon name="filter" />
+                {label}
+                <Icon name="delete" />
+              </Label>
+            );
+          })}
+        </Label.Group>
+      ))}
+    </>
+  );
+};
+
+export const SearchAppActiveFilters = withState(
+  SearchAppActiveFiltersComponent
+);
+
+SearchAppActiveFiltersComponent.propTypes = {
+  filters: PropTypes.array,
+  removeActiveFilter: PropTypes.func.isRequired,
+  getLabel: PropTypes.func.isRequired,
+  currentResultsState: PropTypes.shape({
+    data: PropTypes.shape({
+      aggregations: PropTypes.object,
+    }).isRequired,
+  }).isRequired,
+};

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppFacets.jsx

@@ -1,14 +1,9 @@
 import React from "react";
 import { BucketAggregation } from "react-searchkit";
-import { i18next } from "@translations/oarepo_ui/i18next";
 
 export const SearchAppFacets = ({ aggs, appName }) => {
   return (
     <div className="facets-container">
-      <div className="facets-header">
-        <h2>{i18next.t("Filters")}</h2>
-        <div className="ui divider"></div>
-      </div>
       <div className="facet-list">
         {aggs.map((agg) => (
           <BucketAggregation key={agg.aggName} title={agg.title} agg={agg} />

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppLayout.jsx

@@ -73,13 +73,20 @@ export const SearchAppLayout = ({ config, hasButtonSidebar }) => {
   const resultsSortLayoutFacets = {
     mobile: 14,
     tablet: 14,
-    computer: 12,
-    largeScreen: 12,
-    widescreen: 12,
+    computer: 16,
+    largeScreen: 16,
+    widescreen: 16,
+  };
+
+  const resultsSortLayoutNoFacets = {
+    mobile: 16,
+    tablet: 16,
+    computer: 16,
+    largeScreen: 16,
+    widescreen: 16,
   };
 
   const resultsPaneLayoutNoFacets = resultsPaneLayoutFacets;
-  const resultsSortLayoutNoFacets = resultsSortLayoutFacets;
 
   // make list full width if no facets available
   const resultsPaneLayout = facetsAvailable
@@ -104,14 +111,10 @@ export const SearchAppLayout = ({ config, hasButtonSidebar }) => {
       <Grid
         columns={columnsAmount}
         relaxed
-        celled="internally"
         className="search-app rel-mt-2"
+        padded
       >
-        <Grid.Row
-          textAlign="left"
-          columns={columnsAmount}
-          className="result-options"
-        >
+        <Grid.Row className="result-options">
           {facetsAvailable && (
             <>
               <Grid.Column
@@ -129,15 +132,17 @@ export const SearchAppLayout = ({ config, hasButtonSidebar }) => {
                   aria-label={i18next.t("Filter results")}
                 />
               </Grid.Column>
-              <Grid.Column only="computer" width={4}>
-                <ActiveFilters />
-              </Grid.Column>
             </>
           )}
           <Grid.Column {...resultSortLayout}>
             <ResultOptionsWithState />
           </Grid.Column>
         </Grid.Row>
+        <Grid.Row>
+          <Grid.Column only="computer" width={16}>
+            <ActiveFilters />
+          </Grid.Column>
+        </Grid.Row>
         <Grid.Row columns={columnsAmount}>
           {facetsAvailable && (
             <GridResponsiveSidebarColumn
@@ -167,9 +172,9 @@ export const SearchAppLayout = ({ config, hasButtonSidebar }) => {
             <Grid.Column
               mobile={16}
               tablet={16}
-              computer={3}
-              largeScreen={3}
-              widescreen={3}
+              computer={4}
+              largeScreen={4}
+              widescreen={4}
             >
               <Overridable
                 id={buildUID("SearchApp.buttonSidebarContainer", "", appName)}

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultOptions.jsx

@@ -4,7 +4,6 @@ import { PropTypes } from "prop-types";
 import { Grid } from "semantic-ui-react";
 import { LayoutSwitcher } from "react-searchkit";
 import { ResultCountWithState } from "./ResultCount";
-import { i18next } from "@translations/oarepo_ui/i18next";
 import { SearchConfigurationContext } from "@js/invenio_search_ui/components";
 import { SearchAppSort } from "./SearchAppSort";
 

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/index.js

@@ -5,7 +5,7 @@ export { BucketAggregationValuesElement } from "./BucketAggregationValuesElement
 
 export { ResultCountWithState, ResultCount, CountElement } from "./ResultCount";
 export { ErrorElement } from "./ErrorElement";
-
+export { SearchAppActiveFilters } from "./SearchAppActiveFilters";
 export { SearchAppFacets } from "./SearchAppFacets";
 export { SearchAppLayout } from "./SearchAppLayout";
 export { SearchAppResultOptions } from "./SearchAppResultOptions";