WIP

- Coupon Add/Edit/Delete rule AJAX

core/lib/Thelia/Action/Coupon.php

@@ -172,7 +172,6 @@ class Coupon extends BaseAction implements EventSubscriberInterface
             TheliaEvents::COUPON_DISABLE => array("disable", 128),
             TheliaEvents::COUPON_ENABLE => array("enable", 128),
             TheliaEvents::COUPON_CONSUME => array("consume", 128),
-            TheliaEvents::COUPON_RULE_CREATE => array("createRule", 128),
             TheliaEvents::COUPON_RULE_UPDATE => array("updateRule", 128),
             TheliaEvents::COUPON_RULE_DELETE => array("deleteRule", 128)
         );

core/lib/Thelia/Config/Resources/routing/admin.xml

@@ -95,6 +95,9 @@
     <route id="admin.coupon.rule.input" path="/admin/coupon/rule/{ruleId}">
         <default key="_controller">Thelia\Controller\Admin\CouponController::getRuleInputAction</default>
     </route>
+    <route id="admin.coupon.rule.update" path="/admin/coupon/{couponId}/rule/update/">
+        <default key="_controller">Thelia\Controller\Admin\CouponController::updateRulesAction</default>
+    </route>
 
 
 

core/lib/Thelia/Controller/Admin/CouponController.php

@@ -202,13 +202,18 @@ class CouponController extends BaseAdminController
 
         $args['availableCoupons'] = $this->getAvailableCoupons();
         $args['availableRules'] = $this->getAvailableRules();
-        $args['urlAjaxGetRuleInput'] = $this->getRouteFromRouter(
+        $args['urlAjaxGetRuleInput'] = $this->getRoute(
-            'router.admin',
             'admin.coupon.rule.input',
             array('ruleId' => 'ruleId'),
             Router::ABSOLUTE_URL
         );
 
+        $args['urlAjaxUpdateRules'] = $this->getRoute(
+            'admin.coupon.rule.update',
+            array('couponId' => $couponId),
+            Router::ABSOLUTE_URL
+        );
+
         $args['formAction'] = 'admin/coupon/update/' . $couponId;
 
         return $this->render(
@@ -289,6 +294,8 @@ class CouponController extends BaseAdminController
                 );
             }
 
+//            $args['rules'] = $this->cleanRuleForTemplate($coupon->getRules()->getRules());
+
             // Setup the object form
             $changeForm = new CouponCreationForm($this->getRequest(), 'form', $data);
 
@@ -339,15 +346,17 @@ class CouponController extends BaseAdminController
     {
         $this->checkAuth('ADMIN', 'admin.coupon.read');
 
-//        if (!$this->getRequest()->isXmlHttpRequest()) {
+        if ($this->isDebug()) {
-//            $this->redirect(
+            if (!$this->getRequest()->isXmlHttpRequest()) {
-//                $this->getRoute(
+                $this->redirect(
-//                    'admin',
+                    $this->getRoute(
-//                    array(),
+                        'admin',
-//                    Router::ABSOLUTE_URL
+                        array(),
-//                )
+                        Router::ABSOLUTE_URL
-//            );
+                    )
-//        }
+                );
+            }
+        }
 
         /** @var ConstraintFactory $constraintFactory */
         $constraintFactory = $this->container->get('thelia.constraint.factory');
@@ -366,6 +375,102 @@ class CouponController extends BaseAdminController
         );
     }
 
