Categories
Mastering Development

How to do a calculation using angular

I am new to angular and I am trying to calculate the salary of an employee when his ID, his base salary and the relevant month is given. For this, I should add the total additions and substract the total deductions from the base salary to calculate the final salary. Currently I am having this angular form where the id, base salary and the month is provided.

<div class="row justify-content-center">
  <div class="col-md-11">
    <nb-card>
      <nb-card-header>Add Salary</nb-card-header>
      <nb-card-body>
        <form class="form-horizontal">
          <fieldset>
            <legend>Details</legend>
            <br>
            <div class="form-group row">
              <label for="id" class="label col-sm-3 form-control-label">Name</label>
              <div class="col-sm-9">
                <nb-select id="id" name="id" [(ngModel)]="salary.id" placeholder="Select ID" [(selected)]="selectedItem">
                  <nb-option *ngFor="let usr of users" value=""></nb-option>
                </nb-select>
              </div>
            </div>
            <div class="form-group row">
              <label for="month" class="label col-sm-3 form-control-label">Month</label>
              <div class="col-sm-9">
                <input type="number" nbInput fullWidth id="month" name="month" [(ngModel)]="salary.month" placeholder="Month">
              </div>
            </div>
            <div class="form-group row">
              <label for="date" class="label col-sm-3 form-control-label">Issue Date</label>
              <div class="col-sm-9">
                <input nbInput type="date" id="date" name="date" [(ngModel)]="salary.issueDate" placeholder="Date">
              </div>
            </div>
            <div class="form-group row">
              <label for="basicsal" class="label col-sm-3 form-control-label">Basic Salary</label>
              <div class="col-sm-9">
                <input type="text" nbInput fullWidth id="basicsal" name="basicsal" placeholder="BasicSalary">
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-3 offset-md-3"></div>
              <div class="col-md-3 offset-md-3">
                <button nbButton hero status="success" (click)="onCalculate()">Calculate</button>
              </div>
            </div>
          </fieldset>
          <div class="form-group row">
            <div class="col-6">
              <fieldset>
                <legend>Additions</legend>
                <br>
                <div class="form-group row">
                  <label for="addition" class="label col-sm-3 form-control-label">Total Additions</label>
                  <div class="col-sm-9">
                    <input type="text" nbInput fullWidth id="addition" name="addition" [(ngModel)]="salary.addition" placeholder="Additions" readonly>
                  </div>
                </div>
              </fieldset>
            </div>
            <div class="col-6">
              <fieldset>
                <legend>Deductions</legend>
                <br>
                <div class="form-group row">
                  <label for="deduction" class="label col-sm-3 form-control-label">Total Deductions</label>
                  <div class="col-sm-9">
                    <input type="text" nbInput fullWidth id="deduction" name="deduction" [(ngModel)]="salary.deduction" placeholder="Deductions" readonly>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
          <fieldset>
            <legend>Total</legend>
            <br>
            <div class="form-group row">
              <label for="salary" class="label col-sm-3 form-control-label">Total Salary</label>
              <div class="col-sm-9">
                <input type="text" nbInput fullWidth id="salary" name="salary" [(ngModel)]="salary.total" placeholder="Salary" readonly>
              </div>
            </div>
          </fieldset>
          <br>
          <div class="row">
            <div class="col-md-3 offset-md-3">
              <button nbButton hero status="success" (click)="onClick()">Submit</button>
            </div>
            <div class="col-md-3 offset-md-3">
              <button nbButton hero status="warning">Cancel</button>
            </div>
          </div>
        </form>
      </nb-card-body>
    </nb-card>
  </div>
</div>

And this is my component file

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Observable, Subject} from 'rxjs';
import {User, UserData} from '../../../@core/data/users';
import {takeUntil} from 'rxjs/operators';
import {Salary, SalaryData} from '../../../@core/data/salary';

@Component({
  selector: 'ngx-add-salary',
  templateUrl: './add-salary.component.html',
  styleUrls: ['./add-salary.component.scss'],
})
export class AddSalaryComponent implements OnInit, OnDestroy {
  private destroy$: Subject<void> = new Subject<void>();
  selectedItem: any;
  users: User[];
  salary = new Salary();
  constructor(private userService: UserData, private salaryService: SalaryData) { }
  basic: number;
  add: number;
  ded: number;
  totaladd: number;
  totalded: number;
  sal: number;

  ngOnInit(): void {
    this.userService.getUsers()
      .pipe(takeUntil(this.destroy$))
      .subscribe(user => this.users = user);
  }
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
  onClick() {
    console.log(this.salary);
    // this.salaryService.addSalary(this.salary).subscribe(sal => console.log(this.salary));
  }
  onCalculate() {
  }
} 

I am having a table called adjustments where all the addition and deduction details of the employees are saved.

Adjustments Table

For now, I just want to find out a way so that when I click the calculate button, I get all the data in the adjustment table for the given month of a given employee and if the type is separately calculate the total additions and total deductions so that afterwards I can calculate the Total salary.

(If it is a query, it would probably look like

Select amount from Adjustments where id="1" and month="10" and type="addition"

and

Select amount from Adjustments where id="1" and month="10" and type="deduction"

and then I can add those and finally calculate the salary)

Leave a Reply

Your email address will not be published. Required fields are marked *