aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2025-12-17 22:14:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use razor component to encapsulate UI logic

Browse Source
This commit is contained in:
nicolas.dorier
2020-08-12 16:02:13 +09:00
parent 10d6e44a38
commit 5c9d0fd40a
13 changed files with 196 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
BTCPayServer/Views/Shared/Components/NotificationsDropdown/Default.cshtml → BTCPayServer/Components/NotificationsDropdown/Default.cshtml
View File

@@ -1,4 +1,5 @@
@model BTCPayServer.Services.Notifications.NotificationSummaryViewModel @inject LinkGenerator linkGenerator
@model BTCPayServer.Components.NotificationsDropdown.NotificationSummaryViewModel
@if (Model.UnseenCount > 0) @if (Model.UnseenCount > 0)
{ {
@@ -31,3 +32,36 @@ else
</a> </a>
</li> </li>
} }
<script type="text/javascript">
var supportsWebSockets = 'WebSocket' in window && window.WebSocket.CLOSING === 2;
if (supportsWebSockets) {
var loc = window.location, ws_uri;
if (loc.protocol === "https:") {
ws_uri = "wss:";
} else {
ws_uri = "ws:";
}
ws_uri += "//" + loc.host;
ws_uri += "@linkGenerator.GetPathByAction("SubscribeUpdates", "Notifications")";
var newDataEndpoint = "@linkGenerator.GetPathByAction("GetNotificationDropdownUI", "Notifications")";
try {
socket = new WebSocket(ws_uri);
socket.onmessage = function (e) {
$.get(newDataEndpoint, function(data){
$("#notifications-nav-item").replaceWith($(data));
});
};
socket.onerror = function (e) {
console.error("Error while connecting to websocket for notifications (callback)", e);
};
}
catch (e) {
console.error("Error while connecting to websocket for notifications", e);
}
}
</script>

24
BTCPayServer/Components/NotificationsDropdown/NoticationsDropdown.cs Normal file
View File

@@ -0,0 +1,24 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BTCPayServer.Services.Notifications;
using Microsoft.AspNetCore.Mvc;
namespace BTCPayServer.Components.NotificationsDropdown
{
public class NotificationsDropdown : ViewComponent
{
private readonly NotificationManager _notificationManager;
public NotificationsDropdown(NotificationManager notificationManager)
{
_notificationManager = notificationManager;
}
public async Task<IViewComponentResult> InvokeAsync()
{
return View(await _notificationManager.GetSummaryNotifications(UserClaimsPrincipal));
}
}
}

14
BTCPayServer/Components/NotificationsDropdown/NotificationSummaryViewModel.cs Normal file
View File

@@ -0,0 +1,14 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BTCPayServer.Models.NotificationViewModels;
namespace BTCPayServer.Components.NotificationsDropdown
{
public class NotificationSummaryViewModel
{
public int UnseenCount { get; set; }
public List<NotificationViewModel> Last5 { get; set; }
}
}

0
BTCPayServer/Views/Shared/_TableFooterPager.cshtml → BTCPayServer/Components/Pager/Default.cshtml
View File

20
BTCPayServer/Components/Pager/Pager.cs Normal file
View File

@@ -0,0 +1,20 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BTCPayServer.Models;
using Microsoft.AspNetCore.Mvc;
namespace BTCPayServer.Components
{
public class Pager : ViewComponent
{
public Pager()
{
}
public IViewComponentResult Invoke(BasePagingViewModel viewModel)
{
return View(viewModel);
}
}
}

16
BTCPayServer/Controllers/NotificationsController.cs
View File

