partial for Issue #377, ability to rearrange order of items

* return the categories for a restaurant, order by the sort field
* improved the way the field forms are shown, using the new CSS class labeled-fields
* added the category input fields to be able to rename and resort the category
* changed the JS to add the new fields to the API call to store the category changes

include/library/Crunchbutton/Restaurant.php

@@ -44,7 +44,7 @@ class Crunchbutton_Restaurant extends Cana_Table
 
 	public function categories() {
 		if (!isset($this->_categories)) {
-			$this->_categories = Category::q('select * from category where id_restaurant="'.$this->id_restaurant.'"');
+			$this->_categories = Crunchbutton_Category::q('SELECT * FROM category WHERE id_restaurant="'.$this->id_restaurant.'" ORDER BY sort ASC ');
 		}
 		return $this->_categories;
 	}
@@ -189,6 +189,7 @@ class Crunchbutton_Restaurant extends Cana_Table
 				$element                = new Crunchbutton_Category($data['id_category']);
 				$element->id_restaurant = $this->id_restaurant;
 				$element->name          = $data['name'];
+				$element->sort          = $data['sort'];
 				$element->save();
 			}
 		}

include/views/default/crunchbutton/admin/restaurants/restaurant.phtml

@@ -57,16 +57,18 @@ function _selectedCommunity(Crunchbutton_Community $current, Crunchbutton_Commun
 
 input.notification {width: 400px;}
 
-/* space between the category switcher and the dish name input */
+
-.admin-food-item-content-padding > label {
+.labeled-fields > label {
-	float: left;
+	float:         none;
-	clear: both;
+	display:       block;
+	margin-bottom: 5px;
 }
 
-.admin-food-item-content-padding > label span {
+.labeled-fields > label span {
 	display: inline-block;
 	width:   115px;
 }
+.labeled-fields .clear + label { margin-top: 5px; }
 
 </style>
 

www/assets/js/admin.js

@@ -61,6 +61,11 @@ function _loadNotification(notification) {
 		$wrapper.append(html);
 }
 
+/**
+ * Load the restaurant
+ *
+ * @return void
+ */
 function _loadRestaurant() {
 	var restaurant = this;
 	var checkswap = {
@@ -114,12 +119,25 @@ function _loadRestaurant() {
 	var categories = restaurant.categories();
 	var isDishes = false;
 
-	var $categoriesContainer = $('<div class="accordion"></div>');
+	var $categoriesContainer = $('<div id="categories" class="accordion"></div>');
 	$('.admin-restaurant-dishes .admin-restaurant-content').append($categoriesContainer);
 
+	/**
+	 * Swip all categories
+	 *
+	 * @todo Use the App.createCategory
+	 */
 	for (var i in categories) {
 		var dishes       = categories[i].dishes();
-		var $categoryTab = $('<h3 data-id_category="'+ categories[i].id_category +'">'+ categories[i].name+'</h3><div></div>');
+		var name         = categories[i].name;
+		var sort         = categories[i].sort;
+		var $categoryTab = $('<h3 data-id_category="'+ categories[i].id_category +'">'+ name+'</h3>' +
+		'<div>' +
+			'<div class="labeled-fields category">' +
+				'<label><span class="label">Name</span>       <input name="name" value="' + name + '" /></label>' +
+				'<label><span class="label">Sort Order</span> <input name="sort" value="' + sort + '" /></label>' +
+			'</div>' +
+		'</div>');
 		$categoriesContainer.append($categoryTab);
 
 		for (var x in dishes) {
@@ -141,9 +159,6 @@ function _loadRestaurant() {
 		}
 	});
 
-	// $('.accordion .ui-accordion-content').sortable().disableSelection();
-
-
 	if (!isDishes) {
 		$('input[name="dish_check"][value="0"]').prop('checked', true);
 		$('input[name="dish_check"][value="1"]').prop('checked', false);
@@ -243,21 +258,14 @@ function _newNotificationFields() {
  * @todo returned elements need to be reloaded
  */
 function _saveCategories(complete) {
-	var selector = 'input.dataset-notification, select.dataset-notification, textarea.dataset-notification';
+	var selector  = 'input , select, textarea';
-	var elements = [];
+	var container = '#categories .labeled-fields.category';
-
+	var elements  = [];
-	$('.accordion h3').each(function() {
+	$(container).each(function(){
-		var id      = $(this).attr('data-id_category');
+		var inputs = $(selector, this);
-		var element = {
+		var data   = $(this).parent().prev().data();
-			name: $(this).children().end().text()
+		data       = getValues(inputs, data);
-		};
+		elements[elements.length] = data;
-
-		if (id) {
-			element.id_category = id;
-		}
-
-		elements[elements.length] = element;
-
 	});
 
 	$.post('/api/restaurant/' + App.restaurant + '/categories', {elements: elements}, function() {
@@ -537,7 +545,7 @@ App.showDish = function(dishItem) {
 			'<span class="food-name">' + dishItem.name + '</span>' +
 			'<span class="food-price">($<span class="food-price-num">' + dishItem.price + '</span>)</span><div class="food-drop-down"></div></div>')
 	var content = $('<div class="admin-food-item-content" ' + (dishItem.id_dish ? 'style="display: none;"' : '') + '></div>');
-	var padding = $('<div class="admin-food-item-content-padding">');
+	var padding = $('<div class="admin-food-item-content-padding labeled-fields">');
 	dish.append(content);
 	content.append(padding);
 
@@ -607,6 +615,7 @@ App.showDish = function(dishItem) {
 	padding
 		.append('<input type="text" placeholder="Name" name="dish-name" class="dataset-dish clean-input dish-name" value="' + dishItem.name + '">')
 		.append('<div class="input-faker dish-price"><div class="input-faker-content">$&nbsp;</div><input type="text" placeholder="" name="dish-price" value="' + dishItem.price + '" class="dataset-dish clean-input" data-clean_type="float"><div class="divider"></div></div>')
+		.append('<div class="clear"></div>')
 		.append('<label><span>Move to category</span><select name="dish-id_category" class="dataset-dish clean-input">' + categoryOptions + '</select></label')
 		.append('<label><span>Active</span><input type="checkbox" name="dish-active" class="dataset-dish clean-input" ' + active + ' /></label')
 		.append('<label><span>Sort order</span><input name="dish-sort" class="dataset-dish clean-input" value="' + dishItem.sort + '" /></label')
@@ -633,11 +642,13 @@ App.showDish = function(dishItem) {
  * @returns void
  */
 App.createCategory = function(dialog) {
-
 	var name                 = $('[name="admin-category-name"]',dialog).val();
 	var $categoriesContainer = $('.accordion');
 	var options              = $categoriesContainer.accordion('option');
-	var $categoryTab         = $('<h3 data-id_category="">' + name + '</h3><div></div>');
+	var $categoryTab         = $('<h3 data-id_category="">' + name + '</h3><div>' +
+		'<label><span class="label">Name</span>       <input name="name" value="' + name + '" /></label>' +
+		'<label><span class="label">Sort Order</span> <input name="sort" /></label>' +
+	'</div>');
 
 	$categoriesContainer.accordion('destroy');
 	$categoriesContainer.append($categoryTab);