From a656b438f3b815751b6f568454f321553212147b Mon Sep 17 00:00:00 2001 From: ducica Date: Mon, 14 Oct 2024 14:33:54 +0200 Subject: [PATCH 1/4] moved app layout with searchbar to oarepo ui --- .../search/SearchAppLayoutWithSearchbar.jsx | 145 ++++++++++++++++ .../SearchAppResultViewWithSearchbar.jsx | 156 ++++++++++++++++++ .../semantic-ui/js/oarepo_ui/search/index.js | 2 + 3 files changed, 303 insertions(+) create mode 100644 oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppLayoutWithSearchbar.jsx create mode 100644 oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx 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 new file mode 100644 index 00000000..d46c3e70 --- /dev/null +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppLayoutWithSearchbar.jsx @@ -0,0 +1,145 @@ +// This file is part of InvenioRDM +// Copyright (C) 2020-2022 CERN. +// Copyright (C) 2020-2021 Northwestern University. +// Copyright (C) 2021 Graz University of Technology. +// Copyright (C) 2021 New York University. +// +// Invenio App RDM is free software; you can redistribute it and/or modify it +// under the terms of the MIT License; see LICENSE file for more details. + +import { + SearchAppResultsPane, + SearchConfigurationContext, +} from "@js/invenio_search_ui/components"; +import { i18next } from "@translations/oarepo_ui/i18next"; +import React, { useContext } from "react"; +import { SearchBar, ActiveFilters } from "react-searchkit"; +import { GridResponsiveSidebarColumn } from "react-invenio-forms"; +import { Grid, Button, Container, Icon } from "semantic-ui-react"; +import PropTypes from "prop-types"; +import { + SearchAppFacets, + ClearFiltersButton, + ShouldActiveFiltersRender, + ActiveFiltersCountFloatingLabel, +} from "@js/oarepo_ui"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import Overridable from "react-overridable"; + +const queryClient = new QueryClient(); + +export const SearchAppLayoutWithSearchbarHOC = ({ + placeholder, + extraContent, + mobileOnlyExtraRow, + appName, +}) => { + const SearchAppLayoutWithSearchbar = (props) => { + const [sidebarVisible, setSidebarVisible] = React.useState(false); + const { config } = props; + const searchAppContext = useContext(SearchConfigurationContext); + const { buildUID } = searchAppContext; + return ( + + + + setSidebarVisible(false)} + > + + + + + + + + + + + + + + + + + + + + + {extraContent && extraContent()} + + + + + + + + {extraContent && ( + + {extraContent()} + + )} + {mobileOnlyExtraRow && ( + + {mobileOnlyExtraRow()} + + )} + + + + + + + + + + + ); + }; + + SearchAppLayoutWithSearchbar.propTypes = { + config: PropTypes.object.isRequired, + }; + + return SearchAppLayoutWithSearchbar; +}; + +SearchAppLayoutWithSearchbarHOC.propTypes = { + placeholder: PropTypes.string, + extraContent: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf([null])]), + mobileOnlyExtraRow: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.oneOf([null]), + ]), + appName: PropTypes.string, +}; + +SearchAppLayoutWithSearchbarHOC.defaultProps = { + extraContent: null, + mobileOnlyExtraRow: null, + appName: undefined, + placeholder: "", +}; diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx new file mode 100644 index 00000000..264e4b5b --- /dev/null +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx @@ -0,0 +1,156 @@ +// This file is part of InvenioRDM +// Copyright (C) 2020-2022 CERN. +// Copyright (C) 2020-2021 Northwestern University. +// Copyright (C) 2021 Graz University of Technology. +// Copyright (C) 2021 New York University. +// +// Invenio App RDM is free software; you can redistribute it and/or modify it +// under the terms of the MIT License; see LICENSE file for more details. + +import React from "react"; +import { + ResultsList, + buildUID, + Pagination, + ResultsPerPage, +} from "react-searchkit"; +import { Grid, Segment } from "semantic-ui-react"; +import PropTypes from "prop-types"; +import Overridable from "react-overridable"; +import { + ResultsPerPageLabel, + ResultCountWithState, + SearchAppSort, +} from "@js/oarepo_ui"; + +export function SearchAppResultViewWithSearchbar(props) { + const { sortOptions, paginationOptions, currentResultsState, appName } = + props; + const { total } = currentResultsState.data; + const { resultsPerPage } = paginationOptions; + return ( + total && ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + {total > 10 && ( + + + + + + + + + + + + + + + + )} + + + ) + ); +} + +SearchAppResultViewWithSearchbar.propTypes = { + sortOptions: PropTypes.array.isRequired, + paginationOptions: PropTypes.object.isRequired, + currentResultsState: PropTypes.object.isRequired, + appName: PropTypes.string, +}; + +SearchAppResultViewWithSearchbar.defaultProps = { + appName: "", +}; 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 19d56ab9..28f165ca 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 @@ -20,6 +20,8 @@ export { DynamicResultsListItem } from "./DynamicResultsListItem"; export { SearchappSearchbarElement } from "./SearchappSearchbarElement"; export { ShouldActiveFiltersRender } from "./ShouldActiveFiltersRender"; export { FoldableBucketAggregationElement } from "./FoldableBucketAggregationElement"; +export { SearchAppLayoutWithSearchbarHOC } from "./SearchAppLayoutWithSearchbar"; +export { SearchAppResultViewWithSearchbar } from "./SearchAppResultViewWithSearchbar"; export * from "./ShouldRender"; export * from "./util"; export * from "./histogram"; From 997af2c927a3216673664d8f21d6ea60e4987d1e Mon Sep 17 00:00:00 2001 From: ducica Date: Mon, 14 Oct 2024 15:03:30 +0200 Subject: [PATCH 2/4] moved styles to oarepo ui --- .../search/SearchAppLayoutWithSearchbar.jsx | 9 -- .../SearchAppResultViewWithSearchbar.jsx | 119 ++++++++---------- .../themes/default/collections/grid.overrides | 5 + .../themes/default/collections/grid.variables | 1 + 4 files changed, 60 insertions(+), 74 deletions(-) create mode 100644 oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.overrides create mode 100644 oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.variables 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 index d46c3e70..71e97274 100644 --- 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 @@ -1,12 +1,3 @@ -// This file is part of InvenioRDM -// Copyright (C) 2020-2022 CERN. -// Copyright (C) 2020-2021 Northwestern University. -// Copyright (C) 2021 Graz University of Technology. -// Copyright (C) 2021 New York University. -// -// Invenio App RDM is free software; you can redistribute it and/or modify it -// under the terms of the MIT License; see LICENSE file for more details. - import { SearchAppResultsPane, SearchConfigurationContext, diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx index 264e4b5b..23adb822 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx @@ -1,12 +1,3 @@ -// This file is part of InvenioRDM -// Copyright (C) 2020-2022 CERN. -// Copyright (C) 2020-2021 Northwestern University. -// Copyright (C) 2021 Graz University of Technology. -// Copyright (C) 2021 New York University. -// -// Invenio App RDM is free software; you can redistribute it and/or modify it -// under the terms of the MIT License; see LICENSE file for more details. - import React from "react"; import { ResultsList, @@ -45,7 +36,7 @@ export function SearchAppResultViewWithSearchbar(props) { @@ -83,61 +74,59 @@ export function SearchAppResultViewWithSearchbar(props) { currentResultsState={currentResultsState} appName={appName} > - {total > 10 && ( - - - - - - - - - - - - - - - - )} + + + + + + + + + + + + + + + ) diff --git a/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.overrides b/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.overrides new file mode 100644 index 00000000..da9664c6 --- /dev/null +++ b/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.overrides @@ -0,0 +1,5 @@ +.row { + &.results-options-row { + background-color: @resultsOptionsRowBackgroundColor; + } +} diff --git a/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.variables b/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.variables new file mode 100644 index 00000000..e346b692 --- /dev/null +++ b/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.variables @@ -0,0 +1 @@ +@resultsOptionsRowBackgroundColor: rgba(242, 242, 242); From 57ab52e9204c7a31f6cf2516312b89c11febf44b Mon Sep 17 00:00:00 2001 From: ducica Date: Mon, 14 Oct 2024 15:15:52 +0200 Subject: [PATCH 3/4] using optional chain --- .../js/oarepo_ui/search/SearchAppLayoutWithSearchbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 71e97274..5058f7d3 100644 --- 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 @@ -61,7 +61,7 @@ export const SearchAppLayoutWithSearchbarHOC = ({ - {extraContent && extraContent()} + {extraContent?.()} + + + + - + + + + + + + {extraContent && ( + + {extraContent()} + + )} + {mobileOnlyExtraRow && ( + + {mobileOnlyExtraRow()} - - - - - + )} + + + + + + + + + ); };