More work on #273

PlexRequests.UI/Content/issues.js

@@ -0,0 +1,227 @@
+Handlebars.registerHelper('if_eq', function (a, b, opts) {
+    if (a == b)
+        return !opts ? null : opts.fn(this);
+    else
+        return !opts ? null : opts.inverse(this);
+});
+
+var issueSource = $("#issue-template").html();
+var issueTemplate = Handlebars.compile(issueSource);
+
+var base = $('#baseUrl').text();
+
+
+
+initLoad();
+
+
+
+// Report Issue
+$(document).on("click", ".dropdownIssue", function (e) {
+    var issue = $(this).attr("issue-select");
+    var id = e.target.id;
+    // Other issue so the modal is opening
+    if (issue == 4) {
+        return;
+    }
+    e.preventDefault();
+
+    var $form = $('#report' + id);
+    var data = $form.serialize();
+    data = data + "&issue=" + issue;
+
+    $.ajax({
+        type: $form.prop('method'),
+        url: $form.prop('action'),
+        data: data,
+        dataType: "json",
+        success: function (response) {
+            if (checkJsonResponse(response)) {
+                generateNotify("Success! Added Issue.", "success");
+            }
+        },
+        error: function (e) {
+            console.log(e);
+            generateNotify("Something went wrong!", "danger");
+        }
+    });
+});
+
+// Modal click
+$(".theSaveButton").click(function (e) {
+    var comment = $("#commentArea").val();
+    e.preventDefault();
+
+    var $form = $("#commentForm");
+    var data = $form.serialize();
+    data = data + "&issue=" + 4 + "&comment=" + comment;
+
+    $.ajax({
+        type: $form.prop("method"),
+        url: $form.prop("action"),
+        data: data,
+        dataType: "json",
+        success: function (response) {
+            if (checkJsonResponse(response)) {
+                generateNotify("Success! Added Issue.", "success");
+                $("#myModal").modal("hide");
+            }
+        },
+        error: function (e) {
+            console.log(e);
+            generateNotify("Something went wrong!", "danger");
+        }
+    });
+});
+
+// Note Modal click
+$(".theNoteSaveButton").click(function (e) {
+    var comment = $("#noteArea").val();
+    e.preventDefault();
+
+    var $form = $("#noteForm");
+    var data = $form.serialize();
+
+
+    $.ajax({
+        type: $form.prop("method"),
+        url: $form.prop("action"),
+        data: data,
+        dataType: "json",
+        success: function (response) {
+            if (checkJsonResponse(response)) {
+                generateNotify("Success! Added Note.", "success");
+                $("#myModal").modal("hide");
+                $('#adminNotesArea' + e.target.value).html("<div>Note from Admin: " + comment + "</div>");
+            }
+        },
+        error: function (e) {
+            console.log(e);
+            generateNotify("Something went wrong!", "danger");
+        }
+    });
+});
+
+// Update the modal
+$('#myModal').on('show.bs.modal', function (event) {
+    var button = $(event.relatedTarget); // Button that triggered the modal
+    var id = button.data('identifier'); // Extract info from data-* attributes
+
+    var modal = $(this);
+    modal.find('.theSaveButton').val(id); // Add ID to the button
+    var requestField = modal.find('input');
+    requestField.val(id);  // Add ID to the hidden field
+});
+
+// Update the note modal
+$('#noteModal').on('show.bs.modal', function (event) {
+    var button = $(event.relatedTarget); // Button that triggered the modal
+    var id = button.data('identifier'); // Extract info from data-* attributes
+
+    var modal = $(this);
+    modal.find('.theNoteSaveButton').val(id); // Add ID to the button
+    var requestField = modal.find('.noteId');
+    requestField.val(id);  // Add ID to the hidden field
+});
+
+// Delete
+$(document).on("click", ".delete", function (e) {
+    e.preventDefault();
+    var buttonId = e.target.id;
+    var $form = $('#delete' + buttonId);
+
+    $.ajax({
+        type: $form.prop('method'),
+        url: $form.prop('action'),
+        data: $form.serialize(),
+        dataType: "json",
+        success: function (response) {
+
+            if (checkJsonResponse(response)) {
+                generateNotify("Success! Request Deleted.", "success");
+
+                $("#" + buttonId + "Template").slideUp();
+            }
+        },
+        error: function (e) {
+            console.log(e);
+            generateNotify("Something went wrong!", "danger");
+        }
+    });
+
+});
+
+// Clear issues
+$(document).on("click", ".clear", function (e) {
+    e.preventDefault();
+    var buttonId = e.target.id;
+    var $form = $('#clear' + buttonId);
+
+    $.ajax({
+        type: $form.prop('method'),
+        url: $form.prop('action'),
+        data: $form.serialize(),
+        dataType: "json",
+        success: function (response) {
+
+            if (checkJsonResponse(response)) {
+                generateNotify("Success! Issues Cleared.", "info");
+                $('#issueArea' + buttonId).html("<div>Issue: None</div>");
+            }
+        },
+        error: function (e) {
+            console.log(e);
+            generateNotify("Something went wrong!", "danger");
+        }
+    });
+
+});
+
+
+function initLoad() {
+    loadPendingIssues();
+
+}
+
+
+function loadPendingIssues() {
+    $issues = $('#pendingIssues');
+    var url = createBaseUrl(base, "issues/pending");
+    var linkUrl = createBaseUrl(base, "issues/");
+    $.ajax({
+        type: "get",
+        url: url,
+        dataType: "json",
+        success: function (response) {
+            if (response.length > 0) {
+                response.forEach(function(result) {
+                    var context = buildIssueContext(result);
+                    var html = issueTemplate(context);
+                    $issues.append(html);
+
+                    $("#" +result.id + "link").attr("href", linkUrl + result.id);
+                });
+            };
+        },
+        error: function (e) {
+            console.log(e);
+            generateNotify("Could not load Pending issues", "danger");
+        }
+    });
+
+}
+
+
+// Builds the issue context.
+function buildIssueContext(result) {
+    var context = {
+        id: result.id,
+        requestId: result.requestId,
+        type: result.type,
+        title: result.title,
+        count: result.count
+    };
+
+    return context;
+}
+