@@ -15,22 +15,6 @@ using Microsoft.AspNetCore.Mvc;
namespace BTCPayServer.Controllers namespace BTCPayServer.Controllers
{ {
public class NotificationsDropdown : ViewComponent
{
private readonly NotificationManager _notificationManager;
public NotificationsDropdown(NotificationManager notificationManager)
{
_notificationManager = notificationManager;
}
public async Task<IViewComponentResult> InvokeAsync(int noOfEmployee)
{
return View(await _notificationManager.GetSummaryNotifications(UserClaimsPrincipal));
}
}
[BitpayAPIConstraint(false)] [BitpayAPIConstraint(false)]
[Authorize(AuthenticationSchemes = AuthenticationSchemes.Cookie)] [Authorize(AuthenticationSchemes = AuthenticationSchemes.Cookie)]
[Route("[controller]/[action]")] [Route("[controller]/[action]")]

6
BTCPayServer/Hosting/Startup.cs
View File

@@ -81,6 +81,12 @@ namespace BTCPayServer.Hosting
return builtInFactory(context); return builtInFactory(context);
}; };
}) })
.AddRazorOptions(o =>
{
// /Components/{View Component Name}/{View Name}.cshtml
o.ViewLocationFormats.Add("/{0}.cshtml");
o.PageViewLocationFormats.Add("/{0}.cshtml");
})
.AddNewtonsoftJson() .AddNewtonsoftJson()
#if RAZOR_RUNTIME_COMPILE #if RAZOR_RUNTIME_COMPILE
.AddRazorRuntimeCompilation() .AddRazorRuntimeCompilation()

7
BTCPayServer/Services/Notifications/NotificationManager.cs
View File

@@ -3,6 +3,7 @@ using System.Collections.Generic;
using System.Linq; using System.Linq;
using System.Security.Claims; using System.Security.Claims;
using System.Threading.Tasks; using System.Threading.Tasks;
using BTCPayServer.Components.NotificationsDropdown;
using BTCPayServer.Data; using BTCPayServer.Data;
using BTCPayServer.Models.NotificationViewModels; using BTCPayServer.Models.NotificationViewModels;
using Microsoft.AspNetCore.Identity; using Microsoft.AspNetCore.Identity;
@@ -124,10 +125,4 @@ namespace BTCPayServer.Services.Notifications
throw new InvalidOperationException($"No INotificationHandler found for {blobType.Name}"); throw new InvalidOperationException($"No INotificationHandler found for {blobType.Name}");
} }
} }
public class NotificationSummaryViewModel
{
public int UnseenCount { get; set; }
public List<NotificationViewModel> Last5 { get; set; }
}
} }

184
BTCPayServer/Views/Invoice/ListInvoices.cshtml
View File

