Print and export button on Bread

hermesalvesbr commented 4 years ago

Version information

Laravel: Laravel Framework 5.8.35
Voyager: v1.3.1
PHP: PHP 7.2.26
Database: MySQL 5.7.28

Description of problem

Users want a formatted screen for printing, and at other times they want to export data to excel for calculations or reports.

Proposed solution

Like the datatable, put on option in bread, to show the print and export button.

Alternatives considered

Business systems always need to print to dispatch to other sectors, or even to deliver as a receipt to customers. As well as generating the pdf to transmit by email.

ash-rain commented 4 years ago

This is an outstanding issue and very common feature in web apps. I tried looking for hooks that export browsed data but nothing works.

lamtin222 commented 4 years ago

In my project, i edited "browse.blade.php" in BREAD folder of Voyager resources. Add script of datatables export to script section. Add css of export button to css section. Below is how i make it work. Seem silly, but it's work `@section('css')

@if(!$dataType->server_side && config('dashboard.data_tables.responsive'))

@endif @stop

@section('javascript')

<!-- DataTables->button -->
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js"></script>
@if(!$dataType->server_side && config('dashboard.data_tables.responsive'))
    <script src="{{ voyager_asset('lib/js/dataTables.responsive.min.js') }}"></script>
@endif
<script>
    $(document).ready(function () {
        @if (!$dataType->server_side)
        var table = $('#dataTable').DataTable({!! json_encode(
                array_merge(
                [
                    "order" => $orderColumn,
                    "language" => __('voyager::datatable'),
                    "columnDefs" => [['targets' => -1, 'searchable' =>  false, 'orderable' => false]],
                ],
                config('voyager.dashboard.data_tables', []),
                [
                     "dom"=>"Blfrtip",
                    "buttons"=> [
                        [
                            'extend'=>"copyHtml5",
                            'exportOptions'=>['columns'=>":visible"]
                        ],
                        [
                            'extend'=>"excelHtml5",
                            'exportOptions'=>['columns'=>":visible"]
                        ],
                        [
                            'extend'=>"pdfHtml5",
                            'exportOptions'=>['columns'=>":visible"]
                        ],
                        'colvis'
                    ]
                ]
                )
            , true) !!});
        @else
            $('#search-input select').select2({
                minimumResultsForSearch: Infinity
            });
        @endif

        @if ($isModelTranslatable)
            $('.side-body').multilingual();
            //Reinitialise the multilingual features when they change tab
            $('#dataTable').on('draw.dt', function(){
                $('.side-body').data('multilingual').init();
            })
        @endif
        $('.select_all').on('click', function(e) {
            $('input[name="row_id"]').prop('checked', $(this).prop('checked')).trigger('change');
        });
    });

    var deleteFormAction;
    $('td').on('click', '.delete', function (e) {
        $('#delete_form')[0].action = '{{ route('voyager.'.$dataType->slug.'.destroy', '__id') }}'.replace('__id', $(this).data('id'));
        $('#delete_modal').modal('show');
    });

    @if($usesSoftDeletes)
        @php
            $params = [
                's' => $search->value,
                'filter' => $search->filter,
                'key' => $search->key,
                'order_by' => $orderBy,
                'sort_order' => $sortOrder,
            ];
        @endphp
        $(function() {
            $('#show_soft_deletes').change(function() {
                if ($(this).prop('checked')) {
                    $('#dataTable').before('<a id="redir" href="{{ (route('voyager.'.$dataType->slug.'.index', array_merge($params, ['showSoftDeleted' => 1]), true)) }}"></a>');
                }else{
                    $('#dataTable').before('<a id="redir" href="{{ (route('voyager.'.$dataType->slug.'.index', array_merge($params, ['showSoftDeleted' => 0]), true)) }}"></a>');
                }

                $('#redir')[0].click();
            })
        })
    @endif
    $('input[name="row_id"]').on('change', function () {
        var ids = [];
        $('input[name="row_id"]').each(function() {
            if ($(this).is(':checked')) {
                ids.push($(this).val());
            }
        });
        $('.selected_ids').val(ids);
    });
</script>

@stop`

thedevdojo / voyager