- Changed the table layout a bit.
- Added functions to the tables:
  + Search
  + Sort
  + Paginate
This commit is contained in:
BlackDex
2020-09-19 22:19:55 +02:00
parent 99da5fbebb
commit 6a291040bd
6 changed files with 24651 additions and 29 deletions

View File

@@ -1,12 +1,12 @@
<main class="container">
<div id="organizations-block" class="my-3 p-3 bg-white rounded shadow">
<h6 class="border-bottom pb-2 mb-0">Organizations</h6>
<h6 class="border-bottom pb-2 mb-3">Organizations</h6>
<div class="table-responsive-xl small">
<table class="table table-sm table-striped table-hover">
<table id="orgs-table" class="table table-sm table-striped table-hover">
<thead>
<tr>
<th style="width: 24px;" colspan="2">Organization</th>
<th>Organization</th>
<th>Users</th>
<th>Items</th>
<th>Attachments</th>
@@ -15,13 +15,15 @@
<tbody>
{{#each organizations}}
<tr>
<td><img class="rounded identicon" data-src="{{Id}}"></td>
<td>
<strong>{{Name}}</strong>
<span class="mr-2">({{BillingEmail}})</span>
<span class="d-block">
<span class="badge badge-success">{{Id}}</span>
</span>
<img class="mr-2 float-left rounded identicon" data-src="{{Id}}">
<div class="float-left">
<strong>{{Name}}</strong>
<span class="mr-2">({{BillingEmail}})</span>
<span class="d-block">
<span class="badge badge-success">{{Id}}</span>
</span>
</div>
</td>
<td>
<span class="d-block">{{user_count}}</span>
@@ -40,12 +42,23 @@
</tbody>
</table>
</div>
</div>
</main>
<link rel="stylesheet" href="{{urlpath}}/bwrs_static/datatables.css" />
<script src="{{urlpath}}/bwrs_static/jquery-3.5.1.slim.js"></script>
<script src="{{urlpath}}/bwrs_static/datatables.js"></script>
<script>
document.querySelectorAll("img.identicon").forEach(function (e, i) {
e.src = identicon(e.dataset.src);
});
document.addEventListener("DOMContentLoaded", function(event) {
$('#orgs-table').DataTable({
"responsive": true,
"lengthMenu": [ [-1, 5, 10, 25, 50], ["All", 5, 10, 25, 50] ],
"pageLength": -1, // Default show all
});
});
</script>

View File

@@ -1,37 +1,38 @@
<main class="container">
<div id="users-block" class="my-3 p-3 bg-white rounded shadow">
<h6 class="border-bottom pb-2 mb-0">Registered Users</h6>
<h6 class="border-bottom pb-2 mb-3">Registered Users</h6>
<div class="table-responsive-xl small">
<table class="table table-sm table-striped table-hover">
<table id="users-table" class="table table-sm table-striped table-hover">
<thead>
<tr>
<th style="width: 24px;">User</th>
<th></th>
<th>User</th>
<th style="width:60px; min-width: 60px;">Items</th>
<th>Attachments</th>
<th style="min-width: 140px;">Organizations</th>
<th style="min-width: 120px;">Organizations</th>
<th style="width: 140px; min-width: 140px;">Actions</th>
</tr>
</thead>
<tbody>
{{#each users}}
<tr>
<td><img class="mr-2 rounded identicon" data-src="{{Email}}"></td>
<td>
<strong>{{Name}}</strong>
<span class="d-block">{{Email}}</span>
<span class="d-block">
{{#if TwoFactorEnabled}}
<span class="badge badge-success mr-2" title="2FA is enabled">2FA</span>
{{/if}}
{{#case _Status 1}}
<span class="badge badge-warning mr-2" title="User is invited">Invited</span>
{{/case}}
{{#if EmailVerified}}
<span class="badge badge-success mr-2" title="Email has been verified">Verified</span>
{{/if}}
</span>
<img class="float-left mr-2 rounded identicon" data-src="{{Email}}">
<div class="float-left">
<strong>{{Name}}</strong>
<span class="d-block">{{Email}}</span>
<span class="d-block">
{{#if TwoFactorEnabled}}
<span class="badge badge-success mr-2" title="2FA is enabled">2FA</span>
{{/if}}
{{#case _Status 1}}
<span class="badge badge-warning mr-2" title="User is invited">Invited</span>
{{/case}}
{{#if EmailVerified}}
<span class="badge badge-success mr-2" title="Email has been verified">Verified</span>
{{/if}}
</span>
</div>
</td>
<td>
<span class="d-block">{{cipher_count}}</span>
@@ -83,6 +84,9 @@
</div>
</main>
<link rel="stylesheet" href="{{urlpath}}/bwrs_static/datatables.css" />
<script src="{{urlpath}}/bwrs_static/jquery-3.5.1.slim.js"></script>
<script src="{{urlpath}}/bwrs_static/datatables.js"></script>
<script>
function deleteUser(id, mail) {
var input_mail = prompt("To delete user '" + mail + "', please type the email below")
@@ -140,4 +144,19 @@
e.style.backgroundColor = orgtype.color;
e.title = orgtype.name;
});
document.addEventListener("DOMContentLoaded", function(event) {
$('#users-table').DataTable({
"responsive": true,
"lengthMenu": [ [-1, 5, 10, 25, 50], ["All", 5, 10, 25, 50] ],
"pageLength": -1, // Default show all
"columns": [
null, // Userdata
null, // Items
null, // Attachments
null, // Organizations
{ "searchable": false, "orderable": false }, // Actions
],
});
});
</script>