Notes

import * as React from 'react';
import styles from './Symbawebpart.module.scss';
import { ISymbawebpartProps } from './ISymbawebpartProps';
import { ISymbawebpartState } from './ISymbawebpartState';
// import { escape } from '@microsoft/sp-lodash-subset';
import {sp} from "sp-pnp-js";
import {TextField } from 'office-ui-fabric-react';
import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
import { Dropdown, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { DateTimePicker, DateConvention } from '@pnp/spfx-controls-react/lib/dateTimePicker';

var custItems: IDropdownOption[]=[];
var prodItems: IDropdownOption[]=[];
var ordItems: IDropdownOption[]=[];

var oid;
var pname='';
var cname='';
// var oname='';
//constructor Starts
export default class Status extends React.Component<ISymbawebpartProps, ISymbawebpartState> {

constructor(props: ISymbawebpartProps,state: ISymbawebpartState){
super(props);
this.state={
productItems: [],
customerItems:[],
orderItems:[],

productType:'',
date: new Date(),
unitPrice:'',
numberOfUnits:'',
saleValue:'',
customerId:'',
OnClickEdit: false,
productId:''
};
this.handleChange=this.handleChange.bind(this);
this.handleChangeCust=this.handleChangeCust.bind(this);
this.handleChangeOrd=this.handleChangeOrd.bind(this);
this.autoPopulate=this.autoPopulate.bind(this);

this.addToOrderList=this.addToOrderList.bind(this);
this.editOrderList=this.editOrderList.bind(this);
this.deleteItem=this.deleteItem.bind(this);
this.resetOrderList=this.resetOrderList.bind(this);
this.handleUpdateSaleValue=this.handleUpdateSaleValue.bind(this);
}

private handleChange(event):void{
pname=event.key;
this.autoPopulate();
}

async handleChangeCust(event):Promise<void>{
try {
cname=event.key;
let items = await sp.web.lists.getByTitle("Customers").items.getPaged();
for (let i = 0; i < items.results.length; i++) {
if(items.results[i].CustomerName==cname)
{
this.setState({customerId:items.results[i].CustomerID});//ch
}
}
} catch (error) {
console.log(error);
}

}

async handleChangeOrd(event):Promise<void>{
try {
oid=event.key;
let items = await sp.web.lists.getByTitle("Orders").items.getPaged();
for (let i = 0; i < items.results.length; i++) {

if(items.results[i].ID==oid)//ch
{
this.setState({productId:items.results[i].ProductID})//ch
this.setState({customerId:items.results[i].CustomerID})//ch
this.setState({unitPrice: items.results[i].UnitPrice});
this.setState({numberOfUnits: items.results[i].UnitSold});
this.setState({unitPrice: items.results[i].UnitPrice});
this.setState({saleValue: items.results[i].SaleValue});
}
}
let custitems = await sp.web.lists.getByTitle("Customers").items.getPaged();
for (let i = 0; i < custitems.results.length; i++) {
debugger
if(custitems.results[i].CustomerID==this.state.customerId)//ch
{
cname=custitems.results[i].CustomerName;
}
}
let proditems = await sp.web.lists.getByTitle("Products").items.getPaged();
for (let i = 0; i < proditems.results.length; i++) {
if(proditems.results[i].ProductID==this.state.productId)//ch
{
pname=proditems.results[i].ProductName;
this.setState({productType: proditems.results[i].ProductType});
this.setState({date: new Date(proditems.results[i].ProductExpiryDate)});
}
}
} catch (error) {
console.log(error);
}
}

async autoPopulate(): Promise<void>{
try {
let items = await sp.web.lists.getByTitle("Products").items.getPaged();

for (let i = 0; i < items.results.length; i++) {
if(items.results[i].ProductName==pname)
{
this.setState({productId:items.results[i].ProductID})//ch product
this.setState({productType: items.results[i].ProductType});
this.setState({unitPrice: items.results[i].ProductUnitPrice});
this.setState({date: new Date(items.results[i].ProductExpiryDate)});
}
}

} catch (error) {
console.log(error);
}
}
handleUpdateSaleValue = (event)=>
{

this.setState({numberOfUnits: event.target.value.toString()});
var units:number= parseInt(event.target.value);
var unitPrice: number = parseInt(this.state.unitPrice);
var calculate= units * unitPrice;
this.setState({saleValue: calculate.toString()});
return event;
}

// private calculatePrice(event):void
// {
// var unitpriceTotal:number=+this.state.unitPrice;
// var numunit:number=+this.state.numberOfUnits;
// var tot=unitpriceTotal*numunit;
// this.setState({saleValue:tot.toString()});
// }

async addToOrderList(event):Promise<void>
{
try {
debugger
var CheckDecimal = this.state.numberOfUnits;
if(cname==""||pname=="")
{
alert("[Error :E2] Please Select Customer Name From Dropdown"+"n"+"[Error :E0] Please Select Product Name From Dropdown");
}
else if(this.state.numberOfUnits==""||this.state.numberOfUnits=="0")
{
alert("[Error :E5] Please Enter: Number Of Units");
}
else if(Number(CheckDecimal) !== parseInt(CheckDecimal) && Number(CheckDecimal) % 1 !== 0){
alert("Please enter integer value")
}
else{
let item = await sp.web.lists.getByTitle("Orders").items.add({
CustomerID: this.state.customerId,
ProductID: this.state.productId,
UnitSold: this.state.numberOfUnits,
UnitPrice: this.state.unitPrice,
SaleValue: this.state.saleValue,
Title: "title"
});
alert("[Success :Item Added] "+"n Item has Been Added To Orders List");
}
} catch (error) {
console.log(error);
}
}
async editOrderList(event):Promise<void>
{
try {
this.setState({OnClickEdit:true})
let list = sp.web.lists.getByTitle("Orders");
oid=oid-0;
const i = await list.items.getById(oid).update({
CustomerID: this.state.customerId,
ProductID: this.state.productId,
UnitsSold: this.state.numberOfUnits,
UnitPrice: this.state.unitPrice,
SaleValue: this.state.saleValue,
Title: "title"
});
alert("[Success : Item Edited] "+"n"+"Item Has Been Edited n");
} catch (error) {
console.log(error);
}
}

async deleteItem(event):Promise<void>
{
try {
this.setState({OnClickEdit:true})
let list = sp.web.lists.getByTitle("Orders");
oid=oid-0;
const i=await list.items.getById(oid).delete();
alert("[Success : Item Deleted] "+"n"+"Item Has Been Deleted n");
} catch (error) {
console.log(error);
}
}

private resetOrderList():void{
cname='';
pname='';
oid='';

this.setState({
date:new Date(),
productType:'',
unitPrice:'',
numberOfUnits:'',
saleValue:''
})
}
public async componentDidMount(): Promise<void>
{
// get all the items from a sharepoint list
var reacthandler=this;
sp.web.lists.getByTitle("Customers").items.select('CustomerName').get().then(function(data){
for(var k in data){
custItems.push({key:data[k].CustomerName, text:data[k].CustomerName});
}
reacthandler.setState({customerItems: custItems});
console.log(custItems);
return custItems;
});
sp.web.lists.getByTitle("Products").items.select('ProductName').get().then(function(data){
for(var k in data){
prodItems.push({key:data[k].ProductName, text:data[k].ProductName});
}
reacthandler.setState({productItems: prodItems});
console.log(prodItems);
return prodItems;
});
sp.web.lists.getByTitle("Orders").items.select('ID').get().then(function(data){
for(var k in data){
ordItems.push({key:data[k].ID, text:data[k].ID});
}
reacthandler.setState({orderItems: ordItems});
console.log(ordItems);
return ordItems;
});
}

public render(): React.ReactElement<ISymbawebpartProps> {
const dropdownStyles: Partial<IDropdownStyles> = {
dropdown: { width: 435 }
};

const stackTokens: IStackTokens = { childrenGap: 12 };
// let message="message:"+this.state.customerId;
return (
<div className={ styles.symbawebpart }>
<div className={ styles.container }>
<div className={styles.header}>
<header>

<h2 className={styles.headtext}> SYMBA - PRODUCTS LIKE LION :)</h2>
</header></div>
<div className={ styles.row }>
<div className={ styles.column }>
<Stack tokens={stackTokens}>

<Dropdown required={true}
placeholder="Select Customer Name"
label="Customer Name"
selectedKey={cname}
options={this.state.customerItems}
styles={dropdownStyles}
onChanged={this.handleChangeCust}/>
</Stack>
<Stack tokens={stackTokens}>
<Dropdown required={true}
placeholder="Select Product Name"
label="Product Name"
selectedKey={pname}
options={this.state.productItems}
styles={dropdownStyles}
onChanged={this.handleChange}/>
</Stack>
<TextField required={true}
placeholder="Product Type will Be Entered Automatically"
label="Product Type"
value ={this.state.productType}
onChanged={event => {
this.setState({ productType: this.state.productType });
}}/><br />
<DateTimePicker label=""
placeholder=""
dateConvention={DateConvention.Date}
value={this.state.date}/>
<TextField required={true}
placeholder="Product Unit Price"
label="Product Unit Price"
type="number"
value ={this.state.unitPrice}
onChange={e=>{this.setState({unitPrice: this.state.unitPrice})}}/>

<TextField required={true}
placeholder="Enter Number Of Units "
label="Number of units"
type="number"
value ={this.state.numberOfUnits}
onChange={this.handleUpdateSaleValue}
//onChanged={e=>{this.setState({numberOfUnits: e})}}
/>
<div className="HeadText">
<TextField required={true}
placeholder="Total Sale Value"
label="Sale Value"
type="number"
value ={this.state.saleValue}
onChange={e=>{this.setState({saleValue: this.state.saleValue})}}/><br></br>
{/* <button type="Button" onClick={this.calculatePrice} className={styles.buttonCalculate}>Calculate</button> */}
</div>
</div>



<div className={ styles.column }>
<hr/>
<button onClick={this.addToOrderList} className={styles.buttonAdd}>ADD</button>&nbsp;&nbsp;
<button onClick={this.editOrderList} className={styles.buttonEdit}>EDIT</button>&nbsp;&nbsp;
<button onClick={this.deleteItem} className={styles.buttonDelete}>DELETE</button>&nbsp;&nbsp;
<button onClick={this.resetOrderList} className={styles.buttonReset}>RESET</button>&nbsp;&nbsp;
<hr/>
<Stack tokens={stackTokens}>{
this.state.OnClickEdit?
<Dropdown required={true}
placeholder="Select an Order ID"
label="Order ID"
selectedKey={oid}
options={this.state.orderItems}
styles={dropdownStyles}
onChanged={this.handleChangeOrd}/>
:null
}

</Stack>


</div>
</div>
<div className={styles.footDiv}>
<footer><p> &#169 SYMBA 2021</p></footer></div>
</div>
</div>
);
}
}