Ajaxified product modification tabs

This commit is contained in:
franck
2013-09-21 16:51:51 +02:00
parent bb9e1d6999
commit 72a2cdfd75
10 changed files with 329 additions and 192 deletions

View File

@@ -150,22 +150,32 @@
<default key="_controller">Thelia\Controller\Admin\ProductController::updatePositionAction</default>
</route>
<!-- Related content -->
<route id="admin.products.related-content.add" path="/admin/products/related-content/add">
<route id="admin.products.general.tab" path="/admin/products/general/tab">
<default key="_controller">Thelia\Controller\Admin\ProductController::loadGeneralAjaxTabAction</default>
</route>
<!-- Product Related content and accessories -->
<route id="admin.products.related.tab" path="/admin/products/related/tab">
<default key="_controller">Thelia\Controller\Admin\ProductController::loadRelatedAjaxTabAction</default>
</route>
<!-- content -->
<route id="admin.products.related-content.add" path="/admin/products/content/add">
<default key="_controller">Thelia\Controller\Admin\ProductController::addRelatedContentAction</default>
</route>
<route id="admin.products.related-content.delete" path="/admin/products/related-content/delete">
<route id="admin.products.related-content.delete" path="/admin/products/content/delete">
<default key="_controller">Thelia\Controller\Admin\ProductController::deleteRelatedContentAction</default>
</route>
<route id="admin.product.available-related-content" path="/admin/product/{productId}/available-related-content/{folderId}.{_format}" methods="GET">
<route id="admin.product.available-related-content" path="/admin/product/{productId}/available-content/{folderId}.{_format}" methods="GET">
<default key="_controller">Thelia\Controller\Admin\ProductController::getAvailableRelatedContentAction</default>
<requirement key="_format">xml|json</requirement>
</route>
<!-- Product accessories -->
<!-- accessories -->
<route id="admin.products.accessories.add" path="/admin/products/accessory/add">
<default key="_controller">Thelia\Controller\Admin\ProductController::addAccessoryAction</default>
@@ -180,11 +190,16 @@
<requirement key="_format">xml|json</requirement>
</route>
<route id="admin.products.update-accessory-position" path="/admin/products/update-accessory-position">
<route id="admin.product.update-accessory-position" path="/admin/product/update-accessory-position">
<default key="_controller">Thelia\Controller\Admin\ProductController::updateAccessoryPositionAction</default>
</route>
<!--Features and attributes -->
<!--Product Features and attributes -->
<route id="admin.products.attributes.tab" path="/admin/products/attributes/tab">
<default key="_controller">Thelia\Controller\Admin\ProductController::loadAttributesAjaxTabAction</default>
</route>
<route id="admin.products.set-product-template" path="/admin/product/{productId}/set-product-template">
<default key="_controller">Thelia\Controller\Admin\ProductController::setProductTemplateAction</default>
</route>
@@ -195,6 +210,7 @@
<!-- Folder routes management -->
<route id="admin.folders.default" path="/admin/folders">
<default key="_controller">Thelia\Controller\Admin\FolderController::indexAction</default>
</route>

View File

@@ -77,6 +77,61 @@ class ProductController extends AbstractCrudController
);
}
/**
* General ajax tab loading
*/
public function loadGeneralAjaxTabAction() {
// Load the object
$object = $this->getExistingObject();
if ($object != null) {
// Hydrate the form abd pass it to the parser
$changeForm = $this->hydrateObjectForm($object);
// Pass it to the parser
$this->getParserContext()->addForm($changeForm);
return $this->render(
'ajax/product-general-tab',
array(
'product_id' => $this->getRequest()->get('product_id', 0),
)
);
}
$this->redirectToListTemplate();
}
/**
* Attributes ajax tab loading
*/
public function loadAttributesAjaxTabAction() {
return $this->render(
'ajax/product-attributes-tab',
array(
'product_id' => $this->getRequest()->get('product_id', 0),
)
);
}
/**
* Related information ajax tab loading
*/
public function loadRelatedAjaxTabAction() {
return $this->render(
'ajax/product-related-tab',
array(
'product_id' => $this->getRequest()->get('product_id', 0),
'folder_id' => $this->getRequest()->get('folder_id', 0),
'accessory_category_id'=> $this->getRequest()->get('accessory_category_id', 0)
)
);
}
protected function getCreationForm()
{
return new ProductCreationForm($this->getRequest());
@@ -468,7 +523,7 @@ class ProductController extends AbstractCrudController
$position = $this->getRequest()->get('position', null);
$event = new UpdatePositionEvent($mode, $position);
$event = new UpdatePositionEvent($this->getRequest()->get('accessory_id', null), $mode, $position);
$this->dispatch(TheliaEvents::PRODUCT_UPDATE_ACCESSORY_POSITION, $event);
}

