WebSVN – LeadersLinked - Backend – Diff – /module/LeadersLinked/view/leaders-linked/jobs-description/index_jquery.phtml

 $this->inlineScript()->appendFile($this->basePath('plugins/bootstrap4-toggle/js/bootstrap4-toggle.min.js'));
 $this->inlineScript()->appendFile($this->basePath('plugins/bootstrap-confirmation/dist/bootstrap-confirmation.js'));
+$this->headLink()->appendStylesheet($this->basePath('plugins/bootstrap-checkbox/awesome-bootstrap-checkbox.css'));
+$this->headLink()->appendStylesheet($this->basePath('css/jquery-sortable.css'));
+$this->inlineScript()->appendFile($this->basePath('plugins/jquery-sortable/jquery-sortable.js'));
 $this->headLink()->appendStylesheet($this->basePath('plugins/bootstrap-checkbox/awesome-bootstrap-checkbox.css'));
 $this->inlineScript()->appendFile($this->basePath('plugins/select2/js/select2.js'));
 $this->inlineScript()->appendFile($this->basePath('plugins/select2/js/i18n/es.js'));
 // JsRender //
-$this->inlineScript()->appendFile($this->basePath('plugins/jsrender/jsrender.min.js'));
-// Page Styles
-//$this->headLink()->appendStylesheet($this->basePath('css/pages/self-evaluation.css'));
 $this->inlineScript()->appendFile($this->basePath('plugins/jsrender/jsrender.min.js'));
 $status_active = JobDescription::STATUS_ACTIVE;
-$status_active = JobDescription::STATUS_ACTIVE;
+$status_inactive = JobDescription::STATUS_INACTIVE;
+$this->inlineScript()->captureStart();
 echo <<<JS
