I have 2 date pickers in angular HTML
here is it
<div *ngIf="receipt.chargeTypeId !== 4" class="row">
<div class="col-6">
<div class="form-group">
<label class="label-title">{{ l('RentalPeriodFrom') }}</label><br />
<utc-datepicker name="RentalPeriodFrom" [(ngModel)]="receipt.rentalPeriodFrom">
</utc-datepicker>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="label-title">{{ l('RentalPeriodTo') }}</label><br />
<utc-datepicker name="RentalPeriodTo" [(ngModel)]="receipt.rentalPeriodTo">
</utc-datepicker>
</div>
</div>
</div>
I need to set RentalPeriodTo to RentalPeriodFrom + 1 month
I do it like this
this.receipt.rentalPeriodFrom = this.tenancyData.tenancyStartDate;
const periodTo = this.receipt.rentalPeriodFrom;
this.receipt.rentalPeriodTo = periodTo.add(1, 'M');
But it changes my this.receipt.rentalPeriodFrom to date relevant to this.receipt.rentalPeriodTo
Where is the problem?
// this might be due to the receipt.rentalPeriodFrom is copied as reference to periodTo which change source when we modify the receiptto
this.receipt.rentalPeriodFrom = this.tenancyData.tenancyStartDate;
const periodTo = Object.assign({},this.receipt.rentalPeriodFrom);
this.receipt.rentalPeriodFrom;
this.receipt.rentalPeriodTo = periodTo.add(1, 'M');
Related
I've been struggling to finish the app I'm developing,
here is the scenario:
I have a Razor page where the user will input customer number, Company Code, and Date. Users can input multiple customer numbers and the app will split them by comma.
once the user inputted the details a button with asp-action pointed to the action named GenerateSoa, it will run a foreach statement that will RedirectToAction for every customer that is inputted on the GUI
The problem starts here when the loop runs it only opens one tab even if there are 3 customers inputted.
It should open 3 tabs with their details for 3 different customers. below is my code
I did not however include the SoaLooper cshtml file.
SoaController.cs
public IActionResult GenerateSoa()
{
ClearAmounts();
#region Date management for SOA
// First day of Current Month
var FirstDateOfCurrentMonth = new DateTime(SD.DateToday.Year, SD.DateToday.Month, 1);
var PreviousMonthFirstDay = FirstDateOfCurrentMonth.AddMonths(-1);
var PreviousMonthLastDay = DateTime.DaysInMonth(SD.DateToday.Year, PreviousMonthFirstDay.Month);
****** Ommitted some code *****
// Get last day of Previews month
var PreviewsBalanceDate = PreviousMonthFirstDay.Month.ToString() + "/" +
PreviousMonthLastDay.ToString() + "/" + PreviousMonthFirstDay.Year.ToString();
#endregion Date management for SOA
//SD.GuiCustomerNum = customer.ToString();
var bsid_unpaid_payments = _context.BSIDs.Where(l =>
(l.UMSKZ == "" || l.UMSKZ != "C") && l.BLART == "DJ");
foreach (var payments in bsid_unpaid_payments)
{
SD.PAmount += Convert.ToDouble(payments.DMBTR);
}
SD.UPTotalAmount = SD.UPAmount - SD.PAmount;
return View();
}
public IActionResult SoaLooper(string customer, int company, DateTime asof)
{
string[] customerNum = customer.Split(',');
SD.GuiCompany = company.ToString();
SD.DateToday = asof;
foreach (var item in customerNum)
{
SD.GuiCustomerNumSelected = item.ToString();
RedirectToAction(nameof(GenerateSoa));
}
return View();
}
Index.cshtml
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center border">
<form method="post" class="col-12 text-center">
<div class="col-12 border-bottom">
<h2 class="text-primary">Statement of Account</h2>
</div>
<div class="col-8 pt-4">
<div class="form-group row">
<div class="col-4">
<label class="float-right">Customer</label>
</div>
<div class="col-8">
<input id="customer" name="customer" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-4">
<label class="float-right">Company Code</label>
</div>
<div class="col-8">
<select id="company" name="company" class="form-control">
<option value="">Select a number</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-4">
<label class="float-right">Statement as of</label>
</div>
<div class="col-8">
<input id="asof" name="asof" type="date" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-8 offset-4">
<div class="row">
<div class="col">
<button type="submit" formtarget="_blank" id="btnCheck"
class="btn btn-primary form-control" asp-action="SoaLooper">Generate</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
RedirectToAction doesn't open a new tab, it just returns a status code of 302 to tell the client to redirect.
If you really want to open multiple new tabs, you should do something like return a list of urls and then use window.open when the page loads.
I haven't tested it but you could do something like this:
Add your url to a list:
SoaController.cs
var newTabUrls = new List<string>();
foreach (var item in customerNum)
{
SD.GuiCustomerNumSelected = item.ToString();
newTabUrls.Add(nameof(GenerateSoa));
}
return View(newTabUrls);
Index.cshtml
<script type="text/javascript">
#if(Model?.Any() ?? false)
{
#foreach(var url in Model)
{
#:window.open(url, "_blank");
}
}
</script>
Open a URL in a new tab (and not a new window)
how to open a page in new tab on button click in asp.net?
In consultation mode I cannot return the dto values in the ng-model:
HTML code:
<div class="form-group">
<label class="col-md-5 control-label"> Localité </label>
<div class="col-md-7">
<autocomplete ng-disabled="mode == 'read'"
input-class="form control" options="referentielAdresses"
display-property="localite" on-type="autoCompleteLocalite"
on-select="get-localite" clear-input="false"
ng-model="dto.localite"></autocomplete>
</div>
</div>
https://imgur.com/iQMOvxk
JS code:
// autoCompleteLocalite
$scope.autoCompleteLocalite = function(typed){
if(typed!=""){
$scope.dto.localiteRnvp = typed;
}
};
$scope.getLocalite = function(selected){
$scope.dto.localiteRnvp = selected.localite;
}
How can I include ng-model midst autocomplete?
Em... in $scope.getLocalite search for relative rows and show them into new block. On click on row update localiteRnvp value.
I am using a diective in ng-repeat which when i click i pass date and time to the function showAppointmentForm but here the problem is when I click on first index of loop i get date and time displayed in modal box but when I click on second ,third and so on its values are coming as function parameters but not displayed.Is this something problem with using directives in for loop.Can anyone please suggest help.Thanks.
Using directive in template,
<div data-ng-repeat="doctor in doctors">
<appointment-timings data-ng-if="appointments" appointments="appointments" physician="doctor.npi" width="2"></appointment-timings>
</div>
My appointmnt directive,
$scope.showAppointmentForm = function(date,time) {
$scope.appointmentData = {};
$scope.appointmentData.physician = $scope.physician;
$scope.appointmentData.date = '';
$scope.appointmentData.time = '';
$scope.appointmentData.date = date.toString();
$scope.appointmentData.time = time;
$scope.submitted = false;
$timeout(function () {
$scope.$apply();
$('#appointments').modal('show');
},500);
}
My Directive html,(A modal box)
<div class="date-time">
<div class="col-md-6 col-xs-6">
<div class="input-group">
<span class="input-group-addon"><b>DATE</b></span>
<input type="text" class="form-control" ng-model="appointmentData.date" disabled>
</div><!-- /input-group -->
</div>
<div class="col-md-6 col-xs-6">
<div class="input-group">
<span class="input-group-addon"><b>TIME</b></span>
<input type="text" class="form-control" ng-model="appointmentData.time" disabled>
</div>
</div>
</div>
<div class="scheduled-hours" id="scheduled-scroll">
<ul>
<li data-ng-click="showAppointmentForm(date, time)" data-ng-repeat="time in times">{{time}}</li>
</ul>
</div>
On change of year value I want to change options of Make drop down, but not getting how to update options of other control.
Below is my plunker with form.
https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview
api.php is server response these options should display in Make drop down on change of year.
autoQuoteCtrl.js
$scope.updateMakeList = function(){
}
index.html
<div class="row">
<div class="form-group">
<label class="col-sm-5 control-label" for="PC">{{questions[$state.current.name].VehicleYear.QuestionData._text}}</label>
<div class="col-sm-6">
<select ng-change="updateMakeList" custom-required="true" ng-options="ans._value as ans._promptText for ans in questions[$state.current.name].VehicleYear.QuestionData._answerOptions" ng-model="answers.VehicleYear" ng-required="queObj._required" class="form-control {{queObj._pageAttributes.cssclass}}" name="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" id="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" data-que-obj="questions[$state.current.name].VehicleYear.QuestionData" select-control-dir setMake custom-required></select>
</div>
</div>
<span class="form-error" ng-show="submitted && DTOstep1.VehicleYear.$error.required">This field is required.</span>
</div>
You need to put this function in your controller -
$scope.updateMakeList = function(name)
{
// Your logic to change value in Make dropdown
$scope.questions[name].VehicleMake.QuestionData._answerOptions = [{'_value':"test",'_promptText':"Test"}];
}
And update your HTML (year select box)-
<div class="form-group">
<label class="col-sm-5 control-label" for="PC">{{questions[$state.current.name].VehicleYear.QuestionData._text}}</label>
<div class="col-sm-6">
<select ng-change="updateMakeList($state.current.name)" custom-required="true" ng-options="ans._value as ans._promptText for ans in questions[$state.current.name].VehicleYear.QuestionData._answerOptions" ng-model="answers.VehicleYear" ng-required="queObj._required" class="form-control {{queObj._pageAttributes.cssclass}}" name="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" id="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" data-que-obj="questions[$state.current.name].VehicleYear.QuestionData" select-control-dir setMake custom-required></select>
</div>
</div>
Have a form to create a contract, where that contract can have one or more users associated.
The area to input the users info, starts with only one field of one user, and one button to add more fields if needed.
<div id="utilizadores" class="row">
<div id="utilizador1" class="container-fluid">
<div class="row">
<div class="col-lg-5">
<input type="text" class="form-control" id="nomeUtilizador1" placeholder="Nome Utilizador">
</div>
<div class="col-lg-6">
<input type="text" class="form-control" id="funcaoUtilizador1" placeholder="Função">
</div>
</div>
</div>
</div>
This is the starting div
Clicking on Add User button it adds a new div under the "utilizador1"
<div id="utilizadores" class="row">
<div id="utilizador1" class="container-fluid">
<div class="row">
<div class="col-lg-5">
<input type="text" class="form-control" id="nomeUtilizador1" placeholder="Nome Utilizador">
</div>
<div class="col-lg-6">
<input type="text" class="form-control" id="funcaoUtilizador1" placeholder="Função">
</div>
</div>
</div>
<div id="utilizador2" class="container-fluid">
<div class="row">
<div class="col-lg-5">
<input type="text" class="form-control" id="nomeUtilizador2" placeholder="Nome Utilizador">
</div>
<div class="col-lg-6">
<input type="text" class="form-control" id="funcaoUtilizador2" placeholder="Função">
</div>
</div>
</div>
My question is, how can I get the number of users created, and insert them into a list using Javascript. The list will be a attribute of a Object (Contract).
What i have til now:
function test_saveItem() {
var contract = new Object();
contract.Dono = <% =uID %>;
contract.BoostMes = $("#boostMes").val();
contract.BoostAno = $("#boostAno").val();
var ListaUtilizadores = [];
var divs = document.getElementsByName("utilizador");
for (var i = 0; i < divs.length; i++){
var user = new Object();
user.Nome = $('#nomeUtilizador' + i).val();
ListaUtilizadores.push(user);
}
var test = JSON.stringify({ "contract": contract });
}
Any help appreciated
Edit: Got to a solution thanks to Shilly
List = [];
Array.prototype.slice.call(document.querySelectorAll('.user')).forEach(function (node, index) {
List.push({
"name" : document.getElementById('nameUser' + (index + 1)).value,
"job" : document.getElementById('jobUser' + (index + 1)).value
});
});
Something like this? But adding it into the addUser function as Super Hirnet says, will be more performant.
var divs = document.querySelector('#utilizadores').childNodes,
users = [];
Array.slice.call(divs).forEach(function (node, index) {
users.push({
"name" : divs[index].getElementById('nomeUtilizador' + (index + 1)).value
});
});
You can have an empty array and on every click of addUser put a new object into the array. The object can have information related to the added user.