MDL-66481 mod_forum: Implement additional column sorting
[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     {{{groupchangemenu}}}
38     {{#notifications}}
39         {{> core/notification}}
40     {{/notifications}}
42     {{#forum.capabilities.create}}
43         <div class="p-t-1 p-b-1">
44             <a class="btn btn-primary" data-toggle="collapse" href="#collapseAddForm">
45                 {{$discussion_create_text}}
46                     {{#str}}addanewdiscussion, forum{{/str}}
47                 {{/discussion_create_text}}
48             </a>
49             <div class="collapse m-t-1" id="collapseAddForm">
50                 {{{newdiscussionhtml}}}
51             </div>
52         </div>
53     {{/forum.capabilities.create}}
54     {{^forum.capabilities.create}}
55         {{#forum.capabilities.selfenrol}}
56             <div class="p-t-1 p-b-1">
57                 <a class="btn btn-primary" href="{{forum.urls.create}}">
58                     {{$discussion_create_text}}
59                         {{#str}}addanewdiscussion, forum{{/str}}
60                     {{/discussion_create_text}}
61                 </a>
62             </div>
63         {{/forum.capabilities.selfenrol}}
64     {{/forum.capabilities.create}}
67     {{#state.hasdiscussions}}
68         {{$discussion_top_pagination}}
69             {{{ pagination }}}
70         {{/discussion_top_pagination}}
71         {{$discussion_list_output}}
72             <span id="discussion-table-description-{{uniqid}}" class="sr-only">
73                 {{#str}} showingcountoftotaldiscussions, mod_forum, {"count": "{{visiblediscussioncount}}", "total":"{{totaldiscussioncount}}"} {{/str}}
74             </span>
75             <table
76                 class="table table-hover discussion-list"
77                 aria-label='{{#str}} showingcountoftotaldiscussions, mod_forum, {"count": "{{visiblediscussioncount}}", "total":"{{totaldiscussioncount}}"} {{/str}}'
78                 aria-describedby="discussion-table-description-{{uniqid}}"
79             >
80                 {{$discussion_list_header}}
81                 <thead>
82                     <tr>
83                         <th scope="col">
84                             <span class="accesshide">{{#str}}status{{/str}}</span>
85                         </th>
86                         <th scope="col" class="p-l-0">
87                             {{#state.sortorder.isdiscussiondesc}}
88                                 <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>
89                             {{/state.sortorder.isdiscussiondesc}}
90                             {{#state.sortorder.isdiscussionasc}}
91                                 <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>
92                             {{/state.sortorder.isdiscussionasc}}
93                             {{^state.sortorder.isdiscussiondesc}}
94                                 {{^state.sortorder.isdiscussionasc}}
95                                     <a href="{{{forum.urls.sortdiscussiondesc}}}" aria-label="{{#str}}discussionlistsortbydiscussiondesc, mod_forum{{/str}}">{{#str}}discussion, mod_forum{{/str}}</a>
96                                 {{/state.sortorder.isdiscussionasc}}
97                             {{/state.sortorder.isdiscussiondesc}}
98                         </th>
99                         {{#forum.state.groupmode}}
100                         <th scope="col" class="group">
101                             {{#state.sortorder.isgroupdesc}}
102                                 <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>
103                             {{/state.sortorder.isgroupdesc}}
104                             {{#state.sortorder.isgroupasc}}
105                                 <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>
106                             {{/state.sortorder.isgroupasc}}
107                             {{^state.sortorder.isgroupdesc}}
108                                 {{^state.sortorder.isgroupasc}}
109                                     <a href="{{{forum.urls.sortgroupdesc}}}" aria-label="{{#str}}discussionlistsortbygroupdesc, mod_forum{{/str}}">{{#str}}group{{/str}}</a>
110                                 {{/state.sortorder.isgroupasc}}
111                             {{/state.sortorder.isgroupdesc}}
112                         </th>
113                         {{/forum.state.groupmode}}
114                         <th scope="col" class="author">
115                             {{#state.sortorder.isstarterdesc}}
116                                 <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>
117                             {{/state.sortorder.isstarterdesc}}
118                             {{#state.sortorder.isstarterasc}}
119                                 <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>
120                             {{/state.sortorder.isstarterasc}}
121                             {{^state.sortorder.isstarterdesc}}
122                                 {{^state.sortorder.isstarterasc}}
123                                     <a href="{{{forum.urls.sortstarterdesc}}}" aria-label="{{#str}}discussionlistsortbystarterdesc, mod_forum{{/str}}">{{#str}}startedby, mod_forum{{/str}}</a>
124                                 {{/state.sortorder.isstarterasc}}
125                             {{/state.sortorder.isstarterdesc}}
126                         </th>
127                         <th scope="col" class="lastpost">
128                             {{#state.sortorder.islastpostdesc}}
129                                 <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>
130                             {{/state.sortorder.islastpostdesc}}
131                             {{#state.sortorder.islastpostasc}}
132                                 <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>
133                             {{/state.sortorder.islastpostasc}}
134                             {{^state.sortorder.islastpostdesc}}
135                                 {{^state.sortorder.islastpostasc}}
136                                     <a href="{{{forum.urls.sortlastpostdesc}}}" aria-label="{{#str}}discussionlistsortbylastpostdesc, mod_forum{{/str}}">{{#str}}lastpost, mod_forum{{/str}}</a>
137                                 {{/state.sortorder.islastpostasc}}
138                             {{/state.sortorder.islastpostdesc}}
139                         </th>
140                         {{#forum.capabilities.viewdiscussions}}
141                             <th scope="col" class="text-center">
142                                 {{#state.sortorder.isrepliesdesc}}
143                                     <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>
144                                 {{/state.sortorder.isrepliesdesc}}
145                                 {{#state.sortorder.isrepliesasc}}
146                                     <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>
147                                 {{/state.sortorder.isrepliesasc}}
148                                 {{^state.sortorder.isrepliesdesc}}
149                                     {{^state.sortorder.isrepliesasc}}
150                                         <a href="{{{forum.urls.sortrepliesdesc}}}" aria-label="{{#str}}discussionlistsortbyrepliesdesc, mod_forum{{/str}}">{{#str}}replies, mod_forum{{/str}}</a>
151                                     {{/state.sortorder.isrepliesasc}}
152                                 {{/state.sortorder.isrepliesdesc}}
153                                 {{#forum.userstate.tracked}}
154                                     <a href="{{{forum.urls.markasread}}}">{{#pix}}t/markasread, core, {{#str}}markallread, mod_forum{{/str}}{{/pix}}</a>
155                                 {{/forum.userstate.tracked}}
156                             </th>
157                         {{/forum.capabilities.viewdiscussions}}
158                         <th scope="col" class="discussionsubscription">
159                             <span class="accesshide">{{#str}}actions{{/str}}</span>
160                         </th>
161                     </tr>
162                 </thead>
163                 {{/discussion_list_header}}
164                 {{$discussion_list_body}}
165                 <tbody>
166                     {{#summaries}}
167                         <!-- The discussion class is only required for behat tests to identify the row -->
168                         <tr class="discussion {{#discussion.timed}}{{#istimed}}{{^visible}}dimmed_text{{/visible}}{{/istimed}}{{/discussion.timed}}"
169                             data-region="discussion-list-item"
170                             data-discussionid="{{id}}"
171                             data-forumid="{{forumid}}">
172                             <td class="pinned p-0 text-center align-middle">
173                                 {{#discussion.pinned}}
174                                     {{#pix}}i/pinned, mod_forum, {{#str}}discussionpinned, mod_forum{{/str}}{{/pix}}
175                                 {{/discussion.pinned}}
176                                 {{^discussion.pinned}}
177                                     {{#discussion}}
178                                         {{> mod_forum/forum_discussion_favourite_toggle}}
179                                     {{/discussion}}
180                                 {{/discussion.pinned}}
181                             </td>
182                             <th scope="row" class="topic p-0 align-middle">
183                                 <div class="p-3 p-l-0">
184                                     <a class="w-100 h-100 d-block" href="{{discussion.urls.view}}" title="{{discussion.name}}" aria-label="{{discussion.name}}">
185                                         {{#shortentext}}72, {{{discussion.name}}}{{/shortentext}}
186                                     </a>
187                                     <div>
188                                         <span class="badge badge-danger rounded" data-region="locked-label" {{^discussion.locked}}hidden{{/discussion.locked}}>
189                                             {{#str}}locked, forum{{/str}}
190                                         </span>
191                                         <span class="badge badge-light rounded" data-region="subscribed-label" {{^discussion.userstate.subscribed}}hidden{{/discussion.userstate.subscribed}}>
192                                             {{#str}}subscribed, forum{{/str}}
193                                         </span>
194                                         {{#discussion.timed.istimed}}
195                                         <a href="#" role="button" class="badge badge-primary rounded" data-region="timed-label"
196                                             data-toggle="popover" data-container="body" data-placement="right" data-html="true"
197                                             data-content='{{#discussion.timed}}{{#discussion.times}}{{> mod_forum/discussion_times}}{{/discussion.times}}{{/discussion.timed}}'
198                                             data-trigger="click" aria-label="{{#str}}timeddiscussion, forum{{/str}}" title="{{#str}}timeddiscussion, forum{{/str}}">
199                                             {{#str}}timed, forum{{/str}}
200                                         </a>
201                                         {{/discussion.timed.istimed}}
202                                     </div>
203                                 </div>
204                             </th>
205                             {{#forum.state.groupmode}}
206                                 <td class="group align-middle">
207                                     {{#discussion.group}}
208                                         <img alt="{{#str}} pictureof, core, {{name}} {{/str}}"
209                                              class="border rounded h-auto rounded-circle grouppicture"
210                                              src="{{{urls.picture}}}"
211                                              title="{{#str}} pictureof, core, {{name}} {{/str}}">
212                                         {{#urls.userlist}}
213                                             <a href="{{{urls.userlist}}}" role="button" aria-label='{{#str}} memberofgroup, group, {{name}}{{/str}}'>
214                                                 {{#shortentext}}15, {{name}}{{/shortentext}}
215                                             </a>
216                                         {{/urls.userlist}}
217                                         {{^urls.userlist}}
218                                             <span>{{name}}</span>
219                                         {{/urls.userlist}}
220                                     {{/discussion.group}}
221                                 </td>
222                             {{/forum.state.groupmode}}
223                             <td class="author align-middle">
224                                 {{#firstpostauthor}}
225                                     <div class="d-flex flex-row">
226                                         <div class="align-middle p-0">
227                                             <img class="rounded-circle userpicture" src="{{urls.profileimage}}"
228                                                  alt="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
229                                                  title="{{#str}}pictureof, moodle, {{fullname}}{{/str}}" >
230                                         </div>
231                                         <div class="align-middle">
232                                             <div>{{fullname}}</div>
233                                             <div>
234                                                 <small>{{#userdate}}{{discussion.times.created}}, {{#str}}strftimedatemonthabbr, langconfig{{/str}}{{/userdate}}</small>
235                                             </div>
236                                         </div>
237                                     </div>
238                                 {{/firstpostauthor}}
239                             </td>
240                             <td class="text-left align-middle">
241                                 {{! TODO Check q&a, eachuser }}
242                                 {{#latestpostid}}
243                                     <a href="{{{discussion.urls.viewlatest}}}" title="{{#userdate}}{{discussion.times.modified}},{{#str}}strftimerecentfull{{/str}}{{/userdate}}">
244                                         {{#userdate}}
245                                             {{discussion.times.modified}}, {{#str}}strftimedateshortmonthabbr, langconfig{{/str}}
246                                         {{/userdate}}
247                                     </a>
248                                 {{/latestpostid}}
249                             </td>
250                             {{#forum.capabilities.viewdiscussions}}
251                                 <td class="p-0 text-center align-middle">
252                                     <span class="p-1">{{replies}}</span>
253                                     {{#forum.userstate.tracked}}
254                                         {{#unread}}
255                                         {{! TODO Rewrite as AJAX}}
256                                             <span class="p-1">
257                                                 <a href="{{{discussion.urls.viewfirstunread}}}" class="badge badge-primary rounded-circle" aria-label="{{#str}}unreadpostsnumber, mod_forum, {{unread}}{{/str}}">{{unread}}</a>
258                                             </span>
259                                             <span class="p-1">
260                                                 <a href="{{{discussion.urls.markasread}}}">{{#pix}}t/markasread, core, {{#str}}markalldread, mod_forum{{/str}}{{/pix}}</a>
261                                             </span>
262                                         {{/unread}}
263                                     {{/forum.userstate.tracked}}
264                                 </td>
265                             {{/forum.capabilities.viewdiscussions}}
266                             <td class="p-0 align-middle" data-container="discussion-summary-actions">
267                                 {{#discussion}}
268                                     <div class="d-flex flex-wrap justify-content-end pr-4">
269                                         {{#hasanyactions}}
270                                             <div data-container='discussion-tools'>
271                                                 {{> mod_forum/forum_action_menu}}
272                                             </div>
273                                         {{/hasanyactions}}
274                                     </div>
275                                 {{/discussion}}
276                             </td>
277                         </tr>
278                     {{/summaries}}
279                 </tbody>
280                 {{/discussion_list_body}}
281             </table>
282         {{/discussion_list_output}}
283         {{$discussion_bottom_pagination}}
284             {{{ pagination }}}
285         {{/discussion_bottom_pagination}}
286         {{#can_create_discussion}}
287             <div class="forumaddnew">
288                 <a href="{{create_discussion_link}}" class="btn btn-primary">{{create_discussion_link_text}}</a>
289             </div>
290         {{/can_create_discussion}}
291     {{/state.hasdiscussions}}
292     {{^state.hasdiscussions}}
293         <div class="forumnodiscuss">
294             {{$no_discussions_text}}
295                 ({{#str}}nodiscussions, forum{{/str}})
296             {{/no_discussions_text}}
297         </div>
298     {{/state.hasdiscussions}}
300 </div>
301 {{#js}}
302     require(['jquery', 'mod_forum/discussion_list'], function($, View) {
303         var root = $('#discussion-list-{{uniqid}}');
304         View.init(root);
305     });
306 {{/js}}