Proyectos de Subversion LeadersLinked - Antes de SPA

<?php
$acl            = $this->viewModel()->getRoot()->getVariable('acl');
$currentUser    = $this->currentUserHelper();
$roleName       = $currentUser->getUserTypeId();

$routeAdd = $this->url('knowledge-area/add');
$allowAdd       = $acl->isAllowed($roleName, 'knowledge-area/add') ? 1 : 0;


$route    = $this->url('knowledge-area');

$this->inlineScript()->appendFile($this->basePath('vendors/ckeditor/ckeditor.js'));

$this->headLink()->appendStylesheet($this->basePath('vendors/nprogress/nprogress.css'));
$this->inlineScript()->appendFile($this->basePath('vendors/nprogress/nprogress.js'));

$this->headLink()->appendStylesheet($this->basePath('vendors/select2/css/select2.min.css'));
$this->headLink()->appendStylesheet($this->basePath('vendors/select2-bootstrap4-theme/select2-bootstrap4.min.css'));
$this->inlineScript()->appendFile($this->basePath('vendors/select2/js/select2.min.js'));

$this->inlineScript()->appendFile($this->basePath('vendors/bootstrap-confirmation/dist/bootstrap-confirmation.js'));
$this->inlineScript()->appendFile($this->basePath('vendors/jsrender/jsrender.min.js'));

$this->headLink()->appendStylesheet($this->basePath('vendors/bootstrap-fileinput/css/fileinput.min.css'));
$this->headLink()->appendStylesheet($this->basePath('vendors/bootstrap-fileinput/themes/explorer-fa/theme.css'));

$this->inlineScript()->appendFile($this->basePath('vendors/bootstrap-fileinput/js/plugins/piexif.js'));
$this->inlineScript()->appendFile($this->basePath('vendors/bootstrap-fileinput/js/plugins/sortable.js'));
$this->inlineScript()->appendFile($this->basePath('vendors/bootstrap-fileinput/js/fileinput.js'));
$this->inlineScript()->appendFile($this->basePath('vendors/bootstrap-fileinput/js/locales/es.js'));
$this->inlineScript()->appendFile($this->basePath('vendors/bootstrap-fileinput/themes/fa/theme.js'));
$this->inlineScript()->appendFile($this->basePath('vendors/bootstrap-fileinput/themes/explorer-fa/theme.js'));


$this->inlineScript()->appendFile($this->basePath('vendors/jquery-validation/jquery.validate.js'));
$this->inlineScript()->appendFile($this->basePath('vendors/jquery-validation/additional-methods.js'));
$this->inlineScript()->appendFile($this->basePath('vendors/jquery-validation/localization/messages_es.js'));



$this->inlineScript()->captureStart();
echo <<<JS

