WebSVN – LeadersLinked - Backend – Diff – /module/LeadersLinked/view/leaders-linked/competencies/index.phtml

 $routeAdd       = $this->url('settings/competencies/add');
-$routeDatatable = $this->url('settings/competencies');
-$routeImport    = $this->url('settings/competencies/import');
-$routeAddBehavior    = $this->url('settings/behaviors/add');
 $routeDatatable = $this->url('settings/competencies');
 $routeImport    = $this->url('settings/competencies/import');
 $routeImport    = $this->url('settings/competencies/import');
+$allowAdd       = $acl->isAllowed($roleName, 'settings/competencies/add') ? 1 : 0;
+$allowEdit      = $acl->isAllowed($roleName, 'settings/competencies/edit') ? 1 : 0;
+$allowDelete    = $acl->isAllowed($roleName, 'settings/competencies/delete') ? 1 : 0;
-$allowAdd       = $acl->isAllowed($roleName, 'settings/competencies/add') ? 1 : 0;
+$allowImport    = $acl->isAllowed($roleName, 'settings/competencies/import') ? 1 : 0;
 $allowEdit      = $acl->isAllowed($roleName, 'settings/competencies/edit') ? 1 : 0;
 $status_active = \LeadersLinked\Model\Competency::STATUS_ACTIVE;
