diff --git a/PanoramicData.Blazor.Demo/Data/DatabaseQueryModel.cs b/PanoramicData.Blazor.Demo/Data/DatabaseQueryModel.cs new file mode 100644 index 00000000..9548cac2 --- /dev/null +++ b/PanoramicData.Blazor.Demo/Data/DatabaseQueryModel.cs @@ -0,0 +1,18 @@ +namespace PanoramicData.Blazor.Demo.Data; + +public class DatabaseQueryModel +{ + [Display(Name = "Email Address")] + public string EmailAddress { get; set; } = string.Empty; + + [Display(Name = "Frequency Period")] + public TimePeriods FrequencyPeriod { get; set; } = TimePeriods.Week; + + [Display(Name = "Frequency Unit")] + [Range(1, 99)] + public ushort FrequencyUnit { get; set; } = 1; + + [Display(Name = "SQL Query")] + [MaxLength(10000)] + public string SqlQuery { get; set; } = string.Empty; +} diff --git a/PanoramicData.Blazor.Demo/Pages/PDFormPage5.razor b/PanoramicData.Blazor.Demo/Pages/PDFormPage5.razor new file mode 100644 index 00000000..ce8fc4d7 --- /dev/null +++ b/PanoramicData.Blazor.Demo/Pages/PDFormPage5.razor @@ -0,0 +1,63 @@ +@page "/pdform5" +@using PanoramicData.Blazor.Demo.Data + +

PDForm

