Merge pull request #29 from learnweb/enhance/groupedletters

Group letters by date

Author: TamaroWalter

amd/build/filtercontroller.min.js

@@ -46,15 +46,38 @@ export function init() {
                     let letterfilter = letter.classList.contains('ts_letterfilter_approved');
 
                     // If all filters approve the letter, show the letter.
-                    if (coursefilter && timefilter && letterfilter) {
-                        letter.style.display = 'block';
-                    } else {
-                        letter.style.display = 'none';
-                    }
+                    letter.style.display = (coursefilter && timefilter && letterfilter) ? 'block' : 'none';
+
+                    // Check if the letters group should be visible or not.
+                    updatelettergroup(letter);
                 }
             });
         });
 
         observer.observe(letter, {attributes: true});
     });
 }
+
+/**
+ * Helper function that checks if a letter group should still be visible. Is used if a filter is applied
+ * that could change the visibility of one letter and therefore the letters group.
+ * @param {HTMLElement} letter
+ */
+function updatelettergroup(letter) {
+    // Get the letters group.
+    const group = letter.closest('.ts-lettergroup');
+    if (!group) {
+        return;
+    }
+
+    // Check every group letters visibility.
+    const letters = group.querySelectorAll('.ts-letter-box > *');
+    const anyVisible = Array.from(letters).some(el =>
+        el.classList.contains('ts_coursefilter_approved') &&
+        el.classList.contains('ts_timefilter_approved') &&
+        el.classList.contains('ts_letterfilter_approved')
+    );
+
+    // Group only gets shown if at least one element is visible.
+    group.style.display = anyVisible ? 'block' : 'none';
+}

amd/build/filtercontroller.min.js.map

@@ -0,0 +1,68 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * JavaScript for the letter group.
+ *
+ * @module     block_townsquare/lettergroup
+ * @copyright  2025 Tamaro Walter
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+const letterboxes = document.getElementsByClassName('ts-letter-box');
+
+const Selectors = {
+    actions: {
+        collapsegroup: '[data-action="block_townsquare/collapse_group"]',
+    },
+};
+
+/**
+ * Init function. Adds event listener to orientation marker of letter group to enable
+ * collapsing a letter group.
+ */
+export function init() {
+    letterboxes.forEach(
+        (element) => {
+            element.style.maxHeight = `${element.scrollHeight}px`;
+            element.setAttribute('expanded', 'true');
+        }
+    );
+
+    document.addEventListener('click', e => {
+        const group = e.target.closest(Selectors.actions.collapsegroup);
+        if (group) {
+            const icon = group.querySelector('i');
+            let groupid = group.dataset.groupid;
+            letterboxes.forEach(
+                (element) => {
+                    if (element.dataset.groupid === groupid) {
+                        if (element.getAttribute('expanded') === 'true') {
+                            icon.classList.remove('fa-chevron-down');
+                            icon.classList.add('fa-chevron-up');
+                            element.style.maxHeight = '0px';
+                            element.setAttribute('expanded', 'false');
+                        } else {
+                            icon.classList.remove('fa-chevron-up');
+                            icon.classList.add('fa-chevron-down');
+                            element.style.maxHeight = `${element.scrollHeight}px`;
+                            element.setAttribute('expanded', 'true');
+                        }
+                    }
+                }
+            );
+        }
+    });
+}

amd/build/lettergroup.min.js

@@ -57,6 +57,7 @@ public function get_content(): stdClass {
         $this->page->requires->js_call_amd('block_townsquare/timefilter', 'init');
         $this->page->requires->js_call_amd('block_townsquare/letterfilter', 'init');
         $this->page->requires->js_call_amd('block_townsquare/filtercontroller', 'init');
+        $this->page->requires->js_call_amd('block_townsquare/lettergroup', 'init');
         $this->page->requires->js_call_amd('block_townsquare/usersettings_save', 'init', [$USER->id, $usersettings]);
         $this->page->requires->js_call_amd('block_townsquare/usersettings_reset', 'init', [$USER->id]);
         return $this->content;