Merge pull request #238 from oarepo/stojanovic/fe-265-remove-dependen…

…cy-between-oarepo_dashboard-and

moved app layout with searchbar to oarepo ui

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

@@ -0,0 +1,131 @@
+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 Overridable from "react-overridable";
+
+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 (
+      <Container className="rel-mt-4 rel-mb-4">
+        <Grid>
+          <GridResponsiveSidebarColumn
+            width={4}
+            open={sidebarVisible}
+            onHideClick={() => setSidebarVisible(false)}
+          >
+            <ShouldActiveFiltersRender>
+              <Overridable id={buildUID("ClearFiltersButton.container")}>
+                <ClearFiltersButton
+                  className={"clear-filters-button mobile tablet only"}
+                />
+              </Overridable>
+            </ShouldActiveFiltersRender>
+            <SearchAppFacets aggs={config.aggs} appName={appName} />
+          </GridResponsiveSidebarColumn>
+          <Grid.Column computer={12} mobile={16} tablet={16}>
+            <Grid columns="equal">
+              <ShouldActiveFiltersRender>
+                <Grid.Row only="computer" verticalAlign="middle">
+                  <Grid.Column>
+                    <ActiveFilters />
+                  </Grid.Column>
+                </Grid.Row>
+              </ShouldActiveFiltersRender>
+              <Grid.Row only="computer" verticalAlign="middle">
+                <Grid.Column>
+                  <SearchBar placeholder={placeholder} className="rel-pl-1" />
+                </Grid.Column>
+                {extraContent?.()}
+              </Grid.Row>
+              <Grid.Column only="mobile tablet" mobile={2} tablet={2}>
+                <Button
+                  basic
+                  onClick={() => setSidebarVisible(true)}
+                  title={i18next.t("Filter results")}
+                  aria-label={i18next.t("Filter results")}
+                  className="facets-sidebar-open-button"
+                >
+                  <Icon name="filter"></Icon>
+                  <ShouldActiveFiltersRender>
+                    <ActiveFiltersCountFloatingLabel />
+                  </ShouldActiveFiltersRender>
+                </Button>
+              </Grid.Column>
+              <Grid.Column
+                only="mobile tablet"
+                mobile={14}
+                tablet={14}
+                floated="right"
+              >
+                <SearchBar placeholder={placeholder} />
+              </Grid.Column>
+              {extraContent && (
+                <Grid.Row only="tablet mobile" verticalAlign="middle">
+                  {extraContent()}
+                </Grid.Row>
+              )}
+              {mobileOnlyExtraRow && (
+                <Grid.Row verticalAlign="middle" only="mobile">
+                  {mobileOnlyExtraRow()}
+                </Grid.Row>
+              )}
+              <Grid.Row>
+                <Grid.Column mobile={16} tablet={16} computer={16}>
+                  <SearchAppResultsPane
+                    layoutOptions={config.layoutOptions}
+                    appName={appName}
+                  />
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Grid.Column>
+        </Grid>
+      </Container>
+    );
+  };
+
+  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: "",
+};

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

@@ -0,0 +1,145 @@
+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 && (
+      <Grid className="rel-mb-2">
+        <Grid.Row>
+          <Grid.Column width={16}>
+            <Segment>
+              <Grid>
+                <Overridable
+                  id={buildUID("ResultView.resultHeader", "", appName)}
+                  sortOptions={sortOptions}
+                  paginationOptions={paginationOptions}
+                  currentResultsState={currentResultsState}
+                  appName={appName}
+                >
+                  <Grid.Row
+                    verticalAlign="middle"
+                    width={16}
+                    className="results-options-row"
+                  >
+                    <Grid.Column textAlign="left" width={8}>
+                      <ResultCountWithState />
+                    </Grid.Column>
+                    <Grid.Column
+                      textAlign="right"
+                      className="search-app-sort-container"
+                      width={8}
+                    >
+                      <SearchAppSort options={sortOptions} />
+                    </Grid.Column>
+                  </Grid.Row>
+                </Overridable>
+                <Overridable
+                  id={buildUID("ResultView.resultList", "", appName)}
+                  sortOptions={sortOptions}
+                  paginationOptions={paginationOptions}
+                  currentResultsState={currentResultsState}
+                  appName={appName}
+                >
+                  <Grid.Row>
+                    <Grid.Column>
+                      <ResultsList />
+                    </Grid.Column>
+                  </Grid.Row>
+                </Overridable>
+              </Grid>
+            </Segment>
+          </Grid.Column>
+        </Grid.Row>
+        <Overridable
+          id={buildUID("ResultView.resultFooter", "", appName)}
+          sortOptions={sortOptions}
+          paginationOptions={paginationOptions}
+          currentResultsState={currentResultsState}
+          appName={appName}
+        >
+          <Grid.Row verticalAlign="middle">
+            <Grid.Column
+              className="computer tablet only"
+              width={4}
+            ></Grid.Column>
+            <Grid.Column
+              className="computer tablet only"
+              width={8}
+              textAlign="center"
+            >
+              <Pagination
+                options={{
+                  size: "mini",
+                  showFirst: false,
+                  showLast: false,
+                }}
+                showWhenOnlyOnePage={false}
+              />
+            </Grid.Column>
+            <Grid.Column className="mobile only" width={16} textAlign="center">
+              <Pagination
+                options={{
+                  size: "mini",
+                  boundaryRangeCount: 0,
+                  showFirst: false,
+                  showLast: false,
+                }}
+                showWhenOnlyOnePage={false}
+              />
+            </Grid.Column>
+            <Grid.Column
+              className="computer tablet only "
+              textAlign="right"
+              width={4}
+            >
+              <ResultsPerPage
+                values={resultsPerPage}
+                label={ResultsPerPageLabel}
+                showWhenOnlyOnePage={false}
+              />
+            </Grid.Column>
+            <Grid.Column
+              className="mobile only mt-10"
+              textAlign="center"
+              width={16}
+            >
+              <ResultsPerPage
+                values={resultsPerPage}
+                label={ResultsPerPageLabel}
+                showWhenOnlyOnePage={false}
+              />
+            </Grid.Column>
+          </Grid.Row>
+        </Overridable>
+      </Grid>
+    )
+  );
+}
+
+SearchAppResultViewWithSearchbar.propTypes = {
+  sortOptions: PropTypes.array.isRequired,
+  paginationOptions: PropTypes.object.isRequired,
+  currentResultsState: PropTypes.object.isRequired,
+  appName: PropTypes.string,
+};
+
+SearchAppResultViewWithSearchbar.defaultProps = {
+  appName: "",
+};

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";

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

oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.variables

@@ -0,0 +1 @@
+@resultsOptionsRowBackgroundColor: rgba(242, 242, 242);