From 20c7b786e7649e65f6dc60c084ec70d87b54702e Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Fri, 19 Apr 2024 14:38:56 +0200 Subject: [PATCH] Invoices list --- BTCPayApp.UI/Components/InvoiceItem.razor | 48 +++++++++++++ BTCPayApp.UI/Components/InvoiceItem.razor.css | 10 +++ .../Components/Layout/NavbarBottom.razor | 6 ++ BTCPayApp.UI/Components/TruncateCenter.razor | 41 +++++++++++ .../Components/TruncateCenter.razor.css | 55 ++++++++++++++ BTCPayApp.UI/Layout/SimpleLayout.razor.css | 1 + BTCPayApp.UI/Models/Invoice.cs | 11 +++ BTCPayApp.UI/Models/Notification.cs | 10 +++ BTCPayApp.UI/Pages/DashboardPage.razor | 18 +++-- BTCPayApp.UI/Pages/InvoicePage.razor | 45 ++++++++++++ BTCPayApp.UI/Pages/InvoicesPage.razor | 71 +++++++++++++++++++ BTCPayApp.UI/Pages/NotificationsPage.razor | 13 +--- BTCPayApp.UI/Routes.cs | 4 ++ 13 files changed, 315 insertions(+), 18 deletions(-) create mode 100644 BTCPayApp.UI/Components/InvoiceItem.razor create mode 100644 BTCPayApp.UI/Components/InvoiceItem.razor.css create mode 100644 BTCPayApp.UI/Components/TruncateCenter.razor create mode 100644 BTCPayApp.UI/Components/TruncateCenter.razor.css create mode 100644 BTCPayApp.UI/Models/Invoice.cs create mode 100644 BTCPayApp.UI/Models/Notification.cs create mode 100644 BTCPayApp.UI/Pages/InvoicePage.razor create mode 100644 BTCPayApp.UI/Pages/InvoicesPage.razor diff --git a/BTCPayApp.UI/Components/InvoiceItem.razor b/BTCPayApp.UI/Components/InvoiceItem.razor new file mode 100644 index 0000000..630191d --- /dev/null +++ b/BTCPayApp.UI/Components/InvoiceItem.razor @@ -0,0 +1,48 @@ +@using BTCPayApp.UI.Models + + +
+ + + @Amount @Currency +
+ @State +
+
+ + + +@code { + [Parameter] + public string? Id { get; set; } + + [Parameter] + public string? OrderId { get; set; } + + [Parameter] + public string? Status { get; set; } + + [Parameter] + public DateTimeOffset Date { get; set; } + + [Parameter] + public string? Currency { get; set; } + + [Parameter] + public decimal Amount { get; set; } + + [Parameter] + public Invoice Invoice { + set + { + Id = value.Id; + OrderId = value.OrderId; + Status = value.Status; + Date = value.Date; + Currency = value.Currency; + Amount = value.Amount; + } + } + + private string State => Status?.ToLowerInvariant() ?? "unknown"; +} diff --git a/BTCPayApp.UI/Components/InvoiceItem.razor.css b/BTCPayApp.UI/Components/InvoiceItem.razor.css new file mode 100644 index 0000000..8eb418e --- /dev/null +++ b/BTCPayApp.UI/Components/InvoiceItem.razor.css @@ -0,0 +1,10 @@ +.invoice .badge-container { + flex: 0 0 5.125rem; + text-align: right; +} + +@media (max-width: 359px) { + .invoice .badge-container { + flex-grow: 1; + } +} diff --git a/BTCPayApp.UI/Components/Layout/NavbarBottom.razor b/BTCPayApp.UI/Components/Layout/NavbarBottom.razor index add3ad9..7f1e960 100644 --- a/BTCPayApp.UI/Components/Layout/NavbarBottom.razor +++ b/BTCPayApp.UI/Components/Layout/NavbarBottom.razor @@ -15,6 +15,12 @@ Wallet +
  • + + + Invoices + +
  • diff --git a/BTCPayApp.UI/Components/TruncateCenter.razor b/BTCPayApp.UI/Components/TruncateCenter.razor new file mode 100644 index 0000000..e9e735c --- /dev/null +++ b/BTCPayApp.UI/Components/TruncateCenter.razor @@ -0,0 +1,41 @@ + + + @(IsTruncated ? $"{Start}…" : Text) + @if (IsTruncated) + { + @End + } + + @Text + @if (Copy) + { + + } + @if (!string.IsNullOrEmpty(Link)) + { + + + + } + + +@code { + [Parameter, EditorRequired] + public string? Text { get; set; } + + [Parameter] + public string? Link { get; set; } + + [Parameter] + public int Padding { get; set; } = 7; + + [Parameter] + public bool Copy { get; set; } + + private bool IsTruncated => !string.IsNullOrEmpty(Start) && !string.IsNullOrEmpty(End); + + private string? Start => Text?.Length > 2 * Padding ? Text[..Padding] : null; + private string? End => Text?.Length > 2 * Padding ? Text[^Padding..] : null; +} diff --git a/BTCPayApp.UI/Components/TruncateCenter.razor.css b/BTCPayApp.UI/Components/TruncateCenter.razor.css new file mode 100644 index 0000000..e2c02ca --- /dev/null +++ b/BTCPayApp.UI/Components/TruncateCenter.razor.css @@ -0,0 +1,55 @@ +.truncate-center { + display: inline-flex; + align-items: center; + gap: var(--btcpay-space-s); + max-width: 100%; +} + +.truncate-center-end, +.truncate-center-start { + white-space: nowrap; +} + +.truncate-center-id { + font-family: var(--btcpay-font-monospace); + font-size: .875em; +} + +.truncate-center-text { + word-wrap: break-word; + word-break: break-word; +} + +.truncate-center a, +.truncate-center button { + line-height: 1; +} + +.truncate-center-truncated { + text-align: left; + display: inline-flex; + max-width: 100%; +} + +.truncate-center button.btn .icon { + --icon-size: 1rem; +} + +.truncate-center.form-control-plaintext { + padding-right: 3px; +} + +.truncate-center.form-control-plaintext button.btn .icon { + --icon-size: 1.25rem; +} + +.truncate-center-id { + background: var(--btcpay-neutral-100); + border: 1px solid var(--btcpay-neutral-200); + border-radius: var(--btcpay-border-radius-l); + padding: var(--btcpay-space-xs) var(--btcpay-space-s); +} + +.truncate-center-text { + display: none; +} diff --git a/BTCPayApp.UI/Layout/SimpleLayout.razor.css b/BTCPayApp.UI/Layout/SimpleLayout.razor.css index d135683..ac73ff0 100644 --- a/BTCPayApp.UI/Layout/SimpleLayout.razor.css +++ b/BTCPayApp.UI/Layout/SimpleLayout.razor.css @@ -6,6 +6,7 @@ flex-direction: column; gap: 1.5rem; max-width: 24rem; + margin: 0 auto; padding-top: var(--padding-vertical); padding-bottom: 3rem; } diff --git a/BTCPayApp.UI/Models/Invoice.cs b/BTCPayApp.UI/Models/Invoice.cs new file mode 100644 index 0000000..9312a66 --- /dev/null +++ b/BTCPayApp.UI/Models/Invoice.cs @@ -0,0 +1,11 @@ +namespace BTCPayApp.UI.Models; + +public class Invoice +{ + public string? Id { get; set; } + public string? OrderId { get; set; } + public string? Status { get; set; } + public DateTimeOffset Date { get; set; } + public string? Currency { get; set; } + public decimal Amount { get; set; } +} diff --git a/BTCPayApp.UI/Models/Notification.cs b/BTCPayApp.UI/Models/Notification.cs new file mode 100644 index 0000000..b4fccff --- /dev/null +++ b/BTCPayApp.UI/Models/Notification.cs @@ -0,0 +1,10 @@ +namespace BTCPayApp.UI.Models; + +public class Notification +{ + public string? Id { get; set; } + public string? Type { get; set; } + public DateTimeOffset Created { get; set; } + public string? Body { get; set; } + public bool Seen { get; set; } +} diff --git a/BTCPayApp.UI/Pages/DashboardPage.razor b/BTCPayApp.UI/Pages/DashboardPage.razor index 39e6b42..d802e63 100644 --- a/BTCPayApp.UI/Pages/DashboardPage.razor +++ b/BTCPayApp.UI/Pages/DashboardPage.razor @@ -36,7 +36,7 @@ Send - + Receive @@ -77,22 +77,26 @@

    Recent Activity

    • -
      - 3940..CkGJ +
      + $29.13
      - March 21 at 6:15am + + + 177,032 sats
    • -
      - CkGJ..3940 +
      + $29.13
      - March 21 at 6:15am + + + 177,032 sats
      • diff --git a/BTCPayApp.UI/Pages/InvoicePage.razor b/BTCPayApp.UI/Pages/InvoicePage.razor new file mode 100644 index 0000000..f6ed85b --- /dev/null +++ b/BTCPayApp.UI/Pages/InvoicePage.razor @@ -0,0 +1,45 @@ +@attribute [Route(Routes.Invoice)] +@using BTCPayApp.UI.Components.Layout +@using BTCPayApp.UI.Models +@inherits Fluxor.Blazor.Web.Components.FluxorComponent + +@GetTitle() + + + +

      @GetTitle()

      +       +       + +
      +
      + ID: @Model.Invoice.Id +
      +
      + +@code { + [Parameter, EditorRequired] + public string? InvoiceId { get; set; } + + private InvoiceModel Model { get; set; } = new(); + + protected override async Task OnInitializedAsync() + { + Model.Invoice = new Invoice + { + Id = InvoiceId, + OrderId = "CDOy6cOibCWEdsRiZuaHf8dSG", + Date = DateTimeOffset.Now - TimeSpan.FromSeconds(21), + Status = "Settled", + Currency = "USD", + Amount = 61.5m + }; + } + + private class InvoiceModel + { + public Invoice Invoice { get; set; } + } + + private string GetTitle() => $"Invoice {Model.Invoice.Id}"; +} diff --git a/BTCPayApp.UI/Pages/InvoicesPage.razor b/BTCPayApp.UI/Pages/InvoicesPage.razor new file mode 100644 index 0000000..63940ae --- /dev/null +++ b/BTCPayApp.UI/Pages/InvoicesPage.razor @@ -0,0 +1,71 @@ +@attribute [Route(Routes.Invoices)] +@using BTCPayApp.UI.Components.Layout +@using BTCPayApp.UI.Models +@inherits Fluxor.Blazor.Web.Components.FluxorComponent + +Invoices + + + +

      Invoices

      +       +       + +
      + @if (Model.Invoices.Any()) + { +
      + @foreach (var i in Model.Invoices) + { + + } +
      + } + else + { +

      There are no invoices, yet.

      + } +
      + +@code { + private InvoicesModel Model { get; set; } = new(); + + protected override async Task OnInitializedAsync() + { + Model.Invoices = + [ + new Invoice + { + Id = "CDOy6cOibCWEdsRiZuaHf8dSG", + OrderId = "1", + Date = DateTimeOffset.Now - TimeSpan.FromSeconds(21), + Status = "Settled", + Currency = "USD", + Amount = 61.5m + }, + new Invoice + { + Id = "jRY5cKmdYQrS6zu863wEFXtn4", + OrderId = "2", + Date = DateTimeOffset.Now - TimeSpan.FromHours(6), + Status = "Processing", + Currency = "SATS", + Amount = 210000m + }, + new Invoice + { + Id = "RNuhcG8UUGJRYuBGCNuhcG8", + OrderId = "3", + Date = DateTimeOffset.Now - TimeSpan.FromDays(3), + Status = "Expired", + Currency = "USD", + Amount = 6.15m + } + ]; + } + + private class InvoicesModel + { + public Invoice[] Invoices { get; set; } = []; + } +} diff --git a/BTCPayApp.UI/Pages/NotificationsPage.razor b/BTCPayApp.UI/Pages/NotificationsPage.razor index 2d05a98..fd3ea0c 100644 --- a/BTCPayApp.UI/Pages/NotificationsPage.razor +++ b/BTCPayApp.UI/Pages/NotificationsPage.razor @@ -1,6 +1,6 @@ -@attribute [AllowAnonymous] -@attribute [Route(Routes.Notifications)] +@attribute [Route(Routes.Notifications)] @using BTCPayApp.UI.Components.Layout +@using BTCPayApp.UI.Models @inherits Fluxor.Blazor.Web.Components.FluxorComponent Notifications @@ -65,13 +65,4 @@ { public Notification[] Notifications { get; set; } = []; } - - private class Notification - { - public string? Id { get; set; } - public string? Type { get; set; } - public DateTimeOffset Created { get; set; } - public string? Body { get; set; } - public bool Seen { get; set; } - } } diff --git a/BTCPayApp.UI/Routes.cs b/BTCPayApp.UI/Routes.cs index 9a9bd1d..532f03d 100644 --- a/BTCPayApp.UI/Routes.cs +++ b/BTCPayApp.UI/Routes.cs @@ -19,6 +19,10 @@ public static class Routes public const string WalletSetup = "/wallet/setup"; public const string WalletSend = "/wallet/send"; public const string WalletReceive = "/wallet/receive"; + public const string Invoices = "/invoices"; + public const string Invoice = "/invoices/{InvoiceId}"; public const string PointOfSale = "/pos"; public const string Logout = "/logout"; + + public static string InvoicePath(string invoiceId) => Invoice.Replace("{InvoiceId}", invoiceId); }