frontpage: Replace recent uploads React version with jinja version

invenio_app_rdm/config.py

@@ -760,6 +760,9 @@ def github_link_render(record):
 
 APP_RDM_RECORDS_EXPORT_URL = "/records/<pid_value>/export/<export_format>"
 
+APP_RDM_RECENT_UPLOADS_AVAILABLE = True
+""" Fetch most recent uploads for the front page """
+
 APP_RDM_DEPOSIT_FORM_DEFAULTS = {
     "publication_date": lambda: datetime.now().strftime("%Y-%m-%d"),
     "rights": [

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/components/RecordsResultsListItem.js

@@ -83,13 +83,13 @@ class RecordsResultsListItem extends Component {
         <Item key={key ?? result.id}>
           <Item.Content>
             <Item.Extra className="labels-actions">
-              <Label size="tiny" className="primary">
+              <Label horizontal size="small" className="primary">
                 {publicationDate} ({version})
               </Label>
-              <Label size="tiny" className="neutral">
+              <Label horizontal size="small" className="neutral">
                 {resourceType}
               </Label>
-              <Label size="tiny" className={`access-status ${accessStatusId}`}>
+              <Label horizontal size="small" className={`access-status ${accessStatusId}`}>
                 {accessStatusIcon && <Icon name={accessStatusIcon} />}
                 {accessStatus}
               </Label>

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/frontpage/index.js

@@ -1,23 +1,5 @@
 // This file is part of InvenioRDM
-// Copyright (C) 2022 CERN.
+// Copyright (C) 2023 CERN.
 //
 // Invenio 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 ReactDOM from "react-dom";
-import { RecordsListOverridable } from "./RecordsList";
-import { OverridableContext, overrideStore } from "react-overridable";
-
-const overriddenComponents = overrideStore.getAll();
-const recordsListContainer = document.getElementById("records-list");
-const title = recordsListContainer.dataset.title;
-const fetchUrl = recordsListContainer.dataset.fetchUrl;
-const appName = "InvenioAppRDM.RecordsList";
-
-ReactDOM.render(
-  <OverridableContext.Provider value={overriddenComponents}>
-    <RecordsListOverridable title={title} fetchUrl={fetchUrl} appName={appName} />
-  </OverridableContext.Provider>,
-  recordsListContainer
-);

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/theme.js

@@ -84,6 +84,11 @@ $invenioMenu.on("keydown", (event) => {
   }
 });
 
+// Recent uploads popup
+const $statsPopups = $('#records-list .label.stats-popup');
+if($statsPopups) $statsPopups.popup();
+
+// Search bar
 const headerSearchbar = document.getElementById("header-search-bar");
 const searchBarOptions = JSON.parse(headerSearchbar.dataset.options);
 

invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/views/item.overrides

@@ -191,3 +191,9 @@
     align-self: center;
   }
 }
+
+#records-list .ui.items {
+  li.item {
+    padding-left: 0 !important; // Needed because of override for li ~ .item
+  }
+}

invenio_app_rdm/theme/templates/semantic-ui/invenio_app_rdm/frontpage.html

@@ -34,7 +34,9 @@
         <div class="eleven wide computer sixteen wide tablet column">
 
           {% block main_column_content %}
-            {{ records_list() }}
+            {% if recent_uploads %}
+              {{ records_list(records=recent_uploads) }}
+            {% endif %}
           {% endblock main_column_content %}
 
         </div>

invenio_app_rdm/theme/templates/semantic-ui/invenio_app_rdm/macros/creators.html

