Skip to content

Commit 9d8aa25

Browse files
kpshervakpsherva
committed
assets: move in community records search
* move the community records search components from invenio_communities
1 parent 2f43b8f commit 9d8aa25

File tree

8 files changed

+246
-2
lines changed

8 files changed

+246
-2
lines changed

‎.prettierrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
"@inveniosoftware/eslint-config-invenio/prettier-config"
1+
"@inveniosoftware/eslint-config-invenio/prettier-config"

‎invenio_app_rdm/communities_ui/templates/semantic-ui/invenio_communities/details/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
{%- block javascript %}
1515
{{ super() }}
16-
{{ webpack['invenio-communities-details-search.js'] }}
16+
{{ webpack['invenio-app-rdm-community-records-search.js'] }}
1717
{%- endblock %}
1818

1919
{%- block page_body %}

‎invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/communityRecordsSearch/CommunityRecordsSearchAppLayout.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import {
2+
SearchAppFacets,
3+
SearchAppResultsPane,
4+
SearchBar,
5+
} from "@js/invenio_search_ui/components";
6+
import { i18next } from "@translations/invenio_communities/i18next";
7+
import React from "react";
8+
import { Count, Sort } from "react-searchkit";
9+
import {
10+
Button,
11+
Container,
12+
Grid,
13+
} from "semantic-ui-react";
14+
import { GridResponsiveSidebarColumn } from "react-invenio-forms";
15+
import PropTypes from "prop-types"
16+
17+
export const CommunityRecordsSearchAppLayout = ({ config, appName }) => {
18+
const [sidebarVisible, setSidebarVisible] = React.useState(false);
19+
20+
return (
21+
<Container className="rel-pt-2">
22+
<Grid>
23+
<Grid.Column only="mobile tablet" mobile={2} tablet={1}>
24+
<Button
25+
basic
26+
icon="sliders"
27+
onClick={() => setSidebarVisible(true)}
28+
aria-label={i18next.t("Filter results")}
29+
/>
30+
</Grid.Column>
31+
32+
<Grid.Column mobile={14} tablet={14} computer={12} floated="right">
33+
<Grid>
34+
<Grid.Column width={16}>
35+
<SearchBar placeholder={i18next.t("Search records in community...")} />
36+
</Grid.Column>
37+
38+
<Grid.Column width={4} textAlign="left">
39+
<Count
40+
label={(cmp) => (
41+
<>
42+
{cmp} {i18next.t("result(s) found")}
43+
</>
44+
)}
45+
/>
46+
</Grid.Column>
47+
<Grid.Column width={12} textAlign="right">
48+
<Sort
49+
values={config.sortOptions}
50+
label={(cmp) => (
51+
<>
52+
<label className="mr-10">{i18next.t("Sort by")}</label>
53+
{cmp}
54+
</>
55+
)}
56+
/>
57+
</Grid.Column>
58+
</Grid>
59+
</Grid.Column>
60+
61+
<Grid.Row>
62+
<GridResponsiveSidebarColumn
63+
width={4}
64+
open={sidebarVisible}
65+
onHideClick={() => setSidebarVisible(false)}
66+
// eslint-disable-next-line react/no-children-prop
67+
children={<SearchAppFacets aggs={config.aggs} appName={appName} />}
68+
/>
69+
<Grid.Column mobile={16} tablet={16} computer={12}>
70+
<SearchAppResultsPane
71+
layoutOptions={config.layoutOptions}
72+
appName={appName}
73+
/>
74+
</Grid.Column>
75+
</Grid.Row>
76+
</Grid>
77+
</Container>
78+
);
79+
};
80+
81+
CommunityRecordsSearchAppLayout.propTypes = {
82+
config: PropTypes.object.isRequired,
83+
appName: PropTypes.string,
84+
};
85+
86+
CommunityRecordsSearchAppLayout.defaultProps = {
87+
appName: "",
88+
};
89+

‎invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/communityRecordsSearch/CommunityRecordsSearchBarElement.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// This file is part of Invenio
2+
// Copyright (C) 2022 CERN.
3+
//
4+
// Invenio is free software; you can redistribute it and/or modify it under the
5+
// terms of the MIT License; see LICENSE file for more details.
6+
7+
import { MultipleOptionsSearchBarRSK } from "@js/invenio_search_ui/components";
8+
import { i18next } from "@translations/invenio_communities/i18next";
9+
import _isEmpty from "lodash/isEmpty";
10+
import React from "react";
11+
import PropTypes from "prop-types";
12+
import { CommunityRecordsSingleSearchBarElement } from "./CommunityRecordsSingleSearchBarElement";
13+
14+
export const CommunityRecordsSearchBarElement = ({ queryString, onInputChange }) => {
15+
const headerSearchbar = document.getElementById("header-search-bar");
16+
const searchbarOptions = headerSearchbar.dataset.options
17+
? JSON.parse(headerSearchbar.dataset.options)
18+
: [];
19+
20+
if (!_isEmpty(searchbarOptions)) {
21+
return (
22+
<MultipleOptionsSearchBarRSK
23+
options={searchbarOptions}
24+
onInputChange={onInputChange}
25+
queryString={queryString}
26+
placeholder={i18next.t("Search records...")}
27+
/>
28+
);
29+
} else {
30+
// backwards compatibility
31+
return (
32+
<CommunityRecordsSingleSearchBarElement
33+
placeholder={i18next.t("Search records...")}
34+
queryString={queryString}
35+
onInputChange={onInputChange}
36+
/>
37+
);
38+
}
39+
};
40+
41+
CommunityRecordsSearchBarElement.propTypes = {
42+
queryString: PropTypes.string.isRequired,
43+
onInputChange: PropTypes.func.isRequired,
44+
};

