feat: Allowed user to select amount of logs per page

lib/public/components/Pagination/amountSelector.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+import { h } from '/js/src/index.js';
+import { iconCaretBottom } from '/js/src/icons.js';
+
+/**
+ * Returns a collection of buttons for the available amounts within the dropdown
+ * @param {Function} onclick The method to be triggered when an item is clicked
+ * @param {Array} amounts The numerical options available
+ * @return {vnode} The individual items in the dropdown
+ */
+const mapAmounts = (onclick, amounts) =>
+    amounts.map((amount) => h('.menu-item', { onclick: () => onclick(amount) }, amount));
+
+/**
+ * Returns the amount selector dropdown
+ * @param {Function} onclickDropdown The method to be triggered when the dropdown is clicked
+ * @param {Function} onclickAmount The method to be triggered when an item in the dropdown is clicked
+ * @param {Boolean} dropdownVisible Whether the dropdown menu is expanded or not
+ * @param {Array} amounts The numerical options available in the dropdown menu
+ * @param {Number} itemsPerPage The currently set amount of items per page for pagination
+ * @return {vnode} The full dropdown including all options and a display of currently set amount
+ */
+const amountSelector = (onclickDropdown, onclickAmount, dropdownVisible, amounts, itemsPerPage) =>
+    h(`.dropdown${dropdownVisible ? '.dropdown-open' : ''}#amountSelector`, [
+        h('button.btn', { onclick: onclickDropdown }, `Amount per page: ${itemsPerPage} `, iconCaretBottom()),
+        h('.dropdown-menu', mapAmounts(onclickAmount, amounts)),
+    ]);
+
+export default amountSelector;

lib/public/components/Pagination/index.js

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import pageSelector from './pageSelector.js';
+import amountSelector from './amountSelector.js';
+
+export { pageSelector, amountSelector };

lib/public/components/PageSelector/index.js → lib/public/components/Pagination/pageSelector.js

@@ -23,7 +23,7 @@ const MAX_VISIBLE_PAGES = 5;
  * @return {Array} A collection of vnodes containing the individual page buttons
  */
 const getPageButtons = (pages, selectedPage, onclick) =>