+
+    /**
+     * Manage Coupons read display
+     *
+     * @param int $couponId Coupon id
+     *
+     * @return \Symfony\Component\HttpFoundation\Response
+     */
+    public function updateRulesAction($couponId)
+    {
+        $this->checkAuth('ADMIN', 'admin.coupon.read');
+
+        if ($this->isDebug()) {
+            if (!$this->getRequest()->isXmlHttpRequest()) {
+                $this->redirect(
+                    $this->getRoute(
+                        'admin',
+                        array(),
+                        Router::ABSOLUTE_URL
+                    )
+                );
+            }
+        }
+
+        $search = CouponQuery::create();
+        /** @var Coupon $coupon */
+        $coupon = $search->findOneById($couponId);
+
+        if (!$coupon) {
+            return $this->pageNotFound();
+        }
+
+        $rules = new CouponRuleCollection();
+
+        /** @var ConstraintFactory $constraintFactory */
+        $constraintFactory = $this->container->get('thelia.constraint.factory');
+        $rulesReceived = json_decode($this->getRequest()->get('rules'));
+        foreach ($rulesReceived as $ruleReceived) {
+            var_dump('building ', $ruleReceived->values);
+            $rule = $constraintFactory->build(
+                $ruleReceived->serviceId,
+                (array) $ruleReceived->operators,
+                (array) $ruleReceived->values
+            );
+            $rules->add(clone $rule);
+        }
+
+        $coupon->setSerializedRules(
+            $constraintFactory->serializeCouponRuleCollection($rules)
+        );
+
+        $couponEvent = new CouponCreateOrUpdateEvent(
+            $coupon->getCode(),
+            $coupon->getTitle(),
+            $coupon->getAmount(),
+            $coupon->getType(),
+            $coupon->getShortDescription(),
+            $coupon->getDescription(),
+            $coupon->getIsEnabled(),
+            $coupon->getExpirationDate(),
+            $coupon->getIsAvailableOnSpecialOffers(),
+            $coupon->getIsCumulative(),
+            $coupon->getIsRemovingPostage(),
+            $coupon->getMaxUsage(),
+            $rules,
+            $coupon->getLocale()
+        );
+
+        $eventToDispatch = TheliaEvents::COUPON_RULE_UPDATE;
+        // Dispatch Event to the Action
+        $this->dispatch(
+            $eventToDispatch,
+            $couponEvent
+        );
+
+        $this->adminLogAppend(
+            sprintf(
+                'Coupon %s (ID %s) rules updated',
+                $couponEvent->getTitle(),
+                $couponEvent->getCoupon()->getId()
+            )
+        );
+
+        $cleanedRules = $this->cleanRuleForTemplate($rules);
+
+        return $this->render(
+            'coupon/rules',
+            array(
+                'couponId' => $couponId,
+                'rules' => $cleanedRules,
+                'urlEdit' => $couponId,
+                'urlDelete' => $couponId
+            )
+        );
+    }
+
     /**
      * Build a Coupon from its form
      *
@@ -555,6 +660,21 @@ class CouponController extends BaseAdminController
         return $cleanedRules;
     }
 
+    /**
+     * @param $rules
+     * @return array
+     */
+    protected function cleanRuleForTemplate($rules)
+    {
+        $cleanedRules = array();
+        /** @var $rule CouponRuleInterface */
+        foreach ($rules->getRules() as $rule) {
+            $cleanedRules[] = $rule->getToolTip();
+        }
+
+        return $cleanedRules;
+    }
+
 //    /**
 //     * Validation Rule creation
 //     *

core/lib/Thelia/Controller/BaseController.php

@@ -251,4 +251,14 @@ class BaseController extends ContainerAware
     {
         throw new NotFoundHttpException();
     }
+
+    /**
+     * Check if environment is in debug mode
+     *
+     * @return bool
+     */
+    protected function isDebug()
+    {
+        return $this->container->getParameter('kernel.debug');
+    }
 }

core/lib/Thelia/Core/Event/TheliaEvents.php

@@ -281,22 +281,6 @@ final class TheliaEvents
      */
     const AFTER_CONSUME_COUPON 	= "action.after_consume_coupon";
 
-
-    /**
-     * Sent when attempting to create Coupon Rule
-     */
-    const COUPON_RULE_CREATE 	= "action.create_coupon_rule";
-
-    /**
-     * Sent just before an attempt to create a Coupon Rule
-     */
-    const BEFORE_COUPON_RULE_CREATE 	= "action.before_create_coupon_rule";
-
-    /**
-     * Sent just after an attempt to create a Coupon Rule
-     */
-    const AFTER_COUPON_RULE_CREATE 	= "action.after_create_coupon_rule";
-
     /**
      * Sent when attempting to update Coupon Rule
      */

templates/admin/default/assets/js/json2.js

