Skip to content

Commit

Permalink
UI updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@dennisreimann
dennisreimann committed Sep 23, 2022
1 parent 3a12dce commit 6c4fbde
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 159 deletions.
4 changes: 3 additions & 1 deletion BTCPayServer/Forms/ModifyForm.cs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
using BTCPayServer.Abstractions.Form;
using System.ComponentModel;

namespace BTCPayServer.Forms;

public class ModifyForm
{
public string Name { get; set; }

[DisplayName("Form configuration (JSON)")]
public string FormConfig { get; set; }
}
8 changes: 5 additions & 3 deletions BTCPayServer/Forms/UIFormsController.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
using BTCPayServer.Services.Stores;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

namespace BTCPayServer.Forms;
Expand Down Expand Up @@ -109,10 +110,11 @@ public async Task<IActionResult> Modify(string storeId, string id)
{
var query = new FormDataService.FormQuery { Stores = new[] { storeId }, Ids = new[] { id } };
var form = (await _formDataService.GetForms(query)).FirstOrDefault();
if (form is null) return NotFound();

return form is null
? NotFound()
: View(new ModifyForm { Name = form.Name, FormConfig = form.Config });
var json = JsonConvert.DeserializeObject(form.Config);
var config = JsonConvert.SerializeObject(json, Formatting.Indented);
return View(new ModifyForm { Name = form.Name, FormConfig = config });
}

[HttpPost("~/stores/{storeId}/forms/modify/{id?}")]
Expand Down
35 changes: 11 additions & 24 deletions BTCPayServer/Views/UIForms/FormsList.cshtml
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,23 @@

@using Microsoft.AspNetCore.Mvc.TagHelpers
@using BTCPayServer.Abstractions.Models
@model List<BTCPayServer.Data.Data.FormData>
@{
Layout = "../Shared/_NavLayout.cshtml";
ViewData["NavPartialName"] = "../UIStores/_Nav";
ViewData.SetActivePage(StoreNavPages.Forms, $"Forms");
ViewData.SetActivePage(StoreNavPages.Forms, "Forms");
var storeId = Context.GetCurrentStoreId();
}

<div class="sticky-header-setup"></div>
<div class="sticky-header d-sm-flex align-items-center justify-content-between">
<h2 class="mb-0">
@ViewData["Title"]
<small>
<a href="https://docs.btcpayserver.org/Forms/" class="ms-1" target="_blank" rel="noreferrer noopener">
<span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
</a>
</small>
</h2>
<a asp-action="Create" asp-route-storeId="@storeId" class="btn btn-primary mt-3 mt-sm-0" role="button" id="CreateForm">
<span class="fa fa-plus"></span>
Create Form
</a>
</div>

<partial name="_StatusMessage" />

<div class="row">
<div class="col-lg-12">
@if (Model.Count > 0)
<div class="col-xxl-constrain col-xl-10">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="mb-0">@ViewData["Title"]</h3>
<a asp-action="Create" asp-route-storeId="@storeId" class="btn btn-primary mt-3 mt-sm-0" role="button" id="CreateForm">
<span class="fa fa-plus"></span>
Create Form
</a>
</div>
@if (Model.Any())
{
<table class="table table-hover table-responsive-md">
<thead>
Expand All @@ -54,12 +42,11 @@
}
</tbody>
</table>

}
else
{
<p class="text-secondary mt-3">
There are no forms matching your criteria.
There are no forms yet.
</p>
}
</div>
Expand Down
256 changes: 125 additions & 131 deletions BTCPayServer/Views/UIForms/Modify.cshtml
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
@using BTCPayServer.Views.Stores
@model BTCPayServer.Forms.ModifyForm

