I am integrating to an old project that works with Angular 1.3, Java and Spring.
What I'm trying to do is get the JavaScript to change the status of the steps when it goes beyond the function. If this is not the case, let it be disabled until it fulfills the validations of my JS function.
This event occurs when I click on "seats" without having filled in any fields to insert, as you can see in this image:
This is the Full HTML
<script type="text/ng-template" id="myModalContentConfirma.html">
<div ng-include="'tpl/confirm/modalDocumentos.html'"></div>
</script>
<script type="text/ng-template" id="myModalContentClientes.html">
<div ng-include="'tpl/ventas/modal.clientes.new.html'"></div>
</script>
<script type="text/ng-template" id="myModalContentProductos.html">
<div ng-include="'tpl/ventas/modal.productos.new.html'"></div>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div class="hbox ">
<div>
<form name="formValidate" class="form-horizontal form-validation">
<div class="panel panel-default text-xs">
<div class=" panel-body m-b-xs ">
<button type="submit" ng-disabled="formValidate.$invalid || !textomsgcodigo" ng-click="crud(1, 2)" class="btn btn-sm btn-success btn-addon" tooltip-placement="right" tooltip="{{documentos.iddocumentos==0?'Grabar registro':'Actualizar cambios'}}">
<i class="fa fa-edit"></i>
{{documentos.iddocumentos==0?'Grabar':'Actualizar'}}
</button>
<div class="pull-right">
<a type="button" tooltip-placement="left" tooltip="Click para regresar a la lista" class="btn btn-sm btn-primary btn-addon" ng-click="regresar()">
<i class="fa fa-check-square"></i>{{documentos.iddocumentos==0?'Regresar':'Cancelar'}}
</a>
</div>
</div>
<div class="panel-body panel-default">
<tabset class="tab-container" ng-init="steps={step1:true, step2:false}">
<tab heading="Datos del documento" active="steps.step1">
<div class="panel-body ">
<div class="col-sm-9">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Datos del Comprobante de Venta</legend>
<div class="control-group">
<div class="form-group">
<div class="col-sm-3">
<label>Tipo de Comprobante:</label>
<select ng-required="true" class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-change="seteaCodigo(documentos.idsutipocomprovantepagodocumento)" ng-model="documentos.idsutipocomprovantepagodocumento" ng-options="value.idsutipocomprovantepagodocumento as value.codigosunat +' - '+ value.descripcion for value in sutipocomprovantepagodocumentos">
<option>--</option>
</select>
</div>
<div class="col-sm-3">
<label>Código:<i tooltip-placement="top" data-toggle="tooltip" tooltip="En el deplegable adjunto puede ver qué código ingresar aquí para encontrar el tipo" class="fa fa-exclamation-circle text-warning"></i><span class="text-danger">*</span></label>
<input type="text" valid-number wm-block wm-block-length="1" ng-blur="cargaseridoc(defaults.doc);" ng-required="true" class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" placeholder="Código tipo" ng-model="defaults.doc">
</div>
<div class="col-sm-3">
<label>Serie:</label>
<select ng-required="true" class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-change="seteaCodigoDocumento(documentos.idseriedocumentos)" ng-model="documentos.idseriedocumentos" ng-options="value.idseriedocumentos as value.serie for value in lsSeries">
<option>--</option>
</select>
</div>
<div class="col-sm-3">
<label>Número:</label> <input type="text" ng-blur="validaCodigo()" placeholder="Codigo" ng-model="documentos.codigo" ng-required="true" class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched">
</div>
</div>
<div class="form-group">
<div ng-hide="notacredito" class="col-sm-3">
<label>Comprobante de Referencia:</label> <span ng-hide="notacredito" class="input-group-btn">
<select class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-required="!notacredito" ng-model="documentos.idreferenncd" ng-options="value.idsutipocomprovantepagodocumento as value.descripcion for value in sutipocomprovantepagodocumentos | filter:show07| filter:show08">
</select>
</span>
</div>
<div ng-hide="notacredito" class="col-sm-3">
<label>Serie: </label>
<span ng-hide="notacredito" class="input-group-btn">
<input type="text" class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" placeholder="Serie factura" ng-model="seriefactura" ng-required="!notacredito">
</span>
</div>
<div ng-hide="notacredito" class="col-sm-3">
<label>Número:</label>
<input ng-hide="notacredito" type="text" ng-blur="retornaDatanotacredito(seriefactura,codigofactura,0)" class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" placeholder="Codigo factura" ng-model="codigofactura" ng-required="!notacredito">
</div>
<div ng-hide="notacredito" class="col-sm-3">
<label ng-hide="notacredito">Motivo para nota de crédito: </label>
<div ng-hide="notacredito">
<select class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-change="seleccionaTipooperacion(seriefactura,codigofactura)" ng-required="notacredito?fasle:!notadebito?false:true" ng-model="documentos.idsutipooperacion" ng-options="value.idsutipooperacion as value.descripcion for value in tipotransaccions| filter:showTipoOpComoras|filter:showAnuCompras">
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3" ng-controller="DatepickerDemoCtrl">
<label>Fecha de Operación: </label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="documentos.fecharegistrostr" is-open="opened" ng-change="retornaDiasCredito(documentos.idcreditoclientes)" ng-focus="open($event)" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-icon" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</div>
<div class="col-md-3">
<label> Moneda: <span class="text-danger">*</span></label>
<select ng-required="true" class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-disabled="!notacredito" ng-model="documentos.idtipomoneda" ng-change="generaCalculosyAsientosContable();retornaSimbolomoneda(documentos.idtipomoneda)" ng-options="value.idtipomoneda as value.descripcion for value in tipomonedas">
<option>--</option>
</select>
<span ng-show="myForm.idtipomoneda.$dirty && myForm.idtipomoneda.$invalid" class="help-inline">tipomoneda requerido!</span>
</div>
<div class="col-md-3">
<label>Tipo de Operación: <span class="text-danger">*</span></label>
<select class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-required="true" ng-disabled="!notacredito" ng-model="documentos.tipooperacion" ng-options="value.id as value.name for value in lstipooperacion">
<option>--</option>
</select>
</div>
<div class="col-md-3">
<label>Tipo de conceptos :<i tooltip-placement="right" data-toggle="tooltip" tooltip="Al seleccionar la opción servicio el listado de conceptos seran solo de servicios, caso contrario solo de productos " class="fa fa-exclamation-circle text-warning"></i></label>
<select class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-required="true" ng-model="documentos.idtipoconcepto" ng-options="value.id as value.name for value in lsTipoConcetos">
<option>--</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label> Condición de Pago: <span class="text-danger">*</span></label>
<select class="form-control" ng-required="notacredito" ng-disabled="!notacredito" ng-change="seleccionaCredito(documentos.idcondicionespago)" ng-model="documentos.idcondicionespago" ng-options="value.idcondicionespago as value.descripcion for value in condicionespagos">
<option>--</option>
</select>
<span ng-show="myForm.idcondicionespago.$dirty && myForm.idcondicionespago.$invalid" class="help-inline">idcondicionespago requerido!</span>
</div>
<div class="col-md-3">
<label> Crédito a: </label>
<select ng-disabled="muestracreditos" class="form-control" ng-required="!muestracreditos" ng-model="documentos.idcreditoclientes" ng-change="retornaDiasCredito(documentos.idcreditoclientes)" ng-options="value.idcreditoclientes as value.nombre for value in creditoclientes">
<option>--</option>
</select>
</div>
<div class="col-md-3">
<label> Días de Crédito: </label>
<input type="number" ng-disabled="true" ng-required="muestraanticipo" class="form-control" ng-model="documentos.diaspago">
</div>
<div class="col-md-3" ng-controller="DatepickerDemoCtrl">
<label> Fecha de Pago: </label>
<input disabled="true" type="text" class="form-control" datepicker-popup="{{format}}" ng-model="documentos.fechapagostr" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-sm-3">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Datos del Cliente</legend>
<div class="form-group">
<div class="col-md-12">
<label>RUC: <span class="text-danger">*</span></label> <input class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" name="ruc" type="text" required ng-blur="buscaClientePorRuc(clien.ruc)" ng-dblclick="openClientes('lg',1)" ng-model="clien.ruc">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label>Razón social:</label>
<input class="form-control" type="text" disabled="true" class="form-control" ng-model="clien.razonsocial">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label>Dirección:</label>
<input class="form-control" type="text" disabled="true" class="form-control" ng-model="clien.direccion"> <input class="form-control" type="hidden" disabled="true" class="form-control" ng-model="documentos.idcliente">
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<div class="col-md-12">
<table class=" table table-striped bg-white b-a">
<thead>
<tr>
<th style="width: 2%">X</th>
<th style="width: 10%">Codigo</th>
<th style="width: 20%">Producto</th>
<th style="width: 15%">Centro Costo</th>
<th style="width: 10%">Cantidad</th>
<th style="width: 10%">U. Medida</th>
<th style="width: 10%">Precio de Venta</th>
<th style="width: 8%">Igv.</th>
<th style="width: 8%">Sub total</th>
<th style="width: 8%">Impuesto</th>
<th style="width: 8%">Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in documentos.lsDetalle">
<td><a class="btn btn-xs btn-icon btn-info text-left" ng-click="deleteItem(d)"><i class="fa fa-close"></i></a></td>
<td><input class="form-control" name="dfgdfg" type="text" ng-blur="searchConceptos(d.iddocumentosdetalle,d.codproducto)" ng-dblclick="openProductos('lg',d.iddocumentosdetalle,1,'')" ng-model="d.codproducto"></td>
<td><input class="form-control" name="tertret" ng-disabled="d.idconcepto>0?true:false" ng-blur="searchConceptosNombre(d.iddocumentosdetalle,d.producto)" type="text" ng-model="d.producto"></td>
<td>
<select class="form-control" ng-model="d.idclasificadorcostos" ng-blur="selectCentroCosto(d.iddocumentosdetalle,d.filtros.conceptos.idconceptos,d.idclasificadorcostos);" ng-disabled="!clasificadorcostoss.length||!notacredito" ng-options="value.idclasificadorcostos as value.nombre for value in d.dataclasif">
</select>
</td>
<td>
<input type="number" class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-max="notacredito?1000000:d.cantidadfactura" ng-disabled="!notacredito?documentos.idsutipooperacion==12?false:true:false" ng-min="d.idconcepto>0?1:0" ng-required="d.idconcepto>0?true:false" ng-blur="generaCalculosyAsientosContable()" placeholder="Ingrese cantidad" ng-model="d.cantidad">
</td>
<td>
<select class="form-control" ng-model="d.idunidadmedida" ng-disabled="!notacredito" ng-options="value.idunidadmedida as value.unidad for value in d.dataunidamedida">
<option>--</option>
</select>
</td>
<td>
<input type="number" class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-blur="generaCalculosyAsientosContable()" ng-disabled="!notacredito?documentos.idsutipooperacion==12?true:false:false" ng-min="d.idconcepto>0?0.01:0" ng-required="d.idconcepto>0?true:false" ng-max="notacredito?1000000:d.costounitariofactura" placeholder="Ingrese costo unitario" ng-model="d.costounitario">
</td>
<td>
<select class="form-control" ng-blur="generaCalculosyAsientosContable()" ng-disabled="!notacredito" ng-model="d.afectoinafecto" ng-options="value.id as value.name for value in d.dataafectoinafecto">
<option>--</option>
</select>
</td>
<td>{{simbolo}}{{d.subtotal|currency:''}}</td>
<td>{{simbolo}}{{d.impuesto|currency:''}}</td>
<td>{{simbolo}}{{d.importe|currency:''}}</td>
</tr>
<tr ng-hide="!notadebito">
<td colspan="4" class="text-left"><a ng-click="agregaNuevo()" ng-hide="!notacredito"><span class="text-primary">Agregar nuevo concepto</span></a></td>
<td colspan="4" class="text-right"><strong>Totales</strong></td>
<td colspan="1"><strong>{{simbolo}}{{subtotal|currency:''}}</strong></td>
<td colspan="1"><strong>{{simbolo}}{{totaligv|currency:''}}</strong></td>
<td colspan="1"><strong>{{simbolo}}{{total|currency:''}}</strong></td>
<td></td>
</tr>
<tr ng-hide="notadebito">
<td colspan="4" class="text-left"><a ng-click="agregaNuevo()" ng-hide="!notacredito"><span class="text-primary">Agregar nuevo concepto</span></a></td>
<td colspan="4" class="text-right"><strong>Totales</strong></td>
<td colspan="1"><input type="number" class="form-control" ng-change="calculaigvytotal(subtotal,totaligv)" required="!notadebito" placeholder="Ingrese costo unitario" ng-model="subtotal"></td>
<td colspan="1"><input type="number" class="form-control" ng-change="calculaigvytotal(subtotal,totaligv)" required="!notadebito" placeholder="Ingrese costo unitario" ng-model="totaligv"></td>
<td colspan="1"><input type="number" class="form-control" ng-disabled="true" required="!notadebito" placeholder="Ingrese costo unitario" ng-model="total"></td>
<td></td>
</tr>
<tr ng-show="muestraanticipo">
<td colspan="3" class="text-left"></td>
<td colspan="4" class="text-right"><strong>Total de anticipo: </strong></td>
<td colspan="1"><strong>{{simbolo}}{{subtotalanticipo|currency:''}}</strong></td>
<td colspan="1"><strong>{{simbolo}}{{totaligvanticipo|currency:''}}</strong></td>
<td colspan="1"><strong>{{simbolo}}{{totalanticipo|currency:''}}</strong></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</tab>
<tab heading="Asientos" active="steps.step2" ng-click="generaAsientosFin()">
<div class="table-responsive">
<table show-filter="true" export-csv="csv" class="table table-striped table-bordered table-hover">
<tr>
<td>Cuenta</td>
<td>Nombre</td>
<td>Moneda</td>
<td>Debe</td>
<td>Haber</td>
<td>Glosa</td>
<td>ruc</td>
<td>razonsocial</td>
<td>Codigodocumento</td>
</tr>
<tr class="center" ng-repeat="cat in resultValue=(documentos.lsAsientoscontables)">
<td data-title="'Cuenta'" sortable="cuenta">{{cat.cuenta}}</td>
<td data-title="'Cuenta'" sortable="cuenta">{{cat.namecuenta}}</td>
<td data-title="'Moneda'" sortable="moneda">{{simbolo}}</td>
<td data-title="'Debe'" sortable="debe">
{{simbolo}}{{cat.debe|currency:''}}</td>
<td data-title="'Haber'" sortable="haber">{{simbolo}} {{cat.haber|currency:''}}</td>
<td data-title="'Glosa'" sortable="glosa">{{cat.glosa}}</td>
<td data-title="'Ruc'" sortable="ruc">{{cat.ruc}}</td>
<td data-title="'Razonsocial'" sortable="razonsocial">{{cat.razonsocial}}</td>
<td data-title="'Codigodocumento'" sortable="codigodocumento">{{cat.codigodocumento}}</td>
</tr>
<tr>
<td colspan="3"></td>
<td>{{resultValue | sumOfValue:'debe'|currency:''}}</td>
<td>{{resultValue | sumOfValue:'haber'|currency:''}}</td>
<td colspan="4"></td>
</tr>
</table>
</div>
</tab>
</tabset>
</div>
</div>
</form>
</div>
</div>This is the HTML of the functions I'm occupying.
<tabset class="tab-container" ng-init="steps={step1:true, step2:false}">
<tab heading="Datos del documento" active="steps.step1">
.
.
.
</tab>
<tab heading="Asientos" active="steps.step2" ng-click="generaAsientosFin()">
.
.
.
</tab>
</tabset>
This is my JS function:
$scope.generaAsientosFin = function() {
if ($scope.documentos.idcliente > 00 && $scope.app.settings.periodoselected > 0) {
if ($scope.documentos.serie != undefined && $scope.documentos.serie.length > 0) {
$scope.documentos.lsAsientoscontables = [];
if ($scope.documentos.idsutipooperacion == undefined || $scope.documentos.idsutipooperacion == "") {} else {
$scope.generaAsientosImpuestoIGV($scope.siigv);
$scope.cargalosAsientosContableConLaCuentaAsociadaAlConcepto();
$scope.generaLosAsientosParaLaOperacionDeCompraDesdeLaPlantilla();
if (!$scope.notacredito) {
if ($scope.objplancuentadocumento.idplancuenta == undefined && $scope.documentos.idsutipooperacion == undefined) {
toaster.pop("warning", "", "Por favor verificar el asiento para la nota de credito", 10000, 'trustedHtml');
} else {
$scope.objplancuentadocumento.glosa = "ACCD-Por la venta de mercaderia al " + $scope.retornaTipoPago($scope.documentos.idcondicionespago) + " por un total de: " + $scope.simbolo + $filter('currency')(10, "") + "" + " al " + $filter('date')
($scope.documentos.fecharegistrostr, "dd-MM-yyyy"),
$scope.objplancuentadocumento.debe = $scope.total;
var d = $scope.objplancuentadocumento;
$scope.documentos.lsAsientoscontables.push(d);
}
}
}
} else {
toaster.pop("warning", "", "No se agrego conceptos al documento", 10000, 'trustedHtml');
}
} else {
console.log("Coleccion de Steps ");
console.log($scope.steps);
$scope.steps.step2 = false;
$scope.steps.step1 = true;
toaster.pop("warning", "", "Por favor seleccione el cliente, o verifique el periodo seleccionado xxx", 10000, 'trustedHtml');
}
}
The error in console is as follows:
angular.js: 11598 TypeError: Can not set property 'step2' of undefined
at Scope. $ scope.generaAsientosFin (ventasController.js? v = 1.1.2: 1914)
at $ parseFunctionCall (angular.js: 12336)
at angular-touch.js: 472
at Scope. $ eval (angular.js: 14388)
at Scope. $ apply (angular.js: 14487)
at HTMLLIElement. (angular-touch.js: 471)
at HTMLLIElement.dispatch (jquery.js: 4430)
at HTMLLIElement.r.handle (jquery.js: 4116)
Taking the reference code of another module where this works, I execute it from console giving me this result. (in the last lines of the JS) I get this:
Collection of Steps
salesPagosController.js? v = 1.1.2: 1498 {step1: false, step2: true}