@using static HotelPms.Client.Blazor.Util.SystemEnum
|
@inject IJSRuntime JSRuntime
|
<MudDialog Style="width: 600px;">
|
<DialogContent>
|
<MudTable @onkeydown="KeyHandler" @onfocus="Enter" @onblur="Leave" tabindex="0" id="select-list-grid" Style="cursor: pointer;" Items="@Data.AsEnumerable()" Dense="true" Hover="true" ReadOnly="true" Filter="new Func<DataRow,bool>(FilterFunc)" @bind-SelectedItem="selectedItem" Height="300px" FixedHeader="true" Striped="true" T="DataRow" OnRowClick="@((e) => OnRowClick(e))">
|
<ToolBarContent>
|
<MudTextField Margin="Margin.Dense" @bind-Value="searchKey" Label="フィルター" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
|
</ToolBarContent>
|
<ColGroup>
|
<col style="width:150px;" />
|
<col />
|
</ColGroup>
|
<HeaderContent>
|
<MudTh>コード</MudTh>
|
<MudTh>名称</MudTh>
|
</HeaderContent>
|
<RowTemplate>
|
<MudTd Class="@SelectRow(context)">@context[0]</MudTd>
|
<MudTd Class="@SelectRow(context)">@context[1]</MudTd>
|
</RowTemplate>
|
</MudTable>
|
</DialogContent>
|
<DialogActions>
|
<MudGrid Spacing="2" Justify="Justify.Center" Class="my-3">
|
<MudItem>
|
<MudButton Variant="Variant.Filled" Color="MudBlazor.Color.Primary" OnClick="Close" StartIcon="@Icons.Filled.Close" Style="width: 180px; height: 40px;">キャンセル</MudButton>
|
</MudItem>
|
</MudGrid>
|
</DialogActions>
|
</MudDialog>
|
|
<style>
|
#select-list-grid .tr-select {
|
color: var(--mud-palette-primary);
|
background-color: var(--mud-palette-primary-hover);
|
<!-- background-color: rgba(223,235,242, 0.77); -->
|
}
|
|
:focus {
|
outline: none;
|
}
|
</style>
|
|
@code {
|
[CascadingParameter] MudDialogInstance? MudDialog { get; set; }
|
[Parameter] public DataTable? Data { get; set; }
|
private string? searchKey;
|
private DataRow? selectedItem;
|
private int selectRowIndex = 0;
|
|
private void Enter(FocusEventArgs e)
|
{
|
EnvironmentSetting.Debug($"Enter");
|
}
|
|
private void Leave(FocusEventArgs e)
|
{
|
EnvironmentSetting.Debug($"Leave");
|
}
|
|
private async Task KeyHandler(KeyboardEventArgs e)
|
{
|
ElementBase element = await JSRuntime.GetActiveElement();
|
EnvironmentSetting.Debug($"{e.Code}.{e.Key}.{element.Id}");
|
|
if (element.Id != "select-list-grid") { return; }
|
if (e.Key == "ArrowUp")
|
{
|
if (selectRowIndex == 0) { return; }
|
selectRowIndex--;
|
}
|
else if (e.Key == "ArrowDown")
|
{
|
if (selectRowIndex == Data.Rows.Count - 1) { return; }
|
selectRowIndex++;
|
}
|
else if (e.Key == "Enter")
|
{
|
MudDialog.Close(DialogResult.Ok(selectedItem));
|
return;
|
}
|
selectedItem = Data.Rows[selectRowIndex];
|
}
|
|
protected override void OnAfterRender(bool firstRender)
|
{
|
EnvironmentSetting.Debug(DateTime.Now.ToString("HH:mm:ss fff"));
|
base.OnAfterRender(firstRender);
|
}
|
|
private string SelectRow(DataRow row)
|
{
|
if (selectedItem == null) { selectedItem = Data.Rows[0]; selectRowIndex = 0; }
|
if (row.Equals(selectedItem))
|
{
|
return "tr-select";
|
}
|
else
|
{
|
return string.Empty;
|
}
|
}
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
{
|
if(firstRender)
|
{
|
await JSRuntime.SetFocusByKey("#select-list-grid");
|
}
|
}
|
|
private bool FilterFunc(DataRow row)
|
{
|
if (string.IsNullOrWhiteSpace(searchKey)) { return true; }
|
if (row[1].ToString().Contains(searchKey)) { return true; }
|
return false;
|
}
|
|
private void OnRowClick(TableRowClickEventArgs<DataRow> e)
|
{
|
MudDialog.Close(DialogResult.Ok(e.Item));
|
}
|
|
private void Close()
|
{
|
MudDialog.Cancel();
|
}
|
}
|
