Add popup form

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor

@@ -0,0 +1,50 @@
+@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.Shared.Dto
+
+<EditForm EditContext="EditContext">
+    <div class="game-form">
+        <div class="container">
+            <div class="input-game">
+                <div id="first-label" class="label">@ResourcesKey.Title :</div>
+                <input type="text" class="title">
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.ReleaseDate :</div>
+                <input type="date" class="date">
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.StorageSize :</div>
+                <input type="text" class="storage">
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Developers :</div>
+                <MultipleSelectList TItem="DeveloperDto" Theme="SelectListTheme" />
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Publishers :</div>
+                <MultipleSelectList TItem="PublisherDto" Theme="SelectListTheme" />
+            </div>
+        </div>
+        <div class="container">
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Interest :</div>
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Properties :</div>
+                <MultipleSelectList TItem="PropertyDto" Theme="SelectListTheme" />
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Genres :</div>
+                <MultipleSelectList TItem="TagDto" Theme="SelectListTheme" />
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Platforms :</div>
+                <MultipleSelectList TItem="PlatformDto" Theme="SelectListTheme" />
+            </div>
+        </div>
+    </div>
+    <div class="description-container">
+        <div id="label-description">@ResourcesKey.Description :</div>
+        <input type="text" class="description" @bind-value=GameDto.Description>
+    </div>
+</EditForm>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs

