Develop Reference

Getting abnormal result from angular model class function

I have a simple Invoicing & Inventory management application where we display the list of invoices under a particular customer which you can see in the img below. Also, when we click on View/Edit button the bootstrap modal pop-up is displayed with the selected invoice details. The problem I notice here is, the result of Grand Total function is wrong which I being a novice in angular unable to figure out.
I also read about the impact of function calls in angular template here https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496 because I'm calling the functions in my template code below. I tired the pipe soultion shown in the article but that didn't help me.
Looking for someone who can help me figure out the Grand Total issue. Any help is really appreciated. Kindly look at the images & code below for the reference.
1. Invoice lists under customer(Raj Kapoor)
2. Invoice Bootstrap Modal Pop-up (On click of View/Edit Button)
Note: Here, assume that we've edited invoice no 4
3. Template code(admin-invoices.component.html)
Note: I'm providing only the absolute essentials part of code to keep it simple to understand. Focus only on 2 things: 1. View/Edit button function call 2. Invoice amount calculations section
<div class="container">
<div class="row g-0 mb-4">
<!-- Customer Name & Total Balance code goes here -->
</div>
<table class="table table-hover border" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
<thead class="thead-dark">
<tr>
<!-- Table heading goes here like Date, Invoice No.,
Amount, Balance Due, Operation, Action etc.
-->
</tr>
</thead>
<tbody>
<tr *ngFor="let invoice of customerInvoices">
<td class="text-center">{{invoice.invoiceDate | date:'dd/MM/yyyy'}}</td>
<td class="text-center">{{invoice.invoiceNumber}} </td>
<td class="text-center">{{invoice.invoiceTotal | currency:'INR':true}}</td>
<td class="text-center">{{invoice.invoiceTotal - invoice.paymentTotal | currency:'INR':true}}</td>
<td class="text-center">
<button type="button" class="btn btn-success" (click)="setInvoice(invoice)" data-bs-toggle="modal" data-bs-target="#invoiceDetailsModal">
View/Edit Details
</button>
</td>
</tr>
</tbody>
</table>
<!-- View/Edit Details: Bootstrap Modal Starts -->
<div class="modal fade" id="invoiceDetailsModal" tabindex="-1" aria-labelledby="invoiceDetailsLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<!-- Shop Details header goes here. -->
</div>
<div class="modal-body pt-0">
<div class="row">
<!-- To Customer, Date and Invoice No goes here-->
</div>
<!-- Items List Section -->
<div class="row">
<div class="items-table">
<div class="row header">
<!-- Table Heading: Sr. No, Item Details,
Qty, Rate, Amt goes here.. -->
</div>
<ng-container *ngFor="let invItem of invoice.invoiceItem; let i=index;">
<!-- Table data(list of all items) goes here-->
</ng-container>
<!-- Invoice amount calculations section -->
<div class="row">
<div class="col-4">
<!-- sub total row -->
<div class="row" style="border: 1px solid green;">
<div class="col-6 text-end">Sub Total:</div>
<div class="col text-center">{{invoiceSubTotal() | currency:'INR':true}}</div>
</div>
<!-- discount row -->
<div class="row">
<div class="col-6 ps-0 pe-0 text-end">
Discount:
<select class="form-select p-0" style="display: inline; width:60px;" [(ngModel)]="invoice.discountLabel" name="discountLabel" id="discountLabel" aria-label="Select discount option">
<option value="%">%</option>
<option value="Rs">Rs</option>
</select>
</div>
<div class="col text-center">
<input [(ngModel)]="invoice.discountTotal" name="discountTotal" type="number" style="border: 1px solid #ddd; width:100px">
</div>
</div>
<!-- freight row -->
<div class="row">
<div class="col-6 text-end">Freight(Rs.):</div>
<div class="col text-center"><input [(ngModel)]="invoice.freight" name="freight" type="number" style="border: 1px solid #ddd; width:100px"></div>
</div>
<!-- grand total row -->
<div class="row">
<div class="col-6 text-end">Grand Total:</div>
<div class="col text-center">{{calculateGrandTotal() | currency: 'INR':true}}</div>
</div>
<!-- Received row -->
<div class="row">
<div class="col-6 text-end">Received:</div>
<div class="col text-center">
<input [(ngModel)]="invoice.paymentTotal" name="paymentTotal" type="number" style="border: 1px solid #ddd; width:100px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal" (click)="clearData()">Close</button>
<button type="button" class="btn btn-outline-secondary" (click)="updateInvoice()">
Update & Print
</button>
</div>
</div>
</div>
</div>
<!-- View/Edit Details: Bootstrap Modal Ends -->
4. Component Class(admin-invoices.component.ts)
#Component({
selector: 'app-admin-invoices',
templateUrl: './admin-invoices.component.html',
styleUrls: ['./admin-invoices.component.css']
})
export class AdminInvoicesComponent {
customerInvoices: Invoice[] = []; // to get list of all invoices under this customer
invoice: Invoice = new Invoice();
customerId: number;
customer: Customer = new Customer(); // To avoid initial undefined value of customer field
totalBalance: number = 0.0; // total balace of all invoices under this customer
itemsList: Item[] = [];
constructor(private route: ActivatedRoute,
private customerService: CustomerService,
private invoiceService: InvoiceService,
private itemService: ItemService) {
this.customerId = +(this.route.snapshot.paramMap.get('customerId')); // converting string to number using '+'
this.setCustomer();
this.setItems();
this.invoiceService.getCustomerInvoices(this.customerId)
.subscribe((invoices: Invoice[]) => {
this.customerInvoices = invoices.map(invoice => new Invoice(invoice));
this.calculateTotalBalance(); // get the total balace of all invoices under this customer
});
}
setCustomer() {
this.customerService.get(this.customerId)
.subscribe((customer: Customer) => this.customer = customer);
}
setItems() {
this.itemService.getAll()
.subscribe((items: Item[]) => this.itemsList = items);
}
calculateTotalBalance() {
this.customerInvoices.forEach(invoice => {
this.totalBalance = this.totalBalance + (invoice.invoiceTotal - invoice.paymentTotal);
});
}
setInvoice(invoice: Invoice) {
this.invoice = invoice;
}
addItem() {
this.invoice.addItem();
}
removeItem(item) {
this.invoice.removeItem(item);
}
invoiceSubTotal() {
return this.invoice.invoiceSubTotal();
}
calculateGrandTotal() {
return this.invoice._invoiceTotal;
}
updateInvoice() {
// update code goes here
}
}
5. Invoice Model class(invoice.ts)
export class Invoice {
invoiceId?: number;
invoiceNumber: number;
discountLabel: string = '';
discountTotal: number = 0.0;
freight: number = 0.0;
invoiceTotal: number = 0.0;
paymentTotal: number = 0.0;
invoiceDate: string;
narration: string = '';
customer: Customer;
invoiceItem: InvoiceItem[] = [];
description: string;
constructor(customer?: Customer, invoiceNumber?: number);
constructor(invoice: Invoice);
constructor(customerOrInvoice?: Customer | Invoice, invoiceNumber?: number){
if(!invoiceNumber) {
// Existing invoices
Object.assign(this, customerOrInvoice); // copy everything in current invoice object
} else {
// New invoice creation
this.invoiceDate = new Date().toISOString().substring(0,10);
this.customer = customerOrInvoice as Customer;
this.invoiceNumber = invoiceNumber;
this.invoiceItem.push({itemId: 0, quantity: 0, rate: 0}); // default invoice_item
}
}
addItem() {
this.invoiceItem.push({itemId: 0, quantity: 0, rate: 0}); // default invoice_item
}
invoiceSubTotal(): number {
let subTotal = 0.00;
this.invoiceItem.forEach(item => {
subTotal += (item.quantity * item.rate);
});
return subTotal;
}
get totalDiscount(): number {
if(this.discountLabel === '%') return ((this.discountTotal * this.invoiceSubTotal())/100);
return this.discountTotal; // Considering discountLable to either 'Rs' or not selected
}
get _invoiceTotal(): number {
this.invoiceTotal = (this.invoiceSubTotal() - this.totalDiscount) + this.freight;
return this.invoiceTotal;
}
}

