> Mini Project Angular 7 Invoice Manager Hands-On Solutions - TECH UPDATE

Mini Project Angular 7 Invoice Manager Hands-On Solutions

 Mini Project Angular 7 Invoice Manager Hands-On Solutions.

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>

<!--display addItem division based on mouse position in  addItemLink division -->

<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>



Mini Project Angular 7 Invoice Manager Hands-On Solutions Mini Project Angular 7 Invoice Manager Hands-On Solutions Reviewed by TECH UPDATE on May 24, 2022 Rating: 5

3 comments:

  1. Please provide solution for Course Id 64904

    ReplyDelete
  2. Test in error:
    jdbcTest.test2:35 Null pointer
    jdbcTest.test3: MySQLSyntaxError Table ' mydb.subject' doesn't exist
    jdbcTest.test4: 78 Null Pointer ?

    ReplyDelete
  3. Impressive and powerful suggestion by the author of this blog are really helpful to me.

    Healthcare Billing Application

    ReplyDelete

Powered by Blogger.