-$this->inlineScript()->captureStart();
 echo <<<JS
 jQuery(document).ready(function($) {
     var competencies_selected = new Array();
     var subordinates_selected = new Array();
-    var behaviors = new Array();
+    var competencies_selected = new Array();
-    var subordinates = new Array();
+    var behaviors = new Array();
+    var competency_types = new Array();
+    var competencies = new Array();
     var competency_types = new Array();
-    var competencies = new Array();
+    var allowEdit = $allowEdit;
     var allowDelete = $allowDelete;
-    var allowEdit = $allowEdit;
+    var allowReport = $allowReport;
     var allowDelete = $allowDelete;
     var allowReport = $allowReport;
     $.fn.renderCompetencies = function() {
         if(competencies_selected.length > 0) {
     $.fn.renderCompetencies = function() {
-        if(competencies_selected.length > 0) {
-            $('#renderCompetencies').html($('#competencyTemplate').render(competencies_selected, {
-                getCompetencyType: (uuid) => competency_types.filter((item) => item.uuid == uuid ? item : false)[0],
-                getCompetency: (uuid) => competencies.filter((item) => item.uuid == uuid ? item : false)[0],
-                getBehavior: (uuid) => behaviors.filter((item) => item.uuid == uuid ? item : false)[0]
-            }));
-        } else {
-            $('#renderCompetencies').html('');
-        }
-    }
-    $.fn.renderSubordinates = function() {
-        if(subordinates_selected.length > 0) {
+            $('#renderCompetencies').html($('#competencyTemplate').render(competencies_selected, {
-            $('#renderSubordinates').html($('#subordinateTemplate').render(subordinates_selected, {
+                getCompetencyType: (uuid) => competency_types.filter((item) => item.uuid == uuid ? item : false)[0],
-                getSubordinate: (uuid) => subordinates.filter((item) => item.uuid == uuid ? item : false)[0],
+                getCompetency: (uuid) => competencies.filter((item) => item.uuid == uuid ? item : false)[0],
                 getBehavior: (uuid) => behaviors.filter((item) => item.uuid == uuid ? item : false)[0]
             });
         });
-    }
-    $.fn.comboSubordinates = function() {
-        $('#select-subordinate').children().remove();
-        $.each(subordinates, function(i, subordinate) {
-            var subordinate_selected = subordinates_selected.filter((item) => item.uuid == subordinate.uuid ? item : false)[0];
-            if(!subordinate_selected) {
-                $('#select-subordinate').append($('<option>', {
-                    value: subordinate.uuid,
-                    text: subordinate.name
-                }));
-            }
         });
                 error.insertAfter(field.parent());
+            }
+        }
     };
-    var gridTable = $('#gridTable').dataTable({
-        'processing': true,
-        'serverSide': true,
-        'searching': true,
-        'order': [
-            [0, 'asc']
+    $.groupSortable = null;
-        ],
-        'ordering': true,
-        'ordenable': true,
-        'responsive': true,
-        'select': false,
-        'paging': true,
-        'pagingType': 'simple_numbers',
-        'ajax': {
-            'url': '$routeDatatable',
-            'type': 'get',
-            'beforeSend': function(request) {
-                NProgress.start();
-            },
-            'dataFilter': function(response) {
-                var response = jQuery.parseJSON(response);
-                var json = {};
-                json.recordsTotal = 0;
-                json.recordsFiltered = 0;
-                json.data = [];
-                if (response.success) {
-                    json.recordsTotal = response.data.total;
-                    json.recordsFiltered = response.data.total;
-                    json.data = response.data.items;
-                } else {
-                    $.fn.showError(response.data)
-                }
-                return JSON.stringify(json);
-            }
-        },
-        'language': {
-            'sProcessing': 'LABEL_DATATABLE_SPROCESSING',
-            'sLengthMenu': 'LABEL_DATATABLE_SLENGTHMENU',
-            'sZeroRecords': 'LABEL_DATATABLE_SZERORECORDS',
-            'sEmptyTable': 'LABEL_DATATABLE_SEMPTYTABLE',
-            'sInfo': 'LABEL_DATATABLE_SINFO',
-            'sInfoEmpty': 'LABEL_DATATABLE_SINFOEMPTY',
-            'sInfoFiltered': 'LABEL_DATATABLE_SINFOFILTERED',
-            'sInfoPostFix': '',
-            'sSearch': 'LABEL_DATATABLE_SSEARCH',
-            'sUrl': '',
-            'sInfoThousands': ',',
-            'sLoadingRecords': 'LABEL_DATATABLE_SLOADINGRECORDS',
-            'oPaginate': {
-                'sFirst': 'LABEL_DATATABLE_SFIRST',
-                'sLast': 'LABEL_DATATABLE_SLAST',
-                'sNext': 'LABEL_DATATABLE_SNEXT',
-                'sPrevious': 'LABEL_DATATABLE_SPREVIOUS'
-            },
-            'oAria': {
-                'sSortAscending': ': LABEL_DATATABLE_SSORTASCENDING',
-                'sSortDescending': ':LABEL_DATATABLE_SSORTDESCENDING'
-            },
-        },
-        'drawCallback': function(settings) {
-            NProgress.done();
-            $('button.btn-delete').confirmation({
-                rootSelector: 'button.btn-delete',
-                title: 'LABEL_ARE_YOU_SURE',
-                singleton: true,
-                btnOkLabel: 'LABEL_YES',
-                btnCancelLabel: 'LABEL_NO',
-                onConfirm: function(value) {
+    $.fn.setGroupSortable = function(html) {
-                    action = $(this).data('href');
-                    NProgress.start();
-                    $.ajax({
-                        'dataType': 'json',
-                        'accept': 'application/json',
-                        'method': 'post',
-                        'url': action,
-                    }).done(function(response) {
-                        if (response['success']) {
+        $('#ol-jobs-descriptions').html(html);
-                            $.fn.showSuccess(response['data']);
-                            gridTable.api().ajax.reload(null, false);
-                        } else {
-                            $.fn.showError(response['data']);
-                        }
-                    }).fail(function(jqXHR, textStatus, errorThrown) {
-                        $.fn.showError(textStatus);
-                    }).always(function() {
-                        NProgress.done();
-                    });
-                },
-            });
-        },
-        'aoColumns': [{
-                'mDataProp': 'name'
-            },
-            {
-                'mDataProp': 'status'
-            },
-            {
-                'mDataProp': 'actions'
-            },
+        $.groupSortable =  $('#ol-jobs-descriptions').sortable({
-        ],
-        'columnDefs': [{
-                'targets': 0,
-                'className': 'text-vertical-middle',
-            },
-            {
-                'targets': -2,
-                'orderable': false,
-                'className': 'text-center',
-                'render': function(data, type, row) {
+            onDragStart: function(\$item, container, _super) {
-                    checked = data == 'a' ? ' checked="checked" ' : '';
-                    return '<div class="checkbox checkbox-success">' +
-                        '<input class="styled" type="checkbox" ' + checked + ' disabled="disabled">' +
+                //\$item.find('ol.dropdown-menu').sortable('disable');
-                        '<label ></label></div>';
                 _super(\$item, container);
             },
+            onDrop: function(\$item, container, _super) {
+                var data = $.groupSortable.sortable('serialize').get();
+                var jsonString = JSON.stringify(data, null, ' ');
-            {
-                'targets': -1,
+                $.ajax({
-                'orderable': false,
+                    'dataType': 'json',
-                'render': function(data, type, row) {
+                    'accept': 'application/json',
-                    s = '';
+                    'method': 'post',
-                    if (allowEdit && data['link_edit']) {
-                        s = s + '<button class="btn btn-primary btn-edit" data-href="' + data['link_edit'] + '" data-toggle="tooltip" title="LABEL_EDIT"><i class="fa fa-pencil"></i> LABEL_EDIT </button>&nbsp;';
+                    'url': '$routeDatatable',
-                    }
+                    'data': {
-                    if (allowDelete && data['link_delete']) {
-                        s = s + '<button class="btn btn-danger btn-delete" data-href="' + data['link_delete'] + '" data-toggle="tooltip" title="LABEL_DELETE"><i class="fa fa-trash"></i> LABEL_DELETE </button>&nbsp;';
+                        data: jsonString
+                    }
+                }).done(function(response) {
-                    }
-                    if (allowReport && data['link_report']) {
+                    if (!response['success']) {
-                        s = s + '<button class="btn btn-primary btn-pdf"  data-href="' + data['link_report'] + '"  data-toggle="tooltip" title="LABEL_PDF"><i class="fa fa-file-o"></i> LABEL_PDF </button>&nbsp;';
+                        $.fn.showError(response['data']);
+                    }
+                }).fail(function(jqXHR, textStatus, errorThrown) {
+                    $.fn.showError(textStatus);
+                })
+                //\$item.find('ol.dropdown-menu').sortable('enable');
+                _super(\$item, container);
+                //console.log($(\$item).data('id'));
+                // console.log(\$item);
+            }
+        });
+    },
+    $.fn.recursiveTree = function(items) {
+        var s  = '';
+        $.each(items, function(i, item) {
+            s = s + $('#listJobDescriptionTemplate').render(item);
+        });
+        return s;
+    };
+    $.fn.refreshTree = function() {
+        NProgress.start();
+        $.ajax({
+            'dataType': 'json',
+            'accept': 'application/json',
+            'method': 'get',
+            'url': '$routeDatatable',
+        }).done(function(response) {
+            if (response['success']) {
+                if(response['data'].items.length == 0) {
-                    }
+                    $('#divNoRecordsAvailable').show();
+                } else {
+                    $('#divNoRecordsAvailable').hide();
                     return s;
+                }
+                var s = '';
+                $.each(response['data'], function(i, item) {
+                    s = s +  $.fn.recursiveTree(item);
+                });
+                $.fn.setGroupSortable(s);
+            } else {
                 $.fn.showError(response['data']);
+            }
+        }).fail(function(jqXHR, textStatus, errorThrown) {
+            $.fn.showError(textStatus);
+         }).always(function() {
-            }
+            NProgress.done();
-        ],
+        });
     });
     var validator = $('#form').validate({
         debug: true,
                 maxlength: 1024,
             },
             'status': {
                 required: false,
             },
-            'job_description_id_boss': {
-                required: false,
-            }
         },
         submitHandler: function(form) {
             var data = {
                 name : $('#form #name').val(),
                 functions : $('#form #functions').val(),
                 objectives : $('#form #objectives').val(),
-                status :  $('#form #status').val(),
-                job_description_id_boss: $('#form #job_description_id_boss').val(),
-                subordinates_selected : new Array(),
+                status :  $('#form #status').prop('checked') ?  '$status_active' : '$status_inactive',
                 competencies_selected : new Array(),
             };
                     data.competencies_selected.push({'competency_uuid' : c.uuid, 'behavior_uuid' : b.uuid, 'level' : b.level});
                 });
             });
-            $.each(subordinates_selected, function(i, subordinate_selected) {
-                data.subordinates_selected.push(subordinate_selected.uuid);
             });
             NProgress.start();
             $.ajax({
                 'dataType': 'json',
             }).done(function(response) {
                 if (response['success']) {
                     $.fn.showSuccess(response['data']);
                     $('#row-lists').show();
                     $('#row-form').hide();
-                    gridTable.api().ajax.reload(null, false);
+                    $.fn.refreshTree();
                 } else {
                     validator.resetForm();
                     if (jQuery.type(response['data']) == 'string') {
                         $.fn.showError(response['data']);
                     } else {
             return false;
         },
         invalidHandler: function(form, validator) {}
     });
+    $('body').on('click', 'button.btn-refresh', function(e) {
+        e.preventDefault();
+        $.fn.refreshTree();
+    });
+    $('body').on('click', 'button.btn-cancel', function(e) {
+        e.preventDefault();
+        $('#row-lists').show();
+        $('#row-form').hide();
+        $('#div-listing').show();
+    });
-    $('body').on('click', 'button.btn-add', function(e) {
+    $('body').on('click', 'button.btn-import', function(e) {
         e.preventDefault();
         NProgress.start();
         $.ajax({
-            'dataType': 'json',
-            'accept': 'application/json',
+            'dataType': 'json',
-            'method': 'get',
+            'method': 'post',
-            'url': '$routeAdd',
+            'url': '$routeImport',
-        }).done(function(response) {
         }).done(function(response) {
+            if (response['success']) {
+                $.fn.showSuccess(response['data']);
+                $.fn.refreshTree();
+            } else {
+                $.fn.showError(response['data']);
+            }
+        }).fail(function(jqXHR, textStatus, errorThrown) {
+            $.fn.showError(textStatus);
+        }).always(function() {
+            NProgress.done();
+        });
+        return false;
+    });
-            if (response['success']) {
-                behaviors = response['data']['behaviors'];
-                competency_types = response['data']['competency_types'];
-                competencies = response['data']['competencies'];
+    $('body').on('click', 'button.btn-add-job-description', function(e) {
+        e.preventDefault();
-                competencies_selected = [];
-                subordinates = [];
-                $('#select-subordinate').children().remove();
+        var link = $(this).data('link');
-                $('#job_description_id_boss').children().not(':first').remove();
+        $.fn.defaultValuesAdd(link);
-                $.each(response['data']['jobs_description'], function(value, text) {
-                    subordinates.push({uuid:  value, name: text});
-                    $('#select-subordinate').append($('<option>', {
-                        value: value,
-                        text: text
-                    }));
+        return false
+    });
+    $('body').on('click', 'i.btn-add-job-description', function(e) {
+        e.preventDefault();
-                    $('#job_description_id_boss').append($('<option>', {
-                        value: value,
-                        text: text
-                    }));
+        var link = $(this).data('link');
+        $.fn.defaultValuesAdd(link);
+        return false
+    });
+    $.fn.defaultValuesAdd = function(action) {
+        setTimeout(() => {
+            NProgress.start();
+            $.ajax({
+                'dataType': 'json',
+                'accept': 'application/json',
+                'method': 'get',
+                'url' : action,
+            }).done(function(response) {
+                if (response['success']) {
-                });
-                $('#form #job_description_id_boss').val('').trigger('change');
+                    behaviors = response['data']['behaviors'];
+                    competency_types = response['data']['competency_types'];
                     competencies = response['data']['competencies'];
-                $.fn.renderSubordinates();
-                $.fn.comboSubordinates();
+                    competencies_selected = [];
-                $.each(competencies, function(i, competency) {
+                    $.each(competencies, function(i, competency) {
-                    $.each(competency.behaviors, function(j, behavior) {
+                        $.each(competency.behaviors, function(j, behavior) {
-                        competencies[i].behaviors[j].level = 0;
+                            competencies[i].behaviors[j].level = 0;
-                    });
+                        });
-                });
+                    });
-                $.fn.renderCompetencies();
+                    $.fn.renderCompetencies();
-                $.fn.comboCompetencies();
+                    $.fn.comboCompetencies();
+                    $('span[id="form-title"]').html('LABEL_ADD');
+                    $('#form').attr('action', action);
+                    $('#form #name').val('');
+                    $('#form #status').bootstrapToggle('on');
+                    $('#form #functions').val('');
+                    $('#form #objectives').val('');
+                    validator.resetForm();
+                    $('#custom-tabs #custom-tabs-general-tab').tab('show');
+                    $('#row-lists').hide();
+                    $('#row-form').show();
+               } else   {
-                $('span[id="form-title"]').html('LABEL_ADD');
-                $('#form').attr('action', '$routeAdd');
-                $('#form #name').val('');
-                $('#form #status').bootstrapToggle('on');
-                $('#form #functions').val('');
-                $('#form #objectives').val('');
-                validator.resetForm();
-                $('#custom-tabs #custom-tabs-general-tab').tab('show');
-                $('#row-lists').hide();
+                    $.fn.showError(response['data']);
                 $('#row-form').show();
-           } else   {
+            }).fail(function(jqXHR, textStatus, errorThrown) {
-                $.fn.showError(response['data']);
+                $.fn.showError(textStatus);
             }).always(function() {
-        }).fail(function(jqXHR, textStatus, errorThrown) {
+                NProgress.done();
-            $.fn.showError(textStatus);
+            });
-        }).always(function() {
+        }, 100);
                 $('#form #functions').val(response['data']['functions']);
                 $('#form #objectives').val(response['data']['objectives']);
                 behaviors = response['data']['behaviors'];
-                competency_types = response['data']['competency_types'];
-                competencies = response['data']['competencies'];
-                subordinates = [];
-                $('#select-subordinate').children().remove();
-                $('#job_description_id_boss').children().not(':first').remove();
-                $.each(response['data']['jobs_description'], function(value, text) {
-                    subordinates.push({uuid:  value, name: text});
-                    $('#select-subordinate').append($('<option>', {
-                        value: value,
-                        text: text
-                    }));
-                    $('#job_description_id_boss').append($('<option>', {
-                        value: value,
-                        text: text
-                    }));
-                });
-                $('#form #job_description_id_boss').val(response['data']['job_description_id_boss']).trigger('change');
+                competency_types = response['data']['competency_types'];
-                competencies_selected = response['data']['competencies_selected'];
+                competencies = response['data']['competencies'];
-                subordinates_selected = response['data']['subordinates_selected'];
                 competencies_selected = response['data']['competencies_selected'];
-                $.fn.renderCompetencies();
-                $.fn.comboCompetencies();
-                $.fn.renderSubordinates();
+                $.fn.renderCompetencies();
-                $.fn.comboSubordinates();
+                $.fn.comboCompetencies();
                 validator.resetForm();
                 $('#custom-tabs #custom-tabs-general-tab').tab('show');
             $.fn.showError(textStatus);
         }).always(function() {
             NProgress.done();
         });
     });
-    $('body').on('click', 'button.btn-refresh', function(e) {
-        e.preventDefault();
-        gridTable.api().ajax.reload(null, false);
-    });
-    $('body').on('click', 'button.btn-cancel', function(e) {
-        e.preventDefault();
-        $('#row-lists').show();
-        $('#row-form').hide();
-        $('#div-listing').show();
-    });
-    $('body').on('click', 'button.btn-import', function(e) {
-        e.preventDefault();
-        NProgress.start();
-        $.ajax({
-            'dataType': 'json',
-            'method': 'post',
-            'url': '$routeImport',
-        }).done(function(response) {
-            if (response['success']) {
-                $.fn.showSuccess(response['data']);
-                gridTable.api().ajax.reload(null, false);
-            } else {
-                $.fn.showError(response['data']);
-            }
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            $.fn.showError(textStatus);
-        }).always(function() {
-            NProgress.done();
-        });
-        return false;
-    });
-    $('body').on('click', 'button.btn-pdf', function(e) {
+    $('body').on('click', 'i.btn-pdf-job-description', function(e) {
         e.preventDefault();
+        var action   = $(this).data('link');
-        var action   = $(this).data('href');
+        window.open(action, '_blank');
         /*
         NProgress.start();
         $.ajax({
+            }
         }).fail(function( jqXHR, textStatus, errorThrown) {
             $.fn.showError(textStatus);
         }).always(function() {
             NProgress.done();
-        });
+        });*/
     });
     $('body').on('click', 'button[id="btn-select-competency"]', function(e) {
         var competency_uuid = $('#select-competency').val();
                 $.fn.comboCompetencies();
+            }
+        }
     });
-    $('body').on('click', 'button[id="btn-select-subordinate"]', function(e) {
+    $('body').on('click', 'i.btn-delete-job-description', function(e) {
+        e.preventDefault();
-        e.preventDefault();
-        var uuid = $("#select-subordinate").val();
-        if (uuid == "") {
-            $.fn.showError('ERROR_SELECT_DEPENDENT_IS_EMPTY');
-        } else {
-            subordinate = subordinates.filter((item) => item.uuid == uuid ? item : false)[0];
-            if(subordinate) {
-                subordinates_selected.push({uuid: subordinate.uuid});
-                $.fn.renderSubordinates();
-                $.fn.comboSubordinates();
-            }
-        }
-    });
-    $('body').on('click', 'button.btn-delete-subordinate', function(e) {
+        var action = $(this).data('link');
-        var uuid = $(this).data('subordinate');
-        bootbox.confirm({
-            title: 'LABEL_DEPENDENT_DELETE_TITLE',
+        bootbox.confirm({
-            message: 'LABEL_DEPENDENT_DELETE_MESSAGE',
-            buttons: {
-                cancel: {
-                    label: '<i class="fa fa-times"></i> LABEL_CANCEL'
+            message: 'LABEL_ARE_YOU_SURE',
-                },
+            buttons: {
+                confirm: {
+                    label: 'LABEL_YES',
+                    className: 'btn-success'
+                },
+                cancel: {
-                confirm: {
+                    label: 'LABEL_NO',
-                    label: '<i class="fa fa-check"></i> LABEL_ACCEPT'
+                    className: 'btn-danger'
                 }
             },
+            callback: function (result) {
+                if(result) {
+                    NProgress.start();
+                    $.ajax({
+                        'dataType': 'json',
+                        'accept': 'application/json',
+                        'method': 'post',
+                        'url': action,
+                    }).done(function(response) {
+                        if (response['success']) {
+                            $.fn.showSuccess(response['data']);
+                           $.fn.refreshTree();
+                        } else {
-            callback: function(result) {
+                            $.fn.showError(response['data']);
-                if (result) {
-                    subordinates_selected = subordinates_selected.filter((item) => item.uuid != uuid ? item : false);
+                        }
+                    }).fail(function(jqXHR, textStatus, errorThrown) {
+                        $.fn.showError(textStatus);
+                    }).always(function() {
-                    $.fn.renderSubordinates();
+                        NProgress.done();
-                    $.fn.comboSubordinates();
+                    });
+                }
-            }
+            }
+        });
-        });
     });
     });
+                }
+            }
         });
     });
-    $('body').on('click','button.btn-edit-behavior', function(e) {
+    $('body').on('click','button.btn-edit-job-description-behavior', function(e) {
         e.preventDefault();
+        }
     });
-    $('body').on('click', 'button.btn-edit-cancel', function(e) {
+    $('body').on('click', 'button.btn-edit-job-description-cancel', function(e) {
         $('#row-lists').show();
     $('#form #objectives').maxlength({
         alwaysShow: true,
         validate: true
     });
-    $('#form #job_description_id_boss').select2({
-        theme: 'bootstrap4',
-        width: '100%',
-    });
-    $('#select-subordinate').select2({
+    $('#select-competency').select2({
         theme: 'bootstrap4',
         width: '100%',
-    });
+    });
-    $('#select-competency').select2({
         theme: 'bootstrap4',
         width: '100%',
     });
     $.fn.refreshTree();
+});
-});
+JS;
 $this->inlineScript()->captureEnd();
-JS;
+?>
 $this->inlineScript()->captureEnd();
     <div class="container-fluid">
         <div class="row">
             <div class="col-12">
                 <div class="card">
                     <div class="card-body">
-                        <table id="gridTable" class="table table-hover">
-                            <thead>
-                                <tr>
-                                    <th style="width: 50%">LABEL_NAME</th>
+                   	  <div id="divNoRecordsAvailable" class="text-center" style="display: none"><h3>LABEL_NO_RECORDS_AVAILABLE</h3></div>
-                                    <th style="width: 15%">LABEL_ACTIVE</th>
+                   	 <div id="ol-jobs-descriptions-container" style="background-color: rgba(0, 0, 0, .03); width: 100%; height: 600px; scroll: auto; overflow: auto;">
-                                    <th style="width: 35%">LABEL_ACTIONS</th>
+     					 <ol id="ol-jobs-descriptions" class="default vertical" style="padding-left: 0px;">
-                                </tr>
-                            </thead>
-                            <tbody>
-                            </tbody>
+            			</ol>
-                        </table>
+            		 </div>
                     </div>
                     <div class="card-footer clearfix">
-                        <div style="float:right;">
+                		<div  style="float:right;" >
                             <button type="button" class="btn btn-info btn-refresh"><i class="fa fa-refresh"></i> LABEL_REFRESH </button>
                             <?php if ($allowAdd) : ?>
                                 <?php if ($allowImport) : ?>
                                     <button type="button" class="btn btn-primary btn-import"><i class="fa fa-upload"></i> LABEL_IMPORT </button>
                                 <?php endif; ?>
-                                <button type="button" class="btn btn-primary btn-add"><i class="fa fa-plus"></i> LABEL_ADD </button>
+                                <button type="button" class="btn btn-primary btn-add-job-description" data-link="<?php echo $routeAdd ?>"><i class="fa fa-plus"></i> LABEL_ADD </button>
                             <?php endif; ?>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </section>
 <section id="row-form" style="display:none">
-    <div class="container">
-        <!-- Modal Header -->
+	<div class="card">
-        <div class="modal-header">
+        <div class="card-header">
             <h4 class="modal-title">LABEL_JOB_DESCRIPTION - <span id="form-title"></span></h4>
-        </div>
-        <!-- Modal body -->
+        </div>
-        <div class="modal-body">
+ 		<div class="card-body">
             <div class="card card-primary card-outline card-tabs">
                 <div class="card-header p-0 pt-1 border-bottom-0">
                     <ul class="nav nav-tabs" id="custom-tabs" role="tablist">
                         <li class="nav-item">
                             <a class="nav-link active" id="custom-tabs-general-tab" data-toggle="pill" href="#custom-tabs-general" role="tab" aria-controls="custom-tabs-general" aria-selected="true">LABEL_GENERAL</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" id="custom-tabs-compentencies-tab" data-toggle="pill" href="#custom-tabs-compentencies" role="tab" aria-controls="custom-tabs-compentencies" aria-selected="false">LABEL_COMPETENCIES</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" id="custom-tabs-subordinate-tab" data-toggle="pill" href="#custom-tabs-subordinate" role="tab" aria-controls="custom-tabs-subordinate" aria-selected="false">LABEL_SUBORDINATES</a>
                         </li>
                     </ul>
                 </div>
                 <div class="card-body">
                     <?php
                     $form->prepare();
-                    echo $this->form()->openTag($form);
-                    $element = $form->get('subordinates');
+                    echo $this->form()->openTag($form);
                     echo $this->formHidden($element);
                                         echo $this->formLabel($element);
                                         echo $this->formText($element);
                                         ?>
                                     </div>
                                 </div>
-                                <div class="col-md col-sm-12 col-12">
-                                    <div class="form-group m-0">
-                                        <?php
-                                        $element = $form->get('job_description_id_boss');
-                                        $element->setOptions(['label' => 'LABEL_BOSS']);
-                                        $element->setAttributes(['class' => 'form-control']);
-                                        echo $this->formLabel($element);
-                                        echo $this->formSelect($element);
-                                        ?>
-                                    </div>
-                                </div>
                                 <div class="col-md col-sm-12 col-12 d-flex align-items-center justify-content-center">
                                     <div class="form-group m-0">
                                         <label>LABEL_STATUS</label>
                                         <br />
                                         <?php
                                 <br>
                                 <div class="col-md-12 col-sm-12 col-xs-12" id="renderCompetencies" style="margin-top: 10px;">
                                 </div>
                             </div>
                         </div>
-                        <div class="tab-pane fade" id="custom-tabs-subordinate" role="tabpanel" aria-labelledby="custom-tabs-subordinate-tab">
-                            <div class="row">
-                                <div class="col-md-8 col-sm-8 col-xs-12">
-                                    <select id="select-subordinate" class="form-control"></select>
-                                </div>
-                                <div class="col-md-4 col-sm-4 col-xs-12">
-                                    <button type="button" class="btn btn-primary" id="btn-select-subordinate" data-toggle="tooltip" title="LABEL_ADD ">LABEL_ADD </button>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 10px;">
-                                    <table class="table table-bordered">
-                                        <thead>
-                                            <tr>
-                                                <th style="width: 60%;">LABEL_NAME</th>
-                                                <th style="width: 20%;">LABEL_ACTIONS</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody id="renderSubordinates"></tbody>
-                                    </table>
-                                </div>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>
             <?php echo $this->form()->closeTag($form); ?>
-            <!-- /.card -->
         </div>
-        <!-- Modal footer -->
-        <div class="modal-footer">
+        <div class="card-footer clearfix">
             <button type="submit" form="form" class="btn btn-primary">LABEL_SAVE</button>
-            <button type="button" class="btn btn-danger btn-edit-cancel">Cerrar</button>
+            <button type="button" class="btn btn-danger btn-edit-job-description-cancel">Cerrar</button>
         </div>
+	</div>
 </section>
 <!--start modal behavior-->
 <div id="modal-behavior" class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" role="document">
+	<form action="#" name="form-behavior" id="form-behavior">
-        <form action="#" name="form-behavior" id="form-behavior">
+        <div class="modal-dialog " role="document">
-            <input type="hidden" id="behavior-uuid" name="behavior-uuid" value="" />
+    		<input type="hidden" id="behavior-uuid" name="behavior-uuid" value="" />
-            <input type="hidden" id="competency-uuid" name="competency-uuid value="" />
+       		<input type="hidden" id="competency-uuid" name="competency-uuid value="" />
-         <div class=" modal-content">
+       		<div class=" modal-content">
-            <div class="modal-header">
+                <div class="modal-header">
-                <h4 class="modal-title">LABEL_EDIT LABEL_LEVEL</h4>
+                    <h4 class="modal-title">LABEL_EDIT LABEL_LEVEL</h4>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
+                        <span aria-hidden="true">&times;</span>
-                </button>
+                    </button>
-            </div>
+                </div>
-            <div class="modal-body">
+                <div class="modal-body">
-               <div class="form-group">
+                       <div class="form-group">
-                  <label for="behavior-value">LABEL_LEVEL</label>
+                          <label for="behavior-value">LABEL_LEVEL</label>
-                  <input type="number" step="1" min="0" max="100" id="level" name="level">
+                          <input type="number" step="1" min="0" max="100" id="level" name="level">
-            </div>
+                    </div>
-            <div class="modal-footer">
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary btn-behavior-submit">LABEL_SAVE</button>
-                <button type="button" class="btn btn-primary btn-behavior-submit">LABEL_SAVE</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">LABEL_CLOSE</button>
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">LABEL_CLOSE</button>
+                    </div>
-            </div>
+            	</div>
-    </div>
+        	</div>
-    </form>
+    	</div>
-</div>
+	</form>
                      <td class="text-left">LABEL_COMPETENCY</td>
                      <td class="text-left">{{:name}}</td>
                      <td>
                      </td>
                      <td>
-                        <button  type="button" class="btn btn-default btn-delete-competency" data-competency="{{:uuid}}" data-toggle="tooltip"  data-original-title="LABEL_DELETE LABEL_COMPETENCY"><i class="fa fa-ban" aria-hidden="true"></i> LABEL_DELETE LABEL_COMPETENCY </button>
+                        <button  type="button" class="btn btn-default btn-delete-job-description-competency" data-competency="{{:uuid}}" data-toggle="tooltip"  data-original-title="LABEL_DELETE LABEL_COMPETENCY"><i class="fa fa-ban" aria-hidden="true"></i> LABEL_DELETE LABEL_COMPETENCY </button>
                      </td>
                   </tr>
                   {{for behaviors}}
                   <tr >
                      <td class="text-left">--LABEL_BEHAVIOR</td>
                      </td>
                      <td class="text-right">
                         {{:level}}
                      </td>
                      <td>
-                        <button type="button"  class="btn btn-default btn-edit-behavior" data-behavior="{{:uuid}}" data-toggle="tooltip"  data-original-title="LABEL_EDIT LABEL_LEVEL"><i class="fa fa-edit" aria-hidden="true"></i> LABEL_EDIT LABEL_LEVEL</button>
+                        <button type="button"  class="btn btn-default btn-edit-job-description-behavior" data-behavior="{{:uuid}}" data-toggle="tooltip"  data-original-title="LABEL_EDIT LABEL_LEVEL"><i class="fa fa-edit" aria-hidden="true"></i> LABEL_EDIT LABEL_LEVEL</button>
                      </td>
                   </tr>
                   {{/for}}
                </tbody>
             </table>
                      <td class="text-left">LABEL_COMPETENCY</td>
                      <td class="text-left">{{:name}}</td>
                      <td>
                      </td>
                      <td>
-                        <button  type="button" class="btn btn-default btn-delete-competency" data-competency="{{:uuid}}" data-toggle="tooltip"  data-original-title="LABEL_DELETE LABEL_COMPETENCY"><i class="fa fa-ban" aria-hidden="true"></i> LABEL_DELETE LABEL_COMPETENCY </button>
+                        <button  type="button" class="btn btn-default btn-delete-job-description-competency" data-competency="{{:uuid}}" data-toggle="tooltip"  data-original-title="LABEL_DELETE LABEL_COMPETENCY"><i class="fa fa-ban" aria-hidden="true"></i> LABEL_DELETE LABEL_COMPETENCY </button>
                      </td>
                   </tr>
                   {{for behaviors}}
                   <tr >
                      <td class="text-left">--LABEL_BEHAVIOR</td>
                         {{if level == '2' }} LABEL_LEVEL_TWO {{/if}}
                         {{if level == '3' }} LABEL_LEVEL_THREE {{/if}}
                         {{if level == '4' }} LABEL_LEVEL_FOUR {{/if}}
                      </td>
                      <td>
-                        <button type="button"  class="btn btn-default btn-edit-behavior" data-behavior="{{:uuid}}" data-toggle="tooltip"  data-original-title="LABEL_EDIT LABEL_LEVEL"><i class="fa fa-edit" aria-hidden="true"></i> LABEL_EDIT LABEL_LEVEL</button>
+                        <button type="button"  class="btn btn-default btn-edit-job-description-behavior" data-behavior="{{:uuid}}" data-toggle="tooltip"  data-original-title="LABEL_EDIT LABEL_LEVEL"><i class="fa fa-edit" aria-hidden="true"></i> LABEL_EDIT LABEL_LEVEL</button>
                      </td>
                   </tr>
                   {{/for}}
                </tbody>
             </table>
       </div>
    </div>
 </div>
 </script>
+<script id="listJobDescriptionTemplate" type="text/x-jsrender">
+	<li data-id="{{:uuid}}" >
+        <div class="content">
+        <div class="sidebar {{if status == '<?php echo JobDescription::STATUS_INACTIVE ?>' }} sidebar-inactive {{/if}}">
+        {{>name}}
+        <div class="float-right right-sidebar">
+            {{if status == '<?php echo JobDescription::STATUS_ACTIVE ?>' }}
+            {{if link_add }}
+            <i class="fa fa-plus btn-add-job-description" data-link="{{:link_add}}"></i>&nbsp;
+            {{/if}}
+            {{/if}}
+            {{if link_edit }}
+            <i class="fa fa-pencil btn-edit-job-description" data-link="{{:link_edit}}"></i>&nbsp;
+            {{/if}}
+            {{if link_delete }}
+            <i class="fa fa-trash btn-delete-job-description" data-link="{{:link_delete}}"></i>&nbsp;
+            {{/if}}
+            {{if status == '<?php echo JobDescription::STATUS_ACTIVE ?>' }}
+            {{if link_report }}
+            <i class="fa fa-file-o btn-pdf-job-description" data-link="{{:link_report}}"></i>&nbsp;
+            {{/if}}
+            {{/if}}
+        </div>
+        </div>
+        </div>
+        <ol>
+	   {{for children tmpl="#listJobDescriptionTemplate"/}}
+	   </ol>
+	</li>
-<script id="subordinateTemplate" type="text/x-jsrender">
-    <tr>
-        <td class="text-left"> {{:~getSubordinate(uuid).name}}</td>
-        <td>
-            <button type="button" class="btn btn-default btn-delete-subordinate" data-subordinate="{{:uuid}}" data-toggle="tooltip"  data-original-title="LABEL_DELETE"><i class="fa fa-ban" aria-hidden="true"></i> LABEL_DELETE</button>
-        </td>
-    </tr>
-    </script>
 </script>

Proyectos de Subversion LeadersLinked - Backend

(root)/module/LeadersLinked/view/leaders-linked/jobs-description/index_jquery.phtml – Rev 15443 → 16787