View File

@@ -1,7 +1,9 @@
{loop name="product_edit" type="product" visible="*" id=$product_id backend_context="1" lang=$edit_language_id}
<div class="form-container">
<div class="row">
<div class="col-md-12">
<p></p> {* <---- FIXME Lame ! *}
<form method="POST" class="clearfix" action="{url path="/admin/product/$ID/set-product-template"}" id="product_template_form">
<input type="hidden" name="product_id" value="{$product_id}" />
@@ -54,11 +56,12 @@
<input type="hidden" name="current_tab" value="attributes" />
{include
file="includes/inner-form-toolbar.html"
hide_submit_buttons=false
close_url="{url path='/admin/categories' category_id=$DEFAULT_CATEGORY}"
}
file = "includes/inner-form-toolbar.html"
hide_submit_buttons = false
page_url = "{url path='/admin/products/update' product_id=$ID}"
close_url = "{url path='/admin/categories' category_id=$DEFAULT_CATEGORY}"
}
{* -- Begin attributes management ------------------------------- *}
@@ -181,11 +184,24 @@
{elseloop rel="product_template"}
<div class="row">
<div class="col-md-12">
<p></p> {* bouuuuuh ! *}
<p></p> {* <---- FIXME Lame ! *}
<div class="alert alert-info">
{intl l="This product is not attached to any product template. If you want to use features or attributes on this product, please select the proper template. You can define product templates in the Configuration section."}
</div>
</div>
</div>
{/elseloop}
</div>
</div>
{/loop}
<script>
$(function() {
// Unselect all options in attribute + feature tab
$('.clear_feature_value').click(function(event){
$('#feature_value_' + $(this).data('id') + ' option').prop('selected', false);
event.preventDefault();
});
});
</script>

View File

@@ -1,9 +1,16 @@
{loop name="product_edit" type="product" visible="*" id=$product_id backend_context="1" lang=$edit_language_id}
<div class="form-container">
{form name="thelia.admin.product.modification"}
<form method="POST" action="{url path='/admin/products/save'}" {form_enctype form=$form} class="clearfix">
{include file="includes/inner-form-toolbar.html" close_url="{url path='/admin/products' product_id=$product_id}"}
{include
file = "includes/inner-form-toolbar.html"
hide_submit_buttons = false
page_url = "{url path='/admin/products/update' product_id=$ID}"
close_url = "{url path='/admin/categories' category_id=$DEFAULT_CATEGORY}"
}
{* Be sure to get the product ID, even if the form could not be validated *}
<input type="hidden" name="product_id" value="{$product_id}" />
@@ -104,3 +111,4 @@
</form>
{/form}
</div>
{/loop}

View File

