Added link component

dyatlov-a · Oct 3, 2024 · f7687db · f7687db
1 parent 5310fa4
commit f7687db
Show file tree

Hide file tree

Showing 29 changed files with 319 additions and 250 deletions.
diff --git a/src/Inc.TeamAssistant.Gateway/wwwroot/langs/en.json b/src/Inc.TeamAssistant.Gateway/wwwroot/langs/en.json
@@ -271,7 +271,8 @@
   "Constructor_StageSetSettings": "Settings",
   "Constructor_StageComplete": "Confirmation",
   "Constructor_FormSectionTokenTitle": "Set bot token",
-  "Constructor_FormSectionTokenHelpTemplate": "Please move to {0} and create bot",
+  "Constructor_FormSectionTokenHelpBegin": "Please move to",
+  "Constructor_FormSectionTokenHelpEnd": "and create bot",
   "Constructor_FormSectionTokenFieldTokenLabel": "Bot token",
   "Constructor_FormSectionTokenFieldUserNameLabel": "Bot username",
   "Constructor_MoveNextTitle": "Next",

diff --git a/src/Inc.TeamAssistant.Gateway/wwwroot/langs/ru.json b/src/Inc.TeamAssistant.Gateway/wwwroot/langs/ru.json
@@ -271,7 +271,8 @@
   "Constructor_StageSetSettings": "Настройка",
   "Constructor_StageComplete": "Подтверждение",
   "Constructor_FormSectionTokenTitle": "Укажите токен бота",
-  "Constructor_FormSectionTokenHelpTemplate": "Перейдите к {0} и создайте бота",
+  "Constructor_FormSectionTokenHelpBegin": "Перейдите к",
+  "Constructor_FormSectionTokenHelpEnd": "и создайте бота",
   "Constructor_FormSectionTokenFieldTokenLabel": "Токен доступа для бота",
   "Constructor_FormSectionTokenFieldUserNameLabel": "Имя бота",
   "Constructor_MoveNextTitle": "Далее",

diff --git a/src/Inc.TeamAssistant.Stories/Components/Button.stories.razor b/src/Inc.TeamAssistant.Stories/Components/Button.stories.razor
@@ -4,44 +4,44 @@
     <ArgType For="c => c.ButtonMode" Control="ControlType.Select" />
     <ArgType For="c => c.ButtonType" Control="ControlType.Select" />
     <Story Name="Default" Layout="typeof(DarkLayout)">
-        <Arguments>
-            <Arg For="c => c.Content" Value="ToRenderFragment(_text)" />
-        </Arguments>
         <Template>
-            <Button @attributes="context.Args"></Button>
+            <Button @attributes="context.Args">
+                <Content>@_text</Content>
+            </Button>
         </Template>
     </Story>
     <Story Name="Small" Layout="typeof(DarkLayout)">
         <Arguments>
-            <Arg For="c => c.Content" Value="ToRenderFragment(_text)" />
             <Arg For="c => c.ButtonMode" Value="ButtonMode.Small" />
         </Arguments>
         <Template>
-            <Button @attributes="context.Args"></Button>
+            <Button @attributes="context.Args">
+                <Content>@_text</Content>
+            </Button>
         </Template>
     </Story>
     <Story Name="Dark" Layout="typeof(LightLayout)">
         <Arguments>
-            <Arg For="c => c.Content" Value="ToRenderFragment(_text)" />
             <Arg For="c => c.IsDark" Value="true" />
         </Arguments>
         <Template>
-            <Button @attributes="context.Args"></Button>
+            <Button @attributes="context.Args">
+                <Content>@_text</Content>
+            </Button>
         </Template>
     </Story>
     <Story Name="Disabled" Layout="typeof(DarkLayout)">
         <Arguments>
-            <Arg For="c => c.Content" Value="ToRenderFragment(_text)" />
             <Arg For="c => c.IsDisabled" Value="true" />
         </Arguments>
         <Template>
-            <Button @attributes="context.Args"></Button>
+            <Button @attributes="context.Args">
+                <Content>@_text</Content>
+            </Button>
         </Template>
     </Story>
 </Stories>
 
 @code {
-    private readonly string _text = "Button"; 
-
-    private RenderFragment ToRenderFragment(string value) => b => b.AddContent(0, value);
+    private readonly string _text = "Button";
 }
