[ADD] fourth amount, update widgets

donate/forms.py

@@ -5,12 +5,11 @@ from django.conf import settings
 
 
 class DonateForm(forms.Form):
-    CUSTOM_AMOUNT = -1
     DEFAULT_CUSTOM_AMOUNT = 1000
     ALLOWED_PERIODICITY = [730, 99999]
     PORTAL_ID_IN_SELECT = -1
 
-    amount = forms.IntegerField()
+    amount = forms.IntegerField(required=False)
     custom_amount = forms.IntegerField(required=False)
     periodicity = forms.IntegerField()
     portal_project_id = forms.IntegerField()
@@ -29,11 +28,13 @@ class DonateForm(forms.Form):
             and cleaned_data["select_portal_project_id"] is None
         ):
             raise forms.ValidationError("Není zadán účel daru.")
+        if not cleaned_data["amount"] and not cleaned_data["custom_amount"]:
+            raise forms.ValidationError("Nebyla zadána částka.")
         return cleaned_data
 
     def get_amount(self):
         amount = self.cleaned_data["amount"]
-        if amount == self.CUSTOM_AMOUNT:
+        if not amount:
             amount = (
                 abs(self.cleaned_data["custom_amount"]) or self.DEFAULT_CUSTOM_AMOUNT
             )

donate/migrations/0018_donatehomepage_form_amount_4_and_more.py

+# Generated by Django 4.0.4 on 2022-05-18 13:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("donate", "0017_donatehomepage_title_suffix"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="donatehomepage",
+            name="form_amount_4",
+            field=models.IntegerField(default=1000, verbose_name="pevná částka 4"),
+        ),
+        migrations.AddField(
+            model_name="donateprojectpage",
+            name="form_amount_4",
+            field=models.IntegerField(default=1000, verbose_name="pevná částka 4"),
+        ),
+        migrations.AddField(
+            model_name="donateregionpage",
+            name="form_amount_4",
+            field=models.IntegerField(default=1000, verbose_name="pevná částka 4"),
+        ),
+        migrations.AlterField(
+            model_name="donatehomepage",
+            name="form_preselected",
+            field=models.IntegerField(
+                choices=[(1, "první"), (2, "druhá"), (3, "třetí"), (4, "čtvrtá")],
+                default=1,
+                verbose_name="výchozí částka",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="donateprojectpage",
+            name="form_preselected",
+            field=models.IntegerField(
+                choices=[(1, "první"), (2, "druhá"), (3, "třetí"), (4, "čtvrtá")],
+                default=1,
+                verbose_name="výchozí částka",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="donateregionpage",
+            name="form_preselected",
+            field=models.IntegerField(
+                choices=[(1, "první"), (2, "druhá"), (3, "třetí"), (4, "čtvrtá")],
+                default=1,
+                verbose_name="výchozí částka",
+            ),
+        ),
+    ]

donate/models.py

@@ -61,15 +61,18 @@ class DonateFormAmountsMixin(models.Model):
     FIRST = 1
     SECOND = 2
     THIRD = 3
+    FOURTH = 4
     FORM_CHOICES = [
         (FIRST, "první"),
         (SECOND, "druhá"),
         (THIRD, "třetí"),
+        (FOURTH, "čtvrtá"),
     ]
 
     form_amount_1 = models.IntegerField("pevná částka 1", default=100)
     form_amount_2 = models.IntegerField("pevná částka 2", default=200)
     form_amount_3 = models.IntegerField("pevná částka 3", default=500)
+    form_amount_4 = models.IntegerField("pevná částka 4", default=1000)
     form_preselected = models.IntegerField(
         "výchozí částka", default=FIRST, choices=FORM_CHOICES
     )
@@ -164,6 +167,7 @@ class DonateHomePage(
                 FieldPanel("form_amount_1"),
                 FieldPanel("form_amount_2"),
                 FieldPanel("form_amount_3"),
+                FieldPanel("form_amount_4"),
                 FieldPanel("form_preselected"),
             ],
             "nastavení darů",
@@ -291,6 +295,7 @@ class DonateRegionPage(
                 FieldPanel("form_amount_1"),
                 FieldPanel("form_amount_2"),
                 FieldPanel("form_amount_3"),
+                FieldPanel("form_amount_4"),
                 FieldPanel("form_preselected"),
             ],
             "nastavení darů",
@@ -442,6 +447,7 @@ class DonateProjectPage(
                 FieldPanel("form_amount_1"),
                 FieldPanel("form_amount_2"),
                 FieldPanel("form_amount_3"),
+                FieldPanel("form_amount_4"),
                 FieldPanel("form_preselected"),
             ],
             "nastavení darů",

donate/static/donate/assets/js/scripts.js

@@ -52,22 +52,18 @@
 
   // On amount radio change
   $("input[name='amount']").change(function() {
+    const $customAmount = $('#customamount')
+    $customAmount.attr('required', false);
+    $customAmount.val("");
+  });
 
-    // If custom amount is selected
-    if($(this).attr('id') == 'amount4') {
-
-      // Show custom amount input and set it required
-      $("#js-custom-amount-input").show(50);
+  $("input[name='custom_amount']").focus(function() {
     $('#customamount').attr('required', true);
-
-    } else {
-
-      // Hide custom amount and remove required field
-      $("#js-custom-amount-input").hide(50);
-      $('#customamount').attr('required', false);
-
-    }
-  });
+    $( "#amount1" ).prop( "checked", false );
+    $( "#amount2" ).prop( "checked", false );
+    $( "#amount3" ).prop( "checked", false );
+    $( "#amount4" ).prop( "checked", false );
+  })
 
   // Trigger correct state onload
   $("input[name='amount']:checked").change();

