How to copy data of first table to second table using Angular? - javascript

I just want to copy data(Item and Price) of the first table to the second table and make increment in Quantity(Second table) when i click in the First Table ( Item). I am working on Angular 9
First Table:
Code | Item | Price | Unit |
1 | Mouse | 500 | Piece |
2 | Wire | 100 | Piece |
Second Table:
Item | Quantity| Price |
1 | 2 | 1000 |
2 | 1 | 100 |
I did a lot to work with it but I could not get any required output.
It is possible to solve using javaScript/Js/jquery
<table class="table table-hover" id="firstTable">
<thead class="table-primary">
<tr>
<td>Code</td>
<td>Item</td>
<td>Unit</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of itemList;" id="moveMeIntoMain"
style="cursor:pointer">
<td>{{data.itemCode}}</td>
<td>{{data.itemName}}</td>
<td><span>{{data.unitId}}</span>{{data.name}}</td>
<td>{{data.retailRate}}</td>
</tr>
</tbody>
</table>
<table class="table table-hover" id="secondTable">
<thead class="">
<tr class="table-primary">
<td>#</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Js
$(document).ready(function () {
var items = [];
$("#firstTable tr").on("click", function () {
var newTr = $(this).closest("tr").clone();
$(newButtonHTML).children("button").click(function (e) {
});
$(newTr).children("td:last").html("");
items.push(newTr);
newTr.appendTo($("#secondTable"));
});
})

You can simply try in Angular way ;). Just add click handler to the each row and send row data
Working stackblitz
Template file
<table>
<thead>
<th>Code</th>
<th>Item</th>
<th>Price</th>
<th>Unit</th>
</thead>
<tr *ngFor="let data of firstTableData" (click)="updateSecondTable(data)">
<td>{{ data.Code }}</td>
<td>{{ data.Item }}</td>
<td>{{ data.Price }}</td>
<td>{{ data.Unit }}</td>
</tr>
</table>
<hr>
<table *ngIf="secondTableData.length">
<thead>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</thead>
<tbody>
<tr *ngFor="let newdata of secondTableData">
<td>{{ newdata.Item }}</td>
<td>{{ newdata.Quantity }}</td>
<td>{{ newdata.Price }}</td>
</tr>
</tbody>
</table>
And in the typescript file
Declare a empty secondTableData array
And have a method, which firstly checks for the item existence in the second table array. If item already exists, then simply update quantity and price
If item doesn't exist, just push the item with required columns to the second table array
Component.ts
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
firstTableData = [{
Code: 1,
Item: 'Mouse',
Price: 500,
Unit: 'Piece'
},
{
Code: 2,
Item: 'Wire',
Price: 100,
Unit: 'Piece'
},
{
Code: 3,
Item: 'Some Item',
Price: 300,
Unit: 'Some Unit'
}
];
secondTableData = [];
updateSecondTable(data) {
let foundItem = this.secondTableData.find((item) => item.Item === data.Item);
if (foundItem) {
foundItem.Quantity += 1;
foundItem.Price += data.Price;
return;
}
this.secondTableData.push({
Item: data.Item,
Quantity: 1,
Price: data.Price,
})
}
}

Related

How to populate list in list in a table Angular

I have a list of values [1, paracetamol,[{1, location, quantity}, {2, location2, quantity}]
so I have to print in two rows
1. [1, paracetamol, location, quantity]
2. [2. paracetamol, location1, quantity2]
I have maintained head
headElements = ['Drug ID', 'Drug Name', 'Location', 'Quantity']
<table class="table table-striped" >
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{ head }}</th>
</tr>
</thead>
<tbody>
<div *ngFor = "let drugDetail of drugList">
<tr *ngFor="let loc of drugDetail.drugLocationList">
<th scope="row">{{ drugDetail.drugId }}</th>
<td>{{ drugDetail.drugName }}</td>
<td>{{loc.location}}</td>
<td>{{ loc.quantity}}</td>
</tr>
</div>
</table>
output:
['Drug ID', 'Drug Name', 'Location', 'Quantity']
[1, paracetamol, location, quantity]
[2. paracetamol, location1, quantity2]
Maybe it could be easier if you do first a map to your array data, something like this:
copyDrugList = drugList.map(drugDetail => [
{ drugId : drugDetail.drugLocationList[0].drugId ,
drugName : drugDetail.drugName ,
location : drugDetail.drugLocationList[0].location ,
quantity : drugDetail.drugLocationList[0].quantity ,
},
{ drugId : drugDetail.drugLocationList[0].drugId ,
drugName : drugDetail.drugName ,
location : drugDetail.drugLocationList[1].location ,
quantity : drugDetail.drugLocationList[1].quantity ,
},
]);
Then, you only need to do a classic Angular HTML ngFor:
<tr *ngFor = "let drugDetail of copyDrugList ">
<td>{{ drugDetail.drugId }}</td>
<td>{{ drugDetail.drugName }}</td>
<td>{{ drugDetail.location }}</td>
<td>{{ drugDetail.quantity }}</td>
</tr>