First of all, I would like to thank #GRD or grdtechlab#gmail.com for collaborating with me over an email to help me with this problem. This was basically two way efforts to find out the root cause. But again credit goes to GRD.
Root Cause: So, the backend response object was the main issue and not the UI code. Because, when we query sequelize database to get the Decimal type data, then it converts the decimal values to string values. And, in the resultant object, we end up with the string type values instead of 'number' type(in javascript). This leads to abnormal results in our computation functions like _invoiceTotal( ) getter function above.
Read more here https://github.com/sequelize/sequelize/issues/8019
Solution: As mentioned in the above github issue, I changed the sequelize configuration to dialectOptions : {decimalNumbers: true} and this converted all the decimal values to number in the response object.
See the response object images below to understand this better.
1. Incorrect Response object (string values instead of number type)
2. Correct Response object (after changing sequelize configuration)

Receive a value from a view to a controller

I have a home view that shows sneakers:
When you put the cursor over a pair of shoes, the card slides down and shows the sizes that exist in the database if they have stock.
I would like to know how I could go about choosing a size so that I can record that value and send it to the controller.
I have done something like this:
<div class="all-sizes">
<div id="stock-size-{{$stock->id}}" class="stock-size" onclick="changeText({{$stock->id}})">
<span>{{$stock->size}}</span>
<input type="hidden" name="size" value="{{$stock->size}}"/>
</div>
</div>
I have tried to pass it through an input type hidden to the controller and there pick it up, but I think I would need an id or something ...
The controller:
public function add($id, Request $request) {
$product = Product::find($id);
$size = $request->input('size');
if ($product) {
$cart_item = new CartItem();
$cart_item->user_id = \Auth::user()->id;
$cart_item->product_id = $product->id;
$cart_item->quantity = 1;
$cart_item->size = $size;
$cart_item->save();
}
return redirect()->route('home')->with(['message', $product->brand." ".$product->name." ".'añadido a la cesta']);
}
(The rest of the code works perfectly, it just fails that $ size picks me up null)
I would also like to know how to make sure that when I press the sizes, I do not change the styles of all of them, (If not, if for example, I press 19 it is colored but if I then press 30 the 19 return to their normal styles and color 30)
Now I have something like this:
The code that colors them and changes the styles:
function changeText(id) {
var stock_size = document.querySelector("#stock-size-" + id);
var stock_size_span = document.querySelector("#stock-size-" + id + " span");
stock_size.style.borderStyle = "none";
stock_size.style.backgroundColor = "black";
stock_size_span.style.color = "white";
}
Thanks!!
EDIT: Updated with all code from view.
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
#foreach($products_limit as $product)
<div class="swiper-slide">
<div id="card-{{$product->id}}" class="home-card" onmouseenter="mouseEnterMethod('{{$product->id}}')" onmouseleave="mouseLeaveMethod('{{$product->id}}')">
#foreach($product->product_images as $i=>$product_image)
#if($i<1)
<a href="{{route('product.detail', ['brand' => $product->brand, 'name' => $product->name])}}"><img id="image-{{$product->id}}" class="card-image" src="{{url('product/'.$product_image->image)}}">
#endif
#endforeach
<h2>{{$product->brand . " ". str_replace('-', ' ', $product->name)}}</h2>
#if($product->discount>0)
<span><s>{{$product->price}} €</s></span>
<span class='discount'>-{{$product->discount}}%</span>
<p>{{\CountCartItem::calcPriceWithDiscount($product->id)}} €</p>
#else
<span></span>
<p>{{$product->price}} €</p>
</a>
#endif
#if(count($product->stocks)>0)
#foreach($product->stocks->sortBy('size') as $stock)
#if($stock->stock>0)
<div class="all-sizes">
<div id="stock-size-{{$stock->id}}" class="stock-size" onclick="changeText({{$stock->id}})">
<span>{{$stock->size}}</span>
<input style="display:none;" name="size" value="{{$stock->size}}"/>
</div>
</div>
#else
<p class='no-stock'>{{$stock->size}}</p>
#endif
#endforeach
#else
<p>No hay Stock!!</p>
#endif
Add to Cart
</div>
</div>
#endforeach
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

