[Admin] Component: Create event details - UI component #214

AzureOpenAIProxy.sln

@@ -17,9 +17,9 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "test", "test", "{A69C5782-F
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AzureOpenAIProxy.AppHost.Tests", "test\AzureOpenAIProxy.AppHost.Tests\AzureOpenAIProxy.AppHost.Tests.csproj", "{E8994388-24FA-4221-8E46-4CD1DA96C585}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "AzureOpenAIProxy.PlaygroundApp.Tests", "test\AzureOpenAIProxy.PlaygroundApp.Tests\AzureOpenAIProxy.PlaygroundApp.Tests.csproj", "{0AE9860A-0F8D-49EF-B375-BF95374A1EDA}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AzureOpenAIProxy.PlaygroundApp.Tests", "test\AzureOpenAIProxy.PlaygroundApp.Tests\AzureOpenAIProxy.PlaygroundApp.Tests.csproj", "{0AE9860A-0F8D-49EF-B375-BF95374A1EDA}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "AzureOpenAIProxy.ApiApp.Tests", "test\AzureOpenAIProxy.ApiApp.Tests\AzureOpenAIProxy.ApiApp.Tests.csproj", "{0E772300-9263-49CA-8E26-D0B9CC584202}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AzureOpenAIProxy.ApiApp.Tests", "test\AzureOpenAIProxy.ApiApp.Tests\AzureOpenAIProxy.ApiApp.Tests.csproj", "{0E772300-9263-49CA-8E26-D0B9CC584202}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/Admin/NewEventDetailsComponent.razor

@@ -0,0 +1,125 @@
+@using AzureOpenAIProxy.PlaygroundApp.Models;
+
+<style>
+    section {
+        margin-bottom: 100px
+    }
+    .create-input-label {
+        width: 200px;
+        --type-ramp-base-font-size: 22px;
+    }
+    .create-fluent-stack {
+        height: 100px;
+    }
+    .button-section {
+        display: flex;
+        justify-content: center;
+        gap: 50px;
+    }
+    .button {
+        width: 150px;
+        height: 50px;
+        font-size: 16px;
+        margin: 0 10px;
+    }
+</style>
+
+<FluentLayout>
+    <FluentHeader>Create Event</FluentHeader>
+    <FluentBodyContent>
+        <section>
+            <h2>Event Infomation</h2>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="title" class="create-input-label">Title</FluentLabel>
+                <FluentTextField Id="title" Name="title" Required />
+            </FluentStack>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="summary" class="create-input-label">Summary</FluentLabel>
+                <FluentTextField id="summary" Required />
+            </FluentStack>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="description" class="create-input-label" Style="">Description</FluentLabel>
+                <FluentTextArea Id="description" Style="width:300px" />
+            </FluentStack>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="eventStartDate" class="create-input-label">Event Start Date</FluentLabel>
+                <FluentDatePicker Id="eventStartDate" />
+                <FluentTimePicker Id="eventStartTime" DefaultValue="00:00" />
+            </FluentStack>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="eventEndDate" class="create-input-label">Event End Date</FluentLabel>
+                <FluentDatePicker Id="eventEndDate" />
+                <FluentTimePicker Id="eventEndTime" DefaultValue="00:00" />
+            </FluentStack>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="timezone" class="create-input-label">Time Zone</FluentLabel>
+                <FluentSelect Id="timezone" TOption="string" Required>
+                    <FluentOption Value="kr">Korea</FluentOption>
+                    <FluentOption Value="us">US</FluentOption>
+                </FluentSelect>
+            </FluentStack>
+        </section>
+
+        <section>
+            <h2>Event Organizer</h2>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="organizerName" class="create-input-label">Organizer Name</FluentLabel>
+                <FluentTextField Id="organizerName" Required />
+            </FluentStack>
+
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="organizerEmail" class="create-input-label">Organizer Email</FluentLabel>
+                <FluentTextField Id="organizerEmail" Required />@@<FluentTextField Required />
+            </FluentStack>
+        </section>
+
+        <section>
+            <h2>Event Coorganizers</h2>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="organizerName" class="create-input-label">Coorgnizer Name</FluentLabel>
+                <FluentTextField Id="coorgnizerName" Required />
+            </FluentStack>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="organizerEmail" class="create-input-label">Coorgnizer Email</FluentLabel>
+                <FluentTextField Id="coorgnizerEmail" Required />@@<FluentTextField Required />
+            </FluentStack>
+        </section>
+
+        <section>
+            <h2>Event Configuration</h2>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="maxTokenCap" class="create-input-label">Max Token Cap</FluentLabel>
+                <FluentTextField Id="maxTokenCap" Required />
+            </FluentStack>
+
+            <FluentStack class="create-fluent-stack" Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <FluentLabel For="dailyRequestCap" class="create-input-label">Daily Request Cap</FluentLabel>
+                <FluentTextField Id="dailyRequestCap" Required />
+            </FluentStack>
+        </section>
+
+        <section class="button-section">
+            <FluentButton class="button">Add Event</FluentButton>
+            <FluentButton class="button">Cancel</FluentButton>
+        </section>
+    </FluentBodyContent>
+</FluentLayout>
+
+
+@code {
+    private AdminEventDetails? adminEventDetails;
+
+
+}
+