+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/PanoramicData.Blazor.Demo/Pages/PDFormPage5.razor.cs b/PanoramicData.Blazor.Demo/Pages/PDFormPage5.razor.cs new file mode 100644 index 00000000..19d07de1 --- /dev/null +++ b/PanoramicData.Blazor.Demo/Pages/PDFormPage5.razor.cs @@ -0,0 +1,61 @@ +using BlazorMonaco.Editor; +using System.Diagnostics.CodeAnalysis; + +namespace PanoramicData.Blazor.Demo.Pages; + +public partial class PDFormPage5 +{ + private readonly DelegatedDataProvider _dataProvider = new() + { + UpdateAsync = (model, delta, cancellationToken) => + { + return Task.FromResult(new OperationResponse { Success = true }); + + } + }; + + private readonly DatabaseQueryModel _model = new DatabaseQueryModel + { + SqlQuery = "SELECT * \r\n FROM [Customers]\r\n WHERE [Type] = 123" + }; + + [AllowNull] + private PDForm _queryForm; + private FieldStringOptions QueryEditorOptions + { + get + { + return new FieldStringOptions + { + CssClass = "h-300", + Editor = FieldStringOptions.Editors.Monaco, + MonacoOptions = (_) => new StandaloneEditorConstructionOptions + { + AutomaticLayout = true, + Language = "sql" + } + }; + } + } + + public PDFormPage5() + { + } + + private async Task OnBeginEditAsync() + { + await _queryForm.EditItemAsync(_model, FormModes.Edit); + } + + + private async Task OnFooterClick(string key) + { + if (_queryForm != null) + { + if (key == "Save") + { + } + await _queryForm.EditItemAsync(null, FormModes.ReadOnly).ConfigureAwait(true); + } + } +} diff --git a/PanoramicData.Blazor.Demo/Pages/PDFormPage5.razor.css b/PanoramicData.Blazor.Demo/Pages/PDFormPage5.razor.css new file mode 100644 index 00000000..e69de29b diff --git a/PanoramicData.Blazor.Demo/PanoramicData.Blazor.Demo.csproj b/PanoramicData.Blazor.Demo/PanoramicData.Blazor.Demo.csproj index 6d0590f8..7620ab62 100644 --- a/PanoramicData.Blazor.Demo/PanoramicData.Blazor.Demo.csproj +++ b/PanoramicData.Blazor.Demo/PanoramicData.Blazor.Demo.csproj @@ -30,7 +30,7 @@ - + diff --git a/PanoramicData.Blazor.Demo/Shared/DemoSourceView.razor b/PanoramicData.Blazor.Demo/Shared/DemoSourceView.razor index fd5c4f60..0e750df0 100644 --- a/PanoramicData.Blazor.Demo/Shared/DemoSourceView.razor +++ b/PanoramicData.Blazor.Demo/Shared/DemoSourceView.razor @@ -1,14 +1,4 @@ - - } diff --git a/PanoramicData.Blazor.Demo/Shared/NavMenu.razor b/PanoramicData.Blazor.Demo/Shared/NavMenu.razor index b42eb35e..ba4d9d17 100644 --- a/PanoramicData.Blazor.Demo/Shared/NavMenu.razor +++ b/PanoramicData.Blazor.Demo/Shared/NavMenu.razor @@ -78,6 +78,11 @@ PDForm 4 +
  • + + PDForm 5 + +
  • PDGlobalListener diff --git a/PanoramicData.Blazor/GlobalUsings.cs b/PanoramicData.Blazor/GlobalUsings.cs index 6171a900..1d5ea40c 100644 --- a/PanoramicData.Blazor/GlobalUsings.cs +++ b/PanoramicData.Blazor/GlobalUsings.cs @@ -1,4 +1,5 @@ -global using Microsoft.AspNetCore.Components; +global using BlazorMonaco.Editor; +global using Microsoft.AspNetCore.Components; global using Microsoft.AspNetCore.Components.Routing; global using Microsoft.AspNetCore.Components.Web; global using Microsoft.AspNetCore.WebUtilities; @@ -25,7 +26,6 @@ global using System.Linq.Dynamic.Core; global using System.Linq.Expressions; global using System.Reflection; -global using System.Runtime.Serialization; global using System.Text; global using System.Text.RegularExpressions; global using System.Threading; diff --git a/PanoramicData.Blazor/Models/FieldDisplayOptions.cs b/PanoramicData.Blazor/Models/FieldDisplayOptions.cs index 0f488194..150cb222 100644 --- a/PanoramicData.Blazor/Models/FieldDisplayOptions.cs +++ b/PanoramicData.Blazor/Models/FieldDisplayOptions.cs @@ -36,3 +36,29 @@ public record FieldDateTimeOptions : FieldDisplayOptions public int TimeStepSecs { get; init; } = 1; } + +public record FieldStringOptions : FieldDisplayOptions +{ + public enum Editors + { + TextBox, + TextArea, + Monaco + } + + public FieldStringOptions() + { + CssClass = "h-100"; + } + + public string CodeLanguage { get; init; } = string.Empty; + + public Editors Editor { get; init; } + + public bool Resize { get; init; } + + public int Rows { get; init; } = 4; + + public Func MonacoOptions { get; init; } = (_) + => new StandaloneEditorConstructionOptions { ReadOnly = true }; +} \ No newline at end of file diff --git a/PanoramicData.Blazor/PDFormFieldEditor.razor b/PanoramicData.Blazor/PDFormFieldEditor.razor index 49557af7..553df544 100644 --- a/PanoramicData.Blazor/PDFormFieldEditor.razor +++ b/PanoramicData.Blazor/PDFormFieldEditor.razor @@ -3,19 +3,15 @@ @{ var fieldType = Field.GetFieldType(); } -
    +
    @if(Field.GetFieldIsNullable() && Field.DisplayOptions?.AllowNulls == true) { -@* *@ } - @if (Field.EditTemplate != null) { @Field.EditTemplate(Form?.Item) @@ -129,15 +125,53 @@ } else if (fieldType?.FullName == "System.String") { - + if(Field.DisplayOptions is FieldStringOptions fso && fso.Editor != FieldStringOptions.Editors.TextBox) + { + if(fso.Editor == FieldStringOptions.Editors.TextArea) + { + + } + else if(fso.Editor == FieldStringOptions.Editors.Monaco) + { + @* to toggle read-only we need to destroy and re-create entire editor *@ + @if(Form?.Mode == FormModes.ReadOnly) + { + + } + else + { + + } + } + } + else + { + + } } else if (fieldType?.FullName == "System.Guid") { diff --git a/PanoramicData.Blazor/PDFormFieldEditor.razor.cs b/PanoramicData.Blazor/PDFormFieldEditor.razor.cs index 9668ab94..4b06c5cc 100644 --- a/PanoramicData.Blazor/PDFormFieldEditor.razor.cs +++ b/PanoramicData.Blazor/PDFormFieldEditor.razor.cs @@ -3,6 +3,7 @@ public partial class PDFormFieldEditor where TItem : class { private bool _hasValue = true; + private StandaloneCodeEditor? _monacoEditor; [Parameter] public int DebounceWait { get; set; } @@ -58,6 +59,13 @@ private OptionInfo[] GetEnumValues(FormField field) return options.ToArray(); } + private static StandaloneEditorConstructionOptions GetMonacoOptionsReadOnly(FieldStringOptions fso, StandaloneCodeEditor editor) + { + var opt = fso.MonacoOptions(editor); + opt.ReadOnly = true; + return opt; + } + private static Dictionary GetNumericAttributes(FormField field) { var dict = new Dictionary(); @@ -119,6 +127,26 @@ private async Task OnHasNullValueChanged(bool hasValue) } } + private async Task OnMonacoEditorBlurAsync() + { + if (_monacoEditor != null && Form != null && Field != null) + { + var model = await _monacoEditor.GetModel(); + var value = await model.GetValue(EndOfLinePreference.CRLF, true); + await Form.SetFieldValueAsync(Field, value); + } + } + + private async Task OnMonacoInitAsync() + { + if (_monacoEditor != null && Form != null) + { + var model = await _monacoEditor.GetModel(); + var value = Form.GetFieldStringValue(Field); + await model.SetValue(value); + } + } + public async Task OnSelectInputChanged(ChangeEventArgs args, FormField field) { if (Form != null && args.Value != null) @@ -190,5 +218,4 @@ private async Task UpdateValueViaCastAsync(ChangeEventArgs args, FormField diff --git a/PanoramicData.Blazor/PDFormFooter.razor.cs b/PanoramicData.Blazor/PDFormFooter.razor.cs index 9aacc53e..13061c2c 100644 --- a/PanoramicData.Blazor/PDFormFooter.razor.cs +++ b/PanoramicData.Blazor/PDFormFooter.razor.cs @@ -36,6 +36,11 @@ public partial class PDFormFooter : IDisposable where TItem : class /// [Parameter] public bool ShowCancel { get; set; } = true; + /// + /// Should the Cancel button be shown when in Read-Only mode? + /// + [Parameter] public bool ShowCancelWhenReadOnly { get; set; } = true; + /// /// Should the Delete button be shown (only applicable when in Edit mode)? /// diff --git a/PanoramicData.Blazor/PanoramicData.Blazor.csproj b/PanoramicData.Blazor/PanoramicData.Blazor.csproj index 5aec9d87..52a9269f 100644 --- a/PanoramicData.Blazor/PanoramicData.Blazor.csproj +++ b/PanoramicData.Blazor/PanoramicData.Blazor.csproj @@ -25,7 +25,7 @@ snupkg README.md - PDTimeline - Fixed issues with PDTimeline when resizing browser window. + PDForm - Added Monaco editor support for string fields. @@ -35,6 +35,7 @@ + diff --git a/PanoramicData.Blazor/_Imports.razor b/PanoramicData.Blazor/_Imports.razor index 67b33358..7c3e66f6 100644 --- a/PanoramicData.Blazor/_Imports.razor +++ b/PanoramicData.Blazor/_Imports.razor @@ -1,3 +1,6 @@ @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Forms -@using PanoramicData.Blazor.Models \ No newline at end of file +@using PanoramicData.Blazor.Models +@using BlazorMonaco +@using BlazorMonaco.Editor +@using BlazorMonaco.Languages \ No newline at end of file diff --git a/PanoramicData.Blazor/wwwroot/css/main.css b/PanoramicData.Blazor/wwwroot/css/main.css index f8cc0017..299ab695 100644 --- a/PanoramicData.Blazor/wwwroot/css/main.css +++ b/PanoramicData.Blazor/wwwroot/css/main.css @@ -19,6 +19,26 @@ width: 16px; } +.h-100 { + height: 100px !important; +} + +.h-200 { + height: 200px !important; +} + +.h-300 { + height: 300px !important; +} + +.h-400 { + height: 400px !important; +} + +.h-500 { + height: 500px !important; +} + .h-100-pct { height: 100%; } diff --git a/PanoramicData.Blazor/wwwroot/css/main.min.css b/PanoramicData.Blazor/wwwroot/css/main.min.css index f32a060f..7e5c376a 100644 --- a/PanoramicData.Blazor/wwwroot/css/main.min.css +++ b/PanoramicData.Blazor/wwwroot/css/main.min.css @@ -1 +1 @@ -.cursor-pointer{cursor:pointer;}.fa-hidden{color:transparent;}.pd-pointer{cursor:pointer;}.pd-hidden{display:none;}.pd-empty-icon{height:16px;width:16px;}.h-100-pct{height:100%;}.w-100-pct{width:100%;}.w-100-px{width:100px;}.w-125-px{width:125px;}.w-150-px{width:150px;}.w-200-px{width:200px;}.mw-100-px{min-width:100px;}.mw-125-px{min-width:125px;}.mw-150-px{min-width:150px;}.mw-200-px{min-width:200px;}.text-small{font-size:.75rem;}.text-tiny{font-size:.5rem;}.z-1000{z-index:1000;}.z-1100{z-index:1100;}.z-1200{z-index:1200;} \ No newline at end of file +.cursor-pointer{cursor:pointer;}.fa-hidden{color:transparent;}.pd-pointer{cursor:pointer;}.pd-hidden{display:none;}.pd-empty-icon{height:16px;width:16px;}.h-100{height:100px!important;}.h-200{height:200px!important;}.h-300{height:300px!important;}.h-400{height:400px!important;}.h-500{height:500px!important;}.h-100-pct{height:100%;}.w-100-pct{width:100%;}.w-100-px{width:100px;}.w-125-px{width:125px;}.w-150-px{width:150px;}.w-200-px{width:200px;}.mw-100-px{min-width:100px;}.mw-125-px{min-width:125px;}.mw-150-px{min-width:150px;}.mw-200-px{min-width:200px;}.text-small{font-size:.75rem;}.text-tiny{font-size:.5rem;}.z-1000{z-index:1000;}.z-1100{z-index:1100;}.z-1200{z-index:1200;} \ No newline at end of file diff --git a/PanoramicData.Blazor/wwwroot/css/main.scss b/PanoramicData.Blazor/wwwroot/css/main.scss index d7840e3e..a5fcd95b 100644 --- a/PanoramicData.Blazor/wwwroot/css/main.scss +++ b/PanoramicData.Blazor/wwwroot/css/main.scss @@ -19,6 +19,26 @@ width: 16px; } +.h-100 { + height: 100px !important; +} + +.h-200 { + height: 200px !important; +} + +.h-300 { + height: 300px !important; +} + +.h-400 { + height: 400px !important; +} + +.h-500 { + height: 500px !important; +} + .h-100-pct { height: 100%; }