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"; public string TargetCurrency { get; set; } = "BTC";
[Display(Name = "Set a Target amount ")] [Display(Name = "Set a Target amount ")]
[Range(0, double.PositiveInfinity)]
public decimal? TargetAmount { get; set; } public decimal? TargetAmount { get; set; }

View File

@@ -48,7 +48,7 @@ namespace BTCPayServer.Models.PaymentRequestViewModels
public string Id { get; set; } public string Id { get; set; }
[Required] public string StoreId { 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.)")] [Display(Name = "The currency used for payment request. (e.g. BTC, LTC, USD, etc.)")]
public string Currency { get; set; } public string Currency { get; set; }

View File

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

View File

@@ -34,7 +34,7 @@
<div class="form-group"> <div class="form-group">
<label asp-for="Currency" class="control-label"></label>* <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> <span asp-validation-for="Currency" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
@@ -66,8 +66,8 @@
<div class="form-group"> <div class="form-group">
<label asp-for="ExpiryDate" class="control-label"></label> <label asp-for="ExpiryDate" class="control-label"></label>
<div class="input-group "> <div class="input-group ">
<input asp-for="ExpiryDate" class="form-control datetime" min="today"/> <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 only-for-js"> <div class="input-group-append">
<button class="btn btn-secondary input-group-clear" type="button" title="Clear"> <button class="btn btn-secondary input-group-clear" type="button" title="Clear">
<span class=" fa fa-times"></span> <span class=" fa fa-times"></span>

View File

@@ -16,6 +16,6 @@
} }
.only-for-js{ .only-for-js, .input-group-clear{
display: none; 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); $(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(); $(".only-for-js").show();
function handleInputGroupClearButtonDisplay(element) {
var value = $(element).parents(".input-group").find("input").val();
if (!value) {
$(element).hide();
} else {
$(element).show();
}
}
}); });