Please don't make the input type "hidden", instead change it's style to hide is from display like this:
<input type="number" name="size" value="{{$stock->size}}" style="display:none;"/>

How to data submit and page redirect same position after the button click using javascript python Django?

index.html
<div class="row">
<div class="col-md-12">
<div class="card shadow-lg">
<div class="card-body" id="div1">
<div class="row">
<div class="col-md-6">
<h5 class="card-title"><i class="fa fa-user-circle" aria-hidden="true"></i>
{{datas.user_id|capfirst}}</h5>
</div>
<div class=" col-md-6 text-right" >
{% if request.user.id == datas.user_id_id %}
<button class="btn btn-sm btn-outline-primary" onclick="load_post(this, '{{datas.id}}')" id="edit">
Edit</button>
{% endif %}
</div>
</div>
<div id="msg">
<hr>
{{datas.post}}
<hr>
</div>
<div id="one">
</div>
<div class="row">
<div class="col-md-4">
<i class="fa fa-thumbs-up" value="0" onclick="count(this, '{{datas.id}}')" id="odd"></i><span id="add"></span>
</div>
<div class="col-md-4"></div>
<div class="col-md-4 text-right">{{datas.post_date}}</div>
</div>
</div>
</div>
</div>
inbox.js
function load_post(id, data)
{
const one = id.closest(".card-body");
one.querySelector('#msg').style.display = 'none';
fetch(`/network/${data}`)
.then(res => res.json())
.then(out => {
const element = document.createElement("textarea");
element.classList.add("form-control");
element.rows = 2;
element.id = "body";
element.innerHTML = out["post"];
one.querySelector('#one').appendChild(element);
const li = document.createElement("br");
one.querySelector('#one').appendChild(li);
const button = document.createElement("button");
button.className = "btn btn-sm btn-success"
//button.classList.add("btn"," btn-primary");
button.id="sucees";
button.innerHTML = "SUBMIT";
button.addEventListener('click',() => edited(id, out["id"]));
one.querySelector('#one').appendChild(button);
})
}
function edited(id, data)
{
var two = document.querySelector('#body').value;
fetch(`/network/${data}`,{
method : 'POST',
body : JSON.stringify({
post : two
})
})
.then(res=>res.json())
.then(out=>console.log(out))
}
views.py
#csrf_exempt
def edit_post(request, post_id):
try:
post = posts.objects.get(user_id=request.user, pk=post_id)
except posts.DoesNotExist:
return JsonResponse({"Out":"Data not found"}, status=404)
if request.method == 'GET':
return JsonResponse(post.serialize())
if request.method == 'POST':
data = json.loads(request.body)
upt = data.get("post","")
post.post = data["post"]
post.save()
print(post)
return redirect(request.META['HTTP_REFERER'])
here i am sharing my index.html, inbox.js and views.py files. The user will post the data and after that they will edit thier correspoding post and after that the entire page will not reload it. when I click the submit button, the div element cannot be modified but data posted in the database. after that, I refresh the page the original posted that will appear in the div element. I need help in this regard.

