MDL-64786 analytics: Make the list of indicators collapsed by default
[moodle.git] / admin / tool / analytics / templates / models_list.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
4     Moodle is free software: you can redistribute it and/or modify
5     it under the terms of the GNU General Public License as published by
6     the Free Software Foundation, either version 3 of the License, or
7     (at your option) any later version.
9     Moodle is distributed in the hope that it will be useful,
10     but WITHOUT ANY WARRANTY; without even the implied warranty of
11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12     GNU General Public License for more details.
14     You should have received a copy of the GNU General Public License
15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 }}
17 {{!
18     @template tool_analytics/models_list
20     Template for models list.
22     Classes required for JS:
23     * The list od models wrapped within a id="predictionmodelslist" element.
25     Data attributes required for JS:
26     * [data-widget="toggle"] indicates the clickable element for expanding/collapsing
27       the list of indicators used by the given model.
29     Context variables required for this template:
30     * models: array - list of models to display
31         - id: int - model unique identifier
32         - name: object - data for the inplace editable element template
33         - target: string - name of the target associated with the model
34         - targetclass: string - fully qualified name of the target class
35         - targethelp: object - data for the help tooltip template
36         - enabled: bool - is the model enabled
37         - indicatorsnum: int - number of indicators
38         - indicators: array - list of indicators used by the model
39             + name: string - name of the indicator
40             + help: object - data for the help tooltip template
41         - insights: object - data for the single select template
42         - noinsights: string - text to display instead of insights
43     * warnings: array - list of data for notification warning template
44     * infos: array - list of data for notification info template
45     * createmodelurl: string - URL to create a new model
46     * importmodelurl: string - URL to import a model
48     Example context (json):
49     {
50         "models": [
51             {
52                 "id": 11,
53                 "name": {
54                     "component": "local_analyticsdemo",
55                     "itemtype": "modelname",
56                     "itemid": 42,
57                     "displayvalue": "Prevent devs at risk",
58                     "value": ""
59                 },
60                 "target": "Prevent devs at risk",
61                 "targetclass": "\\local_analyticsdemo\\analytics\\target\\dev_risk",
62                 "targethelp": {
63                     "title": "Help with Prevent devs at risk",
64                     "text": "This target blah blah ...",
65                     "url": "http://example.org/help",
66                     "linktext": "",
67                     "icon": {
68                         "extraclasses": "iconhelp",
69                         "attributes": [
70                             {"name": "src", "value": "../../../pix/help.svg"},
71                             {"name": "alt", "value": "Help icon"}
72                         ]
73                     }
74                 },
75                 "enabled": 1,
76                 "indicatorsnum": 2,
77                 "indicators": [
78                     {
79                         "name": "Indicator 1",
80                         "help": {
81                             "text": "This indicator blah blah ...",
82                             "title": "Help with Indicator 1",
83                             "url": "http://example.org/help",
84                             "linktext": "",
85                             "icon": {
86                                 "extraclasses": "iconhelp",
87                                 "attributes": [
88                                     {"name": "src", "value": "../../../pix/help.svg"},
89                                     {"name": "alt", "value": "Help icon"}
90                                 ]
91                             }
92                         }
93                     },
94                     {
95                         "name": "Indicator 2",
96                         "help": {
97                             "text": "This indicator blah blah ...",
98                             "title": "Help with Indicator 2",
99                             "url": "http://example.org/help",
100                             "linktext": "",
101                             "icon": {
102                                 "extraclasses": "iconhelp",
103                                 "attributes": [
104                                     {"name": "src", "value": "../../../pix/help.svg"},
105                                     {"name": "alt", "value": "Help icon"}
106                                 ]
107                             }
108                         }
109                     }
110                 ],
111                 "timesplitting": "Quarters",
112                 "timesplittinghelp": {
113                     "text": "This time splitting methof blah blah ...",
114                     "title": "Help with Quarters",
115                     "url": "http://example.org/help",
116                     "linktext": "",
117                     "icon": {
118                         "extraclasses": "iconhelp",
119                         "attributes": [
120                             {"name": "src", "value": "../../../pix/help.svg"},
121                             {"name": "alt", "value": "Help icon"}
122                         ]
123                     }
124                 },
125                 "noinsights": "No insights available yet"
126             }
127         ],
128         "warnings": [
129             {
130                 "message": "Be ware, this is just an example!"
131             }
132         ],
133         "createmodelurl": "#",
134         "importmodelurl": "#"
135     }
136 }}
138 {{#warnings}}
139     {{> core/notification_warning}}
140 {{/warnings}}
141 {{#infos}}
142     {{> core/notification_info}}
143 {{/infos}}
145 <div class="box">
146     <div class="top-nav d-flex">
147         <a href="{{createmodelurl}}" class="btn btn-secondary mr-2">{{#str}}createmodel, tool_analytics{{/str}}</a>
148         <a href="{{importmodelurl}}" class="btn btn-secondary">{{#str}}importmodel, tool_analytics{{/str}}</a>
149     </div>
150     <table id="predictionmodelslist" class="generaltable fullwidth">
151         <caption>{{#str}}analyticmodels, tool_analytics{{/str}}</caption>
152         <thead>
153             <tr>
154                 <th scope="col">{{#str}}modelname, tool_analytics{{/str}}</th>
155                 <th scope="col">{{#str}}enabled, tool_analytics{{/str}}</th>
156                 <th scope="col">{{#str}}indicators, tool_analytics{{/str}}</th>
157                 <th scope="col">{{#str}}modeltimesplitting, tool_analytics{{/str}}</th>
158                 <th scope="col">{{#str}}insights, tool_analytics{{/str}}</th>
159                 <th scope="col">{{#str}}actions{{/str}}</th>
160             </tr>
161         </thead>
162         <tbody>
163         {{#models}}
164             <tr>
165                 <td>
166                     {{#name}}
167                         <span class="model-name">{{>core/inplace_editable}}</span>
168                     {{/name}}
169                     <div>
170                         <small class="target-class">{{targetclass}}</small>
171                         {{#targethelp}}
172                             {{>core/help_icon}}
173                         {{/targethelp}}
174                     </div>
175                 </td>
176                 <td>
177                     {{#enabled}}
178                         {{#pix}}i/checked, core, {{#str}}yes{{/str}}{{/pix}}
179                     {{/enabled}}
180                     {{^enabled}}
181                         {{#str}}no{{/str}}
182                     {{/enabled}}
183                 </td>
184                 <td>
185                     <a data-widget="toggle"
186                            title="{{#str}} clicktohideshow {{/str}}"
187                            aria-expanded="false"
188                            aria-controls="indicators-{{id}}"
189                            role="button"
190                            href="">
191                         {{#str}} indicatorsnum, tool_analytics, {{indicatorsnum}} {{/str}}
192                     </a>
193                     <ul class="hidden" id="indicators-{{id}}">
194                     {{#indicators}}
195                         <li>
196                             {{name}}
197                             {{#help}}
198                                 {{>core/help_icon}}
199                             {{/help}}
200                         </li>
201                     {{/indicators}}
202                     </ul>
203                 </td>
204                 <td>
205                     {{#timesplitting}}
206                         {{timesplitting}}
207                         {{#timesplittinghelp}}
208                             {{>core/help_icon}}
209                         {{/timesplittinghelp}}
210                     {{/timesplitting}}
211                     {{^timesplitting}}
212                         {{#str}}notdefined, tool_analytics{{/str}}
213                         {{#timesplittinghelp}}
214                             {{>core/help_icon}}
215                         {{/timesplittinghelp}}
216                     {{/timesplitting}}
217                 </td>
218                 <td>
219                     {{! models_list renderer is responsible of sending one or the other}}
220                     {{#insights}}
221                         {{> core/single_select }}
222                     {{/insights}}
223                     {{#noinsights}}
224                         {{.}}
225                     {{/noinsights}}
226                 </td>
227                 <td>
228                     {{#actions}}
229                         {{> core/action_menu}}
230                     {{/actions}}
231                 </td>
232             </tr>
233         {{/models}}
234         </tbody>
235     </table>
236 </div>
237 {{#js}}
238 require(['jquery'], function($) {
240     // Toggle the visibility of the indicators list.
241     $('#predictionmodelslist').on('click', '[data-widget="toggle"]', function(e) {
242         e.preventDefault();
243         var toggle = $(e.currentTarget);
244         var listid = toggle.attr('aria-controls');
246         $(document.getElementById(listid)).toggle();
248         if (toggle.attr('aria-expanded') == 'false') {
249             toggle.attr('aria-expanded', 'true');
250         } else {
251             toggle.attr('aria-expanded', 'false');
252         }
253     });
254 });
255 {{/js}}