Add collections browse

invenio_app_rdm/communities_ui/templates/semantic-ui/invenio_communities/collections/collection.html

@@ -8,6 +8,9 @@
 #}
 
 {% extends "invenio_communities/details/base.html" %}
+{% from "invenio_communities/collections/macros.html" import render_depth_one_collection %}
+
+{% set active_community_header_menu_item= 'browse' %}
 
 {%- block javascript %}
 {{ super() }}
@@ -16,13 +19,42 @@
 
 {%- block page_body %}
 {{ super() }}
-<div class="ui container fluid theme-tertiary page-subheader rel p-10 mr-0-mobile ml-0-mobile">
-  <h1 class="ui container">
-    {{ collection.title }}
-  </h1>
+{% set root_collection=collection[collection.root] %}
+<div class="ui container fluid page-subheader rel p-10 mr-0-mobile ml-0-mobile">
+  <div class="collection-header ui container">
+    <h1 class="ui medium header">
+      {%- if logo -%}
+        <img src="{{ logo }}" width="45" height="45" alt="Collection logo"/>
+      {%- endif -%}
+      <div class="content">{{ root_collection.title }}</div>
+    </h1>
+  </div>
+</div>
+<!-- Breadcrumbs -->
+<div class="ui container mb-0">
+  <div class="ui breadcrumb">
+    <a class="section"
+      href="{{ url_for('invenio_app_rdm_communities.communities_browse', pid_value=community.slug ) }}">
+      {{ _("Browse") }}
+    </a>
+    <i class="angle right icon divider mr-0" aria-hidden="true"></i>
+
+    {% if root_collection.breadcrumbs %}
+    {%- for breadcrumb in root_collection.breadcrumbs -%}
+    <a class="section" href="{{ breadcrumb.link }}">
+      {{ breadcrumb.title }}
+    </a>
+    {% if not loop.last %}
+    <i class="angle right icon divider mr-0" aria-hidden="true"></i>
+    {% endif %}
+    {%- endfor -%}
+    {%- endif -%}
+  </div>
 </div>
+<div class="ui divider mt-0 mb-0" aria-hidden="true"></div>
+<!-- Collection record search -->
 <div id="collection-search"
-  data-invenio-search-config='{{search_app_collection_config(app_id="InvenioAppRDM.CollectionsSearch", endpoint=collection.links.search, hidden_params=[["q", collection.query]]) | tojson }}'
+  data-invenio-search-config='{{search_app_collection_config(app_id="InvenioAppRDM.CollectionsSearch", endpoint=root_collection["links"]["search"], hidden_params=[["collection_id", root_collection["id"]]]) | tojson }}'
   data-permissions='{{ permissions | tojson }}'>
 </div>
 {%- endblock page_body %}

invenio_app_rdm/communities_ui/templates/semantic-ui/invenio_communities/collections/macros.html

@@ -0,0 +1,43 @@
+{% macro render_depth_one_collection(community, tree, collection) %}
+{% set root_collection=collection[collection.root] %}
+<div class="ui card borderless facet mt-0 mb-0 rel-ml-1">
+  <div class="content rel-mb-1">
+    {% set logo_url = url_for("static", filename="images/collections/" ~ root_collection.slug ~ ".jpg") %}
+    <div class="ui grid">
+      <div class="four wide column collection-logo mr-0 computer only">
+        <img src="{{ logo_url }}" width="45" height="auto" alt=""
+          onerror="null;"/>
+      </div>
+      <div class="ten wide column collection-header middle aligned left floated pl-0">
+        <h4 class="theme-primary-text">
+          <a
+            href='{{ url_for("invenio_app_rdm_communities.community_collection", pid_value=community.slug, collection_slug=root_collection.slug, tree_slug=tree.slug )}}'>
+            {{ root_collection.title }}
+          </a>
+        </h4>
+      </div>
+      <div class="two wide column collection-number middle aligned">
+        <label class="ui small label middle aligned">{{ root_collection.num_records }}</label>
+      </div>
+    </div>
+
+
+  </div>
+  {%- if root_collection.children -%}
+  <div class="content">
+    {%- for child_id in root_collection.children -%}
+    {% set child_collection = collection[child_id] %}
+    <div class="ui container mb-0 mt-0 rel-ml-1">
+      <h5 class="theme-primary-text">
+        <a href='{{ url_for("invenio_app_rdm_communities.community_collection", pid_value=community.slug,
+          collection_slug=child_collection.slug, tree_slug=tree.slug )}}'>
+          {{ child_collection.title }}
+        </a>
+        <label class="ui tiny text-muted">{{ "(" ~ child_collection.num_records ~ ")"}}</label>
+      </h5>
+    </div>
+    {%- endfor -%}
+  </div>
+  {%- endif -%}
+</div>
+{%- endmacro %}

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