jQuery( document ).ready(function( $ ) {
    $.fn.reload = function() {

        NProgress.start();
        $.ajax({
            'dataType'  : 'json',
            'accept'    : 'application/json',
            'method'    : 'get',
            'url'       :  '$route',
            'data'      : {
                'search' : $('#form-filter #search').val(),
                'category_id' : $('li.knowledge-category-li-selected > a.knowledge-category-a').data('uuid') ,

            } 
        }).done(function(response) {
            if(response['success']) {
                $('#knowledge-record-list').empty();


                if(response['data']['items'].length > 0) {



                    $( "#knowledge-record-list" ).html(
                                $( "#recordTemplate" ).render( response['data']['items'] )
                        );
                } else {
                    var html = '<div class="company-title"><div class="widget widget-jobs"><div class="sd-title">ERROR_NO_RECORD_MATCHED_YOUR_QUERY</div></div></div>';
                    $( "#knowledge-record-list" ).html(html);
                }     


                $('button.btn-knowledge-delete').confirmation({
                    rootSelector: 'button.btn-knowledge-delete',
                    title : 'LABEL_ARE_YOU_SURE',
                    singleton : true,
                    btnOkLabel: 'LABEL_YES',
                    btnCancelLabel: 'LABEL_NO',
                    onConfirm: function(value) {
                        var action = $(this).data('link');
                        NProgress.start();
                        $.ajax({
                            'dataType'  : 'json',
                            'accept'    : 'application/json',
                            'method'    : 'post',
                            'url'       :  action,
                        }).done(function(response) {
                            if(response['success']) {
                                $.fn.showSuccess(response['data']);

                                $.fn.reload();
                            } else {
                                $.fn.showError(response['data']);
                            }
                        }).fail(function( jqXHR, textStatus, errorThrown) {
                            $.fn.showError(textStatus);
                        }).always(function() {
                            NProgress.done();
                        });
                       
                        return false;
                    },
                });
 
            } else {
                $.fn.showError(response['data']);
            } 
        }).fail(function( jqXHR, textStatus, errorThrown) {
            $.fn.showError(textStatus);
        }).always(function() {
            NProgress.done();
        });

    }


    $('#form-connection-search #search').keyup(function(e) {
        e.preventDefault();

        var search = $('#form-connection-search #search').val()
        if(search.length > 0)  {
            var search = $('#form-connection-search #search').val().trim()
            if(search.length > 0)  {
                $.fn.reload(search);
            } else {
                $('#form-connection-search #search').val('');
            }
        } else {
            $.fn.reload('');
        }
        
    });

    $.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) {
            if(element.parent('.btn-file').length) {
                error.insertAfter(element.parent().parent());
            } else if(element.parent('.toggle').length) {
                error.insertAfter(element.parent().parent());
            } else {
                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(element.parent('.btn-file').length) {
                error.insertAfter(element.parent().parent());
            } else if(element.parent('.toggle').length) {
                error.insertAfter(element.parent().parent());
            } else {
                error.insertAfter(element.parent());
            }
        }
    };

    var validatorAdd = $('#form-add').validate({
        debug: true,
        onclick: false,
        onkeyup: false,
        ignore: [],
        rules: {
            'category_id': {
                required: true,
            },
            'title': {
                required: true,
                maxlength: 128,
            },
            'description': {
                updateCkeditor:function() {
                        CKEDITOR.instances.description_add.updateElement();
                },
                required: true
            },
           'image': {
                required: true,
                extension: 'jpg|jpeg|png',
                accept: 'image/jpg,image/jpeg,image/png'
            },
            'attachment': {
                required: false,
                extension: 'pdf|wav|mp3|webm,mp4,webm',
                accept: 'application/pdf, audio/wav, audio/mpeg, video/webm,video/mpeg,video/mp4'
            },
            'link': {
                required: false,
                maxlength: 250,
                url: true,
            }, 
        },
        submitHandler: function(form)
        {
            var formdata = false;
            if (window.FormData){
                formdata = new FormData(form); //form[0]);
            }
                

                        NProgress.start();
            $.ajax({
                'dataType'  : 'json',
                'accept'    : 'application/json',
                'method'    : 'post',
                'url'       :  '$routeAdd',
                'data'      :  formdata,
                'processData': false,
                'contentType': false,
            }).done(function(response) {
                                console.log(response)
                                if(response['success']) {
                    $.fn.showSuccess(response['data']);
                    $.fn.reload();

                    $('#row-add').hide();
                    $('#row-list').show();

                } else {
                    validatorAdd.resetForm();
                    if(jQuery.type(response['data']) == 'string') {
                        $.fn.showError(response['data']);
                    } else  {
                        $.each(response['data'], function( fieldname, errors ) {
                            $.fn.showFormErrorValidator('#form-add #' + fieldname, errors);
                        });
                    }
                }
            }).fail(function( jqXHR, textStatus, errorThrown) {
                $.fn.showError(textStatus);
            }).always(function() {
                NProgress.done();
            });
            return false;
        },
        invalidHandler: function(form, validator) {
            
        }
    });


    var validatorEdit = $('#form-edit').validate({
        debug: true,
        onclick: false,
        onkeyup: false,
        ignore: [],
        rules: {
            'category_id': {
                required: true,
            },
            'title': {
                required: true,
                maxlength: 128,
            },
            'description': {
                updateCkeditor:function() {
                        CKEDITOR.instances.description_edit.updateElement();
                },
                required: true
            },
           'image': {
                required: false,
                extension: 'jpg|jpeg|png',
                accept: 'image/jpg,image/jpeg,image/png'
            },
            'attachment': {
                required: false,
                extension: 'pdf|wav|mp3|webm,mp4,webm',
                accept: 'application/pdf, audio/wav, audio/mpeg, video/webm,video/mpeg,video/mp4'
            },
            'link': {
                required: false,
                maxlength: 250,
                url: true,
            }, 
        },
        submitHandler: function(form)
        {
            var formdata = false;
            if (window.FormData){
                formdata = new FormData(form); //form[0]);
            }
                

                        NProgress.start();
            $.ajax({
                'dataType'  : 'json',
                'accept'    : 'application/json',
                'method'    : 'post',
                'url'       :  $('#form-edit').attr('action'),
                'data'      :  formdata,
                'processData': false,
                'contentType': false,
            }).done(function(response) {
                                console.log(response)
                                if(response['success']) {
                    $.fn.showSuccess(response['data']);
                    $.fn.reload();

                    $('#row-edit').hide();
                    $('#row-list').show();

                } else {
                    validatorAdd.resetForm();
                    if(jQuery.type(response['data']) == 'string') {
                        $.fn.showError(response['data']);
                    } else  {
                        $.each(response['data'], function( fieldname, errors ) {
                            $.fn.showFormErrorValidator('#form-edit #' + fieldname, errors);
                        });
                    }
                }
            }).fail(function( jqXHR, textStatus, errorThrown) {
                $.fn.showError(textStatus);
            }).always(function() {
                NProgress.done();
            });
            return false;
        },
        invalidHandler: function(form, validator) {
            
        }
    });
    $('a.knowledge-category-a').click(function(e) {
        e.preventDefault();


        $('li.knowledge-category-li').removeClass('knowledge-category-li-selected');
        $(this).closest('li.knowledge-category-li').addClass('knowledge-category-li-selected');

        $.fn.reload();
    });

    $('#form-filter #search').keyup(function(e) {

        e.preventDefault();

        $.fn.reload();
    })

    $('button.btn-search').click(function(e) {
        e.preventDefault();

        $.fn.reload();
    });


    $('body').on('click', 'button.btn-knowledge-edit', function(e) {
        e.preventDefault();
        var action = $(this).data('link');
        NProgress.start();
        $.ajax({
            'dataType'  : 'json',
            'accept'    : 'application/json',
            'method'    : 'get',
            'url'       :  action,
        }).done(function(response) {
            if(response['success']) {

                $('#form-edit').attr('action', action);
                $('#form-edit #category_id').val(response['data']['category_id']).trigger('change');

                $('#form-edit #title').val(response['data']['title']);
                $('#form-edit #link').val(response['data']['link']);
                CKEDITOR.instances.description_edit.setData(response['data']['description']);
        
                $('#form-edit #image').fileinput('reset');
                $('#form-edit #image').val('');
                $('#form-edit #attachment').fileinput('reset');
                $('#form-edt #attachment').val('');
        
        
                $('#row-list').hide();
                $('#row-edit').show(); 
            } else {
                $.fn.showError(response['data']);
            }
        }).fail(function( jqXHR, textStatus, errorThrown) {
            $.fn.showError(textStatus);
        }).always(function() {
            NProgress.done();
        });

    });


    $('body').on('click', 'button.btn-knowledge-open-attachment', function(e) {
        e.preventDefault();
        var action = $(this).data('link');

        window.open(action)
    });


    $('body').on('click', 'button.btn-knowledge-open-link', function(e) {
        e.preventDefault();
        var action = $(this).data('link');

        window.open(action)
    });


    $('#knowledge-add-a').click(function(e) {
        e.preventDefault();

        $('#form-add #title').val('');
        $('#form-add #link').val('');
        CKEDITOR.instances.description_add.setData('');

        $('#form-add #image').fileinput('reset');
        $('#form-add #image').val('');
        $('#form-add #attachment').fileinput('reset');
        $('#form-add #attachment').val('');


        $('#row-list').hide();
        $('#row-add').show(); 
    });

    $('button.btn-cancel').click(function(e) {
        e.preventDefault();

        $('#row-add').hide(); 
        $('#row-edit').hide(); 
        $('#row-list').show();
            
    });

    $('#form-add #image').fileinput({
        theme: 'fa',
        language: 'es',
        showUpload: false,
        dropZoneEnabled: false,
        maxFileCount: 1,
        allowedFileExtensions: ['jpg', 'jpeg', 'png'],
        msgPlaceholder: 'LABEL_RECOMMENDED_SIZE $image_size',
    });

    $('#form-add #attachment').fileinput({
        theme: 'fa',
        language: 'es',
        showUpload: false,
        dropZoneEnabled: false,
        maxFileCount: 1,
        allowedFileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'wav', 'mp3', 'mp4', 'mpeg','webm'],
        msgPlaceholder: 'LABEL_EXTENSIONS_ALLOWED jpg, jpeg, png, pdf, wav, mp3, mp4, mpeg, webm',
    });

    $('#form-add #category_id').select2({
        theme: 'bootstrap4',
    });



    $('#form-edit #image').fileinput({
        theme: 'fa',
        language: 'es',
        showUpload: false,
        dropZoneEnabled: false,
        maxFileCount: 1,
        allowedFileExtensions: ['jpg', 'jpeg', 'png'],
        msgPlaceholder: 'LABEL_RECOMMENDED_SIZE $image_size',
    });

    $('#form-edit #attachment').fileinput({
        theme: 'fa',
        language: 'es',
        showUpload: false,
        dropZoneEnabled: false,
        maxFileCount: 1,
        allowedFileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'wav', 'mp3', 'mp4', 'mpeg','webm'],
        msgPlaceholder: 'LABEL_EXTENSIONS_ALLOWED jpg, jpeg, png, pdf, wav, mp3, mp4, mpeg, webm',
    });

    $('#form-edit #category_id').select2({
        theme: 'bootstrap4',
    });


    CKEDITOR.replace('description_add', {
        toolbar: [
                    { name: 'editing', items: ['Scayt'] },
                    { name: 'links', items: ['Link', 'Unlink'] },
                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'] },
                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', 'RemoveFormat'] },
                    '/',
                    { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },
                    { name: 'styles', items: ['Styles', 'Format'] },
                    { name: 'tools', items: ['Maximize'] }
                ],
                removePlugins: 'elementspath,Anchor',
                heigth: 100
    });

    CKEDITOR.replace('description_edit',{
        toolbar: [
                    { name: 'editing', items: ['Scayt'] },
                    { name: 'links', items: ['Link', 'Unlink'] },
                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'] },
                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', 'RemoveFormat'] },
                    '/',
                    { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },
                    { name: 'styles', items: ['Styles', 'Format'] },
                    { name: 'tools', items: ['Maximize'] }
                ],
                removePlugins: 'elementspath,Anchor',
                heigth: 100
    });

     $.fn.reload()


});
JS;