Bootstrap-vue - Display array data as dropdown in vue js

I have an array of JSON data like :
loggers = [{
"allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
"level": "WARN",
"logger": "com.test1",
"status": "success"
},
{
"allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
"level": "WARN",
"logger": "com.test2",
"status": "success"
}
]
I am using dropdown inside a table column and for that using below code, and basically traversing Loggers array but not able to extract allAvailableLevel data.
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Class</th>
<th>Current Level</th>
<th>All Available Levels</th>
<!-- Only display "Action" header if level is changed-->
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr v-for="(logger, index) in loggers" :key="logger">
<td>{{ index + 1 }}</td>
<td>{{ logger.logger }}</td>
<td>{{ logger.level }}</td>
<td>
<b-dropdown
boundary="viewport"
id="dropdown-dropup"
size="sm"
:text="selectedLevelText"
split
class="m-2"
>
<b-dropdown-item-button
v-for="logger in loggers[0].allLevel"
:key="logger"
#click.prevent="changeLevel(level)"
>{{ logger }}</b-dropdown-item-button
>
</b-dropdown>
</td>
<td v-if="levelChanged">
<b-button
size="sm"
variant="secondary "
#click.prevent="updateLevel(selectedLevelText)"
>Update</b-button
>
</td>
</tr>
</tbody>
</table>
with above code my dropdown looks like :
I want to display it like this :
How do I traverse my data inside the vue template to get only the data of "allAvailableLevel"?
You should iterate over that nested array as follows :
<b-dropdown-item-button
v-for="level in logger.allAvailableLevel"
:key="level"
#click.prevent="changeLevel(level)"
>{{ level }}</b-dropdown-item-button
>
Do this:
<tr v-for="(logger, index) in loggers" :key="logger">
<td>{{ index + 1 }}</td>
...
<td>
<b-dropdown
boundary="viewport"
id="dropdown-dropup"
size="sm"
:text="selectedLevelText"
split
class="m-2"
>
<b-dropdown-item-button
v-for="level in logger.allAvailableLevel"
:key="level"
#click.stop="changeLevel(level)"
>{{ logger }}</b-dropdown-item-button
>
</b-dropdown>
</td>
</tr>

HTML Table in PDF

I am trying to print HTML table into PDF using JSPdf. My table have 20 columns. Because of that, I couldn't print the entire table. Last 4-6 column always goes hidden. Is there is anyway to make visible or bring down the hidden content ?
HTML
<div class="table-responsive" >
<table class="table table-bordered">
<thead>
<tr>
<th>Year Lease</th>
<th>user Name</th>
<th>Total Rent</th>
<th>Other Income</th>
<th>Total Income</th>
<th>Avg Expenses at 4 %</th>
<th>Value Added Expense</th>
<th>Other Expense</th>
<th>Total Expense</th>
<th>NOI</th>
<th>CAP Rate</th>
<th>Interest Paid</th>
<th>Net Income</th>
<th>Principal</th>
<th>Yearly Cashflow</th>
<th>Yearly</th>
<th>DS Ratio</th>
</tr>
</thead>
<tbody *ngFor="let userInfo of user;index as i">
<tr>
<td>Year {{i+1}} Leased</td>
<td *ngFor="let user of userInfo.user">{{user.amount | currency}}</td>
<td>{{user.grossIncome | currency}}</td>
<td>{{user.otherIncome | currency }}</td>
<td>{{user.totalIncome | currency }}</td>
<td>{{user.totalExpense}}</td>
<td>{{user.valueAddedExpense | currency}}</td>
<td>{{user.otherExpense | currency}}</td>
<td>{{user.totalExpense | currency}}</td>
<td>{{user.netOperatingIncome | currency}}</td>
<td>{{user.capRate}}% </td>
<td>{{user.mortageInterest | currency}}</td>
<td>{{user.netIncome | currency}}</td>
<td>{{user.principle | currency}}</td>
<td>{{user.yearlyCashFlow | currency}}</td>
<td>{{user.yearly}} %</td>
<td>{{user.deptServiceRatio}} %</td>
</tr>
</tbody>
</table>
</div>
TS
var pdf = new jsPDF('p','pt', 'a3');
pdf.internal.scaleFactor = 1.40;
pdf.addHTML(this.print.nativeElement, 0, 0, {
pagesplit: true
}, ()=> {
pdf.save('Report-' + new Date() + '.pdf');
});
Issue
There are still 4 more column left after CAP Rate. Please help me out
Y must set your pdf height like this:
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();

Displaying navigation properties in ngx-datatable