@@ -1,22 +1,25 @@
{loop name="product_edit" type="product" visible="*" id=$product_id backend_context="1" lang=$edit_language_id}
<div class="form-container">
{include
file="includes/inner-form-toolbar.html"
hide_submit_buttons=true
close_url="{url path='/admin/categories' category_id=$DEFAULT_CATEGORY}"
file = "includes/inner-form-toolbar.html"
hide_submit_buttons = true
page_url = "{url path='/admin/products/update' product_id=$ID}"
close_url = "{url path='/admin/categories' category_id=$DEFAULT_CATEGORY}"
}
{* -- Begin related content management -- *}
<div class="col-md-6">
<div class="form-group">
<form method="POST" action="{url path='/admin/products/related-content/add'}" id="related_content_form">
<form method="POST" action="{url path='/admin/products/content/add'}" id="related_content_form">
<p class="title title-without-tabs">{intl l='Related content'}</p>
<p>{intl l='You can attach here some content to this product'}</p>
<input type="hidden" name="product_id" value="{$product_id}" />
<input type="hidden" name="current_tab" value="content" />
<input type="hidden" name="current_tab" value="related" />
{ifloop rel="folders"}
<div class="form-group">
@@ -120,7 +123,7 @@
<p>{intl l='Define here this product\'s accessories'}</p>
<input type="hidden" name="product_id" value="{$product_id}" />
<input type="hidden" name="current_tab" value="content" />
<input type="hidden" name="current_tab" value="related" />
{ifloop rel="categories"}
<div class="form-group">
@@ -190,7 +193,7 @@
<td class="text-center">
{admin_position_block
permission="admin.products.edit"
path={url path='/admin/products/update-accessory-position' product_id=$ID}
path={url path='/admin/product/update-accessory-position' product_id=$product_id current_tab="related"}
url_parameter="accessory_id"
in_place_edit_class="accessoryPositionChange"
position=$POSITION
@@ -237,7 +240,7 @@
<input type="hidden" name="content_id" id="content_delete_id" value="" />
<input type="hidden" name="folder_id" id="folder_delete_id" value="" />
<input type="hidden" name="current_tab" value="content" />
<input type="hidden" name="current_tab" value="related" />
{/capture}
{include
@@ -247,7 +250,7 @@
dialog_title = {intl l="Remove related content"}
dialog_message = {intl l="Do you really want to remove this related content from the product ?"}
form_action = {url path='/admin/products/related-content/delete'}
form_action = {url path='/admin/products/content/delete'}
form_content = {$smarty.capture.delete_content_dialog nofilter}
}
@@ -258,7 +261,7 @@
<input type="hidden" name="accessory_id" id="accessory_delete_id" value="" />
<input type="hidden" name="accessory_category_id" id="accessory_category_delete_id" value="" />
<input type="hidden" name="current_tab" value="content" />
<input type="hidden" name="current_tab" value="related" />
{/capture}
{include
@@ -270,4 +273,136 @@
form_action = {url path='/admin/products/accessory/delete'}
form_content = {$smarty.capture.delete_accessory_dialog nofilter}
}
}
<script>
$(function() {
// Set proper content ID in delete content from
$('a.delete-content').click(function(ev) {
$('#content_delete_id').val($(this).data('id'));
$('#folder_delete_id').val($('#folder_id').val());
});
// Set proper content ID in accessory delete from
$('a.delete-accessory').click(function(ev) {
$('#accessory_delete_id').val($(this).data('id'));
$('#accessory_category_delete_id').val($('#accessory_category_id').val());
});
// Load content on folder selection
$('#folder_id').change(function(event) {
var val = $(this).val();
if (val != "") {
$.ajax({
url : '{url path="/admin/product/$product_id/available-content/"}' + $(this).val() + '.xml',
type : 'get',
dataType : 'json',
success : function(json) {
$('#content_id :not(:first-child)').remove();
var have_content = false;
$.each(json, function(idx, value) {
$('#content_id').append($('<option>').text(value.title).attr('value', value.id));
have_content = true; // Lame...
});
if (have_content) {
$('#content_selector_empty').addClass('hide');
$('#content_selector').removeClass('hide');
}
else {
$('#content_selector_empty').removeClass('hide');
$('#content_selector').addClass('hide');
}
}
});
}
else {
$('#content_selector_empty').addClass('hide');
$('#content_selector').addClass('hide');
}
});
// Load content on folder selection
$('#accessory_category_id').change(function(event) {
var val = $(this).val();
if (val != "") {
$.ajax({
url : '{url path="/admin/product/$product_id/available-accessories/"}' + $(this).val() + '.xml',
type : 'get',
dataType : 'json',
success : function(json) {
$('#accessory_id :not(:first-child)').remove();
var have_content = false;
$.each(json, function(idx, value) {
$('#accessory_id').append($('<option>').text(value.title).attr('value', value.id));
have_content = true; // Lame...
});
if (have_content) {
$('#accessory_selector_empty').addClass('hide');
$('#accessory_selector').removeClass('hide');
}
else {
$('#accessory_selector_empty').removeClass('hide');
$('#accessory_selector').addClass('hide');
}
}
});
}
else {
$('#accessory_selector_empty').addClass('hide');
$('#accessory_selector').addClass('hide');
}
});
{* Inline editing of accessory position using bootstrap-editable *}
$('.accessoryPositionChange').editable({
type : 'text',
title : '{intl l="Enter new accessory position"}',
mode : 'popup',
inputclass : 'input-mini',
placement : 'left',
success : function(response, newValue) {
// The URL template
var url = "{url noamp='1' path='/admin/product/update-accessory-position' accessory_id='__ID__' position='__POS__' product_id=$product_id current_tab='related' }";
// Perform subtitutions
url = url.replace('__ID__', $(this).data('id')).replace('__POS__', newValue);
// Reload the page
location.href = url;
}
});
// Initialize folder (id={$folder_id}) select value
{if $folder_id != 0}
$('#folder_id').val("{$folder_id}").change();
{/if}
// Initialize folder (id={$folder_id}) select value
{if $accessory_category_id != 0}
$('#accessory_category_id').val("{$accessory_category_id}").change();
{/if}
// Unselect all options in attribute + feature tab
$('.clear_feature_value').click(function(event){
$('#feature_value_' + $(this).data('id') + ' option').prop('selected', false);
event.preventDefault();
});
});
</script>
{/loop}

