commit 68d94a979e14f8735b71b84370dabba1604ccfda
Author: Dominik Chlouba <dchlouba@students.zcu.cz>
Date:   Mon May 24 01:21:51 2021 +0200

    UI changes, dashboard graphs and filters draft

diff --git a/src/Core/Application/Leuze.Core.Application.UI/App.razor b/src/Core/Application/Leuze.Core.Application.UI/App.razor
index 67a11bc..85c5ef7 100644
--- a/src/Core/Application/Leuze.Core.Application.UI/App.razor
+++ b/src/Core/Application/Leuze.Core.Application.UI/App.razor
@@ -5,7 +5,7 @@
         <Found Context="routeData">
             <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                 <NotAuthorized>
-                    <RedirectToLogin />
+                    <p>Nemáte potřebná oprávnění</p>
                 </NotAuthorized>
                 <Authorizing>
                     <p>Just checking with the boss you can come in.</p>
diff --git a/src/Core/Application/Leuze.Core.Application.UI/Leuze.Core.Application.UI.csproj b/src/Core/Application/Leuze.Core.Application.UI/Leuze.Core.Application.UI.csproj
index 4e95c31..aaa4a34 100644
--- a/src/Core/Application/Leuze.Core.Application.UI/Leuze.Core.Application.UI.csproj
+++ b/src/Core/Application/Leuze.Core.Application.UI/Leuze.Core.Application.UI.csproj
@@ -25,6 +25,7 @@
     <PackageReference Include="Blazored.Toast" Version="3.1.2" />
     <PackageReference Include="Blazored.Typeahead" Version="4.6.0" />
     <PackageReference Include="BlazorStyled" Version="3.1.0" />
+    <PackageReference Include="ChartJs.Blazor.Fork" Version="2.0.2" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.Cookies" Version="2.2.0" />
     <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="5.0.2" />
   </ItemGroup>
diff --git a/src/Core/Application/Leuze.Core.Application.UI/Pages/Index.razor b/src/Core/Application/Leuze.Core.Application.UI/Pages/Index.razor
index 76eb6dd..562ca3a 100644
--- a/src/Core/Application/Leuze.Core.Application.UI/Pages/Index.razor
+++ b/src/Core/Application/Leuze.Core.Application.UI/Pages/Index.razor
@@ -1,7 +1,64 @@
 ﻿@page "/"
 @layout MainLayout
 @attribute [Authorize]
+@using ChartJs.Blazor.PieChart
 
 <AuthorizeView>
     <h1>Vítejte, @context.User.Identity?.Name</h1>
-</AuthorizeView>
\ No newline at end of file
+    <div>
+        <div>
+            <label>Od</label>
+            <input type="date" />
+        </div>
+        <div>
+            <label>Do</label>
+            <input type="date" />
+        </div>
+        <div>
+            <label>Uživatel</label>
+            <select>
+                <option value="">Já</option>
+            </select>
+        </div>
+    </div>
+    <div style="width:100%;height:350px;">
+        <Chart Config="_config"></Chart>
+    </div>
+</AuthorizeView>
+
+@code {
+    private PieConfig _config;
+
+    protected override void OnInitialized()
+    {
+        _config = new PieConfig
+        {
+            Options = new PieOptions
+            {
+                Responsive = true,
+                Title = new OptionsTitle
+                {
+                    Display = true,
+                    Text = "ChartJs.Blazor Pie Chart"
+                }
+            }
+        };
+
+        foreach (string color in new[] { "Neschválené", "Aktivní", "Uzavřené" })
+        {
+            _config.Data.Labels.Add(color);
+        }
+
+        PieDataset<int> dataset = new PieDataset<int>(new[] { 6, 5, 3 })
+        {
+            BackgroundColor = new[]
+            {
+                ColorUtil.ColorHexString(255, 99, 132), // Slice 1 aka "Red"
+                ColorUtil.ColorHexString(255, 205, 86), // Slice 2 aka "Yellow"
+                ColorUtil.ColorHexString(75, 192, 192), // Slice 3 aka "Green"
+            }
+        };
+
+        _config.Data.Datasets.Add(dataset);
+    }
+}
\ No newline at end of file
diff --git a/src/Core/Application/Leuze.Core.Application.UI/Pages/Users/List.razor b/src/Core/Application/Leuze.Core.Application.UI/Pages/Users/List.razor
index 3ecdee3..9325c35 100644
--- a/src/Core/Application/Leuze.Core.Application.UI/Pages/Users/List.razor
+++ b/src/Core/Application/Leuze.Core.Application.UI/Pages/Users/List.razor
@@ -1,5 +1,5 @@
 ﻿@page "/Users"
