import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneDropdown,
PropertyPaneToggle,
PropertyPaneSlider
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import * as jQuery from 'jquery';
import * as pnp from 'sp-pnp-js';
import 'jqueryui';
import{IListItem} from './IListItem';
import styles from './HellowWebpartWebPart.module.scss';
import * as strings from 'HellowWebpartWebPartStrings';
export interface IHellowWebpartWebPartProps {
description: string;
dropdown:string;
}
export interface ISPList {
Id: number;
Title: string;
Salary: string;
Company:string;
Department:string;
}
export default class HellowWebpartWebPart extends BaseClientSideWebPart<IHellowWebpartWebPartProps> {
public render(): void {
this.domElement.innerHTML =`
<div class="${ styles.container }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">CRUD operations</span>
<p class="${ styles.subTitle }">No Framework</p>
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">Item id</div><div class="${ styles.column }"><input type="text" class="${styles.description} itemid"></div>
</div>
<div class="${ styles.row }">
<div class="${ styles.column }">Name</div><div class="${ styles.column }"><input type="text" class="${styles.description} name"></div>
</div>
<div class="${ styles.row }">
<div class="${ styles.column }">Salary</div><div class="${ styles.column }"><input type="text" class="${styles.description} salary"></div>
</div>
<div class="${ styles.row }">
<div class="${ styles.column }">Company</div><div class="${ styles.column }"><input type="text" class="${styles.description} company"></div>
</div>
<div class="${ styles.row }">
<div class="${ styles.column }">Department</div><div class="${ styles.column }"><input type="text" class="${styles.description} department"></div>
</div>
</div>
<br/>
<div class='itemTable'>
</div>
<br/>
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
<button class="${styles.button} create-Button">
<span class="${styles.label}">Create item</span>
</button>
<button class="${styles.button} read-Button">
<span class="${styles.label}">Read item</span>
</button>
<button class="${styles.button} update-Button">
<span class="${styles.label}">Update item</span>
</button>
<button class="${styles.button} delete-Button">
<span class="${styles.label}">Delete item</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>`;
this.setButtonsEventHandlers();
}
private setButtonsEventHandlers(): void
{
const webPart: HellowWebpartWebPart = this;
jQuery(".create-Button").click(function()
{
webPart.createItem();
});
jQuery(".update-Button").click(function()
{
webPart.updateItem();
});
jQuery(".delete-Button").click(function()
{
webPart.deleteItem();
});
jQuery(".read-Button").click(function()
{
webPart.readItem();
});
webPart.readItem();
}
private createItem(): void
{
const webPart: HellowWebpartWebPart = this;
pnp.sp.web.lists.getByTitle("Employee").items.add(
{
Title:jQuery('.name').val(),
Salary:jQuery('.salary').val(),
Company:jQuery('.company').val(),
Department:jQuery('.department').val()
}).then(function(response)
{
webPart.readItem();
alert("Item Added Succes fully")
}).catch(function(exception){
alert("Something went wrong :"+exception);
});
}
private readItem(): void
{
const webPart: HellowWebpartWebPart = this;
pnp.sp.web.lists.getByTitle("Employee").items.getAll().then(function(response)
{
let items: ISPList[]=response;
let html: string = '<table class="TFtable" border=1 width=style="bordercollapse: collapse;">';
html += `<th></th><th>ProfileId</th><th>Name</th><th>Salary</th><th>Company</th><th>Department</th>`;
if (items.length>0)
{
items.forEach((item: ISPList) => {
html += `
<tr>
<td><input type="radio" id="ProfileId" class='profileid' name="ProfileId" value="${item.Id}"> <br> </td>
<td>${item.Id}</td>
<td>${item.Title}</td>
<td>${item.Salary}</td>
<td>${item.Company}</td>
<td>${item.Department}</td>
</tr>
`;
});
}
else
{
html +="No records...";
}
html += `</table>`;
jQuery('.itemTable').html(html);
jQuery('.profileid').click(function()
{
webPart.readListItemById(jQuery(this).val());
});
}).catch(function(exception){
alert("Something went wrong :"+exception);
});
}
private readListItemById(itemid:number):void
{
pnp.sp.web.lists.getByTitle("Employee").items.getById(itemid).get().then(function(response)
{
let item:ISPList=response;
jQuery('.itemid').val(item.Id),
jQuery('.name').val(item.Title),
jQuery('.salary').val(item.Salary),
jQuery('.company').val(item.Company),
jQuery('.department').val(item.Department)
}).catch(function(exception){
alert("Something went wrong :"+exception);
});
}
private updateItem(): void
{
const webPart: HellowWebpartWebPart = this;
pnp.sp.web.lists.getByTitle("Employee").items.getById(jQuery('.itemid').val()).update(
{
Title:jQuery('.name').val(),
Salary:jQuery('.salary').val(),
Company:jQuery('.company').val(),
Department:jQuery('.department').val()
}).then(function(response)
{
webPart.readItem();
alert("Item updated Succesfully");
}).catch(function(exception){
alert("Something went wrong :"+exception);
});
} private deleteItem(): void
{
const webPart: HellowWebpartWebPart = this;
pnp.sp.web.lists.getByTitle("Employee").items.getById(jQuery('.itemid').val()).delete().then(function(response)
{
webPart.readItem();
alert("Item deleted Succesfully");
}).catch(function(exception){
alert("Something went wrong :"+exception);
});;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
}),
PropertyPaneDropdown('dropdown', {
label: "City Name",
options:[{key:'1',text:'Saharanpur'},
{key:'2',text:'Banglore'},
{key:'3',text:'Meerut'},
{key:'4',text:'New Delhi'},
{key:'5',text:'Agra'}]
}),
PropertyPaneToggle('toggle',{
label:"Toggle button"
}),
PropertyPaneSlider('Slider',{
label:"Slider",min:1,max:10
})
]
}
]
}
]
};
}
}
