Suite de mise en place de la page d'édition des coupons avec miniBrowser
This commit is contained in:
mespeche
2013-08-30 15:47:13 +02:00
parent 0d4b992bc6
commit e5f8f65f77
6 changed files with 454 additions and 82 deletions

View File

@@ -47,7 +47,7 @@
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
background-color: @endColor;
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
@@ -158,7 +158,7 @@ hr {
}
.btn-primary, .btn-large {
#gradient > .vertical(rgb(243,153,34), rgb(227,83,11));
#gradient > .vertical(rgb(243,153,34), rgb(227,83,11));
box-shadow: inset 0px 0px 2px rgba(250,250,250,0.5), 0px 1px 3px rgba(0,0,0,0.2);
color: white;
}
@@ -874,9 +874,18 @@ label {
.input-append,
.input-prepend {
&.date {
.add-on span {
span.add-on span {
display: block;
cursor: pointer;
}
}
}
}
// -- Rules form -----------------------------------------------------
.input-append{
button.add-on{
height: auto;
}
}

View File

@@ -0,0 +1,116 @@
(function($, window, document){
$(function($){
// -- Init datepicker --
if($('.date').length){
$('.date').datepicker();
}
// -- Init tablesorter --
if($('.tablesorter').length){
$('.tablesorter').tablesorter();
}
// -- Effect description
if($('[name=effect]').length){
var $effectSelect = $('[name=effect]'),
$helpBlock = $effectSelect.next('.help-block');
$effectSelect.change(function(){
var description = $(this).find(":selected").data('description');
$helpBlock.text(description);
});
}
// -- Confirm Box --
if($('[data-toggle="confirm"]').length){
$('[data-toggle="confirm"]').click(function(e){
var $link = $(this);
var modal = $(this).data('target');
$(modal).modal('show');
$(modal).on('shown', function () {
$('[data-confirm]').attr('href', $link.attr('href'));
});
if($(modal).is(':hidden')){
e.preventDefault();
}
});
}
});
}(window.jQuery, window, document));
// -- Mini browser --
function miniBrowser(root, url){
$.getJSON(url, {
root: root
})
.done(function(data) {
var resultat = data;
var breadcrumb = $('<div />');
$(resultat.breadcrumb).each(function(k, v){
breadcrumb.append(
$('<span />').html(' > '),
$('<a />').attr('href', '#').html(v.display).click(function(e){
e.preventDefault();
miniBrowser(v.url)
})
);
});
var categories = $('<div />');
$(resultat.categories).each(function(k, v){
categories.append(
$('<p />').append(
$('<a />').attr('href', '#').html(v.titre).click(function(e){
e.preventDefault();
miniBrowser(v.id)
})
)
);
});
var products = $('<div />');
$(resultat.products).each(function(k, v){
products.append(
$('<p />').append(
$('<a />').attr('href', '#').html(v.titre).click(function(e){
e.preventDefault();
$('#productToAdd_ref').val(v.ref);
$('#productToAdd_titre').val(v.titre);
$('#productToAdd_quantite').val(1);
manageStock(v.variants, v.promo?v.prix2:v.prix);
$('#productToAdd_tva').val(v.tva);
$('.productToAddInformation').show();
$('#btn_ajout_produit').show();
})
)
);
});
$('#fastBrowser_breadcrumb').unbind().empty().append(breadcrumb);
$('#fastBrowser_categories').unbind().empty().append(categories);
$('#fastBrowser_products').unbind().empty().append(products);
})
.fail(function() {
console.log('The JSON file cant be read');
});
}

View File

@@ -17,12 +17,12 @@
<div class="page-header">
<h1>Coupons : <small>Add a coupon</small></h1>
</div>
<form action="#" method="post">
<section class="row-fluid">
<div class="span12 general-block-decorator">
<form action="#" method="post">
<section class="row-fluid">
<div class="span12 general-block-decorator">
<div class="span4">
<div class="control-group">
<label for="code">Code :</label>
@@ -35,72 +35,270 @@
</div>
<div class="control-group">
<label for="available-on-special-offers" class="checkbox">
<input id="available-on-special-offers" type="checkbox" name="isAvailableOnSpecialOffers" value="1">
Is available on special offers ?
</label>
</div>
<div class="control-group">
<label for="cumulative" class="checkbox">
<input id="cumulative" type="checkbox" name="cumulative" value="1">
<input id="cumulative" type="checkbox" name="isCumulative" value="1">
Is cumulative ?
</label>
</div>
<div class="control-group">
<label for="renoving-shortage" class="checkbox">
<input id="renoving-shortage" type="checkbox" name="renoving-shortage" value="1">
Is renoving shortage ?
<label for="renoving-postage" class="checkbox">
<input id="renoving-postage" type="checkbox" name="isRemovingPostage" value="1">
Is renoving postage ?
</label>
</div>
<div class="control-group">
<label for="expiration-date">Expiration date :</label>
<div class="input-append date" data-date="12/02/2012" data-date-format="dd/mm/yyyy">
<input type="text" id="expiration-date" value="12/02/2012">
<input type="text" id="expiration-date" name="expirationDate" value="12/02/2012">
<span class="add-on"><span class="icon-th"></span></span>
</div>
</div>
<div class="control-group">
<label for="usable-max">Usable max :</label>
<input id="usable-max" type="text" name="usable-max" placeholder="usable max">
<label for="max-usage">Max usage :</label>
<input id="max-usage" type="text" name="maxUsage" placeholder="max usage">
</div>
</div>
<div class="span8">
<div class="control-group">
<label for="effect">Effect :</label>
<select name="effect" id="effect" class="span6">
<option value="1" data-description="More description n°1 about item">Remove x percents for category Y</option>
<option value="2" data-description="More description n°2 about item">Remove x percents</option>
<option value="3" data-description="More description n°3 about item">Remove x amount</option>
</select>
<span class="help-block">More description n°1 about item</span>
</div>
<div class="span6">
<div class="control-group">
<label for="effect">Effect :</label>
<select name="effect" id="effect" class="span12">
<option value="1" data-description="More description n°1 about item">Remove x percents for category Y</option>
<option value="2" data-description="More description n°2 about item">Remove x percents</option>
<option value="3" data-description="More description n°3 about item">Remove x amount</option>
</select>
<span class="help-block">More description n°1 about item</span>
</div>
</div>
<div class="span6">
<div class="control-group">
<label for="amount">Amount :</label>
<input id="amount" type="text" name="amount" placeholder="amount">
</div>
<div class="control-group">
<label for="category">Category :</label>
<select name="category" id="category">
<option value="1">Category 1</option>
<option value="1">Category 2</option>
<option value="1">Category 3</option>
</select>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="control-group">
<label for="short-description">Short description :</label>
<textarea id="short-description" name="short-description" placeholder="short description" class="span12" rows="5"></textarea>
</div>
<div class="control-group">
<label for="long-description">Long description :</label>
<textarea id="long-description" name="long-description" placeholder="long description" class="span12" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</section>
<section class="row-fluid">
<div class="span12 general-block-decorator">
<table class="table table-striped">
<caption>
Rules
<a class="btn btn-primary btn-add-item" title="Add a new rule">
<span class="icon-plus-sign icon-white"></span>
</a>
</caption>
<thead>
<tr>
<th>Conditions</th>
<th>Operator</th>
<th>Value</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Total Amount</td>
<td>>=</td>
<td>300</td>
<td>
<a href="#url" class="btn btn-primary btn-medium"><span class="icon-edit icon-white"></span> Edit</a>
<a href="#url" class="btn btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="icon-remove icon-white"></span> Delete</a>
</td>
</tr>
<tr>
<td><span class="label label-info">AND</span> NbArticleFromCategory</td>
<td>=</td>
<td>12 - Chaussettes rouges</td>
<td>
<a href="#url" class="btn btn-primary btn-medium"><span class="icon-edit icon-white"></span> Edit</a>
<a href="#url" class="btn btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="icon-remove icon-white"></span> Delete</a>
</td>
</tr>
<tr>
<td><span class="label label-info">OR</span> Date</td>
<td><=</td>
<td>12/02/2014</td>
<td>
<a href="#url" class="btn btn-primary btn-medium"><span class="icon-edit icon-white"></span> Edit</a>
<a href="#url" class="btn btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="icon-remove icon-white"></span> Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="row-fluid">
<div class="span12 general-block-decorator">
<div class="control-group span2">
<label for="type">Condition type :</label>
<label class="radio">
<input type="radio" name="type" id="type" value="1" checked> And
</label>
<label class="radio">
<input type="radio" name="type" value="2"> Or
</label>
</div>
</form>
<div class="control-group span4">
<label for="category-rule">Rule's category :</label>
<select name="categoryRule" id="category-rule">
<option value="1" selected>Total amount</option>
<option value="2">Date</option>
<option value="3">NbArtFromCategory</option>
</select>
</div>
</section>
<label for="category-rule">Rule's category :</label>
<select name="categoryRule" id="category-rule">
<option value="1">Total amount</option>
<option value="2" selected>Date</option>
<option value="3">NbArtFromCategory</option>
</select>
<label for="category-rule">Rule's category :</label>
<select name="categoryRule" id="category-rule">
<option value="1">Total amount</option>
<option value="2">Date</option>
<option value="3" selected>NbArtFromCategory</option>
</select>
</div>
<div class="control-group">
<label for="operator">Operator :</label>
<div class="controls">
<select name="operator" id="operator">
<option value="1">></option>
<option value="2">=</option>
<option value="3"><</option>
<option value="4"><=</option>
<option value="5">>=</option>
</select>
<div class="input-append">
<input type="text" name="value" class="input-mini">
<button class="add-on btn btn-primary"><span class="icon-plus icon-white"></span></button>
</div>
</div>
<label for="operator">Operator :</label>
<div class="controls">
<select name="operator" id="operator">
<option value="1">></option>
<option value="2" selected>=</option>
<option value="3"><</option>
<option value="4"><=</option>
<option value="5">>=</option>
</select>
<div class="input-append input-prepend date" data-date="12/02/2012" data-date-format="dd/mm/yyyy">
<span class="add-on"><span class="icon-th"></span></span>
<input type="text" name="value" class="input-mini">
<button class="add-on btn btn-primary"><span class="icon-plus icon-white"></span></button>
</div>
</div>
<label for="operator">Operator :</label>
<div class="controls">
<select name="operator" id="operator">
<option value="1">></option>
<option value="2" selected>=</option>
<option value="3"><</option>
<option value="4"><=</option>
<option value="5">>=</option>
</select>
<input type="text" name="value" class="input-mini">
<table class="table-bordered">
<tr>
<td colspan="2" id="fastBrowser_breadcrumb"></td>
</tr>
<tr>
<th class="span6">
<?php echo trad('categories_list', 'admin'); ?>
</th>
<th class="span6">
<?php echo trad('products_list', 'admin'); ?>
</th>
</tr>
<tr>
<td id="fastBrowser_categories"></td>
<td id="fastBrowser_products"></td>
</tr>
</table>
</div>
</div>
</div>
</section>
</form>
</section> <!-- #wrapper -->
<aside id="delete" class="modal hide fade" role="dialog">
<div class="modal-header">
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<p>Do you really want to delete this element?</p>
</div>
<div class="modal-footer">
<button class="btn btn-inverse" data-dismiss="modal">Cancel</button>
<a href="#" class="btn btn-success" data-confirm="confirm">Confirm</a>
</div>
</aside> <!-- #delete / Delete confirmation -->
{include file='includes/js.inc.html'}
{javascripts file='../assets/bootstrap-datepicker/js/bootstrap-datepicker.js'}
<script src="{$asset_url}"></script>
{/javascripts}
{javascripts file='../assets/js/main.js'}
<script src="{$asset_url}"></script>
{/javascripts}
<script>
$(function($){
// -- Init datepicker --
$('.date').datepicker();
// -- Effect description
var $effectSelect = $('[name=effect]'),
$helpBlock = $effectSelect.next('.help-block');
$effectSelect.change(function(){
var description = $(this).find(":selected").data('description');
$helpBlock.text(description);
});
miniBrowser(0, '/test_to_remove/datas_coupon_edit.json');
});
</script>

View File

@@ -180,27 +180,8 @@
<script src="{$asset_url}"></script>
{/javascripts}
<script>
// === Confirm Box === //
$('[data-toggle="confirm"]').click(function(e){
var $link = $(this);
var modal = $(this).data('target');
$(modal).modal('show');
$(modal).on('shown', function () {
$('[data-confirm]').attr('href', $link.attr('href'));
});
if($(modal).is(':hidden')){
e.preventDefault();
}
});
// === Table sorter === //
$('.tablesorter').tablesorter();
</script>
{javascripts file='../assets/js/main.js'}
<script src="{$asset_url}"></script>
{/javascripts}
{include file='includes/footer.inc.html'}

View File

@@ -99,25 +99,8 @@
<script src="{$asset_url}"></script>
{/javascripts}
<script>
// === Confirm Box === //
$('[data-toggle="confirm"]').click(function(e){
var $link = $(this);
var modal = $(this).data('target');
$(modal).modal('show');
$(modal).on('shown', function () {
$('[data-confirm]').attr('href', $link.attr('href'));
});
if($(modal).is(':hidden')){
e.preventDefault();
}
});
</script>
{javascripts file='../assets/js/main.js'}
<script src="{$asset_url}"></script>
{/javascripts}
{include file='includes/footer.inc.html'}

View File

@@ -0,0 +1,85 @@
{
"breadcrumb" : [
{
"url" : "0",
"display" : "Racine",
"edit" : "",
"browse" : ""
}
],
"categories" : [
{
"id" : "1",
"ligne" : "1",
"classement" : "1",
"titre" : "Boyaux",
"langue_courante" : true,
"parent" : 0
},
{
"id" : "18",
"ligne" : "1",
"classement" : "2",
"titre" : "Epices \/ condiments",
"langue_courante" : true,
"parent" : 0
},
{
"id" : "100",
"ligne" : "1",
"classement" : "3",
"titre" : "Emballage",
"langue_courante" : true,
"parent" : 0
},
{
"id" : "194",
"ligne" : "1",
"classement" : "4",
"titre" : "Petits mat\u00e9riels",
"langue_courante" : true,
"parent" : 0
},
{
"id" : "355",
"ligne" : "1",
"classement" : "5",
"titre" : "Materiel de cuisine",
"langue_courante" : true,
"parent" : 0
},
{
"id" : "426",
"ligne" : "0",
"classement" : "6",
"titre" : "Bacs",
"langue_courante" : true,
"parent" : 0
},
{
"id" : "458",
"ligne" : "1",
"classement" : "7",
"titre" : "Hygi\u00e8ne & entretien",
"langue_courante" : true,
"parent" : 0
},
{
"id" : "592",
"ligne" : "1",
"classement" : "8",
"titre" : "Art de la table",
"langue_courante" : true,
"parent" : 0
},
{
"id" : "601",
"ligne" : "1",
"classement" : "9",
"titre" : "Mat\u00e9riels",
"langue_courante" : true,
"parent" : 0
}
],
"products":[]
}