add contribution ranking

BTCPayServer/Controllers/AppsController.Crowdfund.cs

@@ -43,7 +43,9 @@ namespace BTCPayServer.Controllers
             public bool UseInvoiceAmount { get; set; } = true;
             public int ResetEveryAmount { get; set; } = 1;
             public CrowdfundResetEvery ResetEvery { get; set; } = CrowdfundResetEvery.Never;
-            public bool UseAllStoreInvoices { get; set; } = false;
+            public bool UseAllStoreInvoices { get; set; }
+            public bool DisplayPerksRanking { get; set; }
+            public bool SortPerksByPopularity { get; set; }
         }
         
         
@@ -79,7 +81,9 @@ namespace BTCPayServer.Controllers
                 ResetEveryAmount = settings.ResetEveryAmount,
                 ResetEvery = Enum.GetName(typeof(CrowdfundResetEvery), settings.ResetEvery),
                 UseAllStoreInvoices = settings.UseAllStoreInvoices,
-                AppId = appId
+                AppId = appId,
+                DisplayPerksRanking = settings.DisplayPerksRanking,
+                SortPerksByPopularity = settings.SortPerksByPopularity
             };
             return View(vm);
         }
@@ -142,7 +146,9 @@ namespace BTCPayServer.Controllers
                 ResetEveryAmount = vm.ResetEveryAmount,
                 ResetEvery = Enum.Parse<CrowdfundResetEvery>(vm.ResetEvery),
                 UseInvoiceAmount = vm.UseInvoiceAmount,
-                UseAllStoreInvoices = vm.UseAllStoreInvoices
+                UseAllStoreInvoices = vm.UseAllStoreInvoices,
+                DisplayPerksRanking = vm.DisplayPerksRanking,
+                SortPerksByPopularity = vm.SortPerksByPopularity
             };
             
             app.SetSettings(newSettings);

BTCPayServer/Crowdfund/CrowdfundHubStreamer.cs

@@ -293,7 +293,19 @@ namespace BTCPayServer.Hubs
                 .Where(entity => !string.IsNullOrEmpty( entity.ProductInformation.ItemCode))
                 .GroupBy(entity => entity.ProductInformation.ItemCode)
                 .ToDictionary(entities => entities.Key, entities => entities.Count());
-            
+
+            var perks = _AppsHelper.Parse(settings.PerksTemplate, settings.TargetCurrency);
+            if (settings.SortPerksByPopularity)
+            {
+                var  ordered = perkCount.OrderByDescending(pair => pair.Value);
+                var newPerksOrder = ordered
+                    .Select(keyValuePair => perks.SingleOrDefault(item => item.Id == keyValuePair.Key))
+                    .Where(matchingPerk => matchingPerk != null)
+                    .ToList();
+                var remainingPerks = perks.Where(item => !newPerksOrder.Contains(item));
+                newPerksOrder.AddRange(remainingPerks);
+                perks = newPerksOrder.ToArray();
+            }    
             return new ViewCrowdfundViewModel()
             {
                 Title = settings.Title,
@@ -310,12 +322,13 @@ namespace BTCPayServer.Hubs
                 TargetCurrency = settings.TargetCurrency,
                 EnforceTargetAmount = settings.EnforceTargetAmount,
                 StatusMessage = statusMessage,
-                Perks = _AppsHelper.Parse(settings.PerksTemplate, settings.TargetCurrency),
+                Perks = perks,
                 DisqusEnabled = settings.DisqusEnabled,
                 SoundsEnabled = settings.SoundsEnabled,
                 DisqusShortname = settings.DisqusShortname,
                 AnimationsEnabled = settings.AnimationsEnabled,
                 ResetEveryAmount = settings.ResetEveryAmount,
+                DisplayPerksRanking = settings.DisplayPerksRanking,
                 PerkCount = perkCount,
                 ResetEvery = Enum.GetName(typeof(CrowdfundResetEvery),settings.ResetEvery),
                 CurrencyData = _AppsHelper.GetCurrencyData(settings.TargetCurrency, true),

BTCPayServer/Models/AppViewModels/UpdateCrowdfundViewModel.cs

@@ -74,6 +74,10 @@ namespace BTCPayServer.Models.AppViewModels
         public bool UseAllStoreInvoices { get; set; } 
 
         public string AppId { get; set; }
+        [Display(Name = "Sort contribution perks by popularity")]
+        public bool SortPerksByPopularity { get; set; }
+        [Display(Name = "Display contribution ranking")]
+        public bool DisplayPerksRanking { get; set; }
     }
 
     public enum CrowdfundResetEvery

BTCPayServer/Models/AppViewModels/ViewCrowdfundViewModel.cs

@@ -54,7 +54,7 @@ namespace BTCPayServer.Models.AppViewModels
         public bool Started => !StartDate.HasValue || DateTime.Now.ToUniversalTime() > StartDate;
 
         public bool Ended => !EndDate.HasValue || DateTime.Now.ToUniversalTime() > EndDate;
-       
+        public bool DisplayPerksRanking { get; set; }
     }
 
     public class ContributeToCrowdfund