@@ -8,27 +8,42 @@
 #}
 
 {% extends "invenio_communities/details/base.html" %}
+{% from "invenio_communities/collections/macros.html" import render_depth_one_collection %}
 
 {% set active_community_header_menu_item= 'browse' %}
 {% set subcommunities_endpoint = community["links"]["subcommunities"] %}
 {% set community_slug = community["slug"] %}
 
 {%- block javascript %}
-    {{ super() }}
-    {{ webpack['invenio-communities-browse.js'] }}
+{{ super() }}
+{{ webpack['invenio-communities-browse.js'] }}
 {%- endblock %}
 
 {%- block page_body %}
 {{ super() }}
-<div id='invenio-browse-config' data-api-endpoint='{{ subcommunities_endpoint }}'
-    class="ui container communities-frontpage rel-mt-3 rel-mb-2">
-    <div class="flex">
-        <h2 class="ui header mb-0 align-self-center">{{ _('Subcommunities') }}</h2>
-        <a class="align-self-center rel-ml-1" href="{{url_for('invenio_communities.communities_subcommunities', pid_value=community_slug)}}">
-            {{ _('See all')}}
-        </a>
+{%- for tree_id, ctree in trees.items() -%}
+<div class="ui container theme-font rel-mt-3 rel-mb-2">
+  <h1 class="ui medium header mb-0 align-self-center">{{ ctree.title }}</h1>
+  <div class="ui divider mt-0"></div>
+  <div class="ui relaxed grid stackable">
+    {%- for collection in ctree.collections -%}
+    <div class="four wide column">
+      {{ render_depth_one_collection(community, ctree, collection) }}
     </div>
-    <div class="ui divider hidden"></div>
-    <div id="subcommunities-container"></div>
+    {%- endfor -%}
+  </div>
+</div>
+{%- endfor -%}
+<div id='invenio-browse-config' data-api-endpoint='{{ subcommunities_endpoint }}'
+  class="ui container theme-font communities-frontpage rel-mt-3 rel-mb-2">
+  <div class="flex">
+    <h1 class="ui medium header mb-0 align-self-center">{{ config.get("APP_RDM_SUBCOMMUNITIES_LABEL", _("Subcommunities")) }}</h1>
+    <a class="align-self-center rel-ml-1"
+      href="{{url_for('invenio_communities.communities_subcommunities', pid_value=community_slug)}}">
+      {{ _('See all')}}
+    </a>
+  </div>
+  <div class="ui divider mt-0"></div>
+  <div id="subcommunities-container"></div>
 </div>
 {%- endblock page_body %}

invenio_app_rdm/communities_ui/views/communities.py

@@ -11,14 +11,18 @@
 from flask import abort, g, redirect, request, url_for
 from invenio_communities.views.communities import (
     HEADER_PERMISSIONS,
-    MEMBERS_PERMISSIONS,
     _get_roles_can_invite,
     _get_roles_can_update,
     render_community_theme_template,
 )
 from invenio_communities.views.decorators import pass_community
 from invenio_pages.proxies import current_pages_service
 from invenio_pages.records.errors import PageNotFoundError
