From 68e53f2bc58ce1009d9d144593d75ab3492d0c92 Mon Sep 17 00:00:00 2001 From: petkir Date: Thu, 18 Jun 2020 02:23:30 +0200 Subject: [PATCH] wrong brunch --- samples/react-kanban-board/config/config.json | 1 + .../config/package-solution.json | 26 ++--- .../src/kanban/IKanbanBoardTaskActions.ts | 8 ++ .../src/kanban/IKanbanBoardTaskSettings.ts | 5 + .../src/kanban/IKanbanBucket.ts | 7 ++ .../src/kanban/IKanbanTask.ts | 6 ++ .../src/kanban/KanbanBucket.module.scss | 22 +++++ .../src/kanban/KanbanBucket.tsx | 95 +++++++++++++++++++ .../src/kanban/KanbanComponent.module.scss | 4 + .../src/kanban/KanbanComponent.tsx | 87 +++++++++++++++++ .../src/kanban/KanbanTask.module.scss | 15 +++ .../src/kanban/KanbanTask.tsx | 62 ++++++++++++ .../src/kanban/MockKanban.tsx | 73 ++++++++++++++ .../react-kanban-board/src/kanban/Readme.txt | 4 + .../src/kanban/loc/en-us.js | 8 ++ .../src/kanban/loc/mystrings.d.ts | 11 +++ .../kanbanBoard/KanbanBoardWebPart.ts | 11 ++- 17 files changed, 431 insertions(+), 14 deletions(-) create mode 100644 samples/react-kanban-board/src/kanban/IKanbanBoardTaskActions.ts create mode 100644 samples/react-kanban-board/src/kanban/IKanbanBoardTaskSettings.ts create mode 100644 samples/react-kanban-board/src/kanban/IKanbanBucket.ts create mode 100644 samples/react-kanban-board/src/kanban/IKanbanTask.ts create mode 100644 samples/react-kanban-board/src/kanban/KanbanBucket.module.scss create mode 100644 samples/react-kanban-board/src/kanban/KanbanBucket.tsx create mode 100644 samples/react-kanban-board/src/kanban/KanbanComponent.module.scss create mode 100644 samples/react-kanban-board/src/kanban/KanbanComponent.tsx create mode 100644 samples/react-kanban-board/src/kanban/KanbanTask.module.scss create mode 100644 samples/react-kanban-board/src/kanban/KanbanTask.tsx create mode 100644 samples/react-kanban-board/src/kanban/MockKanban.tsx create mode 100644 samples/react-kanban-board/src/kanban/Readme.txt create mode 100644 samples/react-kanban-board/src/kanban/loc/en-us.js create mode 100644 samples/react-kanban-board/src/kanban/loc/mystrings.d.ts diff --git a/samples/react-kanban-board/config/config.json b/samples/react-kanban-board/config/config.json index f7f9dd798..9eab31564 100644 --- a/samples/react-kanban-board/config/config.json +++ b/samples/react-kanban-board/config/config.json @@ -13,6 +13,7 @@ }, "externals": {}, "localizedResources": { + "KanbanBoardStrings": "lib/kanban/loc/{locale}.js", "KanbanBoardWebPartStrings": "lib/webparts/kanbanBoard/loc/{locale}.js" } } diff --git a/samples/react-kanban-board/config/package-solution.json b/samples/react-kanban-board/config/package-solution.json index ca59419a3..0a5224057 100644 --- a/samples/react-kanban-board/config/package-solution.json +++ b/samples/react-kanban-board/config/package-solution.json @@ -1,14 +1,14 @@ { - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", - "solution": { - "name": "react-kanban-board-client-side-solution", - "id": "cccbd72b-7b89-4128-9348-0a4850ded8fd", - "version": "1.0.0.0", - "includeClientSideAssets": true, - "skipFeatureDeployment": true, - "isDomainIsolated": false - }, - "paths": { - "zippedPackage": "solution/react-kanban-board.sppkg" - } -} + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", + "solution": { + "name": "react-kanban-board-client-side-solution", + "id": "cccbd72b-7b89-4128-9348-0a4850ded8fd", + "version": "1.0.1.0", + "includeClientSideAssets": true, + "skipFeatureDeployment": true, + "isDomainIsolated": false + }, + "paths": { + "zippedPackage": "solution/react-kanban-board.sppkg" + } +} \ No newline at end of file diff --git a/samples/react-kanban-board/src/kanban/IKanbanBoardTaskActions.ts b/samples/react-kanban-board/src/kanban/IKanbanBoardTaskActions.ts new file mode 100644 index 000000000..18070f5df --- /dev/null +++ b/samples/react-kanban-board/src/kanban/IKanbanBoardTaskActions.ts @@ -0,0 +1,8 @@ +import { IKanbanBucket } from "./IKanbanBucket"; + +export interface IKanbanBoardTaskActions { + + toggleCompleted?: (taskId: number | string) => void; + allowMove?: (taskId: number | string, prevBucket: IKanbanBucket, targetBucket: IKanbanBucket) => boolean; + moved?: (taskId: number | string, targetBucket: IKanbanBucket) => void; +} \ No newline at end of file diff --git a/samples/react-kanban-board/src/kanban/IKanbanBoardTaskSettings.ts b/samples/react-kanban-board/src/kanban/IKanbanBoardTaskSettings.ts new file mode 100644 index 000000000..a94a87c51 --- /dev/null +++ b/samples/react-kanban-board/src/kanban/IKanbanBoardTaskSettings.ts @@ -0,0 +1,5 @@ +export interface IKanbanBoardTaskSettings { + showLabels: boolean; + showPriority: boolean; + showAssignedTo: boolean; +} \ No newline at end of file diff --git a/samples/react-kanban-board/src/kanban/IKanbanBucket.ts b/samples/react-kanban-board/src/kanban/IKanbanBucket.ts new file mode 100644 index 000000000..459a14c7a --- /dev/null +++ b/samples/react-kanban-board/src/kanban/IKanbanBucket.ts @@ -0,0 +1,7 @@ +export interface IKanbanBucket { + bucket:string; + bucketheadline:string; + percentageComplete: number; + color?:string; + allowAddTask?:boolean; +} \ No newline at end of file diff --git a/samples/react-kanban-board/src/kanban/IKanbanTask.ts b/samples/react-kanban-board/src/kanban/IKanbanTask.ts new file mode 100644 index 000000000..e845928b2 --- /dev/null +++ b/samples/react-kanban-board/src/kanban/IKanbanTask.ts @@ -0,0 +1,6 @@ +export interface IKanbanTask { + taskId: number | string; + title: string; + isCompleted?: boolean; + bucket:string; +} \ No newline at end of file diff --git a/samples/react-kanban-board/src/kanban/KanbanBucket.module.scss b/samples/react-kanban-board/src/kanban/KanbanBucket.module.scss new file mode 100644 index 000000000..5122e821c --- /dev/null +++ b/samples/react-kanban-board/src/kanban/KanbanBucket.module.scss @@ -0,0 +1,22 @@ +.bucket { + display: table-cell; + + + border-right: 1px solid gray; + .headline { + padding: 2px 10px; + line-height: 2em; + font-weight: 700; + display: block; + position: relative; + text-align: center; + border-bottom: 1px solid gray; + .colorindicator { + width: 10px; + height: 100%; + position: absolute; + top: 0; + right: 0px; + } + } +} diff --git a/samples/react-kanban-board/src/kanban/KanbanBucket.tsx b/samples/react-kanban-board/src/kanban/KanbanBucket.tsx new file mode 100644 index 000000000..a38189276 --- /dev/null +++ b/samples/react-kanban-board/src/kanban/KanbanBucket.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; +import styles from './KanbanBucket.module.scss'; +import { IKanbanBucket } from './IKanbanBucket'; +import { IKanbanTask } from './IKanbanTask'; +import { IKanbanBoardTaskSettings } from './IKanbanBoardTaskSettings'; +import { IKanbanBoardTaskActions } from './IKanbanBoardTaskActions'; +import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator'; +import { ActionButton } from 'office-ui-fabric-react'; +import KanbanTask from './KanbanTask'; +import * as strings from 'KanbanBoardStrings'; + +export interface IKanbanBucketProps extends IKanbanBucket { + buckettasks: IKanbanTask[]; + tasksettings: IKanbanBoardTaskSettings; + taskactions: IKanbanBoardTaskActions; + + openDetails?: (taskId: number | string) => void; +} + +export interface IKanbanBucketState { } + +export default class KanbanBucket extends React.Component { + + constructor(props: IKanbanBucketProps) { + super(props); + + this.state = { + + }; + } + /* + nice to use a object merge + ECMAScript 2018 Standard Method + {...t, ...tasksettings, ...taskactions} + hope this will be translated + */ + public render(): React.ReactElement { + const { bucketheadline, color, buckettasks, tasksettings, taskactions, percentageComplete, allowAddTask } = this.props; + return ( +
this.onDragOver(event)} + onDrop={this.onDrop.bind(this)} + > +
+ {bucketheadline} + {color &&
} + +
+ {allowAddTask && ( + {strings.AddTask} + )} + { + buckettasks.map((t) => { + const merge = { ...t, ...tasksettings, ...taskactions }; + return ( + + ); + }) + } +
+ ); + } + + + private onDragOver(event): void { + event.preventDefault(); + } + + private onDrop(event): void { + // this.props.name + // let taskName = event.dataTransfer.getData("taskName"); + /* + let tasks = this.state.tasks.filter((task) => { + if (task.taskName == taskName) { + task.type = cat; + } + return task; + }); + + + this.setState({ + ...this.state, + tasks + }); + */ + } + +} diff --git a/samples/react-kanban-board/src/kanban/KanbanComponent.module.scss b/samples/react-kanban-board/src/kanban/KanbanComponent.module.scss new file mode 100644 index 000000000..14b7b83bf --- /dev/null +++ b/samples/react-kanban-board/src/kanban/KanbanComponent.module.scss @@ -0,0 +1,4 @@ +.kanbanBoard { + display: table; + width: 100%; +} \ No newline at end of file diff --git a/samples/react-kanban-board/src/kanban/KanbanComponent.tsx b/samples/react-kanban-board/src/kanban/KanbanComponent.tsx new file mode 100644 index 000000000..159d19bce --- /dev/null +++ b/samples/react-kanban-board/src/kanban/KanbanComponent.tsx @@ -0,0 +1,87 @@ +import * as React from 'react'; +import styles from './KanbanComponent.module.scss'; +import { IKanbanTask } from './IKanbanTask'; +import { IKanbanBoardTaskSettings } from './IKanbanBoardTaskSettings'; +import { IKanbanBoardTaskActions } from './IKanbanBoardTaskActions'; +import { IKanbanBucket } from './IKanbanBucket'; +import KanbanBucket from './KanbanBucket'; + +import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar'; + +export interface IKanbanComponentProps { + buckets: IKanbanBucket[]; + tasks: IKanbanTask[]; + tasksettings: IKanbanBoardTaskSettings; + taskactions: IKanbanBoardTaskActions; + showCommandbar?: boolean; + /* + showCommandbarNew: boolean; + allowDialog: boolean; TODO im mock + */ +} + +export interface IKanbanComponentState { } + +export default class KanbanComponent extends React.Component { + + constructor(props: IKanbanComponentProps) { + super(props); + + this.state = { + + }; + } + + public render(): React.ReactElement { + const { buckets, tasks, tasksettings, taskactions, showCommandbar } = this.props; + return ( +
+ {showCommandbar && } +
+ {buckets.map((b) => + ( x.bucket == b.bucket)} + tasksettings={tasksettings} + taskactions={taskactions} + openDetails={(x) => alert(x)} + />) + + )} +
+
+ ); + } + + private getItems = () => { + return [ + { + key: 'newItem', + name: 'New', + cacheKey: 'myCacheKey', // changing this key will invalidate this items cache + iconProps: { + iconName: 'Add' + } + }] + } + + private getFarItems = () => { + return [ + { + key: 'info', + name: 'Info', + ariaLabel: 'Info', + iconProps: { + iconName: 'Info' + }, + iconOnly: true, + onClick: () => console.log('Info') + } + ]; + }; +} diff --git a/samples/react-kanban-board/src/kanban/KanbanTask.module.scss b/samples/react-kanban-board/src/kanban/KanbanTask.module.scss new file mode 100644 index 000000000..14175bac1 --- /dev/null +++ b/samples/react-kanban-board/src/kanban/KanbanTask.module.scss @@ -0,0 +1,15 @@ +.taskcard { + display: block; + .titlerow { + .title{ + display: inline; + } + } + .membersAndLabels { + .labels, + .priority, + .assignedto { + display: inline; + } + } +} \ No newline at end of file diff --git a/samples/react-kanban-board/src/kanban/KanbanTask.tsx b/samples/react-kanban-board/src/kanban/KanbanTask.tsx new file mode 100644 index 000000000..0414176e0 --- /dev/null +++ b/samples/react-kanban-board/src/kanban/KanbanTask.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; +import styles from './KanbanTask.module.scss'; +import * as strings from 'KanbanBoardStrings'; +import { IconButton } from 'office-ui-fabric-react/lib/Button'; +import {IKanbanTask} from './IKanbanTask'; +import {IKanbanBoardTaskSettings} from './IKanbanBoardTaskSettings'; +import {IKanbanBoardTaskActions} from './IKanbanBoardTaskActions'; + +export interface IKanbanTaskProps extends IKanbanTask,IKanbanBoardTaskSettings,IKanbanBoardTaskActions { + + + openDetails?: (taskId: number | string) => void; + +} + +export interface IKanbanTaskState { } + +export default class KanbanTask extends React.Component { + constructor(props: IKanbanTaskProps) { + super(props); + this.state = {}; + } + public render(): React.ReactElement { + + const { title, showLabels, showPriority, showAssignedTo, isCompleted } = this.props; + const showCompleted = !!this.props.toggleCompleted; + const iconCompleted = { iconName: isCompleted ? 'RadioBtnOn' : 'RadioBtnOff' }; + return ( +
this.onDragStart(event)} + > +
+ {showCompleted && ( + ) + } +
{title}
+
+
+ {showAssignedTo && (
)} + {showLabels && (
)} + {showPriority && (
)} +
+
+ ); + } + + private _toggleCompleted(): void { + if (this.props.toggleCompleted) { + this.props.toggleCompleted(this.props.taskId); + } + } + + private onDragStart(event): void { + console.log('dragstart on div: ', this.props.taskId); + event.dataTransfer.setData("taskId", this.props.taskId); + } +} diff --git a/samples/react-kanban-board/src/kanban/MockKanban.tsx b/samples/react-kanban-board/src/kanban/MockKanban.tsx new file mode 100644 index 000000000..6911e8d3d --- /dev/null +++ b/samples/react-kanban-board/src/kanban/MockKanban.tsx @@ -0,0 +1,73 @@ +import * as React from 'react'; +import KanbanComponent from './KanbanComponent'; +import { IKanbanBucket } from './IKanbanBucket'; +import { IKanbanTask } from './IKanbanTask'; + +export interface IMockKanbanProps { } + +export interface IMockKanbanState { + buckets: IKanbanBucket[]; + tasks: IKanbanTask[]; +} + +export class MockKanban extends React.Component { + + constructor(props: IMockKanbanProps) { + super(props); + + this.state = { + buckets:[ + {bucket:'Not Started', bucketheadline:'Not Started Head',percentageComplete:0, color:'yellow' ,allowAddTask:true}, + {bucket:'Test1', bucketheadline:'Test1 Head',percentageComplete:10, color:'orange',allowAddTask:true }, + {bucket:'Test2', bucketheadline:'Test2 Head',percentageComplete:50, color:'green' }, + {bucket:'Test3', bucketheadline:'Test3 Head',percentageComplete:50, color:'#FF0000' }, + {bucket:'Test4', bucketheadline:'Test4 Head',percentageComplete:0 ,allowAddTask:true } + ], + tasks: [ + {taskId: 1, title:'test1',bucket:'Not Started'}, + {taskId: 2, title:'test2',bucket:'Not Started'}, + {taskId: 3, title:'test3',bucket:'Not Started'}, + {taskId: '4', title:'test 4',bucket:'Test4'}, + {taskId: '5', title:'test 5',bucket:'Test3'}, + + ] + }; + } + + public render(): React.ReactElement { + const { buckets, tasks } = this.state; + return ( +
+ +
+ ); + } + + private _toggleCompleted(taskId: number | string): void { +//TODO + } + private _allowMove(taskId: number | string, prevBucket: IKanbanBucket, targetBucket: IKanbanBucket): boolean { + //TODO + return true; + } + + private _moved(taskId: number | string, targetBucket: IKanbanBucket): void { + //TODO + + } +} diff --git a/samples/react-kanban-board/src/kanban/Readme.txt b/samples/react-kanban-board/src/kanban/Readme.txt new file mode 100644 index 000000000..0c5e306a9 --- /dev/null +++ b/samples/react-kanban-board/src/kanban/Readme.txt @@ -0,0 +1,4 @@ +Property Panel: +Liste Laden +auswahl vom Status mittels Drag n drop PNP COntrol +Edit percentrage and color for each State \ No newline at end of file diff --git a/samples/react-kanban-board/src/kanban/loc/en-us.js b/samples/react-kanban-board/src/kanban/loc/en-us.js new file mode 100644 index 000000000..51bbe67fb --- /dev/null +++ b/samples/react-kanban-board/src/kanban/loc/en-us.js @@ -0,0 +1,8 @@ +define([], function() { + return { + "CompleteButton": "complete", + "IsCompleted": "IsCompleted", + "IsNotCompleted": "IsNotCompleted", + "AddTask": "AddTask" + } +}); \ No newline at end of file diff --git a/samples/react-kanban-board/src/kanban/loc/mystrings.d.ts b/samples/react-kanban-board/src/kanban/loc/mystrings.d.ts new file mode 100644 index 000000000..9b010973b --- /dev/null +++ b/samples/react-kanban-board/src/kanban/loc/mystrings.d.ts @@ -0,0 +1,11 @@ +declare interface IKanbanBoardStrings { + CompleteButton: string; + IsCompleted: string; + IsNotCompleted: string; + AddTask: string; +} + +declare module 'KanbanBoardStrings' { + const strings: IKanbanBoardStrings; + export = strings; +} diff --git a/samples/react-kanban-board/src/webparts/kanbanBoard/KanbanBoardWebPart.ts b/samples/react-kanban-board/src/webparts/kanbanBoard/KanbanBoardWebPart.ts index 407795220..b47604fc5 100644 --- a/samples/react-kanban-board/src/webparts/kanbanBoard/KanbanBoardWebPart.ts +++ b/samples/react-kanban-board/src/webparts/kanbanBoard/KanbanBoardWebPart.ts @@ -14,6 +14,8 @@ import { IKanbanBoardProps } from './components/IKanbanBoardProps'; import "@pnp/polyfill-ie11"; import {sp} from '@pnp/sp'; +import {MockKanban,IMockKanbanProps} from '../../kanban/MockKanban'; + export interface IKanbanBoardWebPartProps { listTitle: string; lists: Array; @@ -36,7 +38,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart = React.createElement( KanbanBoard, { @@ -44,6 +46,13 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart = React.createElement( + MockKanban, + { + + } + ); ReactDom.render(element, this.domElement); }