@@ -0,0 +1,486 @@
+/*
+ json2.js
+ 2013-05-26
+
+ Public Domain.
+
+ NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+
+ See http://www.JSON.org/js.html
+
+
+ This code should be minified before deployment.
+ See http://javascript.crockford.com/jsmin.html
+
+ USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
+ NOT CONTROL.
+
+
+ This file creates a global JSON object containing two methods: stringify
+ and parse.
+
+ JSON.stringify(value, replacer, space)
+ value       any JavaScript value, usually an object or array.
+
+ replacer    an optional parameter that determines how object
+ values are stringified for objects. It can be a
+ function or an array of strings.
+
+ space       an optional parameter that specifies the indentation
+ of nested structures. If it is omitted, the text will
+ be packed without extra whitespace. If it is a number,
+ it will specify the number of spaces to indent at each
+ level. If it is a string (such as '\t' or ' '),
+ it contains the characters used to indent at each level.
+
+ This method produces a JSON text from a JavaScript value.
+
+ When an object value is found, if the object contains a toJSON
+ method, its toJSON method will be called and the result will be
+ stringified. A toJSON method does not serialize: it returns the
+ value represented by the name/value pair that should be serialized,
+ or undefined if nothing should be serialized. The toJSON method
+ will be passed the key associated with the value, and this will be
+ bound to the value
+
+ For example, this would serialize Dates as ISO strings.
+
+ Date.prototype.toJSON = function (key) {
+ function f(n) {
+ // Format integers to have at least two digits.
+ return n < 10 ? '0' + n : n;
+ }
+
+ return this.getUTCFullYear()   + '-' +
+ f(this.getUTCMonth() + 1) + '-' +
+ f(this.getUTCDate())      + 'T' +
+ f(this.getUTCHours())     + ':' +
+ f(this.getUTCMinutes())   + ':' +
+ f(this.getUTCSeconds())   + 'Z';
+ };
+
+ You can provide an optional replacer method. It will be passed the
+ key and value of each member, with this bound to the containing
+ object. The value that is returned from your method will be
+ serialized. If your method returns undefined, then the member will
+ be excluded from the serialization.
+
+ If the replacer parameter is an array of strings, then it will be
+ used to select the members to be serialized. It filters the results
+ such that only members with keys listed in the replacer array are
+ stringified.
+
+ Values that do not have JSON representations, such as undefined or
+ functions, will not be serialized. Such values in objects will be
+ dropped; in arrays they will be replaced with null. You can use
+ a replacer function to replace those with JSON values.
+ JSON.stringify(undefined) returns undefined.
+
+ The optional space parameter produces a stringification of the
+ value that is filled with line breaks and indentation to make it
+ easier to read.
+
+ If the space parameter is a non-empty string, then that string will
+ be used for indentation. If the space parameter is a number, then
+ the indentation will be that many spaces.
+
+ Example:
+
+ text = JSON.stringify(['e', {pluribus: 'unum'}]);
+ // text is '["e",{"pluribus":"unum"}]'
+
+
+ text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
+ // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
+
+ text = JSON.stringify([new Date()], function (key, value) {
+ return this[key] instanceof Date ?
+ 'Date(' + this[key] + ')' : value;
+ });
+ // text is '["Date(---current time---)"]'
+
+
+ JSON.parse(text, reviver)
+ This method parses a JSON text to produce an object or array.
+ It can throw a SyntaxError exception.
+
+ The optional reviver parameter is a function that can filter and
+ transform the results. It receives each of the keys and values,
+ and its return value is used instead of the original value.
+ If it returns what it received, then the structure is not modified.
+ If it returns undefined then the member is deleted.
+
+ Example:
+
+ // Parse the text. Values that look like ISO date strings will
+ // be converted to Date objects.
+
+ myData = JSON.parse(text, function (key, value) {
+ var a;
+ if (typeof value === 'string') {
+ a =
+ /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
+ if (a) {
+ return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
+ +a[5], +a[6]));
+ }
+ }
+ return value;
+ });
+
+ myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
+ var d;
+ if (typeof value === 'string' &&
+ value.slice(0, 5) === 'Date(' &&
+ value.slice(-1) === ')') {
+ d = new Date(value.slice(5, -1));
+ if (d) {
+ return d;
+ }
+ }
+ return value;
+ });
+
+
+ This is a reference implementation. You are free to copy, modify, or
+ redistribute.
+ */
+
+/*jslint evil: true, regexp: true */
+
+/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
+ call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
+ getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
+ lastIndex, length, parse, prototype, push, replace, slice, stringify,
+ test, toJSON, toString, valueOf
+ */
+
+
+// Create a JSON object only if one does not already exist. We create the
+// methods in a closure to avoid creating global variables.
+
+if (typeof JSON !== 'object') {
+    JSON = {};
+}
+
+(function () {
+    'use strict';
+
+    function f(n) {
+        // Format integers to have at least two digits.
+        return n < 10 ? '0' + n : n;
+    }
+
+    if (typeof Date.prototype.toJSON !== 'function') {
+
+        Date.prototype.toJSON = function () {
+
+            return isFinite(this.valueOf())
+                ? this.getUTCFullYear()     + '-' +
+                f(this.getUTCMonth() + 1) + '-' +
+                f(this.getUTCDate())      + 'T' +
+                f(this.getUTCHours())     + ':' +
+                f(this.getUTCMinutes())   + ':' +
+                f(this.getUTCSeconds())   + 'Z'
+                : null;
+        };
+
+        String.prototype.toJSON      =
+            Number.prototype.toJSON  =
+                Boolean.prototype.toJSON = function () {
+                    return this.valueOf();
+                };
+    }
+
+    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        gap,
+        indent,
+        meta = {    // table of character substitutions
+            '\b': '\\b',
+            '\t': '\\t',
+            '\n': '\\n',
+            '\f': '\\f',
+            '\r': '\\r',
+            '"' : '\\"',
+            '\\': '\\\\'
+        },
+        rep;
+
+
+    function quote(string) {
+
+// If the string contains no control characters, no quote characters, and no
+// backslash characters, then we can safely slap some quotes around it.
+// Otherwise we must also replace the offending characters with safe escape
+// sequences.
+
+        escapable.lastIndex = 0;
+        return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
+            var c = meta[a];
+            return typeof c === 'string'
+                ? c
+                : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+        }) + '"' : '"' + string + '"';
+    }
+
+
+    function str(key, holder) {
+
+// Produce a string from holder[key].
+
+        var i,          // The loop counter.
+            k,          // The member key.
+            v,          // The member value.
+            length,
+            mind = gap,
+            partial,
+            value = holder[key];
+
+// If the value has a toJSON method, call it to obtain a replacement value.
+
+        if (value && typeof value === 'object' &&
+            typeof value.toJSON === 'function') {
+            value = value.toJSON(key);
+        }
+
+// If we were called with a replacer function, then call the replacer to
+// obtain a replacement value.
+
+        if (typeof rep === 'function') {
+            value = rep.call(holder, key, value);
+        }
+
+// What happens next depends on the value's type.
+
+        switch (typeof value) {
+            case 'string':
+                return quote(value);
+
+            case 'number':
+
+// JSON numbers must be finite. Encode non-finite numbers as null.
+
+                return isFinite(value) ? String(value) : 'null';
+
+            case 'boolean':
+            case 'null':
+
+// If the value is a boolean or null, convert it to a string. Note:
+// typeof null does not produce 'null'. The case is included here in
+// the remote chance that this gets fixed someday.
+
+                return String(value);
+
+// If the type is 'object', we might be dealing with an object or an array or
+// null.
+
+            case 'object':
+
+// Due to a specification blunder in ECMAScript, typeof null is 'object',
+// so watch out for that case.
+
+                if (!value) {
+                    return 'null';
+                }
+
+// Make an array to hold the partial results of stringifying this object value.
+
+                gap += indent;
+                partial = [];
+
+// Is the value an array?
+
+                if (Object.prototype.toString.apply(value) === '[object Array]') {
+
+// The value is an array. Stringify every element. Use null as a placeholder
+// for non-JSON values.
+
+                    length = value.length;
+                    for (i = 0; i < length; i += 1) {
+                        partial[i] = str(i, value) || 'null';
+                    }
+
+// Join all of the elements together, separated with commas, and wrap them in
+// brackets.
+
+                    v = partial.length === 0
+                        ? '[]'
+                        : gap
+                        ? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']'
+                        : '[' + partial.join(',') + ']';
+                    gap = mind;
+                    return v;
+                }
+
+// If the replacer is an array, use it to select the members to be stringified.
+
+                if (rep && typeof rep === 'object') {
+                    length = rep.length;
+                    for (i = 0; i < length; i += 1) {
+                        if (typeof rep[i] === 'string') {
+                            k = rep[i];
+                            v = str(k, value);
+                            if (v) {
+                                partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                            }
+                        }
+                    }
+                } else {
+
+// Otherwise, iterate through all of the keys in the object.
+
+                    for (k in value) {
+                        if (Object.prototype.hasOwnProperty.call(value, k)) {
+                            v = str(k, value);
+                            if (v) {
+                                partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                            }
+                        }
+                    }
+                }
+
+// Join all of the member texts together, separated with commas,
+// and wrap them in braces.
+
+                v = partial.length === 0
+                    ? '{}'
+                    : gap
+                    ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}'
+                    : '{' + partial.join(',') + '}';
+                gap = mind;
+                return v;
+        }
+    }
+
+// If the JSON object does not yet have a stringify method, give it one.
+
+    if (typeof JSON.stringify !== 'function') {
+        JSON.stringify = function (value, replacer, space) {
+
+// The stringify method takes a value and an optional replacer, and an optional
+// space parameter, and returns a JSON text. The replacer can be a function
+// that can replace values, or an array of strings that will select the keys.
+// A default replacer method can be provided. Use of the space parameter can
+// produce text that is more easily readable.
+
+            var i;
+            gap = '';
+            indent = '';
+
+// If the space parameter is a number, make an indent string containing that
+// many spaces.
+
+            if (typeof space === 'number') {
+                for (i = 0; i < space; i += 1) {
+                    indent += ' ';
+                }
+
+// If the space parameter is a string, it will be used as the indent string.
+
+            } else if (typeof space === 'string') {
+                indent = space;
+            }
+
+// If there is a replacer, it must be a function or an array.
+// Otherwise, throw an error.
+
+            rep = replacer;
+            if (replacer && typeof replacer !== 'function' &&
+                (typeof replacer !== 'object' ||
+                    typeof replacer.length !== 'number')) {
+                throw new Error('JSON.stringify');
+            }
+
+// Make a fake root object containing our value under the key of ''.
+// Return the result of stringifying the value.
+
+            return str('', {'': value});
+        };
+    }
+
+
+// If the JSON object does not yet have a parse method, give it one.
+
+    if (typeof JSON.parse !== 'function') {
+        JSON.parse = function (text, reviver) {
+
+// The parse method takes a text and an optional reviver function, and returns
+// a JavaScript value if the text is a valid JSON text.
+
+            var j;
+
+            function walk(holder, key) {
+
+// The walk method is used to recursively walk the resulting structure so
+// that modifications can be made.
+
+                var k, v, value = holder[key];
+                if (value && typeof value === 'object') {
+                    for (k in value) {
+                        if (Object.prototype.hasOwnProperty.call(value, k)) {
+                            v = walk(value, k);
+                            if (v !== undefined) {
+                                value[k] = v;
+                            } else {
+                                delete value[k];
+                            }
+                        }
+                    }
+                }
+                return reviver.call(holder, key, value);
+            }
+
+
+// Parsing happens in four stages. In the first stage, we replace certain
+// Unicode characters with escape sequences. JavaScript handles many characters
+// incorrectly, either silently deleting them, or treating them as line endings.
+
+            text = String(text);
+            cx.lastIndex = 0;
+            if (cx.test(text)) {
+                text = text.replace(cx, function (a) {
+                    return '\\u' +
+                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+                });
+            }
+
+// In the second stage, we run the text against regular expressions that look
+// for non-JSON patterns. We are especially concerned with '()' and 'new'
+// because they can cause invocation, and '=' because it can cause mutation.
+// But just to be safe, we want to reject all unexpected forms.
+
+// We split the second stage into 4 regexp operations in order to work around
+// crippling inefficiencies in IE's and Safari's regexp engines. First we
+// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
+// replace all simple value tokens with ']' characters. Third, we delete all
+// open brackets that follow a colon or comma or that begin the text. Finally,
+// we look to see that the remaining characters are only whitespace or ']' or
+// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
+
+            if (/^[\],:{}\s]*$/
+                .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
+                    .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
+                    .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+
+// In the third stage we use the eval function to compile the text into a
+// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
+// in JavaScript: it can begin a block or an object literal. We wrap the text
+// in parens to eliminate the ambiguity.
+
+                j = eval('(' + text + ')');
+
+// In the optional fourth stage, we recursively walk the new structure, passing
+// each name/value pair to a reviver function for possible transformation.
+
+                return typeof reviver === 'function'
+                    ? walk({'': j}, '')
+                    : j;
+            }
+
+// If the text is not JSON parseable, then a SyntaxError is thrown.
+
+            throw new SyntaxError('JSON.parse');
+        };
+    }
+}());

