Changing invoice state and updating display from js

BTCPayServer/Controllers/InvoiceController.UI.cs

@@ -673,61 +673,46 @@ namespace BTCPayServer.Controllers
             }
         }
 
-        [HttpGet]
-        [Route("invoices/{invoiceId}/changestate/{newState}")]
-        [Authorize(AuthenticationSchemes = Policies.CookieAuthentication)]
-        [BitpayAPIConstraint(false)]
-        public IActionResult ChangeInvoiceState(string invoiceId, string newState)
-        {
-            if (newState == "invalid")
-            {
-                return View("Confirm", new ConfirmModel()
-                {
-                    Action = "Make invoice invalid",
-                    Title = "Change invoice state",
-                    Description = $"You will transition the state of this invoice to \"invalid\", do you want to continue?",
-                });
-            }
-            else if (newState == "complete")
-            {
-                return View("Confirm", new ConfirmModel()
-                {
-                    Action = "Make invoice complete",
-                    Title = "Change invoice state",
-                    Description = $"You will transition the state of this invoice to \"complete\", do you want to continue?",
-                    ButtonClass = "btn-primary"
-                });
-            }
-            else
-                return NotFound();
-        }
-
         [HttpPost]
         [Route("invoices/{invoiceId}/changestate/{newState}")]
         [Authorize(AuthenticationSchemes = Policies.CookieAuthentication)]
         [BitpayAPIConstraint(false)]
-        public async Task<IActionResult> ChangeInvoiceStateConfirm(string invoiceId, string newState)
+        public async Task<IActionResult> ChangeInvoiceState(string invoiceId, string newState)
         {
             var invoice = (await _InvoiceRepository.GetInvoices(new InvoiceQuery()
             {
                 InvoiceId = invoiceId,
                 UserId = GetUserId()
             })).FirstOrDefault();
+
+            var model = new InvoiceStateChangeModel();
             if (invoice == null)
-                return NotFound();
+            {
+                model.NotFound = true;
+                return NotFound(model);
+            }
+
+
             if (newState == "invalid")
             {
                 await _InvoiceRepository.UpdatePaidInvoiceToInvalid(invoiceId);
                 _EventAggregator.Publish(new InvoiceEvent(invoice, 1008, InvoiceEvent.MarkedInvalid));
-                StatusMessage = "Invoice marked invalid";
+                model.StatusString = new InvoiceState("invalid", "marked").ToString();
             }
             else if (newState == "complete")
             {
                 await _InvoiceRepository.UpdatePaidInvoiceToComplete(invoiceId);
                 _EventAggregator.Publish(new InvoiceEvent(invoice, 2008, InvoiceEvent.MarkedCompleted));
-                StatusMessage = "Invoice marked complete";
+                model.StatusString = new InvoiceState("complete", "marked").ToString();
             }
-            return RedirectToAction(nameof(ListInvoices));
+
+            return Json(model);
+        }
+
+        public class InvoiceStateChangeModel
+        {
+            public bool NotFound { get; set; }
+            public string StatusString { get; set; }
         }
 
         [TempData]

BTCPayServer/Views/Invoice/ListInvoices.cshtml

@@ -91,7 +91,7 @@
                         </th>
                         <th style="max-width: 180px;">OrderId</th>
                         <th>InvoiceId</th>
-                        <th>Status</th>
+                        <th style="min-width: 140px;">Status</th>
                         <th style="text-align:right">Amount</th>
                         <th style="text-align:right">Actions</th>
                     </tr>
@@ -119,6 +119,7 @@
                             <td>
                                 @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
@@ -126,17 +127,18 @@
                                         <div class="dropdown-menu pull-right">
                                             @if (invoice.CanMarkInvalid)
                                             {
-                                            <form method="get" asp-action="ChangeInvoiceState" asp-route-invoiceId="@invoice.InvoiceId" asp-route-newState="invalid">
+                                                <button class="dropdown-item small cursorPointer" onclick="changeInvoiceState(this, '@invoice.InvoiceId', 'invalid')">
-                                                <button class="dropdown-item small">Mark as invalid <span class="fa fa-times"></span></button>
+                                                    Mark as invalid <span class="fa fa-times"></span>
-                                            </form>
+                                                </button>
                                             }
                                             @if (invoice.CanMarkComplete)
                                             {
-                                            <form method="get" asp-action="ChangeInvoiceState" asp-route-invoiceId="@invoice.InvoiceId" asp-route-newState="complete">
+                                                <button class="dropdown-item small cursorPointer" onclick="changeInvoiceState(this, '@invoice.InvoiceId', 'complete')">
-                                                <button class="dropdown-item small">Mark as complete <span class="fa fa-check-circle"></span></button>
+                                                    Mark as complete <span class="fa fa-check-circle"></span>
-                                            </form>
+                                                </button>
                                             }
                                         </div>
+                                    </div>
                                 }
                                 else
                                 {
@@ -251,6 +253,22 @@
             });
             return false;
         }
+
+        function changeInvoiceState(sender, invoiceId, newState) {
+            var pavpill = $("#pavpill_" + invoiceId);
+            var originalHtml = pavpill.html();
+            pavpill.html("<span class='fa fa-bitcoin fa-spin' style='margin-left:16px;'></span>");
+
+            $.post("invoices/" + invoiceId + "/changestate/" + newState)
+                .done(function (data) {
+                    var statusHtml = "<span class='pavpill pavpil-" + newState + "'>" + data.statusString + "</span>";
+                    pavpill.html(statusHtml);
+                })
+                .fail(function (data) {
+                    pavpill.html(originalHtml.replace("dropdown-menu pull-right show", "dropdown-menu pull-right"));
+                    alert("Invoice state update failed");
+                });
+        }
     </script>
 
     <style type="text/css">
@@ -283,6 +301,10 @@
                 cursor: pointer;
             }
 
+        .dropdown-item {
+            cursor: pointer;
+        }
+
         .pavpil-new {
             background: #d4edda;
             color: #000;