Stylesheet
import * as React from 'react';
import styles from './Employeespotlight.module.scss';
import { IEmployeespotlightProps } from './IEmployeespotlightProps';
import { escape } from '@microsoft/sp-lodash-subset';
import * as $ from 'jquery';
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { SliderHelper } from './Helper';
export interface SpotlightDetails {
userDisplayName: string;
userEmail: string;
userProfilePic: string;
description: string;
designation?: string;
}
export interface IStateEmployeeSlider {
value:SpotlightDetails[];
}
var result=[];
export interface ResponceDetails {
title: string;
id: string;
}
export default class Employeespotlight extends React.Component {
private defaultProfileImageUrl: string = "/_layouts/15/userphoto.aspx?size=L";
private helper: SliderHelper = new SliderHelper();
private sliderControl: any = null;
constructor(props: IEmployeespotlightProps, state: IStateEmployeeSlider) {
super(props);
this.state = {
value: []
};
}
public GetUserData(){
let url = `/_api/web/lists/GetByTitle('UserDetails')/items?$select=ID,DisplayName,Designation,Description,Title,UserPickerData/EMail&$expand=UserPickerData/Id&$orderby=Id desc`;
this.getData(this.props.context, url).then((data) => {
data.value.forEach(element => {
var email = element["UserPickerData"]["EMail"];
var id = element["ID"];
let userImage = "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='i:0%23.f|membership|" + email + "'";
this.getData(this.props.context, userImage).then((response) => {
var displayName = response["DisplayName"];
var profilePicture = response["PictureUrl"] != null && response["PictureUrl"] != undefined ? (response["PictureUrl"]).replace("MThumb", "LThumb") : this.defaultProfileImageUrl;
profilePicture = '/_layouts/15/userphoto.aspx?accountname=' + displayName + '&size=M&url=' + profilePicture.split("?")[0];
result.push({
DisplayName: element["DisplayName"],
Designation:element["Designation"],
Description: element["Description"],
userProfilePic: profilePicture
});
this.setState({ value: result });
});
});
});
}
componentDidMount(): void {
this.GetUserData()
}
componentDidUpdate(): void {
var _that=this;
setTimeout(function(){
_that.helper.moveSlides()
}, 5000);
this.sliderControl = setInterval(this.helper.startAutoPlay, 20 * 1000);
$(document).on("click", "." + styles.prev, (event) => {
event.preventDefault();
this.helper.moveSlides(-1);
});
$(document).on("click", "." + styles.next, (event) => {
event.preventDefault();
this.helper.moveSlides(1);
});
$(document).on('mouseenter', '.' + styles.containers, () => {
clearInterval(this.sliderControl);
}).on('mouseleave', '.' + styles.containers, () => {
var carouselSpeed: number = 20 * 1000;
this.sliderControl = setInterval(this.helper.startAutoPlay, carouselSpeed);
});
}
public render(): React.ReactElement {
const {
description,
isDarkTheme,
environmentMessage,
hasTeamsContext,
userDisplayName
} = this.props;
return (
);
}
public getData(context: WebPartContext, url: string): Promise {
var url = `${context.pageContext.web.absoluteUrl}${url}`
try {
return context.spHttpClient.get(url, SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
return response.json();
});
}
catch (e) {
return e;
}
}
}
const MyEmpSlider = (props) => {
const Bindvalue = props.bindoutput.map((Outfile,index) =>
<>
![]()
);
return (
<>
{Bindvalue}
);
};
{ this.state.value.length>0 && })
})
{Outfile.DisplayName}
{Outfile.Designation}
{Outfile.Description}
Comments
Post a Comment