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

Adde Data Connections

This commit is contained in:
petkir 2020-06-22 22:30:37 +02:00
parent e073836425
commit 4b089918d8
5 changed files with 260 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
samples/react-kanban-board/src/kanban/Readme.md
View File

@ -67,11 +67,14 @@ Unexpected call to method or property access.
# Webpart Steps # Webpart Steps
* DataConnection
** Task missing
* BucketEdit Does not refresh Component
# Webpart Steps Done
* PNP Placeholder Control for Config * PNP Placeholder Control for Config
* PNP WebpartTitle Control * PNP WebpartTitle Control
* DataConnection
* Usage of BucketEdit in pane * Usage of BucketEdit in pane
* PNP Order pane Control * PNP Order pane Control

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

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDom from 'react-dom'; import * as ReactDom from 'react-dom';
import { Version, Guid } from '@microsoft/sp-core-library'; import { Version, Guid, Environment, EnvironmentType } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart, PropertyPaneDropdown } from '@microsoft/sp-webpart-base'; import { BaseClientSideWebPart, PropertyPaneDropdown } from '@microsoft/sp-webpart-base';
import { import {
IPropertyPaneConfiguration, IPropertyPaneConfiguration,
@ -36,221 +36,219 @@ export interface IKanbanBoardWebPartProps {
export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoardWebPartProps> { export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoardWebPartProps> {
private kanbanComponent = null; private kanbanComponent = null;
public onInit(): Promise < void> { private statekey: string = Date.now().toString();
public onInit(): Promise<void> {
return super.onInit().then(_ => { return super.onInit().then(_ => {
sp.setup({
spfxContext: this.context
});
sp.setup({
spfxContext: this.context
}); });
});
}
public render(): void {
/*
const element: React.ReactElement<IKanbanBoardProps > = React.createElement(
KanbanBoard,
{
listTitle: this.properties.listTitle,
webUrl: this.context.pageContext.web.absoluteUrl
}
);
*/
/*
const element: React.ReactElement<IMockKanbanProps > = React.createElement(
MockKanban,
{
}
);
*/
const element: React.ReactElement < IKanbanBoardV2Props > = React.createElement(
KanbanBoardV2,
{
hideWPTitle: this.properties.hideWPTitle,
title: this.properties.title,
displayMode: this.displayMode,
updateProperty: (value: string) => {
this.properties.title = value;
},
context: this.context,
listId: this.properties.listId,
configuredBuckets: this.properties.buckets
}
);
this.kanbanComponent = ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
const propertypages = [];
const generalgroups = [];
generalgroups.push(
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneToggle('hideWPTitle', {
label: 'Hide WP Title',
checked: this.properties.hideWPTitle
}),
PropertyFieldListPicker('listId', {
label: 'Select a list',
selectedList: this.properties.listId,
includeHidden: false,
orderBy: PropertyFieldListPickerOrderBy.Title,
disabled: false,
onPropertyChange: this.listConfigurationChanged.bind(this),
properties: this.properties,
context: this.context,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'listPickerFieldId',
onListsRetrieved: (lists) => {
//TODO Check from TS Definition it should be a string but i get a number
// with Typesafe equal it fails
const alists = lists.filter((l: any) => {
return (l.BaseTemplate === 171 || l.BaseTemplate === 107);
}
);
return alists;
}
})
]
});
if (this.properties.listId && this.properties.buckets && this.properties.buckets.length > 1) {
generalgroups.push(
{
groupName: "Order Buckets",
groupFields: [
PropertyFieldOrder("orderedItems", {
key: "orderedItems",
label: "Ordered Items",
items: this.properties.buckets,
properties: this.properties,
onPropertyChange: this.onPropertyPaneFieldChanged,
onRenderItem: bucketOrder,
})
]
}
);
} }
public render(): void {
/*
propertypages.push({ const element: React.ReactElement<IKanbanBoardProps > = React.createElement(
groups: generalgroups KanbanBoard,
}); {
listTitle: this.properties.listTitle,
if (this.properties.buckets && this.properties.buckets.length > 0) { webUrl: this.context.pageContext.web.absoluteUrl
this.properties.buckets.forEach((b, i) => { }
propertypages.push({ );
key: { i }, */
header: { /*
description: "Bucket Configuration" const element: React.ReactElement<IMockKanbanProps > = React.createElement(
MockKanban,{});
*/
console.log('bucket render webpart');
console.log(this.properties.buckets);
const element: React.ReactElement<IKanbanBoardV2Props> = React.createElement(
KanbanBoardV2,
{
hideWPTitle: this.properties.hideWPTitle,
title: this.properties.title,
displayMode: this.displayMode,
updateProperty: (value: string) => {
this.properties.title = value;
}, },
groups: [{ statekey: this.statekey,
groupName: b.bucketheadline ? b.bucketheadline : b.bucket, context: this.context,
listId: this.properties.listId,
configuredBuckets: this.properties.buckets
}
);
this.kanbanComponent = ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
const propertypages = [];
const generalgroups = [];
generalgroups.push(
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneToggle('hideWPTitle', {
label: 'Hide WP Title',
checked: this.properties.hideWPTitle
}),
PropertyFieldListPicker('listId', {
label: 'Select a list',
selectedList: this.properties.listId,
includeHidden: false,
orderBy: PropertyFieldListPickerOrderBy.Title,
disabled: false,
onPropertyChange: this.listConfigurationChanged.bind(this),
properties: this.properties,
context: this.context,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'listPickerFieldId',
onListsRetrieved: (lists) => {
//TODO Check from TS Definition it should be a string but i get a number
// with Typesafe equal it fails
if (Environment.type == EnvironmentType.Local || Environment.type == EnvironmentType.Test) {
return lists;
} else {
const alists = lists.filter((l: any) => {
return (l.BaseTemplate === 171 || l.BaseTemplate === 107);
});
return alists;
}
}
})
]
});
if (this.properties.listId && this.properties.buckets && this.properties.buckets.length > 1) {
generalgroups.push(
{
groupName: "Order Buckets",
groupFields: [ groupFields: [
PropertyPaneBucketConfigComponent('bucket_' + i, { PropertyFieldOrder("buckets", {
key: 'bucket_' + i, key: "orderedItems",
properties: cloneDeep(b), label: "Ordered Items",
onPropertyChange: this.bucketConfigurationChanged.bind(this) items: this.properties.buckets,
properties: this.properties,
onPropertyChange: this.onPropertyPaneFieldChanged,
onRenderItem: bucketOrder,
}) })
] ]
} }
] );
}); }
propertypages.push({
groups: generalgroups
}); });
if (this.properties.buckets && this.properties.buckets.length > 0) {
this.properties.buckets.forEach((b, i) => {
propertypages.push({
key: { i },
header: {
description: "Bucket Configuration"
},
groups: [{
groupName: b.bucketheadline ? b.bucketheadline : b.bucket,
groupFields: [
PropertyPaneBucketConfigComponent('bucket_' + i, {
key: 'bucket_' + i,
properties: cloneDeep(b),
onPropertyChange: this.bucketConfigurationChanged.bind(this)
})
]
}
]
});
});
}
return {
pages: propertypages
};
} }
return {
pages: propertypages
};
}
private listConfigurationChanged(propertyPath: string, oldValue: any, newValue: any) { private listConfigurationChanged(propertyPath: string, oldValue: any, newValue: any) {
this.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue); this.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
this.refreshBucket(); this.refreshBucket();
} }
private bucketConfigurationChanged(propertyPath: string, oldValue: any, newValue: any) { private bucketConfigurationChanged(propertyPath: string, oldValue: any, newValue: any) {
//its an array part !!!!! //its an array part !!!!!
if (propertyPath.indexOf('bucket_') !== -1) { if (propertyPath.indexOf('bucket_') !== -1) {
const newbuckets: IKanbanBucket[] = cloneDeep(this.properties.buckets); const oribuckets: IKanbanBucket[] = cloneDeep(this.properties.buckets);
const bucketindex: number = +propertyPath.split('_')[1]; const newbuckets: IKanbanBucket[] = cloneDeep(this.properties.buckets);
newbuckets[bucketindex] = newValue; const bucketindex: number = +propertyPath.split('_')[1];
//merge and every else is good newbuckets[bucketindex] = newValue;
// //maybe better to make a array control (Update)
console.log('buckes updated old saved');
console.log(oldValue); this.onPropertyPaneFieldChanged("buckets", oribuckets, newbuckets);
// this.onPropertyPaneFieldChanged('buckets', this.properties.buckets, newbuckets); this.properties.buckets = newbuckets;
this.properties.buckets = cloneDeep(newbuckets); this.context.propertyPane.refresh();
// array child Properties change dows not trigger rerender this.render();
// i think this is better as an Property With da DateTimeValue to force Rerender
console.log('old'); } else {
console.log(this.properties.buckets); throw "propertypath is not a bucket";
console.log('new');
console.log(newbuckets); }
this.kanbanComponent.forceUpdate();
} else {
throw "propertypath is not a bucket";
} }
}
private refreshBucket(): void { private refreshBucket(): void {
const listId = this.properties.listId; const listId = this.properties.listId;
if(!listId || listId.length === 0) { return; } if (!listId || listId.length === 0) { return; }
sp.web.lists.getById(listId).fields.getByInternalNameOrTitle("Status").get() sp.web.lists.getById(listId).fields.getByInternalNameOrTitle("Status").get()
.then(status => { .then(status => {
const cols: string[] = status.Choices.map((val, index) => { const cols: string[] = status.Choices.map((val, index) => {
return val; return val;
}); });
//matching with existing configured buckets //matching with existing configured buckets
const currentbuckets: IKanbanBucket[] = mergeBucketsWithChoices(this.properties.buckets, cols); const currentbuckets: IKanbanBucket[] = mergeBucketsWithChoices(this.properties.buckets, cols);
if (!currentbuckets) { if (!currentbuckets) {
return; return;
} }
this.properties.buckets = currentbuckets; this.properties.buckets = currentbuckets;
this.context.propertyPane.refresh(); this.context.propertyPane.refresh();
}); });
} }
protected onPropertyPaneConfigurationStart() { protected onPropertyPaneConfigurationStart() {
// Use the list template ID to locate both the old style task lists (107) and newer task lists (171) // 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 => { sp.web.lists.filter("BaseTemplate eq 171 or BaseTemplate eq 107").select("Title").get().then(res => {
this.properties.lists = res.map((val, index) => { this.properties.lists = res.map((val, index) => {
return { return {
key: val.Title, key: val.Title,
text: val.Title text: val.Title
}; };
});
this.context.propertyPane.refresh();
}); });
this.context.propertyPane.refresh(); */
}); }
*/
}
} }

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

