-
diff --git a/src/webparts/clbHome/components/ChampionsActivities.tsx b/src/webparts/clbHome/components/ChampionsActivities.tsx
new file mode 100644
index 00000000..12476cac
--- /dev/null
+++ b/src/webparts/clbHome/components/ChampionsActivities.tsx
@@ -0,0 +1,453 @@
+import { Checkbox, Icon, Label, SearchBox, Spinner, SpinnerSize } from '@fluentui/react';
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+import * as LocaleStrings from 'ClbHomeWebPartStrings';
+import React, { Component } from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import ToolkitProvider, { ToolkitContextType } from 'react-bootstrap-table2-toolkit';
+import commonServices from '../Common/CommonServices';
+import * as stringConstants from "../constants/strings";
+import styles from "../scss/ManageApprovals.module.scss";
+
+export interface IChampionPendingEvent {
+ Champion: string;
+ Email: string;
+ Event: string;
+ Date: Date;
+ Points: number;
+ Notes: string;
+ EventActivityId: number;
+}
+export interface ChampionsActivitiesState {
+ championPendingEvents: IChampionPendingEvent[];
+ filteredChampionPendingEvents: IChampionPendingEvent[];
+ showSpinner: boolean;
+ selectedIds: Array
- ![{LocaleStrings.BackButton}]({require("../assets/CMPImages/BackIcon.png")})
- { this.props.onClickAddmember(this.state.list); }}
- title={LocaleStrings.CMPBreadcrumbLabel}
- >
- {LocaleStrings.CMPBreadcrumbLabel}
-
-
- {LocaleStrings.ManageApprovalsPageTitle}
-
+
- { this.props.onClickAddmember(this.state.list); }}
- title={LocaleStrings.CMPBreadcrumbLabel}
- >
- {LocaleStrings.CMPBreadcrumbLabel}
-
-
- {LocaleStrings.ManageApprovalsPageTitle}
-
{this.state.approveMessage &&
-
+ {this.state.approveMessage &&
+
+ }
+ {this.state.rejectMessage &&
+
+ }
+ {
+ this.setState({
+ filteredChampionPendingEvents: newResult,
+ isAllSelected: newResult.length === this.state.selectedIds.length ? true : false
+ });
+ }
+ }}
+ >
+ {
+ (props: ToolkitContextType) => (
+
+ {this.state.showSpinner && this.state.championPendingEvents.length > 0 &&
+
+
+ );
+ }
+}
diff --git a/src/webparts/clbHome/components/ChampionsCards.tsx b/src/webparts/clbHome/components/ChampionsCards.tsx
index c54f7031..1d398fbc 100644
--- a/src/webparts/clbHome/components/ChampionsCards.tsx
+++ b/src/webparts/clbHome/components/ChampionsCards.tsx
@@ -10,7 +10,7 @@ import Row from 'react-bootstrap/Row';
import Table from 'react-bootstrap/Table';
import { ComboBox, IComboBox, IComboBoxOption } from '@fluentui/react/lib/ComboBox';
import { Dialog } from '@fluentui/react/lib/Dialog';
-import { Icon, initializeIcons, Label } from 'office-ui-fabric-react';
+import { Icon, initializeIcons } from 'office-ui-fabric-react';
import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import moment from 'moment';
import * as constants from '../constants/strings';
@@ -20,7 +20,6 @@ import '../scss/Championview.scss';
import '../scss/Champions.scss';
import * as _ from "lodash";
import commonServices from '../Common/CommonServices';
-import * as stringsConstants from "../constants/strings";
initializeIcons();
@@ -37,11 +36,7 @@ interface ChampionsCardsProps {
interface ChampionsCardsState {
isLoaded: boolean;
loadCards: number;
- allUserData: Array
+ {this.state.championPendingEvents.length > 0 &&
+ <>
+
+ )
+ }
+
+ props.searchProps.onSearch(searchedText)}
+ className={styles.approvalsSearchbox}
+ />
+
+ {this.state.selectedIds.length > 0 &&
+
+ }
+
+ }
+
+ 0 && this.state.filteredChampionPendingEvents.length > 10) && this.pagination}
+ wrapperClasses={styles.approvalsTableWrapper}
+ headerClasses={styles.eventsApprovalTableHeader}
+ bodyClasses={styles.eventsApprovalTableBody}
+ noDataIndication={() => (
+
+
+ {this.state.showSpinner ?
+ })
+
+ {this.state.championPendingEvents.length === 0 ?
+ LocaleStrings.NoPendingEventsLabel
+ :
+ LocaleStrings.NoSearchResults
+ }
+
+
+ }
+
+ )}
+ />
+
+
+ {this.state.championPendingEvents.length === 0 ?
+ LocaleStrings.NoPendingEventsLabel
+ :
+ LocaleStrings.NoSearchResults
+ }
+
+
+ }
+
+
+
+
+ }
+
-
+
void;
- showSidebar?: boolean;
callBack?: Function;
siteUrl: string;
}
-export interface lookUp {
- value: string;
- display: string;
-}
export interface ChampionViewState {
siteUrl: string;
type: string;
- teams: Array;
- selectedTeam: string;
validationError: string;
eventid: number;
memberid: number;
points: number;
DateOfEvent: Date;
collection: Array;
+ orderedCollection: Array;
collectionNew: Array;
edetails: Array;
edetailsIds: Array;
- eFlag: boolean;
- optionvalues: Array;
- selectedkey: number;
+ selectedkey: string | number;
isShow: boolean;
- cb: boolean;
- Clb: boolean;
- newMemberId: number;
sitename: string;
inclusionpath: string;
- loading: boolean;
membersInfo: Array;
showValidationError: boolean;
eventUniqueID: number;
+ isMultilineNotes: boolean;
+ notes: string;
+ eventApprovalConfig: string;
+ EventsSubmissionMessage: string;
}
export interface ChampList {
id: number;
@@ -132,7 +118,8 @@ export interface ChampList {
eventid: number;
memberid: number;
Count: number;
- DateOfEvent: any;
+ DateOfEvent: Date;
+ Notes: string;
MemberName: string;
EventName: string;
}
@@ -141,84 +128,107 @@ export interface EventList {
Id: number;
Ecount: number;
}
-export default class ChampionvView extends Component<
- ChampionViewProps,
- ChampionViewState
-> {
- constructor(props: any) {
+export default class ChampionvView extends Component
+{
+ constructor(props: ChampionViewProps) {
super(props);
sp.setup({
- spfxContext: this.props.context,
+ spfxContext: this.props.context as any,
});
- this.getTrackDetailsData = this.getTrackDetailsData.bind(this);
- this.onChange = this.onChange.bind(this);
+
+ //Bind Methods
+ this.getEventApprovalSetting = this.getEventApprovalSetting.bind(this);
+ this.onDateChange = this.onDateChange.bind(this);
this.getListData = this.getListData.bind(this);
this.setPoints = this.setPoints.bind(this);
this.createorupdateItem = this.createorupdateItem.bind(this);
this.options = this.options.bind(this);
this.removeDevice = this.removeDevice.bind(this);
this.getMemberId = this.getMemberId.bind(this);
+ this.onNotesChange = this.onNotesChange.bind(this);
+
+ //Class State object
this.state = {
siteUrl: this.props.siteUrl,
type: "",
- teams: [],
- selectedTeam: "",
validationError: "",
eventid: 0,
memberid: 0,
points: 1,
DateOfEvent: new Date(),
collection: [],
+ orderedCollection: [],
collectionNew: [],
edetails: [],
edetailsIds: [],
- eFlag: false,
- optionvalues: [],
- selectedkey: 0,
+ selectedkey: "",
isShow: false,
- cb: false,
- Clb: false,
- newMemberId: 0,
sitename: siteconfig.sitename,
inclusionpath: siteconfig.inclusionPath,
- loading: true,
membersInfo: [],
showValidationError: false,
- eventUniqueID: 0
+ eventUniqueID: 0,
+ isMultilineNotes: false,
+ notes: "",
+ eventApprovalConfig: "",
+ EventsSubmissionMessage: ""
};
}
- public onChange(d: any) {
+ //Get Member ID of the current user
+ public async componentDidMount() {
+ await this.getMemberId();
+ }
+
+ //Sort the collection by Id column whenever the component is updated
+ public componentDidUpdate(_prevProps: Readonly, prevState: Readonly) {
+ if (prevState.collection !== this.state.collection) {
+ const orderedCollection = _.orderBy(this.state.collection, ["Id"], ["asc"]);
+ this.setState({ orderedCollection: orderedCollection });
+ }
+ }
+
+ //Get approval status from config List
+ public async getEventApprovalSetting() {
+ let commonServiceManager = new CommonServices(
+ this.props.context,
+ this.props.siteUrl
+ );
+ let filterQuery = "Title eq '" + stringConstants.ChampionEventApprovals + "'";
+ const configList: any[] = await commonServiceManager.getItemsWithOnlyFilter(stringConstants.ConfigList, filterQuery);
+ this.setState({ eventApprovalConfig: configList[0].Value });
+ }
+
+ //Method to be called when date is changed from date picker
+ public onDateChange(d: any) {
this.setState({ DateOfEvent: d });
}
//When a new event is added modify the collection to show in the grid
- public addDevice(data: ChampList, saved: any) {
- if (saved === "false") {
- if ((data.type == "" || data.type == "Select Event Type")) {
- this.setState({ showValidationError: true, validationError: LocaleStrings.EventTypeValidationMessage });
- }
- else if ((data.Count > 5 || data.Count < 1)) {
- this.setState({ showValidationError: true, validationError: LocaleStrings.CountValidationMessage });
- }
- else {
- this.setState({ collectionNew: [], showValidationError: false, eventUniqueID: data.id });
- const newBag = this.state.collectionNew.concat(data);
-
- this.setState({
- collectionNew: newBag,
- points: data.Count,
- });
- this.setState({ selectedkey: 0 });
- }
+ public addDevice(data: ChampList) {
+ if ((data.type == "" || data.type == LocaleStrings.EventTypeGridLabelPlaceHolder)) {
+ this.setState({ showValidationError: true, validationError: LocaleStrings.EventTypeValidationMessage, EventsSubmissionMessage: "" });
+ }
+ else if ((data.Count > 5 || data.Count < 1)) {
+ this.setState({ showValidationError: true, validationError: LocaleStrings.CountValidationMessage, EventsSubmissionMessage: "" });
+ }
+ else {
+ this.setState({ collectionNew: [], showValidationError: false, validationError: "", eventUniqueID: data.id });
+ const memberEventsData = this.state.collectionNew.concat(data);
- } else {
- const newBag = this.state.collection.concat(data);
this.setState({
- collection: newBag,
+ EventsSubmissionMessage: "",
+ collectionNew: memberEventsData,
+ points: 1,
+ notes: "",
+ DateOfEvent: new Date(),
+ selectedkey: stringConstants.SelectEventType,
+ type: ""
});
}
}
+
+ //Method for dropdown options
public options() {
let optionArray = [];
let optionArrayIds = [];
@@ -264,7 +274,7 @@ export default class ChampionvView extends Component<
});
let myOptions = [];
- myOptions.push({ key: "Select Event Type", text: "Select Event Type" });
+ myOptions.push({ key: stringConstants.SelectEventType, text: LocaleStrings.EventTypeGridLabelPlaceHolder });
this.state.edetails.forEach((element: any) => {
myOptions.push({ key: element, text: element });
});
@@ -281,14 +291,19 @@ export default class ChampionvView extends Component<
}));
}
- public createorupdateItem() {
- this.setState({ isShow: true });
+ //Method to be called when events are submitted
+ public async createorupdateItem() {
+ await this.getEventApprovalSetting();
+ this.setState({
+ isShow: true,
+ isMultilineNotes: false,
+ eventUniqueID: 0
+ });
let commonServiceManager: commonServices = new commonServices(this.props.context, this.props.siteUrl);
let promiseArr = [];
let memberId = String(this.state.collectionNew[0].memberid);
for (let link of this.state.collectionNew) {
let tmp: Array = null;
- let selectedVal: any = null;
tmp = this.state.edetailsIds;
let scount = link.Count * 10;
let filteredItem = tmp.filter((i) => i.Id === link.eventid);
@@ -296,10 +311,10 @@ export default class ChampionvView extends Component<
let smemberid = String(link.memberid);
let sdoe = link.DateOfEvent;
let stype = link.type;
- let spoints = link.Count * 10;
let oMember = this.state.membersInfo.filter(x => x.Id.toString() == smemberid)[0];
let sMemberName = oMember.FirstName + ' ' + oMember.LastName;
let seventName = this.state.edetailsIds.filter(x => x.Id.toString() == seventid)[0].Title;
+ let sNotes = link.Notes;
if (filteredItem.length != 0) {
scount = link.Count * filteredItem[0].Ecount;
@@ -312,22 +327,28 @@ export default class ChampionvView extends Component<
DateofEvent: sdoe,
Count: scount,
MemberName: sMemberName,
- EventName: seventName
+ EventName: seventName,
+ Notes: sNotes,
+ Status: this.state.eventApprovalConfig === stringConstants.EnabledStatus ? stringConstants.pendingStatus : stringConstants.approvedStatus
};
//create promise array
- promiseArr.push(commonServiceManager.createListItem("Event Track Details", listDefinition));
- this.setState((prevState) => ({
- collectionNew: prevState.collectionNew.filter(
- (d) => d.type === "xxx"
- ),
- }));
+ promiseArr.push(commonServiceManager.createListItem(stringConstants.EventTrackDetailsList, listDefinition));
+ this.setState({
+ collectionNew: [],
+ showValidationError: false,
+ validationError: "",
+ EventsSubmissionMessage: (this.state.eventApprovalConfig === stringConstants.EnabledStatus ?
+ LocaleStrings.EventSubmissionPendingMessage :
+ LocaleStrings.EventsSubmissionSuccessMessage
+ )
+ });
}
}
//Wait for all promise statements to execute and return true
Promise.all(promiseArr).then(
- res => {
- this.getListData(memberId);
+ async () => {
+ await this.getListData(memberId);
this.props.callBack();
this.setState({ isShow: false });
}
@@ -339,42 +360,10 @@ export default class ChampionvView extends Component<
err.statusText
);
});
- this.setState((prevState) => ({
- collectionNew: prevState.collectionNew.filter((d) => d.eventid != 99191),
- }));
- this.setState({ cb: true });
- }
-
- private getTrackDetailsData(memberid: any, eventid: any): boolean {
- let flag = false;
- this.props.context.spHttpClient
- .get(
-
- "/" +
- this.state.inclusionpath +
- "/" +
- this.state.sitename +
- "/_api/web/lists/GetByTitle('Event Track Details')/Items",
- SPHttpClient.configurations.v1
- )
- .then(async (response: SPHttpClientResponse) => {
- if (response.status === 200) {
- await response.json().then((responseJSON: any) => {
- let i = 0;
- if (responseJSON.value != undefined) {
- while (i < responseJSON.value.length) {
- if (responseJSON.value[i].MemberId == memberid) {
- if (responseJSON.value[i].EventId == eventid) return flag;
- }
- i++;
- }
- }
- });
- }
- });
- return flag;
+ this.setState({ collectionNew: [] });
}
+ //Method for getting events from the sharepoint list
private async getListData(memberId: any): Promise {
this.setState({ collection: [] });
const response = await this.props.context.spHttpClient.get(
@@ -382,56 +371,41 @@ export default class ChampionvView extends Component<
this.state.inclusionpath +
"/" +
this.state.sitename +
- "/_api/web/lists/GetByTitle('Event Track Details')/Items?$top=5000&$orderby=DateofEvent desc",
+ "/_api/web/lists/GetByTitle('Event Track Details')/Items?$top=5000&$orderby=DateofEvent desc&$filter= Status eq 'Approved' or Status eq null or Status eq ''",
SPHttpClient.configurations.v1
);
if (response.status === 200) {
await response.json().then((responseJSON: any) => {
let i = 0;
+ const memberEventsData = [];
while (i < responseJSON.value.length) {
if (responseJSON.value[i].MemberId == memberId) {
- if (responseJSON.value[i].MemberId == memberId)
- this.setState((prevState) => ({
- collection: prevState.collection.filter(
- (d) => d.memberid == memberId
- ),
- }));
- let c = {
+ let eventsData = {
id: i,
type: responseJSON.value[i].Title,
eventid: responseJSON.value[i].EventId,
memberid: memberId,
Count: responseJSON.value[i].Count,
- DateOfEvent: responseJSON.value[i].DateofEvent,
+ DateOfEvent: new Date(responseJSON.value[i].DateofEvent),
MemberName: responseJSON.value[i].MemberName,
- EventName: responseJSON.value[i].eventName
-
+ EventName: responseJSON.value[i].eventName,
+ Notes: responseJSON.value[i].Notes
};
- const newBag = this.state.collection.concat(c);
- this.setState({
- collection: newBag,
- eventid: 0,
- });
+ memberEventsData.push(eventsData);
}
i++;
}
+ this.setState({
+ collection: memberEventsData,
+ eventid: 0,
+ });
});
}
}
- public renderFormateDate(collection: any) {
- const formateDateCollection = collection.map((item: any) => {
- return {
- ...item,
- DateOfEvent: moment(item.DateOfEvent).format("MMMM Do, YYYY"),
- };
- });
- return formateDateCollection;
- }
-
//Get Member ID of the current user and the Event Track details from Member List
- public getMemberId(): number {
- this.props.context.spHttpClient
+ public async getMemberId() {
+ await this.props.context.spHttpClient
.get(
"/_api/SP.UserProfiles.PeopleManager/GetMyProperties",
@@ -455,8 +429,8 @@ export default class ChampionvView extends Component<
(d: { Title: string }) =>
d.Title.toLowerCase() === datauser.Email.toLowerCase()
).ID;
- this.setState({ newMemberId: memberDataIds });
- this.setState({ collection: [], membersInfo: datada.value });
+
+ this.setState({ membersInfo: datada.value });
this.props.context.spHttpClient
.get(
@@ -464,7 +438,7 @@ export default class ChampionvView extends Component<
this.state.inclusionpath +
"/" +
this.state.sitename +
- "/_api/web/lists/GetByTitle('Event Track Details')/Items?$top=5000&$orderby=DateofEvent desc",
+ "/_api/web/lists/GetByTitle('Event Track Details')/Items?$top=5000&$orderby=DateofEvent desc&$filter= Status eq 'Approved' or Status eq null or Status eq ''",
SPHttpClient.configurations.v1
)
.then((response1: SPHttpClientResponse) => {
@@ -478,68 +452,53 @@ export default class ChampionvView extends Component<
) {
memberid = memberDataIds;
}
+ let memberEventsData: Array = [];
while (i < responseJSON.value.length) {
if (responseJSON.value[i].MemberId == memberid) {
- if (responseJSON.value[i].MemberId == memberid)
- this.setState((prevState) => ({
- collection: prevState.collection.filter(
- (d) => d.memberid == memberid
- ),
- }));
- let c = {
+ let eventsData: ChampList = {
id: i,
type: responseJSON.value[i].Title,
eventid: responseJSON.value[i].EventId,
memberid: memberid,
Count: responseJSON.value[i].Count,
- DateOfEvent: responseJSON.value[i].DateofEvent,
+ DateOfEvent: new Date(responseJSON.value[i].DateofEvent),
MemberName: responseJSON.value[i].MemberName,
- EventName: responseJSON.value[i].eventName
-
+ EventName: responseJSON.value[i].eventName,
+ Notes: responseJSON.value[i].Notes
};
- const newBag = this.state.collection.concat(c);
- this.setState({
- collection: newBag,
- eventid: 0,
- });
+ memberEventsData.push(eventsData);
}
i++;
}
+ this.setState({
+ collection: memberEventsData,
+ eventid: 0,
+ });
});
});
- return memberDataIds;
});
});
}
});
});
- return 0;
- }
-
- public async componentDidMount() {
- setTimeout(() => {
- let memid: number = 0;
- memid = this.getMemberId();
- this.setState({ loading: false });
- }, 3000);
}
- public handleSelect = (evt: any) => {
- let ca: string = evt.target.outerText;
+ //Method for event type selection from dropdown
+ public handleSelect = (_evt: any, item: IDropdownOption) => {
+ let ca: string = item.text;
let tmp: Array = null;
- let selectedVal: any = null;
tmp = this.state.edetailsIds;
let filteredItem = tmp.filter((i) => i.Title.trim() === ca.trim());
if (filteredItem.length != 0) {
this.setState({
- selectedkey: 1,
+ selectedkey: item.key,
type: filteredItem[0].Title,
eventid: filteredItem[0].Id,
memberid: localStorage["memberid"],
});
} else {
this.setState({
- selectedkey: 0,
+ selectedkey: item.key,
type: ca,
eventid: 0,
memberid: localStorage["memberid"],
@@ -547,6 +506,7 @@ export default class ChampionvView extends Component<
}
}
+ //Method to set event points
private setPoints(e: any): void {
if (!e.target.value || (e.target.value.length <= 1 && parseInt(e.target.value) <= 5)) {
this.setState({ points: e.target.value });
@@ -555,175 +515,227 @@ export default class ChampionvView extends Component<
}
}
+ //Method to be called when notes text is changed in text field control
+ private onNotesChange(_ev: React.FormEvent, newText: string): void {
+ const newMultiline = newText.length > stringConstants.NotesMinCharacterLimit;
+ if (newMultiline) this.setState({ isMultilineNotes: newMultiline });
+ else this.setState({ isMultilineNotes: newMultiline });
+ this.setState({ notes: newText });
+ }
+
+ //Set pagination properties
+ private pagination = paginationFactory({
+ page: 1,
+ sizePerPage: 10,
+ nextPageText: '>',
+ prePageText: '<',
+ showTotal: true,
+ alwaysShowAllBtns: true,
+ withFirstAndLast: false,
+ hideSizePerPage: true,
+ paginationSize: 1
+ });
+
+
+ //Component Render Method
public render() {
+
+ //Method to be called for not displaying chevron down icon in events type dropdown
const onRenderCaretDown = (): JSX.Element => {
return ;
};
+ const eventsColumns = [
+ {
+ dataField: "DateOfEvent",
+ text: LocaleStrings.DateofEventGridLabel,
+ sort: true,
+ formatter: (_cell: any, gridRow: any) => <>{gridRow.DateOfEvent.toDateString().slice(4)}
+ },
+ {
+ dataField: "type",
+ text: LocaleStrings.EventTypeGridLabel,
+ sort: true
+ },
+ {
+ dataField: "Count",
+ text: LocaleStrings.CMPSideBarPointsLabel,
+ sort: true
+ },
+
+ ];
+
return (
{LocaleStrings.TopChampionsLabel}
-
-
-