Merge branch 'MDL-66883-master' of git://github.com/bmbrands/moodle
[moodle.git] / mod / forum / templates / discussion_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 mod_forum/discussion_list
20     Template to display the list of forum discussions.
22     Classes required for JS:
23     * none
25     Data attributes required for JS:
26     * none
28     Context variables required for this template:
29     * TODO
31     Example context (json):
32     {
33     }
34 }}
35 <div id="discussion-list-{{uniqid}}" {{!
36     }}data-contextid="{{contextid}}" {{!
37     }}data-cmid="{{cmid}}" {{!
38     }}data-name="{{forum.name}}" {{!
39     }}data-group="{{forum.groupid}}" {{!
40     }}data-grading-component="{{gradingcomponent}}" {{!
41     }}data-grading-component-subtype="{{gradingcomponentsubtype}}" {{!
42     }}data-gradable-itemtype="forum" {{!
43     }}{{#firstgradeduserid}}data-initialuserid="{{firstgradeduserid}}" {{/firstgradeduserid}}{{!
44     }}>
46     {{#notifications}}
47         {{> core/notification}}
48     {{/notifications}}
50     {{{groupchangemenu}}}
53     <div class="p-t-1 p-b-1">
54         {{#forum.capabilities.create}}
55             <a class="btn btn-primary" data-toggle="collapse" href="#collapseAddForm">
56                 {{$discussion_create_text}}
57                     {{#str}}addanewdiscussion, forum{{/str}}
58                 {{/discussion_create_text}}
59             </a>
60         {{/forum.capabilities.create}}
61         {{^forum.capabilities.create}}
62             {{#forum.capabilities.selfenrol}}
63                 <div class="p-t-1 p-b-1">
64                     <a class="btn btn-primary" href="{{forum.urls.create}}">
65                         {{$discussion_create_text}}
66                             {{#str}}addanewdiscussion, forum{{/str}}
67                         {{/discussion_create_text}}
68                     </a>
69                 </div>
70             {{/forum.capabilities.selfenrol}}
71         {{/forum.capabilities.create}}
72         {{#forum.capabilities.grade}}
73             {{#forum.state.gradingenabled}}
74                 {{> mod_forum/grades/grade_button }}
75             {{/forum.state.gradingenabled}}
76         {{/forum.capabilities.grade}}
77         {{^forum.capabilities.grade}}
78             {{#forum.state.gradingenabled}}
79                 {{> mod_forum/grades/view_grade_button }}
80             {{/forum.state.gradingenabled}}
81         {{/forum.capabilities.grade}}
82     </div>
83     {{#forum.capabilities.create}}
84         <div class="collapse m-t-1 p-b-1" id="collapseAddForm">
85             {{{newdiscussionhtml}}}
86         </div>
87     {{/forum.capabilities.create}}
89     {{#state.hasdiscussions}}
90         {{$discussion_top_pagination}}
91             {{{ pagination }}}
92         {{/discussion_top_pagination}}
93         {{$discussion_list_output}}
94             <table class="table discussion-list">
95                 <caption id="discussion-table-description-{{uniqid}}" class="sr-only">
96                     {{#str}} showingcountoftotaldiscussions, mod_forum, {"count": "{{visiblediscussioncount}}", "total":"{{totaldiscussioncount}}"} {{/str}}
97                 </caption>
98                 {{$discussion_list_header}}
99                 <thead>
100                     <tr>
101                         <th scope="col">
102                             <span class="accesshide">{{#str}}status{{/str}}</span>
103                         </th>
104                         <th scope="col" class="p-l-0">
105                             {{#state.sortorder.isdiscussiondesc}}
106                                 <a href="{{{forum.urls.sortdiscussionasc}}}" aria-label="{{#str}}discussionlistsortbydiscussionasc, mod_forum{{/str}}">{{#str}}discussion, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}}</span>
107                             {{/state.sortorder.isdiscussiondesc}}
108                             {{#state.sortorder.isdiscussionasc}}
109                                 <a href="{{{forum.urls.sortdiscussiondesc}}}" aria-label="{{#str}}discussionlistsortbydiscussiondesc, mod_forum{{/str}}">{{#str}}discussion, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}}</span>
110                             {{/state.sortorder.isdiscussionasc}}
111                             {{^state.sortorder.isdiscussiondesc}}
112                                 {{^state.sortorder.isdiscussionasc}}
113                                     <a href="{{{forum.urls.sortdiscussiondesc}}}" aria-label="{{#str}}discussionlistsortbydiscussiondesc, mod_forum{{/str}}">{{#str}}discussion, mod_forum{{/str}}</a>
114                                 {{/state.sortorder.isdiscussionasc}}
115                             {{/state.sortorder.isdiscussiondesc}}
116                         </th>
117                         {{#forum.state.groupmode}}
118                         <th scope="col" class="group px-3">
119                             {{#state.sortorder.isgroupdesc}}
120                                 <a href="{{{forum.urls.sortgroupasc}}}" aria-label="{{#str}}discussionlistsortbygroupasc, mod_forum{{/str}}">{{#str}}group{{/str}}</a> <span class="text-primary">{{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}}</span>
121                             {{/state.sortorder.isgroupdesc}}
122                             {{#state.sortorder.isgroupasc}}
123                                 <a href="{{{forum.urls.sortgroupdesc}}}" aria-label="{{#str}}discussionlistsortbygroupdesc, mod_forum{{/str}}">{{#str}}group{{/str}}</a> <span class="text-primary">{{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}}</span>
124                             {{/state.sortorder.isgroupasc}}
125                             {{^state.sortorder.isgroupdesc}}
126                                 {{^state.sortorder.isgroupasc}}
127                                     <a href="{{{forum.urls.sortgroupdesc}}}" aria-label="{{#str}}discussionlistsortbygroupdesc, mod_forum{{/str}}">{{#str}}group{{/str}}</a>
128                                 {{/state.sortorder.isgroupasc}}
129                             {{/state.sortorder.isgroupdesc}}
130                         </th>
131                         {{/forum.state.groupmode}}
132                         <th scope="col" class="author px-3">
133                             {{#state.sortorder.isstarterdesc}}
134                                 <a href="{{{forum.urls.sortstarterasc}}}" aria-label="{{#str}}discussionlistsortbystarterasc, mod_forum{{/str}}">{{#str}}startedby, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}}</span>
135                             {{/state.sortorder.isstarterdesc}}
136                             {{#state.sortorder.isstarterasc}}
137                                 <a href="{{{forum.urls.sortstarterdesc}}}" aria-label="{{#str}}discussionlistsortbystarterdesc, mod_forum{{/str}}">{{#str}}startedby, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}}</span>
138                             {{/state.sortorder.isstarterasc}}
139                             {{^state.sortorder.isstarterdesc}}
140                                 {{^state.sortorder.isstarterasc}}
141                                     <a href="{{{forum.urls.sortstarterdesc}}}" aria-label="{{#str}}discussionlistsortbystarterdesc, mod_forum{{/str}}">{{#str}}startedby, mod_forum{{/str}}</a>
142                                 {{/state.sortorder.isstarterasc}}
143                             {{/state.sortorder.isstarterdesc}}
144                         </th>
145                         <th scope="col" class="lastpost px-3">
146                             {{#state.sortorder.islastpostdesc}}
147                                 <a href="{{{forum.urls.sortlastpostasc}}}" aria-label="{{#str}}discussionlistsortbylastpostasc, mod_forum{{/str}}">{{#str}}lastpost, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}}</span>
148                             {{/state.sortorder.islastpostdesc}}
149                             {{#state.sortorder.islastpostasc}}
150                                 <a href="{{{forum.urls.sortlastpostdesc}}}" aria-label="{{#str}}discussionlistsortbylastpostdesc, mod_forum{{/str}}">{{#str}}lastpost, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}}</span>
151                             {{/state.sortorder.islastpostasc}}
152                             {{^state.sortorder.islastpostdesc}}
153                                 {{^state.sortorder.islastpostasc}}
154                                     <a href="{{{forum.urls.sortlastpostdesc}}}" aria-label="{{#str}}discussionlistsortbylastpostdesc, mod_forum{{/str}}">{{#str}}lastpost, mod_forum{{/str}}</a>
155                                 {{/state.sortorder.islastpostasc}}
156                             {{/state.sortorder.islastpostdesc}}
157                         </th>
158                         {{#forum.capabilities.viewdiscussions}}
159                             <th scope="col" class="text-center px-2">
160                                 {{#state.sortorder.isrepliesdesc}}
161                                     <a href="{{{forum.urls.sortrepliesasc}}}" aria-label="{{#str}}discussionlistsortbyrepliesasc, mod_forum{{/str}}">{{#str}}replies, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}}</span>
162                                 {{/state.sortorder.isrepliesdesc}}
163                                 {{#state.sortorder.isrepliesasc}}
164                                     <a href="{{{forum.urls.sortrepliesdesc}}}" aria-label="{{#str}}discussionlistsortbyrepliesdesc, mod_forum{{/str}}">{{#str}}replies, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}}</span>
165                                 {{/state.sortorder.isrepliesasc}}
166                                 {{^state.sortorder.isrepliesdesc}}
167                                     {{^state.sortorder.isrepliesasc}}
168                                         <a href="{{{forum.urls.sortrepliesdesc}}}" aria-label="{{#str}}discussionlistsortbyrepliesdesc, mod_forum{{/str}}">{{#str}}replies, mod_forum{{/str}}</a>
169                                     {{/state.sortorder.isrepliesasc}}
170                                 {{/state.sortorder.isrepliesdesc}}
171                                 {{#forum.userstate.tracked}}
172                                     <a href="{{{forum.urls.markasread}}}">{{#pix}}t/markasread, core, {{#str}}markallread, mod_forum{{/str}}{{/pix}}</a>
173                                 {{/forum.userstate.tracked}}
174                             </th>
175                         {{/forum.capabilities.viewdiscussions}}
176                         {{#forum.capabilities.subscribe}}
177                             <th scope="col" class="text-center px-2">{{#str}} notsubscribed, mod_forum {{/str}}</th>
178                         {{/forum.capabilities.subscribe}}
179                         <th scope="col" class="discussionsubscription">
180                             <span class="accesshide">{{#str}}actions{{/str}}</span>
181                         </th>
182                     </tr>
183                 </thead>
184                 {{/discussion_list_header}}
185                 {{$discussion_list_body}}
186                 <tbody>
187                     {{#summaries}}
188                         {{! The discussion class is only required for behat tests to identify the row. }}
189                         <tr class="discussion{{!
190                                 }}{{#discussion.pinned}} pinned{{/discussion.pinned}}{{!
191                                 }}{{#discussion.userstate.favourited}} favourited{{/discussion.userstate.favourited}}{{!
192                                 }}{{#discussion.userstate.subscribed}} subscribed{{/discussion.userstate.subscribed}}{{!
193                                 }}{{#unread}} hasunread{{/unread}}{{!
194                                 }}{{#discussion.timed}}{{#istimed}}{{^visible}} dimmed_text{{/visible}}{{/istimed}}{{/discussion.timed}}"
195                             data-region="discussion-list-item"
196                             data-discussionid="{{id}}"
197                             data-forumid="{{forumid}}">
198                             <td class="p-0 text-center align-middle icon-no-margin" style="width: 1px;">
199                                 {{#discussion.pinned}}
200                                     {{#pix}}i/pinned, mod_forum, {{#str}}discussionpinned, mod_forum{{/str}}{{/pix}}
201                                 {{/discussion.pinned}}
202                                 {{^discussion.pinned}}
203                                     {{#discussion}}
204                                         {{> mod_forum/forum_discussion_favourite_toggle}}
205                                     {{/discussion}}
206                                 {{/discussion.pinned}}
207                             </td>
208                             <th scope="row" class="topic p-0 align-middle">
209                                 <div class="p-3 p-l-0">
210                                     <a class="w-100 h-100 d-block" href="{{discussion.urls.view}}" title="{{discussion.name}}" aria-label="{{discussion.name}}">
211                                         {{#shortentext}}100, {{{discussion.name}}}{{/shortentext}}
212                                     </a>
213                                     <div>
214                                         <span class="badge badge-danger rounded" data-region="locked-label" {{^discussion.locked}}hidden{{/discussion.locked}}>
215                                             {{#str}}locked, forum{{/str}}
216                                         </span>
217                                         {{#discussion.timed.istimed}}
218                                         <span>
219                                              <button class="btn badge badge-primary rounded border-0" data-region="timed-label"
220                                                 data-toggle="popover" data-container="body" data-placement="right" data-html="true"
221                                                 data-content={{#quote}}{{#discussion.timed}}{{#discussion.times}}{{> mod_forum/discussion_times}}{{/discussion.times}}{{/discussion.timed}}{{/quote}}
222                                                 data-trigger="click" aria-label="{{#str}}timeddiscussion, forum{{/str}}" title="{{#str}}timeddiscussion, forum{{/str}}">
223                                                  {{#str}}timed, forum{{/str}}
224                                              </button>
225                                         </span>
226                                         {{/discussion.timed.istimed}}
227                                     </div>
228                                 </div>
229                             </th>
230                             {{#forum.state.groupmode}}
231                                 <td class="group align-middle fit-content limit-width px-3">
232                                     {{#discussion.group}}
233                                         <img alt="{{#str}} pictureof, core, {{name}} {{/str}}"
234                                              class="border rounded h-auto rounded-circle grouppicture"
235                                              src="{{{urls.picture}}}"
236                                              title="{{#str}} pictureof, core, {{name}} {{/str}}">
237                                         {{#urls.userlist}}
238                                             <a href="{{{urls.userlist}}}" aria-label='{{#str}} memberofgroup, group, {{name}}{{/str}}'
239                                                title='{{#str}} memberofgroup, group, {{name}}{{/str}}'>
240                                                 {{#shortentext}}30, {{name}}{{/shortentext}}
241                                             </a>
242                                         {{/urls.userlist}}
243                                         {{^urls.userlist}}
244                                             <span>{{name}}</span>
245                                         {{/urls.userlist}}
246                                     {{/discussion.group}}
247                                 </td>
248                             {{/forum.state.groupmode}}
249                             <td class="author align-middle fit-content limit-width px-3">
250                                 {{#firstpostauthor}}
251                                     <div class="d-flex">
252                                         <div class="align-middle p-0">
253                                             <img class="rounded-circle userpicture" src="{{urls.profileimage}}"
254                                                  alt="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
255                                                  title="{{#str}}pictureof, moodle, {{fullname}}{{/str}}" >
256                                         </div>
257                                         <div class="author-info align-middle">
258                                             <div class="mb-1 line-height-3 text-truncate">{{fullname}}</div>
259                                             <div class="line-height-3">
260                                                 {{#userdate}}{{discussion.times.created}}, {{#str}}strftimedatemonthabbr, langconfig{{/str}}{{/userdate}}
261                                             </div>
262                                         </div>
263                                     </div>
264                                 {{/firstpostauthor}}
265                             </td>
266                             <td class="text-left align-middle fit-content limit-width px-3">
267                                 {{! TODO Check q&a, eachuser }}
268                                 {{#latestpostauthor}}
269                                     <div class="d-flex">
270                                         <div class="align-middle p-0">
271                                             <img class="rounded-circle userpicture" src="{{urls.profileimage}}"
272                                                  alt="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
273                                                  title="{{#str}}pictureof, moodle, {{fullname}}{{/str}}" >
274                                         </div>
275                                         <div class="author-info align-middle">
276                                             <div class="mb-1 line-height-3 text-truncate">{{fullname}}</div>
277                                             <div class="line-height-3">
278                                                 {{#latestpostid}}
279                                                     <a href="{{{discussion.urls.viewlatest}}}" title="{{#userdate}}{{discussion.times.modified}},{{#str}}strftimerecentfull{{/str}}{{/userdate}}">
280                                                         {{#userdate}}{{discussion.times.modified}}, {{#str}}strftimedatemonthabbr, langconfig{{/str}}{{/userdate}}
281                                                     </a>
282                                                 {{/latestpostid}}
283                                             </div>
284                                         </div>
285                                     </div>
286                                 {{/latestpostauthor}}
287                             </td>
288                             {{#forum.capabilities.viewdiscussions}}
289                                 <td class="p-0 text-center align-middle fit-content px-2">
290                                     <span>{{replies}}</span>
291                                     {{#forum.userstate.tracked}}
292                                         {{#unread}}
293                                         {{! TODO Rewrite as AJAX}}
294                                             <span class="lead">
295                                                 <a href="{{{discussion.urls.viewfirstunread}}}" class="badge badge-primary rounded-pill font-weight-normal"
296                                                    title="{{#str}}unreadpostsnumber, mod_forum, {{unread}}{{/str}}" aria-label="{{#str}}unreadpostsnumber, mod_forum, {{unread}}{{/str}}">
297                                                     {{unread}}
298                                                 </a>
299                                             </span>
300                                         {{/unread}}
301                                     {{/forum.userstate.tracked}}
302                                 </td>
303                             {{/forum.capabilities.viewdiscussions}}
304                             {{#forum.capabilities.subscribe}}
305                                 <td class="text-center align-middle fit-content px-2">
306                                     {{#discussion}}
307                                         <div class="d-inline custom-control custom-switch mb-1">
308                                             <input
309                                                 type="checkbox"
310                                                 class="custom-control-input"
311                                                 id="subscription-toggle-{{id}}"
312                                                 data-type="subscription-toggle"
313                                                 data-action="toggle"
314                                                 data-discussionid="{{id}}"
315                                                 data-forumid="{{forumid}}"
316                                                 {{#userstate.subscribed}}data-targetstate="0" checked{{/userstate.subscribed}}
317                                                 {{^userstate.subscribed}}data-targetstate="1"{{/userstate.subscribed}}>
318                                             <label class="custom-control-label" for="subscription-toggle-{{id}}">
319                                                 <span class="sr-only">
320                                                     {{#userstate.subscribed}}
321                                                         {{#str}}unsubscribediscussion, forum{{/str}}
322                                                     {{/userstate.subscribed}}
323                                                     {{^userstate.subscribed}}
324                                                         {{#str}}subscribediscussion, forum{{/str}}
325                                                     {{/userstate.subscribed}}
326                                                 </span>
327                                             </label>
328                                         </div>
329                                     {{/discussion}}
330                                 </td>
331                             {{/forum.capabilities.subscribe}}
332                             <td class="p-0 align-middle fit-content" data-container="discussion-summary-actions">
333                                 {{#discussion}}
334                                     <div class="d-flex flex-wrap justify-content-end icon-no-margin">
335                                         {{#hasanyactions}}
336                                             <div data-container='discussion-tools'>
337                                                 {{> mod_forum/forum_action_menu}}
338                                             </div>
339                                         {{/hasanyactions}}
340                                     </div>
341                                 {{/discussion}}
342                             </td>
343                         </tr>
344                     {{/summaries}}
345                 </tbody>
346                 {{/discussion_list_body}}
347             </table>
348         {{/discussion_list_output}}
349         {{$discussion_bottom_pagination}}
350             {{{ pagination }}}
351         {{/discussion_bottom_pagination}}
352         {{#can_create_discussion}}
353             <div class="forumaddnew">
354                 <a href="{{create_discussion_link}}" class="btn btn-primary">{{create_discussion_link_text}}</a>
355             </div>
356         {{/can_create_discussion}}
357     {{/state.hasdiscussions}}
358     {{^state.hasdiscussions}}
359         <div class="forumnodiscuss">
360             {{$no_discussions_text}}
361                 ({{#str}}nodiscussions, forum{{/str}})
362             {{/no_discussions_text}}
363         </div>
364     {{/state.hasdiscussions}}
366 </div>
367 {{#js}}
368     require(['jquery', 'mod_forum/discussion_list'], function($, View) {
369         var root = $('#discussion-list-{{uniqid}}');
370         View.init(root);
371     });
372 {{/js}}