-@attribute [Authorize]
+@attribute [Authorize(Roles = "Admin")]
 @layout MainLayout
 @inject IMediator _mediator
 @inject IStringLocalizer<List> T
diff --git a/src/Core/Application/Leuze.Core.Application.UI/Pages/_Host.cshtml b/src/Core/Application/Leuze.Core.Application.UI/Pages/_Host.cshtml
index a9ef962..21ed3fb 100644
--- a/src/Core/Application/Leuze.Core.Application.UI/Pages/_Host.cshtml
+++ b/src/Core/Application/Leuze.Core.Application.UI/Pages/_Host.cshtml
@@ -33,5 +33,9 @@
     }
     <component type="typeof(App)" render-mode="ServerPrerendered" />
     <script src="_framework/blazor.server.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
+
+    <!-- This is the glue between Blazor and Chart.js -->
+    <script src="_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js"></script>
 </body>
 </html>
diff --git a/src/Core/Application/Leuze.Core.Application.UI/_Imports.razor b/src/Core/Application/Leuze.Core.Application.UI/_Imports.razor
index a6809b1..cdc0b5e 100644
--- a/src/Core/Application/Leuze.Core.Application.UI/_Imports.razor
+++ b/src/Core/Application/Leuze.Core.Application.UI/_Imports.razor
@@ -26,4 +26,13 @@
 @using Leuze.Core.Domain.Domains.Users
 @using Microsoft.Extensions.Localization
 @using Microsoft.AspNetCore.Localization
-@using Blazored.Typeahead
\ No newline at end of file
+@using Blazored.Typeahead
+@using ChartJs.Blazor;
+@using ChartJs.Blazor.Common
+@using ChartJs.Blazor.Common.Axes
+@using ChartJs.Blazor.Common.Axes.Ticks
+@using ChartJs.Blazor.Common.Enums
+@using ChartJs.Blazor.Common.Handlers
+@using ChartJs.Blazor.Common.Time
+@using ChartJs.Blazor.Util
+@using ChartJs.Blazor.Interop
\ No newline at end of file
diff --git a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateDefinitionRangeAside.razor b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateDefinitionRangeAside.razor
index bf07294..661607c 100644
--- a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateDefinitionRangeAside.razor
+++ b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateDefinitionRangeAside.razor
@@ -9,12 +9,18 @@
         </div>
     </div>
     <div class="review_detail_body">
-        <div class="review_description_title">@T["Start"]</div>
-        <input type="date" />
-        <div class="review_description_title">@T["End"]</div>
-        <input type="date" />
-        <div class="review_description_title">@T["Result"]</div>
-        <input type="number" />
+        <div class="input_row">
+            <label class="input_label">@T["Start"]<span style="color:#ff0000">*</span></label>
+            <input type="date" />
+        </div>
+        <div class="input_row">
+            <label class="input_label">@T["End"]<span style="color:#ff0000">*</span></label>
+            <input type="date" />
+        </div>
+        <div class="input_row">
+            <label class="input_label">@T["Result"]</label>
+            <input type="number" />
+        </div>
     </div>
     <div class="review_detail_footer">
         <button>@T["Save"]</button>
@@ -26,6 +32,25 @@
 <BlazorStyled.Styled @bind-Classname="@_aside">
     right: @(Show ? "0" : "-615")px;
 </BlazorStyled.Styled>