Page not being rendered after performing search

Below is the standard page in HTML with pagination working well. The problem arises when I perform a search. I would like to know why when I run the search it complains that "vehicles is an undefined variable"
#foreach($all as $one)
<div class="card-description">
<div class="card-text">
<div class="card-text-wrapper">
<div class="card-details">
<p class="vehicle-name">{{$one->make}}</p>
<p class="vehicle-details">{{$one->year}}</p>
<p class="vehicle-details">{{$one->type}}</p>
</div>
</div>
</div>
<div class="card-text">
<div class="card-text-wrapper">
<h1 class="price-tag">¢ {{$one->price}}</h1>
</div>
</div>
</div>
{{$all->links()}}
#endforeach
Below is the javascript function I tried for performing the search but unfortunately I do not know how to update the pagination to accept the new search values:
function searchVehicle(){
var make = document.getElementById("vehicle_make");
var strMake = make.options[make.selectedIndex].text;
var model = document.getElementById("vehicle_model");
var strModel = model.options[model.selectedIndex].text;
var cardDisplay = document.getElementById("card_display");
var cardDeck = document.getElementById("card_deck");
var strUrl = vehicle_url + strMake + '/' +strModel;
var obj = sendRequest(strUrl);
while (cardDeck.firstChild) {
cardDeck.removeChild(cardDeck.firstChild);
}
}
Below is my form which would be performing the search
{{ Form::open(['route' => 'search','method' => 'GET']) }}
<div>
<div class="wrapper-dropdown-5" tabindex="1" >
<span class="placeholder">Select make</span>
<ul class="dropdown" style="z-index:1000" name="mak" id="vehicle_make">
#foreach($vehicles as $vehicle)
{{--{{$vehicle->id}}--}}
<li class="option-make" id="make" value="{{$vehicle->make}}"><a>{{$vehicle->make}}</a></li>
#endforeach
</ul>
</div>
<div id="dd" class="wrapper-dropdown-5 inactive" tabindex="2" >
<span class="placeholder">Select model</span>
<ul class="dropdown" id="vehicle_model">
</ul>
</div>
</div>
</div>
<div class="button-wrap">
{{Form::submit('Search', ['class' => 'submit-button'])}}
</div>
{{ Form::close() }}
Below is the way I tried to display the search results but had an error that "vehicles" is an undefined variable:
public function searchVehicle(SearchVehicleRequest $request){
$make=$request->input('make');
$model=$request->input('model');
$results = Vehicles::where('make', 'LIKE', '%'.$make. '%')->orWhere('model','LIKE', '%'.$vehicle_model.'%')->paginate(2);
return Response::json(\View::make('Garages.home', array('all' => $results))->render());
}
And my route:
Route::get('search', ['as' => 'search', 'uses' => 'VehiclesController#searchVehicle']);
I can populate the HTML but don't know how to update the pagination..unless this whole process is wrong and there is a simpler way to get this done with ajax? or is page rendering the wrong way to go for something like this??

