Datetime picker and small edit UI changes (#647)

* do not allow negative amounts for crowdfund and payment requests

* remove currency placeholder in payment requests

* Improve date picker ui 

Clear button only appears when a value is set. If no value is set, display a placeholder indicating it. closes #625
This commit is contained in:
Andrew Camilleri 2019-03-07 06:29:29 +01:00 committed by Nicolas Dorier
parent 4b342376a8
commit 0c0809101d
6 changed files with 31 additions and 11 deletions

View File

@ -46,6 +46,7 @@ namespace BTCPayServer.Models.AppViewModels
public string TargetCurrency { get; set; } = "BTC";
[Display(Name = "Set a Target amount ")]
[Range(0, double.PositiveInfinity)]
public decimal? TargetAmount { get; set; }

View File

@ -48,7 +48,7 @@ namespace BTCPayServer.Models.PaymentRequestViewModels
public string Id { get; set; }
[Required] public string StoreId { get; set; }
[Required] public decimal Amount { get; set; }
[Required][Range(0, double.PositiveInfinity)]public decimal Amount { get; set; }
[Display(Name = "The currency used for payment request. (e.g. BTC, LTC, USD, etc.)")]
public string Currency { get; set; }

View File

@ -1,4 +1,4 @@
@addTagHelper *, Meziantou.AspNetCore.BundleTagHelpers
@addTagHelper *, Meziantou.AspNetCore.BundleTagHelpers
@model UpdateCrowdfundViewModel
@{
ViewData["Title"] = "Update Crowdfund";
@ -67,8 +67,8 @@
<div class="form-group">
<label asp-for="StartDate" class="control-label"></label>
<div class="input-group ">
<input asp-for="StartDate" class="form-control datetime"/>
<div class="input-group-append only-for-js">
<input asp-for="StartDate" class="form-control datetime" placeholder="No start date has been set for this crowdfund"/>
<div class="input-group-append">
<button class="btn btn-secondary input-group-clear" type="button" title="Clear">
<span class=" fa fa-times"></span>
@ -93,8 +93,8 @@
<div class="form-group">
<label asp-for="EndDate" class="control-label"></label>
<div class="input-group ">
<input asp-for="EndDate" class="form-control datetime" />
<div class="input-group-append only-for-js">
<input asp-for="EndDate" class="form-control datetime" placeholder="No end date has been set for this crowdfund" />
<div class="input-group-append">
<button class="btn btn-secondary input-group-clear" type="button" title="Clear">
<span class=" fa fa-times"></span>

View File

@ -34,7 +34,7 @@
<div class="form-group">
<label asp-for="Currency" class="control-label"></label>*
<input placeholder="BTC" asp-for="Currency" class="form-control"/>
<input asp-for="Currency" class="form-control"/>
<span asp-validation-for="Currency" class="text-danger"></span>
</div>
<div class="form-group">
@ -66,8 +66,8 @@
<div class="form-group">
<label asp-for="ExpiryDate" class="control-label"></label>
<div class="input-group ">
<input asp-for="ExpiryDate" class="form-control datetime" min="today"/>
<div class="input-group-append only-for-js">
<input asp-for="ExpiryDate" class="form-control datetime" min="today" placeholder="No expiry date has been set for this payment request"/>
<div class="input-group-append">
<button class="btn btn-secondary input-group-clear" type="button" title="Clear">
<span class=" fa fa-times"></span>

View File

@ -16,6 +16,6 @@
}
.only-for-js{
.only-for-js, .input-group-clear{
display: none;
}

View File

@ -8,9 +8,28 @@
});
$(".input-group-clear").on("click", function(){
$(".input-group-clear").on("click", function () {
$(this).parents(".input-group").find("input").val(null);
handleInputGroupClearButtonDisplay(this);
});
$(".input-group-clear").each(function () {
var inputGroupClearBtn = this;
handleInputGroupClearButtonDisplay(inputGroupClearBtn);
$(this).parents(".input-group").find("input").on("change input", function () {
handleInputGroupClearButtonDisplay(inputGroupClearBtn);
})
});
$(".only-for-js").show();
function handleInputGroupClearButtonDisplay(element) {
var value = $(element).parents(".input-group").find("input").val();
if (!value) {
$(element).hide();
} else {
$(element).show();
}
}
});