Merge pull request #497 from Sitecore/feat/char-limits

Vanishing Fields Fix + Character Limits on TextAreas + Sentiment

headapps/MvpSite/Directory.Packages.props

@@ -24,7 +24,7 @@
     <PackageVersion Include="Microsoft.AspNetCore.Session" Version="2.2.0" />
     <PackageVersion Include="System.IdentityModel.Tokens.Jwt" Version="7.3.1" />
     <PackageVersion Include="Okta.AspNetCore" Version="4.5.0" />
-    <PackageVersion Include="Mvp.Selections.Client" Version="4.14.0" />
+    <PackageVersion Include="Mvp.Selections.Client" Version="4.16.0" />
     <PackageVersion Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.22.0" />
     <PackageVersion Include="Markdig" Version="0.37.0" />
   </ItemGroup>

headapps/MvpSite/MvpSite.Rendering/Models/Apply/ApplicationFormModel.cs

@@ -1,10 +1,13 @@
-using Mvp.Selections.Domain;
+using System.ComponentModel.DataAnnotations;
+using Mvp.Selections.Domain;
 using Sitecore.AspNetCore.SDK.LayoutService.Client.Response.Model.Fields;
 
 namespace MvpSite.Rendering.Models.Apply;
 
 public class ApplicationFormModel : BaseModel
 {
+    public const int LargeTextFieldLength = 2000;
+
     public Application? CurrentApplication { get; set; }
 
     public Selection? CurrentSelection { get; set; }
@@ -63,10 +66,12 @@ public class ApplicationFormModel : BaseModel
 
     public TextField? EligibilityLabel { get; set; }
 
+    [StringLength(LargeTextFieldLength)]
     public string? Eligibility { get; set; }
 
     public TextField? ObjectivesLabel { get; set; }
 
+    [StringLength(LargeTextFieldLength)]
     public string? Objectives { get; set; }
 
     public TextField? MentorsLabel { get; set; }
@@ -83,6 +88,7 @@ public class ApplicationFormModel : BaseModel
 
     public TextField? ContributionDescriptionLabel { get; set; }
 
+    [StringLength(LargeTextFieldLength)]
     public string? ContributionDescription { get; set; }
 
     public TextField? ContributionLinkLabel { get; set; }

headapps/MvpSite/MvpSite.Rendering/ViewComponents/Apply/ApplicationFormViewComponent.cs

@@ -544,13 +544,10 @@ private async Task ExecuteConfirmationStep(ApplicationFormModel model)
         {
             model.NextStep = ApplicationStep.Confirmation;
         }
-        else if (model.IsNavigation.HasValue && !model.IsNavigation.Value && model.UnderstandsReviewConsent && model is { UnderstandsProgramAgreement: true, IsComplete: true })
+        else if (model.IsNavigation.HasValue && !model.IsNavigation.Value && model.UnderstandsReviewConsent && model is { UnderstandsProgramAgreement: true, IsComplete: true, CurrentApplication: not null })
         {
-            Application updateApplication = new(model.CurrentApplication!.Id)
-            {
-                Status = ApplicationStatus.Submitted
-            };
-            Response<Application> applicationResponse = await Client.UpdateApplicationAsync(updateApplication);
+            model.CurrentApplication.Status = ApplicationStatus.Submitted;
+            Response<Application> applicationResponse = await Client.UpdateApplicationAsync(model.CurrentApplication);
             if (applicationResponse is { StatusCode: HttpStatusCode.OK, Result: not null })
             {
                 model.CurrentApplication = applicationResponse.Result;

headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/AdminScoreCardDetail/Default.cshtml

@@ -40,7 +40,14 @@
                 </div>
             </div>
             <div class="card-footer">
-                Final score: @totalScore (@((int)Math.Round(totalScore / percentageCalculationTotal * 100, 0))%)
+                @{ int percentScore = (int)Math.Round(totalScore / percentageCalculationTotal * 100, 0); }
+                Review score: <span style="color: @ScoreCardsModel.Color(percentScore)">@totalScore (@percentScore%)</span><br />
+                @if (review.Sentiment.HasValue)
+                {
+                    <text>
+                        Sentiment: <span class="badge @(review.Sentiment == ReviewSentiment.Yes ? "badge-success" : review.Sentiment == ReviewSentiment.Maybe ? "badge-warning" : review.Sentiment == ReviewSentiment.No ? "badge-danger" : "badge-dark")">@review.Sentiment</span>
+                    </text>
+                }
             </div>
         </div>
         <br/>

headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/AdminScoreCards/Default.cshtml

@@ -58,7 +58,7 @@
                     <td>
                         @if (!string.IsNullOrWhiteSpace(card.Applicant?.ImageUri?.ToString()))
                         {
-                            <img src="@card.Applicant.ImageUri" alt="@card.Applicant.Name" />
+                            <img src="@card.Applicant.ImageUri" alt="@card.Applicant.Name" width="80" />
                         }
                         else
                         {

headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/ApplyApplicationForm/ContributionsStep.cshtml

@@ -1,4 +1,5 @@
 @using Mvp.Selections.Domain
+@using MvpSite.Rendering.Models.Apply
 @model MvpSite.Rendering.Models.Apply.ApplicationFormModel
 
 <div class="mvp-fs-applyapplicationform col-12">
@@ -56,6 +57,7 @@
                         @(Model.IsEditing ? Html.Raw(Model.ContributionDescriptionLabel?.EditableMarkup) : Model.ContributionDescriptionLabel?.Value)
                     </label>
                     <textarea asp-for="ContributionDescription" rows="3" class="form-control"></textarea>
+                    <small class="form-text text-muted text-right textareacounter">@(Model.ContributionDescription?.Length.ToString() ?? "0") / @ApplicationFormModel.LargeTextFieldLength</small>
                 </div>
 
                 <div class="form-group col-sm-12 col-md-6">

headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/ApplyApplicationForm/ObjectivesStep.cshtml

@@ -1,4 +1,5 @@
-@model MvpSite.Rendering.Models.Apply.ApplicationFormModel
+@using MvpSite.Rendering.Models.Apply
+@model MvpSite.Rendering.Models.Apply.ApplicationFormModel
 
 <div class="mvp-fs-applyapplicationform col-12">
     <partial name="~/Views/Shared/Components/ApplyApplicationForm/_Progress.cshtml" />
@@ -22,13 +23,15 @@
                 </label>
                 <span class="text-danger">*</span>
                 <textarea asp-for="Eligibility" rows="3" class="form-control" required></textarea>
+                <small class="form-text text-muted text-right textareacounter">@(Model.Eligibility?.Length.ToString() ?? "0") / @ApplicationFormModel.LargeTextFieldLength</small>
             </div>
             <div class="form-group">
                 <label asp-for="Objectives">
                     @(Model.IsEditing ? Html.Raw(Model.ObjectivesLabel?.EditableMarkup) : Model.ObjectivesLabel?.Value)
                 </label>
                 <span class="text-danger">*</span>
                 <textarea asp-for="Objectives" rows="3" class="form-control" required></textarea>
+                <small class="form-text text-muted text-right textareacounter">@(Model.Objectives?.Length.ToString() ?? "0") / @ApplicationFormModel.LargeTextFieldLength</small>
             </div>
             <div class="form-group">
                 <label asp-for="Mentors">

headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/MainNav.cshtml

@@ -14,27 +14,28 @@
                 <ul class="navbar-nav">
                     @foreach (MainNavItems link in Model.Items ?? [])
                     {
-                        if ((link.Fields?.IncludeInMenu?.Value ?? false) && 
-                            (!(link.Fields.RequiresAuthentication?.Value ?? false) || (link.Fields.RequiresAuthentication.Value && (User.Identity?.IsAuthenticated ?? false))))
+                        if ((link.Fields?.IncludeInMenu?.Value ?? false) &&
+                        (!(link.Fields.RequiresAuthentication?.Value ?? false) || (link.Fields.RequiresAuthentication.Value && (User.Identity?.IsAuthenticated ?? false))))
                         {
                             <li class="nav-item mx-2">
-                                 <a class="nav-link" href="@link.Url" asp-for="@link">@link.Fields.MenuTitle?.Value </a>
+                                <a class="nav-link" href="@link.Url" asp-for="@link">@link.Fields.MenuTitle?.Value </a>
                             </li>
                         }
                     }
-              <li class="nav-item mx-2">
-                                 <a href="#otherSites" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="otherSites" class="nav-link" >our sites <span class="icon icon-chevron-down "></span></a>
-                                 <ul class="sub-menu collapse" id="otherSites">
-                                 <li>   <a class="nav-item nav-link" target="_blank" href="https://developers.sitecore.com/">For Downloads <span class="icon icon-external"></span></a> </li>
-                <li><a class="nav-item nav-link" target="_blank" href="https://sitecore.stackexchange.com/">Stack Exchange <span class="icon icon-external"></span></a></li>
-               <li> <a class="nav-item nav-link" target="_blank" href="#https://community.sitecore.net/">Sitecore Community <span class="icon icon-external"></span></a></li>
-                <li><a class="nav-item nav-link" target="_blank" href="https://www.youtube.com/c/discoversitecore">Discover Sitecore <span class="icon icon-external"></span></a></li>
-                <li><a class="nav-item nav-link" target="_blank" href="#https://doc.sitecore.com/">Documentation <span class="icon icon-external"></span></a></li>
-              <li>  <a class="nav-item nav-link" target="_blank" href="https://sitecore.chat/">Sitecore Chat/Slack <span class="icon icon-external"></span></a></li>
-                                 </ul>
-                            </li>
+                    <li class="nav-item mx-2">
+                        <a href="#otherSites" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="otherSites" class="nav-link">Our sites <span class="icon icon-chevron-down"></span></a>
+                        <ul class="sub-menu collapse" id="otherSites">
+                            <li><a class="nav-item nav-link" target="_blank" href="https://community.sitecore.net/">Sitecore Community Portal <span class="icon icon-external"></span></a></li>
+                            <li><a class="nav-item nav-link" target="_blank" href="https://sitecore.chat/">Sitecore Community Chat <span class="icon icon-external"></span></a></li>
+                            <li><a class="nav-item nav-link" target="_blank" href="https://sitecore.stackexchange.com/">Sitecore StackExchange <span class="icon icon-external"></span></a></li>
+                            <li><a class="nav-item nav-link" target="_blank" href="https://www.youtube.com/c/discoversitecore">Discover Sitecore <span class="icon icon-external"></span></a></li>
+                            <li><a class="nav-item nav-link" target="_blank" href="https://developers.sitecore.com/">Developer Portal <span class="icon icon-external"></span></a> </li>
+                            <li><a class="nav-item nav-link" target="_blank" href="https://doc.sitecore.com/">Documentation <span class="icon icon-external"></span></a></li>
+                        </ul>
+                    </li>
                 </ul>
             </div>
+            <sc-placeholder name="nav-signin"></sc-placeholder>
         </nav>
     </div>
 </div>

headapps/MvpSite/MvpSite.Rendering/Views/Shared/_Layout.cshtml

@@ -67,6 +67,6 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
     <script src="https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/js/accordion.js"></script>
-    <script src="/js/mvp-site.es5.min.js?v=1.10"></script>
+    <script src="/js/mvp-site.es5.min.js?v=1.11"></script>
 </body>
 </html>

headapps/MvpSite/MvpSite.Rendering/wwwroot/js/mvp-site.es5.js

@@ -97,5 +97,18 @@ $(document).ready(function () {
             timelineEventsHeightRecalculation($timeline, $window.width() < 576);
         });
     }
+
+    var $textareacounters = $(".textareacounter");
+    if ($textareacounters.length > 0) {
+        $textareacounters.each(function (index, item) {
+            var $counter = $(item);
+            var $textarea = $counter.siblings("textarea");
+            var maxLength = $textarea.attr("maxlength");
+
+            $textarea.on("input", function () {
+                $counter.text($textarea.val().length + " / " + maxLength);
+            });
+        });
+    }
 });
 

headapps/MvpSite/MvpSite.Rendering/wwwroot/js/mvp-site.js

@@ -96,4 +96,18 @@ $(document).ready(function () {
             timelineEventsHeightRecalculation($timeline, $window.width() < 576);
         });
     }
+
+
+    const $textareacounters = $(".textareacounter");
+    if ($textareacounters.length > 0) {
+        $textareacounters.each(function (index, item) {
+            const $counter = $(item);
+            const $textarea = $counter.siblings("textarea");
+            const maxLength = $textarea.attr("maxlength");
+
+            $textarea.on("input", function () {
+                $counter.text($textarea.val().length + " / " + maxLength);
+            });
+        });
+    }
 });

headapps/MvpSite/MvpSite.Rendering/wwwroot/sass/components/selections/_form.scss

@@ -40,4 +40,8 @@
     width: 1.5em;
     height: 1.5em;
   }
+
+  .textareacounter {
+    margin-top:-25px;
+  }
 }