features/rewrite/modaldialog #15
@ -1,49 +1,33 @@
 | 
			
		||||
@page "/"
 | 
			
		||||
@using Connected.Models;
 | 
			
		||||
@using Connected.Components;
 | 
			
		||||
@using Connected.Models.Modal;
 | 
			
		||||
@using Connected.Services;
 | 
			
		||||
 | 
			
		||||
@inject ModalDialogService modalDialog;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<h1 style="text-align:center;">Component Sandbox</h1>
 | 
			
		||||
 | 
			
		||||
<Grid>
 | 
			
		||||
    @for (int i = 0; i < 5; i++)
 | 
			
		||||
    {
 | 
			
		||||
        int num = i;
 | 
			
		||||
        <GridRow>
 | 
			
		||||
            <GridRowContent>
 | 
			
		||||
                Fixed content @num.ToString()
 | 
			
		||||
            </GridRowContent>
 | 
			
		||||
            <GridRowContent Collapsable=true>
 | 
			
		||||
                Collapsable content @num.ToString()
 | 
			
		||||
            </GridRowContent>
 | 
			
		||||
        </GridRow>
 | 
			
		||||
    }
 | 
			
		||||
</Grid>
 | 
			
		||||
 | 
			
		||||
<p>Izbran datum je: @date</p>
 | 
			
		||||
<Button OnClick="OpenValueDialog">Open dialog</Button>
 | 
			
		||||
 | 
			
		||||
<FormWizard Id="Wizard1">
 | 
			
		||||
    <FormWizardStep Name="Step1">
 | 
			
		||||
        Step1
 | 
			
		||||
    </FormWizardStep>
 | 
			
		||||
    <FormWizardStep Name="Step2">
 | 
			
		||||
        Step2
 | 
			
		||||
    </FormWizardStep>
 | 
			
		||||
    <FormWizardStep Name="Step3">
 | 
			
		||||
        Step3
 | 
			
		||||
    </FormWizardStep>
 | 
			
		||||
    <FormWizardStep Name="Step4">
 | 
			
		||||
        Step4
 | 
			
		||||
    </FormWizardStep>
 | 
			
		||||
</FormWizard>
 | 
			
		||||
<DatePicker 
 | 
			
		||||
CloseOnDateSelect=true
 | 
			
		||||
@bind-SelectedDate=@date>
 | 
			
		||||
 
 | 
			
		||||
</DatePicker>
 | 
			
		||||
<ReturnModal ReturnType="int" @bind-Visible=@ResultDialogShown @bind-Value=@value Title="Dialog1">
 | 
			
		||||
    <NumberInput @bind-Value=@value></NumberInput>
 | 
			
		||||
</ReturnModal>
 | 
			
		||||
 | 
			
		||||
<p>Modal value @value.ToString()</p>
 | 
			
		||||
 | 
			
		||||
<p>Selected date is @date.ToString()</p>
 | 
			
		||||
 | 
			
		||||