-    pages.map((page) => h(`button.btn.btn-tab.mh1 ${page === selectedPage && 'selected'}`, {
+    pages.map((page) => h(`button.btn.btn-tab.mh1 ${page === selectedPage ? 'selected' : ''}`, {
         onclick: () => onclick(page),
     }, page));
 

lib/public/views/Logs/Logs.js

@@ -29,8 +29,9 @@ export default class Overview extends Observable {
         this.filteredData = [];
         this.moreFilters = false;
 
-        this.selectedPage = 1;
+        this.amountDropdownVisible = false;
         this.logsPerPage = 10;
+        this.selectedPage = 1;
         this.totalPages = 1;
 
         this.error = false;
@@ -45,14 +46,14 @@ export default class Overview extends Observable {
      * @returns {undefined} Injects the data object with the response data
      */
     async fetchAllLogs(offset = 0) {
-        const endpoint = `/api/logs?page[offset]=${offset}&page[limit]=${this.logsPerPage}&sort[id]=asc`;
+        const endpoint = `/api/logs?page[offset]=${offset}&page[limit]=${this.logsPerPage}`;
         const response = await fetchClient(endpoint, { method: 'GET' });
         const result = await response.json();
 
         if (result.data) {
             this.data = result.data;
             this.filteredData = result.data;
-            this.totalPages = result.meta.page.total;
+            this.totalPages = result.meta.page.pageCount;
             this.error = false;
         } else {
             this.error = true;
@@ -177,11 +178,11 @@ export default class Overview extends Observable {
     }
 
     /**
-     * Getter for selected page
-     * @returns {Number} Returns the number of the page which will be used for pagination
+     * Getter for visible log dropdown
+     * @returns {Number} Returns if the dropdown for choosing an amount of logs should be visible
      */
-    getSelectedPage() {
-        return this.selectedPage;
+    isAmountDropdownVisible() {
+        return this.amountDropdownVisible;
     }
 
     /**
@@ -192,6 +193,14 @@ export default class Overview extends Observable {
         return this.logsPerPage;
     }
 
+    /**
+     * Getter for the currently selected page
+     * @returns {Number} The currently selected page
+     */
+    getSelectedPage() {
+        return this.selectedPage;
+    }
+
     /**
      * Getter for total pages
      * @returns {Number} Returns the total amount of pages available for the page selector
@@ -289,13 +298,40 @@ export default class Overview extends Observable {
     }
 
     /**
-     * Sets the page chosen through the page selector for usage in pagination
+     * Toggles the visibility of the menu within the log amounts dropdown
+     * @return {Boolean} The new state of the amounts dropdown
+     */
+    toggleLogsDropdownVisible() {
+        this.amountDropdownVisible = !this.amountDropdownVisible;
+        this.notify();
+    }
+
+    /**
+     * Sets how many logs are visible per a page, in accordance with the page selector
+     * @param {Number} amount The amount of logs that should be shown per page
+     * @return {Number} The first page of the new logs, totalling the amount set by the user
+     */
+    setLogsPerPage(amount) {
+        if (this.logsPerPage !== amount) {
+            this.logsPerPage = amount;
+            this.selectedPage = 1;
+            this.fetchAllLogs((this.selectedPage - 1) * amount);
+        }
+
+        this.amountDropdownVisible = false;
+        this.notify();
+    }
+
+    /**
+     * Sets the page chosen through the page selector for usage in pagination, and re-fetches data based on this
      * @param {Number} page The chosen page number
      * @return {Number} The chosen page number
      */
     setSelectedPage(page) {
-        this.selectedPage = page;
-        this.fetchAllLogs((this.selectedPage - 1) * this.logsPerPage);
-        this.notify();
+        if (this.selectedPage !== page) {
+            this.selectedPage = page;
+            this.fetchAllLogs((this.selectedPage - 1) * this.logsPerPage);
+            this.notify();
+        }
     }
 }

lib/public/views/Logs/Overview/index.js

@@ -14,9 +14,11 @@ import { h } from '/js/src/index.js';
 import filters from '../../../components/Filters/index.js';
 import table from '../../../components/Table/index.js';
 import spinner from '../../../components/common/spinner.js';
-import pageSelector from '../../../components/PageSelector/index.js';
+import { amountSelector, pageSelector } from '../../../components/Pagination/index.js';
 import ACTIVE_COLUMNS from '../ActiveColumns/index.js';
 
+const AVAILABLE_LOG_AMOUNTS = [5, 10, 20];
+
 /**
  * Table row header
  * @param {object} model Pass the model to access the defined functions
@@ -25,6 +27,9 @@ import ACTIVE_COLUMNS from '../ActiveColumns/index.js';
 const logOverviewScreen = (model) => {
     const data = model.logs.getData();
     const tags = model.logs.getTagCounts();
+
+    const amountDropdownVisible = model.logs.isAmountDropdownVisible();
+    const logsPerPage = model.logs.getLogsPerPage();
     const totalPages = model.logs.getTotalPages();
     const selectedPage = model.logs.getSelectedPage();
 
@@ -37,9 +42,11 @@ const logOverviewScreen = (model) => {
                     onclick: () => model.router.go(`?page=entry&id=${entry.id}`),
                 })),
                 h('.flex-row.justify-between.mv3', [
-                    h(''),
+                    h('.w-15', amountSelector(() =>
+                        model.logs.toggleLogsDropdownVisible(), (amount) =>
+                        model.logs.setLogsPerPage(amount), amountDropdownVisible, AVAILABLE_LOG_AMOUNTS, logsPerPage)),
                     pageSelector(totalPages, selectedPage, (page) => model.logs.setSelectedPage(page)),
-                    h('button.btn.btn-primary#create', {
+                    h('button.btn.btn-primary.w-15#create', {
                         onclick: () => model.router.go('/?page=create-log-entry'),
                     }, 'Add Entry'),
                 ]),