View File

@@ -226,6 +226,14 @@
}
}
.tab-content {
// Center loading indicator
.loading {
margin: 8em auto;
text-align: center;
}
}
// The overall form container
.form-container {
@@ -275,5 +283,8 @@
.loading{
background: url("@{imgDir}/ajax-loader.gif") no-repeat;
height: 30px;
width: 30px;
display: inline-block;
line-height: 30px;
padding-left: 40px;
width: auto;
}

View File

@@ -256,7 +256,7 @@
}
</th>
<th>&nbsp;</th>
<th class="actions">{intl l="Actions"}</th>
</tr>
</thead>
@@ -303,7 +303,7 @@
}
</td>
<td>
<td class="actions">
<div class="btn-group">
{loop type="auth" name="can_change" roles="ADMIN" permissions="admin.product.edit"}
<a class="btn btn-default btn-xs" title="{intl l='Edit this product'}" href="{url path='/admin/products/update' product_id=$ID}"><i class="glyphicon glyphicon-edit"></i></a>

View File

@@ -1,18 +1,21 @@
{*
A toolbar displayed in forms, to display language change flags, submit and close buttons.
Parameters:
- hide_submit_buttons: true / false. If true, only the close button will be deplayed.
- page_url: the current page URL. Dafault id $current_url. Used to switchedition anguage.
- close_url: no default. URL displayed when close button is clicked. If empty, the close button is not displayed.
*}
<div class="row inner-toolbar">
<div class="col-md-6 inner-actions">
{* Display the top form toolbar, with edition flags, and save buttons *}
{* When creating a new object, only default language is displayed *}
{if $action == 'create'}
{$default_only = 1}
{else}
{$default_only = 0}
{/if}
<ul class="nav nav-pills">
{loop name="lang_list" type="lang" default_only={$default_only}}
{loop name="lang_list" type="lang"}
<li {if $ID == $edit_language_id}class="active"{/if}>
<a href="{url path=$current_url edit_language_id=$ID}" title="{intl l="Edit information in %lng" lng=$TITLE}">
<a href="{url path={$page_url|default:$current_url} edit_language_id=$ID}" title="{intl l="Edit information in %lng" lng=$TITLE}">
<img src="{image file="../assets/img/flags/{$CODE}.gif"}" alt="{intl l=$TITLE}" />
</a>
</li>
@@ -22,11 +25,11 @@
<div class="col-md-6 inner-actions">
{if $hide_submit_buttons != true}
<button type="submit" name="save_mode" value="stay" class="btn btn-default btn-success" title="{intl l='Save'}">{intl l='Save'} <span class="glyphicon glyphicon-ok"></span></button>
<button type="submit" name="save_mode" value="close" class="btn btn-default btn-info" title="{intl l='Save and close'}">{intl l='Save and close'} <span class="glyphicon glyphicon-remove"></span></button>
<button type="submit" name="save_mode" value="stay" class="btn btn-default btn-success" title="{intl l='Save'}">{intl l='Save'} <span class="glyphicon glyphicon-ok"></span></button>
<button type="submit" name="save_mode" value="close" class="btn btn-default btn-info" title="{intl l='Save and close'}">{intl l='Save and close'} <span class="glyphicon glyphicon-remove"></span></button>
{/if}
{if ! empty($close_url)}
<a href="{$close_url}" class="btn btn-default">{intl l='Close'} <span class="glyphicon glyphicon-remove"></span></a>
<a href="{$close_url}" class="btn btn-default">{intl l='Close'} <span class="glyphicon glyphicon-remove"></span></a>
{/if}
</div>
</div>
</div>

