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({
|
function addPermission(permcode, permdesc) {
|
||||||
responsive: {
|
permcode = permcode.trim().toUpperCase();
|
||||||
details: {
|
if (permcode == "") {
|
||||||
display: $.fn.dataTable.Responsive.display.modal({
|
return false;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
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