29b56bef4f
- Updated various views to replace 'dashboard-card' with 'content-card' for consistency in styling. - Modified filter and table card classes across multiple pages including applications, campaigns, commands, datasets, dayparts, displays, display groups, display profiles, fonts, layouts, libraries, menu boards, modules, player software, playlists, resolutions, schedules, settings, sync groups, tags, tasks, templates, transitions, users, and user groups.
445 lines
20 KiB
Twig
445 lines
20 KiB
Twig
{#
|
|
/*
|
|
* OTS Signs Theme - User Page
|
|
* Based on Xibo CMS user-page.twig with OTS styling
|
|
*/
|
|
#}
|
|
{% extends "authed.twig" %}
|
|
{% import "inline.twig" as inline %}
|
|
|
|
{% block title %}{{ "Users"|trans }} | {% endblock %}
|
|
|
|
{% block actionMenu %}{% endblock %}
|
|
|
|
{% block pageContent %}
|
|
<div class="ots-displays-page">
|
|
<div class="page-header ots-page-header">
|
|
<h1>{% trans "Users" %}</h1>
|
|
<p class="text-muted">{% trans "Manage system users and permissions." %}</p>
|
|
</div>
|
|
|
|
<div class="widget content-card ots-displays-card">
|
|
<div class="widget-body ots-displays-body">
|
|
<div class="XiboGrid" id="{{ random() }}" data-grid-name="usersView">
|
|
<div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
|
|
<div class="ots-filter-header">
|
|
<h3 class="ots-filter-title">{% trans "Filter Users" %}</h3>
|
|
<button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</button>
|
|
</div>
|
|
<div class="ots-filter-content" id="ots-filter-content">
|
|
<div class="FilterDiv card-body" id="Filter">
|
|
<form class="form-inline">
|
|
{% set title %}{% trans "Username" %}{% endset %}
|
|
{{ inline.inputNameGrid('userName', title) }}
|
|
|
|
{% set title %}{% trans "User Type" %}{% endset %}
|
|
{{ inline.dropdown("userTypeId", "single", title, "", [{userTypeId:null, userType:""}]|merge(userTypes), "userTypeId", "userType") }}
|
|
|
|
{% set title %}{% trans "Retired" %}{% endset %}
|
|
{% set values = [{id: 1, value: "Yes"}, {id: 0, value: "No"}] %}
|
|
{{ inline.dropdown("retired", "single", title, 0, values, "id", "value") }}
|
|
|
|
{% set title %}{% trans "First Name" %}{% endset %}
|
|
{{ inline.input('firstName', title) }}
|
|
|
|
{% set title %}{% trans "Last Name" %}{% endset %}
|
|
{{ inline.input('lastName', title) }}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="XiboData card pt-3 content-card ots-table-card">
|
|
<div class="ots-table-toolbar">
|
|
{% if currentUser.isSuperAdmin() or (currentUser.isGroupAdmin() and currentUser.featureEnabled("users.add")) %}
|
|
{% if currentUser.getOptionValue("isAlwaysUseManualAddUserForm", 0) %}
|
|
{% set addUserFormUrl = url_for("user.add.form") %}
|
|
{% else %}
|
|
{% set addUserFormUrl = url_for("user.onboarding.form") %}
|
|
{% endif %}
|
|
<button id="user-add-button" class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add a new User" %}" href="{{ addUserFormUrl }}"><i class="fa fa-user-plus" aria-hidden="true"></i></button>
|
|
{% endif %}
|
|
<button class="btn btn-sm btn-primary ots-toolbar-btn" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></button>
|
|
</div>
|
|
<table id="users" class="table table-striped" data-state-preference-name="userGrid">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Username" %}</th>
|
|
<th>{% trans "Homepage" %}</th>
|
|
<th>{% trans "Home folder" %}</th>
|
|
<th>{% trans "Email" %}</th>
|
|
<th>{% trans "Library Quota" %}</th>
|
|
<th>{% trans "Last Login" %}</th>
|
|
<th>{% trans "Logged In?" %}</th>
|
|
<th>{% trans "Retired?" %}</th>
|
|
<th>{% trans "Two Factor" %}</th>
|
|
<th>{% trans "First Name" %}</th>
|
|
<th>{% trans "Last Name" %}</th>
|
|
<th>{% trans "Phone" %}</th>
|
|
<th>{% trans "Ref 1" %}</th>
|
|
<th>{% trans "Ref 2" %}</th>
|
|
<th>{% trans "Ref 3" %}</th>
|
|
<th>{% trans "Ref 4" %}</th>
|
|
<th>{% trans "Ref 5" %}</th>
|
|
<th class="rowMenu">{% trans "Row Menu" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javaScript %}
|
|
<script type="text/javascript" nonce="{{ cspNonce }}">
|
|
|
|
$(document).ready(function() {
|
|
var table = $("#users").DataTable({
|
|
"language": dataTablesLanguage,
|
|
dom: dataTablesTemplate,
|
|
serverSide: true,
|
|
stateSave: true,
|
|
responsive: true,
|
|
stateDuration: 0,
|
|
stateLoadCallback: dataTableStateLoadCallback,
|
|
stateSaveCallback: dataTableStateSaveCallback,
|
|
searchDelay: 3000,
|
|
"order": [[0, "asc"]],
|
|
"filter": false,
|
|
ajax: {
|
|
url: "{{ url_for("user.search") }}",
|
|
"data": function (d) {
|
|
$.extend(d, $("#users").closest(".XiboGrid").find(".FilterDiv form").serializeObject());
|
|
}
|
|
},
|
|
"columns": [
|
|
{"data": "userName", responsivePriority: 2},
|
|
{
|
|
"data": "homePage",
|
|
"sortable": false,
|
|
responsivePriority: 3
|
|
},
|
|
{
|
|
data: 'homeFolder',
|
|
responsivePriority: 4
|
|
},
|
|
{"data": "email", responsivePriority: 3},
|
|
{
|
|
"name": "libraryQuota",
|
|
responsivePriority: 3,
|
|
"data": null,
|
|
"render": {"_": "libraryQuota", "display": "libraryQuotaFormatted", "sort": "libraryQuota"}
|
|
},
|
|
{"data": "lastAccessed", "visible": false, responsivePriority: 4},
|
|
{
|
|
"data": "loggedIn",
|
|
responsivePriority: 3,
|
|
"render": dataTableTickCrossColumn,
|
|
"visible": false,
|
|
"sortable": false
|
|
},
|
|
{
|
|
"data": "retired",
|
|
responsivePriority: 3,
|
|
"render": dataTableTickCrossColumn
|
|
},
|
|
{
|
|
"data": "twoFactorTypeId",
|
|
responsivePriority: 5,
|
|
"visible": false,
|
|
"render": function (data, type, row) {
|
|
if (type != "display")
|
|
return data;
|
|
|
|
var icon = "";
|
|
if (data == 1)
|
|
icon = "fa-envelope";
|
|
else if (data == 2)
|
|
icon = "fa-google";
|
|
else
|
|
icon = "fa-times";
|
|
|
|
return '<span class="fa ' + icon + '" title="' + (row.twoFactorDescription) + '"></span>';
|
|
}
|
|
},
|
|
{"data": "firstName", "visible": false, responsivePriority: 5},
|
|
{"data": "lastName", "visible": false, responsivePriority: 5},
|
|
{"data": "phone", "visible": false, responsivePriority: 5},
|
|
{"data": "ref1", "visible": false, responsivePriority: 5},
|
|
{"data": "ref2", "visible": false, responsivePriority: 5},
|
|
{"data": "ref3", "visible": false, responsivePriority: 5},
|
|
{"data": "ref4", "visible": false, responsivePriority: 5},
|
|
{"data": "ref5", "visible": false, responsivePriority: 5},
|
|
{
|
|
"orderable": false,
|
|
responsivePriority: 1,
|
|
"data": dataTableButtonsColumn
|
|
}
|
|
]
|
|
});
|
|
|
|
table.on('draw', dataTableDraw);
|
|
table.on('processing.dt', dataTableProcessing)
|
|
dataTableAddButtons(table, $('#users_wrapper').find('.dataTables_buttons'));
|
|
|
|
$("#refreshGrid").click(function () {
|
|
table.ajax.reload();
|
|
});
|
|
});
|
|
|
|
function userFormOpen(dialog) {
|
|
// Make a select2 from the home page select
|
|
var $userForm = $(dialog).find("form.UserForm");
|
|
var $groupId = $(dialog).find("select[name=groupId]");
|
|
var $userTypeId = $(dialog).find("select[name=userTypeId]");
|
|
var $select = $(dialog).find(".homepage-select");
|
|
$select.select2({
|
|
minimumResultsForSearch: Infinity,
|
|
ajax: {
|
|
url: $select.data("searchUrl"),
|
|
dataType: "json",
|
|
delay: 250,
|
|
data: function (params) {
|
|
return {
|
|
q: params.term,
|
|
page: params.page,
|
|
userId: $userForm.data().userId,
|
|
groupId: $groupId.val(),
|
|
userTypeId: $userTypeId.val(),
|
|
};
|
|
},
|
|
processResults: function (data) {
|
|
var results = [];
|
|
$.each(data.data, function(index, el) {
|
|
results.push({
|
|
"id": el.homepage,
|
|
"text": el.title,
|
|
"content": el.description
|
|
});
|
|
});
|
|
return {
|
|
results: results
|
|
};
|
|
}
|
|
},
|
|
templateResult: function(state) {
|
|
if (!state.content)
|
|
return state.text;
|
|
|
|
return $("<span>" + state.content + "</span>");
|
|
}
|
|
});
|
|
|
|
initFolderPanel(dialog, true);
|
|
|
|
// Validate form
|
|
var $userForm = $('.UserForm');
|
|
forms.validateForm(
|
|
$userForm,
|
|
$userForm.parents('.modal-body'),
|
|
{
|
|
submitHandler: function (form) {
|
|
var libraryQuotaField = $(form).find('input[name=libraryQuota]');
|
|
var libraryQuotaUnitsField = $(form).find('select[name=libraryQuotaUnits]');
|
|
var libraryQuota = libraryQuotaField.val();
|
|
|
|
if (libraryQuotaUnitsField.val() === 'mb') {
|
|
libraryQuota = libraryQuota * 1024;
|
|
} else if (libraryQuotaUnitsField.val() === 'gb') {
|
|
libraryQuota = libraryQuota * 1024 * 1024;
|
|
}
|
|
|
|
libraryQuotaField.prop('value', libraryQuota);
|
|
XiboFormSubmit(form);
|
|
},
|
|
},
|
|
);
|
|
}
|
|
|
|
function onboardingFormOpen(dialog) {
|
|
$(dialog).find('[data-toggle="popover"]').popover();
|
|
|
|
{% if currentUser.featureEnabled("folder.view") %}
|
|
initFolderPanel(dialog, false, true);
|
|
{% endif %}
|
|
|
|
var navListItems = $(dialog).find('div.setup-panel div a'),
|
|
allWells = $(dialog).find('.setup-content'),
|
|
stepWizard = $(dialog).find('.stepwizard');
|
|
|
|
navListItems.click(function (e) {
|
|
e.preventDefault();
|
|
var $target = $($(this).attr('href')),
|
|
$item = $(this);
|
|
|
|
if (!$item.attr('disabled')) {
|
|
navListItems
|
|
.removeClass('btn-success')
|
|
.addClass('btn-default');
|
|
|
|
$item.addClass('btn-success');
|
|
|
|
allWells.hide();
|
|
$target.show();
|
|
$target.find('input:eq(0)').focus();
|
|
|
|
stepWizard.data("active", $target.prop("id"))
|
|
|
|
if ($target.data("next") === "finished") {
|
|
$(dialog).find("#onboarding-steper-next-button").html("{{ "Save"|trans }}");
|
|
} else {
|
|
$(dialog).find("#onboarding-steper-next-button").html("{{ "Next"|trans }}")
|
|
}
|
|
}
|
|
});
|
|
|
|
$(dialog).find(".modal-footer")
|
|
.append($('<a class="btn btn-default">').html("{{ "Close"|trans }}")
|
|
.click(function(e) {
|
|
e.preventDefault();
|
|
XiboDialogClose();
|
|
}))
|
|
.append($('<a id="onboarding-steper-next-button" class="btn">').html("{{ "Next"|trans }}")
|
|
.addClass("btn-primary")
|
|
.click(function(e) {
|
|
e.preventDefault();
|
|
var steps = $(dialog).find(".stepwizard"),
|
|
curStep = $(dialog).find("#" + steps.data("active")),
|
|
curInputs = curStep.find("input[type='text'],input[type='url']"),
|
|
isValid = true;
|
|
|
|
if (curStep.data("next") === "finished") {
|
|
var $form = $(dialog).find("#userOnboardingForm");
|
|
$form.data("apply", true);
|
|
XiboFormSubmit($form, e, function(xhr) {
|
|
if (xhr.success && xhr.id) {
|
|
{% if currentUser.featureEnabled("folder.view") %}
|
|
var selected = $(dialog).find("#container-form-folder-tree").jstree("get_selected");
|
|
|
|
var rootIndex = selected.indexOf('1');
|
|
if (rootIndex > -1) {
|
|
selected.splice(rootIndex, 1);
|
|
}
|
|
|
|
var groupIds = {};
|
|
groupIds[xhr.data.groupId] = {
|
|
"view": 1,
|
|
"edit": 1
|
|
};
|
|
var permissionsUrl = "{{ url_for("user.permissions.multi", {entity: ":entity"}) }}";
|
|
$.ajax(permissionsUrl.replace(":entity", "Folder"), {
|
|
"method": "POST",
|
|
"data": {
|
|
"ids": selected.join(","),
|
|
"groupIds": groupIds
|
|
},
|
|
"error": function() {
|
|
toastr.error("{{ "Problem saving folder sharing, please check the User created." }}");
|
|
}
|
|
});
|
|
{% endif %}
|
|
|
|
XiboDialogClose();
|
|
}
|
|
});
|
|
} else if (curStep.data("next") === "onboarding-step-2" && $("input[name='groupId']:checked").val() === "manual") {
|
|
XiboDialogClose();
|
|
XiboFormRender("{{ url_for("user.add.form") }}");
|
|
} else {
|
|
var nextStepWizard = steps.find("a[href='#" + curStep.data("next") + "']");
|
|
|
|
$(dialog).find(".form-group").removeClass("has-error");
|
|
for (var i = 0; i < curInputs.length; i++) {
|
|
if (!curInputs[i].validity.valid) {
|
|
isValid = false;
|
|
$(curInputs[i]).closest(".form-group").addClass("has-error");
|
|
}
|
|
}
|
|
|
|
if (curStep.data("next") === "onboarding-step-2") {
|
|
var $userGroupSelected = $("input[name='groupId']:checked");
|
|
$(dialog).find("input[name=homePageId]").val($userGroupSelected.data("defaultHomepageId"));
|
|
}
|
|
|
|
if (isValid) {
|
|
nextStepWizard.removeAttr('disabled').trigger('click');
|
|
}
|
|
}
|
|
}));
|
|
}
|
|
|
|
function userHomeFolderFormOpen(dialog) {
|
|
initFolderPanel(dialog, true);
|
|
}
|
|
|
|
function userHomeFolderMultiselectFormOpen(dialog) {
|
|
var $input = $('<div id="container-form-folder-tree" class="card card-body bg-light"></div>');
|
|
var $helpText = $('<span class="help-block">{{ "Set a home folder to use as the default folder for new content."|trans }}</span>');
|
|
|
|
$(dialog).find('.modal-body').append($input);
|
|
$(dialog).find('.modal-body').append($helpText);
|
|
|
|
initFolderPanel(dialog, true);
|
|
}
|
|
|
|
function initFolderPanel(dialog, isHomeOnSelect = false, isHomeContext = false) {
|
|
var plugins = [];
|
|
|
|
if (!isHomeOnSelect) {
|
|
plugins.push('checkbox');
|
|
}
|
|
|
|
initJsTreeAjax(
|
|
'#container-form-folder-tree',
|
|
'user-add_edit-form',
|
|
true,
|
|
600,
|
|
function(tree, $container) {
|
|
if (!isHomeOnSelect) {
|
|
tree.disable_checkbox(1);
|
|
tree.disable_node(1);
|
|
}
|
|
$container.jstree('open_all');
|
|
},
|
|
function(data) {
|
|
if (isHomeOnSelect && data.action === 'select_node') {
|
|
$(dialog).find('input[name=homeFolderId]').val(data.node.id);
|
|
|
|
dialog.data().commitData = {homeFolderId: data.node.id};
|
|
}
|
|
},
|
|
function($node, items) {
|
|
if (isHomeContext) {
|
|
items['home'] = {
|
|
separator_before: false,
|
|
separator_after: false,
|
|
label: translations.folderTreeSetAsHome,
|
|
action: function () {
|
|
$(dialog).find('input[name=homeFolderId]').val($node.id);
|
|
}
|
|
}
|
|
}
|
|
return items;
|
|
},
|
|
plugins,
|
|
$(dialog).find('input[name=homeFolderId]').val()
|
|
);
|
|
|
|
$('.folder-tree-buttons').on('click', 'button', function(ev) {
|
|
const jsTree = $(dialog).find('#container-form-folder-tree').jstree(true);
|
|
if ($(ev.target).attr('id') === 'selectAllBtn') {
|
|
jsTree.select_all();
|
|
} else if ($(ev.target).attr('id') === 'selectNoneBtn') {
|
|
jsTree.deselect_all();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|