From 5dd22f2da1dfa648973fd283668a49ed2cedbf3d Mon Sep 17 00:00:00 2001
From: ducica <dusanstojanovic256@gmail.com>
Date: Sun, 22 Oct 2023 22:31:54 +0200
Subject: [PATCH] app layour + active filters

---
 .../search/SearchAppActiveFilters.jsx         | 57 +++++++++++++++++++
 .../js/oarepo_ui/search/SearchAppFacets.jsx   |  5 --
 .../js/oarepo_ui/search/SearchAppLayout.jsx   | 37 ++++++------
 .../search/SearchAppResultOptions.jsx         |  1 -
 .../semantic-ui/js/oarepo_ui/search/index.js  |  2 +-
 5 files changed, 79 insertions(+), 23 deletions(-)
 create mode 100644 oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppActiveFilters.jsx

diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppActiveFilters.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppActiveFilters.jsx
new file mode 100644
index 00000000..dbcc525b
--- /dev/null
+++ b/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,
+};
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
index 9e086bc9..3bce9f08 100644
--- 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,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} />
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
index 68d30502..38049d16 100644
--- 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
@@ -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)}
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultOptions.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultOptions.jsx
index 49b8bb44..f146277c 100644
--- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultOptions.jsx
+++ b/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";
 
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 38787701..d4a8c0fd 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
@@ -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";