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

working sample in IE

This commit is contained in:
petkir 2020-06-19 21:30:44 +02:00
parent dbfa9603a3
commit 28cee20809
8 changed files with 105 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
samples/react-kanban-board/src/kanban/IKanbanBoardTaskActions.ts
View File

@ -2,7 +2,7 @@ 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;
toggleCompleted?: (taskId: string) => void;
allowMove?: (taskId: string, prevBucket: IKanbanBucket, targetBucket: IKanbanBucket) => boolean;
moved?: (taskId: string, targetBucket: IKanbanBucket) => void;
}

2
samples/react-kanban-board/src/kanban/IKanbanTask.ts
View File

@ -1,5 +1,5 @@
export interface IKanbanTask {
taskId: number | string;
taskId: string;
title: string;
isCompleted?: boolean;
bucket: string;

37
samples/react-kanban-board/src/kanban/KanbanBucket.tsx
View File

@ -15,19 +15,19 @@ export interface IKanbanBucketProps extends IKanbanBucket {
tasksettings: IKanbanBoardTaskSettings;
taskactions: IKanbanBoardTaskActions;
onDragStart: (event, taskId: string | number, bucket: string) => void;
onDragStart: (event, taskId: string, bucket: string) => void;
onDragOver: (event, targetbucket: string) => void;
onDragLeave: (event, targetbucket: string) => void;
onDrop: (event, targetbucket: string) => void;
onDragEnd: (event, taskId: string, bucket: string) => void;
leavingTaskId?: number | string;
leavingTaskId?: string;
leavingBucket?: string;
overBucket?: string;
openDetails?: (taskId: number | string) => void;
openDetails?: (taskId: string) => void;
}
export interface IKanbanBucketState { }
@ -49,18 +49,21 @@ export default class KanbanBucket extends React.Component<IKanbanBucketProps, IK
hope this will be translated
*/
public render(): React.ReactElement<IKanbanBucketProps> {
const { bucket, bucketheadline, color, buckettasks,
tasksettings, taskactions, percentageComplete,
allowAddTask, overBucket,leavingTaskId,leavingBucket } = this.props;
const { bucket, bucketheadline, color, buckettasks,
tasksettings, taskactions, percentageComplete,
allowAddTask, overBucket, leavingTaskId, leavingBucket } = this.props;
return (
<div className={classNames({[styles.bucket]: true, [styles.dragover]: (overBucket && overBucket === bucket)})}
key={bucket}
<div
className={classNames({ [styles.bucket]: true, [styles.dragover]: !!(overBucket && overBucket === bucket) })}
key={bucket}
onDragOver={(event) => this.props.onDragOver(event, bucket)}
onDragLeave={(event) => this.props.onDragLeave(event, bucket)}
onDrop={(event) => this.props.onDrop(event, bucket)}
>
<div className={styles.headline}>
<div className={styles.headline}
>
<span>{bucketheadline}</span>
{color && <div style={{ backgroundColor: color }} className={styles.colorindicator}></div>}
<ProgressIndicator percentComplete={percentageComplete / 100} />
@ -75,16 +78,16 @@ key={bucket}
{
buckettasks.map((t) => {
const merge = { ...t, ...tasksettings, ...taskactions };
const isMoving= (t.taskId === leavingTaskId && t.bucket === leavingBucket);
return (<div className={isMoving&&styles.placeholder} >
<KanbanTask
key={t.taskId}
const isMoving = (t.taskId === leavingTaskId && t.bucket === leavingBucket);
return (<div className={isMoving ? styles.placeholder : undefined} key={'' + t.taskId} >
<KanbanTask
key={'task' + t.taskId}
{...merge}
isMoving={isMoving}
openDetails={this.props.openDetails}
onDragStart={(event) => this.props.onDragStart(event, t.taskId, t.bucket)}
onDragEnd={(event) => this.props.onDragEnd(event, t.taskId, t.bucket)}
/></div>
);
})

49
samples/react-kanban-board/src/kanban/KanbanComponent.tsx
View File

@ -14,6 +14,7 @@ import { IStackStyles, Stack } from 'office-ui-fabric-react/lib/Stack';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
export interface IKanbanComponentProps {
@ -30,11 +31,11 @@ export interface IKanbanComponentProps {
}
export interface IKanbanComponentState {
leavingTaskId?: number | string;
leavingTaskId?: string;
leavingBucket?: string;
overBucket?: string;
openDialog: boolean;
openTaskId?: number | string;
openTaskId?: string;
}
export default class KanbanComponent extends React.Component<IKanbanComponentProps, IKanbanComponentState> {
@ -48,6 +49,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
leavingBucket: null,
overBucket: null
};
}
public render(): React.ReactElement<IKanbanComponentProps> {
@ -78,7 +80,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
onDragLeave={this.onDragLeave.bind(this)}
onDragOver={this.onDragOver.bind(this)}
onDragStart={this.onDragStart.bind(this)}
onDragEnd={this.onDragEnd.bind(this)}
/>);
}
@ -91,7 +93,6 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
}
private renderDetails(): JSX.Element {
debugger;
const renderer = this.props.renderers && this.props.renderers.taskDetail ? this.props.renderers.taskDetail : this.internalTaskDetailRenderer;
const tasks = this.props.tasks.filter(t => t.taskId == this.state.openTaskId);
@ -151,7 +152,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
openTaskId: undefined
});
}
private openDialog(taskid: number | string) {
private openDialog(taskid: string) {
this.setState({
openDialog: true,
openTaskId: taskid
@ -167,13 +168,21 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
}
private onDragStart(event, taskId: string | number, bucket: string): void {
console.log('onDragStart');
const taskitem = this.props.tasks.filter(p => p.taskId == taskId);
private onDragEnd(event): void {
console.log('onDragEnd');
this.dragelement=undefined;
}
private onDragStart(event, taskId: string, bucket: string): void {
console.log('onDragStart');
const taskitem = this.props.tasks.filter(p => p.taskId === taskId);
console.log('onDragStart taskitem');
if (taskitem.length === 1) {
event.dataTransfer.setData("taskId", taskId);
event.dataTransfer.setData("sourcebucket", bucket);
console.log('onDragStart taskitem check done');
console.log(event);
event.dataTransfer.setData("text", taskId);
//event.dataTransfer.setData("sourcebucket", bucket);
//set element because event.dataTransfer is empty by DragOver
console.log('set dragelement');
this.dragelement = taskitem[0];
@ -181,8 +190,12 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
leavingTaskId: taskId,
leavingBucket: bucket,
});
console.log('dragelement set and refresh state');
} else {
// Error not consitent
console.log('onDragStart prop data wrong!!');
throw "TaskItem not found on DragStart";
}
@ -190,8 +203,9 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
private onDragOver(event, targetbucket: string): void {
event.preventDefault();
console.log('onDragOver');
console.log(event.dataTransfer.getData("sourcebucket"));
console.log('onDragOver this.dragelement');
console.log(this.dragelement);
if (this.dragelement.bucket !== targetbucket) {
/* if (!this.bucketRef.current.classList.contains(styles.dragover)) {
this.bucketRef.current.classList.add(styles.dragover)
@ -203,15 +217,16 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
}
private onDrop(event, targetbucket: string): void {
console.log(`onDrop sourcebucket ${event.dataTransfer.getData("sourcebucket")} taskid: ${event.dataTransfer.getData("taskId")}`);
console.log('onDrop');
/* if (this.bucketRef.current.classList.contains(styles.dragover)) {
this.bucketRef.current.classList.remove(styles.dragover)
}*/
if (event.dataTransfer.getData("sourcebucket") !== targetbucket) {
const sourcebucket = event.dataTransfer.getData("sourcebucket");
const source = this.props.buckets.filter(s => s.bucket == sourcebucket)[0];
if (this.dragelement.bucket !== targetbucket) {
//event.dataTransfer.getData("text");
const taskId = this.dragelement.taskId;
const source = this.props.buckets.filter(s => s.bucket == this.dragelement.bucket)[0];
const target = this.props.buckets.filter(s => s.bucket == targetbucket)[0];
const taskId = event.dataTransfer.getData("taskId");
if (this.props.taskactions) {
let allowMove = true;
if (this.props.taskactions.allowMove) {

42
samples/react-kanban-board/src/kanban/KanbanTask.tsx
View File

@ -2,18 +2,19 @@ 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';
import { IKanbanTask } from './IKanbanTask';
import { IKanbanBoardTaskSettings } from './IKanbanBoardTaskSettings';
import { IKanbanBoardTaskActions } from './IKanbanBoardTaskActions';
import classNames from 'classnames';
import { IconNames } from 'office-ui-fabric-react';
export interface IKanbanTaskProps extends IKanbanTask,IKanbanBoardTaskSettings,IKanbanBoardTaskActions {
openDetails: (taskId: number | string) => void;
onDragStart:(event) => void;
isMoving:boolean;
export interface IKanbanTaskProps extends IKanbanTask, IKanbanBoardTaskSettings, IKanbanBoardTaskActions {
openDetails: (taskId: string) => void;
onDragStart: (event) => void;
onDragEnd: (event) => void;
isMoving: boolean;
}
export interface IKanbanTaskState { }
@ -25,13 +26,14 @@ export default class KanbanTask extends React.Component<IKanbanTaskProps, IKanba
}
public render(): React.ReactElement<IKanbanTaskProps> {
const { title, showLabels, showPriority, showAssignedTo, isCompleted,isMoving,showTaskDetailsButton } = this.props;
const { title, showLabels, showPriority, showAssignedTo, isCompleted, isMoving, showTaskDetailsButton } = this.props;
const showCompleted = !!this.props.toggleCompleted;
const iconCompleted = { iconName: isCompleted ? 'RadioBtnOn' : 'RadioBtnOff' };
return (
<div className={classNames({[styles.taskcard]: true, [styles.moving]: isMoving}) }
onDragStart = {this.props.onDragStart}
draggable
<div className={classNames({ [styles.taskcard]: true, [styles.moving]: isMoving })}
onDragStart={this.props.onDragStart}
onDragEnd={this.props.onDragEnd}
draggable
>
<div className={styles.titlerow}>
{showCompleted && (
@ -43,15 +45,15 @@ export default class KanbanTask extends React.Component<IKanbanTaskProps, IKanba
/>)
}
<div className={styles.title}>{title}</div>
{ showTaskDetailsButton && (
{showTaskDetailsButton && (
<IconButton
iconProps={{iconName:'More'}}
iconProps={{ iconName: 'More' }}
title={strings.OpenDetails}
ariaLabel={strings.OpenDetails}
onClick={this._openDetails.bind(this)}
/>)
}
</div>
<div className={styles.membersAndLabels}>
{showAssignedTo && (<div className={styles.assignedto}></div>)}
@ -68,13 +70,13 @@ export default class KanbanTask extends React.Component<IKanbanTaskProps, IKanba
}
}
private _openDetails():void {
private _openDetails(): void {
debugger;
if(this.props.openDetails) {
if (this.props.openDetails) {
this.props.openDetails(this.props.taskId);
}
}
}

12
samples/react-kanban-board/src/kanban/MockKanban.tsx
View File

@ -26,7 +26,7 @@ export class MockKanban extends React.Component<IMockKanbanProps, IMockKanbanSta
],
tasks: [
{
taskId: 1, title: 'test1', bucket: 'Not Started',
taskId: '1', title: 'test1', bucket: 'Not Started',
mamagedProperties: [
{
name: 'Prop1',
@ -52,8 +52,8 @@ export class MockKanban extends React.Component<IMockKanbanProps, IMockKanbanSta
}
]
},
{ taskId: 2, title: 'test2', bucket: 'Not Started' },
{ taskId: 3, title: 'test3', 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' },
@ -88,17 +88,17 @@ export class MockKanban extends React.Component<IMockKanbanProps, IMockKanbanSta
private _toggleCompleted(taskId: number | string): void {
private _toggleCompleted(taskId: string): void {
//TODO
}
private _allowMove(taskId: number | 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: number | string, targetBucket: IKanbanBucket): void {
private _moved(taskId: string, targetBucket: IKanbanBucket): void {
debugger;
const elementsIndex = findIndex(this.state.tasks, element => element.taskId == taskId);
let newArray = [...this.state.tasks];

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

@ -36,4 +36,22 @@ Something like this sould come out, but styling is currently bad
![prototype](./img1.PNG "prototype")
Something like this sould come out, but styling is currently bad
![prototype](./sample.gif "prototype on 2nd day")
![prototype](./sample.gif "prototype on 2nd day")
IMPORTANT
```
IKanbanTask {
taskId: string;
}
```
has to be a string because, i use event ```event.dataTransfer.setData``` and this accespts only strings in IE
```
event.dataTransfer.setData('text',1)
Invalid argument.
```
The second big thing is IE allows only to set the value 'text' event.dataTransfer.setData('text','1')
```
event.dataTransfer.setData('xyz','1')
Unexpected call to method or property access.
```

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

@ -47,6 +47,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
}
);
*/
const element: React.ReactElement<IMockKanbanProps > = React.createElement(
MockKanban,
{
@ -55,6 +56,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
);
ReactDom.render(element, this.domElement);
}
protected onDispose(): void {