Diplomarbeit-Absolventenverein/oqtane.framework
6
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects Releases Wiki Activity

UX improvements to FileManager and Pager components

Browse Source
This commit is contained in:
Shaun Walker
2021-09-29 10:46:23 -04:00
parent c0b13a1f09
commit 3e789e0642
4 changed files with 62 additions and 65 deletions
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 class="row">
<div class="col">
@if (ShowFolders || FolderId <= 0)
{
<div>
<select class="form-select" value="@FolderId" @onchange="(e => FolderChanged(e))">
@if (string.IsNullOrEmpty(Folder))
<div class="container-fluid px-0">
@if (ShowFolders || FolderId <= 0)
{
<div class="row"><div class="col">
<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>
</div>
}
@if (ShowFiles)
{
<div>
<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>
}
@if (ShowUpload && _haseditpermission)
{
<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>
}
<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 class="row"><div class="col mt-1">
<div class="container-fluid px-0">
<div class="row">
<div class="col-6"><span id="@_progressinfoid"></span></div>
<div class="col-6"><progress id="@_progressbarid" class="mt-1" style="visibility: hidden;"></progress></div>
</div>
</div>
</div></div>
}
</div>
</div>
@if (_image != string.Empty)
{
@ -69,7 +78,7 @@
@if (!string.IsNullOrEmpty(_message))
{
<div class="row">
<div class="col mt-2">
<div class="col mt-1">
<ModuleMessage Message="@_message" Type="@_messagetype" />
</div>
</div>
@ -234,7 +243,6 @@
catch (Exception ex)
{
await logger.LogError(ex, "Error Loading Files {Error}", ex.Message);
_message = Localizer["Error.File.Load"];
_messagetype = MessageType.Error;
}
@ -299,9 +307,6 @@
{
await logger.LogInformation("File Upload Succeeded {Files}", upload);
_message = Localizer["Success.File.Upload"];
_messagetype = MessageType.Success;
// set FileId to first file in upload collection
await GetFiles();
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")">
<a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="start" aria-hidden="true"></span></a>
</li>
@if (_pages > _displayPages)
@if (_pages > _displayPages && _displayPages > 1)
{
<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>
@ -38,7 +38,7 @@
<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>
</li>
@if (_pages > _displayPages)
@if (_pages > _displayPages && _displayPages > 1)
{
<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>
@ -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>
</li>
<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>
</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>
<!--
Microsoft ResX Schema
@ -126,9 +126,6 @@
<data name="Error.File.Load" xml:space="preserve">
<value>Error Loading Files</value>
</data>
<data name="Success.File.Upload" xml:space="preserve">
<value>File Upload Succeeded</value>
</data>
<data name="Error.File.Upload" xml:space="preserve">
<value>File Upload Failed</value>
</data>

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

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