Skip to content

Commit 59a17ad

Browse files
tnc1997tnc1997
authored
refactor: restyle the import/export page (#92)
1 parent c6e1861 commit 59a17ad

File tree

5 files changed

+124
-78
lines changed

5 files changed

+124
-78
lines changed

‎src/AzureAppConfigurationEmulator/Components/AzureInputSelect.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@typeparam TValue
22
@using System.Linq.Expressions
33

4-
<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">
4+
<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">
55
@ChildContent
66
</InputSelect>
77

‎src/AzureAppConfigurationEmulator/Components/ImportExportFileTypeInputSelect.razor‎ renamed to ‎src/AzureAppConfigurationEmulator/Components/ImportExportFileFormatInputSelect.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
<AzureInputSelect AdditionalAttributes="@AdditionalAttributes" TValue="@string" Value="@Value" ValueChanged="@HandleValueChanged" ValueExpression="@ValueExpression">
44
<option checked="@(Value is null)" hidden value="">Please select a file type</option>
5-
<option checked="@(Value is FileType.Json)" value="@FileType.Json">Json</option>
6-
<option checked="@(Value is FileType.Yaml)" disabled value="@FileType.Yaml">Yaml</option>
7-
<option checked="@(Value is FileType.Properties)" disabled value="@FileType.Properties">Properties</option>
5+
<option checked="@(Value is FileFormat.Json)" value="@FileFormat.Json">Json</option>
6+
<option checked="@(Value is FileFormat.Yaml)" disabled value="@FileFormat.Yaml">Yaml</option>
7+
<option checked="@(Value is FileFormat.Properties)" disabled value="@FileFormat.Properties">Properties</option>
88
</AzureInputSelect>
99

1010
@code {
@@ -21,7 +21,7 @@
2121
await ValueChanged.InvokeAsync(!string.IsNullOrEmpty(value) ? value : null);
2222
}
2323

24-
public static class FileType
24+
public static class FileFormat
2525
{
2626
public const string Json = ".json";
2727

‎src/AzureAppConfigurationEmulator/Components/ImportExportSourceServiceInputSelect.razor‎ renamed to ‎src/AzureAppConfigurationEmulator/Components/ImportExportSourceTypeInputSelect.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

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

1010
@code {
@@ -21,7 +21,7 @@
2121
await ValueChanged.InvokeAsync(!string.IsNullOrEmpty(value) ? value : null);
2222
}
2323

24-
public static class SourceService
24+
public static class SourceType
2525
{
2626
public const string AzureAppConfiguration = nameof(AzureAppConfiguration);
2727

‎src/AzureAppConfigurationEmulator/Components/Pages/ImportExport.razor‎

Lines changed: 114 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -17,88 +17,134 @@
1717
</AzureToolbar>
1818

1919
<div class="p-5">
20-
<EditForm class="flex flex-col gap-4 items-stretch pb-4" Model="@Model" OnSubmit="@HandleSubmit">
21-
<ImportExportOperationInputRadioGroup @bind-Value="@Model!.Operation" name="@nameof(Model.Operation)"/>
22-
23-
@switch (Model.Operation)
20+
<EditForm class="flex flex-col gap-10" Model="@Model" OnSubmit="@HandleSubmit">
21+
@switch (Model?.Operation)
2422
{
2523
case ImportExportOperationInputRadioGroup.Operation.Import:
26-
<label class="flex flex-col gap-1">
27-
<div>Source service</div>
28-
<ImportExportSourceServiceInputSelect @bind-Value="@Model.SourceService" name="@nameof(Model.SourceService)"/>
29-
</label>
30-
31-
switch (Model.SourceService)
24+
<div class="flex flex-col gap-3">
25+
<ImportExportOperationInputRadioGroup @bind-Value="@Model.Operation" name="@nameof(Model.Operation)"/>
26+
27+
<label class="flex flex-row items-center">
28+
<div class="w-[200px]">Source type</div>
29+
<div class="flex-1 max-w-[600px]">
30+
<ImportExportSourceTypeInputSelect @bind-Value="@Model.SourceType" name="@nameof(Model.SourceType)"/>
31+
</div>
32+
</label>
33+
</div>
34+
35+
switch (Model.SourceType)
3236
{
33-
case ImportExportSourceServiceInputSelect.SourceService.AzureAppConfiguration:
34-
<label class="flex flex-col gap-1">
35-
<div>Source connection string</div>
36-
<AzureInputText name="@nameof(Model.SourceConnectionString)" Value="@Model.SourceConnectionString" ValueChanged="@HandleSourceConnectionStringChange" ValueExpression="@(() => Model.SourceConnectionString)"/>
37-
</label>
37+
case ImportExportSourceTypeInputSelect.SourceType.AzureAppConfiguration:
38+
<div class="flex flex-col gap-3">
39+
<div class="font-bold text-lg">Select source</div>
40+
41+
<label class="flex flex-row items-center">
42+
<div class="w-[200px]">Connection string</div>
43+
<div class="flex-1 max-w-[600px]">
44+
<AzureInputText name="@nameof(Model.SourceConnectionString)" Value="@Model.SourceConnectionString" ValueChanged="@HandleSourceConnectionStringChange" ValueExpression="@(() => Model.SourceConnectionString)"/>
45+
</div>
46+
</label>
47+
</div>
3848

3949
if (!string.IsNullOrEmpty(Model.SourceConnectionString) && Labels is { Count: > 0 })
4050
{
41-
<label class="flex flex-col gap-1">
42-
<div>Key filter</div>
43-
<AzureInputText @bind-Value="@Model.KeyFilter" name="@nameof(Model.KeyFilter)" placeholder="abc | abc,xyz,..."/>
44-
</label>
45-
46-
<label class="flex flex-col gap-1">
47-
<div>Prefix</div>
48-
<AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
49-
</label>
51+
<div class="flex flex-col gap-3">
52+
<div class="font-bold text-lg">Select key-values</div>
53+
54+
<label class="flex flex-row items-center">
55+
<div class="w-[200px]">Key filter</div>
56+
<div class="flex-1 max-w-[600px]">
57+
<AzureInputText @bind-Value="@Model.KeyFilter" name="@nameof(Model.KeyFilter)" placeholder="abc | abc,xyz,..."/>
58+
</div>
59+
</label>
60+
61+
<label class="flex flex-row items-center">
62+
<div class="w-[200px]">At a specific time</div>
63+
<div class="flex-1 max-w-[600px]">
64+
<AzureInputDate @bind-Value="@Model.Moment" name="@nameof(Model.Moment)" Type="@InputDateType.DateTimeLocal"/>
65+
</div>
66+
</label>
67+
68+
<label class="flex flex-row items-center">
69+
<div class="w-[200px]">From label</div>
70+
<div class="flex-1 max-w-[600px]">
71+
<ImportExportLabelFilterInputSelect @bind-Value="@Model.LabelFilter" Labels="@Labels" name="@nameof(Model.LabelFilter)"/>
72+
</div>
73+
</label>
74+
</div>
5075

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

56-
<label class="flex flex-col gap-1">
57-
<div>From label</div>
58-
<ImportExportLabelFilterInputSelect @bind-Value="@Model.LabelFilter" Labels="@Labels" name="@nameof(Model.LabelFilter)"/>
59-
</label>
79+
<label class="flex flex-row items-center">
80+
<div class="w-[200px]">Add prefix</div>
81+
<div class="flex-1 max-w-[600px]">
82+
<AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
83+
</div>
84+
</label>
85+
</div>
6086

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

6692
break;
67-
case ImportExportSourceServiceInputSelect.SourceService.ConfigurationFile:
68-
<label class="flex flex-col gap-1">
69-
<div>File type</div>
70-
<ImportExportFileTypeInputSelect @bind-Value="@Model.FileType" name="@nameof(Model.FileType)"/>
71-
</label>
72-
73-
if (Model.FileType is not null)
74-
{
75-
<label class="flex flex-col gap-1">
76-
<div>Source file</div>
77-
<AzureInputFile accept="@Model.FileType" name="@nameof(Model.SourceFile)" OnChange="args => Model.SourceFile = args.File"/>
93+
case ImportExportSourceTypeInputSelect.SourceType.ConfigurationFile:
94+
<div class="flex flex-col gap-3">
95+
<div class="font-bold text-lg">Select source</div>
96+
97+
<label class="flex flex-row items-center">
98+
<div class="w-[200px]">File format</div>
99+
<div class="flex-1 max-w-[600px]">
100+
<ImportExportFileFormatInputSelect @bind-Value="@Model.FileFormat" name="@nameof(Model.FileFormat)"/>
101+
</div>
78102
</label>
79-
}
103+
104+
@if (Model.FileFormat is not null)
105+
{
106+
<label class="flex flex-row items-center">
107+
<div class="w-[200px]">Source file</div>
108+
<div class="flex-1 max-w-[600px]">
109+
<AzureInputFile accept="@Model.FileFormat" name="@nameof(Model.SourceFile)" OnChange="args => Model.SourceFile = args.File"/>
110+
</div>
111+
</label>
112+
}
113+
</div>
80114

81115
if (Model.SourceFile is not null)
82116
{
83-
<label class="flex flex-col gap-1">
84-
<div>Separator</div>
85-
<ImportExportSeparatorInputSelect @bind-Value="@Model.Separator" name="@nameof(Model.Separator)"/>
86-
</label>
87-
88-
<label class="flex flex-col gap-1">
89-
<div>Prefix</div>
90-
<AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
91-
</label>
92-
93-
<label class="flex flex-col gap-1">
94-
<div>Label</div>
95-
<AzureInputText @bind-Value="@Model.Label" name="@nameof(Model.Label)"/>
96-
</label>
97-
98-
<label class="flex flex-col gap-1">
99-
<div>Content type</div>
100-
<ImportExportContentTypeInputSelect @bind-Value="@Model.ContentType" name="@nameof(Model.ContentType)"/>
101-
</label>
117+
<div class="flex flex-col gap-3">
118+
<div class="font-bold text-lg">Apply changes to key-values</div>
119+
120+
<label class="flex flex-row items-center">
121+
<div class="w-[200px]">Separator</div>
122+
<div class="flex-1 max-w-[600px]">
123+
<ImportExportSeparatorInputSelect @bind-Value="@Model.Separator" name="@nameof(Model.Separator)"/>
124+
</div>
125+
</label>
126+
127+
<label class="flex flex-row items-center">
128+
<div class="w-[200px]">Add prefix</div>
129+
<div class="flex-1 max-w-[600px]">
130+
<AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
131+
</div>
132+
</label>
133+
134+
<label class="flex flex-row items-center">
135+
<div class="w-[200px]">Add label</div>
136+
<div class="flex-1 max-w-[600px]">
137+
<AzureInputText @bind-Value="@Model.Label" name="@nameof(Model.Label)"/>
138+
</div>
139+
</label>
140+
141+
<label class="flex flex-row items-center">
142+
<div class="w-[200px]">Add content type</div>
143+
<div class="flex-1 max-w-[600px]">
144+
<ImportExportContentTypeInputSelect @bind-Value="@Model.ContentType" name="@nameof(Model.ContentType)"/>
145+
</div>
146+
</label>
147+
</div>
102148

103149
<div>
104150
<AzureButton Appearance="AzureButton.AzureAppearance.Primary" type="submit">@(Model.Operation switch { ImportExportOperationInputRadioGroup.Operation.Export => "Export", ImportExportOperationInputRadioGroup.Operation.Import => "Import", _ => throw new ArgumentOutOfRangeException() })</AzureButton>
@@ -236,9 +282,9 @@
236282
{
237283
case ImportExportOperationInputRadioGroup.Operation.Import:
238284
{
239-
switch (Model?.SourceService)
285+
switch (Model?.SourceType)
240286
{
241-
case ImportExportSourceServiceInputSelect.SourceService.AzureAppConfiguration:
287+
case ImportExportSourceTypeInputSelect.SourceType.AzureAppConfiguration:
242288
{
243289
var dictionary = Model.SourceConnectionString!.Split(';').Select(s => s.Split('=', 2)).ToDictionary(s => s[0], s => s[1]);
244290
var endpoint = dictionary["Endpoint"];
@@ -282,7 +328,7 @@
282328

283329
break;
284330
}
285-
case ImportExportSourceServiceInputSelect.SourceService.ConfigurationFile:
331+
case ImportExportSourceTypeInputSelect.SourceType.ConfigurationFile:
286332
{
287333
await using var stream = Model.SourceFile!.OpenReadStream();
288334

@@ -324,7 +370,7 @@
324370
{
325371
public string? ContentType { get; set; }
326372

327-
public string? FileType { get; set; }
373+
public string? FileFormat { get; set; }
328374

329375
public string? KeyFilter { get; set; }
330376

@@ -344,7 +390,7 @@
344390

345391
public IBrowserFile? SourceFile { get; set; }
346392

347-
public string? SourceService { get; set; }
393+
public string? SourceType { get; set; }
348394
}
349395

350396
}

0 commit comments

Comments
 (0)