‎invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/communityRecordsSearch/CommunityRecordsSingleSearchBarElement.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// This file is part of Invenio
2+
// Copyright (C) 2022 CERN.
3+
//
4+
// Invenio is free software; you can redistribute it and/or modify it under the
5+
// terms of the MIT License; see LICENSE file for more details.
6+
7+
import { i18next } from "@translations/invenio_communities/i18next";
8+
import React from "react";
9+
import { withState } from "react-searchkit";
10+
import { Input } from "semantic-ui-react";
11+
12+
export const CommunityRecordsSingleSearchBarElement = withState(
13+
({
14+
placeholder: passedPlaceholder,
15+
queryString,
16+
onInputChange,
17+
updateQueryState,
18+
}) => {
19+
const placeholder = passedPlaceholder || i18next.t("Search");
20+
const onBtnSearchClick = () => {
21+
updateQueryState({ queryString, filters: [] });
22+
};
23+
const onKeyPress = (event) => {
24+
if (event.key === "Enter") {
25+
updateQueryState({ queryString, filters: [] });
26+
}
27+
};
28+
return (
29+
<Input
30+
action={{
31+
"icon": "search",
32+
"onClick": onBtnSearchClick,
33+
"className": "search",
34+
"aria-label": i18next.t("Search"),
35+
}}
36+
fluid
37+
placeholder={placeholder}
38+
onChange={(event, { value }) => {
39+
onInputChange(value);
40+
}}
41+
value={queryString}
42+
onKeyPress={onKeyPress}
43+
/>
44+
);
45+
}
46+
);

‎invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/communityRecordsSearch/components.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { CommunityRecordsSearchAppLayout } from "./CommunityRecordsSearchAppLayout";
2+
export { CommunityRecordsSearchBarElement } from "./CommunityRecordsSearchBarElement";
3+
export { CommunityRecordsSingleSearchBarElement } from "./CommunityRecordsSingleSearchBarElement";

‎invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/communityRecordsSearch/index.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// This file is part of Invenio
2+
// Copyright (C) 2022 CERN.
3+
//
4+
// Invenio is free software; you can redistribute it and/or modify it under the
5+
// terms of the MIT License; see LICENSE file for more details.
6+
7+
import { createSearchAppInit } from "@js/invenio_search_ui";
8+
import {
9+
RDMCountComponent,
10+
RDMEmptyResults,
11+
RDMErrorComponent,
12+
RDMRecordResultsGridItem,
13+
RDMToggleComponent,
14+
} from "../search/components";
15+
import RecordsResultsListItem from "../components/RecordsResultsListItem";
16+
import {
17+
CommunityRecordsSearchAppLayout,
18+
CommunityRecordsSearchBarElement,
19+
} from "./components";
20+
import { parametrize, overrideStore } from "react-overridable";
21+
import {
22+
ContribSearchAppFacets,
23+
ContribBucketAggregationElement,
24+
ContribBucketAggregationValuesElement,
25+
} from "@js/invenio_search_ui/components";
26+
27+
const appName = "InvenioCommunities.DetailsSearch";
28+
29+
const ContribSearchAppFacetsWithConfig = parametrize(ContribSearchAppFacets, {
30+
toogle: true,
31+
});
32+
33+
const CommunityRecordSearchAppLayoutWAppName = parametrize(
34+
CommunityRecordsSearchAppLayout,
35+
{
36+
appName: appName,
37+
}
38+
);
39+
40+
const defaultComponents = {
41+
[`${appName}.BucketAggregation.element`]: ContribBucketAggregationElement,
42+
[`${appName}.BucketAggregationValues.element`]: ContribBucketAggregationValuesElement,
43+
[`${appName}.ResultsGrid.item`]: RDMRecordResultsGridItem,
44+
[`${appName}.EmptyResults.element`]: RDMEmptyResults,
45+
[`${appName}.ResultsList.item`]: RecordsResultsListItem,
46+
[`${appName}.SearchApp.facets`]: ContribSearchAppFacetsWithConfig,
47+
[`${appName}.SearchApp.layout`]: CommunityRecordSearchAppLayoutWAppName,
48+
[`${appName}.SearchBar.element`]: CommunityRecordsSearchBarElement,
49+
[`${appName}.Count.element`]: RDMCountComponent,
50+
[`${appName}.Error.element`]: RDMErrorComponent,
51+
[`${appName}.SearchFilters.Toggle.element`]: RDMToggleComponent,
52+
};
53+
54+
const overriddenComponents = overrideStore.getAll();
55+
56+
createSearchAppInit(
57+
{ ...defaultComponents, ...overriddenComponents },
58+
true,
59+
"invenio-search-config",
60+
true
61+
);

‎invenio_app_rdm/theme/webpack.py

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"invenio-app-rdm-user-uploads": "./js/invenio_app_rdm/user_dashboard/uploads.js",
2727
"invenio-app-rdm-user-communities": "./js/invenio_app_rdm/user_dashboard/communities.js",
2828
"invenio-app-rdm-user-requests": "./js/invenio_app_rdm/user_dashboard/requests.js",
29+
"invenio-app-rdm-community-records-search": "./js/invenio_app_rdm/communityRecordsSearch/index.js",
2930
"base-theme-rdm": "./js/invenio_app_rdm/theme.js",
3031
"iiif-simple-previewer": "./less/invenio_app_rdm/previewer/iiif_simple.less",
3132
"invenio-app-rdm-frontpage": "./js/invenio_app_rdm/frontpage/index.js",

0 commit comments

Comments
 (0)