View File

@@ -6,6 +6,7 @@
{block name="main-content"}
<div class="catalog edit-product">
<div id="wrapper" class="container">
{include file="includes/catalog-breadcrumb.html" editing_category="false" editing_product="true"}
@@ -40,41 +41,56 @@
<div class="col-md-12">
<ul class="nav nav-tabs" id="tabbed-menu">
<li {if $current_tab == 'general'}class="active"{/if}><a href="#general" data-toggle="tab">{intl l="General description"}</a></li>
<li {if $current_tab == 'attributes'}class="active"{/if}><a href="#attributes" data-toggle="tab">{intl l="Attributes &amp; Features"}</a></li>
<li {if $current_tab == 'content'}class="active"{/if}><a href="#content" data-toggle="tab">{intl l="Content &amp; accessories"}</a></li>
<li {if $current_tab == 'images'}class="active"{/if}><a href="#images" data-toggle="tab">{intl l="Images"}</a></li>
<li {if $current_tab == 'documents'}class="active"{/if}><a href="#documents" data-toggle="tab">{intl l="Documents"}</a></li>
<li {if $current_tab == 'modules'}class="active"{/if}><a href="#modules" data-toggle="tab">{intl l="Modules"}</a></li>
<li>
<a href="#general"
data-href="{url path='/admin/products/general/tab' product_id=$product_id}"
data-toggle="tab">{intl l="General description"}</a>
</li>
<li>
<a href="#price" data-toggle="tab">{intl l="Price"}</a>
</li>
<li><a href="#attributes"
data-href="{url path='/admin/products/attributes/tab' product_id=$product_id}"
data-toggle="tab">{intl l="Attributes &amp; Features"}</a>
</li>
<li>
<a href="#related"
data-href="{url path='/admin/products/related/tab' folder_id=$folder_id accessory_category_id=$accessory_category_id product_id=$product_id}"
data-toggle="tab">{intl l="Associations"}</a>
</li>
<li><a href="#images" data-toggle="tab">{intl l="Images"}</a></li>
<li><a href="#documents" data-toggle="tab">{intl l="Documents"}</a></li>
<li><a href="#modules" data-toggle="tab">{intl l="Modules"}</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade {if $current_tab == 'general'}active in{/if}" id="general">
{include file="includes/product-general-tab.html"}
<div class="tab-pane fade" id="general">
<div class="text-center"><span class="loading">{intl l="Please wait, loading"}</span></div>
</div>
<div class="tab-pane fade {if $current_tab == 'attributes'}active in{/if}" id="attributes">
{include file="includes/product-attributes-tab.html"}
<div class="tab-pane fade" id="attributes">
<div class="text-center"><span class="loading">{intl l="Please wait, loading"}</span></div>
</div>
<div class="tab-pane fade {if $current_tab == 'content'}active in{/if}" id="content">
{include file="includes/product-content-tab.html"}
<div class="tab-pane fade" id="related">
<div class="text-center"><span class="loading">{intl l="Please wait, loading"}</span></div>
</div>
<div class="tab-pane fade {if $current_tab == 'images'}active in{/if}" id="images">
<div class="tab-pane fade" id="images">
<div class="text-center"><span class="loading">{intl l="Please wait, loading"}</span></div>
</div>
<div class="tab-pane fade {if $current_tab == 'documents'}active in{/if}" id="documents">
<div class="tab-pane fade" id="documents">
<div class="text-center"><span class="loading">{intl l="Please wait, loading"}</span></div>
</div>
<div class="tab-pane fade {if $current_tab == 'modules'}active in{/if}" id="modules">
<div class="tab-pane fade" id="modules">
<div class="text-center"><span class="loading">{intl l="Please wait, loading"}</span></div>
</div>
</div>
</div>
@@ -116,137 +132,14 @@
<script>
$(function() {
$('.use_default_rewriten_url').click(function(ev) {
alert("Not functionnal");
ev.preventDefault();
// Atomatic ajax tab load, if data-href is defined.
$('.nav-tabs a[data-href]').on('shown.bs.tab', function(ev) {
var zis = $(this);
$(zis.attr('href')).load(zis.data('href'));
});
// Set proper content ID in delete content from
$('a.delete-content').click(function(ev) {
$('#content_delete_id').val($(this).data('id'));
$('#folder_delete_id').val($('#folder_id').val());
});
// Set proper content ID in accessory delete from
$('a.delete-accessory').click(function(ev) {
$('#accessory_delete_id').val($(this).data('id'));
$('#accessory_category_delete_id').val($('#accessory_category_id').val());
});
// Load content on folder selection
$('#folder_id').change(function(event) {
var val = $(this).val();
if (val != "") {
$.ajax({
url : '{url path="/admin/product/$product_id/available-related-content/"}' + $(this).val() + '.xml',
type : 'get',
dataType : 'json',
success : function(json) {
$('#content_id :not(:first-child)').remove();
var have_content = false;
$.each(json, function(idx, value) {
$('#content_id').append($('<option>').text(value.title).attr('value', value.id));
have_content = true; // Lame...
});
if (have_content) {
$('#content_selector_empty').addClass('hide');
$('#content_selector').removeClass('hide');
}
else {
$('#content_selector_empty').removeClass('hide');
$('#content_selector').addClass('hide');
}
}
});
}
else {
$('#content_selector_empty').addClass('hide');
$('#content_selector').addClass('hide');
}
});
// Load content on folder selection
$('#accessory_category_id').change(function(event) {
var val = $(this).val();
if (val != "") {
$.ajax({
url : '{url path="/admin/product/$product_id/available-accessories/"}' + $(this).val() + '.xml',
type : 'get',
dataType : 'json',
success : function(json) {
$('#accessory_id :not(:first-child)').remove();
var have_content = false;
$.each(json, function(idx, value) {
$('#accessory_id').append($('<option>').text(value.title).attr('value', value.id));
have_content = true; // Lame...
});
if (have_content) {
$('#accessory_selector_empty').addClass('hide');
$('#accessory_selector').removeClass('hide');
}
else {
$('#accessory_selector_empty').removeClass('hide');
$('#accessory_selector').addClass('hide');
}
}
});
}
else {
$('#accessory_selector_empty').addClass('hide');
$('#accessory_selector').addClass('hide');
}
});
{* Inline editing of accessory position using bootstrap-editable *}
$('.accessoryPositionChange').editable({
type : 'text',
title : '{intl l="Enter new accessory position"}',
mode : 'popup',
inputclass : 'input-mini',
placement : 'left',
success : function(response, newValue) {
// The URL template
var url = "{url noamp='1' path='admin/product/update-accessory-position/' accessory_id='__ID__' product_id=$product_id position='__POS__'}";
// Perform subtitutions
url = url.replace('__ID__', $(this).data('id')).replace('__POS__', newValue);
// Reload the page
location.href = url;
}
});
// Initialize folder (id={$folder_id}) select value
{if $folder_id != 0}
$('#folder_id').val("{$folder_id}").change();
{/if}
// Initialize folder (id={$folder_id}) select value
{if $accessory_category_id != 0}
$('#accessory_category_id').val("{$accessory_category_id}").change();
{/if}
// Unselect all options in attribute + feature tab
$('.clear_feature_value').click(function(event){
$('#feature_value_' + $(this).data('id') + ' option').prop('selected', false);
event.preventDefault();
});
// Load active tab
$('.nav-tabs a[href="#{$current_tab}"]').trigger("click");
});
</script>
{/block}