+<BlazorStyled.Styled>
+    .input_row {
+    margin-bottom: 24px;
+    }
+    .input_row input:not([type="checkbox"]) {
+    width: calc(100% - 34px);
+    padding: 12px 16px;
+    border-radius: 4px;
+    border: 1px solid #C8C8C8;
+    font-size: 14px;
+    }
+    .input_row label.input_label {
+    font-size: 16px;
+    font-weight: 700;
+    color: #111111;
+    padding-bottom: 4px;
+    display: block;
+    }
+</BlazorStyled.Styled>
 <BlazorStyled.Styled>
     .review_detail {
     width: 600px;
@@ -55,7 +80,7 @@
     }
 
     .review_detail_body{
-    padding: 16px 0;
+    padding: 16px 24px;
     height: calc(100% - 143px - 50px - 12px);
     overflow-y: auto;
     overflow-x: hidden;
diff --git a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateGoalAside.razor b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateGoalAside.razor
index 49ebdcf..3e661fb 100644
--- a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateGoalAside.razor
+++ b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateGoalAside.razor
@@ -9,10 +9,14 @@
         </div>
     </div>
     <div class="review_detail_body">
-        <div class="review_description_title">@T["Name"]</div>
-        <input type="text" />
-        <div class="review_description_title">@T["Description"]</div>
-        <textarea></textarea>
+        <div class="input_row">
+            <label class="input_label">@T["Name"]</label>
+            <input type="text" />
+        </div>
+        <div class="input_row">
+            <label class="input_label">@T["Description"]</label>
+            <textarea></textarea>
+        </div>
     </div>
     <div class="review_detail_footer">
         <button>@T["Create"]</button>
@@ -23,6 +27,25 @@
 <BlazorStyled.Styled @bind-Classname="@_aside">
     right: @(Show ? "0" : "-615")px;
 </BlazorStyled.Styled>
+<BlazorStyled.Styled>
+    .input_row {
+    margin-bottom: 24px;
+    }
+    .input_row input:not([type="checkbox"]), .input_row textarea {
+    width: calc(100% - 34px);
+    padding: 12px 16px;
+    border-radius: 4px;
+    border: 1px solid #C8C8C8;
+    font-size: 14px;
+    }
+    .input_row label.input_label {
+    font-size: 16px;
+    font-weight: 700;
+    color: #111111;
+    padding-bottom: 4px;
+    display: block;
+    }
+</BlazorStyled.Styled>
 <BlazorStyled.Styled>
     .review_detail {
     width: 600px;
@@ -52,7 +75,7 @@
     }
 
     .review_detail_body{
-    padding: 16px 0;
+    padding: 16px 24px;
     height: calc(100% - 143px - 50px - 12px);
     overflow-y: auto;
     overflow-x: hidden;
diff --git a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateGoalDefinition.razor b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateGoalDefinition.razor
index 5f2e38b..f3007f6 100644
--- a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateGoalDefinition.razor
+++ b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/CreateGoalDefinition.razor
@@ -9,16 +9,24 @@
         </div>
     </div>
     <div class="review_detail_body">
-        <div class="review_description_title">@T["Name"]</div>
-        <input type="text" />
-        <div class="review_description_title">@T["User"]</div>
-        <select>
-            <option value="" disabled>@T["SelectUser"]</option>
-        </select>
-        <div class="review_description_title">@T["Hours"]</div>
-        <input type="number" />
-        <div class="review_description_title">@T["Finance"]</div>
-        <input type="number" />
+        <div class="input_row">
+            <label class="input_label">@T["Name"]</label>
+            <input type="number" />
+        </div>
+        <div class="input_row">
+            <label class="input_label">@T["User"]</label>
+            <select>
+                <option value="" disabled>@T["SelectUser"]</option>
+            </select>
+        </div>
+        <div class="input_row">
+            <label class="input_label">@T["Hours"]</label>
+            <input type="number" />
+        </div>
+        <div class="input_row">
+            <label class="input_label">@T["Finance"]</label>
+            <input type="number" />
+        </div>
     </div>
     <div class="review_detail_footer">
         <button>@T["Create"]</button>
@@ -29,6 +37,32 @@
 <BlazorStyled.Styled @bind-Classname="@_aside">
     right: @(Show ? "0" : "-615")px;
 </BlazorStyled.Styled>
+<BlazorStyled.Styled>
+    .input_row {
+    margin-bottom: 24px;
+    }
+    .input_row select {
+    width: 100%;
+    padding: 12px 16px;
+    border-radius: 4px;
+    border: 1px solid rgb(200, 200, 200);
+    font-size: 14px;
+    }
+    .input_row input:not([type="checkbox"]) {
+    width: calc(100% - 34px);
+    padding: 12px 16px;
+    border-radius: 4px;
+    border: 1px solid #C8C8C8;
+    font-size: 14px;
+    }
+    .input_row label.input_label {
+    font-size: 16px;
+    font-weight: 700;
+    color: #111111;
+    padding-bottom: 4px;
+    display: block;
+    }
+</BlazorStyled.Styled>
 <BlazorStyled.Styled>
     .review_detail {
     width: 600px;
@@ -58,7 +92,7 @@
     }
 
     .review_detail_body{
-    padding: 16px 0;
+    padding: 16px 24px;
     height: calc(100% - 143px - 50px - 12px);
     overflow-y: auto;
     overflow-x: hidden;
diff --git a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/ReviewDetailAside.razor b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/ReviewDetailAside.razor
index 38f3bfb..cbdb4b3 100644
--- a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/ReviewDetailAside.razor
+++ b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/Components/ReviewDetailAside.razor
@@ -63,7 +63,7 @@
     }
 
     .review_detail_body{
-    padding: 16px 0;
+    padding: 16px 24px;
     height: calc(100% - 143px - 50px - 12px);
     overflow-y: auto;
     overflow-x: hidden;
diff --git a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/GoalRanges.razor b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/GoalRanges.razor
index 3576be5..b8ae05a 100644
--- a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/GoalRanges.razor
+++ b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/GoalRanges.razor
@@ -29,6 +29,10 @@
                 <td>-</td>
                 <td>
                     <div class="flex">
+                        <div>
+                            <i class="fal fa-download"></i>
+                            @T["Export"]
+                        </div>
                         <div @onclick='() => _nav.NavigateTo("/goals/overview/test")'>
                             <i class="fal fa-eye"></i>
                             @T["Open"]
@@ -48,7 +52,7 @@
     </table>
     @if (Ranges.Count > 0)
     {
-        <div class="pagination">
+        <!--<div class="pagination">
             <div class="left">
                 <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-double-left.svg" /></button>
                 <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-left.svg" /></button>
@@ -57,7 +61,7 @@
                 <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-double-right.svg" /></button>
             </div>
             <div class="right">@T["Show"] <b>@Ranges.Count @T["From"] @Total</b></div>
-        </div>
+        </div>-->
     }
 }
 else
@@ -70,7 +74,7 @@ else
     .flex{
     display: grid;
     align-items: center;
-    grid-template-columns: repeat(3, 100px);
+    grid-template-columns: repeat(4, 100px);
     justify-content: right;
     }
     .flex > div:not(:last-child) {
diff --git a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/GoalsManagement.razor b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/GoalsManagement.razor
index 5053bd9..ed7b331 100644
--- a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/GoalsManagement.razor
+++ b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/GoalsManagement.razor
@@ -54,7 +54,7 @@
     </table>
     @if (Ranges.Count > 0)
     {
-        <div class="pagination">
+        <!--<div class="pagination">
             <div class="left">
                 <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-double-left.svg" /></button>
                 <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-left.svg" /></button>
@@ -63,7 +63,7 @@
                 <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-double-right.svg" /></button>
             </div>
             <div class="right">@T["Show"] <b>@Ranges.Count @T["From"] @Total</b></div>
-        </div>
+        </div>-->
     }
 }
 else
diff --git a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/MyGoalDefinition.razor b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/MyGoalDefinition.razor
index 731d092..7d0fc11 100644
--- a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/MyGoalDefinition.razor
+++ b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Pages/MyGoalDefinition.razor
@@ -35,7 +35,7 @@
     </table>
     @if (Definitions.Count > 0)
     {
-        <div class="pagination">
+        <!--<div class="pagination">
             <div class="left">
                 <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-double-left.svg" /></button>
                 <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-left.svg" /></button>
@@ -44,7 +44,7 @@
                 <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-double-right.svg" /></button>
             </div>
             <div class="right">@T["Show"] <b>@Definitions.Count @T["From"] @Total</b></div>
-        </div>
+        </div>-->
     }
 }
 else
diff --git a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Resources/Pages/GoalRanges.cs-CZ.resx b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Resources/Pages/GoalRanges.cs-CZ.resx
index 1019e0a..338534c 100644
--- a/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Resources/Pages/GoalRanges.cs-CZ.resx
+++ b/src/Modules/Goal/Application/Leuze.Modules.Goal.Application.UI/Resources/Pages/GoalRanges.cs-CZ.resx
@@ -129,6 +129,9 @@
   <data name="End" xml:space="preserve">
     <value>Platnost do</value>
   </data>
+  <data name="Export" xml:space="preserve">
+    <value>Exportovat</value>
+  </data>
   <data name="From" xml:space="preserve">
     <value>z</value>
   </data>
