modal-punto-descarga.html 9.52 KB
<div class="modal-header d-flex">
    <h5 class="modal-title my-1" ng-hide="ingreso || cargaArticulos">Búsqueda de puntos de descarga</h5>
    <h5 class="modal-title my-1" ng-show="ingreso">Crear punto de descarga</h5>
    <h5 class="modal-title my-1" ng-show="cargaArticulos">Cargar artículos en puntos de descarga</h5>
    <button 
        class="btn btn-primary"
        title="Nuevo"
        ng-click="ingreso = true"
        ng-hide="ingreso || cargaArticulos">
        <i class="fa fa-plus" aria-hidden="true"></i>
    </button>
</div>
<div class="modal-body" id="modal-body">
    <table 
        class="table table-striped table-sm col-12"
        ng-hide="ingreso || cargaArticulos">
        <thead>
            <tr>
                <th>Código</th>
                <th>Descripción</th>
                <th>Latitud</th>
                <th>Longitud</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-show="!puntosDescarga.length">
                <td colspan="5">
                    No se encontraron resultados.
                </td>
            </tr>
            <tr class="selected"
                ng-repeat="(key, puntoDescarga) in puntosDescarga | filter: filters"
                >
                <td
                    ng-bind="puntoDescarga.id | rellenarDigitos: 3: 0"
                    ng-click="seleccionarPunto(key)"></td>
                <td
                    ng-bind="puntoDescarga.descripcion"
                    ng-click="seleccionarPunto(key)"></td>
                <td
                    ng-bind="puntoDescarga.latitud"
                    ng-click="seleccionarPunto(key)"></td>
                <td
                    ng-bind="puntoDescarga.longitud"
                    ng-click="seleccionarPunto(key)"></td>
                <td>
                    <input 
                        type="checkbox"
                        class="custom-control-input float-right" 
                        id="checkSelect{{key}}"
                        ng-model="puntoDescarga.seleccionado"
                        ng-change="seleccionarPunto(key, true)"
                        >
                    <label 
                        class="custom-control-label float-right"
                        for="checkSelect{{key}}"></label>
                    <button
                        type="button"
                        class="btn btn-xs p-1 float-right mr-5"
                        ng-click="eliminar(key, puntoDescarga)"
                        title="Eliminar">
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                    <button
                        type="button"
                        class="btn btn-xs p-1 float-right mr-1"
                        ng-click="editar(puntoDescarga.id)"
                        title="Editar">
                        <i class="fa fa-pencil" aria-hidden="true"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    <div ng-show="cargaArticulos">
        <div ng-show="!articulos.length">
            <h6>No existen articulos para agregar</h6>
        </div>
        <div ng-show="articulos.length">
            <div class="row">
                <div class="col-12">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Articulo</th>
                                <th>Total</th>
                                <th>Restante</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="(key, articulo) in articulos">
                                <td>
                                    <input 
                                        type="radio"
                                        ng-value="key"
                                        ng-model="$parent.articuloSeleccionado"
                                    >
                                </td>
                                <td ng-bind="articulo.descripcion"></td>
                                <td ng-bind="articulo.cantidad"></td>
                                <td ng-bind="articulo.restante"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <h5 class="col-12 my-3">Puntos de descarga</h5>
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Lugar</th>
                                <th class="text-right">Total cargado</th>
                                <th class="text-right">Cantidad</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="punto in puntosACargar">
                                <td ng-bind="punto.descripcion"></td>
                                <td ng-bind="punto.cargado" class="text-right"></td>
                                <td>
                                    <input
                                        type="text" 
                                        class="form-control col-4 float-right" 
                                        id="inputCantidad" 
                                        placeholder="A cargar"
                                        ng-model="punto.cantidadACargar"
                                        ng-keypress="agregarArticulo(punto, $event.keyCode)"
                                    >
                                </td>
                                <td>
                                    <button
                                        class="btn btn-sm btn-outline-primary ml-auto"
                                        type="button"
                                        ng-click="agregarArticulo(punto)"
                                    >
                                        Agregar
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Lugar</th>
                                <th>Articulo</th>
                                <th class="text-right">Cantidad</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="punto in puntosACargar">
                            <tr ng-repeat="(key, articulo) in punto.articulosAgregados">
                                <td ng-bind="punto.descripcion"></td>
                                <td ng-bind="articulo.descripcion" class="p-2"></td>
                                <td ng-bind="articulo.cantidad" class="text-right p-2"></td>
                                <td class="p-2">
                                    <button
                                        type="button"
                                        class="btn btn-xs p-1 float-right mr-5"
                                        ng-click="quitarArticulo(articulo, key, punto)"
                                        title="Eliminar">
                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <form ng-show="ingreso">
        <div class="row">
            <div class="col-12">
                <label>Descripción</label>
                <input 
                    type="text"
                    class="form-control form-control-sm"
                    ng-model="puntoDescarga.descripcion"
                    uppercase-only>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <label>Latitud</label>
                <input
                    type="text"
                    class="form-control form-control-sm"
                    ng-model="puntoDescarga.latitud"
                    ng-required="true"
                    ng-readonly="editando"
                />
            </div>
            <div class="col-6">
                <label>Longitud</label>
                <input
                    type="text"
                    class="form-control form-control-sm"
                    ng-model="puntoDescarga.longitud"
                    ng-required="true"
                    ng-readonly="editando"
                />
            </div>
        </div>
        <osm-punto-descarga
            latitud="puntoDescarga.latitud"
            longitud="puntoDescarga.longitud"
            zoom="14"
            ng-if="ingreso",
            draggable="!editando"
        />
    </form>
</div>
<div class="modal-footer">
    <button 
        class="btn btn-sm btn-secondary my-1" 
        type="button" 
        ng-click="cancel()">Cancelar</button>
    <button 
        class="btn btn-sm btn-primary my-1"
        type="button"
        ng-click="aceptar()"
        ng-hide="ingreso">Aceptar</button>
    <button 
        class="btn btn-sm btn-primary my-1"
        type="button"
        ng-click="guardar()"
        ng-show="ingreso">Guardar</button>
</div>