Browse Source

Updating tree when adding elements see #1791

Julio Montoya 13 years ago
parent
commit
3cb034902a

+ 15 - 4
main/inc/lib/javascript/skills.js

@@ -105,8 +105,10 @@
         load_parent(numeric_parent_id, numeric_id);
     }
     
-    /* When clicking a children block */
-   
+    /* When clicking a children block 
+        @param string block id i.e "block_1" 
+     * */
+    
     function open_block(id) {
         console.log("open_block id : " + id);      
         var numeric_id = id.split('_')[1];  
@@ -217,10 +219,19 @@
     function checkLength( o, n, min, max ) {
         if ( o.val().length > max || o.val().length < min ) {
             o.addClass( "ui-state-error" );
-            updateTips( "Length of " + n + " must be between " +
-                min + " and " + max + "." );
+            updateTips( "Length of " + n + " must be between " +min + " and " + max + "." );
             return false;
         } else {
             return true;
         }
+    }
+    
+    function updateTips( t ) {
+        tips = $( ".validateTips" )
+        tips
+            .text( t )
+            .addClass( "ui-state-highlight" );
+        setTimeout(function() {
+            tips.removeClass( "ui-state-highlight", 1500 );
+        }, 500 );
     }

+ 16 - 0
main/inc/lib/model.lib.php

@@ -13,6 +13,8 @@ class Model {
     
     var $table;
     var $columns;
+    var $required;
+    
     // var $pk; some day this will be implemented
     
 	public function __construct() {        
@@ -103,6 +105,20 @@ class Model {
 	public function save($params, $show_query = false) {
         $params = $this->clean_parameters($params);
         
+        
+        if (!empty($this->required)) {
+            $require_ok = true;     
+            $kay_params = array_keys($params);
+            foreach ($this->required as $field) {
+                if (!in_array($field, $kay_params)) {
+                    $require_ok = false;
+                }
+            }
+            if (!$require_ok) {
+                return false;                
+            }
+        }
+        
         if (in_array('created_at', $this->columns)) {        	
             $params['created_at'] = api_get_utc_datetime();
         }

+ 3 - 1
main/inc/lib/skill.lib.php

@@ -272,7 +272,8 @@ class SkillRelUser extends Model {
    
 
 class Skill extends Model {    
-    var $columns = array('id', 'name','description', 'access_url_id');
+    var $columns  = array('id', 'name','description', 'access_url_id');
+    var $required = array('name');
     
     public function __construct() {
         $this->table                      = Database::get_main_table(TABLE_MAIN_SKILL);
@@ -384,6 +385,7 @@ class Skill extends Model {
         $skill_rel_gradebook = new SkillRelGradebook();
         
         //Saving name, description
+        
         $skill_id = $this->save($params);
         if ($skill_id) {
             //Saving skill_rel_skill (parent_id, relation_type)

+ 59 - 118
main/template/default/skill/skill_tree.tpl

@@ -49,7 +49,57 @@ jsPlumb.bind("ready", function() {
         }
     );
     
-    //On box click -(we use live instead of bind because we're creating divs on the fly )
+    //Add button
+    
+    $("#add_item_link").click(function() {        
+        $("#name").attr('value', '');
+        $("#description").attr('value', '');
+        
+        $("#parent_id option:selected").removeAttr('selected');
+        $("#gradebook_id option:selected").removeAttr('selected');       
+        
+        $("#dialog-form").dialog("open");                      
+    });    
+    
+    var name = $( "#name" ),
+    description = $( "#description" ),  
+    allFields = $( [] ).add( name ).add( description ), tips = $(".validateTips");    
+    
+    //Add button process
+    
+    $("#dialog-form").dialog({              
+        buttons: {
+            "Add" : function() {                
+                var bValid = true;
+                bValid = bValid && checkLength( name, "name", 1, 255 );
+                
+                if (bValid) {
+                    var params = $("#add_item").serialize();
+                          
+                    $.ajax({
+                        url: url+'&a=add&'+params,
+                        success:function(data) {
+                            
+                            //new window
+                            parent_id = $("#parent_id option:selected").attr('value');
+                            
+                        
+                            //Great stuff                         
+                            open_block('block_'+parent_id);
+                                                                     
+                            $("#dialog-form").dialog("close");                                      
+                        }                           
+                    });
+                }
+            },            
+        },              
+        close: function() {     
+            $("#name").attr('value', '');
+            $("#description").attr('value', '');                
+        }
+    });   
+    
+    //Clicking a box skill (we use live instead of bind because we're creating divs on the fly )
     $(".open_block").live('click', function() {        
         var id = $(this).attr('id');
         
@@ -107,6 +157,7 @@ jsPlumb.bind("ready", function() {
         console.log('hidden_parent : ' + hidden_parent);         
     });
     
+    //Skill title click  
     $(".edit_block").live('click',function() {        
         var my_id = $(this).attr('id');
         my_id = my_id.split('_')[2];
@@ -138,62 +189,8 @@ jsPlumb.bind("ready", function() {
         return false;
     });
         
-    //Filling select
-    $("#add_item_link").click(function() {        
-        
-        $("#name").attr('value', '');
-        $("#description").attr('value', '');
-        
-        $("#parent_id option:selected").removeAttr('selected');
-        $("#gradebook_id option:selected").removeAttr('selected');       
-        
-        $("#dialog-form").dialog("open");
-                      
-    });    
     
-    var name = $( "#name" ),
-    description = $( "#description" ),  
-    allFields = $( [] ).add( name ).add( description ), tips = $(".validateTips");    
-    
-    $("#dialog-form").dialog({              
-        buttons: {
-            "Add" : function() {                
-                var bValid = true;
-                bValid = bValid && checkLength( name, "name", 1, 255 );
-                var params = $("#add_item").serialize();          
-                      
-                $.ajax({
-                    url: url+'&a=add&'+params,
-                    success:function(data) {
-                             
-                        /*jsPlumb.connect({
-                            source : "block_2", 
-                            target : "block_1",
-                            overlays : overlays            
-                        });*/
-                        
-                        /*
-                        calEvent.title          = $("#name").val();
-                        calEvent.start          = calEvent.start;
-                        calEvent.end            = calEvent.end;
-                        calEvent.allDay         = calEvent.allDay;
-                        calEvent.description    = $("#content").val();                              
-                        calendar.fullCalendar('updateEvent', 
-                                calEvent,
-                                true // make the event "stick"
-                        );*/
-                        
-                        $("#dialog-form").dialog("close");                                      
-                    }                           
-                });
-            },            
-        },              
-        close: function() {     
-            $("#name").attr('value', '');
-            $("#description").attr('value', '');                
-        }
-    });    
- 
+    //
     $(".window").bind('click', function() {
         var id = $(this).attr('id');
         id = id.split('_')[1];        
@@ -249,74 +246,26 @@ jsPlumb.bind("ready", function() {
             jsPlumb.Defaults.Endpoint       = "Rectangle";
             jsPlumb.Defaults.Anchors        = ["TopCenter", "TopCenter"];
 
-            var connections = [];
-            var updateConnections = function(conn, remove) {
-                if (!remove) connections.push(conn);
-                else {
-                    var idx = -1;
-                    for (var i = 0; i < connections.length; i++) {
-                        if (connections[i] == conn) {
-                            idx = i; break;
-                        }
-                    }
-                    if (idx != -1) connections.splice(idx, 1);
-                }
-                if (connections.length > 0) {
-                    var s = "<span>current connections</span><br/><br/><table><tr><th>scope</th><th>source</th><th>target</th></tr>";
-                    for (var j = 0; j < connections.length; j++) {
-                        s = s + "<tr><td>" + connections[j].scope + "</td>" + "<td>" + connections[j].sourceId + "</td><td>" + connections[j].targetId + "</td></tr>";
-                    }
-                    jsPlumbDemo.showConnectionInfo(s);
-                } else 
-                    jsPlumbDemo.hideConnectionInfo();
-            };              
+            
 
             jsPlumb.bind("jsPlumbConnection", function(e) {
-                updateConnections(e.connection);
+                //updateConnections(e.connection);
             });
             jsPlumb.bind("jsPlumbConnectionDetached", function(e) {
-                updateConnections(e.connection, true);
-            });
-
-            
-
-            /**
-                first example endpoint.  it's a 25x21 rectangle (the size is provided in the 'style' arg to the Endpoint), and it's both a source
-                and target.  the 'scope' of this Endpoint is 'exampleConnection', meaning any connection starting from this Endpoint is of type
-                'exampleConnection' and can only be dropped on an Endpoint target that declares 'exampleEndpoint' as its drop scope, and also that
-                only 'exampleConnection' types can be dropped here.
-
-                the connection style for this endpoint is a Bezier curve (we didn't provide one, so we use the default), with a lineWidth of
-                5 pixels, and a gradient.
-
-                note the use of the '$.extend' function to setup generic connection types.  this will save you a lot of typing, and probably
-                errors.
-
-            */
-                // this is the paint style for the connecting lines..
-                        
+                //updateConnections(e.connection, true);
+            });                        
             
             jsPlumb.Defaults.Overlays = [
                 //[ "Arrow", { location:0.5 } ],  if you want to add an arrow in the connection          
             ];
-            
-            
                            
             jsPlumb.setMouseEventsEnabled(true);
             
             {$js}
-            // three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
-            //jsPlumb.draggable("window1");
-            //jsPlumb.draggable(["window1", "window2"]);
-            //jsPlumb.draggable($("#window1"));
+
             var divsWithWindowClass = jsPlumbDemo.getSelector(".window");
             jsPlumb.draggable(divsWithWindowClass);
 
-            // add the third example using the '.window' class.             
-            //jsPlumb.addEndpoint(divsWithWindowClass, exampleEndpoint3);
-
-            // each library uses different syntax for event stuff, so it is handed off
-            // to the draggableConnectorsDemo-<library>.js files.
             jsPlumbDemo.attachBehaviour();          
         }
     };
@@ -345,15 +294,6 @@ $(document).ready( function() {
 
 ;(function() {
     
-    jsPlumbDemo.showConnectionInfo = function(s) {
-        $("#list").html(s);
-        $("#list").fadeIn({ complete:function() { jsPlumb.repaintEverything(); }});
-    };
-    
-    jsPlumbDemo.hideConnectionInfo = function() {
-        $("#list").fadeOut({ complete:function() { jsPlumb.repaintEverything(); }});
-    };
-    
     jsPlumbDemo.getSelector = function(spec) {
         return $(spec);
     };
@@ -389,6 +329,7 @@ $(document).ready( function() {
 
 <div id="dialog-form" style="display:none;">
     
+    <p class="validateTips"></p>
     <form id="add_item" name="form">
         <input type="hidden" name="id" id="id"/>
         <div class="row">

+ 14 - 60
main/template/default/skill/skill_tree_student.tpl

@@ -33,9 +33,8 @@ jsPlumb.bind("ready", function() {
         autoOpen: false,
         modal   : true, 
         width   : 550, 
-        height  : 480,
+        height  : 350,
     });
-   
     
     //On box click -(we use live instead of bind because we're creating divs on the fly )
     $(".open_block").live('click', function() {        
@@ -109,9 +108,9 @@ jsPlumb.bind("ready", function() {
             url: url+'&a=get_skill_info&id='+my_id,             
             success: function(json) {
                 var skill = jQuery.parseJSON(json);
-                $("#name").attr('value', skill.name);
+                $("#name").html(skill.name);
                 $("#id").attr('value',   skill.id);                        
-                $("#description").attr('value', skill.description);                
+                $("#description").html(skill.description);                
                 //filling parent_id
                 $("#parent_id option[value='"+skill.extra.parent_id+"']").attr('selected', 'selected');
                 //filling the gradebook_id         
@@ -123,30 +122,16 @@ jsPlumb.bind("ready", function() {
         
                 
         $("#gradebook_id").trigger("liszt:updated");
-        $("#parent_id").trigger("liszt:updated");
-        
+                
                 
         $("#dialog-form").dialog("open");
         return false;
     });
-        
-    //Filling select
-    $("#add_item_link").click(function() {        
-        
-        $("#name").attr('value', '');
-        $("#description").attr('value', '');
-          
-        
-        $("#dialog-form").dialog("open");
-                      
-    });    
-    
-      
     
     $("#dialog-form").dialog({
         close: function() {     
-            $("#name").attr('value', '');
-            $("#description").attr('value', '');                
+            $("#name").html('');
+            $("#description").html('');                
         }
     });    
     
@@ -160,14 +145,9 @@ jsPlumb.bind("ready", function() {
     };    
     resetRenderMode(jsPlumb.CANVAS);       
 });
-
-         
+        
             
-;(function() {
-    
-    
-    
-         
+;(function() {         
     prepare = function(elId, endpoint) {
         jsPlumbDemo.initHover(elId);
         //jsPlumbDemo.initAnimation(elId);        
@@ -203,24 +183,7 @@ jsPlumb.bind("ready", function() {
             jsPlumb.Defaults.Endpoint       = "Rectangle";
             jsPlumb.Defaults.Anchors        = ["TopCenter", "TopCenter"];
 
-            
-
-            /**
-                first example endpoint.  it's a 25x21 rectangle (the size is provided in the 'style' arg to the Endpoint), and it's both a source
-                and target.  the 'scope' of this Endpoint is 'exampleConnection', meaning any connection starting from this Endpoint is of type
-                'exampleConnection' and can only be dropped on an Endpoint target that declares 'exampleEndpoint' as its drop scope, and also that
-                only 'exampleConnection' types can be dropped here.
-
-                the connection style for this endpoint is a Bezier curve (we didn't provide one, so we use the default), with a lineWidth of
-                5 pixels, and a gradient.
-
-                note the use of the '$.extend' function to setup generic connection types.  this will save you a lot of typing, and probably
-                errors.
-
-            */
-                // this is the paint style for the connecting lines..
-                        
-            
+              
             jsPlumb.Defaults.Overlays = [
                 //[ "Arrow", { location:0.5 } ],  if you want to add an arrow in the connection          
             ];
@@ -228,18 +191,10 @@ jsPlumb.bind("ready", function() {
             jsPlumb.setMouseEventsEnabled(true);            
             
             {$js}
-            // three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
-            //jsPlumb.draggable("window1");
-            //jsPlumb.draggable(["window1", "window2"]);
-            //jsPlumb.draggable($("#window1"));
+  
             var divsWithWindowClass = jsPlumbDemo.getSelector(".window");
             jsPlumb.draggable(divsWithWindowClass);
-
-            // add the third example using the '.window' class.             
-            //jsPlumb.addEndpoint(divsWithWindowClass, exampleEndpoint3);
-
-            // each library uses different syntax for event stuff, so it is handed off
-            // to the draggableConnectorsDemo-<library>.js files.
+            
             jsPlumbDemo.attachBehaviour();          
         }
     };
@@ -292,7 +247,6 @@ $(document).ready( function() {
             //jsPlumb.detach(conn); 
     });
 });
-
 </script>
 
 {$html}
@@ -305,8 +259,8 @@ $(document).ready( function() {
             <div class="label">
                 <label for="name">Name</label>
             </div>      
-            <div class="formw">
-                <input type="text" name="name" id="name" size="40" />             
+            <div class="formw">                
+                <span id="name"></span>             
             </div>
         </div>
         <div class="row">
@@ -323,7 +277,7 @@ $(document).ready( function() {
                 <label for="name">Description</label>
             </div>      
             <div class="formw">
-                <textarea name="description" id="description" cols="40" rows="7"></textarea>
+                <span id="description"></span>                
             </div>
         </div>  
     </form>