@@ -0,0 +1,54 @@
+{#
+  Copyright (C) 2023 CERN
+
+  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.
+#}
+
+{% macro creators(creators=None) %}
+  {% for creator in creators %}
+    {% set creator_name = creator.person_or_org.get("name", "No name") if creator.person_or_org %}
+    {% set ids = creator.person_or_org.get("identifiers", []) if creator.person_or_org %}
+
+    <span class="creatibutor-wrap separated">
+      <a
+        class="creatibutor-link"
+        href="/search?q=metadata.creators.person_or_org.name:{{ creator_name }}"
+        title="{{ creator_name }}: {{_('Search')}}"
+      >
+        <span class="creatibutor-name">{{ creator_name }}</span>
+      </a>
+
+      {{ creator_icons(creator_name=creator_name, ids=ids) }}
+    </span>
+  {% endfor%}
+{% endmacro %}
+
+
+{% macro creator_icons(creator_name=None, ids=None) %}
+  {% for id in ids %}
+    {% if id.scheme == "orcid" %}
+      {% set link = "https://orcid.org/{identifier}".format(identifier=id.identifier) %}
+      {% set link_title = _("ORCID profile") %}
+      {% set icon = "/static/images/orcid.svg" %}
+
+    {% elif id.scheme == "ror" %}
+      {% set link = "https://ror.org/{identifier}".format(identifier=id.identifier) %}
+      {% set link_title = _("ROR profile") %}
+      {% set icon = "/static/images/ror-icon.svg" %}
+
+    {% elif id.scheme == "gnd" %}
+      {% set link = "https://d-nb.info/gnd/{identifier}".format(identifier=id.identifier) %}
+      {% set link_title = _("GND profile") %}
+      {% set icon = "/static/images/gnd-icon.svg" %}
+    {% endif %}
+    <a
+      class="no-text-decoration mr-0"
+      href="{{ link }}"
+      aria-label="{{ creator_name }}: {{ link_title }}"
+      title="{{ creator_name }}: {{ link_title }}"
+    >
+      <img class="inline-id-icon ml-5" src="{{ icon }}" alt="" />
+    </a>
+  {% endfor %}
+{% endmacro %}

invenio_app_rdm/theme/templates/semantic-ui/invenio_app_rdm/macros/record_item.html

@@ -0,0 +1,105 @@
+{#
+  Copyright (C) 2023 CERN
+
+  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.
+#}
+
+{% from "invenio_app_rdm/macros/creators.html" import creators %}
+
+{% macro record_item(record=None) %}
+  <li class="item">
+    <div class="content">
+
+      {# Top labels #}
+      <div class="extra labels-actions">
+        <div class="ui small horizontal primary label">
+          {{ record.ui.publication_date_l10n_long }} ({{ record.ui.version }})
+        </div>
+        <div class="ui small horizontal neutral label">
+          {{ record.ui.resource_type.title_l10n }}
+        </div>
+
+        {% set access_status_id = record.ui.access_status.get("id", "open") %}
+        {% set access_status = record.ui.access_status.get("title_l10n", _("Open")) %}
+        {% set access_status_icon = record.ui.access_status.get("icon", "unlock") %}
+
+        <div class="ui small horizontal label access-status {{ access_status_id }}">
+            <i class="icon {{ access_status_icon }}" aria-hidden="true"></i>
+            {{ access_status }}
+        </div>
+      </div>
+
+      {# Title #}
+      <div class="header">
+        <a href="/records/{{ record.id }}">{{ record.metadata.title }}</a>
+      </div>
+
+      {# Creators #}
+      <div class="ui item creatibutors">
+        {% set creators_list = record.ui.creators.creators %}
+        {% set creators_sliced = creators_list[:3] %}
+
+        {{ creators(creators=creators_sliced) }}
+      </div>
+
+      {# Description #}
+      <p class="description">
+        {% set description = record.ui.get("description_stripped", "No description") %}
+
+        {{ description | truncate(length=350, end='...') }}
+      </p>
+
+      <div class="extra">
+        <div class="flex justify-space-between align-items-end">
+          {# Publishing details #}
+          {% set created_date = record.ui.created_date_l10n_long %}
+          {% set publishing_journal = record.ui.publishing_information.get("journal") if record.ui.publishing_information %}
+
+          <small>
+            {% if created_date %}
+              {{ _("Uploaded on:")}} {{ created_date }}
+            {% endif %}
+
+            {% if publishing_journal %}
+              {{ _("Published in:") }} {{ publishing_journal }}
+            {% endif %}
+          </small>
+
+          {# Versions info #}
+          {% if record.versions.index > 1 %}
+            <small>
+              <p>{{ record.versions.index - 1 }} {{ _("more versions exist for this record") }}</p>
+            </small>
+          {% endif %}
+
+          {# Statistics #}
+          {% set unique_downloads = record.stats.all_versions.unique_downloads %}
+          {% set unique_views = record.stats.all_versions.unique_views %}
+
+          <small>
+            {% if unique_views is defined %}
+              <div class="ui transparent label stats-popup" data-variation="tiny">
+                <i class="ui eye icon" aria-label="{{ _('Unique views') }}"></i>
+                {{ unique_views }}
+              </div>
+              <div class="ui popup">
+                {{ _("Unique views") }}
+              </div>
+            {% endif %}
+
+            {% if unique_downloads is defined %}
+              <div class="ui transparent label stats-popup" data-variation="tiny">
+                <i class="ui download icon" aria-label="{{ _('Unique downloads') }}"></i>
+                {{ unique_downloads}}
+              </div>
+              <div class="ui popup">
+                {{ _("Unique downloads") }}
+              </div>
+            {% endif %}
+          </small>
+        </div>
+      </div>
+    </div>
+  </li>
+{% endmacro %}

invenio_app_rdm/theme/templates/semantic-ui/invenio_app_rdm/macros/records_list.html

@@ -1,48 +1,29 @@
 {#
-  Copyright (C) 2019-2022 CERN
+  Copyright (C) 2023 CERN
 
   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.
 #}
 
-{% macro records_list(
-    title="Recent uploads",
-    fetch_url="/api/records?sort=newest&size=10"
-  )
-%}
-  <div
-    id="records-list"
-    data-fetch-url="{{ fetch_url }}"
-    data-title="{{ title }}"
-  >
+{% from "invenio_app_rdm/macros/record_item.html" import record_item %}
 
-  <h2 class="ui header">{{ title }}</h2>
+{% macro records_list(title=_("Recent uploads"), records=None) %}
+  <div id="records-list" data-title="{{ title }}">
 
-  {% for n in range(10) %}
-    <div class="ui fluid placeholder rel-mt-3">
-      <div class="header">
-        <div class="line"></div>
-      </div>
+    <h2 class="ui header">{{ title }}</h2>
 
-      <div class="paragraph">
-        <div class="line"></div>
-      </div>
-
-      <div class="paragraph">
-        <div class="line"></div>
-        <div class="line"></div>
-      </div>
-
-      <div class="paragraph">
-        <div class="line"></div>
-      </div>
+    <div class="ui container rel-mb-2">
+      <ul class="ui divided link relaxed items pl-0">
+        {% for record in records %}
+          {{ record_item(record=record) }}
+        {% endfor %}
+      </ul>
     </div>
 
-    {% if n < 9 %}
-      <div class="ui divider rel-mt-2 rel-mb-2"></div>
-    {% endif %}
-  {% endfor %}
-</div>
-
-  {{ webpack["invenio-app-rdm-frontpage.js"]}}
+    <div class="ui center aligned container">
+      <a class="ui button" href="/search" aria-label="{{ _('See more records') }}">
+        {{ _("More") }}
+      </a>
+    </div>
+  </div>
 {% endmacro %}

invenio_app_rdm/theme/views.py

@@ -10,15 +10,17 @@
 
 """Routes for general pages provided by Invenio-App-RDM."""
 
-from flask import Blueprint, current_app, flash, render_template, request
+from flask import Blueprint, current_app, flash, g, render_template, request
 from flask_login import current_user
 from flask_menu import current_menu
 from invenio_db import db
 from invenio_i18n import get_locale
 from invenio_i18n import lazy_gettext as _
+from invenio_records_resources.resources.records.utils import search_preference
+from invenio_rdm_records.resources.serializers import UIJSONSerializer
+from invenio_rdm_records.proxies import current_rdm_records
 from invenio_users_resources.forms import NotificationsForm
 
-
 #
 # Registration
 #
@@ -64,9 +66,25 @@ def init_menu():
 #
 def index():
     """Frontpage."""
+    recent_uploads = []
+
+    if current_app.config["APP_RDM_RECENT_UPLOADS_AVAILABLE"]:
+        recent_uploads = current_rdm_records.records_service.search(
+            identity=g.identity,
+            params={ "sort": "newest", "size": 10 },
+            search_preference=search_preference(),
+            expand=False,
+        )
+
+    records_ui = []
+    for record in recent_uploads:
+        record_ui = UIJSONSerializer().dump_obj(record)
+        records_ui.append(record_ui)
+
     return render_template(
         current_app.config["THEME_FRONTPAGE_TEMPLATE"],
         show_intro_section=current_app.config["THEME_SHOW_FRONTPAGE_INTRO_SECTION"],
+        recent_uploads=records_ui,
     )