honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Mock Data Services for Workbench

This commit is contained in:
petkir 2020-06-22 23:35:21 +02:00
parent 4b089918d8
commit 940ccbf7be
5 changed files with 181 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
samples/react-kanban-board/src/webparts/kanbanBoard/KanbanBoardWebPart.ts
View File

@ -24,6 +24,9 @@ import { mergeBucketsWithChoices } from './components/helper';
import { PropertyFieldMessage } from '@pnp/spfx-property-controls/lib/PropertyFieldMessage';
import { MessageBarType } from 'office-ui-fabric-react';
import { cloneDeep } from '@microsoft/sp-lodash-subset';
import { ISPKanbanService } from './services/ISPKanbanService';
import SPKanbanService from './services/SPKanbanService';
import MockKanbanService from './services/MockKanbanService';
export interface IKanbanBoardWebPartProps {
hideWPTitle: boolean;
@ -36,6 +39,7 @@ export interface IKanbanBoardWebPartProps {
export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoardWebPartProps> {
private kanbanComponent = null;
private dataService: ISPKanbanService;
private statekey: string = Date.now().toString();
public onInit(): Promise<void> {
@ -44,6 +48,11 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
sp.setup({
spfxContext: this.context
});
if (Environment.type == EnvironmentType.Local || Environment.type == EnvironmentType.Test) {
this.dataService= new MockKanbanService();
} else {
this.dataService = new SPKanbanService();
}
});
}
@ -134,7 +143,6 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
})
]
});
if (this.properties.listId && this.properties.buckets && this.properties.buckets.length > 1) {
generalgroups.push(
{
@ -152,9 +160,6 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
}
);
}
propertypages.push({
groups: generalgroups
});
@ -179,10 +184,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
]
});
});
}
return {
pages: propertypages
};
@ -201,54 +203,28 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
const bucketindex: number = +propertyPath.split('_')[1];
newbuckets[bucketindex] = newValue;
//maybe better to make a array control (Update)
this.onPropertyPaneFieldChanged("buckets", oribuckets, newbuckets);
this.properties.buckets = newbuckets;
this.context.propertyPane.refresh();
this.render();
this.render();
} else {
throw "propertypath is not a bucket";
}
}
private refreshBucket(): void {
const listId = this.properties.listId;
if (!listId || listId.length === 0) { return; }
sp.web.lists.getById(listId).fields.getByInternalNameOrTitle("Status").get()
.then(status => {
const cols: string[] = status.Choices.map((val, index) => {
return val;
});
//matching with existing configured buckets
const currentbuckets: IKanbanBucket[] = mergeBucketsWithChoices(this.properties.buckets, cols);
if (!currentbuckets) {
return;
}
this.properties.buckets = currentbuckets;
this.context.propertyPane.refresh();
});
this.dataService.getBuckets(listId).then((x) => {
const currentbuckets: IKanbanBucket[] = mergeBucketsWithChoices(this.properties.buckets, x);
if (!currentbuckets) {
return;
}
this.properties.buckets = currentbuckets;
this.context.propertyPane.refresh();
}
);
}
protected onPropertyPaneConfigurationStart() {
// Use the list template ID to locate both the old style task lists (107) and newer task lists (171)
/*
sp.web.lists.filter("BaseTemplate eq 171 or BaseTemplate eq 107").select("Title").get().then(res => {
this.properties.lists = res.map((val, index) => {
return {
key: val.Title,
text: val.Title
};
});
this.context.propertyPane.refresh();
});
*/
}
}

