diff --git a/samples/react-kanban-board/src/kanban/KanbanBucket.tsx b/samples/react-kanban-board/src/kanban/KanbanBucket.tsx index 50650135b..dad9fc380 100644 --- a/samples/react-kanban-board/src/kanban/KanbanBucket.tsx +++ b/samples/react-kanban-board/src/kanban/KanbanBucket.tsx @@ -55,7 +55,7 @@ export default class KanbanBucket extends React.Component void; +} + +export interface IKanbanBucketConfiguratorState { + bucket?: IKanbanBucket; + // showHeadline: boolean; + useColor: boolean; +} + +export default class KanbanBucketConfigurator extends React.Component { + + constructor(props: IKanbanBucketConfiguratorProps) { + super(props); + this.state = { + // showHeadline: false, + useColor: false + }; + + } + public componentDidMount(): void { + this.resetState(); + } + + public componentDidUpdate(prevProps: IKanbanBucketConfiguratorProps): void { + if (prevProps.bucket && this.props.bucket && !isEqual(this.props.bucket, prevProps.bucket)) { + this.resetState(); + } + } + + public render(): React.ReactElement { + /* + const columnProps: Partial = { + gap: 15, + styles: { root: { width: 300 } }, + };*/ + /* + const colorPickerStyles: Partial = { + panel: { padding: 12 }, + root: { + maxWidth: 352, + minWidth: 352, + }, + colorRectangle: { height: 268 }, + };*/ + const statebucket = this.state.bucket; + if (!statebucket) { + return (
); + } + return ( + + + {/* { this.setState({ showHeadline: checked }); }} /> + */} + { + const bucket = clone(this.state.bucket); + bucket.bucketheadline = value; + this.setState({ bucket: bucket }); + }} + /> + + `${value} ${strings.Percent}`} + valueFormat={(value: number) => `${value}%`} + showValue + onChange={(value: number) => { + const bucket = clone(this.state.bucket); + bucket.percentageComplete = value; + this.setState({ bucket: bucket }); + }} + /> + { + const bucket = clone(this.state.bucket); + bucket.allowAddTask = checked; + this.setState({ bucket: bucket }); + }} /> + { this.setState({ useColor: checked }); }} /> + {this.state.useColor && ( { + const bucket = clone(this.state.bucket); + bucket.color = colorObj.str; + this.setState({ bucket: bucket }); + } + } + // The ColorPicker provides default English strings for visible text. + // If your app is localized, you MUST provide the `strings` prop with localized strings. + /* + FluentUI + strings={{ + // By default, the sliders will use the text field labels as their aria labels. + // If you'd like to provide more detailed instructions, you can use these props. + alphaAriaLabel: 'Alpha slider: Use left and right arrow keys to change value, hold shift for a larger jump', + transparencyAriaLabel: + 'Transparency slider: Use left and right arrow keys to change value, hold shift for a larger jump', + hueAriaLabel: 'Hue slider: Use left and right arrow keys to change value, hold shift for a larger jump', + }} + */ + /> + )} + + + + {/* */} + + + + + ); + } + + private resetState():void { + const newbucket: IKanbanBucket = clone(this.props.bucket); + this.setState({ + bucket: newbucket, + // showHeadline: newbucket.bucketheadline && newbucket.bucketheadline.length > 0, + useColor: newbucket.color && newbucket.color.length > 0 + }); + } + private submitData():void { + debugger; + const newbucket: IKanbanBucket = clone(this.state.bucket); + if (!this.state.useColor) { + newbucket.color = undefined; + } + /* + if (!this.state.showHeadline) { + newbucket.color = undefined; + } + */ + if (this.props.update) { + this.props.update(this.props.index, newbucket); + } + } + +} diff --git a/samples/react-kanban-board/src/kanban/KanbanComponent.tsx b/samples/react-kanban-board/src/kanban/KanbanComponent.tsx index 43a06d7d2..7380d962e 100644 --- a/samples/react-kanban-board/src/kanban/KanbanComponent.tsx +++ b/samples/react-kanban-board/src/kanban/KanbanComponent.tsx @@ -16,7 +16,7 @@ import { IStackStyles, Stack } from 'office-ui-fabric-react/lib/Stack'; import { clone } from '@microsoft/sp-lodash-subset'; import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar'; -import { stringIsNullOrEmpty } from '@pnp/common'; + import { TooltipHost } from 'office-ui-fabric-react'; export interface IKanbanComponentProps { @@ -86,7 +86,7 @@ export default class KanbanComponent extends React.Component { - const merge = { ...b, ...this.state } + const merge = { ...b, ...this.state }; return ( p.bucket === targetbucket) + const buckets = this.props.buckets.filter((p) => p.bucket === targetbucket); if (buckets.length === 1) { bucket = clone(buckets[0]); } else { @@ -414,5 +414,5 @@ export default class KanbanComponent extends React.Component console.log('Info') } ]; - }; + } } diff --git a/samples/react-kanban-board/src/kanban/MockKanban.tsx b/samples/react-kanban-board/src/kanban/MockKanban.tsx index dbfcb56ff..b26bd7d6b 100644 --- a/samples/react-kanban-board/src/kanban/MockKanban.tsx +++ b/samples/react-kanban-board/src/kanban/MockKanban.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import KanbanComponent from './KanbanComponent'; +import KanbanBucketConfigurator from './KanbanBucketConfigurator'; import { IKanbanBucket } from './IKanbanBucket'; import { IKanbanTask, KanbanTaskMamagedPropertyType } from './IKanbanTask'; import { findIndex } from "lodash"; +import { cloneDeep, clone } from '@microsoft/sp-lodash-subset'; export interface IMockKanbanProps { } @@ -35,7 +37,7 @@ export class MockKanban extends React.ComponenttestBold

' }, - + { name: 'Prop2', displayName: 'Prop2 Display', @@ -69,7 +71,6 @@ export class MockKanban extends React.Component +
+

+ Bucket Configuration sample +

+ { + this.state.buckets.map((b, i) => + + ) + } +
); } + private updateBucket(index: number, value: IKanbanBucket) { + debugger; + const cstate = cloneDeep(this.state); + cstate.buckets[index] = clone(value); + this.setState(cstate); + } - - private _toggleCompleted(taskId: string): void { + private _toggleCompleted(taskId: string): void { //TODO } - private _allowMove(taskId: string, prevBucket: IKanbanBucket, targetBucket: IKanbanBucket): boolean { + private _allowMove(taskId: string, prevBucket: IKanbanBucket, targetBucket: IKanbanBucket): boolean { if (prevBucket.bucket === 'Test2' && targetBucket.bucket === 'Test3') { return false; } return true; } - private _moved(taskId: string, targetBucket: IKanbanBucket): void { + private _moved(taskId: string, targetBucket: IKanbanBucket): void { const elementsIndex = findIndex(this.state.tasks, element => element.taskId == taskId); let newArray = [...this.state.tasks]; newArray[elementsIndex].bucket = targetBucket.bucket; diff --git a/samples/react-kanban-board/src/kanban/loc/en-us.js b/samples/react-kanban-board/src/kanban/loc/en-us.js index bf8448808..36ec749db 100644 --- a/samples/react-kanban-board/src/kanban/loc/en-us.js +++ b/samples/react-kanban-board/src/kanban/loc/en-us.js @@ -13,6 +13,15 @@ define([], function () { "EditTaskDlgHeadline": "Edit Task", "AssignedTo": "Assigned to", "HtmlDescription": "Description", - "Priority": "Priority" + "Priority": "Priority", + + "BucketConfigInternalName": "Internal Name", + "BucketConfigHeadline": "Headline", + "BucketConfigPercentageComplete": "Bucket State Percentage Complete", + "BucketConfigAllowAddTask": "Add Task?", + "BucketConfigUseColor": "Use Color?", + "BucketConfigSave": "Save", + "BucketConfigReset": "Reset", + "Percent":"percent" } }); diff --git a/samples/react-kanban-board/src/kanban/loc/mystrings.d.ts b/samples/react-kanban-board/src/kanban/loc/mystrings.d.ts index c36461212..9ab0e8f62 100644 --- a/samples/react-kanban-board/src/kanban/loc/mystrings.d.ts +++ b/samples/react-kanban-board/src/kanban/loc/mystrings.d.ts @@ -13,7 +13,16 @@ declare interface IKanbanBoardStrings { AssignedTo: string; HtmlDescription: string; - Priority:string; + Priority: string; + + BucketConfigInternalName: string; + BucketConfigHeadline: string; + BucketConfigPercentageComplete: string; + BucketConfigAllowAddTask: string; + BucketConfigUseColor: string; + BucketConfigSave: string; + BucketConfigReset: string; + Percent: string; } declare module 'KanbanBoardStrings' {