%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../partials/header %>
<% include ../partials/sidebar %>
<style>
.quick-btn {
background: #EEEEEE;
box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
color: #444444;
display: inline-block;
height: 80px;
margin: 10px;
padding-top: 16px;
text-align: center;
text-decoration: none;
width: 90px;
position: relative;
}
.quick-btn span {
display: block;
}
.quick-btn .label {
position: absolute;
right: -5px;
top: -5px;
}
.quick-btn:hover {
text-decoration: none;
color: #fff;
background-color: #4d7589;
box-shadow: 3px 4px 1px #ccc;
}
.quick-btn.small {
width: 40px;
height: 30px;
padding-top: 6px;
}
</style>
<link href="/app-assets/vendors/kartik/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous"> -->
<link href="/app-assets/vendors/kartik/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<div class="text-center">
<a class="quick-btn text-red" href="#" data-toggle="modal" data-target="#folder">
<i class="la la-plus fa-2x"></i>
<span>New Folder</span>
</a>
<a class="quick-btn text-red" href="#" data-toggle="modal" data-target="#file">
<i class="la la-plus fa-2x"></i>
<span>New File</span>
</a>
</div>
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<!-- Breadcrumb starts-->
<div class="content-header-left col-md-6 col-12 mb-2">
<h3 class="content-header-title">Document Manager</h3>
<div class="row breadcrumbs-top">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Dashboard</a>
</li>
<li class="breadcrumb-item active">Document Manager
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<div class="content-body">
<!-- Zero configuration table -->
<section id="configuration">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Document Manager</h4>
<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
<li><a data-action="close"><i class="ft-x"></i></a></li>
</ul>
</div>
</div>
<div class="card-content collapse show">
<div class="card-body card-dashboard">
<table class="table table-striped table-bordered zero-configuration">
<thead>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Size</th>
<th>Date</th>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<%
function formatBytes(a, b) {
if (0 == a) return "0 Bytes";
var c = 1024,
d = b || 2,
e = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
f = Math.floor(Math.log(a) / Math.log(c));
return parseFloat((a / Math.pow(c, f)).toFixed(d)) + " " + e[f]
}
%>
<% documents.forEach(function(document, index){ %>
<tr>
<td>
<%= (index + 1) %>
</td>
<td>
<%= document.name %>
</td>
<td>
<%if (document.type == 1) { %>
<% } else { %>
<%= formatBytes(document.size) %>
<% } %>
</td>
<td>
<%= moment(document.createdAt).calendar(); %>
</td>
<td>
<%if (document.type == 1) { %>
<img class="brand-logo" style="width: 20px;" alt="" src="/app-assets/images/folder.png">
<% } else { %>
<img class="brand-logo" style="width: 20px;" alt="" src="/app-assets/images/report.png">
<% } %>
</td>
<td>
<%if (document.type == 1) { %>
<a href="/document/my-document/view/<%= document.uuid %>">
<button type="button" class="btn btn-icon btn-success btn-sm mr-1"><i
class="la la-eye"></i></button>
</a>
<% } else { %>
<a href="/document/download/<%=document.fileName %>" download=<%=document.fileName
%>"><button type="button" class="btn btn-icon btn-success btn-sm mr-1"><i
class="la la-cloud-download"></i></button></a>
<% } %>
<%if (document.type == 1) { %>
<button title="Edit" data-toggle="modal" folderId="<%= document.id %>"
fileName="<%= document.name %>" data-target="#editFolder"
class="btn btn-icon btn-warning btn-sm mr-1">
<i class="la la-pencil"></i>
</button>
<% } else { %>
<button title="Edit" data-toggle="modal" docId="<%= document.id %>"
fileName="<%= document.name %>" doc="<%= document.fileName %>"
data-target="#editDoc" class="btn btn-icon btn-warning btn-sm mr-1">
<i class="la la-pencil"></i>
</button>
<% } %>
<button type="button" title="Delete" onclick="deleteFile(this.value)"
value="<%= document.id %>" class="btn btn-icon btn-danger btn-sm mr-1"><i
class="la la-close"></i></button>
</td>
</tr>
<% }); %>
</tbody>
<tfoot>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Size</th>
<th>Date</th>
<th>Type</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/ Zero configuration table -->
</div>
</div>
</div>
</div>
<div class="modal fade text-left" id="folder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-success">
<h3 class="modal-title" id="myModalLabel35"> Create New Folder</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="/document/new-folder">
<input type="hidden" name="parentId" value="<%= docId %>">
<div class="modal-body">
<fieldset class="form-group floating-label-form-group">
<label for="name">Folder Name</label>
<input type="text" class="form-control" name="folderName" id="folderName" placeholder="Folder Name">
</fieldset>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Save">
</div>
</form>
</div>
</div>
</div>
<div class="modal fade text-left" id="editFolder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-success">
<h3 class="modal-title" id="myModalLabel35"> Update Folder</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="/document/update-folder" id="folderForm">
<input type="hidden" name="folderId" id="folderId" value="" />
<div class="modal-body">
<fieldset class="form-group floating-label-form-group">
<label for="name">Folder Name</label>
<input type="text" class="form-control" name="folderName" id="folderName" placeholder="Folder Name">
</fieldset>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Save">
</div>
</form>
</div>
</div>
</div>
<div class="modal fade text-left" id="file" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-success">
<h3 class="modal-title" id="myModalLabel35"> Create New File</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="/document/new-file" enctype="multipart/form-data">
<input type="hidden" name="parentId" value="<%= docId %>">
<div class="modal-body">
<fieldset class="form-group floating-label-form-group">
<label for="name">File Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter File Name">
</fieldset>
<fieldset class="form-group floating-label-form-group">
<!-- <form action="/user/upload/image" method="post" enctype="multipart/form-data"> -->
<div class="form-group">
<div class="file-loading">
<input id="file-5" class="file" type="file" name="fileName" ata-preview-file-type="any"
data-theme="fas">
</div>
</div>
<!-- </form> -->
</fieldset>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Save">
</div>
</form>
</div>
</div>
</div>
<div class="modal fade text-left" id="editDoc" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-success">
<h3 class="modal-title" id="myModalLabel35"> Update File</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="/document/update-file" enctype="multipart/form-data" id="docForm">
<input type="hidden" name="docId" id="docId" value="" />
<div class="modal-body">
<fieldset class="form-group floating-label-form-group">
<label for="name">File Name</label>
<input type="text" class="form-control" name="name" id="docName" placeholder="Enter File Name">
</fieldset>
<fieldset class="form-group floating-label-form-group">
<!-- <form action="/user/upload/image" method="post" enctype="multipart/form-data"> -->
<div class="form-group">
<div class="file-loading">
<input id="fileName" class="file" type="file" name="fileName" ata-preview-file-type="any"
data-theme="fas">
</div>
</div>
<!-- </form> -->
</fieldset>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Save">
</div>
</form>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/footer %>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script> -->
<script src="/app-assets/vendors/kartik/js/plugins/sortable.js" type="text/javascript"></script>
<script src="/app-assets/vendors/kartik/js/fileinput.js" type="text/javascript"></script>
<script src="/app-assets/vendors/kartik/js/locales/fr.js" type="text/javascript"></script>
<script src="/app-assets/vendors/kartik/js/locales/es.js" type="text/javascript"></script>
<script src="/app-assets/vendors/kartik/themes/fas/theme.js" type="text/javascript"></script>
<script src="/app-assets/vendors/kartik/themes/explorer-fas/theme.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
<script>
$('#editFolder').on('show.bs.modal', function (e) {
console.log(e);
var opener = e.relatedTarget; // Button that triggered the modal
var folderId = $(opener).attr('folderId'); // Extract info from data-* attributes
var folderName = $(opener).attr('fileName');
console.log(folderId);
console.log(folderName);
$('#folderForm').find('[name="folderId"]').val(folderId);
$('#folderForm').find('[name="folderName"]').val(folderName);
});
$('#editDoc').on('show.bs.modal', function (e) {
var opener = e.relatedTarget; // Button that triggered the modal
var docId = $(opener).attr('docId'); // Extract info from data-* attributes
var fileName = $(opener).attr('fileName');
var name = $(opener).attr('doc');
$('#docForm').find('[name="docId"]').val(docId);
$('#docForm').find('[name="name"]').val(fileName);
// $('#docForm').find('[name="fileName"]').val(name);
});
function deleteFile(id) {
$.confirm({
title: '<div style="color:red">Confirm!</div>',
content: 'Are you sure you want to delete permanently?',
buttons: {
confirm: function () {
delete_file(id);
},
cancel: function () {
$.alert('Canceled!');
},
}
});
}
var delete_file = function (id) {
$.ajax({
type: "POST", // Post / Get method
url: "/document/delete", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: { id: id }, //Form variables
success: function (response) {
if (response === "success") {
$.confirm({
title: '<div style="color:green">Success</div>',
content: 'File deleted Successfully',
buttons: {
ok: function () {
location.reload(true)
},
}
});
}
},
error: function (xhr, ajaxOptions, thrownError) {
$.alert('Could not delete');
}
});
}
</script>
<script>
$('#file-fr').fileinput({
theme: 'fas',
language: 'fr',
uploadUrl: '#',
allowedFileExtensions: ['jpg', 'png', 'gif']
});
$('#file-es').fileinput({
theme: 'fas',
language: 'es',
uploadUrl: '#',
allowedFileExtensions: ['jpg', 'png', 'gif']
});
$("#file-0").fileinput({
theme: 'fas',
'allowedFileExtensions': ['jpg', 'png', 'gif']
});
$("#file-1").fileinput({
theme: 'fas',
uploadUrl: '#', // you must set a valid URL here else you will get an error
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
/*
$(".file").on('fileselect', function(event, n, l) {
alert('File Selected. Name: ' + l + ', Num: ' + n);
});
*/
$("#file-3").fileinput({
theme: 'fas',
showUpload: false,
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any",
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
overwriteInitial: false,
initialPreviewAsData: true,
initialPreview: [
"http://lorempixel.com/1920/1080/transport/1",
"http://lorempixel.com/1920/1080/transport/2",
"http://lorempixel.com/1920/1080/transport/3"
],
initialPreviewConfig: [
{ caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1 },
{ caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2 },
{ caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3 }
]
});
$("#file-4").fileinput({
theme: 'fas',
uploadExtraData: { kvId: '10' }
});
$(".btn-warning").on('click', function () {
var $el = $("#file-4");
if ($el.attr('disabled')) {
$el.fileinput('enable');
} else {
$el.fileinput('disable');
}
});
$(".btn-info").on('click', function () {
$("#file-4").fileinput('refresh', { previewClass: 'bg-info' });
});
/*
$('#file-4').on('fileselectnone', function() {
alert('Huh! You selected no files.');
});
$('#file-4').on('filebrowse', function() {
alert('File browse clicked for #file-4');
});
*/
$(document).ready(function () {
$("#test-upload").fileinput({
'theme': 'fas',
'showPreview': false,
'allowedFileExtensions': ['jpg', 'png', 'gif'],
'elErrorContainer': '#errorBlock'
});
$("#kv-explorer").fileinput({
'theme': 'explorer-fas',
'uploadUrl': '#',
overwriteInitial: false,
initialPreviewAsData: true,
initialPreview: [
"http://lorempixel.com/1920/1080/nature/1",
"http://lorempixel.com/1920/1080/nature/2",
"http://lorempixel.com/1920/1080/nature/3"
],
initialPreviewConfig: [
{ caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1 },
{ caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2 },
{ caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3 }
]
});
/*
$("#test-upload").on('fileloaded', function(event, file, previewId, index) {
alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
});
*/
});
</script>
Zerion Mini Shell 1.0