Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 17240 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log | 

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

$roleName = $currentUser->getUserTypeId();
$routeDatatable = $this->url('microlearning/content/capsules');

$allowAdd       = $acl->isAllowed($roleName, 'microlearning/content/capsules/add') ? 1 : 0;
$allowEdit      = $acl->isAllowed($roleName, 'microlearning/content/capsules/edit') ? 1 : 0;
$allowDelete    = $acl->isAllowed($roleName, 'microlearning/content/capsules/delete') ? 1 : 0;

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

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

// File Input
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap-fileinput/css/fileinput.min.css'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap-fileinput/themes/explorer-fas/theme.css'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/plugins/piexif.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/plugins/sortable.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/fileinput.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/locales/es.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/themes/fas/theme.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/themes/explorer-fas/theme.js'));

// Datatables
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/datatables.net-bs5/dataTables.bootstrap5.css'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/datatables.net-bs5-responsive/responsive.bootstrap5.css'));

// Datatables
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net/jquery.dataTables.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5/dataTables.bootstrap5.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5-responsive/dataTables.responsive.min.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5-responsive/responsive.bootstrap5.min.js'));

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

// Input Number Format
$this->inlineScript()->appendFile($this->basePath('assets/vendors/jquery-input-number/input-number-format.jquery.js'));

$this->headStyle()->captureStart();
echo <<<CSS
    #gridTableUsers {
        display: flex;
        flex-flow: column;
        width: 100%;
    }
    #gridTableUsers thead {
        flex: 0 0 auto;
    }
    #gridTableUsers tbody {
        flex: 1 1 auto;
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #gridTableUsers tr {
        width: 100%;
        display: table;
        table-layout: fixed;
    }
    .imagen-contaner{
        border:1px solid rgb(200,200,200);
        border-radius:5px;
        padding:10px;
        display:flex;
        flex-flow:column;
        align-items:center;
    }
CSS;
$this->headStyle()->captureEnd();

$this->headLink()->captureStart();

