Redesign permission UI (close #2)
parent
d77d7f0896
commit
9de8dda3e5
@ -1,38 +0,0 @@
|
||||
<?php
|
||||
require_once __DIR__ . '/../required.php';
|
||||
|
||||
redirectifnotloggedin();
|
||||
?>
|
||||
|
||||
<form role="form" action="action.php" method="POST">
|
||||
<div class="panel panel-blue">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<i class="fa fa-plus"></i> <?php lang("adding permission"); ?>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="user"><i class="fa fa-id-card-o"></i> <?php lang("user"); ?></label>
|
||||
<input type="text" class="form-control" name="user" id="user" required="required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="perm"><i class="fa fa-user"></i> <?php lang("permission"); ?></label>
|
||||
<input type="text" class="form-control" name="perm" id="perm" required="required" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="action" value="addpermission" />
|
||||
<input type="hidden" name="source" value="permissions" />
|
||||
|
||||
<div class="panel-footer">
|
||||
<button type="submit" class="btn btn-success"><i class="fa fa-floppy-o"></i> <?php lang("save"); ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -1,54 +0,0 @@
|
||||
<?php
|
||||
require_once __DIR__ . "/../required.php";
|
||||
|
||||
redirectifnotloggedin();
|
||||
|
||||
if (is_empty($VARS['uid'])) {
|
||||
header('Location: app.php?page=permissions&msg=user_not_exists');
|
||||
die();
|
||||
}
|
||||
if (!$database->has('permissions', ['permid' => $VARS['pid']])) {
|
||||
header('Location: app.php?page=permissions&msg=permission_not_exists');
|
||||
die();
|
||||
}
|
||||
?>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<div class="panel panel-danger">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<?php lang("delete permission") ?>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="center-text">
|
||||
<p><i class="fa fa-exclamation-triangle fa-5x"></i></p>
|
||||
<h4><?php lang("really delete permission") ?></h4>
|
||||
<?php
|
||||
$data = $database->select('assigned_permissions', [
|
||||
"[>]accounts" => ['uid' => 'uid'],
|
||||
"[>]permissions" => ['permid' => 'permid']
|
||||
], [
|
||||
'username',
|
||||
'realname',
|
||||
'permcode',
|
||||
'perminfo'
|
||||
], ["AND" => ['assigned_permissions.permid' => $VARS['pid'], 'assigned_permissions.uid' => $VARS['uid']]])[0];
|
||||
?>
|
||||
<div class="list-group">
|
||||
<div class="list-group-item">
|
||||
<i class="fa fa-fw fa-user"></i> <?php echo $data['realname']; ?> (<?php echo $data['username']; ?>)
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<i class="fa fa-fw fa-key"></i> <?php echo $data['permcode']; ?> (<?php echo $data['perminfo']; ?>)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<a href="action.php?action=delpermission&source=permissions&uid=<?php echo htmlspecialchars($VARS['uid']); ?>&pid=<?php echo htmlspecialchars($VARS['pid']); ?>" class="btn btn-danger"><i class="fa fa-times"></i> <?php lang('delete'); ?></a>
|
||||
<a href="app.php?page=permissions" class="btn btn-primary pull-right"><i class="fa fa-arrow-left"></i> <?php lang('cancel'); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,47 +0,0 @@
|
||||
$("#user").easyAutocomplete({
|
||||
url: "action.php",
|
||||
ajaxSettings: {
|
||||
dataType: "json",
|
||||
method: "GET",
|
||||
data: {
|
||||
action: "autocomplete_user"
|
||||
}
|
||||
},
|
||||
preparePostData: function (data) {
|
||||
data.q = $("#user").val();
|
||||
return data;
|
||||
},
|
||||
getValue: function (element) {
|
||||
return element.username;
|
||||
},
|
||||
template: {
|
||||
type: "custom",
|
||||
method: function (value, item) {
|
||||
return item.name + " <i class=\"small\">" + item.username + "</i>";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#perm").easyAutocomplete({
|
||||
url: "action.php",
|
||||
ajaxSettings: {
|
||||
dataType: "json",
|
||||
method: "GET",
|
||||
data: {
|
||||
action: "autocomplete_permission"
|
||||
}
|
||||
},
|
||||
preparePostData: function (data) {
|
||||
data.q = $("#perm").val();
|
||||
return data;
|
||||
},
|
||||
getValue: function (element) {
|
||||
return element.name;
|
||||
},
|
||||
template: {
|
||||
type: "custom",
|
||||
method: function (value, item) {
|
||||
return item.name + " <i class=\"small\">" + item.info + "</i>";
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,47 +1,145 @@
|
||||
$('#permtable').DataTable({
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (row) {
|
||||
var data = row.data();
|
||||
return "<i class=\"fa fa-key fa-fw\"></i> " + data[2] + " | " + data[3];
|
||||
}
|
||||
}),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
|
||||
tableClass: 'table'
|
||||
}),
|
||||
type: "column"
|
||||
}
|
||||
},
|
||||
columnDefs: [
|
||||
{
|
||||
targets: 0,
|
||||
className: 'control',
|
||||
orderable: false
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
orderable: false
|
||||
}
|
||||
],
|
||||
order: [
|
||||
[2, 'asc']
|
||||
],
|
||||
serverSide: true,
|
||||
ajax: {
|
||||
url: "lib/getpermtable.php",
|
||||
dataFilter: function (data) {
|
||||
var json = jQuery.parseJSON(data);
|
||||
json.data = [];
|
||||
json.perms.forEach(function (row) {
|
||||
json.data.push([
|
||||
"",
|
||||
row.delbtn,
|
||||
row.realname + " (" + row.username + ")",
|
||||
row.permcode
|
||||
]);
|
||||
});
|
||||
return JSON.stringify(json);
|
||||
}
|
||||
function addPermission(permcode, permdesc) {
|
||||
permcode = permcode.trim().toUpperCase();
|
||||
if (permcode == "") {
|
||||
return false;
|
||||
}
|
||||
if ($("#permslist div[data-permcode=" + permcode + "]").length) {
|
||||
$("#permslist .list-group-item[data-permcode=" + permcode + "]").animate({
|
||||
backgroundColor: "#ff0000",
|
||||
}, 500, "linear", function () {
|
||||
$("#permslist .list-group-item[data-permcode=" + permcode + "]").animate({
|
||||
backgroundColor: "#ffffff",
|
||||
}, 500);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (typeof permdesc == "undefined") {
|
||||
$.post("action.php", {
|
||||
action: 'autocomplete_permission',
|
||||
q: $("#perms-box").val()
|
||||
}, function (resp) {
|
||||
if (resp.length === 0) {
|
||||
return;
|
||||
}
|
||||
if (resp.length === 1) {
|
||||
permdesc = resp[0].info;
|
||||
} else {
|
||||
for (var i = 0; i < resp.length; i++) {
|
||||
if (resp[i].name == permcode) {
|
||||
permdesc = resp[i].info;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (typeof permdesc == "undefined") {
|
||||
return;
|
||||
}
|
||||
}
|
||||
$('#permslist').append("<div class=\"list-group-item\" data-permcode=\"" + permcode + "\">" + permcode + "<div class=\"btn btn-danger btn-sm pull-right rmperm\"><i class=\"fa fa-trash-o\"></i></div><input type=\"hidden\" name=\"permissions[]\" value=\"" + permcode + "\" /> <p class=\"small\">" + permdesc + "</p></div>");
|
||||
$("#perms-box").val("");
|
||||
}, "json");
|
||||
} else {
|
||||
$('#permslist').append("<div class=\"list-group-item\" data-permcode=\"" + permcode + "\">" + permcode + "<div class=\"btn btn-danger btn-sm pull-right rmperm\"><i class=\"fa fa-trash-o\"></i></div><input type=\"hidden\" name=\"permissions[]\" value=\"" + permcode + "\" /> <p class=\"small\">" + permdesc + "</p></div>");
|
||||
$("#perms-box").val("");
|
||||
}
|
||||
}
|
||||
|
||||
function removePermission(permcode) {
|
||||
$("#permslist div[data-permcode=" + permcode + "]").remove();
|
||||
}
|
||||
|
||||
var options = {
|
||||
url: "action.php",
|
||||
ajaxSettings: {
|
||||
dataType: "json",
|
||||
method: "GET",
|
||||
data: {
|
||||
action: "autocomplete_user"
|
||||
}
|
||||
},
|
||||
preparePostData: function (data) {
|
||||
data.q = $("#user-box").val();
|
||||
return data;
|
||||
},
|
||||
getValue: function (element) {
|
||||
return element.username;
|
||||
},
|
||||
template: {
|
||||
type: "custom",
|
||||
method: function (value, item) {
|
||||
return item.name + " <i class=\"small\">" + item.username + "</i>";
|
||||
}
|
||||
},
|
||||
list: {
|
||||
onClickEvent: function () {
|
||||
var value = $("#user-box").getSelectedItemData().username;
|
||||
document.location.href = "app.php?page=permissions&user=" + value;
|
||||
}
|
||||
},
|
||||
requestDelay: 500
|
||||
};
|
||||
|
||||
$("#perms-box").easyAutocomplete({
|
||||
url: "action.php",
|
||||
ajaxSettings: {
|
||||
dataType: "json",
|
||||
method: "GET",
|
||||
data: {
|
||||
action: "autocomplete_permission"
|
||||
}
|
||||
},
|
||||
preparePostData: function (data) {
|
||||
data.q = $("#perms-box").val();
|
||||
return data;
|
||||
},
|
||||
getValue: function (element) {
|
||||
return element.name;
|
||||
},
|
||||
template: {
|
||||
type: "custom",
|
||||
method: function (value, item) {
|
||||
return item.name + " <i class=\"small\">" + item.info + "</i>";
|
||||
}
|
||||
},
|
||||
list: {
|
||||
onClickEvent: function () {
|
||||
var permcode = $("#perms-box").getSelectedItemData().name;
|
||||
var permdesc = $("#perms-box").getSelectedItemData().info;
|
||||
addPermission(permcode, permdesc);
|
||||
}
|
||||
},
|
||||
requestDelay: 500
|
||||
});
|
||||
|
||||
$("#user-box").easyAutocomplete(options);
|
||||
|
||||
$("#user-box").keyup(function (e) {
|
||||
if (e.keyCode == 13) {
|
||||
$("#selectuserbtn").click();
|
||||
}
|
||||
});
|
||||
|
||||
$("#selectuserbtn").click(function () {
|
||||
document.location.href = "app.php?page=permissions&user=" + $("#user-box").val();
|
||||
});
|
||||
|
||||
$("#perms-box").keyup(function (event) {
|
||||
if (event.keyCode == 13) {
|
||||
$("#addpermbtn").click();
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$("#perms-box").keydown(function (event) {
|
||||
if (event.keyCode == 13) {
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$("#addpermbtn").click(function () {
|
||||
addPermission($("#perms-box").val());
|
||||
});
|
||||
|
||||
$('#permslist').on("click", ".rmperm", function () {
|
||||
removePermission($(this).parent().data("permcode"));
|
||||
});
|
||||
Loading…
Reference in New Issue