Merge pull request #141 from utnapischtim/feature/override-landing-page

override landing page

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 (
+    <Item key={index}>
+      <Item.Content>
+        <div className="badges">
+          <Label className="record-version">
+            {publicationDate} {version ? `(${version})` : null}
+          </Label>
+          <Label className="teal">
+            {resourceType}
+          </Label>
+        </div>
+        <Item.Header href={href}>{title}</Item.Header>
+        <Creators creators={creators}/>
+        <Item.Description href={href}>
+          {_truncate(description.replace(/(<([^>]+)>)/ig, ''), { length: 350 })}
+        </Item.Description>
+        <Footer subjects={subjects} createdDate={createdDate} accessRight={accessRight}/>
+      </Item.Content>
+    </Item>
+  );
+};
+
+const Creators = ({creators}) => {
+  const creatorTags = creators.map((creator, index) => {
+    return <Creator key={index} creator={creator}/>;
+  });
+
+  return (
+    <div className="creators">
+      {creatorTags}
+    </div>
+  );
+};
+
+const Identifiers = ({creator}) => {
+  return (
+    <div className="identifiers">
+      {_.isObject(creator.identifiers) && creator.identifiers.hasOwnProperty("orcid") &&
+       <Orcid creator={creator}/>
+      }
+    </div>
+  );
+};
+
+const Orcid = ({creator}) => {
+  const href = `https://orcid.org/${creator.identifiers.orcid}`
+
+  return (
+    <a href={href} target="_blank">
+      <img className="inline-orcid" src="/static/extra/orcid.png"/>
+    </a>
+  );
+};
+
+const Creator = ({creator}) => {
+  return (
+    <div className="creator">
+      <Identifiers creator={creator}/>
+      <span className="text-muted">{creator.name}</span>
+    </div>
+  );
+};
+
+const Footer = ({subjects, createdDate, accessRight}) => {
+  return (
+    <Item.Extra>
+      <div className="left floated column">
+        {subjects && subjects.map((subject, index) => (
+          <Label key={index} size="tiny">
+            {subject.subject}
+          </Label>
+        ))}
+        {createdDate && (
+          <div>
+            <small>
+              Uploaded on <span>{createdDate}</span>
+            </small>
+          </div>
+        )}
+      </div>
+      <div className="right floated column">
+        <span className={`ui access-right ${accessRight.category}`}>
+          <i className={`icon ${accessRight.icon}`}></i>
+          {accessRight.type} {accessRight.rights && accessRight.rights.map((right, index) => (
+            <a key={index} href={right.uri}>({right.identifier})</a>
+          ))}
+        </span>
+      </div>
+    </Item.Extra>
+  );
+};
+
+/**
+ * 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 (
+    <Card fluid key={index} href={`/records/${result.pid}`}>
+      <Card.Content>
+        <Card.Header>{result.metadata.title}</Card.Header>
+        <Card.Description>
+          {_truncate(description, { length: 200 })}
+        </Card.Description>
+      </Card.Content>
+    </Card>
+  );
+};
+
+export const RDMRecordSearchBarContainer = () => {
+  return (
+    <Overridable id={"SearchApp.searchbar"}>
+      <SearchBar />
+    </Overridable>
+  );
+};
+
+export const RDMRecordSearchBarElement = ({
+  placeholder: passedPlaceholder,
+  queryString,
+  onInputChange,
+  executeSearch,
+}) => {
+  const placeholder = passedPlaceholder || "Search";
+  const onBtnSearchClick = () => {
+    executeSearch();
+  };
+  const onKeyPress = (event) => {
+    if (event.key === "Enter") {
+      executeSearch();
+    }
+  };
+  return (
+    <Input
+      action={{
+        icon: "search",
+        onClick: onBtnSearchClick,
+        className: "search",
+      }}
+      placeholder={placeholder}
+      onChange={(event, { value }) => {
+        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 (
+    <List.Item key={bucket.key}>
+      <div
+        className={`title ${hasChildren ? "" : "facet-subtitle"} ${
+          isActive ? "active" : ""
+        }`}
+      >
+        <List.Content floated="right">
+          <Label circular>{bucket.doc_count}</Label>
+        </List.Content>
+        {hasChildren ? (
+          <i
+            className={`angle ${isActive ? "down" : "right"} icon`}
+            onClick={() => setisActive(!isActive)}
+          ></i>
+        ) : null}
+        <Checkbox
+          label={bucket.label}
+          value={bucket.key}
+          onClick={() => onFilterClicked(bucket.key)}
+          checked={isSelected}
+        />
+      </div>
+      <div className={`content facet-content ${isActive ? "active" : ""}`}>
+        {childAggCmps}
+      </div>
+    </List.Item>
+  );
+};
+
+const SearchHelpLinks = () => {
+  return (
+    <Overridable id={"RdmSearch.SearchHelpLinks"}>
+      <Grid className="padded-small">
+        <Grid.Row className="no-padded">
+          <Grid.Column>
+            <Card className="borderless-facet">
+              <Card.Content>
+                <a>Advanced search</a>
+              </Card.Content>
+            </Card>
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row className="no-padded">
+          <Grid.Column>
+            <Card className="borderless-facet">
+              <Card.Content>
+                <a>Search guide</a>
+              </Card.Content>
+            </Card>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </Overridable>
+  );
+};
+
+export const RDMRecordFacets = ({ aggs, currentResultsState }) => {
+  return (
+    <>
+      <Toggle
+        title="Versions"
+        label="View all versions"
+        filterValue={["all_versions", "true"]}
+      />
+      {aggs.map((agg) => {
+        return (
+          <div key={agg.title} className="ui accordion">
+            <BucketAggregation title={agg.title} agg={agg} />
+          </div>
+        );
+      })}
+      <SearchHelpLinks />
+    </>
+  );
+};
+
+export const RDMBucketAggregationElement = ({ title, containerCmp }) => {
+  return (
+    <Card className="borderless-facet">
+      <Card.Content>
+        <Card.Header>{title}</Card.Header>
+      </Card.Content>
+      <Card.Content>{containerCmp}</Card.Content>
+    </Card>
+  );
+};
+
+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 (
+    <Card className="borderless-facet">
+      <Card.Content>
+        <Card.Header>{title}</Card.Header>
+      </Card.Content>
+      <Card.Content>
+        <Checkbox
+          toggle
+          label={label}
+          onClick={onToggleClicked}
+          checked={isChecked}
+        />
+      </Card.Content>
+    </Card>
+  );
+};

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

invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/record.less

@@ -9,3 +9,18 @@
   color: #e9711c;
   float: right;
 }
+
+.title .dropdown {
+  display: none;
+}
+
+.top-bottom-padded {
+  margin: unset;
+}
+
+.label.label-keyword {
+  font-size: 0.71428571rem;
+  font-weight: 400;
+  background-color: #E8E8E8;
+  border: unset;
+}

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

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)

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;
+//@navbar_background_color: #ffffff;
+
+@accessRightOpen: #e9711c;
+@accessRightRestricted: #fbbd08;
+@accessRightEmbargoed: #db2828;
+@accessRightClosed: #db2828;

invenio_theme_tugraz/config.py

@@ -9,6 +9,7 @@
 """invenio module for TUGRAZ theme."""
 
 from flask_babelex import gettext as _
+from invenio_app_rdm.config import RECORDS_UI_ENDPOINTS
 
 INVENIO_THEME_TUGRAZ_DEFAULT_VALUE = _("TU Graz Repository")
 """Default value for the application."""
@@ -90,7 +91,13 @@ DEPOSITS_HEADER_TEMPLATE = "invenio_theme_tugraz/header.html"
 # See https://invenio-rdm-records.readthedocs.io/en/latest/configuration.html
 # Uncomment below to override records landingpage.
 # from invenio_rdm_records.config import RECORDS_UI_ENDPOINTS
-# RECORDS_UI_ENDPOINTS["recid"].update(
+RECORDS_UI_ENDPOINTS["recid"].update(
-#    template="invenio_theme_tugraz/record_landing_page.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"""

invenio_theme_tugraz/templates/invenio_theme_tugraz/index.html

@@ -98,6 +98,10 @@
               <span class="access-right">
                 <i class="icon lock open"></i>
                 {{ r.access.access_right | make_dict_like('access_right') | vocabulary_title('access_right') }}
+                {%- for right in r.metadata.rights %}
+                <a target="_blank" href="{{right.url}}">{{ '(' ~ right.identifier ~ ')' }}</a>
+                {%- endfor %}
+
               </span>
             </div>
           </div>

invenio_theme_tugraz/templates/invenio_theme_tugraz/macros/authors.html

@@ -1,8 +1,7 @@
 {#
     Copyright (C) 2020 Zenodo
     Copyright (C) 2020 TUGRAZ
-    Copyright (C) 2020 mojib wali.
+
-  
     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.
@@ -12,7 +11,7 @@
 
 {%- for creators in authors_list %}
 
-{%- if creators.identifiers.orcid %}
+{%- if creators.identifiers and creators.identifiers.orcid %}
 <a href="{{creators.identifiers.orcid|pid_url('orcid')}}" target="_blank" ><img class="inline-orcid" src="{{ url_for('static', filename='extra/orcid.png')}}" /></a>
 {%- endif %}
 
@@ -28,4 +27,4 @@
 <h5>{{group.grouper}}(s)</h5>
 {{authors(group.list)}}
 {%- endfor %}
-{%- endmacro %}
+{%- endmacro %}

invenio_theme_tugraz/templates/invenio_theme_tugraz/record_landing_page.html

@@ -13,89 +13,82 @@
 
 {%- block css %}
 {{ super() }}
-{{ webpack['invenio-rdm-records-theme.css'] }}
 {%- endblock css %}
 
-{%- from "invenio_rdm_records/macros/files.html" import file_list_box, preview_file_box %}
+{%- from "invenio_app_rdm/landing_page/macros/files.html" import file_list_box, preview_file_box %}
+{%- from "invenio_app_rdm/landing_page/macros/detail.html" import show_detail %}
+
+{%- set record = record|dereference_record|serialize_ui %}
+{%- set metadata = record.metadata %}
 
 {%- block page_body %}
+
 <div class="ui container">
   <div class="ui padded relaxed grid">
     <div class="two column row">
       <div class="ten wide column">
         {%- block record_body %}
 
-        <div class="left floated left aligned column">
+        <div class="badges">
-          <span class="ui label teal" title="Publication date">
+          <span class="ui label record-version" title="{{_('Publication date')}}">
-            {{ record.publication_date|to_date|format_date(format='long') }}
+            {{ record.metadata.publication_date }} {{ '(' ~ record.metadata.version ~ ')' if record.metadata.version }}
           </span>
 
-          <span class="ui label record-version">
+          <!--Resource type badge-->
-            Version {{ record.version }}
+          <span class="ui label teal" title="{{_('Resource type')}}">
-          </span>
+            {{record.ui.resource_type }}
-
-          <span class="ui label grey">
-            {{ record.resource_type | vocabulary_title('resource_type') }}
           </span>
         </div>
 
-        <h1>{{ record.titles[0].title }}</h1>
+        <h1 style="margin-top: -6px">{{ record.metadata.title }}</h1>
-        <p>
+        <p>{%- include "invenio_app_rdm/landing_page/details/creators.html" %}</p>
-          {%- include "invenio_rdm_records/details/creators.html" %}
+        <p>{%- include "invenio_app_rdm/landing_page/details/contributors.html" %}</p>
-        </p>
 
-        {%- if record.contributors %}
+        <div class="ui grid" style="margin-bottom: 10px;">
-        <p>
-          {%- include "invenio_rdm_records/details/contributors.html" %}
-        </p>
-        {%- endif %}
-
-        <div class="ui grid">
           <div class="two column row">
             <div class="left floated column">
-              {%- include "invenio_theme_tugraz/details/doi.html" %}
+              {%- for s in record.metadata.subjects %}
+              <div class="ui tiny label">{{s.subject}}</div>
+              {%- endfor %}
+              <div style="margin-top: 5px;">
+                <b>Created:</b> {{ record.ui.created_date_l10n_long }} | <b>Modified:</b> {{ record.ui.updated_date_l10n_long }}
+              </div>
             </div>
 
             <div class="right floated column">
-              {#
-              {%- include "invenio_rdm_records/details/contact.html" %}
-              #}
-
               <span class="access-right">
-                {{ record | vocabulary_title('access_right') | lower_case }}
+                <i class="icon lock open"></i>
+                {{ record.access.access_right | make_dict_like('access_right') | vocabulary_title('access_right') }}
+                {%- for right in record.metadata.rights %}
+                <a target="_blank" href="{{right.url}}">{{ '(' ~ right.identifier ~ ')' }}</a>
+                {%- endfor %}
+
               </span>
             </div>
           </div>
         </div>
 
-        {%- include "invenio_rdm_records/details/citation.html" %}
+        {%- include "invenio_app_rdm/landing_page/details/description.html" %}
-        {%- include "invenio_rdm_records/details/keywords.html" %}
+
-        {%- include "invenio_rdm_records/details/description.html" %}
-        {%- include "invenio_rdm_records/details/licenses.html" %}
 
         {# files #}
         {%- if record.files and record | can_list_files %}
-        {%- set files = record.files %}
+          {%- set files = record.files | make_files_preview_compatible %}
-        {{ preview_file_box(files | select_preview_file, pid) }}
+          {%- set default_preview_file = files | select_preview_file(default_preview=record.files.default_preview) %}
-        {{ file_list_box(files.dumps(), pid) }}
+          {{ preview_file_box(default_preview_file, pid) }}
-        {%- else %}
+          {{ file_list_box(files, pid) }}
-        <br>
-
-        <p style="text-align: center;">
-          No associated files.
-        </p>
         {% endif %}
 
-        {# More details #}
-
         {%- endblock record_body %}
       </div>
 
       <div class="six wide column">
-        {% block sidebar %}
+        <div id="recordManagement"
-        <div class="ui segment rdm-sidebar">
+             class="ui container"
-          {%- include "invenio_rdm_records/details/side_bar.html" %}
+             data-recid='{{ record["id"] | tojson }}'>
         </div>
+        {% block sidebar %}
+        {%- include "invenio_app_rdm/landing_page/details/side_bar.html" %}
         {% endblock sidebar %}
       </div>
     </div>
@@ -106,8 +99,9 @@
 
 {%- block javascript %}
 {{ super() }}
-{{ webpack['invenio-rdm-records-js.js'] }}
+{{ webpack['invenio-app-rdm-records.js'] }}
 {# Communities management #}
 {{ webpack['invenio-communities-records.js'] }}
-{{webpack['previewer_theme.js']}}
+{{ webpack['previewer_theme.js'] }}
+{{ webpack['invenio-app-rdm-record-management.js'] }}
 {%- endblock javascript %}

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 %}
+
+<div data-invenio-search-config='{
+  "aggs": [
+    {
+      "aggName": "access_right",
+      "field": "access_right",
+      "title": "Access Right"
+    },
+    {
+      "aggName": "resource_type",
+      "field": "resource_type.type",
+      "title": "Resource Type",
+      "childAgg": {
+        "aggName": "subtype",
+        "field": "resource_type.subtype",
+        "title": "Resource Type"
+      }
+    }
+  ],
+  "appId": "rdm-search",
+  "initialQueryState": {
+    "hiddenParams": null,
+    "size": 10
+  },
+  "layoutOptions": {
+    "gridView": false,
+    "listView": true
+  },
+  "paginationOptions": {
+    "defaultValue": 10,
+    "resultsPerPage": [
+      {
+        "text": "10",
+        "value": 10
+      },
+      {
+        "text": "20",
+        "value": 20
+      },
+      {
+        "text": "50",
+        "value": 50
+      }
+    ]
+  },
+  "searchApi": {
+    "axios": {
+      "headers": {
+        "Accept": "application/vnd.inveniordm.v1+json"
+      },
+      "url": "/api/records",
+      "withCredentials": true
+    }
+  },
+  "sortOrderDisabled": true,
+  "sortOptions": [
+    {
+      "sortBy": "bestmatch",
+      "text": "Best match"
+    },
+    {
+      "sortBy": "newest",
+      "text": "Newest"
+    }
+  ]
+}'></div>
+
+{%- endblock page_body %}

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={},
         )

setup.py

@@ -17,7 +17,7 @@ history = open("CHANGES.rst").read()
 
 tests_require = [
     "pytest-invenio>=1.4.0",
-    'invenio-app>=1.3.0,<2.0.0',
+    "invenio-app>=1.3.0,<2.0.0",
     "psycopg2-binary>=2.8.6",
 ]
 
@@ -53,6 +53,8 @@ install_requires = [
     "invenio-i18n>=1.2.0",
     "elasticsearch_dsl>=7.2.1",
     "invenio_search>=1.3.1",
+    "invenio_app_rdm>=0.18.8",
+    "sqlalchemy-continuum>=1.3.11",
 ]
 
 packages = find_packages()