Merge pull request #6 from oarepo/stojanovic/ep-86-use-invenio-compon…

…ent-for-is_open-facet-toggler Stojanovic/ep 86 use invenio component for is open facet toggler
oarepo · Apr 5, 2024 · c311548 · c311548
2 parents ec8e882 + 0bb458b
commit c311548
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 141 deletions.
diff --git a/...rd_components/semantic-ui/js/dashboard_components/search/FacetsButtonGroupNameToggler.jsx b/...rd_components/semantic-ui/js/dashboard_components/search/FacetsButtonGroupNameToggler.jsx
@@ -1,6 +1,5 @@
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
-import { i18next } from "@translations/oarepo_dashboard";
 import { Button } from "semantic-ui-react";
 import { withState } from "react-searchkit";
 import { SearchConfigurationContext } from "@js/invenio_search_ui/components";
@@ -9,15 +8,13 @@ const FacetsButtonGroupNameTogglerComponent = ({
   currentResultsState,
   currentQueryState,
   updateQueryState,
-  facetNames,
-  firstFacetButtonText,
-  secondFacetButtonText,
+  toggledFilters,
   keepFiltersOnUpdate,
   ...uiProps
 }) => {
   const { initialQueryState } = useContext(SearchConfigurationContext);
   const currentFilter = currentQueryState.filters?.find((f) =>
-    facetNames.includes(f[0])
+    toggledFilters.map((f) => f.filterName).includes(f[0])
   );
   const initialQueryFacets = initialQueryState.filters?.map((f) => f[0]);
   if (!currentFilter)
@@ -40,28 +37,24 @@ const FacetsButtonGroupNameTogglerComponent = ({
             : []),
         ];
     currentQueryState.filters = currentQueryState.filters.filter(
-      (f) => !facetNames.includes(f[0])
+      (f) => !toggledFilters.map((f) => f.filterName).includes(f[0])
     );
 
     currentQueryState.filters.push([facetName, facetStatus]);
     updateQueryState(currentQueryState);
   };
   return (
-    <Button.Group size="mini" className="rel-mb-1" {...uiProps}>
-      <Button
-        onClick={() => handleFacetNameChange(facetNames[0])}
-        className="request-search-filter"
-        active={facetNames[0] === currentFilter[0]}
-      >
-        {firstFacetButtonText}
-      </Button>
-      <Button
-        onClick={() => handleFacetNameChange(facetNames[1])}
-        className="request-search-filter"
-        active={facetNames[1] === currentFilter[0]}
-      >
-        {secondFacetButtonText}
-      </Button>
+    <Button.Group className="rel-mb-1" {...uiProps}>
+      {toggledFilters.map(({ text, filterName }) => (
+        <Button
+          key={filterName}
+          className="request-search-filter"
+          onClick={() => handleFacetNameChange(filterName)}
+          active={filterName === currentFilter[0]}
+        >
+          {text}
+        </Button>
+      ))}
     </Button.Group>
   );
 };
@@ -70,14 +63,16 @@ FacetsButtonGroupNameTogglerComponent.propTypes = {
   currentQueryState: PropTypes.object.isRequired,
   updateQueryState: PropTypes.func.isRequired,
   currentResultsState: PropTypes.object.isRequired,
-  facetNames: PropTypes.array.isRequired,
-  firstFacetButtonText: PropTypes.string,
-  secondFacetButtonText: PropTypes.string,
+  toggledFilters: PropTypes.arrayOf(
+    PropTypes.shape({
+      filterName: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+    })
+  ).isRequired,
   keepFiltersOnUpdate: PropTypes.bool,
 };
