Proyectos de Subversion LeadersLinked - Backend

<?php

$acl            = $this->viewModel()->getRoot()->getVariable('acl');

$currentUser    = $this->currentUserHelper();

$roleName = $currentUser->getUserTypeId();

$allowDownload  = $acl->isAllowed($roleName, 'microlearning/reports/progress-for-student/excel') ? 1 : 0;

$this->headLink()->appendStylesheet($this->basePath('assets/vendors/select2/css/select2.min.css'));

$this->headLink()->appendStylesheet($this->basePath('assets/vendors/select2-bootstrap5-theme/select2-bootstrap-5-theme.css'));

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

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

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

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

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

echo <<<CSS

#gridTable {

    display: flex;

    flex-flow: column;

    width: 100%;

}

#gridTable thead {

    flex: 0 0 auto;

}

#gridTable tbody {

    flex: 1 1 auto;

    display: block;

    overflow-y: auto;

    overflow-x: hidden;

}

#gridTable tr {

    width: 100%;

    display: table;

    table-layout: fixed;

}

CSS;

$this->headStyle()->captureEnd();

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

echo <<<JS

jQuery( document ).ready(function( $ ) {

    $.fn.changeFilter = function() {

        NProgress.start();

        $.ajax({

            'dataType'  : 'json',

            'accept'    : 'application/json',

            'method'    : 'get',

            'url'       :  $('#form-filter').attr('action'),

            'data'      :  $('#form-filter').serialize(),

        }).done(function(response) {

            if(response['success']) {

                if(response['data']['items']) {

                    $('#gridTable tbody').empty();

                    $('#gridTable tbody').append(

                        $( "#progressRowTemplate" ).render( response['data']['items'] )

                    );

                }

                if(response['data']['link_download']) {

                    $('button.btn-download').data('href', response['data']['link_download']);

                    $('button.btn-download').show();

                } else {

                     $('button.btn-download').hide();

                }

            } else {

                if(jQuery.type(response['data']) == 'string') {

                    $.fn.showError(response['data']);

                } else  {

                    $.each(response['data'], function( fieldname, errors ) {

                        $.fn.showFormErrorValidator('#form-filter #' + fieldname, errors);

                    });

                }

            }

        }).fail(function( jqXHR, textStatus, errorThrown) {

            $.fn.showError(textStatus);

        }).always(function() {

            NProgress.done();

        });

        return false;

    }

    $('#form-filter #student_uuid').change(function(e) {

        e.preventDefault();

        $.fn.changeFilter();

    })

    $('button.btn-download').click(function(e) {

        e.preventDefault();

        var action   = $(this).data('href');

        NProgress.start();

        $.ajax({

            'dataType'  : 'json',

            'method'    : 'get',

            'url'       :  action,

        }).done(function(response) {

            if(response['success']) {

                var anchor = window.document.createElement("a");

                anchor.href = 'data:application/octet-stream;charset=utf-8;base64,' + response['data']['content'] ;

                anchor.download = response['data']['basename'];

                document.body.appendChild(anchor);

                anchor.click();  // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access

                document.body.removeChild(anchor);

            } else {

                $.fn.showError(response['data']);

            }

        }).fail(function( jqXHR, textStatus, errorThrown) {

            showError(textStatus);

        }).always(function() {

            NProgress.done();

        });

    });

    $('button.btn-refresh').click(function(e) {

        e.preventDefault();

        $.fn.changeFilter();

    });

    $('#student_uuid').select2({

        theme: 'bootstrap-5',

        width: '100%',

    });

    $.fn.changeFilter();

    $('button.btn-download').hide();

});

JS;

$this->inlineScript()->captureEnd();

?>

<div class="container">

	<div class="card" id="">

	 	<div class="card-header">

	 		<h6 class="card-title">LABEL_PROGRESS_FOR_STUDENT</h6>

	 	</div>

	 	<div class="card-body">

	 	<?php

                        $form = $this->form;

            	        $form->setAttributes([

                            'name'    => 'form-filter',

                            'id'      => 'form-filter',

                        ]);

                        $form->prepare();

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

                        ?>

                        <div class="row">

                            <div class="col-12 mt-3">

                                    <?php

                                    $element = $form->get('student_uuid');

                                    $element->setOptions(['label' => 'LABEL_STUDENT']);

                                    $element->setAttributes(['class' => 'form-control']);

                                    echo $this->formLabel($element);

                                    echo $this->formSelect($element);

                                    ?>

                            </div>

                        </div>

						<?php echo $this->form()->closeTag($form); ?>

	 		<div class="row">

	 	         <div class="col-12 mt-3">

	 	           		<table id="gridTable" class="table   table-bordered">

                      		<thead>

        						<tr>

									<th style="width: 30%">LABEL_TOPIC</th>

									<th style="width: 30%">LABEL_CAPSULE</th>

       								<th style="width: 20%">LABEL_COMPLETED</th>

                      				<th style="width: 20%">LABEL_REPORTS_PROGRESS</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($allowDownload) :  ?>

                					<button type="button" class="btn btn-info btn-download"><i class="fa fa-download"></i> LABEL_DOWNLOAD  </button>

                					<?php endif;?>

	 	</div>

	</div>

</div>

<script id="progressRowTemplate" type="text/x-jsrender">

    <tr>

        <td  style="width: 30%">

            {{>topic}}

        </td>

        <td  style="width: 30%">

             {{>capsule}}

        </td>

        <td  style="width: 20%">

             {{>completed}}

        </td>

        <td  style="width: 20%">

            <div class="progress progress-xs progress-striped active" style="height: 15px">

                <div class="progress-bar {{if completed == '1' }} bg-success {{ else }} bg-primary {{/if}}" style="width: {{>progress}}%">

{{>progress}}  %

                </div>

            </div>

        </td>

    </tr>

    <tr>

                    <td class="text-right">LABEL_REPORTS_TOTAL_SLIDES</td>

                    <td class="text-right">LABEL_REPORTS_VIEW_SLIDES</td>

                    <td>LABEL_REPORTS_FIRST_DATE</td>

                    <td>LABEL_REPORTS_LAST_DATE</td>

                </tr>

                <tr>

                    <td class="text-right">{{>total_slides}}</td>

                    <td class="text-right">{{>view_slides}}</td>

                    <td>{{>added_on}}</td>

                    <td>{{>updated_on}}</td>

                </tr>

    </tr>

</script>