Single modal for lines of a DATA TABLE

Question

I have a data listing with approximately 1200 clients where I bring [CPF, NAME, PHONE, ONE STATUS] and a column with the control buttons, a year ago I took a mini-course in college to learn how to work with Laravel, the instructor taught to do in a way that to mine is now unviable by charging time!

PROBLEM:

For each control I have a link that leads me to some action in the controller, as edit, remove and copy, in this DATA TABLE in question I have one more action that is to define if that customer pays or not unloading products. For the remove buttons and the discharge payment has a modal for each line so imagine the size of the html code!

Basically I customize the name of the modal, the body (with object data in foreach) and the action button (sending line id to the controller via get route)

Button and modal code (Remove) :

<a class="btn btn-xs btn-danger" title="Remover parceiro" data-toggle="modal" href="#modalRemove{{$c->parc_cpf_cnpj}}"><i class="fa fa-trash"></i></a>
<div class="modal fade" id="modalRemove{{$c->parc_cpf_cnpj}}" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
                                                                        </button>
        <h4 class="modal-title"><img clas="logoApplication" src={{ asset(\App\Http\Controllers\ConfigController::logoAplication())}} width="30" height="30"> &nbsp; {{ \App\Http\Controllers\HelperMsgController::remove_registro() }}</h4>
      </div>
      <div class="modal-body text-center">
        <p class="attention-removal">
          <i class="fa fa-exclamation-triangle"></i>&nbsp;
          <b>{{\App\Http\Controllers\HelperMsgController::msg_body_modal_selec_remove_exclamation()}}</b>
        </p>
        <p>Deseja realmente remover definitivamente o parceiro <b>{{$c->parc_razao_social}}</b> ?</p>
      </div>
      <div class="modal-footer">
        <button type="button" title="Cancelar operação" class="btn btn-default" data-dismiss="modal"><i class="fa fa-sign-out"></i>&nbsp; Cancelar
                                                                        </button>

        <a id="remover_form_rec{{$c->id}}" class="btn btn-small btn-danger" title="Remover este parceiro" href="{{action('ParceiroController@destroy', $c->parc_cpf_cnpj)}}">
          <i class="fa fa-trash"></i>&nbsp; Remover</a>
      </div>

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

I tried to implement ajax, but I can’t do it satisfactorily:

function geraModalConfDescarga(parc_cpf_cnpj) {
        var path = 'modal/confirma/'+parc_cpf_cnpj+'/pagamento/descarga';
        $.ajax({
            async: false,
            url: path,
            dataType: 'HTML',
            beforeSend: function () {
            },
            success: function (response) {
                //adiciona o modal (content do view na div .content)
                $(".content").append(response);
            }
        });
    }

On the DATA TABLE button:

<a class="btn btn-xs btn-primary" title="Confirmar pagamento de descarga" data-toggle="modal" onclick="geraModalConfDescarga({{$c->parc_cpf_cnpj}})" href="#modalConfPagDesc{{$c->parc_cpf_cnpj}}">
  <i class="fa fa-money"></i> <i class="fa fa-check"></i>
</a>

En route:

Route::group(['prefix' => 'modal', 'middleware' => 'auth'], function (){
Route::get('confirma/{id}/pagamento/descarga', 'ModalsController@modalParceiroPagaDescarga');});

On the controller:

public function modalParceiroPagaDescarga($id)
{
    $parceiro = Parceiro::where("parc_cpf_cnpj", "=", intval($id))->get()->first();

    $parc_cpf_cnpj = $parceiro->parc_cpf_cnpj;
    $parc_razao_social = $parceiro->parc_razao_social;

    return view("modals.pag-descarga", compact('parc_cpf_cnpj', 'parc_razao_social'));
}

The modal in a php file:

<div class="modal fade" id="modalConfPagDesc{{$parc_cpf_cnpj}}" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
                </button>
        <h4 class="modal-title"><img clas="logoApplication" src={{ asset(\App\Http\Controllers\ConfigController::logoAplication())}} width="30" height="30"> &nbsp; {{ \App\Http\Controllers\HelperMsgController::confirma() }}</h4>
      </div>
      <div class="modal-body text-center">
        <p>Deseja realmente confirmar que o parceiro <b>{{$parc_razao_social}}</b> efetua pagamento de desscargas ?</p>
      </div>
      <div class="modal-footer">
        <button type="button" title="Cancelar operação" class="btn btn-default" data-dismiss="modal"><i class="fa fa-sign-out"></i>&nbsp; Cancelar
                </button>

        <a id="confirmar_descarga{{$parc_cpf_cnpj}}" class="btn btn-small btn-primary" title="Confirmar pagamento de descarga" href="{{action('ParceiroController@confirmPagDescarga', $parc_cpf_cnpj)}}">
          <i class="fa fa-check"></i>&nbsp; Confirmar</a>
      </div>

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

<script>
  $(document).ready(function() {
    $('#confirmar_descarga{{$parc_cpf_cnpj}}').click(function(event) {
      $('#modalConfPagDesc{{$parc_cpf_cnpj}}').modal('hide');
      window.setInterval('abreProcessamento()', 400);
    });
  })
</script>

Answer 1

To get a better result on the front end you can try using another approach like using Vuejs which is recommended by the Aravel itself.

Vue allows you to create more dynamic applications using less code and with greater ease.

Link to the Laravel documentation using Vue

This video can help you