templates/admin/default/coupon-update.html

@@ -33,6 +33,10 @@
         <script src="{$asset_url}"></script>
     {/javascripts}
 
+    {javascripts file='assets/js/json2.js'}
+        <script src="{$asset_url}"></script>
+    {/javascripts}
+
     <script>
         $(function($){
             miniBrowser(0, '/test_to_remove/datas_coupon_edit.json');
@@ -46,10 +50,10 @@
             var initRule = function() {
                 var rules = [];
                 {foreach from=$rulesObject key=k item=rule}
-                    var rule = [];
+                    var rule = {};
                     rule['serviceId'] = '{$rule.serviceId nofilter}';
-                    rule['operators'] = [];
+                    rule['operators'] = {};
-                    rule['values'] = [];
+                    rule['values'] = {};
 
                     {foreach from=$rule.validators.setOperators key=input item=operator}
                         rule['operators']['{$input nofilter}'] = '{$operator nofilter}';
@@ -63,8 +67,27 @@
 
             // Save Rules AJAX
             var saveRuleAjax = function() {
-                console.log(rules);
+                var $url = '{$urlAjaxUpdateRules}';
                 console.log('save');
+                console.log('{$urlAjaxUpdateRules}');
+                console.log(rules);
+                console.log(JSON.stringify(rules));
+                $.ajax({
+                    type: "POST",
+                    url: $url,
+                    {*data: {literal}{{/literal}rules:rules{literal}}{/literal},*}
+                    data: {literal}{{/literal}rules:JSON.stringify(rules){literal}}{/literal},
+                    statusCode: {
+                        404: function() {
+                            $('#constraint-add-operators-values').html(
+                                '{intl l='Please retry'}'
+                            );
+                        }
+                    }
+                }).done(function(data) {
+                    $('#constraint-list').html(data);
+                    $('#constraint-add-operators-values').html('');
+                });
             }
 
             // Remove 1 Rule then Save Rules AJAX
@@ -75,7 +98,7 @@
 
             // Add 1 Rule then Save Rules AJAX
             var addRuleAjax = function() {
-                rules.pop(ruleToSave);
+                rules.push(ruleToSave);
                 saveRuleAjax();
             }
 
@@ -84,6 +107,22 @@
             console.log(rules);
 
 
+            // Save rules on click
+            var onClickSaveRule = function() {
+                $('#constraint-save-btn').on('click', function (e) {
+                    addRuleAjax();
+                });
+            }
+            onClickSaveRule();
+
+            // Remove rule on click
+            var onClickDeleteRule = function() {
+                $('#constraint-delete-btn').on('click', function (e) {
+//                    removeRuleAjax();
+                });
+            }
+            onClickDeleteRule();
+
             // Reload effect inputs when changing effect
             var onEffectChange = function() {
                 $('#effect').on('change', function (e) {
@@ -96,29 +135,24 @@
             // Reload rule inputs when changing effect
             var onRuleChange = function() {
                 $('#category-rule').on('change', function (e) {
-                    $('#rule-add-operators-values').html('<div class="loading" ></div>');
+                    $('#constraint-add-operators-values').html('<div class="loading" ></div>');
                     var url = "{$urlAjaxGetRuleInput}";
                     url = url.replace('ruleId', $(this).val())
-                    console.log(url);
                     $.ajax({
                         url: url,
                         statusCode: {
                             404: function() {
-                                $('#rule-add-operators-values').html(
+                                $('#constraint-add-operators-values').html(
-                                        '{intl l='Please select another rule'}'
+                                    '{intl l='Please select another rule'}'
                                 );
                             }
                         }
                     }).done(function(data) {
-                        $('#rule-add-operators-values').html(data);
+                        $('#constraint-add-operators-values').html(data);
                     });
                 });
             }
             onRuleChange();
-
-
-
-
         });
 
 

templates/admin/default/coupon/form.html

@@ -174,22 +174,23 @@
                     <th>{intl l='Actions'}</th>
                 </tr>
                 </thead>
-                <tbody>
+                <tbody id="constraint-list">
-                    {foreach from=$rulesObject item=rule name=rulesForeach}
+                    {include file='coupon/rules.html' rules=$rulesObject}
-                        <tr>
+                    {*{foreach from=$rulesObject item=rule name=rulesForeach}*}
-                            <td>
+                        {*<tr>*}
-                                {if !$smarty.foreach.rulesForeach.first}
+                            {*<td>*}
-                                    <span class="label label-info">{intl l='And'}</span>
+                                {*{if !$smarty.foreach.rulesForeach.first}*}
-                                {/if}
+                                    {*<span class="label label-info">{intl l='And'}</span>*}
-                                {$rule.tooltip nofilter}
+                                {*{/if}*}
-                            </td>
+                                {*{$rule.tooltip nofilter}*}
+                            {*</td>*}
 
-                            <td>
+                            {*<td>*}
-                                <a href="#url" class="btn btn-default btn-primary btn-medium"><span class="glyphicon glyphicon-edit"></span> {intl l='Edit'}</a>
+                                {*<a href="#url" class="btn btn-default btn-primary btn-medium"><span class="glyphicon glyphicon-edit"></span> {intl l='Edit'}</a>*}
-                                <a href="#url" class="btn btn-default btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="glyphicon glyphicon-remove"></span> {intl l='Delete'}</a>
+                                {*<a href="#url" class="btn btn-default btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="glyphicon glyphicon-remove"></span> {intl l='Delete'}</a>*}
-                            </td>
+                            {*</td>*}
-                        </tr>
+                        {*</tr>*}
-                    {/foreach}
+                    {*{/foreach}*}
                 </tbody>
             </table>
         </div>
@@ -197,32 +198,9 @@
 
     <section class="row">
         <div class="col-md-12 general-block-decorator clearfix">
-            <table class="table table-striped">
+            <a id="constraint-save-btn" title="{intl l='Save this rule'}" class="btn btn-default btn-primary pull-right">
-                <caption class="clearfix">
+                <span class="glyphicon glyphicon-plus-sign"></span>
-                    {intl l='Add a Rule'}
+            </a>
-                    <a title="{intl l='Save this rule'}" class="btn btn-default btn-primary pull-right">
-                        <span class="glyphicon glyphicon-plus-sign"></span>
-                    </a>
-                </caption>
-                <thead>
-                <tr>
-                    <th>{intl l='Conditions link'}</th>
-                    <th>{intl l='Rule Type'}</th>
-                    <th>{intl l='Operator'}</th>
-                    <th>{intl l='Value'}</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr>
-                    <td></tr>
-                    <td></tr>
-                    <td></tr>
-                    <td></tr>
-                </td>
-                </tbody>
-            </table>
-
-
 
             <div id="rule-add-organizer" class="form-group col-md-2">
                 <label for="type">{intl l='Condition type :'}</label>
@@ -243,72 +221,72 @@
                 </select>
             </div>
 
-            <div id="rule-add-operators-values" class="form-group col-md-6">
+            <div id="constraint-add-operators-values" class="form-group col-md-6">
-                <label for="operator">{intl l='Operator :'}</label>
+                {*<label for="operator">{intl l='Operator :'}</label>*}
-                <div class="row">
+                {*<div class="row">*}
-                    <div class="col-lg-6">
+                    {*<div class="col-lg-6">*}
-                        <select name="operator" id="operator" class="form-control">
+                        {*<select name="operator" id="operator" class="form-control">*}
-                            <option value="1">is superior to</option>
+                            {*<option value="1">is superior to</option>*}
-                            <option value="2">equals to</option>
+                            {*<option value="2">equals to</option>*}
-                            <option value="3">is inferior to</option>
+                            {*<option value="3">is inferior to</option>*}
-                            <option value="4">is inferior or equals to</option>
+                            {*<option value="4">is inferior or equals to</option>*}
-                            <option value="5">is superior or equals to</option>
+                            {*<option value="5">is superior or equals to</option>*}
-                        </select>
+                        {*</select>*}
-                    </div>
+                    {*</div>*}
-                    <div class="input-group col-lg-6">
+                    {*<div class="input-group col-lg-6">*}
-                        <input type="text" name="value" class="form-control">
+                        {*<input type="text" name="value" class="form-control">*}
-                        <span class="input-group-addon">&euro;</span>
+                        {*<span class="input-group-addon">&euro;</span>*}
-                    </div>
+                    {*</div>*}
-                </div>
+                {*</div>*}
-                
+                {**}
 
-                <label for="operator">Operator :</label>
+                {*<label for="operator">Operator :</label>*}
-                <div class="row">
+                {*<div class="row">*}
-                    <div class="col-lg-6">
+                    {*<div class="col-lg-6">*}
-                        <select name="operator" id="operator" class="form-control">
+                        {*<select name="operator" id="operator" class="form-control">*}
-                            <option value="1">is superior to</option>
+                            {*<option value="1">is superior to</option>*}
-                            <option value="2">equals to</option>
+                            {*<option value="2">equals to</option>*}
-                            <option value="3">is inferior to</option>
+                            {*<option value="3">is inferior to</option>*}
-                            <option value="4">is inferior or equals to</option>
+                            {*<option value="4">is inferior or equals to</option>*}
-                            <option value="5">is superior or equals to</option>
+                            {*<option value="5">is superior or equals to</option>*}
-                        </select>
+                        {*</select>*}
-                    </div>
+                    {*</div>*}
-                    <div class="input-group col-lg-6 date" data-date="12/02/2012" data-date-format="dd/mm/yyyy">
+                    {*<div class="input-group col-lg-6 date" data-date="12/02/2012" data-date-format="dd/mm/yyyy">*}
-                        <input type="text" name="value" class="form-control">
+                        {*<input type="text" name="value" class="form-control">*}
-                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
+                        {*<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>*}
-                    </div>
+                    {*</div>*}
-                </div>
+                {*</div>*}
 
-                <label for="operator">Operator :</label>
+                {*<label for="operator">Operator :</label>*}
-                <div class="row">
+                {*<div class="row">*}
-                    <div class="col-lg-6">
+                    {*<div class="col-lg-6">*}
-                        <select name="operator" id="operator" class="form-control">
+                        {*<select name="operator" id="operator" class="form-control">*}
-                            <option value="1">is superior to</option>
+                            {*<option value="1">is superior to</option>*}
-                            <option value="2">equals to</option>
+                            {*<option value="2">equals to</option>*}
-                            <option value="3">is inferior to</option>
+                            {*<option value="3">is inferior to</option>*}
-                            <option value="4">is inferior or equals to</option>
+                            {*<option value="4">is inferior or equals to</option>*}
-                            <option value="5">is superior or equals to</option>
+                            {*<option value="5">is superior or equals to</option>*}
-                        </select>
+                        {*</select>*}
-                    </div>
+                    {*</div>*}
-                    <div class="col-lg-6">
+                    {*<div class="col-lg-6">*}
-                        <input type="text" name="value" class="form-control">
+                        {*<input type="text" name="value" class="form-control">*}
-                    </div>
+                    {*</div>*}
-                </div>
+                {*</div>*}
-                <div class="row">
+                {*<div class="row">*}
-                    <div class="col-lg-12">
+                    {*<div class="col-lg-12">*}
-                        <table class="table table-bordered">
+                        {*<table class="table table-bordered">*}
-                            <tr>
+                            {*<tr>*}
-                                <td id="minibrowser-breadcrumb"></td>
+                                {*<td id="minibrowser-breadcrumb"></td>*}
-                            </tr>
+                            {*</tr>*}
-                            <tr>
+                            {*<tr>*}
-                                <th><span class="icon-th-list"></span> Categories list</th>
+                                {*<th><span class="icon-th-list"></span> Categories list</th>*}
-                            </tr>
+                            {*</tr>*}
-                            <tr>
+                            {*<tr>*}
-                                <td id="minibrowser-categories"></td>
+                                {*<td id="minibrowser-categories"></td>*}
-                            </tr>
+                            {*</tr>*}
-                        </table>
+                        {*</table>*}
-                    </div>
+                    {*</div>*}
-                </div>
+                {*</div>*}
             </div>
         </div>
     </section>

templates/admin/default/coupon/rule-input-ajax.html

@@ -1,22 +1,23 @@
+{*{$inputs.inputs|var_dump}*}
 {foreach from=$inputs.inputs key=name item=input}
     <label for="operator">{$input.title}</label>
     <div class="row">
         <div class="col-lg-6">
-            <select class="form-control" id="{$name}[operator]" name="{$name}[operator]">
+            <select class="form-control" id="{$name}-operator" name="{$name}[operator]">
                 {foreach from=$input.availableOperators key=k item=availableOperator}
-                    <option value="{$availableOperator}">{$availableOperator}</option>
+                    <option value="{$k}">{$availableOperator}</option>
                 {/foreach}
             </select>
         </div>
         <div class="input-group col-lg-6">
             {if $input.type == 'select'}
-                <select class="{$input.class}" id="{$name}[value]" name="{$name}[value]">
+                <select class="{$input.class}" id="{$name}-value" name="{$name}[value]">
                     {foreach from=$input.availableValues key=code item=availableValue}
                         <option value="{$code}">{$availableValue}</option>
                     {/foreach}
                 </select>
             {else}
-                <input type="{$input.type}" class="{$input.class}" id="{$name}[value]" name="{$name}[value]">
+                <input type="{$input.type}" class="{$input.class}" id="{$name}-value" name="{$name}[value]">
                 {*<span class="input-group-addon">€</span>*}
             {/if}
         </div>
@@ -70,12 +71,32 @@
     {*</div>*}
 
 <script>
-    var ruleToSave = [];
+    var ruleToSave = {};
     ruleToSave['serviceId'] = '{$ruleId}';
-    ruleToSave['operators'] = [];
+    ruleToSave['operators'] = {};
-    ruleToSave['values'] = [];
+    ruleToSave['values'] = {};
     {foreach from=$inputs.inputs key=name item=input}
-        ruleToSave['operators']['{$name nofilter}'] = 'to set';
+        ruleToSave['operators']['{$name nofilter}'] = '{foreach from=$inputs.inputs[$name].availableOperators key=keyOperator item=valueOperator name=operators}{if $smarty.foreach.operators.first}{$keyOperator nofilter}{/if}{/foreach}';
-        ruleToSave['values']['{$name nofilter}'] = 'to set';
+        ruleToSave['values']['{$name nofilter}'] = '{if count($inputs.inputs[$name].availableValues) != 0}{foreach from=$inputs.inputs[$name].availableValues key=keyValue item=valueValue name=values}{if $smarty.foreach.values.first}{$keyValue nofilter}{/if}{/foreach}{else}to set{/if}';
     {/foreach}
+
+
+    // Update ruleToSave Array ready to be saved
+    var onInputsChange = function() {literal}{{/literal}
+        {foreach from=$inputs.inputs key=name item=input}
+            $('#{$name}-operator').change(function (e) {
+                var $this = $(this);
+                ruleToSave['operators']['{$name nofilter}'] = $this.val();
+                console.log('#{$name}-operator changed ' + $this.val());
+                console.log(ruleToSave);
+            });
+            $('#{$name}-value').change(function (e) {
+                var $this = $(this);
+                ruleToSave['values']['{$name nofilter}'] = $this.val();
+                console.log('#{$name}-value changed ' + $this.val());
+                console.log(ruleToSave);
+            });
+        {/foreach}
+    {literal}}{/literal}
+    onInputsChange();
 </script>

templates/admin/default/coupon/rules.html

@@ -0,0 +1,18 @@
+{foreach from=$rules item=rule name=rulesForeach}
+    <tr>
+        <td>
+            {if !$smarty.foreach.rulesForeach.first}
+                <span class="label label-info">{intl l='And'}</span>
+            {/if}
+            {$rule nofilter}
+        </td>
+        <td>
+            <a class="btn btn-default btn-primary btn-medium" href="{$urlEdit}">
+                <span class="glyphicon glyphicon-edit"></span> {intl l='Edit'}
+            </a>
+            <a data-target="#delete" data-toggle="confirm" class="btn btn-default btn-danger btn-medium" href="{$urlDelete}">
+                <span class="glyphicon glyphicon-remove"></span> {intl l='Delete'}
+            </a>
+        </td>
+    </tr>
+{/foreach}