sort popup

I'll help you create a MudBlazor popup component for sorting sheet columns with ascending/descending options. Let me create a component that includes dropdown selection for columns and sort direction options.
I've created a MudBlazor popup component for configuring sort settings. Here's how it works:

1. The component displays 5 sort items as shown in your image, each with:
   • A dropdown to select a column (populated from the parent component)
   • Radio buttons to choose between "오름차순" (ascending) and "내림차순" (descending)
2. Only the first item includes a checkbox for "구분선" (separator line)
3. The component returns all sorting selections to the parent component when the "확인" (confirm) button is clicked

Now, here's how to use this component in your parent page:
위 코드는 MudBlazor를 사용하여 시트 컬럼 정렬 설정을 위한 팝업 화면을 구현한 것입니다. 주요 기능은 다음과 같습니다:

주요 기능

1. 5개의 정렬 항목:
   • 각 항목마다 컬럼 선택용 드롭다운
   • 오름차순/내림차순 선택 라디오 버튼
   • 첫 번째 항목에만 구분선 체크박스 제공
2. 부모 컴포넌트와의 상호작용:
   • 부모 컴포넌트로부터 컬럼 정보를 받아와 콤보박스(드롭다운) 데이터로 표시
   • "확인" 버튼 클릭 시 모든 정렬 설정을 부모 컴포넌트로 반환
3. 구분선 기능:
   • 첫 번째 항목에만 구분선 체크박스 표시
   • 구분선 선택 정보도 반환 데이터에 포함

사용 방법

1. 부모 컴포넌트에서 IDialogService를 주입 받아 사용합니다.
2. 시트의 컬럼 정보를 준비합니다.
3. SortDialog.ShowSortDialog 메서드를 호출하여 팝업을 표시합니다.
4. 사용자가 선택한 정렬 설정을 받아 처리합니다.

@page "/sort-dialog"
@using System.Collections.Generic
@using System.Linq
@inject MudDialogInstance MudDialog

<MudDialog>
    <TitleContent>
        <MudText Typo="Typo.h6">정렬 설정</MudText>
    </TitleContent>
    <DialogContent>
        <MudContainer Style="max-height: 400px; overflow-y: auto; padding: 0">
            @foreach (var item in SortItems.Select((value, i) => new { Value = value, Index = i }))
            {
                <div class="d-flex flex-column mb-3">
                    @if (item.Index == 0)
                    {
                        <div class="d-flex align-center mb-2">
                            <MudCheckBox @bind-Checked="item.Value.HasSeparator" Color="Color.Primary">구분선</MudCheckBox>
                        </div>
                        <MudDivider Class="my-2" />
                    }

                    <div class="d-flex align-center">
                        <MudSelect T="string" Label="컬럼 선택" AnchorOrigin="Origin.BottomCenter" @bind-Value="item.Value.SelectedColumn" Style="flex-grow: 1; margin-right: 12px;">
                            @foreach (var column in AvailableColumns)
                            {
                                <MudSelectItem Value="@column">@column</MudSelectItem>
                            }
                        </MudSelect>

                        <div class="d-flex">
                            <MudRadioGroup @bind-SelectedOption="item.Value.SortDirection" Class="d-flex flex-row">
                                <MudRadio Option="@("Ascending")" Color="Color.Primary" Class="mr-2">오름차순</MudRadio>
                                <MudRadio Option="@("Descending")" Color="Color.Primary">내림차순</MudRadio>
                            </MudRadioGroup>
                        </div>
                    </div>
                </div>
                <MudDivider Class="my-2" />
            }
        </MudContainer>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">취소</MudButton>
        <MudButton Color="Color.Primary" OnClick="Submit">확인</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [Parameter]
    public List<string> AvailableColumns { get; set; } = new List<string>();

    public List<SortItem> SortItems { get; set; } = new List<SortItem>();

    protected override void OnInitialized()
    {
        // Initialize with 5 sort items as shown in the image
        for (int i = 0; i < 5; i++)
        {
            SortItems.Add(new SortItem
            {
                SelectedColumn = AvailableColumns.FirstOrDefault(),
                SortDirection = "Ascending",
                HasSeparator = i == 0 ? false : false // Only first item can have separator
            });
        }
    }

    private void Submit()
    {
        MudDialog.Close(DialogResult.Ok(SortItems));
    }

    private void Cancel() => MudDialog.Cancel();

    public class SortItem
    {
        public string SelectedColumn { get; set; }
        public string SortDirection { get; set; } = "Ascending"; // "Ascending" or "Descending"
        public bool HasSeparator { get; set; } // Only applicable for first item
    }

    // For usage in parent component
    public static async Task<DialogResult> ShowSortDialog(IDialogService DialogService, List<string> columns)
    {
        var parameters = new DialogParameters();
        parameters.Add(nameof(SortDialog.AvailableColumns), columns);

        var options = new DialogOptions 
        { 
            CloseOnEscapeKey = true,
            MaxWidth = MaxWidth.Medium,
            FullWidth = true
        };

        var dialog = await DialogService.ShowAsync<SortDialog>("정렬 설정", parameters, options);
        return await dialog.Result;
    }
}