@@ -5,16 +5,17 @@
@section HeadScripts { @section HeadScripts {
<script src="~/modal/btcpay.js" asp-append-version="true"></script> <script src="~/modal/btcpay.js" asp-append-version="true"></script>
} }
@Html.HiddenFor(a => a.Count) @Html.HiddenFor(a => a.Count)
<section> <section>
<div class="container"> <div class="container">
@if (TempData.HasStatusMessage()) @if (TempData.HasStatusMessage())
{ {
<div class="row"> <div class="row">
<div class="col-lg-12 text-center"> <div class="col-lg-12 text-center">
<partial name="_StatusMessage" /> <partial name="_StatusMessage" />
</div>
</div> </div>
</div>
} }
<div class="row"> <div class="row">
@@ -49,7 +50,7 @@
<input type="hidden" asp-for="Count" /> <input type="hidden" asp-for="Count" />
<div class="input-group "> <div class="input-group ">
<input asp-for="TimezoneOffset" type="hidden" /> <input asp-for="TimezoneOffset" type="hidden" />
<input asp-for="SearchTerm" class="form-control"/> <input asp-for="SearchTerm" class="form-control" />
<div class="input-group-append"> <div class="input-group-append">
<button type="submit" class="btn btn-primary" title="Search invoice"> <button type="submit" class="btn btn-primary" title="Search invoice">
<span class="fa fa-search"></span> Search <span class="fa fa-search"></span> Search
@@ -91,7 +92,7 @@
<div> <div>
<a asp-action="CreateInvoice" class="btn btn-primary mb-1" role="button" id="CreateNewInvoice"><span class="fa fa-plus"></span> Create a new invoice</a> <a asp-action="CreateInvoice" class="btn btn-primary mb-1" role="button" id="CreateNewInvoice"><span class="fa fa-plus"></span> Create a new invoice</a>
<span > <span>
<button class="btn btn-primary dropdown-toggle mb-1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-primary dropdown-toggle mb-1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions Actions
</button> </button>
@@ -99,7 +100,7 @@
<button type="submit" asp-action="MassAction" class="dropdown-item" name="command" value="archive"><i class="fa fa-archive"></i> Archive</button> <button type="submit" asp-action="MassAction" class="dropdown-item" name="command" value="archive"><i class="fa fa-archive"></i> Archive</button>
</div> </div>
</span> </span>
<span> <span>
<a class="btn btn-primary dropdown-toggle mb-1" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a class="btn btn-primary dropdown-toggle mb-1" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Export Export
@@ -114,7 +115,7 @@
</span> </span>
</div> </div>
</div> </div>
<br/> <br />
@* Custom Range Modal *@ @* Custom Range Modal *@
<div class="modal fade" id="customRangeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal fade" id="customRangeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 550px;"> <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 550px;">
@@ -131,8 +132,8 @@
<div class="col-sm-9"> <div class="col-sm-9">
<div class="input-group"> <div class="input-group">
<input id="dtpStartDate" class="form-control flatdtpicker" type="datetime-local" <input id="dtpStartDate" class="form-control flatdtpicker" type="datetime-local"
data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }' data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }'
placeholder="Start Date" /> placeholder="Start Date" />
<div class="input-group-append"> <div class="input-group-append">
<button type="button" class="btn btn-primary input-group-clear" title="Clear"> <button type="button" class="btn btn-primary input-group-clear" title="Clear">
<span class=" fa fa-times"></span> <span class=" fa fa-times"></span>
@@ -146,8 +147,8 @@
<div class="col-sm-9"> <div class="col-sm-9">
<div class="input-group"> <div class="input-group">
<input id="dtpEndDate" class="form-control flatdtpicker" type="datetime-local" <input id="dtpEndDate" class="form-control flatdtpicker" type="datetime-local"
data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }' data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }'
placeholder="End Date" /> placeholder="End Date" />
<div class="input-group-append"> <div class="input-group-append">
<button type="button" class="btn btn-primary input-group-clear" title="Clear"> <button type="button" class="btn btn-primary input-group-clear" title="Clear">
<span class=" fa fa-times"></span> <span class=" fa fa-times"></span>
@@ -194,8 +195,7 @@
@* Custom Range Modal *@ @* Custom Range Modal *@
<script type="text/javascript"> <script type="text/javascript">
function selectAll(e) function selectAll(e) {
{
var items = document.getElementsByClassName("selector"); var items = document.getElementsByClassName("selector");
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
items[i].checked = e.checked; items[i].checked = e.checked;
@@ -210,7 +210,7 @@
<th class="only-for-js"> <th class="only-for-js">
@if (Model.Total > 0) @if (Model.Total > 0)
{ {
<input id="selectAllCheckbox" type="checkbox" onclick="selectAll(this);" /> <input id="selectAllCheckbox" type="checkbox" onclick="selectAll(this);" />
} }
</th> </th>
<th style="min-width: 90px;" class="col-md-auto"> <th style="min-width: 90px;" class="col-md-auto">
@@ -229,91 +229,91 @@
<tbody> <tbody>
@foreach (var invoice in Model.Invoices) @foreach (var invoice in Model.Invoices)
{ {
<tr> <tr>
<td class="only-for-js"> <td class="only-for-js">
<input name="selectedItems" type="checkbox" class="selector" value="@invoice.InvoiceId" /> <input name="selectedItems" type="checkbox" class="selector" value="@invoice.InvoiceId" />
</td> </td>
<td> <td>
<span class="switchTimeFormat" data-switch="@invoice.Date.ToTimeAgo()"> <span class="switchTimeFormat" data-switch="@invoice.Date.ToTimeAgo()">
@invoice.Date.ToBrowserDate() @invoice.Date.ToBrowserDate()
</span>
</td>
<td style="max-width: 180px;">
@if (invoice.RedirectUrl != string.Empty)
{
<a href="@invoice.RedirectUrl" class="wraptext200">@invoice.OrderId</a>
}
else
{
<span>@invoice.OrderId</span>
}
</td>
<td>@invoice.InvoiceId</td>
<td>
@if(invoice.Details.Archived)
{
<span class="badge badge-warning">archived</span>
}
@if (invoice.CanMarkStatus)
{
<div id="pavpill_@invoice.InvoiceId">
<span class="dropdown-toggle dropdown-toggle-split pavpill pavpil-@invoice.Status.ToString().ToLower()"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@invoice.StatusString
</span> </span>
</td> <div class="dropdown-menu pull-right">
<td style="max-width: 180px;"> @if (invoice.CanMarkInvalid)
@if (invoice.RedirectUrl != string.Empty)
{
<a href="@invoice.RedirectUrl" class="wraptext200">@invoice.OrderId</a>
}
else
{
<span>@invoice.OrderId</span>
}
</td>
<td>@invoice.InvoiceId</td>
<td>
@if(invoice.Details.Archived)
{
<span class="badge badge-warning" >archived</span>
}
@if (invoice.CanMarkStatus)
{
<div id="pavpill_@invoice.InvoiceId">
<span class="dropdown-toggle dropdown-toggle-split pavpill pavpil-@invoice.Status.ToString().ToLower()"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@invoice.StatusString
</span>
<div class="dropdown-menu pull-right">
@if (invoice.CanMarkInvalid)
{ {
<button class="dropdown-item small cursorPointer" onclick="changeInvoiceState(this, '@invoice.InvoiceId', 'invalid')"> <button class="dropdown-item small cursorPointer" onclick="changeInvoiceState(this, '@invoice.InvoiceId', 'invalid')">
Mark as invalid <span class="fa fa-times"></span> Mark as invalid <span class="fa fa-times"></span>
</button> </button>
} }
@if (invoice.CanMarkComplete) @if (invoice.CanMarkComplete)
{ {
<button class="dropdown-item small cursorPointer" onclick="changeInvoiceState(this, '@invoice.InvoiceId', 'complete')"> <button class="dropdown-item small cursorPointer" onclick="changeInvoiceState(this, '@invoice.InvoiceId', 'complete')">
Mark as complete <span class="fa fa-check-circle"></span> Mark as complete <span class="fa fa-check-circle"></span>
</button> </button>
} }
</div>
</div>
}
else
{
<span class="pavpill pavpil-@invoice.Status.ToString().ToLower()">@invoice.StatusString</span>
}
</td>
<td style="text-align:right">@invoice.AmountCurrency</td>
<td style="text-align:right">
@if (invoice.ShowCheckout)
{
<span>
<a asp-action="Checkout" class="invoice-checkout-link" id="invoice-checkout-@invoice.InvoiceId" asp-route-invoiceId="@invoice.InvoiceId">Checkout</a>
<a href="javascript:btcpay.showInvoice('@invoice.InvoiceId')">[^]</a>
@if (!invoice.CanMarkStatus)
{
<span>-</span>
}
</span>
}
&nbsp;
<a asp-action="Invoice" class="invoice-details-link" asp-route-invoiceId="@invoice.InvoiceId">Details</a>
<a href="javascript:void(0);" onclick="detailsToggle(this, '@invoice.InvoiceId')">
<span title="Invoice Details Toggle" class="fa fa-1x fa-angle-double-down"></span>
</a>
</td>
</tr>
<tr id="invoice_@invoice.InvoiceId" style="display:none;">
<td colspan="99" class="border-top-0">
<div style="margin-left: 15px; margin-bottom: 0;">
@* Leaving this as partial because it abstracts complexity of Invoice Payments *@
<partial name="ListInvoicesPaymentsPartial" model="(invoice.Details, true)" />
</div> </div>
</td> </div>
</tr> }
else
{
<span class="pavpill pavpil-@invoice.Status.ToString().ToLower()">@invoice.StatusString</span>
}
</td>
<td style="text-align:right">@invoice.AmountCurrency</td>
<td style="text-align:right">
@if (invoice.ShowCheckout)
{
<span>
<a asp-action="Checkout" class="invoice-checkout-link" id="invoice-checkout-@invoice.InvoiceId" asp-route-invoiceId="@invoice.InvoiceId">Checkout</a>
<a href="javascript:btcpay.showInvoice('@invoice.InvoiceId')">[^]</a>
@if (!invoice.CanMarkStatus)
{
<span>-</span>
}
</span>
}
&nbsp;
<a asp-action="Invoice" class="invoice-details-link" asp-route-invoiceId="@invoice.InvoiceId">Details</a>
<a href="javascript:void(0);" onclick="detailsToggle(this, '@invoice.InvoiceId')">
<span title="Invoice Details Toggle" class="fa fa-1x fa-angle-double-down"></span>
</a>
</td>
</tr>
<tr id="invoice_@invoice.InvoiceId" style="display:none;">
<td colspan="99" class="border-top-0">
<div style="margin-left: 15px; margin-bottom: 0;">
@* Leaving this as partial because it abstracts complexity of Invoice Payments *@
<partial name="ListInvoicesPaymentsPartial" model="(invoice.Details, true)" />
</div>
</td>
</tr>
} }
</tbody> </tbody>
</table> </table>
<partial name="_TableFooterPager" /> <vc:pager view-model="Model"></vc:pager>
</div> </div>
</div> </div>
</form> </form>
@@ -324,7 +324,7 @@
$(".export-link, a.dropdown-item").each(function () { $(".export-link, a.dropdown-item").each(function () {
this.href = this.href.replace("timezoneoffset=0", "timezoneoffset=" + timezoneOffset); this.href = this.href.replace("timezoneoffset=0", "timezoneoffset=" + timezoneOffset);
}); });
}); });
function getDateStringWithOffset(hoursDiff) { function getDateStringWithOffset(hoursDiff) {

2
BTCPayServer/Views/PaymentRequest/GetPaymentRequests.cshtml
View File

@@ -91,7 +91,7 @@
</tbody> </tbody>
</table> </table>
<partial name="_TableFooterPager" /> <vc:pager view-model="Model"></vc:pager>
</div> </div>
</div> </div>
</div> </div>

37
BTCPayServer/Views/Shared/LayoutPartials/NotificationsNavItem.cshtml
View File

@@ -1,37 +0,0 @@
@inject LinkGenerator linkGenerator
<div></div>
@await Component.InvokeAsync("NotificationsDropdown")
<script type="text/javascript">
var supportsWebSockets = 'WebSocket' in window && window.WebSocket.CLOSING === 2;
if (supportsWebSockets) {
var loc = window.location, ws_uri;
if (loc.protocol === "https:") {
ws_uri = "wss:";
} else {
ws_uri = "ws:";
}
ws_uri += "//" + loc.host;
ws_uri += "@linkGenerator.GetPathByAction("SubscribeUpdates", "Notifications")";
var newDataEndpoint = "@linkGenerator.GetPathByAction("GetNotificationDropdownUI", "Notifications")";
try {
socket = new WebSocket(ws_uri);
socket.onmessage = function (e) {
$.get(newDataEndpoint, function(data){
$("#notifications-nav-item").replaceWith($(data));
});
};
socket.onerror = function (e) {
console.error("Error while connecting to websocket for notifications (callback)", e);
};
}
catch (e) {
console.error("Error while connecting to websocket for notifications", e);
}
}
</script>

5
BTCPayServer/Views/Shared/_Layout.cshtml
View File

@@ -1,4 +1,4 @@
@inject SignInManager<ApplicationUser> SignInManager @inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager @inject UserManager<ApplicationUser> UserManager
@inject RoleManager<IdentityRole> RoleManager @inject RoleManager<IdentityRole> RoleManager
@inject BTCPayServer.Services.BTCPayServerEnvironment env @inject BTCPayServer.Services.BTCPayServerEnvironment env
@@ -77,8 +77,7 @@
<li class="nav-item"> <li class="nav-item">
<a asp-area="" asp-controller="Manage" asp-action="Index" title="My settings" class="nav-link js-scroll-trigger" id="MySettings"><i class="fa fa-user"></i></a> <a asp-area="" asp-controller="Manage" asp-action="Index" title="My settings" class="nav-link js-scroll-trigger" id="MySettings"><i class="fa fa-user"></i></a>
</li> </li>
<vc:notifications-dropdown></vc:notifications-dropdown>
<partial name="LayoutPartials/NotificationsNavItem" />
<li class="nav-item"> <li class="nav-item">
<a asp-area="" asp-controller="Account" asp- asp-action="Logout" title="Logout" class="nav-link js-scroll-trigger" id="Logout"><i class="fa fa-sign-out"></i></a> <a asp-area="" asp-controller="Account" asp- asp-action="Logout" title="Logout" class="nav-link js-scroll-trigger" id="Logout"><i class="fa fa-sign-out"></i></a>

1
BTCPayServer/Views/_ViewImports.cshtml → BTCPayServer/_ViewImports.cshtml
View File

@@ -10,3 +10,4 @@
@using Microsoft.AspNetCore.Routing; @using Microsoft.AspNetCore.Routing;
@inject BTCPayServer.Services.Safe Safe @inject BTCPayServer.Services.Safe Safe
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, BTCPayServer