Skip to content

Commit

Permalink
refactor: restyle the import/export page
Browse files Browse the repository at this point in the history
  • Loading branch information
@tnc1997
tnc1997 committed Sep 30, 2024
1 parent c6e1861 commit 7551e0d
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 78 deletions.
2 changes: 1 addition & 1 deletion src/AzureAppConfigurationEmulator/Components/AzureInputSelect.razor
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@typeparam TValue
@using System.Linq.Expressions

<InputSelect @attributes="@AdditionalAttributes" class="px-1 pt-0 pb-0.5 w-full bg-white rounded-sm border cursor-pointer disabled:cursor-default border-storm-dust [&:not(multiple)]:h-[24px] invalid:border-alizarin-crimson dark:bg-cod-grey dark:border-star-dust dark:disabled:bg-shark dark:disabled:border-natural-grey dark:disabled:text-natural-grey disabled:bg-concrete disabled:border-star-dust disabled:text-star-dust" Value="@Value" ValueChanged="@ValueChanged" ValueExpression="@ValueExpression">
<InputSelect @attributes="@AdditionalAttributes" class="px-1 pt-0 pb-0.5 w-full bg-white rounded-sm border cursor-pointer disabled:cursor-default border-storm-dust h-[24px] invalid:border-alizarin-crimson dark:bg-cod-grey dark:border-star-dust dark:disabled:bg-shark dark:disabled:border-natural-grey dark:disabled:text-natural-grey disabled:bg-concrete disabled:border-star-dust disabled:text-star-dust" Value="@Value" ValueChanged="@ValueChanged" ValueExpression="@ValueExpression">
@ChildContent
</InputSelect>

Expand Down
8 changes: 4 additions & 4 deletions ...nts/ImportExportFileTypeInputSelect.razor → ...s/ImportExportFileFormatInputSelect.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

<AzureInputSelect AdditionalAttributes="@AdditionalAttributes" TValue="@string" Value="@Value" ValueChanged="@HandleValueChanged" ValueExpression="@ValueExpression">
<option checked="@(Value is null)" hidden value="">Please select a file type</option>
<option checked="@(Value is FileType.Json)" value="@FileType.Json">Json</option>
<option checked="@(Value is FileType.Yaml)" disabled value="@FileType.Yaml">Yaml</option>
<option checked="@(Value is FileType.Properties)" disabled value="@FileType.Properties">Properties</option>
<option checked="@(Value is FileFormat.Json)" value="@FileFormat.Json">Json</option>
<option checked="@(Value is FileFormat.Yaml)" disabled value="@FileFormat.Yaml">Yaml</option>
<option checked="@(Value is FileFormat.Properties)" disabled value="@FileFormat.Properties">Properties</option>
</AzureInputSelect>

@code {
Expand All @@ -21,7 +21,7 @@
await ValueChanged.InvokeAsync(!string.IsNullOrEmpty(value) ? value : null);
}

