WIP
- Coupon Add/Edit/Delete rule AJAX
This commit is contained in:
gmorel
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
|
||||
{form name="thelia.admin.coupon.creation"}
|
||||
{include file='coupon/form.html' formAction={url path={$formAction}}}
|
||||
{include file='coupon/form.html' formAction={url path={$formAction}} noRules=true}
|
||||
{/form}
|
||||
|
||||
</section> <!-- #wrapper -->
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
|
||||
{form name="thelia.admin.coupon.creation"}
|
||||
{include file='coupon/form.html' formAction={url path={$formAction}} form=$form}
|
||||
{include file='coupon/form.html' formAction={url path={$formAction}} form=$form noRules=false}
|
||||
{/form}
|
||||
|
||||
</section> <!-- #wrapper -->
|
||||
@@ -43,11 +43,19 @@
|
||||
|
||||
|
||||
|
||||
|
||||
Array.prototype.clean = function(deleteValue) {
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
if (this[i] == deleteValue) {
|
||||
this.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
// Init Rules
|
||||
var initRule = function() {
|
||||
var initRules = function() {
|
||||
var rules = [];
|
||||
{foreach from=$rulesObject key=k item=rule}
|
||||
var rule = {};
|
||||
@@ -67,16 +75,13 @@
|
||||
|
||||
// Save Rules AJAX
|
||||
var saveRuleAjax = function() {
|
||||
console.log('rulesToSave');
|
||||
console.log(rulesToSave);
|
||||
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},
|
||||
data: {literal}{{/literal}rules:JSON.stringify(rulesToSave){literal}}{/literal},
|
||||
statusCode: {
|
||||
404: function() {
|
||||
$('#constraint-add-operators-values').html(
|
||||
@@ -91,20 +96,83 @@
|
||||
}
|
||||
|
||||
// Remove 1 Rule then Save Rules AJAX
|
||||
var removeRuleAjax = function($id) {
|
||||
rules.slice($id, 1);
|
||||
var removeRuleAjax = function(id) {
|
||||
// Delete rule in temporary array
|
||||
delete rulesToSave[id];
|
||||
rulesToSave.clean(undefined);
|
||||
|
||||
// Save
|
||||
saveRuleAjax();
|
||||
}
|
||||
|
||||
// Add 1 Rule then Save Rules AJAX
|
||||
var addRuleAjax = function() {
|
||||
rules.push(ruleToSave);
|
||||
// Add 1 Rule / or update the temporary Rules array then Save Rules via AJAX
|
||||
var addRuleAjax = function(id) {
|
||||
if(typeof id === 'number' && id % 1 == 0) {
|
||||
rulesToSave[id] = ruleToSave;
|
||||
} else {
|
||||
rulesToSave.push(ruleToSave);
|
||||
}
|
||||
|
||||
saveRuleAjax();
|
||||
}
|
||||
|
||||
// Set rule inputs to allow editing
|
||||
var updateRuleAjax = function(id) {
|
||||
ruleToSave = rulesToSave[id];
|
||||
var ruleToUpdate = ruleToSave;
|
||||
|
||||
var rules = initRule();
|
||||
console.log(rules);
|
||||
// Deleting this rule, we will reset it
|
||||
delete rulesToSave[id];
|
||||
|
||||
// Set the rule seletor
|
||||
$("#category-rule option").filter(function() {
|
||||
return $(this).val() == ruleToSave.serviceId;
|
||||
}).prop('selected', true);
|
||||
|
||||
// Force rule input refresh
|
||||
loadRuleInputs(ruleToSave.serviceId, ruleToUpdate, function(ruleToUpdate) {
|
||||
fillInRuleInputs(ruleToUpdate);
|
||||
});
|
||||
}
|
||||
|
||||
// Fill in rule inputs
|
||||
var fillInRuleInputs = function(ruleToUpdate) {
|
||||
var valueId = null;
|
||||
var operatorId = null;
|
||||
|
||||
for (idName in ruleToUpdate.operators) {
|
||||
// Setting idName operator input
|
||||
operatorId = idName + '-operator';
|
||||
$('#' + operatorId).val(ruleToUpdate.operators[idName]);
|
||||
// Setting idName value input
|
||||
valueId = idName + '-value';
|
||||
$('#' + valueId).val(ruleToUpdate.values[idName]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Reload rule inputs
|
||||
var loadRuleInputs = function(ruleId, ruleToSave, callBack) {
|
||||
$('#constraint-add-operators-values').html('<div class="loading" ></div>');
|
||||
var url = "{$urlAjaxGetRuleInput}";
|
||||
url = url.replace('ruleId', ruleId)
|
||||
$.ajax({
|
||||
url: url,
|
||||
statusCode: {
|
||||
404: function() {
|
||||
$('#constraint-add-operators-values').html(
|
||||
'{intl l='Please select another rule'}'
|
||||
);
|
||||
}
|
||||
}
|
||||
}).done(function(data) {
|
||||
$('#constraint-add-operators-values').html(data);
|
||||
return callBack(ruleToSave);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Save rules on click
|
||||
@@ -117,12 +185,24 @@
|
||||
|
||||
// Remove rule on click
|
||||
var onClickDeleteRule = function() {
|
||||
$('#constraint-delete-btn').on('click', function (e) {
|
||||
// removeRuleAjax();
|
||||
$('.constraint-delete-btn').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var $this = $(this);
|
||||
removeRuleAjax($this.attr('data-int'));
|
||||
});
|
||||
}
|
||||
onClickDeleteRule();
|
||||
|
||||
// Remove rule on click
|
||||
var onClickUpdateRule = function() {
|
||||
$('.constraint-update-btn').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var $this = $(this);
|
||||
updateRuleAjax($this.attr('data-int'));
|
||||
});
|
||||
}
|
||||
onClickUpdateRule();
|
||||
|
||||
// Reload effect inputs when changing effect
|
||||
var onEffectChange = function() {
|
||||
$('#effect').on('change', function (e) {
|
||||
@@ -135,24 +215,18 @@
|
||||
// Reload rule inputs when changing effect
|
||||
var onRuleChange = function() {
|
||||
$('#category-rule').on('change', function (e) {
|
||||
$('#constraint-add-operators-values').html('<div class="loading" ></div>');
|
||||
var url = "{$urlAjaxGetRuleInput}";
|
||||
url = url.replace('ruleId', $(this).val())
|
||||
$.ajax({
|
||||
url: url,
|
||||
statusCode: {
|
||||
404: function() {
|
||||
$('#constraint-add-operators-values').html(
|
||||
'{intl l='Please select another rule'}'
|
||||
);
|
||||
}
|
||||
}
|
||||
}).done(function(data) {
|
||||
$('#constraint-add-operators-values').html(data);
|
||||
});
|
||||
loadRuleInputs($(this).val(), null, function(ruleToSave) {});
|
||||
});
|
||||
}
|
||||
onRuleChange();
|
||||
|
||||
|
||||
|
||||
|
||||
// Rule to save
|
||||
var ruleToSave = {literal}{}{/literal};
|
||||
// Rules which will be saved
|
||||
var rulesToSave = initRules();
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -161,134 +161,122 @@
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<div class="col-md-12 general-block-decorator">
|
||||
<table class="table table-striped">
|
||||
<caption class="clearfix">
|
||||
{intl l='Rules'}
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{intl l='Conditions'}</th>
|
||||
<th>{intl l='Actions'}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="constraint-list">
|
||||
{include file='coupon/rules.html' rules=$rulesObject}
|
||||
{*{foreach from=$rulesObject item=rule name=rulesForeach}*}
|
||||
{*<tr>*}
|
||||
{*<td>*}
|
||||
{*{if !$smarty.foreach.rulesForeach.first}*}
|
||||
{*<span class="label label-info">{intl l='And'}</span>*}
|
||||
{*{/if}*}
|
||||
{*{$rule.tooltip nofilter}*}
|
||||
{*</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-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="glyphicon glyphicon-remove"></span> {intl l='Delete'}</a>*}
|
||||
{*</td>*}
|
||||
{*</tr>*}
|
||||
{*{/foreach}*}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<div class="col-md-12 general-block-decorator clearfix">
|
||||
<a id="constraint-save-btn" title="{intl l='Save this rule'}" class="btn btn-default btn-primary pull-right">
|
||||
<span class="glyphicon glyphicon-plus-sign"></span>
|
||||
</a>
|
||||
|
||||
<div id="rule-add-organizer" class="form-group col-md-2">
|
||||
<label for="type">{intl l='Condition type :'}</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="type" id="type" value="1" checked> {intl l='And'}
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="type" value="2"> {intl l='Or'}
|
||||
</label>
|
||||
{if $noRules}
|
||||
{include file='includes/notifications.html' message={intl l='Please save your Coupon in oder to affect it some application fields'}}
|
||||
{else}
|
||||
<section class="row">
|
||||
<div class="col-md-12 general-block-decorator">
|
||||
<table class="table table-striped">
|
||||
<caption class="clearfix">
|
||||
{intl l='Rules'}
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{intl l='Conditions'}</th>
|
||||
<th>{intl l='Actions'}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="constraint-list">
|
||||
{include file='coupon/rules.html' rules=$rules}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="rule-add-type" class="form-group col-md-4">
|
||||
<label for="categoryRule">{intl l='Rule\'s category :'}</label>
|
||||
<select name="categoryRule" id="category-rule" class="form-control">
|
||||
{foreach from=$availableRules item=availableRule}
|
||||
<option value="{$availableRule.serviceId}" data-description="{$availableRule.toolTip}">{$availableRule.name}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
<section class="row">
|
||||
<div class="col-md-12 general-block-decorator clearfix">
|
||||
<a id="constraint-save-btn" title="{intl l='Save this rule'}" class="btn btn-default btn-primary pull-right">
|
||||
<span class="glyphicon glyphicon-plus-sign"></span>
|
||||
</a>
|
||||
|
||||
<div id="rule-add-organizer" class="form-group col-md-2">
|
||||
<label for="type">{intl l='Condition type :'}</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="type" id="type" value="1" checked> {intl l='And'}
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="type" value="2"> {intl l='Or'}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="rule-add-type" class="form-group col-md-4">
|
||||
<label for="categoryRule">{intl l='Rule\'s category :'}</label>
|
||||
<select name="categoryRule" id="category-rule" class="form-control">
|
||||
{foreach from=$availableRules item=availableRule}
|
||||
<option value="{$availableRule.serviceId}" data-description="{$availableRule.toolTip}">{$availableRule.name}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="constraint-add-operators-values" class="form-group col-md-6">
|
||||
{*<label for="operator">{intl l='Operator :'}</label>*}
|
||||
{*<div class="row">*}
|
||||
{*<div class="col-lg-6">*}
|
||||
{*<select name="operator" id="operator" class="form-control">*}
|
||||
{*<option value="1">is superior to</option>*}
|
||||
{*<option value="2">equals to</option>*}
|
||||
{*<option value="3">is inferior to</option>*}
|
||||
{*<option value="4">is inferior or equals to</option>*}
|
||||
{*<option value="5">is superior or equals to</option>*}
|
||||
{*</select>*}
|
||||
{*</div>*}
|
||||
{*<div class="input-group col-lg-6">*}
|
||||
{*<input type="text" name="value" class="form-control">*}
|
||||
{*<span class="input-group-addon">€</span>*}
|
||||
{*</div>*}
|
||||
{*</div>*}
|
||||
{**}
|
||||
|
||||
{*<label for="operator">Operator :</label>*}
|
||||
{*<div class="row">*}
|
||||
{*<div class="col-lg-6">*}
|
||||
{*<select name="operator" id="operator" class="form-control">*}
|
||||
{*<option value="1">is superior to</option>*}
|
||||
{*<option value="2">equals to</option>*}
|
||||
{*<option value="3">is inferior to</option>*}
|
||||
{*<option value="4">is inferior or equals to</option>*}
|
||||
{*<option value="5">is superior or equals to</option>*}
|
||||
{*</select>*}
|
||||
{*</div>*}
|
||||
{*<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">*}
|
||||
{*<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>*}
|
||||
{*</div>*}
|
||||
{*</div>*}
|
||||
|
||||
{*<label for="operator">Operator :</label>*}
|
||||
{*<div class="row">*}
|
||||
{*<div class="col-lg-6">*}
|
||||
{*<select name="operator" id="operator" class="form-control">*}
|
||||
{*<option value="1">is superior to</option>*}
|
||||
{*<option value="2">equals to</option>*}
|
||||
{*<option value="3">is inferior to</option>*}
|
||||
{*<option value="4">is inferior or equals to</option>*}
|
||||
{*<option value="5">is superior or equals to</option>*}
|
||||
{*</select>*}
|
||||
{*</div>*}
|
||||
{*<div class="col-lg-6">*}
|
||||
{*<input type="text" name="value" class="form-control">*}
|
||||
{*</div>*}
|
||||
{*</div>*}
|
||||
{*<div class="row">*}
|
||||
{*<div class="col-lg-12">*}
|
||||
{*<table class="table table-bordered">*}
|
||||
{*<tr>*}
|
||||
{*<td id="minibrowser-breadcrumb"></td>*}
|
||||
{*</tr>*}
|
||||
{*<tr>*}
|
||||
{*<th><span class="icon-th-list"></span> Categories list</th>*}
|
||||
{*</tr>*}
|
||||
{*<tr>*}
|
||||
{*<td id="minibrowser-categories"></td>*}
|
||||
{*</tr>*}
|
||||
{*</table>*}
|
||||
{*</div>*}
|
||||
{*</div>*}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="constraint-add-operators-values" class="form-group col-md-6">
|
||||
{*<label for="operator">{intl l='Operator :'}</label>*}
|
||||
{*<div class="row">*}
|
||||
{*<div class="col-lg-6">*}
|
||||
{*<select name="operator" id="operator" class="form-control">*}
|
||||
{*<option value="1">is superior to</option>*}
|
||||
{*<option value="2">equals to</option>*}
|
||||
{*<option value="3">is inferior to</option>*}
|
||||
{*<option value="4">is inferior or equals to</option>*}
|
||||
{*<option value="5">is superior or equals to</option>*}
|
||||
{*</select>*}
|
||||
{*</div>*}
|
||||
{*<div class="input-group col-lg-6">*}
|
||||
{*<input type="text" name="value" class="form-control">*}
|
||||
{*<span class="input-group-addon">€</span>*}
|
||||
{*</div>*}
|
||||
{*</div>*}
|
||||
{**}
|
||||
|
||||
{*<label for="operator">Operator :</label>*}
|
||||
{*<div class="row">*}
|
||||
{*<div class="col-lg-6">*}
|
||||
{*<select name="operator" id="operator" class="form-control">*}
|
||||
{*<option value="1">is superior to</option>*}
|
||||
{*<option value="2">equals to</option>*}
|
||||
{*<option value="3">is inferior to</option>*}
|
||||
{*<option value="4">is inferior or equals to</option>*}
|
||||
{*<option value="5">is superior or equals to</option>*}
|
||||
{*</select>*}
|
||||
{*</div>*}
|
||||
{*<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">*}
|
||||
{*<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>*}
|
||||
{*</div>*}
|
||||
{*</div>*}
|
||||
|
||||
{*<label for="operator">Operator :</label>*}
|
||||
{*<div class="row">*}
|
||||
{*<div class="col-lg-6">*}
|
||||
{*<select name="operator" id="operator" class="form-control">*}
|
||||
{*<option value="1">is superior to</option>*}
|
||||
{*<option value="2">equals to</option>*}
|
||||
{*<option value="3">is inferior to</option>*}
|
||||
{*<option value="4">is inferior or equals to</option>*}
|
||||
{*<option value="5">is superior or equals to</option>*}
|
||||
{*</select>*}
|
||||
{*</div>*}
|
||||
{*<div class="col-lg-6">*}
|
||||
{*<input type="text" name="value" class="form-control">*}
|
||||
{*</div>*}
|
||||
{*</div>*}
|
||||
{*<div class="row">*}
|
||||
{*<div class="col-lg-12">*}
|
||||
{*<table class="table table-bordered">*}
|
||||
{*<tr>*}
|
||||
{*<td id="minibrowser-breadcrumb"></td>*}
|
||||
{*</tr>*}
|
||||
{*<tr>*}
|
||||
{*<th><span class="icon-th-list"></span> Categories list</th>*}
|
||||
{*</tr>*}
|
||||
{*<tr>*}
|
||||
{*<td id="minibrowser-categories"></td>*}
|
||||
{*</tr>*}
|
||||
{*</table>*}
|
||||
{*</div>*}
|
||||
{*</div>*}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
{/if}
|
||||
</form>
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
{*{$inputs.inputs|var_dump}*}
|
||||
{foreach from=$inputs.inputs key=name item=input}
|
||||
<label for="operator">{$input.title}</label>
|
||||
<div class="row">
|
||||
@@ -71,6 +70,8 @@
|
||||
{*</div>*}
|
||||
|
||||
<script>
|
||||
|
||||
// Init Rules to set
|
||||
var ruleToSave = {};
|
||||
ruleToSave['serviceId'] = '{$ruleId}';
|
||||
ruleToSave['operators'] = {};
|
||||
@@ -81,22 +82,23 @@
|
||||
{/foreach}
|
||||
|
||||
|
||||
// Update ruleToSave Array ready to be saved
|
||||
// Fill in ready to be saved rule array
|
||||
var onInputsChange = function() {literal}{{/literal}
|
||||
{foreach from=$inputs.inputs key=name item=input}
|
||||
$('#{$name}-operator').change(function (e) {
|
||||
|
||||
var $this = $(this);
|
||||
console.log('{$name}-operator changed by ' + $this.val());
|
||||
ruleToSave['operators']['{$name nofilter}'] = $this.val();
|
||||
console.log('#{$name}-operator changed ' + $this.val());
|
||||
console.log(ruleToSave);
|
||||
});
|
||||
$('#{$name}-value').change(function (e) {
|
||||
var $this = $(this);
|
||||
console.log('{$name}-value changed by ' + $this);
|
||||
ruleToSave['values']['{$name nofilter}'] = $this.val();
|
||||
console.log('#{$name}-value changed ' + $this.val());
|
||||
console.log(ruleToSave);
|
||||
});
|
||||
{/foreach}
|
||||
console.log('will save ');
|
||||
console.log(ruleToSave);
|
||||
{literal}}{/literal}
|
||||
onInputsChange();
|
||||
</script>
|
||||
@@ -1,4 +1,4 @@
|
||||
{foreach from=$rules item=rule name=rulesForeach}
|
||||
{foreach from=$rules item=rule key=i name=rulesForeach}
|
||||
<tr>
|
||||
<td>
|
||||
{if !$smarty.foreach.rulesForeach.first}
|
||||
@@ -7,10 +7,10 @@
|
||||
{$rule nofilter}
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-default btn-primary btn-medium" href="{$urlEdit}">
|
||||
<a data-int="{$i}" class="btn btn-default btn-primary btn-medium constraint-update-btn" 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}">
|
||||
<a data-int="{$i}" data-target="#delete" data-toggle="confirm" class="btn btn-default btn-danger btn-medium constraint-delete-btn" href="{$urlDelete}">
|
||||
<span class="glyphicon glyphicon-remove"></span> {intl l='Delete'}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user