diff --git a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js new file mode 100644 index 0000000..ee33dcc --- /dev/null +++ b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js @@ -0,0 +1,324 @@ +/* + * Copyright (C) 2020 CERN. + * Copyright (C) 2020 Northwestern University. + * Copyright (C) 2020 Graz University of Technology + * + * invenio-theme-tugraz is free software; you can redistribute it + * and/or modify it under the terms of the MIT License; see LICENSE + * file for more details. + * + * origin: invenio_app_rdm/search/components.js + */ + +import React, { useState } from "react"; +import { Card, Item, Input, Label, Button, Grid, Checkbox, List, } from "semantic-ui-react"; +import { BucketAggregation, Toggle } from "react-searchkit"; +import _ from "lodash"; +import _truncate from "lodash/truncate"; +import Overridable from "react-overridable"; +import { SearchBar } from "@js/invenio_search_ui/components"; + +export const RDMRecordResultsListItem = ({ result, index }) => { + const description = _.get(result, "metadata.description", "No description"); + const version = _.get(result, "metadata.version", ""); + const creators = _.get(result, "metadata.creators", []); + const title = _.get(result, "metadata.title", "No title"); + const subjects = _.get(result, "metadata.subjects", null); + const rights = _.get(result, "metadata.rights", null) + + const publicationDate = _.get(result, "ui.publication_date_l10n_long", "No publication date found"); + const createdDate = _.get(result, "ui.created_date_l10n_long", "No creation date found."); + const resourceType = _.get(result, "ui.resource_type", "No resource type"); + const access = _.get(result, "ui.access_right.title", "No access rights"); + const accessRightCategory = _.get(result, "ui.access_right.category", "closed"); + const accessRightIcon = _.get(result, "ui.access_right.icon", "closed"); + const accessRight = {type: access, category: accessRightCategory, icon: accessRightIcon, rights}; + + const href = `/records/${result.id}`; + + return ( + + + + + {publicationDate} {version ? `(${version})` : null} + + + {resourceType} + + + {title} + + + {_truncate(description.replace(/(<([^>]+)>)/ig, ''), { length: 350 })} + + + + ); +}; + +const Creators = ({creators}) => { + const creatorTags = creators.map((creator, index) => { + return ; + }); + + return ( + + {creatorTags} + + ); +}; + +const Identifiers = ({creator}) => { + return ( + + {_.isObject(creator.identifiers) && creator.identifiers.hasOwnProperty("orcid") && + + } + + ); +}; + +const Orcid = ({creator}) => { + const href = `https://orcid.org/${creator.identifiers.orcid}` + + return ( + + + + ); +}; + +const Creator = ({creator}) => { + return ( + + + {creator.name} + + ); +}; + +const Footer = ({subjects, createdDate, accessRight}) => { + return ( + + + {subjects && subjects.map((subject, index) => ( + + {subject.subject} + + ))} + {createdDate && ( + + + Uploaded on {createdDate} + + + )} + + + + + {accessRight.type} {accessRight.rights && accessRight.rights.map((right, index) => ( + ({right.identifier}) + ))} + + + + ); +}; + +/** + * ATTENTION: + * The following classes are only here because it is not easily possible to + * import it from the original module. + * If there is in the future a possibility to import following classes from + * invenio_app_rdm then this should be done! + */ +export const RDMRecordResultsGridItem = ({ result, index }) => { + const description = _.get(result, "metadata.description", "No description"); + return ( + + + {result.metadata.title} + + {_truncate(description, { length: 200 })} + + + + ); +}; + +export const RDMRecordSearchBarContainer = () => { + return ( + + + + ); +}; + +export const RDMRecordSearchBarElement = ({ + placeholder: passedPlaceholder, + queryString, + onInputChange, + executeSearch, +}) => { + const placeholder = passedPlaceholder || "Search"; + const onBtnSearchClick = () => { + executeSearch(); + }; + const onKeyPress = (event) => { + if (event.key === "Enter") { + executeSearch(); + } + }; + return ( + { + onInputChange(value); + }} + value={queryString} + onKeyPress={onKeyPress} + /> + ); +}; + +export const RDMRecordFacetsValues = ({ + bucket, + isSelected, + onFilterClicked, + getChildAggCmps, +}) => { + const childAggCmps = getChildAggCmps(bucket); + const [isActive, setisActive] = useState(false); + const hasChildren = childAggCmps && childAggCmps.props.buckets.length > 0; + return ( + + + + {bucket.doc_count} + + {hasChildren ? ( + setisActive(!isActive)} + > + ) : null} + onFilterClicked(bucket.key)} + checked={isSelected} + /> + + + {childAggCmps} + + + ); +}; + +const SearchHelpLinks = () => { + return ( + + + + + + + Advanced search + + + + + + + + + Search guide + + + + + + + ); +}; + +export const RDMRecordFacets = ({ aggs, currentResultsState }) => { + return ( + <> + + {aggs.map((agg) => { + return ( + + + + ); + })} + + > + ); +}; + +export const RDMBucketAggregationElement = ({ title, containerCmp }) => { + return ( + + + {title} + + {containerCmp} + + ); +}; + +export const RDMToggleComponent = ({ + updateQueryFilters, + userSelectionFilters, + filterValue, + label, + title, + isChecked, +}) => { + const _isChecked = (userSelectionFilters) => { + const isFilterActive = + userSelectionFilters.filter((filter) => filter[0] === filterValue[0]) + .length > 0; + return isFilterActive; + }; + + const onToggleClicked = () => { + updateQueryFilters(filterValue); + }; + + var isChecked = _isChecked(userSelectionFilters); + return ( + + + {title} + + + + + + ); +}; diff --git a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/index.js b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/index.js new file mode 100644 index 0000000..78b6d1b --- /dev/null +++ b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/index.js @@ -0,0 +1,30 @@ +/* + * Copyright (C) 2020 Graz University of Technology + * + * invenio-theme-tugraz 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 { defaultComponents, createSearchAppInit } from "@js/invenio_search_ui"; +import { + RDMRecordResultsListItem, + RDMBucketAggregationElement, + RDMRecordFacets, + RDMRecordFacetsValues, + RDMRecordResultsGridItem, + RDMRecordSearchBarContainer, + RDMRecordSearchBarElement, + RDMToggleComponent, +} from "./components"; + +const initSearchApp = createSearchAppInit({ + "ResultsList.item": RDMRecordResultsListItem, + "BucketAggregation.element": RDMBucketAggregationElement, + "BucketAggregationValues.element": RDMRecordFacetsValues, + "ResultsGrid.item": RDMRecordResultsGridItem, + "SearchApp.facets": RDMRecordFacets, + "SearchApp.searchbarContainer": RDMRecordSearchBarContainer, + "SearchBar.element": RDMRecordSearchBarElement, + "SearchFilters.ToggleComponent": RDMToggleComponent, +}); diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less new file mode 100644 index 0000000..7bd3130 --- /dev/null +++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less @@ -0,0 +1,45 @@ +/* + * Copyright (C) 2020 Graz University of Technology + * + * invenio-theme-tugraz is free software; you can redistribute it and/or modify + * it under the terms of the MIT License; see LICENSE file for more details. + */ + +.creators { + margin: 0 0 1em; +} + +.creators span { + margin-left: 2px; +} + +.creator:not(:last-child):after { + color: #777; + content: ';'; +} + +.creator { + display: inline-block; + margin-right: 5px; +} + +.identifiers { + display: inline; +} + +.ui.access-right { + color: #FFFFFF; + + &.open { + color: @accessRightOpen; + } + &.restricted { + color: @accessRightRestricted; + } + &.embargoed { + color: @accessRightEmbargoed; + } + &.closed { + color: @accessRightClosed; + } +} diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less index 1ae0402..7f26f2a 100644 --- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less +++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less @@ -12,6 +12,7 @@ @import "overrides"; @import "frontpage"; @import "record"; +@import "search"; @import "macros"; @import "login"; @import (css) diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less index 0208aaa..53eef00 100644 --- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less +++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less @@ -14,4 +14,9 @@ //@import "../invenio_app_rdm/variables.less"; //@navbar_background_image: unset; -//@navbar_background_color: #ffffff; \ No newline at end of file +//@navbar_background_color: #ffffff; + +@accessRightOpen: #e9711c; +@accessRightRestricted: #fbbd08; +@accessRightEmbargoed: #db2828; +@accessRightClosed: #db2828; diff --git a/invenio_theme_tugraz/config.py b/invenio_theme_tugraz/config.py index 320ee00..26ab619 100644 --- a/invenio_theme_tugraz/config.py +++ b/invenio_theme_tugraz/config.py @@ -94,3 +94,9 @@ DEPOSITS_HEADER_TEMPLATE = "invenio_theme_tugraz/header.html" # template="invenio_theme_tugraz/record_landing_page.html" # ) """override the default record landing page""" + +# Invenio-search-ui +# ============= +# See https://invenio-search-ui.readthedocs.io/en/latest/configuration.html +SEARCH_UI_SEARCH_TEMPLATE = "invenio_theme_tugraz/search.html" +"""override the default search page""" diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/search.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/search.html new file mode 100644 index 0000000..d39a23c --- /dev/null +++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/search.html @@ -0,0 +1,82 @@ +{# + Copyright (C) 2020 Graz University of Technology + + invenio-theme-tugraz is free software; you can redistribute it and/or modify + it under the terms of the MIT License; see LICENSE file for more details. +#} +{%- extends config.BASE_TEMPLATE %} + +{%- block javascript %} + {{ super() }} + {{ webpack['invenio-theme-tugraz-search-app.js'] }} +{%- endblock %} + +{%- block page_body %} + + + +{%- endblock page_body %} diff --git a/invenio_theme_tugraz/webpack.py b/invenio_theme_tugraz/webpack.py index 1ab4a6b..3d53c0f 100644 --- a/invenio_theme_tugraz/webpack.py +++ b/invenio_theme_tugraz/webpack.py @@ -17,6 +17,7 @@ theme = WebpackThemeBundle( entry={ "invenio-theme-tugraz-theme": "./less/invenio_theme_tugraz/theme.less", "invenio-theme-tugraz-js": "./js/invenio_theme_tugraz/theme.js", + "invenio-theme-tugraz-search-app": "./js/invenio_theme_tugraz/search/index.js", }, dependencies={}, )