kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1699 from sbwalker/dev

Browse Source 
UX improvements to FileManager and Pager components
This commit is contained in:
Shaun Walker 2021-09-29 10:39:43 -04:00 committed by GitHub
commit a762f206a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 62 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
Oqtane.Client/Modules/Controls/FileManager.razor
View File

@ -10,54 +10,63 @@
<div id="@Id" class="container-fluid px-0"> <div id="@Id" class="container-fluid px-0">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@if (ShowFolders || FolderId <= 0) <div class="container-fluid px-0">
{ @if (ShowFolders || FolderId <= 0)
<div> {
<select class="form-select" value="@FolderId" @onchange="(e => FolderChanged(e))"> <div class="row"><div class="col">
@if (string.IsNullOrEmpty(Folder)) <select class="form-select" value="@FolderId" @onchange="(e => FolderChanged(e))">
@if (string.IsNullOrEmpty(Folder))
{
<option value="-1">&lt;@Localizer["Folder.Select"]&gt;</option>
}
@foreach (Folder folder in _folders)
{
<option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option>
}
</select>
</div></div>
}
@if (ShowFiles)
{
<div class="row"><div class="col mt-1">
<select class="form-select" value="@FileId" @onchange="(e => FileChanged(e))">
<option value="-1">&lt;@Localizer["File.Select"]&gt;</option>
@foreach (File file in _files)
{
<option value="@(file.FileId)">@(file.Name)</option>
}
</select>
</div></div>
}
@if (ShowUpload && _haseditpermission)
{
<div class="row"><div class="col mt-1">
@if (UploadMultiple)
{ {
<option value="-1">&lt;@Localizer["Folder.Select"]&gt;</option> <input type="file" id="@_fileinputid" name="file" accept="@_filter" multiple />
} }
@foreach (Folder folder in _folders) else
{ {
<option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option> <input type="file" id="@_fileinputid" name="file" accept="@_filter" />
} }
</select> <span class="float-end">
</div> <button type="button" class="btn btn-success" @onclick="UploadFile">@SharedLocalizer["Upload"]</button>
} @if (ShowFiles && GetFileId() != -1)
@if (ShowFiles) {
{ <button type="button" class="btn btn-danger" @onclick="DeleteFile">@SharedLocalizer["Delete"]</button>
<div> }
<select class="form-select" value="@FileId" @onchange="(e => FileChanged(e))"> </span>
<option value="-1">&lt;@Localizer["File.Select"]&gt;</option> </div></div>
@foreach (File file in _files) <div class="row"><div class="col mt-1">
{ <div class="container-fluid px-0">
<option value="@(file.FileId)">@(file.Name)</option> <div class="row">
} <div class="col-6"><span id="@_progressinfoid"></span></div>
</select> <div class="col-6"><progress id="@_progressbarid" class="mt-1" style="visibility: hidden;"></progress></div>
</div> </div>
} </div>
@if (ShowUpload && _haseditpermission) </div></div>
{ }
<div> </div>
@if (UploadMultiple)
{
<input type="file" id="@_fileinputid" name="file" accept="@_filter" multiple />
}
else
{
<input type="file" id="@_fileinputid" name="file" accept="@_filter" />
}
<span id="@_progressinfoid"></span><progress id="@_progressbarid" style="width: 150px; visibility: hidden;"></progress>
<span class="float-end">
<button type="button" class="btn btn-success" @onclick="UploadFile">@SharedLocalizer["Upload"]</button>
@if (ShowFiles && GetFileId() != -1)
{
<button type="button" class="btn btn-danger" @onclick="DeleteFile">@SharedLocalizer["Delete"]</button>
}
</span>
</div>
}
</div> </div>
@if (_image != string.Empty) @if (_image != string.Empty)
{ {
@ -69,7 +78,7 @@
@if (!string.IsNullOrEmpty(_message)) @if (!string.IsNullOrEmpty(_message))
{ {
<div class="row"> <div class="row">
<div class="col mt-2"> <div class="col mt-1">
<ModuleMessage Message="@_message" Type="@_messagetype" /> <ModuleMessage Message="@_message" Type="@_messagetype" />
</div> </div>
</div> </div>
@ -234,7 +243,6 @@
catch (Exception ex) catch (Exception ex)
{ {
await logger.LogError(ex, "Error Loading Files {Error}", ex.Message); await logger.LogError(ex, "Error Loading Files {Error}", ex.Message);
_message = Localizer["Error.File.Load"]; _message = Localizer["Error.File.Load"];
_messagetype = MessageType.Error; _messagetype = MessageType.Error;
} }
@ -299,9 +307,6 @@
{ {
await logger.LogInformation("File Upload Succeeded {Files}", upload); await logger.LogInformation("File Upload Succeeded {Files}", upload);
_message = Localizer["Success.File.Upload"];
_messagetype = MessageType.Success;
// set FileId to first file in upload collection // set FileId to first file in upload collection
await GetFiles(); await GetFiles();
var file = _files.Where(item => item.Name == upload[0]).FirstOrDefault(); var file = _files.Where(item => item.Name == upload[0]).FirstOrDefault();

6
Oqtane.Client/Modules/Controls/Pager.razor
View File

@ -10,7 +10,7 @@
<li class="page-item@((_page > 1) ? "" : " disabled")"> <li class="page-item@((_page > 1) ? "" : " disabled")">
<a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="start" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="start" aria-hidden="true"></span></a>
</li> </li>
@if (_pages > _displayPages) @if (_pages > _displayPages && _displayPages > 1)
{ {
<li class="page-item@((_page > _displayPages) ? "" : " disabled")"> <li class="page-item@((_page > _displayPages) ? "" : " disabled")">
<a class="page-link" @onclick=@(async () => SkipPages("back"))><span class="oi oi-media-skip-backward" title="skip back" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => SkipPages("back"))><span class="oi oi-media-skip-backward" title="skip back" aria-hidden="true"></span></a>
@ -38,7 +38,7 @@
<li class="page-item@((_page < _pages) ? "" : " disabled")"> <li class="page-item@((_page < _pages) ? "" : " disabled")">
<a class="page-link" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></a>
</li> </li>
@if (_pages > _displayPages) @if (_pages > _displayPages && _displayPages > 1)
{ {
<li class="page-item@((_endPage < _pages) ? "" : " disabled")"> <li class="page-item@((_endPage < _pages) ? "" : " disabled")">
<a class="page-link" @onclick=@(async () => SkipPages("forward"))><span class="oi oi-media-skip-forward" title="skip forward" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => SkipPages("forward"))><span class="oi oi-media-skip-forward" title="skip forward" aria-hidden="true"></span></a>
@ -48,7 +48,7 @@
<a class="page-link" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="end" aria-hidden="true"></span></a> <a class="page-link" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="end" aria-hidden="true"></span></a>
</li> </li>
<li class="page-item disabled"> <li class="page-item disabled">
<a class="page-link">Page @_page of @_pages</a> <a class="page-link" style="white-space: nowrap;">Page @_page of @_pages</a>
</li> </li>
</ul> </ul>
} }

5
Oqtane.Client/Resources/Modules/Controls/FileManager.resx
View File

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<root> <root>
<!-- <!--
Microsoft ResX Schema Microsoft ResX Schema
@ -126,9 +126,6 @@
<data name="Error.File.Load" xml:space="preserve"> <data name="Error.File.Load" xml:space="preserve">
<value>Error Loading Files</value> <value>Error Loading Files</value>
</data> </data>
<data name="Success.File.Upload" xml:space="preserve">
<value>File Upload Succeeded</value>
</data>
<data name="Error.File.Upload" xml:space="preserve"> <data name="Error.File.Upload" xml:space="preserve">
<value>File Upload Failed</value> <value>File Upload Failed</value>
</data> </data>

13
Oqtane.Server/wwwroot/js/interop.js
View File

@ -301,7 +301,6 @@ Oqtane.Interop = {
var files = document.getElementById(id + 'FileInput').files; var files = document.getElementById(id + 'FileInput').files;
var progressinfo = document.getElementById(id + 'ProgressInfo'); var progressinfo = document.getElementById(id + 'ProgressInfo');
var progressbar = document.getElementById(id + 'ProgressBar'); var progressbar = document.getElementById(id + 'ProgressBar');
var filename = '';
for (var i = 0; i < files.length; i++) { for (var i = 0; i < files.length; i++) {
var FileChunk = []; var FileChunk = [];
@ -312,11 +311,7 @@ Oqtane.Interop = {
var EndPos = BufferChunkSize; var EndPos = BufferChunkSize;
var Size = file.size; var Size = file.size;
progressbar.setAttribute("style", "visibility: visible;"); progressbar.setAttribute("style", "width:100%; visibility: visible;");
if (files.length > 1) {
filename = file.name;
}
while (FileStreamPos < Size) { while (FileStreamPos < Size) {
FileChunk.push(file.slice(FileStreamPos, EndPos)); FileChunk.push(file.slice(FileStreamPos, EndPos));
@ -338,16 +333,16 @@ Oqtane.Interop = {
request.open('POST', posturl, true); request.open('POST', posturl, true);
request.upload.onloadstart = function (e) { request.upload.onloadstart = function (e) {
progressbar.value = 0; progressbar.value = 0;
progressinfo.innerHTML = filename + ' 0%'; progressinfo.innerHTML = file.name + ' 0%';
}; };
request.upload.onprogress = function (e) { request.upload.onprogress = function (e) {
var percent = Math.ceil((e.loaded / e.total) * 100); var percent = Math.ceil((e.loaded / e.total) * 100);
progressbar.value = (percent / 100); progressbar.value = (percent / 100);
progressinfo.innerHTML = filename + '[' + PartCount + '] ' + percent + '%'; progressinfo.innerHTML = file.name + '[' + PartCount + '] ' + percent + '%';
}; };
request.upload.onloadend = function (e) { request.upload.onloadend = function (e) {
progressbar.value = 1; progressbar.value = 1;
progressinfo.innerHTML = filename + ' 100%'; progressinfo.innerHTML = file.name + ' 100%';
}; };
request.send(data); request.send(data);
} }