AutorÃa | Ultima modificación | Ver Log |
{{!
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 tool_supporter/user_table
Template which outputs a table of users.
Classes required for JS:
* dataTables
Context variables required for this template:
* users - array of arrays: user details to be displayed in a table.
Example context (json):
{
"users": [
{
"id": 1,
"idnumber": "",
"username": "guest",
"firstname": "Gast",
"lastname": " ",
"email": "root@localhost"
},
{
"id": 2,
"idnumber": "",
"username": "admin",
"firstname": "Admin",
"lastname": "Nutzer",
"email": "hasbvdjh@sabdhadbvsdaj.de"
},
{
"id": 3,
"idnumber": "",
"username": "testnutzer",
"firstname": "testnutzer",
"lastname": "testnutzer",
"email": "testnutzer@bsdahuvugdvsaudvusdaau.de"
},
{
"id": 4,
"idnumber": "Matrikel",
"username": "deaktiviert_suspended",
"firstname": "deaktiviert_suspended",
"lastname": "deaktiviert_suspended",
"email": "deaktiviert_suspended@sadhbsaudbsaudbvasubd.net"
}
],
"searchname": "Suchen",
"refreshname": "Aktualisieren"
}
}}
<div data-region="user_table" class="card rui-user-table">
<div class = "card-header">
<div class="row">
<div class="col">
<h4 class="card-title">{{#str}}users{{/str}}
<button class="ml-4 btn btn-xs p-1 btn-secondary" id="btn_refresh_users">{{#pix}} a/refresh, core, {{refreshname}} {{/pix}}</button>
</h4>
</div>
</div>
</div>
<div id="users_dynamic_search" class="btn-toolbar ml-3 mt-1" role="toolbar" style="visibility: hidden;">
<div class="btn-group pull-right" role="group">
<select id="user_table_column_chooser" class="form-control custom-select mr-1">
<!-- Additional Options are later added with javascript -->
<option selected value="-1">{{#str}}all{{/str}}</option>
</select>
</div>
<div class="btn-group" role="group" style="width: 60%">
<input type="text" id="user_table_search_input" class="form-control form-control-sm" placeholder={{searchname}}>
</div>
</div>
<div class = "table table-responsive">
<table class = "stripe hover row-border" id = "userTable">
<thead>
<tr>
<th>ID</th>
<th>{{#str}}idnumbermod{{/str}}</th>
<th>{{#str}}username{{/str}}</th>
<th>{{#str}}firstname{{/str}}</th>
<th>{{#str}}lastname{{/str}}</th>
<th>{{#str}}email{{/str}}</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<span class="loading-icon text-center" id="userTable-loadingIcon">{{#pix}} i/loading, core, {{#str}} loading {{/str}} {{/pix}}</span>
</div>
{{#js}}
require(['tool_supporter/load_information', 'jquery', 'core/ajax', 'core/notification', 'core/templates',
'tool_supporter/datatables', 'tool_supporter/table_filter'],
function(loadInformation, $, ajax, notification, templates, datatables, tableFilter) {
var columns = [
{data: 'id', name: 'ID'},
{data: 'idnumber', name: '{{#str}}idnumbermod{{/str}}'},
{data: 'username', name: '{{#str}}username{{/str}}'},
{data: 'firstname', name: '{{#str}}firstname{{/str}}'},
{data: 'lastname', name: '{{#str}}lastname{{/str}}'},
{data: 'email', name: '{{#str}}email{{/str}}'}
];
datatables.dataTableAjax('#userTable', 'tool_supporter_get_users', {}, 'users', columns);
// Refresh this table.
loadInformation.clickOnRefresh('#userTable', 'tool_supporter_get_users', {}, 'users', columns);
// Load detailed information about the clicked user.
loadInformation.clickOnUser('#userTable');
// Search the table.
tableFilter.searchTable('#userTable', '#user_table_column_chooser', '#user_table_search_input', columns);
});
{{/js}}