feat(endpoint-media): show media in files view

packages/endpoint-media/lib/controllers/files.js

@@ -1,7 +1,6 @@
 import HttpError from "http-errors";
 import mongodb from "mongodb";
-
-const { ObjectId } = mongodb;
+import { getPages } from "../utils.js";
 
 export const filesController = (application, publication) => ({
   /**
@@ -18,9 +17,23 @@ export const filesController = (application, publication) => ({
         throw new Error(response.__("errors.noDatabase.content"));
       }
 
+      const page = parseInt(request.query.page) || 1;
+      const limit = parseInt(request.query.limit) || 18;
+      const skip = (page - 1) * limit;
+
+      const files = await publication.media
+        .find()
+        .sort({ _id: -1 })
+        .skip(skip)
+        .limit(limit)
+        .toArray();
+
+      const count = await publication.media.countDocuments();
+
       response.render("files", {
         title: response.__("media.files.title"),
-        files: await publication.media.find().toArray(),
+        files,
+        pages: getPages(page, limit, count),
         parentUrl: `${publication.mediaEndpoint}/files/`,
       });
     } catch (error) {
@@ -39,7 +52,9 @@ export const filesController = (application, publication) => ({
   async view(request, response, next) {
     try {
       const { id } = request.params;
-      const file = await publication.media.findOne({ _id: new ObjectId(id) });
+      const file = await publication.media.findOne({
+        _id: new mongodb.ObjectId(id),
+      });
 
       if (!file) {
         throw new HttpError(404, "No file was found with this UUID");

packages/endpoint-media/lib/utils.js

@@ -6,6 +6,50 @@ import { getServerTimeZone } from "./date.js";
 
 const { format } = dateFnsTz;
 
+/**
+ * Generate pagination data
+ *
+ * @param {number} currentPage Current page
+ * @param {limit} limit Limit of items per page
+ * @param {count} count Count of all items
+ * @returns {object}
+ */
+export const getPages = (currentPage, limit, count) => {
+  // Pagination pages
+  const totalPages = Math.ceil(count / limit);
+  const nextPage = currentPage < totalPages ? currentPage + 1 : false;
+  const previousPage = currentPage > 0 ? currentPage - 1 : false;
+  const pageItems = [...Array(totalPages).keys()].map((item) => ({
+    current: item + 1 === currentPage,
+    href: `?${new URLSearchParams({ page: item + 1, limit })}`,
+    text: item + 1,
+  }));
+
+  // Pagination results
+  const resultsFrom = (currentPage - 1) * limit + 1;
+  let resultsTo = resultsFrom - 1 + limit;
+  resultsTo = resultsTo > count ? count : resultsTo;
+
+  return {
+    items: pageItems.length > 1 ? pageItems : false,
+    next: nextPage
+      ? {
+          href: `?${new URLSearchParams({ page: nextPage, limit })}`,
+        }
+      : false,
+    previous: previousPage
+      ? {
+          href: `?${new URLSearchParams({ page: previousPage, limit })}`,
+        }
+      : false,
+    results: {
+      from: resultsFrom,
+      to: resultsTo,
+      count,
+    },
+  };
+};
+
 /**
  * Generate random alpha-numeric string, 5 characters long
  *

packages/endpoint-media/views/files.njk

@@ -1,21 +1,12 @@
-{%- from "file/macro.njk" import file -%}
 {% extends "document.njk" %}
 
 {% block content %}
-{%- if files %}
-  <ol class="no-bullets">
-  {%- for item in files | reverse %}
-    <li>
-      {{ file({
-        title: item.properties.filename,
-        href: parentUrl + item._id,
-        icon: item.properties["post-type"],
-        meta: item.properties.url
-      }) }}
-    </li>
-  {%- endfor %}
-  </ol>
-{%- else -%}
+  {%- if files %}
+  {{ fileGrid({
+    items: files
+  }) }}
+  {{ pagination(pages) }}
+  {%- else -%}
   <p>{{ __("media.files.none") }}<p>
-{%- endif %}
+  {%- endif %}
 {% endblock %}