-$this->inlineScript()->captureStart();
-echo <<<JS
+$this->inlineScript()->captureStart();
+echo <<<JS
+jQuery(document).ready(function($) {
+    var allowEdit = $allowEdit;
-let behaviors = [];
+    var allowDelete = $allowDelete;
 jQuery(document).ready(function($) {
     $.validator.setDefaults({
         debug: true,
         highlight: function(element) {
             $(element).addClass('is-invalid');
         },
         unhighlight: function(element) {
             $(element).removeClass('is-invalid');
         },
         errorElement: 'span',
-        errorClass: 'error invalid-feedback',
-        errorPlacement: function(error, element) {
-            const child = element.children(':first-child');
-            if (element[0].localName == 'input') {
-                let _error = error
-                _error[0].style.display = 'block'
+        errorClass: 'error invalid-feedback',
-                _error.insertBefore(element);
+            errorPlacement: function(error, element) {
-            } else if (element.parent('.form-group').length) {
+                if(element.parent('.form-group').length) {
-                error.insertAfter(element);
+                    error.insertAfter(element);
-            } else if (element.parent('.toggle').length) {
+                } else if(element.parent('.toggle').length) {
-                error.insertAfter(element.parent().parent());
+                    error.insertAfter(element.parent().parent());
+                } else {
-            } else {
+                    error.insertAfter(element.parent());
-                error.insertAfter(element.parent());
+                }
+            }
     });
     });
     $.fn.showFormErrorValidator = function(fieldname, errors) {
         var field = $(fieldname);
         if (field) {
             $(field).addClass('is-invalid');
             var error = $('<span id="' + fieldname + '-error" class="error invalid-feedback">' + errors + '</div>');
-            if (field.parent('.form-group').length) {
+                if(field.parent('.form-group').length) {
-                error.insertAfter(field);
+                    error.insertAfter(field);
-            } else if (field.parent('.toggle').length) {
+                } else  if(field.parent('.toggle').length) {
-                error.insertAfter(field.parent().parent());
+                    error.insertAfter(field.parent().parent());
-            } else {
+                } else {
-                error.insertAfter(field.parent());
+                    error.insertAfter(field.parent());
+                }
-        }
-    };
+        }
-    var allowEdit = $allowEdit;
+    };
     var allowDelete = $allowDelete;
     var gridTable = $('#gridTable').dataTable({
         'processing': true,
         'serverSide': true,
                     return s;
+                }
+            }
         ],
     });
     var validator = $('#form').validate({
         debug: true,
         onclick: false,
         onkeyup: false,
         ignore: [],
                 required: true,
             },
             'status': {
                 required: false,
             },
         },
         submitHandler: function(form) {
-            if (behaviors.length == 0) {
+            if ($('input[type="hidden"].behavior_id').length == 0) {
-                $.fn.showError('ERROR_NOT_OBSERVABLE_CONDUCT');
+                $.fn.showError('ERROR_NOT_OBSERVABLE_BEHAVIOR');
             } else {
                 $.ajax({
                     'dataType': 'json',
                     'accept': 'application/json',
                     'method': 'post',
                     'url': $('#form').attr('action'),
-                    'data': {
-                        'name': $('#name').val(),
+                    'data': $('#form').serialize(),
-                        'description': $('#description').val(),
-                        'competency_type_id': $('#competency_type_id').val(),
-                        'status': $('#status').val(),
-                        'behaviors': JSON.stringify(behaviors)
-                    }
                 }).done(function(response) {
                     NProgress.start();
                     if (response['success']) {
                         $.fn.showSuccess(response['data']);
                         $('#row-form').hide();
+            }
             return false;
         },
         invalidHandler: function(form, validator) {}
     });
     $('body').on('click', 'button.btn-add', function(e) {
         e.preventDefault();
+        NProgress.start();
+        $.ajax({
+            'dataType': 'json',
+            'method': 'get',
+            'url': '$routeAdd',
+        }).done(function(response) {
+            if (response['success']) {
+                $('#table-behaviors tbody').empty();
+                $('#select-behavior').children().not(':first').remove();
+                $.each(response['data']['behaviors'], function(index, element) {
+                    $('#select-behavior').append($('<option>', {
+                        value: element.id,
+                        text: element.description
+                    }));
+                });
-        $('span[id="form-title"]').html('LABEL_ADD');
+                $('span[id="form-title"]').html('LABEL_ADD');
-        $('#form').attr('action', '$routeAdd');
+                $('#form').attr('action', '$routeAdd');
-        $('#form #name').val('');
+                $('#form #name').val('');
-        $('#form #competency_type_id').val('').trigger('change');
+                $('#form #competency_type_id').val('').trigger('change');
-        $('#form #status').bootstrapToggle('on');
+                $('#form #competency_type_id').val('').trigger('change');
-        behaviors = [];
+                $('#form #status').bootstrapToggle('on');
-        CKEDITOR.instances.description.setData('');
+                CKEDITOR.instances.description.setData('');
-        validator.resetForm();
+                validator.resetForm();
-        $('#row-form').show();
+                $('#row-form').show();
-        $('#row-list').hide();
+                $('#row-list').hide();
+            } else {
+                $.fn.showError(response['data']);
+            }
+        }).fail(function(jqXHR, textStatus, errorThrown) {
+            $.fn.showError(textStatus);
+        }).always(function() {
-        renderData([]);
+            NProgress.done();
+        });
         return false;
     });
-    var competenciesUuid = null
     $('body').on('click', 'button.btn-edit', function(e) {
         e.preventDefault();
         $("button.btn-delete").confirmation('hide');
         NProgress.start();
         var action = $(this).data('href');
                 $('#form').attr('action', action);
                 $('#form #name').val(response['data']['name']);
                 $('#form #competency_type_id').val(response['data']['competency_type_id']).trigger('change');
                 $('#form #status').bootstrapToggle(response['data']['status'] == '$status_active' ? 'on' : 'off')
                 CKEDITOR.instances.description.setData(response['data']['description']);
+                $('input[type="hidden"].behavior').remove();
+                $('#select-behavior').children().not(':first').remove();
+                $('#table-behaviors tbody').empty();
-                behaviors = response['data']['behaviors'] || [];
+                $.each(response['data']['behaviors'], function(index, element) {
-                competenciesUuid = response['data']['uuid'];
+                    $('#select-behavior').append($('<option>', {
+                        value: element.id,
+                        text: element.description
+                    }));
+                    if(element.checked ) {
-                renderData(behaviors);
+                        let data = {
+                            id : element.id,
+                            description : element.description,
+                        };
+                        $('#table-behaviors tbody').append(
+                            $('#trBehaviorTemplate').render( data )
+                        );
+                    }
+                 });
                 validator.resetForm();
                 $('#row-form').show();
                 $('#row-list').hide();
             } else {
                 $.fn.showError(response['data']);
         }).always(function() {
             NProgress.done();
         });
         return false;
     });
     $('body').on('click', 'button.btn-refresh', function(e) {
         e.preventDefault();
         gridTable.api().ajax.reload(null, false);
         return false;
     });
     $('body').on('click', 'button.btn-import', function(e) {
         e.preventDefault();
         NProgress.start();
         $.ajax({
             'dataType': 'json',
         }).always(function() {
             NProgress.done();
         });
         return false;
     });
     $('body').on('click', 'button.btn-cancel', function(e) {
         e.preventDefault();
-        $('#modal').modal('hide');
+        $('#row-form').hide();
+        $('#row-list').show();
     });
     $('#form #competency_type_id').select2({
         theme: 'bootstrap4',
         width: '100%',
     });
