Merge pull request #979 from edx/vkaracic/SOL-2101

[SOL-2101, SOL-2102] Increase text length for dynamic coupons

ecommerce/extensions/offer/migrations/0007_auto_20161026_0856.py

+# -*- coding: utf-8 -*-
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('offer', '0006_auto_20161025_1446'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='range',
+            name='catalog_query',
+            field=models.TextField(null=True, blank=True),
+        ),
+    ]

ecommerce/extensions/offer/models.py

@@ -75,7 +75,7 @@ class Range(AbstractRange):
         'course_seat_types',
     ]
     catalog = models.ForeignKey('catalogue.Catalog', blank=True, null=True, related_name='ranges')
-    catalog_query = models.CharField(max_length=255, blank=True, null=True)
+    catalog_query = models.TextField(blank=True, null=True)
     course_seat_types = models.CharField(
         max_length=255,
         validators=[validate_credit_seat_type],

ecommerce/extensions/offer/tests/test_models.py

@@ -61,6 +61,20 @@ class RangeTests(CouponMixin, CourseCatalogTestMixin, CourseCatalogMockMixin, Te
         self.assertIn(self.product, self.range_with_catalog.all_products())
         self.assertEqual(len(self.range_with_catalog.all_products()), 1)
 
+    def test_large_query(self):
+        """Verify the range can store large queries."""
+        large_query = """
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        """
+        self.range.catalog_query = large_query
+        self.range.save()
+        self.assertEqual(self.range.catalog_query, large_query)
+
     @mock.patch('ecommerce.core.url_utils.get_current_request', mock.Mock(return_value=None))
     def test_run_catalog_query_no_request(self):
         """

ecommerce/static/js/test/specs/views/coupon_form_view_spec.js

@@ -289,6 +289,17 @@ define([
                     expect(view.dynamic_catalog_view.query).toEqual(undefined);
                     expect(view.dynamic_catalog_view.seat_types).toEqual([ ]);
                 });
+
+                it('should update the query length indicator', function() {
+                    var query_1 = 'example query',
+                        query_2 = 'a larger example query';
+
+                    view.$('textarea[name=catalog_query]').val(query_1).trigger('input');
+                    expect(view.$('span.query_length').text()).toEqual(String(query_1.length));
+
+                    view.$('textarea[name=catalog_query]').val(query_2).trigger('input');
+                    expect(view.$('span.query_length').text()).toEqual(String(query_2.length));
+                });
             });
         });
     }

ecommerce/static/js/views/coupon_form_view.js

@@ -224,6 +224,7 @@ define([
             events: {
                 'input [name=course_id]': 'fillFromCourse',
                 'input [name=quantity]': 'changeTotalValue',
+                'input [name=catalog_query]': 'updateCatalogQueryLength',
 
                 // catch value after autocomplete
                 'blur [name=course_id]': 'fillFromCourse',
@@ -279,6 +280,11 @@ define([
                 this._super();
             },
 
+            updateCatalogQueryLength: function() {
+                var query_length = this.$('textarea[name=catalog_query]').val().length;
+                this.$('.query_length').text(query_length);
+            },
+
             toggleCreditSeats: function() {
                 var nonCreditSeatsField = this.$('.non-credit-seats');
                 if (this.$('#credit').is(':checked')) {

ecommerce/static/sass/partials/utilities/_variables.scss

@@ -52,3 +52,5 @@ $pagination-darker-silver: #ddd;
 
 $small-input-width: 174px;
 $input-addon-width: 40px;
+
+$coupon-grid-item-height: 75px;

ecommerce/static/sass/partials/views/_coupon_admin.scss

@@ -124,7 +124,7 @@
             @include margin-right(2%);
             margin-bottom: 50px;
             width: 48%;
-            height: 75px;
+            height: $coupon-grid-item-height;
         }
 
         .total-paid {
@@ -151,6 +151,11 @@
                 margin-bottom: 10px;
             }
         }
+
+        .catalog-query {
+            height: auto;
+            min-height: $coupon-grid-item-height;
+        }
     }
 }
 

ecommerce/static/templates/coupon_form.html

@@ -180,6 +180,7 @@
         <div class="form-group catalog-query">
             <label for="catalog-query"><%= gettext('Query string:') %> * <a href="https://stage-edx-discovery.edx.org/" class="external-link normal-font-weight">(query guidelines)</a></label>
             <textarea id="catalog-query" class="form-control" name="catalog_query" rows="10"></textarea>
+            <span>Query length: <span class="query_length">0</span></span>
             <p class="help-block"></p>
         </div>
         <div class="form-group course-seat-types">