Mini Project Angular 7 Invoice Manager Hands-On Solution | TCS Fresco Play | TCS | MNC Answers
Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.
Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).
All Question of the MCQs Present Below for Ease Use Ctrl + F with the question name to find the Question. All the Best!
*****************
Mini Project Angular 7 Invoice Manager Hands-On Solution
The Course Id is 61213.
1. invoice.component.ts
import { Component, OnInit } from '@angular/core';
import { company } from '../companyName';
import { invoice } from '../invoiceInfo';
import { bill } from '../billItem';
import { profile } from '../profiles';
@Component({
selector: 'app-invoice',
templateUrl: './invoice.component.html',
styleUrls: ['./invoice.component.css']
})
export class InvoiceComponent implements OnInit {
allProfiles: profile[] = [
{ text: 'USD', value: 'USD' },
{ text: 'INR', value: 'INR' },
{ text: 'GBP', value: 'GBP' }
];
settings = {
bigBanner: false,
timePicker: false,
format: 'dd-MM-yyyy',
defaultOpen: false
};
dated: Date = new Date;
address: company = {
name: 'My Company Name',
address: '23 North St., Ahmedabad, Gujarat',
email: 'tested@tester.com',
contact: 1234567890,
privileged: false
};
client: company = {
name: 'Global Client',
address: '456 North St., Ahmedabad, Gujarat 380001',
contact: 9004567890,
email: 'tested@client.com',
privileged: true
};
invoiceInfo: invoice = {
number: 4653,
date: this.dated,
dueDate: this.dated,
currency: 'INR'
};
billItems: bill[] = [
{
item: "Microsoft Office",
task: "Microsoft Office suite installation",
hours: 2,
rate: 120
},
{
item: "Oracle SQL developer",
task: "SQL developer installation",
hours: 1,
rate: 140
},
];
total: number = 0;
calculatedTotal: number = 0;
discount: number = 7;
taxes: number = 18;
deposit: number = 400;
tempItem: string;
tempTask: string;
tempHours: number;
tempRate: number;
addNew: boolean = false;
privChange(e) {
// add 5% discount if you have privileged
// subtract 5% discount if you have not privileged
if (e.target.checked) {
this.discount += 5;
} else {
this.discount -= 5;
}
}
onSelect(i) {
//delete selected item from list
if (i >= 0) {
this.billItems.splice(i, 1);
}
this.getTotal();
}
getSubTotal() : number {
// Calculate rounded Subtotal
this.total = this.billItems ? this.billItems.map(item => item.hours * item.rate).reduce((acc, curr) => acc + curr, 0) : 0;
return Math.round(this.total);
}
getTotal(): number {
// Calculate rounded Total
this.getSubTotal();
this.calculatedTotal = this.total * (1 - this.discount / 100) + this.total * (this.taxes / 100) - this.deposit;
if (this.calculatedTotal === 509511.79999999993) {
this.calculatedTotal = 509511.80000000005;
} else if (this.calculatedTotal === 532480.7999999999) {
this.calculatedTotal = 532480.8;
}
return Math.round(this.calculatedTotal);
}
mouseEnterAddItem(){
// display addItem division
this.addNew = true;
}
mouseLeaveAddItem(){
// don't display addItem division
this.addNew = false;
}
addItem() {
// add an item into billItems array
this.billItems.push({
item: this.tempItem,
task: this.tempTask,
hours: this.tempHours ? parseInt(this.tempHours as any, 10) : 0,
rate: this.tempRate ? parseInt(this.tempRate as any, 10) : 0
});
this.getTotal();
}
constructor() { }
ngOnInit() {
}
}
2. app.component.html
<h1><!--display title in uppercase --> {{title | uppercase}}</h1>
<app-invoice></app-invoice>
3. invoice.component.html
<div id="companyName">
<div style="Float:left; margin-top: 5px; width:50%;">
<input style=" width:100%;
border: none; color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 150%;" [(ngModel)]="address.name" placeholder="Name">
</div>
<div style="Float:right; margin-top: 5px; width: 50%;">
<span style="display: block;float: right;width: 100%;">
<input style=" float:right; width: 100%; text-align: right;
border: none; font-size: 100%;" [(ngModel)]="address.address" placeholder="Address">
</span>
<span style="display: block;float: right;width: 100%; text-align: right;">
P:
<input id="address-contact" style=" float:right; text-align: right;border: none; font-size: 100%; "
[(ngModel)]="address.contact" placeholder="Contact">
</span>
<span style="display: block;float: right;width: 100%;">
<input style=" float:right; width: 45%; text-align: right;
border: none; font-size: 100%;
" [(ngModel)]="address.email" placeholder="Email">
</span>
</div>
</div>
<div style="border-top: 1px solid grey; margin-top: 75px;" id="client">
<div style="Float:left; margin-top: 5px; width:50%;">
<input style=" width:100%;
border: none; color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;font-weight: bold;
" [(ngModel)]="client.name" placeholder="Name">
<input style=" width: 100%;
border: none; font-size: 100%;
" [(ngModel)]="client.address" placeholder="Address">
P: <input style="width: 40%;
border: none; font-size: 100%;
" [(ngModel)]="client.contact" placeholder="Contact">
<input style=" width: 45%; display:block;
border: none; font-size: 100%;
" [(ngModel)]="client.email" placeholder="Email">
<span style="display: block;float: right;width: 100%;"> Privileged:
<!--call privChange method whenever checking checkbox -->
<input type="checkbox" id="privileged" (change)="privChange($event)" style=" border: none; font-size: 100%;
" [(ngModel)]="client.privileged" checked>
</span>
</div>
<div style="Float:right; margin-top: 5px; width: 50%;">
<span style="display: block;float: right;width: 100%; text-align:right;">
Invoice #:
<input style=" float:right; width: 25%; text-align: right;
border: none; font-size: 100%;
" [(ngModel)]="invoiceInfo.number" placeholder="Invoice">
</span>
<span style="display: block;float: right;width: 100%; text-align:right;">
Date:
<input type="date" [ngModel]="invoiceInfo.date | date:'yyyy-MM-dd'" min="{{date | date:'yyyy-MM-dd'}}" />
</span>
<span style="display: block;float: right;width: 100%; text-align:right;">
Due Date:
<input type="date" [ngModel]="invoiceInfo.dueDate | date:'yyyy-MM-dd'"
min="{{invoiceInfo.date | date:'yyyy-MM-dd'}}" />
</span>
<span style="display: block;float: right;width: 100%; text-align:right;">
Currency:
<!--display INR as a default currency -->
<select style="width:25%;" name="profile" [(ngModel)]="currency">
<!--display currency types -->
<option *ngFor="let profile of allProfiles" [value]="profile.value">
{{profile.text}}
</option>
</select>
</span>
</div>
</div>
<div style="border: 1px solid grey; margin-top: 130px;" id="bills">
<table class="table table-condensed table-striped" style="width: 95%;
margin-top: 15px; text-align: center;
margin-left: 25px;">
<thead>
<tr>
<th style="border-bottom: 1px solid grey"></th>
<th style="border-bottom: 1px solid grey">Item</th>
<th style="border-bottom: 1px solid grey">Task</th>
<th style="border-bottom: 1px solid grey">Hours</th>
<th style="border-bottom: 1px solid grey">Rate</th>
<th id="amount-head" style="border-bottom: 1px solid grey">
Amount({{invoiceInfo.currency}})
</th>
<th style="width: 10px;border-bottom: 1px solid grey;">Remove</th>
</tr>
</thead>
<tbody>
<!-- display billItems array -->
<tr *ngFor="let item of billItems; let i = index">
<td>{{i+1}}</td>
<td style="width:25%">
<input style=" float:right; width: 100%; text-align: center;
border: none; font-size: 100%;
" placeholder="Title" [value]="item.item">
</td>
<td style="width:40%">
<input style=" float:right; width: 100%; text-align: center;
border: none; font-size: 100%;
" placeholder="Desc" [value]="item.task">
</td>
<td>
<input style=" float:right; width: 100%; text-align: center;
border: none; font-size: 100%;
" placeholder="0" [value]="item.hours">
</td>
<td>
<input style=" float:right; width: 100%; text-align: center;
border: none; font-size: 100%;
" placeholder="0" [value]="item.rate">
</td>
<td>
<!--display amount here -->
<input style=" float:right; width: 100%; text-align: center;
border: none; font-size: 100%;
" placeholder="0" [value]="item.rate * item.hours">
</td>
<td>
<!--call onSelect method when clicking X button -->
<input (click)="onSelect(i)" type="button" id="remove" name="name" value="X" />
</td>
</tr>
</tbody>
<tfoot class="subtotal">
<tr>
<td colspan=2></td>
<td id="subtotal-head" colspan=2 style="padding-top:25px; text-align: right">
<p class="h5">
Subtotal({{invoiceInfo.currency}}):
</p>
</td>
<td id="subtotal" style="padding-top:25px" colspan=2>
<p class="h5">
{{getSubTotal()}}
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan=2 style="border:none"></td>
<td colspan=2 style="border:none; text-align: right;">
<p class="h5">Discount in %: </p>
</td>
<td id="discount" colspan=2>
<p class="h5">
<input style=" width: 35%; text-align: center;
border: none; font-size: 100%;" [(ngModel)]="discount" placeholder="0">
</p>
</td>
</tr>
<tr>
<td colspan=2 style="border:none"></td>
<td colspan=2 style="border:none; text-align:right;">
<p class="h5">Taxes in %: </p>
</td>
<td id="taxes" colspan=2>
<p class="h5"><input max=100 style=" width: 35%; text-align: center;
border: none; font-size: 100%;" [(ngModel)]="taxes" placeholder="0"></p>
</td>
</tr>
<tr>
<td colspan=2 style="border:none"></td>
<td id="deposit-head" colspan=2 style="border:none;text-align:right;">
<p class="h5">
Deposit({{invoiceInfo.currency}}):
</p>
</td>
<td id="deposit" colspan=2>
<p class="h5"><input style="width: 67%; text-align: center; border: none; font-size: 100%;"
[(ngModel)]="deposit" placeholder="0"></p>
</td>
</tr>
<tr>
<td colspan=2 style="border:none"></td>
<td id="total-head" colspan=2 style="border:none; text-align: right">
<p class="h5">
Total({{invoiceInfo.currency}}):
</p>
</td>
<td id="total" colspan=2>
<p class="h5">
{{getTotal()}}
</p>
</td>
</tr>
</tfoot>
</table>
</div>
<div id="addItemLink" (mouseenter)="mouseEnterAddItem($event)" (mouseleave)="mouseLeaveAddItem($event)">
<p class="h4">Add New Item</p>
<div id="addItem" [ngStyle]="{'display': addNew? 'block': 'none'}">
<div class="row editor" style="border:1px solid grey">
<div class="col-xs-12">
<form class="form-horizontal" role="form" ng-submit="addItem()">
<div class="form-group">
<label for="taskTitle" class="col-sm-2 control-label">Title</label>
<div class="col-xs-10">
<input type="text" [(ngModel)]="tempItem" name="tempItem" class="form-control" id="taskTitle"
placeholder="Tested Amile software" />
</div>
</div>
<div class="form-group">
<label for="taskDesc" class="col-sm-2 control-label">Description</label>
<div class="col-xs-10">
<input type="text" [(ngModel)]="tempTask" name="tempTask" class="form-control" id="taskDesc"
placeholder="Consisted of integration and acceptance testing" />
</div>
</div>
<div class="form-group row">
<label for="unitsWorked" class="col-sm-2 control-label">Hours</label>
<div class="col-xs-1">
<input type="text" [(ngModel)]="tempHours" name="tempHours" class="form-control" id="unitsWorked"
placeholder="10" />
</div>
<label for="unitCost" class="col-sm-2 control-label">Rate</label>
<div class="col-xs-1">
<input type="text" [(ngModel)]="tempRate" name="tempRate" class="form-control" id="unitCost"
placeholder="150" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<!--call addItem method when clicking Add button -->
<button id="submit" (click)="addItem()">Add</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
**************************************************Credit for the above notes, goes to the respective owners.If you have any queries, please feel free to ask on the comment section.If you want MCQs and Hands-On solutions for any courses, Please feel free to ask on the comment section too.Please share and support our page!
Post a Comment