@code {
 | 
			
		||||
    DateTime date = DateTime.Today;
 | 
			
		||||
 | 
			
		||||
    int value = 0;
 | 
			
		||||
    bool ResultDialogShown = false;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    private void OpenValueDialog()
 | 
			
		||||
    {
 | 
			
		||||
        ResultDialogShown = !ResultDialogShown;
 | 
			
		||||
        StateHasChanged();
 | 
			
		||||
    }    
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										22
									
								
								src/Connected.Components/Components/ReturnModal.razor
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										22
									
								
								src/Connected.Components/Components/ReturnModal.razor
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,22 @@
 | 
			
		||||
@typeparam ReturnType
 | 
			
		||||
 | 
			
		||||
@using Connected.Models.Modal;
 | 
			
		||||
@if (Visible)
 | 
			
		||||
{
 | 
			
		||||
    <div class="modal fade show" tabindex="-1">
 | 
			
		||||
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
 | 
			
		||||
            <div class="modal-content">
 | 
			
		||||
                <div class="modal-header">
 | 
			
		||||
                        <h3 class="modal-title">@Title</h3>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="modal-body">
 | 
			
		||||
                    @ChildContent
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="modal-footer">
 | 
			
		||||
                    <button type="button" class="btn btn-sm btn-core" @onclick="@(()=>CloseModal())">Zapri</button>
 | 
			
		||||
                    <button type="button" class="btn btn-sm btn-info" @onclick="@(()=>CloseModal(true))">Ok</button>
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										71
									
								
								src/Connected.Components/Components/ReturnModal.razor.cs
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										71
									
								
								src/Connected.Components/Components/ReturnModal.razor.cs
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,71 @@
 | 
			
		||||
using Connected.Models.Modal;
 | 
			
		||||
using Microsoft.AspNetCore.Components;
 | 
			
		||||
using Microsoft.AspNetCore.Components.Web;
 | 
			
		||||
 | 
			
		||||
namespace Connected.Components;
 | 
			
		||||
public partial class ReturnModal<ReturnType>
 | 
			
		||||
{
 | 
			
		||||
	[Parameter]
 | 
			
		||||
	public bool Visible { get; set; } = false;
 | 
			
		||||
 | 
			
		||||
	[Parameter]
 | 
			
		||||
	public EventCallback<bool> VisibleChanged { get; set; }
 | 
			
		||||
 | 
			
		||||
	[Parameter]
 | 
			
		||||
	public string Title { get; set; } = string.Empty;
 | 
			
		||||
 | 
			
		||||
	[Parameter]
 | 
			
		||||
	public RenderFragment? ChildContent { get; set; }
 | 
			
		||||
	protected bool OverlayClickToClose { get; set; } = true;
 | 
			
		||||
 | 
			
		||||
	private ReturnType initialValue { get; set; }
 | 
			
		||||
 | 
			
		||||
	[Parameter]
 | 
			
		||||
	public ReturnType Value { get; set; } = default;
 | 
			
		||||
 | 
			
		||||
	[Parameter]
 | 
			
		||||
	public EventCallback<ReturnType> ValueChanged { get; set; }
 | 
			
		||||
 | 
			
		||||
	protected ModalOptions? ModalOptions { get; set; }
 | 
			
		||||
 | 
			
		||||
	public async Task CloseModal(bool returnResult = false)
 | 
			
		||||
	{
 | 
			
		||||
		Visible = false;
 | 
			
		||||
		VisibleChanged.InvokeAsync(Visible);
 | 
			
		||||
		Title = "";
 | 
			
		||||
		ChildContent = null;
 | 
			
		||||
		StateHasChanged();
 | 
			
		||||
		if (!returnResult)
 | 
			
		||||
			await ValueChanged.InvokeAsync(initialValue);
 | 
			
		||||
		else
 | 
			
		||||
			initialValue = Value;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
	public void CheckEscape(KeyboardEventArgs args)
 | 
			
		||||
	{
 | 
			
		||||
		if (!ModalOptions.DisableEscKey)
 | 
			
		||||
		{
 | 
			
		||||
			var key = args.Key.ToLower();
 | 
			
		||||
			if (key.Equals("escape"))
 | 
			
		||||
			{
 | 
			
		||||
				CloseModal();
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	public void CloseIfEnabled(MouseEventArgs args)
 | 
			
		||||
	{
 | 
			
		||||
		CloseModal();
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	public void PreventClose(MouseEventArgs args)
 | 
			
		||||
	{
 | 
			
		||||
		OverlayClickToClose = false;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	protected override async Task OnInitializedAsync()
 | 
			
		||||
	{
 | 
			
		||||
			initialValue = Value;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
@ -5,6 +5,4 @@ public class ModalOptions
 | 
			
		||||
	public bool DisableBackdropClick { get; set; } = false;
 | 
			
		||||
	public bool NoHeader { get; set; } = false;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										5
									
								
								src/Connected.Components/Models/Modal/ModalResult.cs
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										5
									
								
								src/Connected.Components/Models/Modal/ModalResult.cs
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,5 @@
 | 
			
		||||
namespace Connected.Models.Modal;
 | 
			
		||||
internal class ModalResult
 | 
			
		||||
{
 | 
			
		||||
	public object Result { get; set; }
 | 
			
		||||
}
 | 
			
		||||
@ -1,5 +1,4 @@
 | 
			
		||||
using Connected.Components;
 | 
			
		||||
using Connected.Models.Modal;
 | 
			
		||||
using Connected.Models.Modal;
 | 
			
		||||
using Microsoft.AspNetCore.Components;
 | 
			
		||||
 | 
			
		||||
namespace Connected.Services;
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user