diff --git a/src/Inc.TeamAssistant.Stories/Components/RouterLink.stories.razor b/src/Inc.TeamAssistant.Stories/Components/RouterLink.stories.razor
@@ -0,0 +1,25 @@
+@attribute [Stories("Components/RouterLink")]
+
+<Stories TComponent="RouterLink">
+    <Story Name="Default" Layout="typeof(DarkLayout)">
+        <Template>
+            <RouterLink Href="#" @attributes="context.Args">
+                <Content>@_text</Content>
+            </RouterLink>
+        </Template>
+    </Story>
+    <Story Name="Dark" Layout="typeof(LightLayout)">
+        <Arguments>
+            <Arg For="c => c.IsDark" Value="true" />
+        </Arguments>
+        <Template>
+            <RouterLink Href="#" @attributes="context.Args">
+                <Content>@_text</Content>
+            </RouterLink>
+        </Template>
+    </Story>
+</Stories>
+
+@code {
+    private readonly string _text = "Link";
+}
diff --git a/src/Inc.TeamAssistant.WebUI/Components/Button.razor b/src/Inc.TeamAssistant.WebUI/Components/Button.razor
@@ -1,37 +1,28 @@
 @if (ButtonType == ButtonType.Tab)
 {
     <a href="@Link" target="_blank" class="button @CssClass @ModeCssClass">
-        @if (Content is not null)
-        {
-            @Content
-        }
+        @Content
     </a>
 }
 else if (IsDisabled)
 {
     <button type="@ButtonTypeAsString" class="button @CssClass @ModeCssClass" disabled="disabled">
-        @if (Content is not null)
-        {
-            @Content
-        }
+        @Content
     </button>
 }
 else
 {
     <button type="@ButtonTypeAsString" @onclick="EmitOnClick" class="button @CssClass @ModeCssClass">
-        @if (Content is not null)
-        {
-            @Content
-        }
+        @Content
     </button>
 }
 
 @code {
     /// <summary>
     /// Html or text content of the button.
     /// </summary>
-    [Parameter]
-    public RenderFragment? Content { get; set; }
+    [Parameter, EditorRequired]
+    public RenderFragment Content { get; set; } = default!;
 
     /// <summary>
     /// On click event.

diff --git a/src/Inc.TeamAssistant.WebUI/Components/RouterLink.razor b/src/Inc.TeamAssistant.WebUI/Components/RouterLink.razor
@@ -0,0 +1,52 @@
+@if (string.IsNullOrWhiteSpace(Href))
+{
+    <a href="#" class="link @CssClass" @onclick="EmitOnClick" @onclick:preventDefault="true">
+        @Content
+    </a>
+}
+else
+{
+    <a href="@Href" class="link @CssClass" target="@Target">
+        @Content
+    </a>
+}
+
+@code {
+    /// <summary>
+    /// Html or text content of the button.
+    /// </summary>
+    [Parameter, EditorRequired]
+    public RenderFragment Content { get; set; } = default!;
+
+    /// <summary>
+    /// Target for navigation.
+    /// </summary>
+    [Parameter]
+    public string Target { get; set; } = RouterTarget.Self;
+
+    /// <summary>
+    /// Link to navigate.
+    /// </summary>
+    [Parameter]
+    public string Href { get; set; } = default!;
+
+    /// <summary>
+    /// On click event.
+    /// </summary>
+    [Parameter]
+    public EventCallback OnClick { get; set; }
+
+    /// <summary>
+    /// Flag for set dark or light theme.
+    /// </summary>
+    [Parameter]
+    public bool IsDark { get; set; }
+
+    private string CssClass => IsDark ? "link_dark" : "link_light";
+
+    private async Task EmitOnClick()
+    {
+        if (!OnClick.Equals(default(EventCallback)))
+            await OnClick.InvokeAsync();
+    }
+}
diff --git a/src/Inc.TeamAssistant.WebUI/Components/RouterLink.razor.css b/src/Inc.TeamAssistant.WebUI/Components/RouterLink.razor.css
@@ -0,0 +1,12 @@
+.link {
+    font-size: 1rem;
+}
+.link:hover {
+    text-decoration: underline;
+}
+.link_light {
+    color: #dfdfdf;
+}
+.link_dark {
+    color: #000;
+}
diff --git a/src/Inc.TeamAssistant.WebUI/Components/RouterTarget.cs b/src/Inc.TeamAssistant.WebUI/Components/RouterTarget.cs
@@ -0,0 +1,9 @@
+namespace Inc.TeamAssistant.WebUI.Components;
+
+public static class RouterTarget
+{
+    public static readonly string Blank = "_blank";
+    public static readonly string Self = "_self";
+    public static readonly string Parent = "_parent";
+    public static readonly string Top = "_top";
+}
diff --git a/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionHistory.razor b/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionHistory.razor
@@ -10,9 +10,11 @@
         <div class="history__body">
             @foreach (var item in _items)
             {
-                <a href="@CreateMoveToHistoryLink(item)" class="link link_dark history__item">
-                    @item.AssessmentDate.ToString("dd-MM-yyyy") - @item.StoriesCount @Resources[Messages.GUI_Tasks]
-                </a>
+                <RouterLink Href="@CreateMoveToHistoryLink(item)" IsDark="true">
+                    <Content>
+                        @item.AssessmentDate.ToString("dd-MM-yyyy") - @item.StoriesCount @Resources[Messages.GUI_Tasks]
+                    </Content>
+                </RouterLink>
             }
         </div>
     </div>

diff --git a/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionHistory.razor.css b/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionHistory.razor.css
@@ -8,7 +8,7 @@
 .history__body {
     margin-top: .5rem;
 }
-.history__item {
+::deep .link {
     display: block;
     line-height: 1.5rem;
 }
diff --git a/...Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionHistoryPage.razor.css b/...Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionHistoryPage.razor.css
@@ -11,7 +11,7 @@
     background-color: #dfdfdf;
     color: #000;
 }
-.assessment-history-content:nth-child(2n) ::deep .story__link {
+.assessment-history-content:nth-child(2n) ::deep .link {
     color: #000;
 }
 .assessment-history-switcher {

diff --git a/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/Breadcrumbs.razor b/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/Breadcrumbs.razor
@@ -2,7 +2,9 @@
     @foreach(var item in Items)
     {
         <li class="breadcrumbs__item">
-            <a href="@item.Value" class="link link_dark">@item.Title</a>
+            <RouterLink Href="@item.Value" IsDark="true">
+                <Content>@item.Title</Content>
+            </RouterLink>
         </li>
     }
 </ol>

diff --git a/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/StoryDetails.razor b/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/StoryDetails.razor
@@ -6,7 +6,9 @@
             @foreach (var link in Story.Links)
             {
                 <li class="story__item">
-                    <a class="link story__link" href="@link" target="_blank">@link</a>
+                    <RouterLink Href="@link" Target="@RouterTarget.Blank">
+                        <Content>@link</Content>
+                    </RouterLink>
                 </li>
             }
         </ul>

diff --git a/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/StoryDetails.razor.css b/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/StoryDetails.razor.css
@@ -8,7 +8,4 @@
 }
 .story__item {
     line-height: 2rem;
-}
-.story__link {
-    color: #dfdfdf;
 }
diff --git a/src/Inc.TeamAssistant.WebUI/Features/Constructor/BotSelector.razor b/src/Inc.TeamAssistant.WebUI/Features/Constructor/BotSelector.razor
@@ -24,9 +24,9 @@
             {
                 <BotCard Icon="@typeof(BotIcon)" Name="@bot.Name">
                     <Content>
-                        <a href="@CreateMoveToDashboardLink(bot)" class="link link_dark">
-                            @Resources[Messages.Dashboard_MoveToDashboard]
-                        </a>
+                        <RouterLink Href="@CreateMoveToDashboardLink(bot)" IsDark="true">
+                            <Content>@Resources[Messages.Dashboard_MoveToDashboard]</Content>
+                        </RouterLink>
                     </Content>
                     <Buttons>
                         <Button OnClick="() => MoveToEdit(bot.Id)">

diff --git a/src/Inc.TeamAssistant.WebUI/Features/Constructor/Stages/Stage1/CheckBot.razor b/src/Inc.TeamAssistant.WebUI/Features/Constructor/Stages/Stage1/CheckBot.razor
@@ -15,9 +15,11 @@
         <Content>
             <FormSection Title="@Resources[Messages.Constructor_FormSectionTokenTitle]">
                 <HelpContent>
-                    @((MarkupString)string.Format(
-                        Resources[Messages.Constructor_FormSectionTokenHelpTemplate],
-                        "<a href=\"https://telegram.me/BotFather\" target=\"_blank\" class=\"link link_dark\">BotFather</a>"))
+                    @Resources[Messages.Constructor_FormSectionTokenHelpBegin] <RouterLink
+                            Href="https://telegram.me/BotFather" IsDark="true"
+                            Target="@RouterTarget.Blank">
+                        <Content>BotFather</Content>
+                    </RouterLink> @Resources[Messages.Constructor_FormSectionTokenHelpEnd]
                 </HelpContent>
                 <Content>
                     <FormFieldSet