I nee when i select value in KPI Group Dropdown then value in KPI Sub Group Dropdown value show. but After i select value in KPI Group Dropdown value not show in KPI Sub Group, After i select value second time in KPI Grop Dropdown then value in KPI Sub Group show previous values not show current values in KPI Sub Group.
import * as React from 'react';
import styles from './SoxTbScopingChecker.module.scss';
import { ISoxTbScopingCheckerProps } from './ISoxTbScopingCheckerProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { Dropdown, IDropdownOption, Pivot, PivotItem, PrimaryButton, TextField, values } from 'office-ui-fabric-react';
import { sp } from 'sp-pnp-js';
import { IAttachmentInfo } from "@pnp/sp/attachments";
import { IItem } from '@pnp/sp/items';
interface SoxTbScopingChecker_states {
KPIGroup: IDropdownOption;
KPISubGroup: IDropdownOption;
KPIPrinciple: IDropdownOption;
KPIParameter: IDropdownOption;
KPISubTitle: string,
KPIShortDis: string,
KPIAddDis: string,
Attachments: File;
}
export default class SoxTbScopingChecker extends React.Component<ISoxTbScopingCheckerProps, SoxTbScopingChecker_states> {
private KPIGroupOptions: IDropdownOption[] = [];
private KPISubGroupOptions: IDropdownOption[];
private KPIPrincipleOptions: IDropdownOption[] = [];
private KPIParameterOptions: IDropdownOption[] = [];
constructor(props: Readonly<ISoxTbScopingCheckerProps>) {
super(props);
this.state = {
KPIGroup: undefined,
KPISubGroup: undefined,
KPIPrinciple: undefined,
KPIParameter: undefined,
KPISubTitle: '',
KPIShortDis: '',
KPIAddDis: '',
Attachments: new File([""], "", { type: "text/plain", })
}
}
public async componentDidMount() {
let kpigroupitems = await sp.web.lists.getByTitle("KPIGroup").items.select("*").get();
kpigroupitems.forEach(data => { this.KPIGroupOptions.push({ key: data.Id, text: `${data.Title}` }); });
console.log(kpigroupitems);
// let kpiparameter = await sp.web.lists.getByTitle("KPI_Information").items.select("KPIparameter").get();
let kpiparameter = await sp.web.lists.getByTitle('KPI_Information').fields.getByInternalNameOrTitle("KPIparameter").select(`Choices,ID`).get();
//kpiparameter['Choices'].forEach(data => { this.KPIGroupOptions.push({ key: data.Id, text: `${data.Title}` }); });
kpiparameter['Choices'].forEach(data => { this.KPIParameterOptions.push({ key: data, text: data }); });
console.log(kpigroupitems);
}
private onDropDownChange = (fieldName: string, event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, item: IDropdownOption) => {
try {
switch (fieldName) {
case 'kpigroup': this.setState({ KPIGroup: item }, () => { this.fetchkplsubgroup(item); });
break;
case 'kpisubgroup': this.setState({ KPISubGroup: item }, () => { this.fetchkplprinciple(item); });
break;
case 'kpiprinciple': this.setState({ KPIPrinciple: item }, () => { this.changekpi(); });
break;
case 'kpiparameter': this.setState({ KPIParameter: item });
break;
}
} catch (error) {
console.log(`${fieldName} Change Error`);
}
}
private onTextChange = (fieldName: string, event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
try {
switch (fieldName) {
case 'kpisubtitle': this.setState({ KPISubTitle: event.target['value'] });
break;
case 'kpishortdes': this.setState({ KPIShortDis: event.target['value'] });
break;
case 'kpiadddis': this.setState({ KPIAddDis: event.target['value'] });
break;
}
} catch (error) {
console.log(`${fieldName} Change Error`);
}
}
private changekpi() {
//this.KPISubGroupOptions = [];
//this.KPISubGroupOptions = [];
}
private async fetchkplprinciple(item: IDropdownOption) {
//let kpiprincipleitems = await sp.web.lists.getByTitle("KPISubGroup").items.select("*,KPIGroupTitle/Title,KPIGroupTitle/Id").filter("KPIGroupTitleId eq '" + item.key + "'").expand('KPIGroupTitle').get();
let kpiprincipleitems = await sp.web.lists.getByTitle("KPIPrinciple").items.select("*,KPISunGroupTitle/Title,KPISunGroupTitle/Id").filter("KPISunGroupTitleId eq '" + item.key + "'").expand('KPISunGroupTitle').get();
kpiprincipleitems.forEach(data => { this.KPIPrincipleOptions.push({ key: data.Id, text: `${data.Title}` }); });
console.log(kpiprincipleitems);
//this.KPIPrincipleOptions = [];
}
private async save() {
var data = {
"Attachments": this.state.Attachments
};
let dataobject = {
//KPIGroupTitle: '',
KPIGroupTitleId: this.state.KPIGroup ? this.state.KPIGroup.key : 0,
KPISubGroupTitleId: this.state.KPISubGroup ? this.state.KPISubGroup.key : 0,
KPIPrincipleTitleId: this.state.KPIPrinciple ? this.state.KPIPrinciple.key : 0,
KPIparameter: this.state.KPIParameter ? this.state.KPIParameter.key : '',
KPISubTitle: this.state.KPISubTitle,
KPIShortDescription: this.state.KPIShortDis,
KPIAdditionalDescription: this.state.KPIAddDis,
}
await sp.web.lists.getByTitle("KPI_Information").items.add(dataobject).then(res => {
console.log('All Items Added');
res.item.attachmentFiles.add(data.Attachments.name, data.Attachments);
});
}
private async read(item: string) {
const newID = await sp.web.lists.getByTitle("KPI_Information").items.select("*, KPIGroupTitle/Title,KPIGroupTitle/Id,KPISubGroupTitle/Title,KPISubGroupTitle/Id,KPIPrincipleTitle/Title,KPIPrincipleTitle/Id").filter(`KPISubTitle eq '${item}'`).expand("KPIGroupTitle,KPISubGroupTitle,KPIPrincipleTitle").get().then((result) => {
this.setState({
KPISubTitle: result[0].KPISubTitle,
KPIShortDis: result[0].KPIShortDescription,
KPIAddDis: result[0].KPIAdditionalDescription,
KPIGroup: result[0].KPIGroupTitle ? { key: result[0].KPIGroupTitle.Id, text: result[0].KPIGroupTitle.Title } : undefined,
KPISubGroup: result[0].KPISubGroupTitle ? { key: result[0].KPISubGroupTitle.Id, text: result[0].KPISubGroupTitle.Title } : undefined,
KPIPrinciple: result[0].KPIPrincipleTitle ? { key: result[0].KPIPrincipleTitle.Id, text: result[0].KPIPrincipleTitle.Title } : undefined,
KPIParameter: result[0].KPIparameter ? { key: result[0].KPIparameter, text: result[0].KPIparameter } : undefined,
});
});
console.log(newID);
}
private async delete() {
if (this.state.KPISubTitle !== '' || this.state.KPISubTitle !== null) {
const newID = await sp.web.lists.getByTitle("KPI_Information").select("*").items.filter(`KPISubTitle eq '${this.state.KPISubTitle}'`).get();
await sp.web.lists.getByTitle("KPI_Information").items.getById(newID[0].Id).delete().then(result => {
console.log("Item deleted");
});
}
}
private async update() {
const newID = await sp.web.lists.getByTitle("KPI_Information").select("*").items.filter(`KPISubTitle eq '${this.state.KPISubTitle}'`).get();
await sp.web.lists.getByTitle('KPI_Information').items.getById(newID[0].Id).update({
KPIShortDescription: this.state.KPIShortDis,
KPIAdditionalDescription: this.state.KPIAddDis,
KPISubTitle: this.state.KPISubTitle,
}).then(async (result: any) => {
//resolve(result);
console.log("my update result" + result);
});
}
private handleFileUpload = (event) => {
var file = event.target.value;
var file2 = (document.getElementById("studyAttachment") as HTMLInputElement).files[0];
var fileName = file.split("\\").pop();
document.getElementById("fileName").innerHTML = fileName;
var reader = new FileReader();
var dataURL;
reader.onload = () => {
dataURL = reader.result;
console.log(dataURL)
};
console.log("fileInfo: " + fileName);
reader.readAsDataURL(file2);
this.setState({ Attachments: new File([dataURL], file2.name, { type: file2.type }) });
}
public render(): React.ReactElement<ISoxTbScopingCheckerProps> {
return (
<div className="container" >
<>
<React.Fragment>
<div className="input-container">
<div className="white-box-container add-process-form">
<div className="row">
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<Dropdown
label="KPI Group"
selectedKey={this.state.KPIGroup ? this.state.KPIGroup.key : ''}
options={this.KPIGroupOptions}
onChange={this.onDropDownChange.bind(this, 'kpigroup')}
//errorMessage={this.state.GLaccountcaptionMessage}
//required
//disabled={reviewType}
/>
</div>
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<Dropdown
label="KPI Sub Group"
selectedKey={this.state.KPISubGroup ? this.state.KPISubGroup.key : ''}
options={this.KPISubGroupOptions}
onChange={this.onDropDownChange.bind(this, 'kpisubgroup')}
//errorMessage={this.state.GLaccountcaptionMessage}
//required
/>
</div>
</div>
<div className="row">
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<Dropdown
label="KPI Principle"
selectedKey={this.state.KPIPrinciple ? this.state.KPIPrinciple.key : ''}
options={this.KPIPrincipleOptions}
onChange={this.onDropDownChange.bind(this, 'kpiprinciple')}
//errorMessage={this.state.GLaccountcaptionMessage}
//required
//disabled={reviewType}
/>
</div>
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<Dropdown
label="KPI Parameter"
selectedKey={this.state.KPIParameter ? this.state.KPIParameter.key : ''}
options={this.KPIParameterOptions}
onChange={this.onDropDownChange.bind(this, 'kpiparameter')}
//errorMessage={this.state.GLaccountcaptionMessage}
//required
/>
</div>
</div>
<div className="row">
<div >
<TextField
label="Search By Text"
//onChange={this.onDropDownChange.bind(this, 'glaccount')}
//errorMessage={this.state.GLaccountcaptionMessage}
//required
//disabled={reviewType}
/>
</div>
</div>
<div className="row">
<div >
<TextField
label="KPI Sub Title"
value={this.state.KPISubTitle}
//options={''}
onChange={this.onTextChange.bind(this, 'kpisubtitle')}
//errorMessage={this.state.GLaccountcaptionMessage}
//required
/>
</div>
</div>
<div className="row">
<div >
<TextField
label="KPI Short Description"
placeholder='KPI Short Description'
value={this.state.KPIShortDis}
//required
multiline
maxLength={30000}
autoAdjustHeight
resizable={false}
onChange={this.onTextChange.bind(this, 'kpishortdes')}
/>
</div>
</div>
<div className="row">
<div className='ms-lgPush1'>
<TextField
label="KPI Additional Description"
placeholder='KPI Additional Description'
value={this.state.KPIAddDis}
//required
multiline
maxLength={30000}
autoAdjustHeight
resizable={false}
onChange={this.onTextChange.bind(this, 'kpiadddis')}
/>
</div>
<br />
</div>
<br />
<div className="row">
<label>Attachment if any:</label>
<div className="custom-file">
<input type="file" className="custom-file-input" id="studyAttachment" onChange={this.handleFileUpload} required />
<label className="custom-file-label" id="fileName">Choose file</label>
</div>
</div>
<br />
</div>
</div>
</React.Fragment>
</>
<PrimaryButton
style={{ margin: "0px 15px 0px 0px" }}
text="Create"
onClick={() => this.save()}
/>
<PrimaryButton
style={{ margin: "0px 15px 0px 0px" }}
text="Read"
onClick={() => this.read(this.state.KPISubTitle)}
/>
<PrimaryButton
style={{ margin: "0px 15px 0px 0px" }}
text="Update"
onClick={() => this.update()}
/>
<PrimaryButton
style={{ margin: "0px 15px 0px 0px" }}
text="Delete"
onClick={() => this.delete()}
/>
</div >
);
}
private async fetchkplsubgroup(item: IDropdownOption) {
this.KPISubGroupOptions = [];
const results = await sp.web.lists.getByTitle("KPISubGroup").items.select("*,KPIGroupTitle/Title,KPIGroupTitle/Id").filter("KPIGroupTitleId eq '" + item.key + "'").expand('KPIGroupTitle').get();
//result.forEach(data => { this.KPISubGroupOptions.push({ key: data.Id, text: `${data.Title}` }); });
results.forEach(data => {
this.KPISubGroupOptions.push({ key: data.Id, text: data.Title, data: data });
});
console.log(this.KPISubGroupOptions);
}
}
I nee when i select value in KPI Group Dropdown then value in KPI Sub Group Dropdown value show. but After i select value in KPI Group Dropdown value not show in KPI Sub Group, After i select value second time in KPI Grop Dropdown then value in KPI Sub Group show previous values not show current values in KPI Sub Group.