$this->inlineScript()->captureStart();
echo <<<JS
    jQuery(document).ready(function ($) {
        // Configuración de validación de formularios
        $.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())
            }
            }
        })

        // Variables de permisos
        var allowEdit = $allowEdit
        var allowDelete = $allowDelete

        // Configuración de la tabla principal
        var gridTable = $('#gridTable').dataTable({
            processing: true,
            serverSide: true,
            searching: true,
            order: [[0, 'asc']],
            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) {
                const data = JSON.parse(response)

                var json = {
                recordsTotal: 0,
                recordsFiltered: 0,
                data: []
                }

                if (data.success) {
                $('#form-add').attr('action', data.data.link_add)
                json.recordsTotal = data.data.total
                json.recordsFiltered = data.data.total
                json.data = data.data.items
                } else {
                $.fn.showError(data.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()
            },
            aoColumns: [
            { mDataProp: 'name' },
            { mDataProp: 'description' },
            { mDataProp: 'image' },
            { mDataProp: 'actions' }
            ],
            columnDefs: [
            {
                targets: 0,
                className: 'text-vertical-middle'
            },
            {
                targets: -3,
                orderable: false,
                render: function (data, type, row) {
                var s = 'LABEL_DESCRIPTION: ' + data + '<br/>'
                return s
                }
            },
            {
                targets: -2,
                orderable: false,
                render: function (data, type, row) {
                s = '&nbsp; <img class="btn-view-image-app" data-href="' +
                    data +
                    '" data-toggle="tooltip" src="' +
                    data +
                    '" title="LABEL_VIEW" style="width: 40px; object-fit: cover; height: 40px;" /> '

                return s
                }
            },
            {
                targets: -1,
                orderable: false,
                render: function (data, type, row) {
                s = ''

                if (allowEdit && data['link_edit']) {
                    s =
                    s +
                    '<button class="btn btn-info btn-sm btn-edit" data-href="' +
                    data['link_edit'] +
                    '" data-toggle="tooltip" title="LABEL_EDIT"><i class="fa fa-pen"></i> LABEL_EDIT </button>&nbsp;'
                }
                if (allowDelete && data['link_delete']) {
                    s =
                    s +
                    '<button class="btn btn-danger btn-sm btn-delete" data-href="' +
                    data['link_delete'] +
                    '" data-toggle="tooltip" title="LABEL_DELETE"><i class="fa fa-trash"></i> LABEL_DELETE </button>&nbsp;'
                }

                return s
                }
            }
            ]
        })

        // Validación de formulario de creación
        var validatorAdd = $('#form-add').validate({
            debug: true,
            onclick: false,
            onkeyup: false,
            ignore: [],
            rules: {
            name: {
                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'
            },
            },
            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-add').attr('action'),
                data: formdata,
                processData: false,
                contentType: false
            })
                .done(function (response) {
                if (response['success']) {
                    $.fn.showSuccess(response['data'])

                    gridTable.api().ajax.reload(null, false)

                    $('#row-add').hide()
                    $('#row-edit').hide()
                    $('#row-listing').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) {
                console.log(jqXHR)
                $.fn.showError(textStatus)
                })
                .always(function () {
                NProgress.done()
                })
            return false
            },
            invalidHandler: function (form, validator) {}
        })

        // Validación de formulario de edición
        var validatorEdit = $('#form-edit').validate({
            debug: true,
            onclick: false,
            onkeyup: false,
            ignore: [],
            rules: {
                name: {
                    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'
                }
            },
            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) {
                    if (response['success']) {
                        $.fn.showSuccess(response['data'])

                        gridTable.api().ajax.reload(null, false)

                        $('#row-add').hide()
                        $('#row-edit').hide()
                        $('#row-listing').show()
                    } else {
                        validatorEdit.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) {}
        })

        // Evento de botón de vista de imagen del marketplace
        $('body').on('click', '.btn-view-image-marketplace', function (e) {
            e.preventDefault()

            $('#image-marketplace').attr('src', $(this).data('href'))
            $('#modalPreviewMarketPlace').modal('show')
            return false
        })

        // Evento de botón de vista de imagen de la aplicación
        $('body').on('click', '.btn-view-image-app', function (e) {
            e.preventDefault()

            $('#image-app').attr('src', $(this).data('href'))
            $('#modalPreviewImage').modal('show')
            return false
        })

        // Evento de botón de añadir
        $('body').on('click', 'button.btn-add', function (e) {
            e.preventDefault()

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

            CKEDITOR.instances.description_add.setData('')
            validatorAdd.resetForm()

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

        // Evento de botón de editar
        $('body').on('click', 'button.btn-edit', function (e) {
            e.preventDefault()
            NProgress.start()
            var url = $(this).data('href')
            $.ajax({
            dataType: 'json',
            accept: 'application/json',
            method: 'get',
            url: url
            })
            .done(function (response) {
                if (response['success']) {
                $('#form-edit').attr('action', url)
                $('#form-edit #name').val(response['data']['name'])
                $('#form-edit #image').fileinput('reset')
                $('#form-edit #image').val('')

                CKEDITOR.instances.description_edit.setData(
                    response['data']['description']
                )
                validatorEdit.resetForm()

                $('#row-listing').hide()
                $('#row-add').hide()
                $('#row-edit').show()
                } else {
                validatorEdit.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()
            })
        })

        // Evento de botón de eliminar
        $('body').on('click', 'button.btn-delete', function (e) {
            e.preventDefault()
            var action = $(this).data('href')

            swal
            .fire({
                title: 'LABEL_ARE_YOU_SURE',
                icon: 'question',
                cancelButtonText: 'LABEL_NO',
                showCancelButton: true,
                confirmButtonText: 'LABEL_YES'
            })
            .then((result) => {
                if (result.isConfirmed) {
                NProgress.start()
                $.ajax({
                    dataType: 'json',
                    accept: 'application/json',
                    method: 'post',
                    url: action
                })
                    .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()
                    })
                }
            })
        })

        // Evento de botón de cancelar
        $('body').on('click', 'button.btn-cancel', function (e) {
            e.preventDefault()
            $('#row-add').hide()
            $('#row-edit').hide()
            $('#row-listing').show()
        })

        // Evento de botón de refrescar
        $('body').on('click', 'button.btn-refresh', function (e) {
            e.preventDefault()
            gridTable.api().ajax.reload(null, false)
        })
        
        // Configuración del formulario de creación
        $('#form-add #image').fileinput({
            theme: 'fa',
            language: 'es',
            showUpload: false,
            dropZoneEnabled: false,
            maxFileCount: 1,
            msgPlaceholder: 'LABEL_RECOMMENDED_SIZE $image_size',
            allowedFileExtensions: ['jpeg', 'jpg', 'png']
        })

        // Configuración del formulario de edición
        $('#form-edit #image').fileinput({
            theme: 'fa',
            language: 'es',
            showUpload: false,
            dropZoneEnabled: false,
            maxFileCount: 1,
            msgPlaceholder: 'LABEL_RECOMMENDED_SIZE $image_size',
            allowedFileExtensions: ['jpeg', 'jpg', 'png']
        })

        // Configuración del editor de CKEditor para el formulario de creación
        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
        })

        // Configuración del editor de CKEditor para el formulario de edición
        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
        })
    })
