I want to calculate Item Total Price and Total Price . How can I get the ItemTotal and SubTotal. Medicine store invoice system. Here I added Medicine to lines but how can I calculate Total Price All of my Items.
medicinepurchase.component.ts
export class MedicinePurchaseComponent implements OnInit {
trial: any;
medicinePurchase: IMedicinePurchase;
medicineID = new FormControl();
brandName = new FormControl();
genericName = new FormControl();
quantity = new FormControl();
price = new FormControl();
totalPrice: number;
filteredMedicine: Observable<IMedicine[]>;
filteredMedicineByID: Observable<IMedicine[]>;
filteredMedicineByGname: Observable<IMedicine[]>;
medicine: IMedicine[] = [
];
medicines: IMedicine[];
filteredOptions: Observable<any[]>;
medicinePurchaseForm: FormGroup;
constructor(private medicineService: MedicineService, private fb: FormBuilder) {
this.filteredMedicine = this.brandName.valueChanges
.pipe(
startWith(''),
map(state => state ? this._filtermedicine(state) : this.medicine.slice())
);
this.filteredMedicineByGname = this.genericName.valueChanges
.pipe(
startWith(''),
map(state => state ? this._filtermedicineByGName(state) : this.medicine.slice())
);
this.filteredMedicineByID = this.medicineID.valueChanges
.pipe(
startWith(''),
map(state => state ? this._filtermedicineid(state) : this.medicine.slice())
);
}
ngOnInit(): void {
this.getAllMedicine();
this.initForm();
}
private initForm() {
this.medicinePurchaseForm = new FormGroup({
prescriptionId: new FormControl(),
subtotal: new FormControl(),
purchaseMedicineList: new FormArray([])
});
}
get medicineArray() {
return this.medicinePurchaseForm.controls.purchaseMedicineList as FormArray;
}
selectMedicine(value: IMedicine) {
this.medicineID.setValue(value.id);
this.genericName.setValue(value.genericName);
this.brandName.setValue(value.brandName);
this.price.setValue(value.unitPrice);
}
addMedicinetoLine(){
this.medicineArray.push(this.getLineFormGroup());
}
getLineFormGroup(){
const lineItem = this.fb.group({
medicineId: new FormControl(this.medicineID.value, Validators.required),
medicineName: new FormControl(this.brandName.value, Validators.required),
unitPrice: new FormControl(this.price.value),
quantity: new FormControl(this.quantity.value, Validators.required),
itemTotal: new FormControl(),
});
return lineItem;
}
onSubmit(){
console.log(this.medicinePurchaseForm.value);
}
getAllMedicine(){
this.medicineService.getAllMedicine().subscribe(value => {
this.medicine = value;
});
}
private _filtermedicine(value: string): IMedicine[] {
const filterValue = value.toLowerCase();
return this.medicine.filter(state => state.brandName.toLowerCase().includes(filterValue));
}
private _filtermedicineByGName(value: string): IMedicine[] {
const filterValue = value.toLowerCase();
return this.medicine.filter(state => state.genericName.toLowerCase().includes(filterValue));
}
private _filtermedicineid(value: number): IMedicine[] {
const result = this.medicine.filter(x => x.id === value);
return result;
}
}
medicinepuechase.component.html
<form>
<mat-form-field class="form-id" appearance="fill">
<mat-label>ID</mat-label>
<input type="number" matInput
readonly
aria-label="ID"
[matAutocomplete]="autoID"
[formControl]="medicineID">
<mat-autocomplete #autoID="matAutocomplete">
<mat-option *ngFor="let medicine of filteredMedicineByID | async" (click)="selectMedicine(medicine)">
<span>{{medicine.id}}</span> |
<span>{{medicine.brandName}}</span> |
<small>{{medicine.genericName}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="form-brand-name" appearance="fill">
<mat-label>Brand Name</mat-label>
<input type="text" matInput
aria-label="BrandName"
[matAutocomplete]="autobrandName"
[formControl]="brandName">
<mat-autocomplete #autobrandName="matAutocomplete">
<mat-option *ngFor="let medicine of filteredMedicine | async" (click)="selectMedicine(medicine)">
<span>{{medicine.id}}</span> |
<span>{{medicine.brandName}}</span> |
<small>{{medicine.genericName}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="form-generic-name" appearance="fill">
<mat-label>Generic Name</mat-label>
<input type="text" matInput
aria-label="GenericName"
[matAutocomplete]="autoGenericName"
[formControl]="genericName">
<mat-autocomplete #autoGenericName="matAutocomplete">
<mat-option *ngFor="let medicine of filteredMedicineByGname | async" (click)="selectMedicine(medicine)">
<span>{{medicine.id}}</span> |
<span>{{medicine.brandName}}</span> |
<small>{{medicine.genericName}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="form-quantity" appearance="fill">
<mat-label>Quantity</mat-label>
<input type="number" matInput [formControl]="quantity">
</mat-form-field>
<button mat-button (click)="addMedicinetoLine()">ADD</button>
</form>
<hr>
<form [formGroup]="medicinePurchaseForm" (ngSubmit)="onSubmit()" novalidate *ngIf="medicinePurchaseForm">
<div formArrayName="purchaseMedicineList">
<table>
<tr>
<th>Medicine ID</th>
<th>Medicine Name</th>
<th>Quantity</th>
</tr>
<tr *ngFor="let medicine of medicinePurchaseForm.controls['purchaseMedicineList'].controls; index as t" [formGroupName]="t">
<td><input type="text" formControlName="medicineId" placeholder="ID" /></td>
<td><input type="text" formControlName="medicineName" placeholder="Name" /></td>
<td><input type="text" placeholder="quantity" formControlName="quantity" ></td>
<td><input type="text" placeholder="Item Total" formControlName="itemTotal" ></td>
<td>Price: {{medicinePurchaseForm.controls['purchaseMedicineList'].controls[t].controls.quantity.value * medicinePurchaseForm.controls['purchaseMedicineList'].controls[t].controls.unitPrice.value}}</td>
</tr>
</table>
<!-- Calculate Total Price shows Here -->
</div>
<button type="submit">Submit</button>
</form>
I want to calculate Item Total Price and Total Price . How can I get the ItemTotal and SubTotal. Medicine store invoice system. Here I added Medicine to lines but how can I calculate Total Price All of my Items.
