po lekci 10

czechitas · Nov 27, 2024 · 262348d · 262348d
1 parent f36d4a5
commit 262348d
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 56 deletions.
diff --git a/ToDoList/src/ToDoList.Frontend/Components/App.razor b/ToDoList/src/ToDoList.Frontend/Components/App.razor
@@ -7,12 +7,14 @@
     <base href="/" />
     <link rel="stylesheet" href="app.css" />
     <link rel="stylesheet" href="ToDoList.Frontend.styles.css" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <HeadOutlet />
 </head>
 
 <body>
     <Routes />
     <script src="_framework/blazor.web.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 </body>
 
 </html>
diff --git a/ToDoList/src/ToDoList.Frontend/Components/Dashboard.razor b/ToDoList/src/ToDoList.Frontend/Components/Dashboard.razor
@@ -1,36 +1,42 @@
 @using ToDoList.Frontend.Views
 @using ToDoList.Frontend.Clients
 @inject IToDoItemsClient ToDoItemsClient
+@inject NavigationManager NavigationManager
 @rendermode InteractiveServer
 
 <h1>Dashboard</h1>
 
-<table>
-    <tr>
-        <td><button @onclick="OrderById">Seradit Podle Id</button></td>
-        <td><button @onclick="OrderByName">Seradit Podle Jmena</button></td>
-        <td></td>
-        <td></td>
-    </tr>
-
-    @if (toDoItems is null)
-    {
-        <p>Nacitam...</p>
-    }
+<table class="table table-hover mt-5">
+    <thead class="table-dark">
+        <th>Id</th>
+        <th>Name</th>
+        <th>Description</th>
+        <th>Completed</th>
+        <th>Actions</th>
+    </thead>
+    <tbody>
+        @if (toDoItems is null)
+        {
+            <p>Nacitam...</p>
+        }
 
-    @if (toDoItems is not null)
-    {
-        @foreach (var toDoItem in toDoItems)
+        @if (toDoItems is not null)
         {
-            <tr>
-                <td>@toDoItem.ToDoItemId</td>
-                <td>@toDoItem.Name</td>
-                <td>@toDoItem.Description</td>
-                <td>@toDoItem.IsCompleted</td>
-            </tr>
+            @foreach (var toDoItem in toDoItems)
+            {
+                <tr class="table-success">
+                    <td>@toDoItem.ToDoItemId</td>
+                    <td>@toDoItem.Name</td>
+                    <td>@toDoItem.Description</td>
+                    <td>@toDoItem.IsCompleted</td>
+                    <td><button class="btn btn-success" @onclick="() => EditItem(toDoItem)">Edit</button></td>
+                </tr>
+            }
         }
-    }
+    </tbody>
 </table>
+<button class="btn btn-success" @onclick="OrderById">Seradit Podle Id</button>
+<button class="btn btn-success" @onclick="OrderByName">Seradit Podle Jmena</button>
 
 @code
 {
@@ -49,4 +55,9 @@
     {
         toDoItems = toDoItems?.OrderBy(item => item.ToDoItemId).ToList();
     }
+
+    public void EditItem(ToDoItemView toDoItem)
+    {
+        NavigationManager.NavigateTo($"editToDoItem/{toDoItem.ToDoItemId}");
+    }
 }
diff --git a/ToDoList/src/ToDoList.Frontend/Components/Layout/MainLayout.razor b/ToDoList/src/ToDoList.Frontend/Components/Layout/MainLayout.razor
@@ -1,3 +1,5 @@
 @inherits LayoutComponentBase
 
-@Body
+<div class="container">
+    @Body
+</div>
diff --git a/ToDoList/src/ToDoList.Frontend/Components/Pages/AhojSvete.razor b/ToDoList/src/ToDoList.Frontend/Components/Pages/AhojSvete.razor
diff --git a/ToDoList/src/ToDoList.Frontend/Components/Pages/EditToDoItem.razor b/ToDoList/src/ToDoList.Frontend/Components/Pages/EditToDoItem.razor
@@ -0,0 +1,38 @@
+@page "/editToDoItem/{ItemId:int}"
+@using ToDoList.Frontend.Views
+@using ToDoList.Frontend.Clients
+@inject NavigationManager NavigationManager
+@inject IToDoItemsClient ToDoItemsClient
+@rendermode InteractiveServer
+
+<PageTitle>Edit To Do Item</PageTitle>
+
+@if (ToDoItem is not null)
+{
+    <EditForm Model="ToDoItem" FormName="EditToDoItem" OnSubmit="Submit">
+        <InputText id="Name" @bind-Value="ToDoItem.Name" />
+        <InputText id="Description" @bind-Value="ToDoItem.Description" />
+        <InputCheckbox id="IsCompleted" @bind-Value="ToDoItem.IsCompleted" />
+        <button type="submit">Submit</button>
+    </EditForm>
+}
+
+@code
+{
+    protected override async Task OnInitializedAsync()
+    {
+        ToDoItem = await ToDoItemsClient.ReadItemByIdAsync(ItemId);
+    }
+
+    [Parameter]
+    public int ItemId { get; set; }
+
+    [SupplyParameterFromForm]
+    public ToDoItemView ToDoItem { get; set; }
+
+    public async Task Submit()
+    {
+        await ToDoItemsClient.UpdateItemAsync(ToDoItem);
+        NavigationManager.NavigateTo("/");
+    }
+}
diff --git a/ToDoList/src/ToDoList.Frontend/Components/Pages/Home.razor b/ToDoList/src/ToDoList.Frontend/Components/Pages/Home.razor
@@ -4,24 +4,3 @@
 <PageTitle>Home</PageTitle>
 
 <Dashboard />
-
-<h1>@ahojSvete</h1>
-
-Vítej v mojí aplikaci.
-<br>
-<button @onclick="Increment">Moje tlačítko</button>
-
-<br>
-Hodnota počítadla: @counter;
-
-@code
-{
-    string ahojSvete = "Ahoj světe ještě jednou!";
-
-    int counter = 0;
-
-    public void Increment()
-    {
-        counter++;
-    }
-}