@ -1,14 +1,15 @@
import * as React from 'react'; import * as React from 'react';
import styles from './KanbanBoardV2.module.scss'; import styles from './KanbanBoardV2.module.scss';
import * as strings from 'KanbanBoardWebPartStrings';
import { DisplayMode, Guid } from '@microsoft/sp-core-library'; import { DisplayMode, Guid } from '@microsoft/sp-core-library';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle"; import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder"; import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import { WebPartContext } from '@microsoft/sp-webpart-base'; import { WebPartContext } from '@microsoft/sp-webpart-base';
import { Spinner } from 'office-ui-fabric-react/lib/Spinner'; import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
import { IKanbanBucket } from '../../../kanban/IKanbanBucket'; import { IKanbanBucket } from '../../../kanban/IKanbanBucket';
import { IKanbanTask } from '../../../kanban/IKanbanTask'; import { IKanbanTask, KanbanTaskMamagedPropertyType } from '../../../kanban/IKanbanTask';
import KanbanComponent from '../../../kanban/KanbanComponent'; import KanbanComponent from '../../../kanban/KanbanComponent';
import { findIndex, clone, isEqual } from '@microsoft/sp-lodash-subset'; import { findIndex, clone, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset';
import { sp } from '@pnp/sp'; import { sp } from '@pnp/sp';
import { mergeBucketsWithChoices } from './helper'; import { mergeBucketsWithChoices } from './helper';
@ -20,6 +21,7 @@ export interface IKanbanBoardV2Props {
context: WebPartContext; context: WebPartContext;
listId: string; listId: string;
configuredBuckets: IKanbanBucket[]; // need mearge with current readed configuredBuckets: IKanbanBucket[]; // need mearge with current readed
statekey: string; // force refresh ;)
} }
export interface IKanbanBoardV2State { export interface IKanbanBoardV2State {
@ -47,11 +49,12 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
this._getData(); this._getData();
} }
public shouldComponentUpdate(nextProps: IKanbanBoardV2Props, nextState: IKanbanBoardV2State): boolean { public shouldComponentUpdate(nextProps: IKanbanBoardV2Props, nextState: IKanbanBoardV2State): boolean {
if (!isEqual(this.state, nextState)) { return true; } if (!isEqual(this.state, nextState)) { return true; }
if (!isEqual(this.props, nextProps)) { if (!isEqual(this.props, nextProps)) {
console.log('change in Props found') //stateKey
return true; } return true;
}
return false; return false;
} }
public componentDidUpdate(prevProps: IKanbanBoardV2Props) { public componentDidUpdate(prevProps: IKanbanBoardV2Props) {
@ -59,7 +62,11 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
if (this.props.listId !== prevProps.listId) { if (this.props.listId !== prevProps.listId) {
this._getData(); this._getData();
} }
const currentPropBuckets: IKanbanBucket[] = mergeBucketsWithChoices(this.props.configuredBuckets, this.choices);
if (!isEqual(this.state.buckets, currentPropBuckets)) {
this.setState({ buckets: cloneDeep(currentPropBuckets) });
}
/*
const currentbuckets: IKanbanBucket[] = mergeBucketsWithChoices(this.props.configuredBuckets, this.choices); const currentbuckets: IKanbanBucket[] = mergeBucketsWithChoices(this.props.configuredBuckets, this.choices);
console.log(this.props.configuredBuckets); console.log(this.props.configuredBuckets);
console.log(currentbuckets); console.log(currentbuckets);
@ -68,7 +75,7 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
this.setState({ buckets: currentbuckets }); this.setState({ buckets: currentbuckets });
} }*/
} }
public render(): React.ReactElement<IKanbanBoardV2Props> { public render(): React.ReactElement<IKanbanBoardV2Props> {
@ -123,7 +130,15 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
const elementsIndex = findIndex(this.state.tasks, element => element.taskId == taskId); const elementsIndex = findIndex(this.state.tasks, element => element.taskId == taskId);
let newArray = [...this.state.tasks]; // same as Clone let newArray = [...this.state.tasks]; // same as Clone
newArray[elementsIndex].bucket = targetBucket.bucket; newArray[elementsIndex].bucket = targetBucket.bucket;
this.setState({ tasks: newArray }); 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' });
});
} }
@ -146,16 +161,44 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
this.setState({ isConfigured: false, loading: false, errorMessage: 'No Buckets found' }); this.setState({ isConfigured: false, loading: false, errorMessage: 'No Buckets found' });
return; return;
} }
sp.web.lists.getById(listId).items.getAll().then(res => { const odatafiels: string[] = ['AssignedTo/Id', 'AssignedTo/Title', 'AssignedTo/Name', 'AssignedTo/EMail',
//Map Items to task 'ID', 'Title', 'Status', 'Priority', 'PercentComplete', 'Body'
this.setState({ ];
isConfigured: true,
loading: false, sp.web.lists.getById(listId).items
errorMessage: undefined, .select(odatafiels.join(','))
buckets: currentbuckets, .expand('AssignedTo').getAll().then(res => {
tasks: [] 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
});
}); });
});
}); });

3
samples/react-kanban-board/src/webparts/kanbanBoard/loc/en-us.js vendored
View File

@ -2,6 +2,7 @@ define([], function() {
return { return {
"PropertyPaneDescription": "Description", "PropertyPaneDescription": "Description",
"BasicGroupName": "Basic Configuration", "BasicGroupName": "Basic Configuration",
"ListTitleFieldLabel": "List Title" "ListTitleFieldLabel": "List Title",
"PercentComplete": "Percent Complete"
} }
}); });

1
samples/react-kanban-board/src/webparts/kanbanBoard/loc/mystrings.d.ts vendored
View File

@ -2,6 +2,7 @@ declare interface IKanbanBoardWebPartStrings {
PropertyPaneDescription: string; PropertyPaneDescription: string;
BasicGroupName: string; BasicGroupName: string;
ListTitleFieldLabel: string; ListTitleFieldLabel: string;
PercentComplete: string;
} }
declare module 'KanbanBoardWebPartStrings' { declare module 'KanbanBoardWebPartStrings' {