+from invenio_rdm_records.collections import (
+    CollectionNotFound,
+    CollectionTreeNotFound,
+    LogoNotFoundError,
+)
 from invenio_rdm_records.proxies import (
     current_community_records_service,
     current_rdm_records,
@@ -117,13 +121,19 @@ def communities_browse(pid_value, community, community_ui):
     """Community browse page."""
     permissions = community.has_permissions_to(HEADER_PERMISSIONS)
 
+    collections_service = current_rdm_records.collections_service
+
+    trees_ui = collections_service.list_trees(
+        g.identity, community_id=community.id, depth=2
+    ).to_dict()
     return render_community_theme_template(
         "invenio_communities/details/browse/index.html",
         theme=community_ui.get("theme", {}),
         community=community_ui,
         permissions=permissions,
         roles_can_update=_get_roles_can_update(community.id),
         roles_can_invite=_get_roles_can_invite(community.id),
+        trees=trees_ui,
     )
 
 
@@ -151,29 +161,32 @@ def community_static_page(pid_value, community, community_ui, **kwargs):
 
 @pass_community(serialize=True)
 def community_collection(
-    community, community_ui, pid_value, tree_slug, collection_slug
+    community, community_ui, pid_value, tree_slug=None, collection_slug=None
 ):
     """Render a community collection page."""
     collections_service = current_rdm_records.collections_service
-    collection = None
     try:
-        collection = collections_service.read_slug(
-            g.identity,
+        collection = collections_service.read(
+            identity=g.identity,
             community_id=community.id,
             slug=collection_slug,
             tree_slug=tree_slug,
         )
-    except Exception:
+    except (CollectionNotFound, CollectionTreeNotFound):
         abort(404)
 
-    if not collection:
-        abort(404)
+    try:
+        logo = collections_service.read_logo(g.identity, collection_slug)
+    except LogoNotFoundError:
+        logo = None
 
-    collection_dict = collection.to_dict()
+    collection_ui = collection.to_dict()
     return render_community_theme_template(
         "invenio_communities/collections/collection.html",
-        collection=collection,
-        collection_dict=collection_dict,
+        collection=collection_ui,
+        # TODO _collection should not be accessed from here
+        tree=collection._collection.collection_tree,
+        logo=logo,
         community=community,
         permissions=community.has_permissions_to(HEADER_PERMISSIONS),
         theme=community_ui.get("theme", {}),

invenio_app_rdm/config.py

@@ -1445,3 +1445,7 @@ def github_link_render(record):
 
 ADMINISTRATION_DISPLAY_VERSIONS = [("invenio-app-rdm", f"v{__version__}")]
 """Show the InvenioRDM version in the administration panel."""
+
+
+APP_RDM_SUBCOMMUNITIES_LABEL = "Subcommunities"
+"""Label for the subcommunities in the community browse page."""

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

@@ -19,7 +19,7 @@ const apiEndpoint = _get(domContainer.dataset, "apiEndpoint");
 if (subCommunitiesContainer) {
   ReactDOM.render(
     <CommunitiesCardGroup
-      fetchDataUrl={apiEndpoint}
+      fetchDataUrl={`${apiEndpoint}?sort=oldest&page=1&size=5`}
       emptyMessage="There are no child communities."
       defaultLogo="/static/images/square-placeholder.png"
     />,

invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/globals/site.overrides

@@ -544,3 +544,11 @@ dl.details-list {
     }
   }
 }
+
+
+.collection-header > .ui.medium.header, h4 {
+  font-weight: @bold;
+  .content {
+    vertical-align: sub;
+  }
+}

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

@@ -1,17 +1,38 @@
 
     {% if community %}
-    {% set options = [
-        {
-            "key": "communities",
-            "text": _("In this community"),
-            "value": url_for("invenio_app_rdm_communities.communities_detail", pid_value=community.slug),
-        },
-        {
-            "key": "records",
-            "text": _("All") + " " + config.THEME_SITENAME,
-            "value": url_for("invenio_search_ui.search"),
-        }]
-     %}
+        {% if collection %}
+          {% set root_collection=collection[collection.root] %}
+          {% set options = [
+            {
+              "key": "collections",
+              "text": _("In this collection"),
+              "value": url_for("invenio_app_rdm_communities.community_collection", pid_value=community.slug, collection_slug=root_collection.slug, tree_slug=tree.slug)
+            },
+            {
+                "key": "communities",
+                "text": _("In this community"),
+                "value": url_for("invenio_app_rdm_communities.communities_detail", pid_value=community.slug),
+            },
+            {
+                "key": "records",
+                "text": _("All") + " " + config.THEME_SITENAME,
+                "value": url_for("invenio_search_ui.search"),
+            }]
+          %}
+        {% else %}
+          {% set options = [
+            {
+                "key": "communities",
+                "text": _("In this community"),
+                "value": url_for("invenio_app_rdm_communities.communities_detail", pid_value=community.slug),
+            },
+            {
+                "key": "records",
+                "text": _("All") + " " + config.THEME_SITENAME,
+                "value": url_for("invenio_search_ui.search"),
+            }]
+          %}
+        {% endif %}
     {% else %}
     {% set options = [
               {