@{

var formid = this.Context.GetRouteValue("id");
var isNew = formid is null;
var formId = Context.GetRouteValue("id");
var isNew = formId is null;
Layout = "../Shared/_NavLayout.cshtml";
ViewData["NavPartialName"] = "../UIStores/_Nav";
ViewData.SetActivePage(StoreNavPages.Forms, $"{(isNew ? "Create" : "Edit")} Form", Model.Name);
Expand All @@ -14,149 +12,145 @@

@section PageFootContent {
<partial name="_ValidationScriptsPartial"/>

<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".template").forEach(value => value.addEventListener("click", ()=>{document.getElementById("FormConfig").value = value.dataset.template }))
});
document.addEventListener("DOMContentLoaded", () => {
const $config = document.getElementById("FormConfig");
delegate("click", "[data-form-template]", e => {
const { formTemplate: id } = e.target.dataset
const $template = document.getElementById(`form-template-${id}`)
$config.value = $template.innerHTML.trim()
})
})
</script>
}

<form method="post" asp-action="Modify" asp-route-id="@formid" asp-route-storeId="@storeId" >
<div class="sticky-header-setup"></div>
<div class="sticky-header d-sm-flex align-items-center justify-content-between">
<h2 class="mb-0">@ViewData["Title"]</h2>
<div class="d-flex gap-3 mt-3 mt-sm-0">
<button type="submit" class="btn btn-primary order-sm-1" id="SaveButton">Save</button>
@if(!isNew)
{

<a class="btn btn-secondary" asp-action="ViewForm" asp-route-id="@formid" id="ViewForm">View</a>

}
</div>
</div>

<partial name="_StatusMessage"/>
<template id="form-template-email">
{
"Fields": [
{
"Name": "buyerEmail",
"Type": "email",
"Label": "Enter your email",
"Value": null,
"HelpText": null,
"Required": true,
"OriginalValue": null,
"ValidationErrors": []
}
]
}
</template>
<template id="form-template-address">
{
"Fields": [
{
"HelpText": null,
"Label": "Enter your email",
"Name": "buyerEmail",
"OriginalValue": null,
"Required": true,
"Type": "email",
"Value": null
},
{
"HelpText": null,
"Label": "Name",
"Name": "buyerName",
"OriginalValue": null,
"Required": true,
"Type": "text",
"Value": null
},
{
"HelpText": null,
"Label": "Address Line 1",
"Name": "buyerAddress1",
"OriginalValue": null,
"Required": true,
"Type": "text",
"Value": null
},
{
"HelpText": null,
"Label": "Address Line 2",
"Name": "buyerAddress2",
"OriginalValue": null,
"Required": false,
"Type": "text",
"Value": null
},
{
"HelpText": null,
"Label": "City",
"Name": "buyerCity",
"OriginalValue": null,
"Required": true,
"Type": "text",
"Value": null
},
{
"HelpText": null,
"Label": "Postcode",
"Name": "buyerZip",
"OriginalValue": null,
"Required": false,
"Type": "text",
"Value": null
},
{
"HelpText": null,
"Label": "State",
"Name": "buyerState",
"OriginalValue": null,
"Required": false,
"Type": "text",
"Value": null
},
{
"HelpText": null,
"Label": "Country",
"Name": "buyerCountry",
"OriginalValue": null,
"Required": true,
"Type": "text",
"Value": null
}
]
}
</template>

<form method="post" asp-action="Modify" asp-route-id="@formId" asp-route-storeId="@storeId">
<div class="row">
<div class="col-xl-8 col-xxl-constrain">
<div class="col-xl-10 col-xxl-constrain">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="mb-0">@ViewData["Title"]</h3>
<div class="d-flex gap-3 mt-3 mt-sm-0">
<button type="submit" class="btn btn-primary order-sm-1" id="SaveButton">Save</button>
@if (!isNew)
{
<a class="btn btn-secondary" asp-action="ViewForm" asp-route-id="@formId" id="ViewForm">View</a>
}
</div>
</div>
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="form-label" data-required></label>
<input asp-for="Name" class="form-control" required/>
<span asp-validation-for="Name" class="text-danger"></span>
</div>

</div>
</div>