-    $('#select-conduct').select2({
+    $('#select-behavior').select2({
         theme: 'bootstrap4',
         width: '100%',
     });
             { name: 'tools', items: [ 'Maximize' ] }
         ],
         removePlugins: 'elementspath,Anchor',
         heigth: 100
     });
-    /**
-     * Clicked on add new conduct
-     */
-    $('body').on('click', 'button[id="btn-add-conduct"]', function(e) {
-        e.preventDefault();
-        $('#form-conduct #conduct-id').val('');
-        $('#form-conduct #conduct-description').val('');
-        $('#modal-conduct h4[class="modal-title"]').html('LABEL_ADD LABEL_CONDUCT');
-        $('#modal-conduct').modal('show');
-    });
-    /**
-     * Clicked on edit conduct
-     */
-    $('body').on('click', 'button.btn-edit-conduct', function(e) {
-        e.preventDefault();
-        var id = $(this).data('conduct');
-        behaviors.map((item) => {
-            if (item.id == id) {
-                $('#form-conduct #conduct-id').val(item.id);
-                $('#form-conduct #conduct-description').val(item.description);
-                $('#modal-conduct h4[class="modal-title"]').html('LABEL_EDIT LABEL_CONDUCT');
-                $('#modal-conduct').modal('show');
-                return;
-            }
-        });
-    });
-    /**
-     * Clicked on remove conduct
-     */
-    $('body').on('click', 'button.btn-delete-conduct', function(e) {
+    $('body').on('click', 'button.btn-remove-behavior', function(e) {
         e.preventDefault();
-        var id = $(this).data('conduct');
+        var key = '#tr_behavior_id_' + $(this).data('id');
+        var element = $(key);
+        if(element) {
+            $(element).remove();
+        }
+        return false;
+        /*
         bootbox.confirm({
             title: "LABEL_DELETE LABEL_CONDUCT",
             message: "LABEL_QUESTION_DELETE",
             buttons: {
                 cancel: {
             callback: function(result) {
                 if (result) {
                     removeBehavior(id);
+                }
+            }
-        });
+        });*/
     });
-    /**
-     * Clicked cancel new/edit Form
-     */
-    $('button.btn-conduct-submit').click(function(e) {
+    $('#btn-select-behavior').click(function(e) {
-        if ($("#conduct-description").val() == "") {
+        e.preventDefault();
-            $.fn.showError('ERROR_ENTER_DESCRIPTION');
+        var id  = $('#select-behavior option:selected').val();
-            return;
-        } else {
+        if(!id) {
-            $("#conduct-id").val() == ""
-                ?addBehavior($("#conduct-description").val())
-                :editBehavior($("#conduct-id").val(), $("#conduct-description").val())
-            $('#modal-conduct').modal('hide');
-            return;
+            return false;
+        }
+        var description = $('#select-behavior option:selected').text();
+        var key         = '#tr_behavior_id_' + id ;
+        console.log("key = "  + key);
+        var element     = $(key);
+        console.log(element);
+        if(element.length > 0) {
+            $.fn.showError( 'ERROR_BEHAVIOR_WAS_PREVIOUSLY_ADDED');
+            return false;
+        }
+        let data = {
+            id : id,
+            description : description,
+        };
+        $('#table-behaviors tbody').append(
+            $('#trBehaviorTemplate').render( data )
+        );
+        return false;
     });
-    /**
-     * Clicked cancel new/edit Form
-     */
     $('button.btn-edit-cancel').click(function(e) {
         e.preventDefault();
         $('#row-form').hide();
         $('#row-list').show();
     });
-    /**
-     * Add Behavior to array
-     */
-    const addBehavior = (description) => {
-        $.ajax({
-            'dataType': 'json',
-            'accept': 'application/json',
-            'method': 'post',
-            'url': '$routeAddBehavior',
-            'data': {
-                'description': description
-            }
-        }).done(function(response) {
-            if (response['success']) {
-                behaviors.push({
-                    'id': response['uuid'],
-                    'description': description
-                });
-                renderData(behaviors);
-            } else {
-                $.fn.showError(response['message'] || 'ERROR_UNKNOWN');
-            }
-        });
-    }
-    /**
-     * Edit item behavior
-     */
-    const editBehavior = (id, description) => {
-        $.ajax({
-            'dataType': 'json',
-            'accept': 'application/json',
-            'method': 'post',
-            'url': '/settings/behaviors/edit/' + id,
-            'data': {
-                'description': description
-            }
-        }).done(function(response) {
-            if (response['success']) {
-                behaviors.map((item) => {
-                    if (item.id == id) {
-                        item.description = description;
-                    }
-                });
-                renderData(behaviors);
-            } else {
-                $.fn.showError(response['message'] || 'ERROR_UNKNOWN');
-            }
-        });
-    }
-    /**
-     * Remove behavior
-     */
-    const removeBehavior = (id) => {
-        $.ajax({
-            'dataType': 'json',
-            'accept': 'application/json',
-            'method': 'post',
-            'url': '/settings/behaviors/delete/' + id+'/'+competenciesUuid,
-        })
-        .done(function(response) {
-            if (response['success']) {
-                behaviors = behaviors.filter((item) => item.id != id);
-                renderData(behaviors);
-            } else {
-                $.fn.showError(response['message'] || 'ERROR_UNKNOWN');
-            }
-        })
-    }
-    /**
-     * Render Sections data
-     */
-    const renderData = (data) => {
-        getAllBehaviors();
-        data.length > 0 ?
-            $("#rows").html($("#behaviorTemplate").render(data)) :
-            $("#rows").html('')
-    }
-    /**
-     * get alls Behavios
-     */
-    const getAllBehaviors = () => {
-        $('#select-conduct').children().remove();
-        $('#select-conduct').append($('<option>', {
-            value: '',
-            text: 'LABEL_SELECT'
-        }));
-        $.getJSON("/settings/behaviors", function(data) {
-            $.each(data.data, function(i, item) {
-                console.log(filterItemById(item.uuid));
-                if (!filterItemById(item.uuid)) {
-                    $('#select-conduct').append($('<option>', {
-                        value: item.uuid,
-                        text: item.description
-                    }));
-                }
-            });
-        });
-    }
-    /**
-     * Clicked cancel new/edit Form
-     */
-    $('body').on('click', 'button[id="btn-select-conduct"]', function(e) {
-        if ($("#select-conduct").val() == "") {
-            $.fn.showError('LABEL_ERROR_SELECT_CONDUCT');
-        } else {
-            behaviors.push({
-                'id': $("#select-conduct").val(),
-                'description': $('select[name="select-conduct"] option:selected').text()
-            });
-            renderData(behaviors);
-        }
-    });
-    /**
-     * Filter section selected
-     */
-    const filterItemById = (id) => behaviors.filter((item) => item.id == id ? item : false)[0];
 });
 JS;
 $this->inlineScript()->captureEnd();
                 </div>
             </div>
         </div>
     </div>
 </section>
 <!-- The Form creation -->
 <section class="content" id="row-form" style="display: none">
     <div class="container-fluid">
         <div class="row">
             <div class="col-md-12 col-sm-12 col-12">
                                     echo $this->formLabel($element);
                                     echo $this->formTextArea($element);
                                     ?>
                                 </div>
                             </div>
-                            <?php echo $this->form()->closeTag($form); ?>
                             <div class="col-md-12 col-sm-12 col-12">
                                 <div class="form-group">
                                     <div class="row">
-                                        <div class="col-md-4 col-sm-4 col-xs-12">
+                                        <div class="col-md-8 col-sm-8 col-xs-12">
-                                            <select name="select-conduct" id="select-conduct" class="form-control">
+                                            <select name="select-behavior" id="select-behavior" >
+                                           		<option>LABEL_SELECT</option>
                                             </select>
                                         </div>
                                         <div class="col-md-4 col-sm-4 col-xs-12">
-                                            <button type="button" class="btn btn-primary" id="btn-select-conduct" data-toggle="tooltip" title="LABEL_ADD LABEL_CONDUCT">LABEL_ADD LABEL_CONDUCT</button>
+                                            <button type="button" class="btn btn-primary" id="btn-select-behavior" data-toggle="tooltip" title="LABEL_ADD LABEL_BEHAVIOR">LABEL_ADD LABEL_BEHAVIOR</button>
-                                        </div>
-                                        <div class="col-md-4 col-sm-4 col-xs-12 text-right">
-                                            <button type="button" class="btn btn-primary" id="btn-add-conduct" data-toggle="tooltip" title="LABEL_NEWS LABEL_CONDUCT"><i class="fa fa-plus" aria-hidden="true"></i> LABEL_NEWS LABEL_CONDUCT</button>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="col-xs-12 col-md-12">
                             <br />
                             <div class="table-responsive">
-                                <table class="table table-bordered">
+                                <table id="table-behaviors" class="table table-bordered">
                                     <thead>
                                         <tr>
                                             <th style="width: 60%;">LABEL_DESCRIPTION</th>
                                             <th style="width: 20%;">LABEL_ACTIONS</th>
                                         </tr>
                                     </thead>
+                                    <tbody >
-                                    <tbody id="rows"></tbody>
+                                    </tbody>
                                 </table>
                             </div>
-                            <div class="col-xs-12 col-md-12">
+                            <div class="col-xs-12 col-md-12 text-right">
-                                <div class="form-group">
                                     <button type="submit" form="form" class="btn btn-primary">LABEL_SAVE</button>
                                     <button type="button" class="btn btn-secondary btn-edit-cancel">LABEL_CANCEL</button>
-                                </div>
                             </div>
                         </div>
+                         <?php echo $this->form()->closeTag($form); ?>
                     </div>
                 </div>
             </div>
         </div>
 </section>
-<!---end form--->
-<!--start modal conduct-->
-<div id="modal-conduct" class="modal" tabindex="-1" role="dialog">
+<script id="trBehaviorTemplate" type="text/x-jsrender">
-    <div class="modal-dialog modal-lg" role="document">
-        <form action="#" name="form-conduct" id="form-conduct">
-            <input type="hidden" name="conduct-id" id="conduct-id" value="" />
-            <input type="hidden" name="conduct-competencia" id="conduct-competencia" value="" />
-            <div class="modal-content">
+    <tr id="tr_behavior_id_{{:id}}">
-                <div class="modal-header">
+       <td class="text-left">
-                    <h4 class="modal-title">LABEL_ADD LABEL_CONDUCT</h4>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+         <input type="hidden" class="behavior_id" name="behavior_id[]" value="{{:id}}" />
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label for="conduct-name">LABEL_DESCRIPTION</label>
-                        <input type="text" name="conduct-description" id="conduct-description" class="form-control" maxlength="200" value="" />
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary btn-conduct-submit">LABEL_SAVE</button>
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">LABEL_CLOSE</button>
-                </div>
+         {{:description}}
-            </div>
-        </form>
+       </td>
-    </div>
-</div>
-<!---end modal conduct --->
-<!--start template--->
-<script id="behaviorTemplate" type="text/x-jsrender">
-    <tr>
-       <td class="text-left">{{:description}}</td>
        <td>
-           <button class="btn btn-default btn-edit-conduct" data-conduct="{{:id}}" data-toggle="tooltip"  data-original-title="LABEL_EDIT"><i class="fa fa-edit" aria-hidden="true"></i> LABEL_EDIT</button>
-           <button class="btn btn-default btn-delete-conduct" data-conduct="{{:id}}" data-toggle="tooltip"  data-original-title="LABEL_DELETE"><i class="fa fa-ban" aria-hidden="true"></i> LABEL_DELETE</button>
+           <button class="btn btn-default btn-remove-behavior" data-id="{{:id}}" data-toggle="tooltip"  data-original-title="LABEL_DELETE"><i class="fa fa-ban" aria-hidden="true"></i> LABEL_DELETE</button>
        </td>
    </tr>
 </script>
-<!--end template--->

Proyectos de Subversion LeadersLinked - Backend

(root)/module/LeadersLinked/view/leaders-linked/competencies/index.phtml – Rev 14302 → 14989