From dfdb4c144fd7c023cd8cf00824b3f9446bd3e63d Mon Sep 17 00:00:00 2001 From: Bukk94 Date: Fri, 25 Nov 2022 15:21:13 +0100 Subject: [PATCH 1/6] Fixed invalid code in _Host.cshtml and extended gitignore --- .gitignore | 2 ++ src/Blazor.AdminLte.Site/Pages/_Host.cshtml | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index dfcfd56f..6c2bd2fd 100644 --- a/.gitignore +++ b/.gitignore @@ -348,3 +348,5 @@ MigrationBackup/ # Ionide (cross platform F# VS Code tools) working folder .ionide/ + +.idea/ \ No newline at end of file diff --git a/src/Blazor.AdminLte.Site/Pages/_Host.cshtml b/src/Blazor.AdminLte.Site/Pages/_Host.cshtml index 99fc6243..2a6de59d 100644 --- a/src/Blazor.AdminLte.Site/Pages/_Host.cshtml +++ b/src/Blazor.AdminLte.Site/Pages/_Host.cshtml @@ -42,7 +42,7 @@
*@ - +
From 74d8e62d2b3ba74a08e361577e7a495dd5c4cce5 Mon Sep 17 00:00:00 2001 From: Bukk94 Date: Thu, 20 Oct 2022 11:49:45 +0200 Subject: [PATCH 2/6] Customizable links in notification message and chevron in SidebartreeView (cherry picked from commit a2a4ddc9e425960c820ef81a34a0357291238a78) --- .../NavBar/Dropdown/NotificationMessage.razor | 5 ++++- src/Blazor.AdminLte/SideBar/SideBarTreeView.razor | 8 ++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/Blazor.AdminLte/NavBar/Dropdown/NotificationMessage.razor b/src/Blazor.AdminLte/NavBar/Dropdown/NotificationMessage.razor index ad093489..925e2043 100644 --- a/src/Blazor.AdminLte/NavBar/Dropdown/NotificationMessage.razor +++ b/src/Blazor.AdminLte/NavBar/Dropdown/NotificationMessage.razor @@ -1,5 +1,5 @@ @namespace Blazor.AdminLte - + @Message @{ var prettyDate = DateTime.GetPrettyDate(); @@ -14,6 +14,9 @@ } @code { + + [Parameter] + public string Link { get; set; } [Parameter] public string Icon { get; set; } [Parameter] diff --git a/src/Blazor.AdminLte/SideBar/SideBarTreeView.razor b/src/Blazor.AdminLte/SideBar/SideBarTreeView.razor index 963c2870..da2bba61 100644 --- a/src/Blazor.AdminLte/SideBar/SideBarTreeView.razor +++ b/src/Blazor.AdminLte/SideBar/SideBarTreeView.razor @@ -5,7 +5,10 @@

@Title - + @if (!string.IsNullOrWhiteSpace(Chevron)) + { + + }

    @@ -16,6 +19,8 @@ [Parameter] public string Icon { get; set; } [Parameter] + public string Chevron { get; set; } = "fa-angle-left"; + [Parameter] public RenderFragment Title { get; set; } [Parameter] public RenderFragment Items { get; set; } @@ -39,7 +44,6 @@ } private string menuState => MenuState.GetDescription(); - private string chevron { get; set; } = "fa-angle-left"; private ElementReference ul { get; set; } private ElementReference menu { get; set; } From d617fdece08b0bccdd37fe79c1741cd708d31e26 Mon Sep 17 00:00:00 2001 From: Bukk94 Date: Fri, 25 Nov 2022 15:23:18 +0100 Subject: [PATCH 3/6] Made card title optional, extended example page --- .../Pages/Layout/GridSystem.razor | 43 ++++++++++++------- src/Blazor.AdminLte/Card/Card.razor.cs | 17 +++++--- 2 files changed, 39 insertions(+), 21 deletions(-) diff --git a/src/Blazor.AdminLte.Site.Shared/Pages/Layout/GridSystem.razor b/src/Blazor.AdminLte.Site.Shared/Pages/Layout/GridSystem.razor index f3f751f3..c542fde5 100644 --- a/src/Blazor.AdminLte.Site.Shared/Pages/Layout/GridSystem.razor +++ b/src/Blazor.AdminLte.Site.Shared/Pages/Layout/GridSystem.razor @@ -111,22 +111,35 @@ <CardTitle>Mix and match</CardTitle> - Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works. - Stack the columns on mobile by making one full-width and the other half-width - - @col._12.col.md._8 - @col._6.col.md._4 - - Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop - - @col._6.col.md._4 - @col._6.col.md._4 - @col._6.col.md._4 - - Columns are always 50% wide, on mobile and desktop + Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works. + Stack the columns on mobile by making one full-width and the other half-width + + @col._12.col.md._8 + @col._6.col.md._4 + + Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop + + @col._6.col.md._4 + @col._6.col.md._4 + @col._6.col.md._4 + + Columns are always 50% wide, on mobile and desktop + + @col._6 + @col._6 + + + + + <CardTitle>Column with no title</CardTitle> + - @col._6 - @col._6 + + @col._12.col.md._8 + + + No Title + diff --git a/src/Blazor.AdminLte/Card/Card.razor.cs b/src/Blazor.AdminLte/Card/Card.razor.cs index 2b89ac5a..708f7884 100644 --- a/src/Blazor.AdminLte/Card/Card.razor.cs +++ b/src/Blazor.AdminLte/Card/Card.razor.cs @@ -80,6 +80,11 @@ private IDictionary GetAttributes() private IDictionary GetHeaderAttributes() { var attributes = new Dictionary(); + if (Title == null) + { + return attributes; + } + attributes["class"] = "card-header"; if (IsTabs) { @@ -87,13 +92,13 @@ private IDictionary GetHeaderAttributes() if (!Styles.ToList().Contains(CardStyle.OutlineTabs)) { attributes["class"] = $"{attributes["class"]} pt-1"; - } - if (Styles.ToList().Contains(CardStyle.Outline)) - { - attributes["class"] = $"{attributes["class"]} border-bottom-0"; } - } - + if (Styles.ToList().Contains(CardStyle.Outline)) + { + attributes["class"] = $"{attributes["class"]} border-bottom-0"; + } + } + return attributes; } } From 166ed67353d8640f1c6625c9e229048492a586c6 Mon Sep 17 00:00:00 2001 From: Bukk94 Date: Fri, 25 Nov 2022 15:25:08 +0100 Subject: [PATCH 4/6] Fixed Notification Message to contain javascript:void(0) instead of #, extended login page with email validator --- .../Pages/User/Login.razor | 59 +++++++++++++------ src/Blazor.AdminLte/Forms/Input.razor | 10 +--- src/Blazor.AdminLte/Forms/InputState.cs | 11 +++- .../NavBar/Dropdown/NotificationMessage.razor | 16 ++--- .../Helpers/EmailValidator.cs | 9 ++- 5 files changed, 68 insertions(+), 37 deletions(-) diff --git a/src/Blazor.AdminLte.Site.Shared/Pages/User/Login.razor b/src/Blazor.AdminLte.Site.Shared/Pages/User/Login.razor index f979f5ae..553ffed5 100644 --- a/src/Blazor.AdminLte.Site.Shared/Pages/User/Login.razor +++ b/src/Blazor.AdminLte.Site.Shared/Pages/User/Login.razor @@ -1,7 +1,8 @@ @page "/login" +@using Blazor.AdminLte.Security.Abstractions.Helpers -
    +
    -@if (filesQueue.Count > 0) { +@if (_filesQueue.Count > 0) {
    Upload queue
    @@ -39,7 +39,7 @@ - @foreach (var file in filesQueue.OrderByDescending(x => x.FileId)) + @foreach (var file in _filesQueue.OrderByDescending(x => x.FileId)) { var size = Math.Round((file.Size / 1024.00)); var percentage = Math.Round(file.UploadedPercentage); diff --git a/src/Blazor.AdminLte/Files/FileUploader.razor.cs b/src/Blazor.AdminLte/Files/FileUploader.razor.cs index fc4e5970..0c6660f0 100644 --- a/src/Blazor.AdminLte/Files/FileUploader.razor.cs +++ b/src/Blazor.AdminLte/Files/FileUploader.razor.cs @@ -10,62 +10,120 @@ namespace Blazor.AdminLte { public partial class FileUploader { - [Inject] IFilesManager? FilesManager { get; set; } + [Inject] + private IFilesManager FilesManager { get; set; } + private bool isUploading = false; private string ErrorMessage = string.Empty; private string dropClass = string.Empty; - private int maxAllowedFiles = 25; - List filesQueue = new(); - + private List _filesQueue = new(); + + [Parameter] + public EventCallback OnUploadFinished { get; set; } + + [Parameter] + public int MaxAllowedFiles { get; set; } = 25; + + [Parameter] + public long? MaximumFileSizeInBytes { get; set; } + + /// + /// Allowed extensions to upload. Must be specified with dot + /// + /// + /// .json + /// + [Parameter] + public string[] AllowedExtensions { get; set; } private void AddFilesToQueue(InputFileChangeEventArgs e) { dropClass = string.Empty; ErrorMessage = string.Empty; - if (e.FileCount > maxAllowedFiles) + if (e.FileCount > MaxAllowedFiles) + { + ErrorMessage = $"A maximum of {MaxAllowedFiles} is allowed, you have selected {e.FileCount} files!"; + return; + } + + if (_filesQueue.Count > MaxAllowedFiles) { - ErrorMessage = $"A maximum of {maxAllowedFiles} is allowed, you have selected {e.FileCount} files!"; + ErrorMessage = $"Queue already contains maximum number of items ({MaxAllowedFiles})! Clear the queue to continue."; + return; } - else + + var files = e.GetMultipleFiles(MaxAllowedFiles); + var fileCount = _filesQueue.Count; + + // Validate allowed extensions + if (AllowedExtensions?.Any() == true) { - var files = e.GetMultipleFiles(maxAllowedFiles); - var fileCount = filesQueue.Count; + var filesValid = + files.All(x => AllowedExtensions.Any( + ext => string.Equals(ext, Path.GetExtension(x.Name), StringComparison.InvariantCultureIgnoreCase))); - foreach (var file in files) + if (!filesValid) { - var progress = new FileUploadProgress(file, file.Name, file.Size, fileCount); - filesQueue.Add(progress); - fileCount++; + ErrorMessage = $"Uploaded file(s) has invalid extension. Allowed extensions: {string.Join(", ", AllowedExtensions)}."; + return; } } - } //PlaceFilesInQue + if (MaximumFileSizeInBytes.HasValue && + files.Any(x => x.Size > MaximumFileSizeInBytes)) + { + ErrorMessage = $"Reached maximum file size! Please select file(s) smaller than {ToReadableUnits()}"; + return; + } + + foreach (var file in files) + { + var progress = new FileUploadProgress(file, file.Name, file.Size, fileCount); + _filesQueue.Add(progress); + fileCount++; + } + } + + private string ToReadableUnits() + { + var kb = Math.Round(MaximumFileSizeInBytes.Value / 1024.00); + + // TODO: Convert to MB if too big + return $"{kb} kB"; + } private async Task UploadFileQueue() { isUploading = true; await InvokeAsync(StateHasChanged); - foreach (var file in filesQueue.OrderByDescending(x => x.FileId)) + foreach (var file in _filesQueue.OrderByDescending(x => x.FileId)) { if (!file.HasBeenUploaded) { await UploadChunks(file); file.HasBeenUploaded = true; + if (OnUploadFinished.HasDelegate) + { + await OnUploadFinished.InvokeAsync(new UploadResultDto + { + FileName = file.FileName, + Uid = file.Uid + }); + } } } isUploading = false; - } //UploadFileQueue - + } private async Task UploadChunks(FileUploadProgress file) { - var TotalBytes = file.Size; + var totalBytes = file.Size; long chunkSize = 400000; - long numChunks = TotalBytes / chunkSize; - long remainder = TotalBytes % chunkSize; + long numChunks = totalBytes / chunkSize; + long remainder = totalBytes % chunkSize; string nameOnly = Path.GetFileNameWithoutExtension(file.FileName); var extension = Path.GetExtension(file.FileName); @@ -83,15 +141,16 @@ private async Task UploadChunks(FileUploadProgress file) { Data = buffer, FileName = newFileNameWithoutPath, - Offset = filesQueue[file.FileId].UploadedBytes, - FirstChunk = firstChunk + Offset = _filesQueue[file.FileId].UploadedBytes, + FirstChunk = firstChunk, + Uid = file.Uid }; - await FilesManager.UploadFileChunk(chunk); + await FilesManager.UploadFileChunkAsync(chunk); firstChunk = false; // Update our progress data and UI - filesQueue[file.FileId].UploadedBytes += chunkSize; + _filesQueue[file.FileId].UploadedBytes += chunkSize; await InvokeAsync(StateHasChanged); } @@ -104,53 +163,53 @@ private async Task UploadChunks(FileUploadProgress file) { Data = buffer, FileName = newFileNameWithoutPath, - Offset = filesQueue[file.FileId].UploadedBytes, - FirstChunk = firstChunk + Offset = _filesQueue[file.FileId].UploadedBytes, + FirstChunk = firstChunk, + Uid = file.Uid }; - await FilesManager.UploadFileChunk(chunk); + + await FilesManager.UploadFileChunkAsync(chunk); // Update our progress data and UI - filesQueue[file.FileId].UploadedBytes += remainder; - //await ListFiles(); + _filesQueue[file.FileId].UploadedBytes += remainder; await InvokeAsync(StateHasChanged); } } - } //UploadChunks - + } private void RemoveFromQueue(int fileId) { - var itemToRemove = filesQueue.SingleOrDefault(x => x.FileId == fileId); + var itemToRemove = _filesQueue.SingleOrDefault(x => x.FileId == fileId); if (itemToRemove != null) - filesQueue.Remove(itemToRemove); - } //RemoveFromQueue - + { + _filesQueue.Remove(itemToRemove); + } + } - private void ClearFileQueue() + public void ClearFileQueue() { - filesQueue.Clear(); - } //ClearFileQueue - + _filesQueue.Clear(); + } - record FileUploadProgress(IBrowserFile File, string FileName, long Size, int FileId) + public record FileUploadProgress(IBrowserFile File, string FileName, long Size, int FileId) { public IBrowserFile FileData { get; set; } = File; public int FileId { get; set; } = FileId; public long UploadedBytes { get; set; } public double UploadedPercentage => (double)UploadedBytes / (double)Size * 100d; public bool HasBeenUploaded { get; set; } = false; - } //FileUploadProgress - + public Guid Uid { get; set; } = Guid.NewGuid(); + } - void HandleDragEnter() + private void HandleDragEnter() { dropClass = "dropzone-active"; - } //HandleDragEnter - void HandleDragLeave() + } + + private void HandleDragLeave() { dropClass = string.Empty; - } //HandleDragLeave - + } /* protected override async Task OnInitializedAsync() @@ -164,8 +223,5 @@ private async Task ListFiles() await InvokeAsync(StateHasChanged); } */ - - - } } diff --git a/src/Blazor.AdminLte/Files/IFilesManager.cs b/src/Blazor.AdminLte/Files/IFilesManager.cs index 6fa0d002..d84e7fd1 100644 --- a/src/Blazor.AdminLte/Files/IFilesManager.cs +++ b/src/Blazor.AdminLte/Files/IFilesManager.cs @@ -1,13 +1,11 @@ - - -using System.Collections.Generic; +using System.Collections.Generic; using System.Threading.Tasks; namespace Blazor.AdminLte { public interface IFilesManager { - Task UploadFileChunk(ChunkedDataRequestDto fileChunkDto); - Task> GetFileNames(); + Task UploadFileChunkAsync(ChunkedDataRequestDto fileChunkDto); + Task> GetFileNamesAsync(); } } diff --git a/src/Blazor.AdminLte/Files/UploadResultDto.cs b/src/Blazor.AdminLte/Files/UploadResultDto.cs new file mode 100644 index 00000000..7350130e --- /dev/null +++ b/src/Blazor.AdminLte/Files/UploadResultDto.cs @@ -0,0 +1,10 @@ +using System; + +namespace Blazor.AdminLte +{ + public class UploadResultDto + { + public Guid Uid { get; set; } + public string FileName { get; set; } = ""; + } +} \ No newline at end of file diff --git a/src/Blazor.AdminLte/Forms/Input.razor b/src/Blazor.AdminLte/Forms/Input.razor index d92666fe..2ff83aba 100644 --- a/src/Blazor.AdminLte/Forms/Input.razor +++ b/src/Blazor.AdminLte/Forms/Input.razor @@ -3,8 +3,15 @@ { } +
    - + @if (!string.IsNullOrEmpty(Value.Icon)) {
    diff --git a/src/Blazor.AdminLte/Forms/Input.razor.cs b/src/Blazor.AdminLte/Forms/Input.razor.cs index 23a662ab..719d2ca6 100644 --- a/src/Blazor.AdminLte/Forms/Input.razor.cs +++ b/src/Blazor.AdminLte/Forms/Input.razor.cs @@ -1,4 +1,5 @@ -using Microsoft.AspNetCore.Components; +using System.Collections.Generic; +using Microsoft.AspNetCore.Components; namespace Blazor.AdminLte { @@ -13,6 +14,12 @@ public partial class Input [Parameter] public EventCallback OnChange { get; set; } + [Parameter(CaptureUnmatchedValues = true)] + public Dictionary InputAttributes { get; set; } + + [Parameter] + public bool IsReadOnly { get; set; } + private void DoChange(ChangeEventArgs e) { Value.Value = (string)e.Value; @@ -20,5 +27,16 @@ private void DoChange(ChangeEventArgs e) if (OnChange.HasDelegate) OnChange.InvokeAsync(Value); } + + private IDictionary GetAttributes() + { + var attributes = InputAttributes ?? new Dictionary(); + if (IsReadOnly) + { + attributes["readonly"] = "readonly"; + } + + return attributes; + } } } From 0e9339b2082aca87d445e38a8a363cfe867cdfdc Mon Sep 17 00:00:00 2001 From: Bukk94 Date: Fri, 25 Nov 2022 15:29:24 +0100 Subject: [PATCH 6/6] Improved SideBarMenu View and Item to preserve state --- .../SideBar/SideBarMenuItem.razor | 8 +++- .../SideBar/SideBarTreeView.razor | 42 ++++++++++++++----- 2 files changed, 39 insertions(+), 11 deletions(-) diff --git a/src/Blazor.AdminLte/SideBar/SideBarMenuItem.razor b/src/Blazor.AdminLte/SideBar/SideBarMenuItem.razor index 6f2412f2..ed9602a0 100644 --- a/src/Blazor.AdminLte/SideBar/SideBarMenuItem.razor +++ b/src/Blazor.AdminLte/SideBar/SideBarMenuItem.razor @@ -32,6 +32,11 @@ { // Subscribe to the event nav.LocationChanged += LocationChanged; + + // Manually invoke location change to set state when user access URL directly + // and to preserve highlight state when use refresh the page + LocationChanged(this, null); + base.OnInitialized(); } @@ -39,7 +44,8 @@ { if (new Uri(nav.Uri).PathAndQuery.Trim('/') != Link.Trim('/')) return; - Mediator.Send(new SideBarState.SelectMenuItemAction() { Id = Id }); ; + + Mediator.Send(new SideBarState.SelectMenuItemAction { Id = Id }); ; } void IDisposable.Dispose() diff --git a/src/Blazor.AdminLte/SideBar/SideBarTreeView.razor b/src/Blazor.AdminLte/SideBar/SideBarTreeView.razor index da2bba61..606ad27a 100644 --- a/src/Blazor.AdminLte/SideBar/SideBarTreeView.razor +++ b/src/Blazor.AdminLte/SideBar/SideBarTreeView.razor @@ -11,7 +11,7 @@ }

    -
      +
        @Items
      @@ -25,14 +25,28 @@ [Parameter] public RenderFragment Items { get; set; } + [Parameter] + public bool IsActive + { + get => _isActive; + set + { + if (value) + SetActive(); + else + SetInactive(); + } + } + + private bool _isActive; private MenuState _menuState { get; set; } private MenuState MenuState { - get { - return _menuState; - } set { + get => _menuState; + set { if (_menuState == value) return; + JS.InvokeVoidAsync("toggleSideMenu", ul); _menuState = value; } @@ -40,9 +54,22 @@ public void SetActive() { - // JS.InvokeVoidAsync("activateSideMenu", menu); + if (_isActive) + return; + + _isActive = true; + MenuState = MenuState.Open; } + public void SetInactive() + { + if (!_isActive) + return; + + _isActive = false; + MenuState = MenuState.Closed; + } + private string menuState => MenuState.GetDescription(); private ElementReference ul { get; set; } @@ -52,9 +79,4 @@ { MenuState = MenuState == MenuState.Open ? MenuState.Closed : MenuState.Open; } - - protected override void OnAfterRender(bool firstRender) - { - base.OnAfterRender(firstRender); - } }