I have 3 Blazor Components : 1 that has just a button for the markup but it opens up a Microsoft FLuent UI dialogue which takes a component (ChecklistItemDialogue) as a parameter, inside if checklistItemDialogue there are 2 components (ChecklistItemPanel and Newchecklistitem). All I am trying to do is simply close the model once the SubmitItems method is invoked inside of ChecklistItempanel. i want the model to close when this fires off. In addition , i would like to find a way to access the selectedItemTemplates and pass them up a couple of layers to update the UI once the request is successful
I havent been able to find a solution to do this correctly based on the documentation on the FLuent Ui Blazor website here is the code to the components :
OpenChecklistItemPanel :
@using SFSCheckList.Data.Repos@using SFSCheckList.Data.Models<FluentButton @onclick="() => LogDetails(Checklist)" Appearance="Appearance.Accent"> Add checklist item </FluentButton>@code { [Parameter] public EventCallback SubmitItems { get; set; } [Parameter] public Checklist? Checklist { get; set; } [Inject] private IDialogService DialogService { get; set; } private IDialogReference _dialog; public string width { get; set; } = "*"; private async void LogDetails(Checklist checklist) { Console.WriteLine("Details on the panel button !!!!"); Console.WriteLine($"Checklist ID: {checklist.PK_ChecklistID}"); Console.WriteLine($"Checklist Name: {checklist.ChecklistName}"); Console.WriteLine($"Checklist Description: {checklist.ChecklistDescription}"); Console.WriteLine($"Start Date: {checklist.AvailableStartDate}"); Console.WriteLine($"End Date: {checklist.AvailableEndDate}"); Console.WriteLine($"FY: {checklist.FY}"); Console.WriteLine($"Created: {checklist.LCTS}"); await OpenPanelAsync(); } private async Task OpenPanelAsync() { Console.WriteLine(Checklist.PK_ChecklistID.ToString()); _dialog = await DialogService.ShowPanelAsync < ChecklistItemDialogue> (Checklist.PK_ChecklistID.ToString(), new DialogParameters<string> { Alignment = HorizontalAlignment.Right, Title = "Simple Form", ShowDismiss = true, Width = width, }); DialogResult result = await _dialog.Result; HandlePanel(result); } private async Task HandlePanel(DialogResult result) { if (result.Cancelled) { Console.WriteLine("Panel cancelled" ); } else { var selectedTemplates = result.Data as List<ChecklistItemTemplate>; if (selectedTemplates != null) { Console.WriteLine("Items submitted:"); foreach (var template in selectedTemplates) { await Task.Run(() => Console.WriteLine($"- {template.ItemName}: {template.ItemDesc} the itemsmsss")); } // Handle the selected templates as needed } } } private void HandleWidthChanged(string newWidth) { width = newWidth; Console.WriteLine("clicked onnnnn"); } public EventCallback OnItemAdded { get; set; }}ChecklistItemDialogue :
@implements IDialogContentComponent<string><div><FluentStack Orientation="Orientation.Horizontal"><ChecklistItemPanel ChecklistId="@Content" /> @if (isPanelOpen) {<NewCheckListItem ChecklistId="@Content"/> }</FluentStack><FluentButton OnClick="@(() => isPanelOpen = !isPanelOpen)">Open new panel </FluentButton></div>@code { [Parameter] public EventCallback SubmitItemTemplate { get; set; } [Parameter] public string Content { get; set; } private bool isPanelOpen = false; protected override async Task OnParametersSetAsync() { // Logging to verify the content Console.WriteLine($"Content: {Content}"); }}ChecklistItemPanel :
@using SFSCheckList.Data.Repos@using SFSCheckList.Data.Models <FluentStack Orientation="Orientation.Vertical"><h3>Add Checklist Item</h3><SelectecChecklistItemTemplates SelectedItemTemplates="SelectedItemTemplates" />@foreach (var template in ChecklistItemTemplates){<FluentCard Width="20rem" ><FluentLabel>@template.ItemName</FluentLabel><FluentLabel>@template.ItemDesc</FluentLabel><FluentButton @onclick="@(() => AddChecklistItem(template))">+</FluentButton></FluentCard>}<FluentDatePicker Value="startDate" ValueChanged="@(e => startDate = e.Value)" Placeholder="Select Start Date" /><FluentDatePicker Value="endDate" ValueChanged="@(e => endDate = e.Value)" Placeholder="Select End Date" /><FluentButton @onclick="SubmitItems">Submit</FluentButton></FluentStack>@* <FluentButton @onclick="@OpenPanelAsync" Appearance="Appearance.Accent"> Open panel (>>)</FluentButton> *@<style> .checklist-item { border: 1px solid #ccc; padding: 10px; margin: 10px; width: 20rem; cursor: pointer; border-radius: 5px; list-style-type: none; background-color: white; } .checklist-item:hover { background-color: lightgrey; }</style>@code { [Inject] private IDialogService DialogService { get; set; } private CheckListItemList itemList = null; public class ChecklistItemDialogParameters { public string ChecklistId { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public IDialogReference Dialog { get; set; } } [Parameter] public ChecklistItemDialogParameters Parameters { get; set; } [Parameter] public string ChecklistId { get; set; } public List<SFSCheckList.Data.Models.ChecklistItemTemplate>? SelectedItemTemplates { get; set; } = null; [Parameter] public string Width { get; set; } = "20vw"; [Parameter] public EventCallback<ChecklistItemTemplate> TemplateSelected { get; set; } [Inject] protected ChecklistRepo? checklistRepo { get; set; } private IDialogReference _dialog; public string width { get; set; } = "20vw"; public string height { get; set; } = "100vh"; private DateTime startDate { get; set; } = new DateTime(2024, 6, 1); private DateTime endDate { get; set; } = new DateTime(2024, 6, 30); List<SFSCheckList.Data.Models.ChecklistItemTemplate> ChecklistItemTemplates = new List<SFSCheckList.Data.Models.ChecklistItemTemplate>(); private async Task getTemplates() { ChecklistItemTemplates = await checklistRepo.GetItemTemplates(); foreach (var template in ChecklistItemTemplates) { Console.WriteLine(template.ItemName); } } private async Task SubmitItems() { if (SelectedItemTemplates == null || !SelectedItemTemplates.Any()) { Console.WriteLine("No templates selected."); return; } foreach (var template in SelectedItemTemplates) { await checklistRepo.CreateItemFromTemplate(template, Guid.Parse(ChecklistId), startDate, endDate); } } private async Task AddChecklistItem(ChecklistItemTemplate template) { await TemplateSelected.InvokeAsync(template); SelectedItemTemplates.Add(template); Console.WriteLine("template" + template.ItemName); } protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); await getTemplates(); SelectedItemTemplates = new List<SFSCheckList.Data.Models.ChecklistItemTemplate>(); // Initialize here }}