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
* DataConnection
** Task missing
* BucketEdit Does not refresh Component
# Webpart Steps Done
* PNP Placeholder Control for Config
* PNP WebpartTitle Control
* DataConnection
* Usage of BucketEdit in pane
* PNP Order pane Control

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

@ -1,6 +1,6 @@
import * as React from 'react';
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 {
IPropertyPaneConfiguration,
@ -36,6 +36,7 @@ export interface IKanbanBoardWebPartProps {
export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoardWebPartProps> {
private kanbanComponent = null;
private statekey: string = Date.now().toString();
public onInit(): Promise<void> {
return super.onInit().then(_ => {
@ -48,8 +49,6 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
}
public render(): void {
/*
const element: React.ReactElement<IKanbanBoardProps > = React.createElement(
KanbanBoard,
@ -61,12 +60,10 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
*/
/*
const element: React.ReactElement<IMockKanbanProps > = React.createElement(
MockKanban,
{
}
);
MockKanban,{});
*/
console.log('bucket render webpart');
console.log(this.properties.buckets);
const element: React.ReactElement<IKanbanBoardV2Props> = React.createElement(
KanbanBoardV2,
{
@ -76,6 +73,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
updateProperty: (value: string) => {
this.properties.title = value;
},
statekey: this.statekey,
context: this.context,
listId: this.properties.listId,
configuredBuckets: this.properties.buckets
@ -122,12 +120,17 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
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;
}
}
})
]
});
@ -137,7 +140,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
{
groupName: "Order Buckets",
groupFields: [
PropertyFieldOrder("orderedItems", {
PropertyFieldOrder("buckets", {
key: "orderedItems",
label: "Ordered Items",
items: this.properties.buckets,
@ -193,22 +196,17 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
private bucketConfigurationChanged(propertyPath: string, oldValue: any, newValue: any) {
//its an array part !!!!!
if (propertyPath.indexOf('bucket_') !== -1) {
const oribuckets: IKanbanBucket[] = cloneDeep(this.properties.buckets);
const newbuckets: IKanbanBucket[] = cloneDeep(this.properties.buckets);
const bucketindex: number = +propertyPath.split('_')[1];
newbuckets[bucketindex] = newValue;
//merge and every else is good
//
console.log('buckes updated old saved');
console.log(oldValue);
// this.onPropertyPaneFieldChanged('buckets', this.properties.buckets, newbuckets);
this.properties.buckets = cloneDeep(newbuckets);
// array child Properties change dows not trigger rerender
// i think this is better as an Property With da DateTimeValue to force Rerender
console.log('old');
console.log(this.properties.buckets);
console.log('new');
console.log(newbuckets);
this.kanbanComponent.forceUpdate();
//maybe better to make a array control (Update)
this.onPropertyPaneFieldChanged("buckets", oribuckets, newbuckets);
this.properties.buckets = newbuckets;
this.context.propertyPane.refresh();
this.render();
} else {
throw "propertypath is not a bucket";

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

@ -1,14 +1,15 @@
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 { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
import { IKanbanBucket } from '../../../kanban/IKanbanBucket';
import { IKanbanTask } from '../../../kanban/IKanbanTask';
import { IKanbanTask, KanbanTaskMamagedPropertyType } from '../../../kanban/IKanbanTask';
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 { mergeBucketsWithChoices } from './helper';
@ -20,6 +21,7 @@ export interface IKanbanBoardV2Props {
context: WebPartContext;
listId: string;
configuredBuckets: IKanbanBucket[]; // need mearge with current readed
statekey: string; // force refresh ;)
}
export interface IKanbanBoardV2State {
@ -47,11 +49,12 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
this._getData();
}
public shouldComponentUpdate(nextProps: IKanbanBoardV2Props, nextState: IKanbanBoardV2State): boolean {
if (!isEqual(this.state, nextState)) { return true; }
if (!isEqual(this.props, nextProps)) {
console.log('change in Props found')
return true; }
//stateKey
return true;
}
return false;
}
public componentDidUpdate(prevProps: IKanbanBoardV2Props) {
@ -59,7 +62,11 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
if (this.props.listId !== prevProps.listId) {
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);
console.log(this.props.configuredBuckets);
console.log(currentbuckets);
@ -68,7 +75,7 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
this.setState({ buckets: currentbuckets });
}
}*/
}
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);
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' });
});
}
@ -146,14 +161,42 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
this.setState({ isConfigured: false, loading: false, errorMessage: 'No Buckets found' });
return;
}
sp.web.lists.getById(listId).items.getAll().then(res => {
//Map Items to task
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: tasks
});
});

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

@ -2,6 +2,7 @@ define([], function() {
return {
"PropertyPaneDescription": "Description",
"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;
BasicGroupName: string;
ListTitleFieldLabel: string;
PercentComplete: string;
}
declare module 'KanbanBoardWebPartStrings' {