PlexRequests.UI/Helpers/BaseUrlHelper.cs

@@ -104,6 +104,18 @@ namespace PlexRequests.UI.Helpers
             return helper.Raw(sb.ToString());
         }
 
+        public static IHtmlString LoadIssueAssets(this HtmlHelpers helper)
+        {
+            var sb = new StringBuilder();
+            var assetLocation = GetBaseUrl();
+
+            var content = GetContentUrl(assetLocation);
+
+            sb.AppendLine($"<script src=\"{content}/Content/issues.js\" type=\"text/javascript\"></script>");
+
+            return helper.Raw(sb.ToString());
+        }
+
         public static IHtmlString LoadTableAssets(this HtmlHelpers helper)
         {
             var sb = new StringBuilder();

PlexRequests.UI/Models/IssuesViewMOdel.cs

@@ -0,0 +1,41 @@
+#region Copyright
+// /************************************************************************
+//    Copyright (c) 2016 Jamie Rees
+//    File: IssuesViewModel.cs
+//    Created By: Jamie Rees
+//   
+//    Permission is hereby granted, free of charge, to any person obtaining
+//    a copy of this software and associated documentation files (the
+//    "Software"), to deal in the Software without restriction, including
+//    without limitation the rights to use, copy, modify, merge, publish,
+//    distribute, sublicense, and/or sell copies of the Software, and to
+//    permit persons to whom the Software is furnished to do so, subject to
+//    the following conditions:
+//   
+//    The above copyright notice and this permission notice shall be
+//    included in all copies or substantial portions of the Software.
+//   
+//    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+//    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+//    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+//    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+//    LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+//    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+//    WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//  ************************************************************************/
+#endregion
+
+using PlexRequests.Store;
+
+namespace PlexRequests.UI.Models
+{
+    public class IssuesViewModel
+    {
+        public int Id { get; set; }
+        public int RequestId { get; set; }
+        public string Title { get; set; }
+        public int Count { get; set; }
+        public string Type { get; set; }
+
+    }
+}

PlexRequests.UI/Modules/IssuesModule.cs

@@ -2,8 +2,9 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
-
+using System.Web.UI.WebControls;
 using Nancy;
+using Nancy.Extensions;
 using Nancy.Responses.Negotiation;
 using Nancy.Security;
 
@@ -14,6 +15,7 @@ using PlexRequests.Core.Models;
 using PlexRequests.Core.SettingModels;
 using PlexRequests.Helpers;
 using PlexRequests.Store;
+using PlexRequests.UI.Helpers;
 using PlexRequests.UI.Models;
 
 namespace PlexRequests.UI.Modules
@@ -31,9 +33,9 @@ namespace PlexRequests.UI.Modules
 
             Post["/issue", true] = async (x, ct) => await ReportIssue((int)Request.Form.requestId, (IssueState)(int)Request.Form.issue, null);
 
-            Get["/inprogress", true] = async (x, ct) => await GetInProgressIssues(IssueStatus.InProgressIssue);
-            Get["/pending", true] = async (x, ct) => await GetInProgressIssues(IssueStatus.PendingIssue);
-            Get["/resolved", true] = async (x, ct) => await GetInProgressIssues(IssueStatus.ResolvedIssue);
+            Get["/inprogress", true] = async (x, ct) => await GetIssues(IssueStatus.InProgressIssue);
+            Get["/pending", true] = async (x, ct) => await GetIssues(IssueStatus.PendingIssue);
+            Get["/resolved", true] = async (x, ct) => await GetIssues(IssueStatus.ResolvedIssue);
 
             Post["/remove", true] = async (x, ct) => await RemoveIssue((int)Request.Form.issueId);
 
@@ -51,11 +53,17 @@ namespace PlexRequests.UI.Modules
             return View["Index"];
         }
 
