* Finished with managing service categories (backend services page)

src/application/controllers/backend_api.php

@@ -1,7 +1,7 @@
 <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
 /**
- * Contains all the backend ajax calls
+ * Contains all the backend ajax calls.
  */
 class Backend_api extends CI_Controller {
     /**
@@ -452,7 +452,7 @@ class Backend_api extends CI_Controller {
     }
     
     /**
-     * Save (insert or update) a customer record.
+     * [AJAX] Save (insert or update) a customer record.
      * 
      * @param array $_POST['customer'] JSON encoded array that contains the customer's data.
      */
@@ -470,7 +470,7 @@ class Backend_api extends CI_Controller {
     }
     
     /**
-     * Delete customer from database.
+     * [AJAX] Delete customer from database.
      * 
      * @param numeric $_POST['customer_id'] Customer record id to be deleted.
      */
@@ -486,6 +486,11 @@ class Backend_api extends CI_Controller {
         }
     }
     
+    /**
+     * [AJAX] Save (insert or update) service record.
+     * 
+     * @param array $_POST['service'] Contains the service data (json encoded).
+     */
     public function ajax_save_service() {
         try {
             $this->load->model('services_model');
@@ -499,6 +504,11 @@ class Backend_api extends CI_Controller {
         }
     }
     
+    /**
+     * [AJAX] Delete service record from database.
+     * 
+     * @param numeric $_POST['service_id'] Record id to be deleted.
+     */
     public function ajax_delete_service() {
         try {
             $this->load->model('services_model');
@@ -511,6 +521,12 @@ class Backend_api extends CI_Controller {
         }
     }
     
+    /**
+     * [AJAX] Filter service records by given key string.
+     * 
+     * @param string $_POST['key'] Key string used to filter the records.
+     * @return array Returns a json encoded array back to client.
+     */
     public function ajax_filter_services() {
         try {
             $this->load->model('services_model');
@@ -528,6 +544,12 @@ class Backend_api extends CI_Controller {
         }
     }
     
+    /**
+     * [AJAX] Save (insert or update) category record.
+     * 
+     * @param array $_POST['category'] Json encoded array with the category data. If an id
+     * value is provided then the category is going to be udpated instead of inserted.
+     */
     public function ajax_save_service_category() {
         try {
             $this->load->model('services_model');
@@ -541,10 +563,15 @@ class Backend_api extends CI_Controller {
         }
     }
     
+    /**
+     * [AJAX] Delete category record from database.
+     * 
+     * @param numeric $_POST['category_id'] Record id to be deleted.
+     */
     public function ajax_delete_service_category() {
         try {
             $this->load->model('services_model');
-            $result = $this->services_model->delete($_POST['category_id']);
+            $result = $this->services_model->delete_category($_POST['category_id']);
             echo ($result) ? json_encode(AJAX_SUCCESS) : json_encode(AJAX_FAILURE);
         } catch(Exception $exc) {
             echo json_encode(array(
@@ -553,12 +580,18 @@ class Backend_api extends CI_Controller {
         }
     }
     
+    /**
+     * [AJAX] Filter services categories with key string.
+     * 
+     * @param string $_POST['key'] The key string used to filter the records.
+     * @return array Returns a json encoded array back to client with the category records.
+     */
     public function ajax_filter_service_categories() {
         try {
             $this->load->model('services_model');
             $key = $_POST['key']; // @task sql injection
             $where = '(name LIKE "%' . $key . '%" OR description LIKE "%' . $key . '%")';
-            $categories = $this->services_model->get_categories($where);
+            $categories = $this->services_model->get_all_categories($where);
             echo json_encode($categories);
         } catch(Exception $exc) {
             echo json_encode(array(

src/application/views/backend/services.php

@@ -64,10 +64,10 @@
             <input type="text" id="service-name" class="span7 required" />
             
             <label for="service-duration">Duration *</label>
-            <input type="text" id="service-duration"  />
+            <input type="text" id="service-duration" class="required"  />
             
             <label for="service-price">Price *</label>
-            <input type="text" id="service-price" class="span7" />
+            <input type="text" id="service-price" class="span7 required" />
             
             <label for="service-currency">Currency</label>
             <input type="text" id="service-currency" class="span7" />
@@ -87,8 +87,8 @@
     <div id="categories" class="tab-content" style="display:none;">
         <div class="filter span4">
             <div class="input-append">
-                <input class="span12" type="text" class="filter-key" />
+                <input class="filter-key span12" type="text" class="" />
-                <button type="button" class="btn" class="filter-categories">Filter</button>
+                <button class="filter-categories btn" type="button">Filter</button>
             </div>
 
             <h2>Categories</h2>
@@ -122,6 +122,8 @@
             <h2>Details</h2>
             <div class="form-message alert" style="display:none;"></div>
             
+            <input type="hidden" id="category-id" />
+            
             <label for="category-name">Name *</label>
             <input type="text" id="category-name" class="span7 required" />
             

src/assets/css/backend.css

@@ -92,6 +92,11 @@ root {
 #services-page .details select, 
 #services-page .details textarea { background-color: white; cursor: pointer; }
 
+#services-page #categories .category-row { padding: 10px 7px; border-radius: 3px; }
+#services-page #categories .category-row:hover { background-color: #C6E7D5; cursor: pointer; }
+
+
+
 /* BACKEND PROVIDERS PAGE
    -------------------------------------------------------------------- */
 

src/assets/js/backend_services.js

@@ -65,6 +65,10 @@ var BackendServices = {
                 $('#categories').show();
                 BackendServices.helper = new CategoriesHelper();
             }
+            
+            BackendServices.helper.resetForm();
+            BackendServices.helper.filter('');
+            $('.filter-key').val('');
         });
         
         /**
@@ -77,28 +81,63 @@ var BackendServices = {
             BackendServices.helper.filter(key);
         });
         
+        /**
+         * Event: Filter Categories Button "Click"
+         */
+        $('.filter-categories').click(function() {
+            var key = $('#categories .filter-key').val();
+            $('.selected-row').removeClass('selected-row');
+            BackendServices.helper.resetForm();
+            BackendServices.helper.filter(key);
+        });
+        
         /**
          * Event: Filter Service Row "Click"
          * 
          * Display the selected service data to the user.
          */
         $(document).on('click', '.service-row', function() {
-            var service = { 'id': $(this).attr('data-id') };
+            if ($('#services .filter-services').prop('disabled')) {
+                $('#services .filter-results').css('color', '#AAA');
+                return; // exit because we are on edit mode
+            }
             
+            var service = { 'id': $(this).attr('data-id') };
             $.each(BackendServices.helper.filterResults, function(index, item) {
                 if (item.id === service.id) {
                     service = item;
                     return;
                 }
             });
-            
             BackendServices.helper.display(service);
-            
             $('.selected-row').removeClass('selected-row');
             $(this).addClass('selected-row');
             $('#edit-service, #delete-service').prop('disabled', false);
         });
         
+        /**
+         * Event: Filter Categories Row "Click"
+         * 
+         * Displays the selected row data on the right side of the page.
+         */
+        $(document).on('click', '.category-row', function() {
+            if ($('#categories .filter-categories').prop('disabled')) {
+                $('#categories .filter-results').css('color', '#AAA');
+                return; // exit because we are on edit mode
+            }
+            var category = { 'id': $(this).attr('data-id') };
+            $.each(BackendServices.helper.filterResults, function(index, item) {
+                if (item.id === category.id) {
+                    category = item;
+                    return;
+                }
+            });
+            BackendServices.helper.display(category);
+            $('.selected-row').removeClass('selected-row');
+            $(this).addClass('selected-row');
+            $('#edit-category, #delete-category').prop('disabled', false);
+        });
+        
         /**
          * Event: Add New Service Button "Click"
          */
@@ -109,6 +148,20 @@ var BackendServices = {
             $('#services .details').find('input, textarea').prop('readonly', false);
             $('#services .details').find('select').prop('disabled', false);
             $('#service-duration').spinner('enable');
+            $('#services .filter-services').prop('disabled', true);
+            $('#services .filter-results').css('color', '#AAA');
+        });
+        
+        /**
+         * Event: Add Category Button "Click"
+         */
+        $('#add-category').click(function() {
+            BackendServices.helper.resetForm();
+            $('#categories .add-edit-delete-group').hide();
+            $('#categories .save-cancel-group').show();
+            $('#categories .details').find('input, textarea').prop('readonly', false);
+            $('#categories .filter-categories').prop('disabled', true);
+            $('#categories .filter-results').css('color', '#AAA');
         });
         
         /**
@@ -120,6 +173,13 @@ var BackendServices = {
             BackendServices.helper.resetForm();
         });
         
+        /**
+         * Event: Cancel Category Button "Click"
+         */
+        $('#cancel-category').click(function() {
+            BackendServices.helper.resetForm();
+        });
+        
         /**
          * Event: Save Service Button "Click"
          */
@@ -147,6 +207,24 @@ var BackendServices = {
             BackendServices.helper.save(service);
         });
         
+        /**
+         * Event: Categories Save Button "Click"
+         */
+        $('#save-category').click(function() {
+            var category = {
+                'name': $('#category-name').val(),
+                'description': $('#category-description').val()
+            };
+            
+            if ($('#category-id').val() !== '') {
+                category.id = $('#category-id').val();
+            }
+            
+            if (!BackendServices.helper.validate(category)) return;
+            
+            BackendServices.helper.save(category);
+        });
+        
         /**
          * Event: Edit Service Button "Click"
          */
@@ -154,12 +232,23 @@ var BackendServices = {
             $('#services .add-edit-delete-group').hide();
             $('#services .save-cancel-group').show();
             $('.filter-services').prop('disabled', true);
-            
+            $('#services .filter-results').css('color', '#AAA');
             $('#services .details').find('input, textarea').prop('readonly', false);
             $('#services .details select').prop('disabled', false);
             $('#service-duration').spinner('enable');
         });
         
+        /**
+         * Event: Edit Category Button "Click"
+         */
+        $('#edit-category').click(function() {
+            $('#categories .add-edit-delete-group').hide();
+            $('#categories .save-cancel-group').show();
+            $('.filter-categories').prop('disabled', true);
+            $('#categories .filter-results').css('color', '#AAA');
+            $('#categories .details').find('input, textarea').prop('readonly', false);
+        });
+        
         /**
          * Event: Delete Service Button "Click"
          */
@@ -179,6 +268,23 @@ var BackendServices = {
             GeneralFunctions.displayMessageBox('Delete Service', 'Are you sure that you want '
                     + 'to delete this record? This action cannot be undone.', messageBtns);
         });
+        
+        $('#delete-category').click(function() {
+            var categoryId = $('#category-id').val();
+            
+            var messageBtns = {
+                'Delete': function() {
+                    BackendServices.helper.delete(categoryId);
+                    $('#message_box').dialog('close');
+                },
+                'Cancel': function() {
+                    $('#message_box').dialog('close');
+                }
+            };
+            
+            GeneralFunctions.displayMessageBox('Delete Category', 'Are you sure that you want '
+                    + 'to delete this record? This action cannot be undone.', messageBtns);
+        });
     }
 };
 
@@ -226,10 +332,10 @@ ServicesHelper.prototype.delete = function(id) {
         
         if (!Backend.handleAjaxExceptions(response)) return;
         
-        Backend.displayNotification('Services deleted successfully!');
+        Backend.displayNotification('Service deleted successfully!');
         
         BackendServices.helper.resetForm();
-        BackendServices.helper.filter($('.filter-services').val());
+        BackendServices.helper.filter($('#services .filter-key').val());
     });
 };
 
@@ -273,6 +379,7 @@ ServicesHelper.prototype.resetForm = function() {
     $('#services .details').find('input, textarea').prop('readonly', true);
     $('#service-category').prop('disabled', true);
     $('.filter-services').prop('disabled', false);
+    $('#services .filter-results').css('color', '');
 };
 
 /**
@@ -351,7 +458,7 @@ var CategoriesHelper = function() {
  * @param {string} key This key string is used to filter the category records.
  */
 CategoriesHelper.prototype.filter = function(key) {
-    var postUrl = GlobalVariables.baseUrl + 'backend_api/ajax_filter_categories';
+    var postUrl = GlobalVariables.baseUrl + 'backend_api/ajax_filter_service_categories';
     var postData = { 'key': key };
     
     $.post(postUrl, postData, function(response) {
@@ -361,6 +468,7 @@ CategoriesHelper.prototype.filter = function(key) {
         
         if (!Backend.handleAjaxExceptions(response)) return;
         
+        BackendServices.helper.filterResults = response;
         $('#categories .filter-results').html('');
         $.each(response, function(index, category) {
            var html = BackendServices.helper.getFilterHtml(category);
@@ -376,7 +484,20 @@ CategoriesHelper.prototype.filter = function(key) {
  * @param {object} category Contains the category data.
  */
 CategoriesHelper.prototype.save = function(category) {
+    var postUrl = GlobalVariables.baseUrl + 'backend_api/ajax_save_service_category';
+    var postData = { 'category': JSON.stringify(category) };
     
+    $.post(postUrl, postData, function(response) {
+        ///////////////////////////////////////////////////////////
+        console.log('Save Service Category Response:', response);
+        ///////////////////////////////////////////////////////////
+        
+        if (!Backend.handleAjaxExceptions(response)) return;
+        
+        Backend.displayNotification('Service saved successfully!');
+        BackendServices.helper.resetForm();
+        BackendServices.helper.filter($('#categories .filter-key').val());
+    });
 };
 
 /**
@@ -385,7 +506,21 @@ CategoriesHelper.prototype.save = function(category) {
  * @param {int} id Record id to be deleted.
  */
 CategoriesHelper.prototype.delete = function(id) {
+    var postUrl = GlobalVariables.baseUrl + 'backend_api/ajax_delete_service_category';
+    var postData = { 'category_id': id };
     
+    $.post(postUrl, postData, function(response) {
+        ////////////////////////////////////////////////////
+        console.log('Delete category response:', response);
+        ////////////////////////////////////////////////////
+        
+        if (!Backend.handleAjaxExceptions(response)) return;
+        
+        Backend.displayNotification('Category deleted successfully!');
+        
+        BackendServices.helper.resetForm();
+        BackendServices.helper.filter($('#categories .filter-key').val());
+    });
 };
 
 /**
@@ -394,7 +529,9 @@ CategoriesHelper.prototype.delete = function(id) {
  * @param {object} category Contains the category data.
  */
 CategoriesHelper.prototype.display = function(category) {
-    
+    $('#category-id').val(category.id);
+    $('#category-name').val(category.name);
+    $('#category-description').val(category.description);
 };
 
 /**
@@ -403,14 +540,37 @@ CategoriesHelper.prototype.display = function(category) {
  * @param {object} category Contains the category data.
  */
 CategoriesHelper.prototype.validate = function(category) {
+    $('#categories .details').find('input, textarea').css('border', '');
     
+    try {
+        var missingRequired = false;
+        $('#categories .required').each(function() {
+            if ($(this).val() == '' || $(this).val() == undefined) {
+                $(this).css('border', '2px solid red');
+                missingRequired = true;
+            }
+        });
+        if (missingRequired) throw 'Required field is missing.';
+        
+        return true;
+        
+    } catch(exc) {
+        console.log('Category Record Validation Exc:', exc);
+        return false;
+    }
 };
 
 /**
  * Bring the category form back to its initial state.
  */
 CategoriesHelper.prototype.resetForm = function() {
-    
+    $('#categories .add-edit-delete-group').show();
+    $('#categories .save-cancel-group').hide();
+    $('#categories .details').find('input, textarea').val('');
+    $('#categories .details').find('input, textarea').prop('readonly', true);
+    $('#edit-category, #delete-category').prop('disabled', true);
+    $('#categories .filter-results').css('color', '');
+    $('#categories .filter-categories').prop('disabled', false);
 };
 
 /**
@@ -419,10 +579,10 @@ CategoriesHelper.prototype.resetForm = function() {
  * @param {object} category Contains the category data.
  * @return {string} Returns the record html code.
  */
-CategoriesHelper.prototype.getFilterHtml = function(category) {
+CategoriesHelper.prototype.getFilterHtml = function(category) {    
     var html =
             '<div class="category-row" data-id="' + category.id + '">' + 
-                '<strong>' + category.name + '</strong>' + 
+                '<strong>' + category.name + '</strong>' +
             '</div>';
 
     return html;