hoja-ruta.html 19.6 KB
<div class="crear-hoja-ruta foca-crear one-row row">
    <form name="formCrearNota" ng-submit="crearNotaPedido()" class="mb-0 col-lg-12">
        <div class="row">
            <div class="col-md-10 col-lg-12">
                <div class="row panel-informativo">
                    <div class="col-12">
                        <div class="row titulares">
                            <div class="col-12 col-sm-3 nota-pedido border border-left-0 border-white align-middle">
                                <h5 class="mb-0">HOJA DE RUTA</h5>
                            </div>
                            <div class="col-12 col-sm-3 numero-pedido text-center text-md-left border border-white align-middle"
                                >Nº {{puntoVenta}}-{{comprobante}}
                            </div>
                            <div class="col-7 col-sm-3 border border-white align-middle">
                                Fecha:
                                <span
                                    ng-show="!datepickerAbierto"
                                    ng-bind="now | date:'dd/MM/yyyy'"
                                    ng-click="datepickerAbierto = true"
                                >
                                </span>
                                <input
                                    ng-show="datepickerAbierto"
                                    type="date"
                                    ng-model="now"
                                    ng-change="datepickerAbierto = false"
                                    ng-blur="datepickerAbierto = false"
                                    class="form-control form-control-sm col-8 float-right"
                                    foca-focus="datepickerAbierto"
                                    hasta-hoy
                                />
                            </div>
                            <div class="col-5 col-sm-3 border border-white border-right-0 align-middle">
                                Hora:
                                <span
                                    ng-show="!datepickerAbierto"
                                    ng-bind="now | date:'HH:mm'"
                                    ng-click="datepickerAbierto = true"
                                >
                                </span>
                            </div>
                        </div>
                        <div class="row py-2">
                            <div class="col-auto" ng-repeat="cab in cabecera" ng-show="showCabecera">
                                <span class="label" ng-bind="cab.label"></span>
                                <span class="valor" ng-bind="cab.valor"></span>
                            </div>
                            <a 
                                class="btn col-12 btn-secondary d-sm-none" 
                                ng-show="cabecera.length > 0"
                                ng-click="showCabecera = !showCabecera"
                            >
                                <i
                                    class="fa fa-chevron-down"
                                    ng-hide="showCabecera"
                                    aria-hidden="true"
                                >
                                </i>
                                <i
                                    class="fa fa-chevron-up"
                                    ng-show="showCabecera"
                                    aria-hidden="true">
                                </i>
                            </a>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </form>
    <div class="col-lg-12">
        <div class="row mt-4">
            <div class="col-12 col-md-10 border border-light rounded">
                <div class="row px-5 py-2 botonera-secundaria">
                    <div class="col-12">
                        <div class="row">
                            <div 
                                class="col-6 col-sm-2 px-1 py-1 m-auto m-md-0" 
                                ng-repeat="boton in botonera"
                                ng-class="{'d-none d-md-grid': boton.texto == ''}">
                                <button
                                    type="button"
                                    class="btn btn-default btn-block btn-xs text-center py-1 rounded border border-light"
                                    ng-click="boton.accion()"
                                    ng-class="{'d-sm-block h-100': boton.texto == ''}"
                                >
                                    <img src="{{boton.imagen}}" alt="" ng-if="boton.imagen">
                                    <span>{{boton.texto}}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- PC -->
                <div class="row grilla-articulo align-items-end d-none d-sm-flex">
                    <table class="table tabla-articulo table-striped table-sm mb-0 rounded-bottom">
                        <thead>
                            <tr class="d-flex">
                                <th class="col-auto">#</th>
                                <th class="col-2">Remito</th>
                                <th class="col">Cliente</th>
                                <th class="col">Dirección</th>
                                <th class="text-right" style="width: 80px">Cantidad</th>
                                <th class="col-auto">
                                    <button
                                        class="btn btn-outline-secondary selectable"
                                        ng-click="show = !show; masMenos()"
                                    >
                                        <i
                                            class="fa fa-chevron-down"
                                            ng-show="show"
                                            aria-hidden="true"
                                        >
                                        </i>
                                        <i
                                            class="fa fa-chevron-up"
                                            ng-hide="show"
                                            aria-hidden="true">
                                        </i>
                                    </button>
                                </th>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="tabla-articulo-body">
                            <tr
                                ng-repeat="(key, remito) in remitosTabla"
                                class="d-flex"
                                ng-show="show || key == remitosTabla.length - 1"
                            >
                                <td ng-bind="key + 1" class="col-auto"></td>
                                <td
                                    class="col-2" 
                                    ng-bind="rellenar(remito.sucursal, 4) + '-' + rellenar(remito.numeroRemito, 8)"
                                ></td>
                                <th class="col" ng-bind="remito.cliente[0].NOM"></th>
                                <th class="col" ng-bind="remito.domicilioStamp"></th>
                                <th class="text-right" ng-bind="remito.litros" style="width: 80px"></th>
                                <td class="text-center col-auto">
                                    <button
                                        class="btn btn-outline-secondary"
                                        ng-click="quitarArticulo(key)"
                                    >
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr class="d-flex">
                                <td class="col-auto px-1">
                                    <strong>Remitos:</strong>
                                    <a ng-bind="remitosTabla.length"></a>
                                </td>
                                <td class="col"></td>
                                <td class="col-auto px-1">
                                    <strong>Cantidad:</strong>
                                    <a ng-bind="hojaRuta.litros"></a>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
    
                <!-- MOBILE -->
                <div class="row d-sm-none">
                    <table class="table table-sm table-striped table-dark margin-bottom-mobile">
                        <thead>
                            <tr class="d-flex">
                                <th class="">#</th>
                                <th class="col px-0">
                                    <div class="d-flex">
                                        <div class="col-4 px-1">Código</div>
                                        <div class="col-8 px-1">Descripción</div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="col-3 px-1">Cantidad</div>
                                        <div class="col px-1 text-right">P. Uni.</div>
                                        <div class="col px-1 text-right">Subtotal</div>
                                    </div>
                                </th>
                                <th class="text-center tamaño-boton">
                                    &nbsp;
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr 
                                ng-repeat="(key, articulo) in remitosTabla"
                                ng-show="show || key == remitosTabla.length - 1"
                            >
                                <td class="w-100 align-middle d-flex p-0">
                                    <div class="align-middle p-1">
                                        <span ng-bind="key+1" class="align-middle"></span>
                                    </div>
                                    <div class="col px-0">
                                        <div class="d-flex">
                                            <div class="col-4 px-1">
                                                <span 
                                                    ng-bind="articulo.sector + '-' + articulo.codigo"
                                                ></span>
                                            </div>
                                            <div class="col-8 px-1">
                                                <span ng-bind="articulo.descripcion"></span>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="col-3 px-1">
                                                <span ng-bind="'x' + articulo.cantidad"></span>
                                            </div>
                                            <div class="col-3 px-1 text-right">
                                                <span ng-bind="articulo.precio | currency: hojaRuta.moneda.simbolo : 4"></span>
                                            </div>
                                            <div class="col px-1 text-right">
                                                <span 
                                                    ng-bind="(articulo.precio * articulo.cantidad) | currency: hojaRuta.moneda.simbolo"
                                                >
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="align-middle p-1">
                                        <button
                                            class="btn btn-outline-secondary"
                                            ng-click="quitarArticulo(key)"
                                        >
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <!-- CARGANDO ITEM -->
                            <tr ng-show="!cargando" class="d-flex">
                                <td 
                                    class="align-middle p-1" 
                                    ng-bind="remitosTabla.length + 1"
                                ></td>
                                <td class="col p-0">
                                    <div class="d-flex">
                                        <div class="col-4 px-1">
                                            <span 
                                                ng-bind="articuloACargar.sectorCodigo"
                                            ></span>
                                        </div>
                                        <div class="col-8 px-1">
                                            <span ng-bind="articuloACargar.descripcion"></span>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="col-3 px-1 m-1">
                                            <input
                                                class="form-control p-1"
                                                type="number"
                                                min="1"
                                                ng-model="articuloACargar.cantidad"
                                                foca-focus="!cargando"
                                                ng-keypress="agregarATabla($event.keyCode)"
                                                style="height: auto; line-height: 1.1em"
                                            >
                                        </div>
                                        <div class="col-3 px-1 text-right">
                                            <span ng-bind="articuloACargar.precio | currency: hojaRuta.moneda.simbolo : 4"></span>
                                        </div>
                                        <div class="col px-1 text-right">
                                            <span 
                                                ng-bind="getSubTotal() | currency: hojaRuta.moneda.simbolo"
                                            >
                                            </span>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center align-middle">
                                    <button
                                        class="btn btn-outline-secondary"
                                        ng-click="agregarATabla(13)"
                                    >
                                        <i class="fa fa-save"></i>
                                    </button>
                                </td>
                            </tr>
                            <!-- SELECCIONAR PRODUCTO -->
                            <tr ng-show="cargando" class="d-flex">
                                <td class="col-12">
                                    <input
                                        placeholder="Seleccione Articulo"
                                        class="form-control form-control-sm"
                                        readonly
                                        ng-click="seleccionarArticulo()"
                                    />
                                </td>
                            </tr>
                            <!-- TOOGLE EXPANDIR -->
                            <tr>
                                <td class="col">
                                    <button
                                        class="btn btn-outline-secondary selectable w-100"
                                        ng-click="show = !show; masMenos()"
                                        ng-show="remitosTabla.length > 0"
                                    >
                                        <i
                                            class="fa fa-chevron-down"
                                            ng-hide="show"
                                            aria-hidden="true"
                                        >
                                        </i>
                                        <i
                                            class="fa fa-chevron-up"
                                            ng-show="show"
                                            aria-hidden="true">
                                        </i>
                                    </button>
                                </td>
                            </tr>
                            <!-- FOOTER -->
                            <tr class="d-flex">
                                <td class="align-middle no-border-top" colspan="2">
                                    <strong>Cantidad Items:</strong>
                                    <a ng-bind="remitosTabla.length"></a>
                                </td>
                                <td class="text-right ml-auto table-celda-total no-border-top">
                                    <h3>Total:</h3>
                                </td>
                                <td class="table-celda-total text-right no-border-top">
                                    <h3>{{getTotal() | currency: hojaRuta.moneda.simbolo}}</h3>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="col-auto my-2 col-lg-2 botonera-lateral d-none">
                <div class="col-12 mt-auto">
                    <button
                        ng-click="crearHojaRuta()"
                        type="submit"
                        title="Crear nota pedido"
                        class="btn btn-default btn-block mb-2 border border-dark">
                        <strong>GUARDAR</strong>
                    </button>
                    <button
                        type="submit"
                        title="Crear nota pedido"
                        class="btn btn-default btn-block mb-2 border border-dark">
                        <strong>PAUSAR</strong>
                    </button>
                    <button
                        ng-click="salir()"
                        type="button"
                        title="Salir"
                        class="btn btn-default btn-block border border-dark">
                        <strong>SALIR</strong>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row d-md-none fixed-bottom">
        <div class="w-100 bg-dark d-flex px-3 acciones-mobile">
            <span class="ml-3 text-muted" ng-click="salir()">Salir</span>
            <span class="mr-3 ml-auto" ng-click="crearHojaRuta()">Guardar</span>
        </div>
    </div>
</div>