Is JQuery breaking my functionality?

I am making an app, the user can either select an item or use their camera to get the qr code which translates into an item's ID.
The problem is that I think some JQuery is messing with my scope from working properly.
I have to get the QR code by listening to an innerHtml change, once it changes (DOMSubtreeModified) the following occurs.
var index = 0;
$('#result').one('DOMSubtreeModified', function(e) {
var code = "";
if (e.target.innerHTML.length > 0) {
code = e.target.innerHTML;
$scope.ToRun(code);
}
});
$scope.ToRun = function(code) {
for (i = 0; i < $scope.plantList.length; i++) {
if ($scope.plantList[i].plantcode == code) {
index = i;
break;
}
}
$scope.currentPlant = $scope.plantList[index];
$scope.plantDetails = false;
$scope.searchDetails = true;
}
For some reason the following does not have any effect on my ng-classes. As when an item is selected I hide the input dialogs, and show the result one.
$scope.plantDetails = false;
$scope.searchDetails = true;
But when a user selects the item manually it works just perfectly. (the items have an ng-click on it)
$scope.viewPlant = function(plant) {
$scope.currentPlant = plant
$scope.plantDetails = false;
$scope.searchDetails = true;
};
And the above works fine, with the ng-click. So why won't my new function that listens for an innerHtml change work?
HTML snippet
<div ng-class="{ 'hidden': searchDetails }">
<!-- CHOOSE INPUT TYPE -->
<div class="form-group" style="margin-bottom:0px">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = false; qr = true">Plant Code</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = true; qr = false">QR Code</button>
</div>
</div>
</div>
<br />
<!-- QR CODE INPUT -->
<div ng-class="{ 'hidden': qr }">
<img id="blah" src="./images/placeholder.png" />
<span class="btn btn-default btn-file">
<i class="glyphicon glyphicon-camera"></i>
<input type="file" onchange="readURL(this);handleFiles(this.files)">
</span>
<div id="result">xxxxxx</div>
<canvas id="qr-canvas" width="800" height="600"></canvas>
</div>
<!-- MANUAL SELECTION INPUT -->
<div ng-class="{ 'hidden': digits }">
<input ng-model="search.$" style="width:100%; font-size:30px; text-align:center" placeholder="Plant Code" />
<div style="overflow: auto; max-height:250px">
<table class="table table-striped" style="background-color:lightblue">
<tr ng-repeat="plant in plantList | filter:search" ng-click="viewPlant(plant)" style="cursor:pointer">
<th>{{plant.name}}</th>
<th>{{plant.plantcode}}</th>
</tr>
</table>
</div>
</div>
<div>
</div>
</div>
<div ng-class="{ 'hidden': plantDetails }">
// results - this should appear when one of the above is entered.
// works for manual selection, but not qr code
</div>
Just confused on why my QR input will not fire off the change-class options to hide the searchDetails div and show the plantDetails div
EDIT: Doing a small test, it seems that my class variables are indeed not updating at all. I just put the values at the bottom of my page and they do not update when hitting the block of:
$scope.plantDetails = false;
$scope.searchDetails = true;

You need to let Angular know about the change. Add this at the end of your method and let me know if it works.
$scope.$apply();