From 013b1a172f52d543af2260f3a788fefd6131cb1d Mon Sep 17 00:00:00 2001
From: Ferran Recio <ferran@moodle.com>
Date: Tue, 18 Jul 2023 18:02:33 +0200
Subject: [PATCH] MDL-78665 output: add default template to choicelist

The choicelist output class is designed to represent a user choice in
several formats like a dropdown or subpanel. In general, other
components are free to render the choice in its own way. However, to
simplify the logic the choicelist now provide a default template to be
used in any div or panel.
---
 lib/classes/output/choicelist.php       |  13 ++-
 lib/templates/local/choicelist.mustache | 130 ++++++++++++++++++++++++
 2 files changed, 142 insertions(+), 1 deletion(-)
 create mode 100644 lib/templates/local/choicelist.mustache

diff --git a/lib/classes/output/choicelist.php b/lib/classes/output/choicelist.php
index a459c88e7fc..6f3a032507c 100644
--- a/lib/classes/output/choicelist.php
+++ b/lib/classes/output/choicelist.php
@@ -18,6 +18,7 @@ namespace core\output;
 
 use renderable;
 use renderer_base;
+use core\output\named_templatable;
 
 /**
  * A generic user choice output class.
@@ -29,7 +30,7 @@ use renderer_base;
  * @copyright  2023 Ferran Recio <ferran@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
-class choicelist implements renderable {
+class choicelist implements renderable, named_templatable {
 
     /** @var object[] The user choices. */
     protected $options = [];
@@ -185,4 +186,14 @@ class choicelist implements renderable {
             'hasoptions' => !empty($options),
         ];
     }
+
+    /**
+     * Get the name of the template to use for this templatable.
+     *
+     * @param renderer_base $renderer The renderer requesting the template name
+     * @return string
+     */
+    public function get_template_name(renderer_base $renderer): string {
+        return 'core/local/choicelist';
+    }
 }
diff --git a/lib/templates/local/choicelist.mustache b/lib/templates/local/choicelist.mustache
new file mode 100644
index 00000000000..5b03d2fb560
--- /dev/null
+++ b/lib/templates/local/choicelist.mustache
@@ -0,0 +1,130 @@
+{{!
+    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/>.
+}}
+{{!
+    @template core/local/choicelist
+
+    Default template for a choicelist object.
+
+    Classes required for JS:
+    * none
+
+    Context variables required for this template:
+    * buttoncontent String - the dropdown trigger button content.
+    * choices Array - the status options.
+
+    Example context (json):
+    {
+        "hasoptions": true,
+        "dialogcontent": "Dialog content",
+        "options": [
+            {
+                "optionid": "option1",
+                "value": "value1",
+                "name": "First option",
+                "description": "First option description",
+                "hasicon": false,
+                "first": true,
+                "optionnumber": 1,
+                "optionuniqid": "option1uniqid",
+                "selected": true
+            },
+            {
+                "optionid": "option2",
+                "value": "value2",
+                "name": "Second option",
+                "description": "Second option description",
+                "icon": {
+                    "extraclasses": "iconhelp",
+                    "attributes": [
+                        {"name": "src", "value": "../../../pix/help.svg"},
+                        {"name": "alt", "value": "Help icon"}
+                    ]
+                },
+                "hasicon": true,
+                "optionnumber": 2,
+                "optionuniqid": "option2uniqid"
+            },
+            {
+                "optionid": "option3",
+                "value": "value3",
+                "name": "Third option",
+                "description": "Third option description",
+                "icon": {
+                    "extraclasses": "iconhelp",
+                    "attributes": [
+                        {"name": "src", "value": "../../../pix/help.svg"},
+                        {"name": "alt", "value": "Help icon"}
+                    ]
+                },
+                "hasicon": true,
+                "disabled": true,
+                "optionnumber": 3,
+                "optionuniqid": "option3uniqid"
+            }
+        ]
+    }
+}}
+<div class="d-flex flex-column choicelist" role="listbox">
+    {{#options}}
+    <div
+        class="d-flex flex-row align-items-start p-2 position-relative rounded {{!
+            }} {{#disabled}} dimmed_text {{/disabled}} {{!
+            }} {{#selected}} bg-light selected {{/selected}}"
+        data-optionnumber="{{optionnumber}}"
+        data-selected="{{selected}}"
+    >
+        {{#icon}}
+        <div class="option-icon">
+            {{>core/pix_icon}}
+        </div>
+        {{/icon}}
+        <div class="option-select-indicator">
+            {{#selected}}
+                {{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
+            {{/selected}}
+            {{^selected}}
+                {{#pix}} i/uncheckedcircle{{/pix}}
+            {{/selected}}
+        </div>
+        <div class="option-name">
+            <a
+                class="stretched-link text-wrap {{!
+                    }} {{#disabled}} disabled {{/disabled}} {{!
+                    }} {{#selected}} selected disabled {{/selected}}"
+                role="option"
+                {{#selected}} aria-selected="true" {{/selected}}
+                {{#description}} aria-describedby="{{optionuniqid}}" {{/description}}
+                data-value="{{value}}"
+                {{#hasurl}} href="{{{url}}}" {{/hasurl}}
+                {{! If there is no url, supose JS will handle it somehow. }}
+                {{^hasurl}} href="#" {{/hasurl}}
+                {{#disabled}} tabindex="-1" {{/disabled}}
+                {{#extras}}
+                    {{attribute}}="{{value}}"
+                {{/extras}}
+            >
+                {{name}}
+            </a>
+            {{#description}}
+            <div id="{{optionuniqid}}" class="option-description small text-muted text-wrap">
+                {{{description}}}
+            </div>
+            {{/description}}
+        </div>
+    </div>
+    {{/options}}
+</div>