+
 FacetsButtonGroupNameTogglerComponent.defaultProps = {
-  firstFacetButtonText: i18next.t("My"),
-  secondFacetButtonText: i18next.t("Others"),
   keepFiltersOnUpdate: true,
 };
 export const FacetsButtonGroupNameToggler = withState(

diff --git a/...d_components/semantic-ui/js/dashboard_components/search/FacetsButtonGroupValueToggler.jsx b/...d_components/semantic-ui/js/dashboard_components/search/FacetsButtonGroupValueToggler.jsx
diff --git a/...rd_components/semantic-ui/js/dashboard_components/search/UserDashboardSearchAppLayout.jsx b/...rd_components/semantic-ui/js/dashboard_components/search/UserDashboardSearchAppLayout.jsx
@@ -17,7 +17,11 @@ import { SearchBar, ActiveFilters } from "react-searchkit";
 import { GridResponsiveSidebarColumn } from "react-invenio-forms";
 import { Grid, Button, Container } from "semantic-ui-react";
 import PropTypes from "prop-types";
-import { SearchAppFacets, ClearFiltersButton } from "@js/oarepo_ui";
+import {
+  SearchAppFacets,
+  ClearFiltersButton,
+  ShouldActiveFiltersRender,
+} from "@js/oarepo_ui";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Overridable from "react-overridable";
 
@@ -47,14 +51,18 @@ export const UserDashboardSearchAppLayoutHOC = ({
             </GridResponsiveSidebarColumn>
             <Grid.Column computer={13} mobile={16} tablet={16}>
               <Grid columns="equal">
-                <Grid.Row only="computer" verticalAlign="middle">
-                  <Grid.Column>
-                    <ActiveFilters />
-                    <Overridable id={buildUID("ClearFiltersButton.container")}>
-                      <ClearFiltersButton />
-                    </Overridable>
-                  </Grid.Column>
-                </Grid.Row>
+                <ShouldActiveFiltersRender>
+                  <Grid.Row only="computer" verticalAlign="middle">
+                    <Grid.Column>
+                      <ActiveFilters />
+                      <Overridable
+                        id={buildUID("ClearFiltersButton.container")}
+                      >
+                        <ClearFiltersButton />
+                      </Overridable>
+                    </Grid.Column>
+                  </Grid.Row>
+                </ShouldActiveFiltersRender>
                 <Grid.Row only="computer" verticalAlign="middle">
                   <Grid.Column>
                     <SearchBar placeholder={placeholder} className="rel-pl-1" />
@@ -87,13 +95,17 @@ export const UserDashboardSearchAppLayoutHOC = ({
                     {mobileOnlyExtraRow()}
                   </Grid.Row>
                 )}
-                <Grid.Row only="mobile tablet">
-                  <Grid.Column>
-                    <Overridable id={buildUID("ClearFiltersButton.container")}>
-                      <ClearFiltersButton />
-                    </Overridable>
-                  </Grid.Column>
-                </Grid.Row>
+                <ShouldActiveFiltersRender>
+                  <Grid.Row only="mobile tablet">
+                    <Grid.Column>
+                      <Overridable
+                        id={buildUID("ClearFiltersButton.container")}
+                      >
+                        <ClearFiltersButton />
+                      </Overridable>
+                    </Grid.Column>
+                  </Grid.Row>
+                </ShouldActiveFiltersRender>
                 <Grid.Row>
                   <Grid.Column mobile={16} tablet={16} computer={16}>
                     <SearchAppResultsPane

diff --git a/oarepo_dashboard/ui/dashboard_components/semantic-ui/js/dashboard_components/search/index.js b/oarepo_dashboard/ui/dashboard_components/semantic-ui/js/dashboard_components/search/index.js
@@ -1,4 +1,3 @@
 export * from "./UserDashboardSearchAppLayout";
 export * from "./UserDashboardSearchAppResultView";
-export * from "./FacetsButtonGroupValueToggler";
 export * from "./FacetsButtonGroupNameToggler";
diff --git a/...ard_components/semantic-ui/less/oarepo_dashboard/themes/default/elements/button.overrides b/...ard_components/semantic-ui/less/oarepo_dashboard/themes/default/elements/button.overrides
@@ -1,5 +1,8 @@
-.ui.active.button {
+.ui.button {
   &.request-search-filter {
-    cursor: default;
+    &.active {
+      cursor: default;
+    }
+    font-size: @mini;
   }
 }
diff --git a/...ashboard_components/semantic-ui/less/oarepo_dashboard/themes/default/views/item.overrides b/...ashboard_components/semantic-ui/less/oarepo_dashboard/themes/default/views/item.overrides
@@ -9,3 +9,9 @@
     border-top: none !important;
   }
 }
+
+// to override strange behavior of SUI where even though header is not a link
+// you get link color on hover of the item
+.ui.link.items > .item:hover .content .header {
+  color: inherit;
+}
diff --git a/...oard_requests/semantic-ui/js/dashboard_requests/search/ComputerTabletRequestsListItem.jsx b/...oard_requests/semantic-ui/js/dashboard_requests/search/ComputerTabletRequestsListItem.jsx
@@ -30,7 +30,7 @@ export const ComputerTabletRequestsListItem = ({
       key={result.id}
       className="computer tablet only rel-p-1 rel-mb-1 result-list-item request"
     >
-      <div className="status-icon mr-10 mt-5">
+      <div className="status-icon mr-10">
         <Item.Content verticalAlign="top">
           <Item.Extra>
             <RequestTypeIcon type={result.type} />
@@ -41,7 +41,7 @@ export const ComputerTabletRequestsListItem = ({
         <Item.Extra>
           {result.type && <RequestTypeLabel type={result.type} />}
           {result.status && result.is_closed && (
-            <RequestStatusLabel status={result.status} />
+            <RequestStatusLabel status={result.status_code} />
           )}
         </Item.Extra>
         {result?.topic?.status === "removed" ? (

diff --git a/...ui/dashboard_requests/semantic-ui/js/dashboard_requests/search/MobileRequestsListItem.jsx b/...ui/dashboard_requests/semantic-ui/js/dashboard_requests/search/MobileRequestsListItem.jsx
@@ -34,7 +34,7 @@ export const MobileRequestsListItem = ({
         <Item.Extra>
           {result.type && <RequestTypeLabel type={result.type} />}
           {result.status && result.is_closed && (
-            <RequestStatusLabel status={result.status} />
+            <RequestStatusLabel status={result.status_code} />
           )}
         </Item.Extra>
         {result?.topic?.status === "removed" ? (

diff --git a/oarepo_dashboard/ui/dashboard_requests/semantic-ui/js/dashboard_requests/search/index.js b/oarepo_dashboard/ui/dashboard_requests/semantic-ui/js/dashboard_requests/search/index.js
@@ -9,13 +9,15 @@ import {
   ClearFiltersButton,
 } from "@js/oarepo_ui";
 import { withState } from "react-searchkit";
-import { RequestsEmptyResultsWithState } from "@js/invenio_requests/search";
+import {
+  RequestsEmptyResultsWithState,
+  RequestStatusFilter,
+} from "@js/invenio_requests/search";
 import { defaultContribComponents } from "@js/invenio_requests/contrib";
 import { PropTypes } from "prop-types";
 import {
   UserDashboardSearchAppLayoutHOC,
   UserDashboardSearchAppResultView,
-  FacetsButtonGroupValueToggler,
   FacetsButtonGroupNameToggler,
 } from "@js/dashboard_components";
 import { i18next } from "@translations/oarepo_dashboard";
@@ -48,15 +50,27 @@ RequestsResultsItemTemplateDashboard.propTypes = {
 export const FacetButtons = () => (
   <React.Fragment>
     <Grid.Column only="computer" textAlign="right">
-      <FacetsButtonGroupValueToggler facetName="is_open" />
+      <RequestStatusFilter keepFiltersOnUpdate />
       <span className="rel-ml-2"></span>
-      <FacetsButtonGroupNameToggler facetNames={["mine", "assigned"]} />
+      <FacetsButtonGroupNameToggler
+        basic
+        toggledFilters={[
+          { text: i18next.t("My"), filterName: "mine" },
+          { text: i18next.t("Others"), filterName: "assigned" },
+        ]}
+      />
     </Grid.Column>
     <Grid.Column only="mobile tablet" textAlign="left">
-      <FacetsButtonGroupValueToggler facetName="is_open" />
+      <RequestStatusFilter keepFiltersOnUpdate />
     </Grid.Column>
     <Grid.Column only="mobile tablet" textAlign="right">
-      <FacetsButtonGroupNameToggler facetNames={["mine", "assigned"]} />
+      <FacetsButtonGroupNameToggler
+        basic
+        toggledFilters={[
+          { text: i18next.t("My"), filterName: "mine" },
+          { text: i18next.t("Others"), filterName: "assigned" },
+        ]}
+      />
     </Grid.Column>
   </React.Fragment>
 );

diff --git a/...oard/ui/dashboard_requests/semantic-ui/js/dashboard_requests/search/labels/TypeLabels.jsx b/...oard/ui/dashboard_requests/semantic-ui/js/dashboard_requests/search/labels/TypeLabels.jsx
@@ -3,19 +3,19 @@ import { Label } from "semantic-ui-react";
 import { i18next } from "@translations/oarepo_dashboard";
 
 export const LabelTypeEditRecord = (props) => (
-  <Label horizontal className="primary" size="small">
+  <Label horizontal size="small">
     {i18next.t("Edit record")}
   </Label>
 );
 
 export const LabelTypeDeleteRecord = (props) => (
-  <Label horizontal className="primary" size="small">
+  <Label horizontal size="small">
     {i18next.t("Delete record")}
   </Label>
 );
 
 export const LabelTypePublishRecord = (props) => (
-  <Label horizontal className="primary" size="small">
+  <Label horizontal size="small">
     {i18next.t("Publish record")}
   </Label>
 );
diff --git a/setup.cfg b/setup.cfg
@@ -1,6 +1,6 @@
 [metadata]
 name = oarepo-dashboard
-version = 1.0.3
+version = 1.0.4
 description = Support for user dashboard (records, communities, requests)
 authors = Mirek Simek <[email protected]>
 readme = README.md
@@ -46,6 +46,8 @@ invenio_assets.webpack =
     oarepo_dashboard_requests_ui_theme = oarepo_dashboard.ui.dashboard_requests.webpack:theme
     oarepo_dashboard_communities_ui_theme = oarepo_dashboard.ui.dashboard_communities.webpack:theme
     oarepo_dashboard_components_ui_theme = oarepo_dashboard.ui.dashboard_components.webpack:theme
+invenio_i18n.translations =
+    oarepo_dashboard_messages = oarepo_dashboard.i18n