From 3e789e06427aae2fdd48331358d806471735acf9 Mon Sep 17 00:00:00 2001
From: Shaun Walker <shaun.walker@siliqon.com>
Date: Wed, 29 Sep 2021 10:46:23 -0400
Subject: [PATCH] UX improvements to FileManager and Pager components

---
 .../Modules/Controls/FileManager.razor        | 103 +++++++++---------
 Oqtane.Client/Modules/Controls/Pager.razor    |   6 +-
 .../Modules/Controls/FileManager.resx         |   5 +-
 Oqtane.Server/wwwroot/js/interop.js           |  13 +--
 4 files changed, 62 insertions(+), 65 deletions(-)

diff --git a/Oqtane.Client/Modules/Controls/FileManager.razor b/Oqtane.Client/Modules/Controls/FileManager.razor
index 9822859d..5eb01d6c 100644
--- a/Oqtane.Client/Modules/Controls/FileManager.razor
+++ b/Oqtane.Client/Modules/Controls/FileManager.razor
@@ -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();
diff --git a/Oqtane.Client/Modules/Controls/Pager.razor b/Oqtane.Client/Modules/Controls/Pager.razor
index 464431dd..9a8b6c61 100644
--- a/Oqtane.Client/Modules/Controls/Pager.razor
+++ b/Oqtane.Client/Modules/Controls/Pager.razor
@@ -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>
     }
diff --git a/Oqtane.Client/Resources/Modules/Controls/FileManager.resx b/Oqtane.Client/Resources/Modules/Controls/FileManager.resx
index f7f93e08..9cbe0991 100644
--- a/Oqtane.Client/Resources/Modules/Controls/FileManager.resx
+++ b/Oqtane.Client/Resources/Modules/Controls/FileManager.resx
@@ -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>
diff --git a/Oqtane.Server/wwwroot/js/interop.js b/Oqtane.Server/wwwroot/js/interop.js
index 5042005c..73d2398b 100644
--- a/Oqtane.Server/wwwroot/js/interop.js
+++ b/Oqtane.Server/wwwroot/js/interop.js
@@ -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);
             }