-        private async Task<Response> GetInProgressIssues(IssueStatus status)
+        private async Task<Response> GetIssues(IssueStatus status)
         {
             var issues = await IssuesService.GetAllAsync();
 
-            return Response.AsJson(issues.Where(x => x.IssueStatus == status));
+            var issuesModels = issues as IssuesModel[] ?? issues.Where(x => x.IssueStatus == status).ToArray();
+            var model = issuesModels.Select(i => new IssuesViewModel
+            {
+                Title = i.Title, Type = i.Type.ToString().CamelCaseToWords(), Count = i.Issues.Count, Id = i.Id, RequestId = i.RequestId
+            }).ToList();
+
+            return Response.AsJson(model);
         }
 
         public async Task<Response> IssueCount()

PlexRequests.UI/PlexRequests.UI.csproj

@@ -176,6 +176,7 @@
     <Compile Include="ModelDataProviders\UserUpdateViewModelDataProvider.cs" />
     <Compile Include="ModelDataProviders\RequestedModelDataProvider.cs" />
     <Compile Include="Models\DatatablesModel.cs" />
+    <Compile Include="Models\IssuesViewMOdel.cs" />
     <Compile Include="Models\JsonUpdateAvailableModel.cs" />
     <Compile Include="Models\MovieSearchType.cs" />
     <Compile Include="Models\QualityModel.cs" />
@@ -242,6 +243,9 @@
     <Compile Include="Startup.cs" />
     <Compile Include="Validators\PlexRequestsValidator.cs" />
     <Compile Include="Modules\UserManagementModule.cs" />
+    <Content Include="Content\issues.js">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="Content\swagger\backbone-min.js">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>

PlexRequests.UI/Views/Issues/Details.cshtml

@@ -11,5 +11,4 @@
     <div>User Reported: @issue.UserReported</div>
     <div>User Note: @issue.UserNote</div>
     <div>Admin Note: @issue.AdminNote</div>
-    <div>Status: @issue.IssueStatus</div>
 }

PlexRequests.UI/Views/Issues/Index.cshtml

@@ -1 +1,42 @@
-
+@using PlexRequests.UI.Helpers
+<h1>Issues</h1>
+<h4>Below you can see yours and all your current issues and their state.</h4>
+<br />
+<br />
+<h3>Pending Issues</h3><hr />
+<div id="pendingIssues"></div>
+
+<script id="issue-template" type="text/x-handlebars-template">
+    <div>
+        <div class="row">
+            <div class="col-md-3">
+                <div id="title">{{title}}</div>
+            </div>
+            <div class="col-md-2">
+                <div id="type">{{type}}</div>
+            </div>
+            <div class="col-md-1">
+                Issues: {{count}}
+            </div>
+
+            <div class="col-md-2">
+                {{#if requestId}}
+                <div>Request {{requestId}}</div>
+                {{/if}}
+            </div>
+            <div class="col-sm-3 col-sm-push-3">
+                <a href="" id="{{id}}link" class="btn btn-sm btn-info-outline approve"><i class="fa fa-info"></i> Details</a>
+            </div>
+        </div>
+
+
+
+
+
+ 
+
+    </div>
+    <hr />
+</script>
+
+@Html.LoadIssueAssets()