donate/templates/donate/donate_home_page.html

@@ -72,21 +72,19 @@
                 {% include "donate/form_amounts_snippet.html" %}
               </div>
             </div>
-            <div class="form-group row mb-4 align-items-center" id="js-custom-amount-input" style="display: none;">
-              <div class="offset-md-4 col-md-8">
-                <div class="input-group input-group-lg mb-3 custom-amount">
-                  <input type="number" class="form-control" id="customamount" name="custom_amount" aria-describedby="customamount-currency">
+            <div class="form-group row mb-0 align-items-center" id="js-custom-amount-input">
+                <div class="col-md-4 order-md-0 order-1">
+                    <button type="submit" class="btn btn-danger btn-lg">Darovat</button>
+                </div>
+              <div class="col-md-8 mb-4 mb-md-0">
+                <div class="input-group input-group-lg mb-0 custom-amount">
+                  <input type="number" class="form-control" id="customamount" placeholder="Jiná částka" name="custom_amount" aria-describedby="customamount-currency">
                   <div class="input-group-append">
                     <span class="input-group-text" id="customamount-currency">Kč</span>
                   </div>
                 </div>
               </div>
             </div>
-            <div class="form-group row mb-0">
-              <div class="col-12">
-                <button type="submit" class="btn btn-danger btn-lg">Darovat</button>
-              </div>
-            </div>
           </form>
 
         </div><!-- /donate-form__right -->

donate/templates/donate/donate_info_page.html

@@ -63,15 +63,15 @@
                           <label class="custom-control-label col-form-label-lg" for="amount3">1000 Kč</label>
                         </div>
                         <div class="custom-control custom-radio custom-control-inline">
-                          <input type="radio" id="amount4" name="amount" value="-1" class="custom-control-input">
-                          <label class="custom-control-label col-form-label-lg" for="amount4">Jiná částka</label>
+                            <input type="radio" id="amount4" name="amount" value="1500" class="custom-control-input">
+                            <label class="custom-control-label col-form-label-lg" for="amount4">1500 Kč</label>
                         </div>
                     </div>
                 </div>
-                <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input" style="display: none;">
+                <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input">
                     <div class="col-md-12">
                       <div class="input-group input-group-lg mb-3 custom-amount">
-                        <input type="number" class="form-control" id="customamount" name="custom_amount" aria-describedby="customamount-currency">
+                        <input type="number" class="form-control" id="customamount" placeholder="Jiná částka" name="custom_amount" aria-describedby="customamount-currency">
                         <div class="input-group-append">
                           <span class="input-group-text" id="customamount-currency">Kč</span>
                         </div>

donate/templates/donate/donate_project_page.html

@@ -104,10 +104,10 @@
                         {% include "donate/form_amounts_snippet.html" %}
                       </div>
                   </div>
-                  <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input" style="display: none;">
+                  <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input">
                       <div class="col-md-12">
                         <div class="input-group input-group-lg mb-3 custom-amount">
-                          <input type="number" class="form-control" id="customamount" name="custom_amount" aria-describedby="customamount-currency">
+                          <input type="number" class="form-control" id="customamount" placeholder="Jiná částka" name="custom_amount" aria-describedby="customamount-currency">
                           <div class="input-group-append">
                             <span class="input-group-text" id="customamount-currency">Kč</span>
                           </div>

donate/templates/donate/donate_project_page_coalition.html