@@ -0,0 +1,28 @@
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.Shared.Dto;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.JSInterop;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Components;
+
+public partial class GameCreationForm
+{
+    [Inject] private IJSRuntime Js { get; set; } = default!;
+
+    private GameDto GameDto = new();
+    private EditContext? EditContext;
+    private readonly SelectListTheme SelectListTheme = SelectListTheme.Creation;
+
+    protected override void OnInitialized()
+    {
+        EditContext = new(GameDto);
+        base.OnInitialized();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await Js.InvokeVoidAsync("addResizeGameFormListener");
+        await base.OnAfterRenderAsync(firstRender);
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css

@@ -0,0 +1,54 @@
+.game-form {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.input-game {
+    display: grid;
+    grid-template-columns: auto 200px;
+    grid-gap: 8px;
+    height: 24px;
+}
+
+.label {
+    text-wrap: nowrap;
+    align-content: center;
+    font-weight: bold;
+    grid-column: 1;
+}
+
+input {
+    width: 100%;
+    background: var(--input-secondary);
+    border: solid 1px var(--input-selected);
+    outline: none;
+    border-radius: var(--small-radius);
+    grid-column: 2;
+    box-sizing: border-box;
+    color: var(--white);
+}
+
+.description-container {
+    margin-top: 8px;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 8px;
+}
+
+.description {
+    min-height: 140px;
+}
+
+#label-description {
+    text-wrap: nowrap;
+    align-content: center;
+    font-weight: bold;
+    height: 24px;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js

@@ -0,0 +1,10 @@
+function resizeFormContent() {
+    const label = document.getElementById('first-label');
+    const targetLabel = document.getElementById('label-description');
+    targetLabel.style.width = window.getComputedStyle(label).getPropertyValue("width");
+}
+
+window.addResizeGameFormListener = () => {
+    resizeFormContent();
+    window.addEventListener('resize', resizeFormContent);
+};

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor

@@ -6,14 +6,14 @@
     <div class="duplicate">
         <MultipleSelectList TItem="string"
                             Items="Plateforms"
-                            @bind-Values=GameFilterParams!.Plateforms
+                            @bind-Values=GameFilterParams!.Platforms
                             Placeholder="@ResourcesKey.Platforms"
                             Theme="SelectListTheme.AdvancedFilter" />
 
         <MultipleSelectList TItem="string"
                             Items="Genres"
                             Placeholder="@ResourcesKey.Genres"
-                            @bind-Values=GameFilterParams!.Genres
+                            @bind-Values=GameFilterParams!.Tags
                             Theme="SelectListTheme.AdvancedFilter" />
     </div>
 
@@ -32,7 +32,7 @@
 
     <MultipleSelectList TItem="string"
                         Items="StorageSizes"
-                        Placeholder="@ResourcesKey.StorageSizes"
+                        Placeholder="@ResourcesKey.StorageSize"
                         @bind-Values=GameFilterParams!.StorageSizes
                         Theme="SelectListTheme.AdvancedFilter" />
 
@@ -44,7 +44,7 @@
 
     <MultipleSelectList TItem="string"
                         Items="ReleaseDates"
-                        Placeholder="@ResourcesKey.ReleaseDates"
+                        Placeholder="@ResourcesKey.ReleaseDate"
                         @bind-Values=GameFilterParams!.ReleaseDates
                         Theme="SelectListTheme.AdvancedFilter" />
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor

@@ -40,7 +40,7 @@
         <MultipleSelectList TItem="string"
                             Items="Plateforms"
                             Placeholder="@ResourcesKey.Platforms"
-                            @bind-Values=GameFilterParams.Plateforms
+                            @bind-Values=GameFilterParams.Platforms
                             Theme="SelectListTheme.Filter" />
     </div>
 
@@ -48,7 +48,7 @@
         <MultipleSelectList TItem="string"
                             Items="Genres"
                             Placeholder="@ResourcesKey.Genres"
-                            @bind-Values=GameFilterParams.Genres
+                            @bind-Values=GameFilterParams.Tags
                             Theme="SelectListTheme.Filter" />
     </div>
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs

@@ -8,8 +8,9 @@ public class GameFilterParams
     public SortType? SortType { get; set; }
     public Func<GameDto?, object?>? SortProperty { get; set; }
     public string? SearchName { get; set; }
-    public IEnumerable<string>? Plateforms { get; set; }
+    public IEnumerable<string>? Platforms { get; set; }
-    public IEnumerable<string>? Genres { get; set; }
+    public IEnumerable<string>? Properties { get; set; }
+    public IEnumerable<string>? Tags { get; set; }
     public IEnumerable<string>? Publishers { get; set; }
     public IEnumerable<string>? Developers { get; set; }
     public IEnumerable<string>? StorageSizes { get; set; }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor

@@ -1,5 +1,6 @@
 @page "/Games"
 @using GameIdeas.BlazorApp.Layouts
+@using GameIdeas.BlazorApp.Pages.Games.Components
 @using GameIdeas.BlazorApp.Pages.Games.Filter
 @using GameIdeas.BlazorApp.Pages.Games.Header
 @using GameIdeas.BlazorApp.Shared.Components
@@ -23,5 +24,5 @@
 </div>
 
 <Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
-    
+    <GameCreationForm />
 </Popup>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css

@@ -5,7 +5,7 @@
 }
 
     .backdrop-filter.overlay {
-        background-color: var(--grey-filter);
+        background-color: rgba(0, 0, 0, 0.2);
     }
 
     .backdrop-filter.transparent {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css

@@ -17,11 +17,25 @@
     box-shadow: var(--drop-shadow);
 }
 
-.popup-content button{
+.popup-content button {
-    top: 10px;
+    top: 4px;
-    right: 10px;
+    right: 4px;
     position: absolute;
     background: transparent;
     border: none;
     outline: none;
+    padding: 0;
+    height: 20px;
+    width: 20px;
+}
+
+    .popup-content button svg {
+        height: 18px;
+        fill: var(--white);
+    }
+
+.popup-content button:hover {
+    cursor: pointer;
+    background: var(--input-selected);
+    border-radius: var(--small-radius);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css

@@ -24,6 +24,7 @@
     background: none !important;
     color: var(--white);
     height: 100%;
+    width: 100%;
     padding: 0;
     min-width: 0;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs

@@ -5,5 +5,6 @@ public enum SelectListTheme
     Navigation,
     Sort,
     Filter,
-    AdvancedFilter
+    AdvancedFilter,
+    Creation
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css

@@ -30,14 +30,22 @@
     margin: 2px 6px;
     border-bottom: 2px solid var(--input-selected);
 }
-
+/* Advanced filter */
 ::deep .select-button.advancedfilter .search-container {
     height: 24px;
     background: var(--input-secondary);
 }
 
-::deep .select-button.advancedfilter .search-container input::placeholder {
+    ::deep .select-button.advancedfilter .search-container input::placeholder {
-    color: #bbb;
+        color: #bbb;
+    }
+
+/* Creation */
+::deep .select-button.creation .search-container {
+    height: 24px;
+    background: var(--input-secondary);
+    border: solid 1px var(--input-selected);
+    box-sizing: border-box;
 }
 
 /* width */

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html

@@ -28,6 +28,7 @@
     <script src="_framework/blazor.webassembly.js"></script>
     <script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
     <script src="Shared/Components/Select/MultipleSelectList.razor.js"></script>
+    <script src="Pages/Games/Components/GameCreationForm.razor.js"></script>
 </body>
 
 </html>

src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs

@@ -18,9 +18,13 @@ public class Translations (TranslationService translationService)
     public string Genres => translationService.Translate(nameof(Genres));
     public string Publishers => translationService.Translate(nameof(Publishers));
     public string Developers => translationService.Translate(nameof(Developers));
-    public string StorageSizes => translationService.Translate(nameof(StorageSizes));
+    public string StorageSize => translationService.Translate(nameof(StorageSize));
     public string LastModification => translationService.Translate(nameof(LastModification));
-    public string ReleaseDates => translationService.Translate(nameof(ReleaseDates));
+    public string ReleaseDate => translationService.Translate(nameof(ReleaseDate));
+    public string Title => translationService.Translate(nameof(Title));
+    public string Interest => translationService.Translate(nameof(Interest));
+    public string Properties => translationService.Translate(nameof(Properties));
+    public string Description => translationService.Translate(nameof(Description));
 }
 
 public static class ResourcesKey
@@ -47,7 +51,11 @@ public static class ResourcesKey
     public static string Genres => _instance?.Genres ?? throw new InvalidOperationException("ResourcesKey.Genres is not initialized.");
     public static string Publishers => _instance?.Publishers ?? throw new InvalidOperationException("ResourcesKey.Publishers is not initialized.");
     public static string Developers => _instance?.Developers ?? throw new InvalidOperationException("ResourcesKey.Developers is not initialized.");
-    public static string StorageSizes => _instance?.StorageSizes ?? throw new InvalidOperationException("ResourcesKey.StorageSizes is not initialized.");
+    public static string StorageSize => _instance?.StorageSize ?? throw new InvalidOperationException("ResourcesKey.StorageSize is not initialized.");
     public static string LastModification => _instance?.LastModification ?? throw new InvalidOperationException("ResourcesKey.LastModification is not initialized.");
-    public static string ReleaseDates => _instance?.ReleaseDates ?? throw new InvalidOperationException("ResourcesKey.ReleaseDates is not initialized.");
+    public static string ReleaseDate => _instance?.ReleaseDate ?? throw new InvalidOperationException("ResourcesKey.ReleaseDate is not initialized.");
+    public static string Title => _instance?.Title ?? throw new InvalidOperationException("ResourcesKey.Title is not initialized.");
+    public static string Interest => _instance?.Interest ?? throw new InvalidOperationException("ResourcesKey.Interest is not initialized.");
+    public static string Properties => _instance?.Properties ?? throw new InvalidOperationException("ResourcesKey.Properties is not initialized.");
+    public static string Description => _instance?.Description ?? throw new InvalidOperationException("ResourcesKey.Description is not initialized.");
 }

src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json

@@ -14,7 +14,11 @@
     "Genres": "Genres",
     "Publishers": "Editeurs",
     "Developers": "Développeurs",
-    "StorageSizes": "Taille d'espace",
+    "StorageSize": "Taille d'espace",
     "LastModification": "Dernière modifications",
-    "ReleaseDates": "Dates de parution"
+    "ReleaseDate": "Date de parution",
+    "Title": "Titre",
+    "Interest": "Intérêt",
+    "Properties": "Propriétés",
+    "Description": "Description"
 }