<div class="row">
<div class="col-xl-10 col-xxl-constrain">
<div class="form-group">
<label asp-for="FormConfig" class="form-label" data-required></label>
<textarea asp-for="FormConfig" class="form-control" rows="10" cols="40" ></textarea>
<div class="d-flex align-items-center justify-content-between gap-3">
<label asp-for="FormConfig" class="form-label" data-required></label>
<div class="d-flex align-items-center gap-2 mb-2">
<span>Templates:</span>
<button type="button" class="btn btn-link p-0" data-form-template="email">Email</button>
<button type="button" class="btn btn-link p-0" data-form-template="address">Address</button>
</div>
</div>
<textarea asp-for="FormConfig" class="form-control" rows="10" cols="21"></textarea>
<span asp-validation-for="FormConfig" class="text-danger"></span>
<button type="button" class="btn btn-link template" data-template="{
&#x22;Fields&#x22;: [
{
&#x22;Name&#x22;: &#x22;buyerEmail&#x22;,
&#x22;Type&#x22;: &#x22;email&#x22;,
&#x22;Label&#x22;: &#x22;Enter your email&#x22;,
&#x22;Value&#x22;: null,
&#x22;HelpText&#x22;: null,
&#x22;Required&#x22;: true,
&#x22;OriginalValue&#x22;: null,
&#x22;ValidationErrors&#x22;: []
}
],
&#x22;TopMessages&#x22;: []
}" >Email template</button>
<button type="button" class="btn btn-link template" data-template="{
&quot;Fields&quot;: [{
&quot;HelpText&quot;: null,
&quot;Label&quot;: &quot;Enter your email&quot;,
&quot;Name&quot;: &quot;buyerEmail&quot;,
&quot;OriginalValue&quot;: null,
&quot;Required&quot;: true,
&quot;Type&quot;: &quot;email&quot;,
&quot;Value&quot;: null
},
{
&quot;HelpText&quot;: null,
&quot;Label&quot;: &quot;Name&quot;,
&quot;Name&quot;: &quot;buyerName&quot;,
&quot;OriginalValue&quot;: null,
&quot;Required&quot;: true,
&quot;Type&quot;: &quot;text&quot;,
&quot;Value&quot;: null
},
{
&quot;HelpText&quot;: null,
&quot;Label&quot;: &quot;Address Line 1&quot;,
&quot;Name&quot;: &quot;buyerAddress1&quot;,
&quot;OriginalValue&quot;: null,
&quot;Required&quot;: true,
&quot;Type&quot;: &quot;text&quot;,
&quot;Value&quot;: null
},
{
&quot;HelpText&quot;: null,
&quot;Label&quot;: &quot;Address Line 2&quot;,
&quot;Name&quot;: &quot;buyerAddress2&quot;,
&quot;OriginalValue&quot;: null,
&quot;Required&quot;: false,
&quot;Type&quot;: &quot;text&quot;,
&quot;Value&quot;: null
},
{
&quot;HelpText&quot;: null,
&quot;Label&quot;: &quot;City&quot;,
&quot;Name&quot;: &quot;buyerCity&quot;,
&quot;OriginalValue&quot;: null,
&quot;Required&quot;: true,
&quot;Type&quot;: &quot;text&quot;,
&quot;Value&quot;: null
},
{
&quot;HelpText&quot;: null,
&quot;Label&quot;: &quot;Postcode&quot;,
&quot;Name&quot;: &quot;buyerZip&quot;,
&quot;OriginalValue&quot;: null,
&quot;Required&quot;: false,
&quot;Type&quot;: &quot;text&quot;,
&quot;Value&quot;: null
},
{
&quot;HelpText&quot;: null,
&quot;Label&quot;: &quot;State&quot;,
&quot;Name&quot;: &quot;buyerState&quot;,
&quot;OriginalValue&quot;: null,
&quot;Required&quot;: false,
&quot;Type&quot;: &quot;text&quot;,
&quot;Value&quot;: null
},
{
&quot;HelpText&quot;: null,
&quot;Label&quot;: &quot;Country&quot;,
&quot;Name&quot;: &quot;buyerCountry&quot;,
&quot;OriginalValue&quot;: null,
&quot;Required&quot;: true,
&quot;Type&quot;: &quot;text&quot;,
&quot;Value&quot;: null
}
]
}" >Address template</button>
</div>
</div>
</div>





</form>

0 comments on commit 6c4fbde

Please sign in to comment.