operadores/ui/resources/views/ventas/show.blade.php

@extends('layout.base')

@section('content')
  <h1 class="header">
    Ventas - <span id="proyecto"></span>
  </h1>
  <table class="table">
    <thead>
      <tr>
        <th>
          Departamento
        </th>
        <th>
          Propietario
        </th>
        <th class="text-right">
          Valor
        </th>
        <th>
          Operador
        </th>
        <th class="text-right">
          Comisi&oacute;n
        </th>
        <th>
          Facturas
        </th>
      </tr>
    </thead>
    <tbody id="ventas">
    </tbody>
  </table>
@endsection

@push('scripts')
  <script type="text/javascript">
    const proyecto = {
      id: '#proyecto',
      data: {},
      get: function() {
        return $.ajax({
          url: '{{$urls->api}}/proyecto/{{$proyecto_id}}',
          method: 'get',
          dataType: 'json'
        }).then((data) => {
          this.data = data.proyecto
          $(this.id).html(data.proyecto.descripcion + ' - ' + data.proyecto.inmobiliaria.abreviacion)
        })
      },
      setup: function() {
        this.get().then(() => {
          ventas.get().ventas(this.data.id)
        })
      }
    }
    const ventas = {
      id: '#ventas',
      data: [],
      get: function() {
        return {
          ventas: (proyecto) => {
            return $.ajax({
              url: '{{$urls->api}}/proyecto/' + proyecto + '/ventas',
              method: 'get',
              dataType: 'json'
            }).then((data) => {
              this.data = data.ventas
            }).then(() => {
              this.draw()
            })
          },
          facturas: (unidad) => {
            return $.ajax({
              url: '{{$urls->api}}/unidad/' + unidad + '/facturas',
              method: 'get',
              dataType: 'json'
            })
          }
        }
      },
      draw: function() {
        const parent = $(this.id)
        $.each(this.data, (i, el) => {
          const row = $('<tr></tr>').append(
            $('<td></td>').html(el.propiedad.unidades[0].descripcion)
          ).append(
            $('<td></td>').html(el.propietario.nombre_completo)
          ).append(
            $('<td></td>').attr('class', 'text-right').html(el.valor)
          )
          if (el.operador) {
            row.append(
              $('<td></td>').html(el.operador.descripcion)
            ).append(
              $('<td></td>').attr('class', 'text-right').html(el.comision.formateada)
            ).append(
              $('<td></td>').attr('id', el.propiedad.unidades[0].id)
            )
            this.get().facturas(el.propiedad.unidades[0].id).then((data) => {
              const td = $('td#' + data.unidad.id)
              if (data.facturas === null || data.facturas.length == 0) {
                return
              }
              $.each(data.facturas, (k, it) => {
                console.debug(it)
              })
            })
          } else {
            row.append(
              $('<td></td>')
            ).append(
              $('<td></td>')
            ).append(
              $('<td></td>')
            )
          }
          parent.append(row)
        })
      }
    }
    $(document).ready(() => {
      proyecto.setup()
    })
  </script>
@endpush