From e29cbbc715171d4e985070c3b68497f96549d5da Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongnv13@gmail.com>
Date: Thu, 21 Apr 2022 15:56:57 +0700
Subject: [PATCH] MDL-73774 timeline: Prevent ID duplication

---
 blocks/timeline/classes/output/main.php              | 11 +++++++++++
 blocks/timeline/templates/main.mustache              |  4 ++--
 blocks/timeline/templates/nav-view-selector.mustache |  4 ++--
 blocks/timeline/templates/view.mustache              |  4 ++--
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/blocks/timeline/classes/output/main.php b/blocks/timeline/classes/output/main.php
index 151cf294060..352242d341f 100644
--- a/blocks/timeline/classes/output/main.php
+++ b/blocks/timeline/classes/output/main.php
@@ -59,6 +59,12 @@ class main implements renderable, templatable {
      */
     public $limit;
 
+    /** @var int Number of timeline instances displayed. */
+    protected static $timelineinstances = 0;
+
+    /** @var int This timeline instance's ID. */
+    protected $timelineinstanceid = 0;
+
     /**
      * main constructor.
      *
@@ -70,6 +76,10 @@ class main implements renderable, templatable {
         $this->order = $order ? $order : BLOCK_TIMELINE_SORT_BY_DATES;
         $this->filter = $filter ? $filter : BLOCK_TIMELINE_FILTER_BY_7_DAYS;
         $this->limit = $limit ? $limit : BLOCK_TIMELINE_ACTIVITIES_LIMIT_DEFAULT;
+        // Increment the timeline instances count on initialisation.
+        self::$timelineinstances++;
+        // Assign this instance an ID based on the latest timeline instances count.
+        $this->timelineinstanceid = self::$timelineinstances;
     }
 
     /**
@@ -160,6 +170,7 @@ class main implements renderable, templatable {
         $filters = $this->get_filters_as_booleans();
         $offsets = $this->get_filter_offsets();
         $contextvariables = [
+            'timelineinstanceid' => $this->timelineinstanceid,
             'midnight' => usergetmidnight(time()),
             'coursepages' => [$formattedcourses],
             'urls' => [
diff --git a/blocks/timeline/templates/main.mustache b/blocks/timeline/templates/main.mustache
index c18fc23176e..b3f7ea87eb3 100644
--- a/blocks/timeline/templates/main.mustache
+++ b/blocks/timeline/templates/main.mustache
@@ -23,7 +23,7 @@
     {}
 }}
 
-<div id="block-timeline-{{uniqid}}" class="block-timeline" data-region="timeline">
+<div id="block-timeline-{{uniqid}}-{{timelineinstanceid}}" class="block-timeline" data-region="timeline">
     <div class="p-0 px-2">
         <div class="row no-gutters">
             <div class="mr-2 mb-1">
@@ -52,7 +52,7 @@ function(
     $,
     Main
 ) {
-    var root = $('#block-timeline-{{uniqid}}');
+    var root = $('#block-timeline-{{uniqid}}-{{timelineinstanceid}}');
     Main.init(root);
 });
 {{/js}}
diff --git a/blocks/timeline/templates/nav-view-selector.mustache b/blocks/timeline/templates/nav-view-selector.mustache
index da20e44cdb5..00820cfdb27 100644
--- a/blocks/timeline/templates/nav-view-selector.mustache
+++ b/blocks/timeline/templates/nav-view-selector.mustache
@@ -34,7 +34,7 @@
     <div id="menusortby" role="menu" class="dropdown-menu dropdown-menu-right list-group hidden" data-show-active-item data-skip-active-class="true">
         <a
             class="dropdown-item"
-            href="#view_dates_{{uniqid}}"
+            href="#view_dates_{{uniqid}}-{{timelineinstanceid}}"
             data-toggle="tab"
             data-filtername="sortbydates"
             {{#sorttimelinedates}}aria-current="true"{{/sorttimelinedates}}
@@ -45,7 +45,7 @@
         </a>
         <a
             class="dropdown-item"
-            href="#view_courses_{{uniqid}}"
+            href="#view_courses_{{uniqid}}-{{timelineinstanceid}}"
             data-toggle="tab"
             data-filtername="sortbycourses"
             {{#sorttimelinecourses}}aria-current="true"{{/sorttimelinecourses}}
diff --git a/blocks/timeline/templates/view.mustache b/blocks/timeline/templates/view.mustache
index a0fe296666a..359ce0b734e 100644
--- a/blocks/timeline/templates/view.mustache
+++ b/blocks/timeline/templates/view.mustache
@@ -50,7 +50,7 @@
 }}
 <div data-region="timeline-view">
     <div class="tab-content">
-        <div class="tab-pane {{#sorttimelinedates}}active show{{/sorttimelinedates}} fade" data-limit="{{limit}}" data-region="view-dates" id="view_dates_{{uniqid}}">
+        <div class="tab-pane {{#sorttimelinedates}}active show{{/sorttimelinedates}} fade" data-limit="{{limit}}" data-region="view-dates" id="view_dates_{{uniqid}}-{{timelineinstanceid}}">
             {{> block_timeline/view-dates }}
         </div>
         <div
@@ -63,7 +63,7 @@
             data-days-offset="{{daysoffset}}"
             data-no-events-url="{{urls.noevents}}"
             {{#overdue}}data-filter-overdue="{{overdue}}"{{/overdue}}
-            id="view_courses_{{uniqid}}"
+            id="view_courses_{{uniqid}}-{{timelineinstanceid}}"
         >
             {{> block_timeline/view-courses }}
         </div>