@@ -106,10 +106,10 @@
                         {% include "donate/form_amounts_snippet.html" %}
                       </div>
                     </div>
-                    <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input" style="display: none;">
+                    <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input">
                       <div class="col-md-12">
                         <div class="input-group input-group-lg mb-3 custom-amount">
-                          <input type="number" class="form-control" id="customamount" name="custom_amount" aria-describedby="customamount-currency">
+                          <input type="number" class="form-control" id="customamount" placeholder="Jiná částka" name="custom_amount" aria-describedby="customamount-currency">
                           <div class="input-group-append">
                             <span class="input-group-text" id="customamount-currency">Kč</span>
                           </div>

donate/templates/donate/donate_region_page.html

@@ -60,10 +60,10 @@
                       {% include "donate/form_amounts_snippet.html" %}
                     </div>
                   </div>
-                  <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input" style="display: none;">
+                  <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input">
                     <div class="col-md-12">
                       <div class="input-group input-group-lg mb-3 custom-amount">
-                        <input type="number" class="form-control" id="customamount" name="custom_amount" aria-describedby="customamount-currency">
+                        <input type="number" class="form-control" id="customamount" placeholder="Jiná částka" name="custom_amount" aria-describedby="customamount-currency">
                         <div class="input-group-append">
                           <span class="input-group-text" id="customamount-currency">Kč</span>
                         </div>

donate/templates/donate/donate_targeted_donations_page.html

@@ -70,7 +70,7 @@
                     <label class="custom-control-label col-form-label-lg" for="amount1">200 Kč</label>
                   </div>
                   <div class="custom-control custom-radio custom-control-inline">
-                    <input type="radio" id="amount2" name="amount" value="500" class="custom-control-input" checked required>
+                    <input type="radio" id="amount2" name="amount" value="500" class="custom-control-input" checked>
                     <label class="custom-control-label col-form-label-lg" for="amount2">500 Kč</label>
                   </div>
                   <div class="custom-control custom-radio custom-control-inline">
@@ -78,26 +78,24 @@
                     <label class="custom-control-label col-form-label-lg" for="amount3">1000 Kč</label>
                   </div>
                   <div class="custom-control custom-radio custom-control-inline">
-                    <input type="radio" id="amount4" name="amount" value="-1" class="custom-control-input">
-                    <label class="custom-control-label col-form-label-lg" for="amount4">Jiná částka</label>
+                      <input type="radio" id="amount4" name="amount" value="1500" class="custom-control-input">
+                      <label class="custom-control-label col-form-label-lg" for="amount4">1500 Kč</label>
                   </div>
               </div>
             </div>
-            <div class="form-group row mb-4 align-items-center" id="js-custom-amount-input" style="display: none;">
-              <div class="offset-md-3 col-md-3">
-                <div class="input-group input-group-lg mb-3 custom-amount">
-                  <input type="number" class="form-control" id="customamount" name="custom_amount" aria-describedby="customamount-currency">
+            <div class="form-group row mb-0 align-items-center" id="js-custom-amount-input">
+                <div class="col-md-3 order-md-0 order-1">
+                    <button type="submit" class="btn btn-danger btn-lg">Darovat</button>
+                </div>
+              <div class="col-md-3 mb-4 mb-md-0">
+                <div class="input-group input-group-lg mb-0 custom-amount">
+                  <input type="number" class="form-control" id="customamount" placeholder="Jiná částka" name="custom_amount" aria-describedby="customamount-currency">
                   <div class="input-group-append">
                     <span class="input-group-text" id="customamount-currency">Kč</span>
                   </div>
                 </div>
               </div>
             </div>
-            <div class="form-group row mb-0">
-              <div class="col-12">
-                <button type="submit" class="btn btn-danger btn-lg">Darovat</button>
-              </div>
-            </div>
           </form>
 
           <div class="mt-5">

donate/templates/donate/form_amounts_snippet.html

@@ -11,6 +11,6 @@
   <label class="custom-control-label col-form-label-lg" for="amount3">{{ page.form_amount_3 }} Kč</label>
 </div>
 <div class="custom-control custom-radio custom-control-inline">
-  <input type="radio" id="amount4" name="amount" value="-1" class="custom-control-input">
-  <label class="custom-control-label col-form-label-lg" for="amount4">Jiná částka</label>
+  <input type="radio" id="amount4" name="amount" value="{{ page.form_amount_4 }}" class="custom-control-input"{% if page.form_preselected == page.FOURTH %} checked{% endif %}>
+  <label class="custom-control-label col-form-label-lg" for="amount4">{{ page.form_amount_4 }} Kč</label>
 </div>