JS;
$this->inlineScript()->captureEnd();
?>

<div class="container">
        <div class="card" id="row-listing">
                <div class="card-header">
                        <h6 class="card-title">LABEL_CAPSULES</h6>
                </div>

                <div class="card-body">
                        <div class="row">
                        <div class="col-12 mt-3">       
                                        <table id="gridTable" class="table table-bordered">
                                                <thead>
                            <tr>
                                <th>LABEL_NAME</th>
                                <th>LABEL_DETAILS</th>
                                <th>LABEL_IMAGES</th>
                                <th>LABEL_ACTIONS</th>
                            </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                        </table>
                        </div>
                    </div>
                </div>

                <div class="card-footer text-right">
                        <button type="button" class="btn btn-info btn-refresh"><i class="fa fa-sync"></i> LABEL_REFRESH </button>
                        <?php if ($allowAdd) : ?>
                        <button type="button" class="btn btn-primary btn-add"><i class="fa fa-plus"></i> LABEL_ADD </button>
                        <?php endif; ?>
                </div>
        </div>
        
        <div class="card" id="row-add" style="display: none">
                <div class="card-header">
                        <h6 class="card-title">LABEL_ADD_CAPSULE</h6>
                </div>

                <?php
                $form = $this->formAdd;
                $form->setAttributes([
                        'method'  => 'post',
                        'action'  => '',
                        'name'    => 'form-add',
                        'id'      => 'form-add',
                ]);

                $form->prepare();
                echo $this->form()->openTag($form);
                ?>

            <div class="card-body">
                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('name');
            
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_NAME']);
                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                </div>  

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('description');
                        $element->setAttributes(['id' => 'description_add', 'class' => 'form-control', 'rows' => '2', 'class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_DESCRIPTION']);
                        echo $this->formLabel($element);
                        echo $this->formTextArea($element);
                        ?>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('image');
                        $element->setOptions(['label' => 'LABEL_IMAGE']);
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);
                        echo $this->formLabel($element);
                        echo $this->formFile($element);
                        ?>
                    </div>
                </div>
            </div>

            <div class="card-footer text-right">
                <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 class="card" id="row-edit" style="display: none">
                <div class="card-header">
                        <h6 class="card-title">LABEL_EDIT_CAPSULE</h6>
                </div>

                <?php
                $form = $this->formEdit;
                $form->setAttributes([
                    'method'    => 'post',
                    'name'      => 'form-edit',
                    'id'        => 'form-edit'
                ]);

                $form->prepare();
                echo $this->form()->openTag($form);
                ?>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('name');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_NAME']);
                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('description');
                        $element->setAttributes(['id' => 'description_edit', 'class' => 'form-control', 'rows' => '2', 'class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_DESCRIPTION']);
                        echo $this->formLabel($element);
                        echo $this->formTextArea($element);
                        ?>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mt-3">
                            <?php
                            $element = $form->get('image');
                            $element->setOptions(['label' => 'LABEL_IMAGE']);
                            $element->setAttributes(['class' => 'form-control']);
                            $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);
                            echo $this->formLabel($element);
                            echo $this->formFile($element);
                            ?>
                    </div>
                </div>
            </div>
            
            <div class="card-footer text-right">
                <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>

<!-- The Modal -->
<div class="modal" id="modalPreviewImage">
        <div class="modal-dialog ">
                <div class="modal-content">

                        <!-- Modal Header -->
                        <div class="modal-header">
                                <h6 class="modal-title">LABEL_IMAGE</h6>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
                        </div>

                        <!-- Modal body -->
                        <div class="modal-body text-center">
                                <img src="" class="img img-responsive" style="width: 300px; height: auto" id="image-app" />
                        </div>

                        <!-- Modal footer -->
                        <div class="modal-footer text-right">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">LABEL_CLOSE</button>
                        </div>
                </div>
        </div>
</div>