I have a table like this that displays data including several navigation properties :
<table class="table afcstandings">
<thead>
<tr>
<th>team</th>
<th>coach</th>
<th>w</th>
<th>l</th>
<th>t</th>
<th>fa</th>
<th>agst</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let standing of standingsAFCEast">
<!-- property binding rather than interpolation-->
<td>{{ standing.team.teamName }}</td>
<td>{{ standing.team.coach.coachName }}</td>
<td>{{ standing.won }}</td>
<td>{{ standing.lost }}</td>
<td>{{ standing.tied }}</td>
<td>{{ standing.pointsFor }}</td>
<td>{{ standing.pointsAgainst }}</td>
<td>{{ standing.pointsDifference }}</td>
</tr>
</tbody>
</table>
Here is the data structure that is being read :
[{"team":{"teamId":22,"teamName":"Carolina Panthers","coach":{"coachId":61,"coachName":"J Smith"},"division":{"divisionId":2,"divisionName":"NFC West"},"headerImage":"","logoImage":"","hex":"","r":null,"g":null,"b":null},"won":2,"lost":1,"tied":0,"pointsFor":82,"pointsAgainst":62,"pointsDifference":20}]
My question is, how do I display this data using ngx-datatable? I have tested with 3 fields, teamName, coachName and won, and am able to display the won field, but not the others, as I am not sure how to drill down into the team object or the coach object.
<ngx-datatable class="ngx-datatable" [rows]="standingsAFCEast">
<ngx-datatable-column name="team.teamName" [width]="300"></ngx-datatable-column>
<ngx-datatable-column name="team.coach.coachName"></ngx-datatable-column>
<ngx-datatable-column name="won"></ngx-datatable-column>
</ngx-datatable>
Any advice would be really appreciated!
After looking at the basic examples, I made this work (Plunker here):
#Component({
selector: 'my-app',
template: `
<div>
<ngx-datatable
[rows]="rows"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[reorderable]="reorderable">
</ngx-datatable>
</div>
`
})
export class AppComponent {
standingsAFCEast = [{
"team":{
"teamId":22,
"teamName":"Carolina Panthers",
"coach":{
"coachId":61,
"coachName":"J Smith"
},
"division":{
"divisionId":2,
"divisionName":"NFC West"
},
"headerImage":"",
"logoImage":"",
"hex":"",
"r":null,
"g":null,
"b":null
},
"won":2,
"lost":1,
"tied":0,
"pointsFor":82,
"pointsAgainst":62,
"pointsDifference":20
}]
get rows () {
return this.standingsAFCEast.map(standing => ({
team: standing.team.teamName,
coach: standing.team.coach.coachName,
w: standing.won,
l: standing.lost,
t: standing.tied,
fa: standing.pointsFor,
agst: standing.pointsAgainst,
diff: standing.pointsDifference
}))
}
// columns = [{name:'team'}, {name:'coach'}, {name:'w'}, {name:'l'}, {name:'t'}, {name:'fa'}, {name:'agst'}, {name:'diff'}]
columns = Object.keys(this.rows[0]).map(val => ({name: val}))
}
Let me know if this helps!

How to print correct number of rows in a table with Vue

I"m just starting to learn Vue and I'm having a little issue printing out the correct number of rows I should be getting for a table.
My table has 2 columns and 4 expected rows. When I test my code I get a table with 2 columns and one row with 4 column values using v-repeat or I get a table with 2 columns and 4 rows with the same information and 4 column values over 4 rows.
Basically trying to make a table that looks like this
Col 1 | Col2
row1 rData | rData
row2 rData | rData
row3 rData | rData
row4 rData | rData
The html
<table>
<thead id="tblHead">
<th v-for="item in items">
{{ item.message }}
</th>
</tr>
</thead>
<tbody id="tblInside">
<!-- <tr v-for="stuff in stuffs">
{{ stuff.message }}-->
<tr v-repeat="stuffsTD">
<td v-for="tdStuff in stuffsTD">
{{ tdStuff.message }}
</td>
</tr>
</tbody>
</table>
The Vue.js
var tbl = new Vue({
el: '#tblHead',
data: {
items: [
{ message: 'One' },
{ message: 'Two'}
]
}
})
var inTbl = new Vue({
el: '#tblInside',
data: {
stuffsTD: [
{ message: 'Row1 Col1 Plz' },
{ message: 'Row1 Col2 Plz' },
{ message: 'Row2 Col1 Plz' },
{ message: 'Row2 Col2 Plz' }
]
}
})
try this html:
<table>
<thead id="tblHead">
<th v-for="item in items">
{{ item.message }}
</th>
</tr>
</thead>
<tbody id="tblInside">
<tr>
<td v-for="tdStuff in stuffsTD">
{{ tdStuff.message }}
</td>
</tr>
</tbody>
</table>
Figured it out on my own. Have to use v-for on the tr element
<table id="tblData">
<thead>
<tr>
<th v-for="column in columns">
{{ column | uppercase }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="tableData in tableData">
<td>
{{ tableData.client }}
</td>
<td>
{{ tableData.ad }}
</td>
<td>
{{ tableData.rt }}
</td>
</tr>
</tbody>
</table>
and
var tbl = new Vue({
el: '#tblData',
data: {
columns: [ 'some', 'thing', 'here' ],
tableData: [
{
some: 'A STORE',
thing: 'Summer',
here: '1:32'
},
{
some: 'Computer Store',
thing: 'fix',
here: '2:14'
},
{
some: 'Store 2',
thing: 'MTG',
here: '0:47'
}
]
}
})

Categories