102
samples/react-kanban-board/src/webparts/kanbanBoard/components/KanbanBoardV2.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import styles from './KanbanBoardV2.module.scss';
import * as strings from 'KanbanBoardWebPartStrings';
import { DisplayMode, Guid } from '@microsoft/sp-core-library';
import { DisplayMode, Guid, Environment, EnvironmentType } from '@microsoft/sp-core-library';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import { WebPartContext } from '@microsoft/sp-webpart-base';
@ -12,6 +12,9 @@ import KanbanComponent from '../../../kanban/KanbanComponent';
import { findIndex, clone, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset';
import { sp } from '@pnp/sp';
import { mergeBucketsWithChoices } from './helper';
import { ISPKanbanService } from '../services/ISPKanbanService';
import SPKanbanService from '../services/SPKanbanService';
import MockKanbanService from '../services/MockKanbanService';
export interface IKanbanBoardV2Props {
hideWPTitle: boolean;
@ -35,6 +38,7 @@ export interface IKanbanBoardV2State {
export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props, IKanbanBoardV2State> {
private choices: string[] = [];
private dataService: ISPKanbanService;
constructor(props: IKanbanBoardV2Props) {
super(props);
@ -46,6 +50,11 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
};
}
public componentDidMount(): void {
if (Environment.type == EnvironmentType.Local || Environment.type == EnvironmentType.Test) {
this.dataService= new MockKanbanService();
} else {
this.dataService = new SPKanbanService();
}
this._getData();
}
public shouldComponentUpdate(nextProps: IKanbanBoardV2Props, nextState: IKanbanBoardV2State): boolean {
@ -66,16 +75,7 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
if (!isEqual(this.state.buckets, currentPropBuckets)) {
this.setState({ buckets: cloneDeep(currentPropBuckets) });
}
/*
const currentbuckets: IKanbanBucket[] = mergeBucketsWithChoices(this.props.configuredBuckets, this.choices);
console.log(this.props.configuredBuckets);
console.log(currentbuckets);
console.log(this.state.buckets);
if (!isEqual(this.state.buckets, currentbuckets)) {
this.setState({ buckets: currentbuckets });
}*/
}
public render(): React.ReactElement<IKanbanBoardV2Props> {
@ -130,14 +130,13 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
const elementsIndex = findIndex(this.state.tasks, element => element.taskId == taskId);
let newArray = [...this.state.tasks]; // same as Clone
newArray[elementsIndex].bucket = targetBucket.bucket;
sp.web.lists.getById(this.props.listId).items.getById(+taskId).update({
Status: targetBucket.bucket
}).then(res => {
console.log("Task updated");
this.setState({ tasks: newArray });
}).catch(error=> {
this.setState({ errorMessage: 'Error Update Task Item' });
});
this.dataService.updateTaskBucketMove(this.props.listId, +taskId, targetBucket.bucket)
.then(res => {
console.log("Task updated");
this.setState({ tasks: newArray });
}).catch(error => {
this.setState({ errorMessage: 'Error Update Task Item' });
});
}
@ -149,59 +148,24 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
this.setState({ isConfigured: false, loading: false });
} else {
const listId: string = this.props.listId;
sp.web.lists.getById(listId).fields.getByInternalNameOrTitle("Status").get()
.then(status => {
this.choices = status.Choices.map((val, index) => {
return val;
this.dataService.getBuckets(listId).then((choices) => {
this.choices = choices;
const currentbuckets: IKanbanBucket[] = mergeBucketsWithChoices(this.props.configuredBuckets, this.choices);
if (!currentbuckets) {
this.setState({ isConfigured: false, loading: false, errorMessage: 'No Buckets found' });
return;
}
this.dataService.getAllTasks(listId).then((tasks) => {
this.setState({
isConfigured: true,
loading: false,
errorMessage: undefined,
buckets: currentbuckets,
tasks: tasks
});
//matching with existing configured buckets
const currentbuckets: IKanbanBucket[] = mergeBucketsWithChoices(this.props.configuredBuckets, this.choices);
if (!currentbuckets) {
this.setState({ isConfigured: false, loading: false, errorMessage: 'No Buckets found' });
return;
}
const odatafiels: string[] = ['AssignedTo/Id', 'AssignedTo/Title', 'AssignedTo/Name', 'AssignedTo/EMail',
'ID', 'Title', 'Status', 'Priority', 'PercentComplete', 'Body'
];
sp.web.lists.getById(listId).items
.select(odatafiels.join(','))
.expand('AssignedTo').getAll().then(res => {
const tasks: IKanbanTask[] = res.map((x) => {
return {
taskId: '' + x.ID,
title: x.Title,
htmlDescription: x.Body,
assignedTo: (x.AssignedTo && (x.AssignedTo).length === 1) ?
{
text: x.AssignedTo[0].Title
}
: undefined,
priority: x.Priority,
bucket: x.Status,
mamagedProperties: [
{
name: 'PercentComplete',
displayName: strings.PercentComplete,
type: KanbanTaskMamagedPropertyType.percent,
value: x.PercentComplete
}
]
};
});
this.setState({
isConfigured: true,
loading: false,
errorMessage: undefined,
buckets: currentbuckets,
tasks: tasks
});
});
});
});
this.setState({ isConfigured: true, loading: true });
}

8
samples/react-kanban-board/src/webparts/kanbanBoard/services/ISPKanbanService.ts Normal file
View File

@ -0,0 +1,8 @@
import { IKanbanTask } from "../../../kanban/IKanbanTask";
export interface ISPKanbanService {
updateTaskBucketMove(listId:string,taskId: number, bucket: string): Promise<boolean>;
getAllTasks(listId:string,): Promise<IKanbanTask[]>;
getBuckets(listId:string,): Promise<string[]>;
}

61
samples/react-kanban-board/src/webparts/kanbanBoard/services/MockKanbanService.ts Normal file
View File

@ -0,0 +1,61 @@
import { ISPKanbanService } from "./ISPKanbanService";
import "@pnp/polyfill-ie11";
import { sp } from '@pnp/sp';
import { IKanbanTask, KanbanTaskMamagedPropertyType } from "../../../kanban/IKanbanTask";
import * as strings from 'KanbanBoardWebPartStrings'
export default class MockKanbanService implements ISPKanbanService {
public updateTaskBucketMove(listid: string, taskId: number, bucket: string): Promise<boolean> {
return new Promise((resolve) => {
setTimeout(() => resolve(true), 1000);
});
}
public getAllTasks(listId: string): Promise < IKanbanTask[] > {
const data=[1,2,3,4];
const tasks: IKanbanTask[] = data.map((x) => {
return {
taskId: 'tid' + x,
title: 'Title'+x,
htmlDescription: '<p>Body <b>Bold</b></p>',
assignedTo:
{
text: 'Person '+x
},
priority: 'Prio'+x,
bucket: 'Status'+x,
mamagedProperties: [
{
name: 'PercentComplete',
displayName: strings.PercentComplete,
type: KanbanTaskMamagedPropertyType.percent,
value: 10*x
}
]
};
});
return new Promise((resolve) => {
setTimeout(() => resolve(tasks), 1000);
});
}
public getBuckets(listId: string): Promise < string[] > {
return new Promise((resolve) => {
setTimeout(() => resolve([
'Status1',
'Status2',
'Status3',
'Status4',
'Status5',
]), 1000);
});
}
}

59
samples/react-kanban-board/src/webparts/kanbanBoard/services/SPKanbanService.ts Normal file
View File

@ -0,0 +1,59 @@
import { ISPKanbanService } from "./ISPKanbanService";
import "@pnp/polyfill-ie11";
import { sp } from '@pnp/sp';
import { IKanbanTask, KanbanTaskMamagedPropertyType } from "../../../kanban/IKanbanTask";
import * as strings from 'KanbanBoardWebPartStrings'
export default class SPKanbanService implements ISPKanbanService {
public updateTaskBucketMove(listid: string, taskId: number, bucket: string): Promise<boolean> {
return sp.web.lists.getById(listid).items.getById(+taskId).update({
Status: bucket
}).then(() => { return true; })
}
public getAllTasks(listId: string, ): Promise<IKanbanTask[]> {
const odatafiels: string[] = ['AssignedTo/Id', 'AssignedTo/Title', 'AssignedTo/Name', 'AssignedTo/EMail',
'ID', 'Title', 'Status', 'Priority', 'PercentComplete', 'Body'
];
return sp.web.lists.getById(listId).items
.select(odatafiels.join(','))
.expand('AssignedTo').getAll().then(res => {
const tasks: IKanbanTask[] = res.map((x) => {
return {
taskId: '' + x.ID,
title: x.Title,
htmlDescription: x.Body,
assignedTo: (x.AssignedTo && (x.AssignedTo).length === 1) ?
{
text: x.AssignedTo[0].Title
}
: undefined,
priority: x.Priority,
bucket: x.Status,
mamagedProperties: [
{
name: 'PercentComplete',
displayName: strings.PercentComplete,
type: KanbanTaskMamagedPropertyType.percent,
value: x.PercentComplete
}
]
};
});
return tasks;
});
}
public getBuckets(listId: string, ): Promise<string[]> {
return sp.web.lists.getById(listId).fields.getByInternalNameOrTitle("Status").get()
.then(status => status.Choices.map((val, index) => {
return val;
}));
}
}