BTCPayServer/Views/Apps/UpdateCrowdfund.cshtml

@@ -129,6 +129,16 @@
                         <input asp-for="Enabled" type="checkbox" class="form-check"/>
                         <span asp-validation-for="Enabled" class="text-danger"></span>
                     </div>
+                    <div class="form-group">
+                        <label asp-for="SortPerksByPopularity"></label>
+                        <input asp-for="SortPerksByPopularity" type="checkbox" class="form-check"/>
+                        <span asp-validation-for="SortPerksByPopularity" class="text-danger"></span>
+                    </div> 
+                    <div class="form-group">
+                        <label asp-for="DisplayPerksRanking"></label>
+                        <input asp-for="DisplayPerksRanking" type="checkbox" class="form-check"/>
+                        <span asp-validation-for="DisplayPerksRanking" class="text-danger"></span>
+                    </div>
                     <div class="form-group">
                         <label asp-for="EnforceTargetAmount"></label>
                         <input asp-for="EnforceTargetAmount" type="checkbox" class="form-check"/>

BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml

@@ -130,6 +130,7 @@
                                 </div>
                                 <div class="col-md-4 col-sm-12">
                                     <contribute :target-currency="srvModel.targetCurrency"
+                                                :display-perks-ranking="srvModel.displayPerksRanking"
                                                 :active="active"
                                                 :in-modal="false"
                                                 :perks="perks">
@@ -152,6 +153,7 @@
                         </div>
                         <div class="col-md-4 col-sm-12">
                             <contribute :target-currency="srvModel.targetCurrency"
+                                        :display-perks-ranking="srvModel.displayPerksRanking"
                                         :active="active"
                                         :in-modal="false"
                                         :perks="perks">
@@ -192,11 +194,11 @@
 </div>
 
 <script type="text/x-template" id="perks-template">
-<div >
+<div>
     <perk v-if="!perks || perks.length ===0" :perk="{title: 'Donate Custom Amount', price: { value: null}, custom: true}" :target-currency="targetCurrency" :active="active" 
         :in-modal="inModal">
     </perk>
-    <perk v-for="(perk, index) in perks" :perk="perk" :target-currency="targetCurrency" :active="active" 
+    <perk v-for="(perk, index) in perks" :perk="perk" :target-currency="targetCurrency" :active="active" :display-perks-ranking="displayPerksRanking" :index="index"
         :in-modal="inModal">
     </perk>
 </div>
@@ -204,6 +206,9 @@
 
 <script type="text/x-template" id="perk-template"> 
 <div class="card mb-4 perk"  v-bind:class="{ 'expanded': expanded, 'unexpanded': !expanded }" v-on:click="expand" :id="perk.id">
+<span v-if="displayPerksRanking && perk.sold " style="width: 33px;height: 33px;position: absolute;left: -15px;top: -15px;padding-top: 5px;" class="btn btn-sm rounded-circle" v-bind:class="{ 'btn-primary': index==0, 'btn-secondary': index!=0}">#{{index+1}}</span> 
+         
+
     <div class="perk-zoom " v-if="canExpand">
         <div class="perk-zoom-bg bg-primary"> </div>
         <div class="perk-zoom-text w-100 text-center text-white font-weight-bold">
@@ -251,8 +256,12 @@
                 </div>
             </div>
         </div>
-        <div class="card-footer text-right" v-if="perk.sold">
-            {{perk.sold}} Contributors
+        <div class="card-footer d-flex justify-content-between" v-if="perk.sold">
+           <span >
+           <template v-if="displayPerksRanking">
+           #{{index+1}} Perk</span> 
+           </template>
+           <span x >{{perk.sold}} Contributor{{perk.sold > 1? "s": ""}}</span>
         </div>
     </form>
 </div> 
@@ -261,10 +270,11 @@
 
 <script type="text/x-template" id="contribute-template">
   <div>
-    <h3 v-if="!inModal">Contribute</h3>
+    <h3 v-if="!inModal" class="mb-3">Contribute</h3>
     <perks 
         :perks="perks" 
         :in-modal="inModal"
+        :display-perks-ranking="displayPerksRanking"
         :target-currency="targetCurrency" 
         :active="active">
      </perks>

BTCPayServer/wwwroot/crowdfund/app.js

@@ -18,17 +18,17 @@ addLoadEvent(function (ev) {
     Vue.use(Toasted);
 
     Vue.component('contribute', {
-        props: ["targetCurrency", "active", "perks", "inModal"],
+        props: ["targetCurrency", "active", "perks", "inModal", "displayPerksRanking"],
         template: "#contribute-template"
     });
 
     Vue.component('perks', {
-        props: ["perks", "targetCurrency", "active", "inModal"],
+        props: ["perks", "targetCurrency", "active", "inModal","displayPerksRanking"],
         template: "#perks-template"
     });
 
     Vue.component('perk', {
-        props: ["perk", "targetCurrency", "active", "inModal"],
+        props: ["perk", "targetCurrency", "active", "inModal", "displayPerksRanking", "index"],
         template: "#perk-template",
         data: function () {
             return {