public static class FileType
public static class FileFormat
{
public const string Json = ".json";

Expand Down
8 changes: 4 additions & 4 deletions ...mportExportSourceServiceInputSelect.razor → ...s/ImportExportSourceTypeInputSelect.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

<AzureInputSelect AdditionalAttributes="@AdditionalAttributes" TValue="@string" Value="@Value" ValueChanged="@HandleValueChanged" ValueExpression="@ValueExpression">
<option checked="@(Value is null)" hidden value="">Please select a source service</option>
<option checked="@(Value is SourceService.AzureAppConfiguration)" value="@SourceService.AzureAppConfiguration">App Configuration</option>
<option checked="@(Value is SourceService.AzureAppService)" disabled value="@SourceService.AzureAppService">App Service</option>
<option checked="@(Value is SourceService.ConfigurationFile)" value="@SourceService.ConfigurationFile">Configuration file</option>
<option checked="@(Value is SourceType.AzureAppConfiguration)" value="@SourceType.AzureAppConfiguration">App Configuration</option>
<option checked="@(Value is SourceType.AzureAppService)" disabled value="@SourceType.AzureAppService">App Service</option>
<option checked="@(Value is SourceType.ConfigurationFile)" value="@SourceType.ConfigurationFile">Configuration file</option>
</AzureInputSelect>

@code {
Expand All @@ -21,7 +21,7 @@
await ValueChanged.InvokeAsync(!string.IsNullOrEmpty(value) ? value : null);
}

public static class SourceService
public static class SourceType
{
public const string AzureAppConfiguration = nameof(AzureAppConfiguration);

Expand Down
182 changes: 114 additions & 68 deletions src/AzureAppConfigurationEmulator/Components/Pages/ImportExport.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,88 +17,134 @@
</AzureToolbar>

<div class="p-5">
<EditForm class="flex flex-col gap-4 items-stretch pb-4" Model="@Model" OnSubmit="@HandleSubmit">
<ImportExportOperationInputRadioGroup @bind-Value="@Model!.Operation" name="@nameof(Model.Operation)"/>

@switch (Model.Operation)
<EditForm class="flex flex-col gap-10" Model="@Model" OnSubmit="@HandleSubmit">
@switch (Model?.Operation)
{
case ImportExportOperationInputRadioGroup.Operation.Import:
<label class="flex flex-col gap-1">
<div>Source service</div>
<ImportExportSourceServiceInputSelect @bind-Value="@Model.SourceService" name="@nameof(Model.SourceService)"/>
</label>

switch (Model.SourceService)
<div class="flex flex-col gap-3">
<ImportExportOperationInputRadioGroup @bind-Value="@Model.Operation" name="@nameof(Model.Operation)"/>

<label class="flex flex-row items-center">
<div class="w-[200px]">Source type</div>
<div class="flex-1 max-w-[600px]">
<ImportExportSourceTypeInputSelect @bind-Value="@Model.SourceType" name="@nameof(Model.SourceType)"/>
</div>
</label>
</div>

switch (Model.SourceType)
{
case ImportExportSourceServiceInputSelect.SourceService.AzureAppConfiguration:
<label class="flex flex-col gap-1">
<div>Source connection string</div>
<AzureInputText name="@nameof(Model.SourceConnectionString)" Value="@Model.SourceConnectionString" ValueChanged="@HandleSourceConnectionStringChange" ValueExpression="@(() => Model.SourceConnectionString)"/>
</label>
case ImportExportSourceTypeInputSelect.SourceType.AzureAppConfiguration:
<div class="flex flex-col gap-3">
<div class="font-bold text-lg">Select source</div>

<label class="flex flex-row items-center">
<div class="w-[200px]">Connection string</div>
<div class="flex-1 max-w-[600px]">
<AzureInputText name="@nameof(Model.SourceConnectionString)" Value="@Model.SourceConnectionString" ValueChanged="@HandleSourceConnectionStringChange" ValueExpression="@(() => Model.SourceConnectionString)"/>
</div>
</label>
</div>

if (!string.IsNullOrEmpty(Model.SourceConnectionString) && Labels is { Count: > 0 })
{
<label class="flex flex-col gap-1">
<div>Key filter</div>
<AzureInputText @bind-Value="@Model.KeyFilter" name="@nameof(Model.KeyFilter)" placeholder="abc | abc,xyz,..."/>
</label>

<label class="flex flex-col gap-1">
<div>Prefix</div>
<AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
</label>
<div class="flex flex-col gap-3">
<div class="font-bold text-lg">Select key-values</div>

<label class="flex flex-row items-center">
<div class="w-[200px]">Key filter</div>
<div class="flex-1 max-w-[600px]">
<AzureInputText @bind-Value="@Model.KeyFilter" name="@nameof(Model.KeyFilter)" placeholder="abc | abc,xyz,..."/>
</div>
</label>

<label class="flex flex-row items-center">
<div class="w-[200px]">At a specific time</div>
<div class="flex-1 max-w-[600px]">
<AzureInputDate @bind-Value="@Model.Moment" name="@nameof(Model.Moment)" Type="@InputDateType.DateTimeLocal"/>
</div>
</label>

<label class="flex flex-row items-center">
<div class="w-[200px]">From label</div>
<div class="flex-1 max-w-[600px]">
<ImportExportLabelFilterInputSelect @bind-Value="@Model.LabelFilter" Labels="@Labels" name="@nameof(Model.LabelFilter)"/>
</div>
</label>
</div>

<label class="flex flex-col gap-1">
<div>At a specific time</div>
<AzureInputDate @bind-Value="@Model.Moment" name="@nameof(Model.Moment)" Type="@InputDateType.DateTimeLocal"/>
</label>
<div class="flex flex-col gap-3">
<div class="font-bold text-lg">Apply changes to key-values</div>

<label class="flex flex-col gap-1">
<div>From label</div>
<ImportExportLabelFilterInputSelect @bind-Value="@Model.LabelFilter" Labels="@Labels" name="@nameof(Model.LabelFilter)"/>
</label>
<label class="flex flex-row items-center">
<div class="w-[200px]">Add prefix</div>
<div class="flex-1 max-w-[600px]">
<AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
</div>
</label>
</div>

<div>
<AzureButton Appearance="AzureButton.AzureAppearance.Primary" type="submit">@(Model.Operation switch { ImportExportOperationInputRadioGroup.Operation.Export => "Export", ImportExportOperationInputRadioGroup.Operation.Import => "Import", _ => throw new ArgumentOutOfRangeException() })</AzureButton>
</div>
}

break;
case ImportExportSourceServiceInputSelect.SourceService.ConfigurationFile:
<label class="flex flex-col gap-1">
<div>File type</div>
<ImportExportFileTypeInputSelect @bind-Value="@Model.FileType" name="@nameof(Model.FileType)"/>
</label>

if (Model.FileType is not null)
{
<label class="flex flex-col gap-1">
<div>Source file</div>
<AzureInputFile accept="@Model.FileType" name="@nameof(Model.SourceFile)" OnChange="args => Model.SourceFile = args.File"/>
case ImportExportSourceTypeInputSelect.SourceType.ConfigurationFile:
<div class="flex flex-col gap-3">
<div class="font-bold text-lg">Select source</div>

<label class="flex flex-row items-center">
<div class="w-[200px]">File format</div>
<div class="flex-1 max-w-[600px]">
<ImportExportFileFormatInputSelect @bind-Value="@Model.FileFormat" name="@nameof(Model.FileFormat)"/>
</div>
</label>
}

@if (Model.FileFormat is not null)
{
<label class="flex flex-row items-center">
<div class="w-[200px]">Source file</div>
<div class="flex-1 max-w-[600px]">
<AzureInputFile accept="@Model.FileFormat" name="@nameof(Model.SourceFile)" OnChange="args => Model.SourceFile = args.File"/>
</div>
</label>
}
</div>

if (Model.SourceFile is not null)
{
<label class="flex flex-col gap-1">
<div>Separator</div>
<ImportExportSeparatorInputSelect @bind-Value="@Model.Separator" name="@nameof(Model.Separator)"/>
</label>

<label class="flex flex-col gap-1">
<div>Prefix</div>
<AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
</label>

<label class="flex flex-col gap-1">
<div>Label</div>
<AzureInputText @bind-Value="@Model.Label" name="@nameof(Model.Label)"/>
</label>

<label class="flex flex-col gap-1">
<div>Content type</div>
<ImportExportContentTypeInputSelect @bind-Value="@Model.ContentType" name="@nameof(Model.ContentType)"/>
</label>
<div class="flex flex-col gap-3">
<div class="font-bold text-lg">Apply changes to key-values</div>

<label class="flex flex-row items-center">
<div class="w-[200px]">Separator</div>
<div class="flex-1 max-w-[600px]">
<ImportExportSeparatorInputSelect @bind-Value="@Model.Separator" name="@nameof(Model.Separator)"/>
</div>
</label>

<label class="flex flex-row items-center">
<div class="w-[200px]">Add prefix</div>
<div class="flex-1 max-w-[600px]">
<AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
</div>
</label>

<label class="flex flex-row items-center">
<div class="w-[200px]">Add label</div>
<div class="flex-1 max-w-[600px]">
<AzureInputText @bind-Value="@Model.Label" name="@nameof(Model.Label)"/>
</div>
</label>

<label class="flex flex-row items-center">
<div class="w-[200px]">Add content type</div>
<div class="flex-1 max-w-[600px]">
<ImportExportContentTypeInputSelect @bind-Value="@Model.ContentType" name="@nameof(Model.ContentType)"/>
</div>
</label>
</div>

<div>
<AzureButton Appearance="AzureButton.AzureAppearance.Primary" type="submit">@(Model.Operation switch { ImportExportOperationInputRadioGroup.Operation.Export => "Export", ImportExportOperationInputRadioGroup.Operation.Import => "Import", _ => throw new ArgumentOutOfRangeException() })</AzureButton>
Expand Down Expand Up @@ -236,9 +282,9 @@
{
case ImportExportOperationInputRadioGroup.Operation.Import:
{
switch (Model?.SourceService)
switch (Model?.SourceType)
{
case ImportExportSourceServiceInputSelect.SourceService.AzureAppConfiguration:
case ImportExportSourceTypeInputSelect.SourceType.AzureAppConfiguration:
{
var dictionary = Model.SourceConnectionString!.Split(';').Select(s => s.Split('=', 2)).ToDictionary(s => s[0], s => s[1]);
var endpoint = dictionary["Endpoint"];
Expand Down Expand Up @@ -282,7 +328,7 @@

break;
}
case ImportExportSourceServiceInputSelect.SourceService.ConfigurationFile:
case ImportExportSourceTypeInputSelect.SourceType.ConfigurationFile:
{
await using var stream = Model.SourceFile!.OpenReadStream();

Expand Down Expand Up @@ -324,7 +370,7 @@
{
public string? ContentType { get; set; }

public string? FileType { get; set; }
public string? FileFormat { get; set; }

public string? KeyFilter { get; set; }

Expand All @@ -344,7 +390,7 @@

public IBrowserFile? SourceFile { get; set; }

public string? SourceService { get; set; }
public string? SourceType { get; set; }
}

}
Loading

0 comments on commit 7551e0d

Please sign in to comment.