Adding of archive items is mostly operational. Need to handle file upload
This commit is contained in:
Vincent Allen
@@ -0,0 +1,122 @@
|
||||
@using MudBlazor
|
||||
|
||||
<div class="d-flex flex-wrap ga-2 align-center">
|
||||
@* Loop through and display each tag as a chip *@
|
||||
@foreach (var tag in Items)
|
||||
{
|
||||
<MudChip Color="Color.Primary" OnClose="() => RemoveTag(tag)" T="string">@tag</MudChip>
|
||||
}
|
||||
|
||||
@* Text field for adding new tags *@
|
||||
<div style="min-width: 150px;">
|
||||
@switch (InputType)
|
||||
{
|
||||
case ChipTagInputType.TextBox:
|
||||
{
|
||||
<MudTextField T="string"
|
||||
@bind-Value="_newTag"
|
||||
Variant="Variant.Text"
|
||||
@bind-Placeholder="Placeholder"
|
||||
OnKeyDown="HandleKeyDownTextBox"
|
||||
Immediate="true"
|
||||
Style="padding-top: 0;"
|
||||
@ref=_mudTextField
|
||||
/>
|
||||
break;
|
||||
}
|
||||
case ChipTagInputType.AutoComplete:
|
||||
{
|
||||
@if (AutocompleteSearchFunc is not null)
|
||||
{
|
||||
<MudAutocomplete
|
||||
@bind-Text="_newTag"
|
||||
@bind-Placeholder="Placeholder"
|
||||
SearchFunc="AutocompleteSearchFunc"
|
||||
CoerceText=false
|
||||
CoerceValue=false
|
||||
OnKeyDown="HandleKeyDownTextBox"
|
||||
>
|
||||
|
||||
</MudAutocomplete>
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
public enum ChipTagInputType
|
||||
{
|
||||
None,
|
||||
TextBox,
|
||||
AutoComplete,
|
||||
Date
|
||||
}
|
||||
|
||||
private string _newTag = "";
|
||||
|
||||
/// <summary>
|
||||
/// The list of tags to display and manage.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public List<string> Items { get; set; } = new();
|
||||
|
||||
/// <summary>
|
||||
/// Required for two-way binding (@bind-Items).
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback<List<string>> ItemsChanged { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public EventCallback OnChanged { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string Placeholder { get; set; } = "Add tag...";
|
||||
|
||||
[Parameter]
|
||||
public ChipTagInputType InputType { get; set; } = ChipTagInputType.TextBox;
|
||||
|
||||
[Parameter]
|
||||
public Func<string, CancellationToken, Task<IEnumerable<string>>>? AutocompleteSearchFunc { get; set; } = null;
|
||||
|
||||
private MudTextField<string>? _mudTextField;
|
||||
|
||||
private MudAutocomplete<string>? _mudAutoComplete;
|
||||
|
||||
/// <summary>
|
||||
/// Handles the key press event in the text field.
|
||||
/// </summary>
|
||||
private async Task HandleKeyDownTextBox(KeyboardEventArgs e)
|
||||
{
|
||||
if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(_newTag))
|
||||
{
|
||||
// Add the tag if it doesn't already exist
|
||||
if (!Items.Contains(_newTag, StringComparer.OrdinalIgnoreCase))
|
||||
{
|
||||
Items.Add(_newTag);
|
||||
await ItemsChanged.InvokeAsync(Items);
|
||||
await OnChanged.InvokeAsync();
|
||||
}
|
||||
|
||||
// Clear the input field
|
||||
_newTag = "";
|
||||
|
||||
if (_mudTextField is not null)
|
||||
_mudTextField.Clear();
|
||||
|
||||
if (_mudAutoComplete is not null)
|
||||
await _mudAutoComplete.ClearAsync();
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Removes a tag from the list when the close icon is clicked.
|
||||
/// </summary>
|
||||
private async Task RemoveTag(string tag)
|
||||
{
|
||||
Items.Remove(tag);
|
||||
await ItemsChanged.InvokeAsync(Items);
|
||||
await OnChanged.InvokeAsync();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<style>
|
||||
.file-upload-input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<MudStack Style="width: 100%">
|
||||
<MudFileUpload T="IReadOnlyList<IBrowserFile>"
|
||||
@ref="@_fileUpload"
|
||||
OnFilesChanged="OnInputFileChanged"
|
||||
AppendMultipleFiles
|
||||
Hidden="@false"
|
||||
InputClass="file-upload-input"
|
||||
tabindex="-1"
|
||||
@ondrop="@ClearDragClass"
|
||||
@ondragenter="@SetDragClass"
|
||||
@ondragleave="@ClearDragClass"
|
||||
@ondragend="@ClearDragClass">
|
||||
<ActivatorContent>
|
||||
<MudPaper Height="300px"
|
||||
Outlined="true"
|
||||
Class="@_dragClass">
|
||||
<MudText Typo="Typo.h6">
|
||||
Drag and drop files here or click
|
||||
</MudText>
|
||||
@foreach (var file in _fileNames)
|
||||
{
|
||||
<MudChip T="string"
|
||||
Color="Color.Dark"
|
||||
Text="@file"
|
||||
tabindex="-1" />
|
||||
}
|
||||
</MudPaper>
|
||||
</ActivatorContent>
|
||||
</MudFileUpload>
|
||||
<MudToolBar Gutters="@false"
|
||||
Class="relative d-flex justify-end gap-4">
|
||||
<MudButton Color="Color.Primary"
|
||||
OnClick="@OpenFilePickerAsync"
|
||||
Variant="Variant.Filled">
|
||||
Open file picker
|
||||
</MudButton>
|
||||
<MudButton Color="Color.Primary"
|
||||
Disabled="@(!_fileNames.Any())"
|
||||
OnClick="@Upload"
|
||||
Variant="Variant.Filled">
|
||||
Upload
|
||||
</MudButton>
|
||||
<MudButton Color="Color.Error"
|
||||
Disabled="@(!_fileNames.Any())"
|
||||
OnClick="@ClearAsync"
|
||||
Variant="Variant.Filled">
|
||||
Clear
|
||||
</MudButton>
|
||||
</MudToolBar>
|
||||
</MudStack>
|
||||
|
||||
@code {
|
||||
#nullable enable
|
||||
private const string DefaultDragClass = "relative rounded-lg border-2 border-dashed pa-4 mt-4 mud-width-full mud-height-full";
|
||||
private string _dragClass = DefaultDragClass;
|
||||
private readonly List<string> _fileNames = new();
|
||||
private MudFileUpload<IReadOnlyList<IBrowserFile>>? _fileUpload;
|
||||
|
||||
private async Task ClearAsync()
|
||||
{
|
||||
await (_fileUpload?.ClearAsync() ?? Task.CompletedTask);
|
||||
_fileNames.Clear();
|
||||
ClearDragClass();
|
||||
}
|
||||
|
||||
private Task OpenFilePickerAsync()
|
||||
=> _fileUpload?.OpenFilePickerAsync() ?? Task.CompletedTask;
|
||||
|
||||
private void OnInputFileChanged(InputFileChangeEventArgs e)
|
||||
{
|
||||
ClearDragClass();
|
||||
var files = e.GetMultipleFiles();
|
||||
foreach (var file in files)
|
||||
{
|
||||
_fileNames.Add(file.Name);
|
||||
}
|
||||
}
|
||||
|
||||
private void Upload()
|
||||
{
|
||||
// Upload the files here
|
||||
Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;
|
||||
Snackbar.Add("TODO: Upload your files!");
|
||||
}
|
||||
|
||||
private void SetDragClass()
|
||||
=> _dragClass = $"{DefaultDragClass} mud-border-primary";
|
||||
|
||||
private void ClearDragClass()
|
||||
=> _dragClass = DefaultDragClass;
|
||||
}
|
||||
Reference in New Issue
Block a user