src/AzureOpenAIProxy.PlaygroundApp/Models/AdminEventDetails.cs

@@ -0,0 +1,52 @@
+namespace AzureOpenAIProxy.PlaygroundApp.Models;
+
+/// <summary>
+/// This represent the event detail data for response by admin event endpoint.
+/// </summary>
+public class AdminEventDetails : EventDetails
+{
+    /// <summary>
+    /// Gets or sets the event description.
+    /// </summary>
+    public string? Description { get; set; }
+
+    /// <summary>
+    /// Gets or sets the event start date.
+    /// </summary>
+    public required DateTimeOffset? DateStart { get; set; }
+
+    /// <summary>
+    /// Gets or sets the event end date.
+    /// </summary>
+    public required DateTimeOffset? DateEnd { get; set; }
+
+    /// <summary>
+    /// Gets or sets the event start to end date timezone.
+    /// </summary>
+    public required string? TimeZone { get; set; }
+
+    /// <summary>
+    /// Gets or sets the event active status.
+    /// </summary>
+    public required bool? IsActive { get; set; }
+
+    /// <summary>
+    /// Gets or sets the event organizer name.
+    /// </summary>
+    public required string? OrganizerName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the event organizer email.
+    /// </summary>
+    public required string? OrganizerEmail { get; set; }
+
+    /// <summary>
+    /// Gets or sets the event coorganizer name.
+    /// </summary>
+    public string? CoorganizerName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the event coorganizer email.
+    /// </summary>
+    public string? CoorganizerEmail { get; set; }
+}

src/AzureOpenAIProxy.PlaygroundApp/Models/EventDetails.cs

@@ -0,0 +1,32 @@
+namespace AzureOpenAIProxy.PlaygroundApp.Models;
+
+/// <summary>
+/// This represents the event's detailed data for response by EventEndpoint.
+/// </summary>
+public class EventDetails
+{
+    /// <summary>
+    /// Gets or sets the event id.
+    /// </summary>
+    public required string? EventId { get; set; }
+
+    /// <summary>
+    /// Gets or sets the event title name.
+    /// </summary>
+    public required string? Title { get; set; }
+
+    /// <summary>
+    /// Gets or sets the event summary.
+    /// </summary>
+    public required string? Summary { get; set; }
+
+    /// <summary>
+    /// Gets or sets the Azure OpenAI Service request max token capacity.
+    /// </summary>
+    public required int? MaxTokenCap { get; set; }
+
+    /// <summary>
+    /// Gets or sets the Azure OpenAI Service daily request capacity.
+    /// </summary>
+    public required int? DailyRequestCap { get; set; }
+}

test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/NewEventDetailsTests.cs

@@ -0,0 +1,28 @@
+using Microsoft.Playwright;
+using Microsoft.Playwright.NUnit;
+
+namespace AzureOpenAIProxy.PlaygroundApp.Tests.Pages;
+
+[Parallelizable(ParallelScope.Self)]
+[TestFixture]
+[Property("Category", "Integration")]
+public class NewEventDetailsTests : PageTest
+{
+    public override BrowserNewContextOptions ContextOptions() => new()
+    {
+        IgnoreHTTPSErrors = true,
+    };
+
+    [Test]
+    public async Task Given_Root_Page_When_Navigated_Then_It_Should_No_Sidebar()
+    {
+        // Arrange
+        await this.Page.GotoAsync("https://localhost:5001");
+
+        // Act
+        var sidebar = this.Page.Locator("div.sidebar");
+
+        // Assert
+        Expect(sidebar).Equals(null);
+    }
+}