$this->inlineScript()->captureEnd();
$this->headLink()->appendStylesheet('/look-and-field/knowledge.css');
?>

<section class="companies-info container px-0">
    <div class="company-title">
        <h1 class="title mx-auto">LABEL_KNOWLEDGE_AREA_TITLE</h1>
        <?php if ($content_edit && $allowAdd) : ?>
            <h2 class="title cursor-pointer" id="knowledge-add-a">
                LABEL_KNOWLEDGE_AREA_ADD
            </h2>
        <?php endif; ?>
    </div>

    <div class="row gap-3" id="row-list">
        <div class="knowledge-category-list col-12 col-md-3">
            <ul>
                <li class="knowledge-category-li knowledge-category-li-selected">
                    <a class="knowledge-category-a" href="" data-uuid="">LABEL_KNOWLEDGE_AREA_CATEGORY_ALL</a>
                </li>
                <?php
                foreach ($categories as $categorie) :
                ?>
                    <li class="knowledge-category-li">
                        <a class="knowledge-category-a" href="" data-uuid="<?php echo $categorie['uuid'] ?>"><?php echo $categorie['name'] ?></a>
                    </li>

                <?php endforeach; ?>
            </ul>
        </div>


        <div class="col px-0">
            <div class="search-box">
                <form id="form-filter" name="form-filter">
                    <input type="text" name="search" id="search" class="form-control"><button class="btn btn-search">LABEL_SEARCH</button>
                </form>
            </div>

            <div id="knowledge-record-list" class="knowledge-record-list mt-3">
            </div>

            <div id="knowledge-record-pagination">
            </div>

        </div>
    </div>



    <div class="row" id="row-add" style="display: none">
        <div class="col-12">
            <div class="card">
                <?php
                $form = $this->formAdd;
                $form->setAttributes([
                    'method'    => 'post',
                    'name'      => 'form-add',
                    'id'        => 'form-add',
                    //'action'    => $routeAdd,
                ]);

                $form->prepare();
                echo $this->form()->openTag($form);
                ?>
                <div class="card-header">
                    <h4 class="modal-title">LABEL_ADD</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="card-body">

                    <div class="form-group">
                        <?php
                        $element = $form->get('category_id');
                        $element->setOptions(['label' => 'LABEL_CATEGORY']);
                        $element->setAttributes(['class' => 'form-control']);

                        echo $this->formLabel($element);
                        echo $this->formSelect($element);
                        ?>
                    </div>
                    <div class="form-group">
                        <?php
                        $element = $form->get('title');
                        $element->setOptions(['label' => 'LABEL_TITLE']);
                        $element->setAttributes(['class' => 'form-control']);

                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                    <div class="form-group">
                        <?php
                        $element = $form->get('description');
                        $element->setOptions(['label' => 'LABEL_DESCRIPTION']);
                        $element->setAttributes(['class' => 'form-control', 'id' => 'description_add']);

                        echo $this->formLabel($element);
                        echo $this->formTextArea($element);
                        ?>
                    </div>
                    <div class="form-group">
                        <?php
                        $element = $form->get('image');
                        $element->setOptions(['label' => 'LABEL_IMAGE']);
                        $element->setAttributes(['class' => 'form-control']);

                        echo $this->formLabel($element);
                        echo $this->formFile($element);
                        ?>
                    </div>
                    <div class="form-group">
                        <?php
                        $element = $form->get('attachment');
                        $element->setOptions(['label' => 'LABEL_ATTACHMENT']);
                        $element->setAttributes(['class' => 'form-control']);

                        echo $this->formLabel($element);
                        echo $this->formFile($element);
                        ?>
                    </div>
                    <div class="form-group">
                        <?php
                        $element = $form->get('link');
                        $element->setOptions(['label' => 'LABEL_LINK']);
                        $element->setAttributes(['class' => 'form-control']);

                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">LABEL_SAVE</button>
                    <button type="button" class="btn btn-light btn-cancel">LABEL_CANCEL</button>
                </div>
                <?php echo $this->form()->closeTag($form); ?>

            </div>
        </div>
    </div>

    <div class="row" id="row-edit" style="display: none">
        <div class="col-12">
            <div class="card">
                <?php
                $form = $this->formEdit;
                $form->setAttributes([
                    'method'    => 'post',
                    'name'      => 'form-edit',
                    'id'        => 'form-edit',
                    //'action'    => $routeAdd,
                ]);

                $form->prepare();
                echo $this->form()->openTag($form);
                ?>
                <div class="card-header">
                    <h4 class="modal-title">LABEL_EDIT</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="card-body">

                    <div class="form-group">
                        <?php
                        $element = $form->get('category_id');
                        $element->setOptions(['label' => 'LABEL_CATEGORY']);
                        $element->setAttributes(['class' => 'form-control']);

                        echo $this->formLabel($element);
                        echo $this->formSelect($element);
                        ?>
                    </div>
                    <div class="form-group">
                        <?php
                        $element = $form->get('title');
                        $element->setOptions(['label' => 'LABEL_TITLE']);
                        $element->setAttributes(['class' => 'form-control']);

                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                    <div class="form-group">
                        <?php
                        $element = $form->get('description');
                        $element->setOptions(['label' => 'LABEL_DESCRIPTION']);
                        $element->setAttributes(['class' => 'form-control', 'id' => 'description_edit']);

                        echo $this->formLabel($element);
                        echo $this->formTextArea($element);
                        ?>
                    </div>
                    <div class="form-group">
                        <?php
                        $element = $form->get('image');
                        $element->setOptions(['label' => 'LABEL_IMAGE']);
                        $element->setAttributes(['class' => 'form-control']);

                        echo $this->formLabel($element);
                        echo $this->formFile($element);
                        ?>
                    </div>
                    <div class="form-group">
                        <?php
                        $element = $form->get('attachment');
                        $element->setOptions(['label' => 'LABEL_ATTACHMENT']);
                        $element->setAttributes(['class' => 'form-control']);

                        echo $this->formLabel($element);
                        echo $this->formFile($element);
                        ?>
                    </div>
                    <div class="form-group">
                        <?php
                        $element = $form->get('link');
                        $element->setOptions(['label' => 'LABEL_LINK']);
                        $element->setAttributes(['class' => 'form-control']);

                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">LABEL_SAVE</button>
                    <button type="button" class="btn btn-light btn-cancel">LABEL_CANCEL</button>
                </div>
                <?php echo $this->form()->closeTag($form); ?>

            </div>
        </div>
    </div>


</section>

<script id="recordTemplate" type="text/x-jsrender">
    <div class="knowledge-record-card">
        <a href="{{>link_view}}"  target="_blank" class="knowledge-record-card-actions-view">
            <img src="{{>image}}" alt="{{>title}} image">
        </a>
        <div class="d-flex align-items-center justify-content-between">
            {{if link_edit }}
            <button data-link="{{>link_edit}}" class="btn-knowledge-edit"> <i class="fa fa-pencil" aria-hidden="true"></i> </button>
            {{/if}}
            {{if link_delete }}
            <button data-link="{{>link_delete}}" class="btn-knowledge-delete"> <i class="fa fa-trash" aria-hidden="true"></i> </button>
            {{/if}}
        </div>
        <h3>{{>category}}</h3>
        <a href="{{>link_view}}"  target="_blank">
            <h2>{{>title}}</h2>
        </a>
        <p>{{>description}}</p>
    </div>
</script>