From 881f37f25405e347dfd05f899b09bc65b65ecf7a Mon Sep 17 00:00:00 2001 From: petkir Date: Sat, 20 Jun 2020 20:23:23 +0200 Subject: [PATCH] Added Persona --- .../src/kanban/IKanbanBoardTaskSettings.ts | 1 - .../src/kanban/IKanbanTask.ts | 27 +++++++----- .../src/kanban/KanbanComponent.tsx | 44 ++++++++++++------- .../src/kanban/KanbanTask.tsx | 26 ++++++++--- .../src/kanban/KanbanTaskManagedProp.tsx | 32 +++++++++++--- .../react-kanban-board/src/kanban/Readme.md | 3 +- .../src/kanban/loc/en-us.js | 7 ++- .../src/kanban/loc/mystrings.d.ts | 16 ++++--- 8 files changed, 106 insertions(+), 50 deletions(-) diff --git a/samples/react-kanban-board/src/kanban/IKanbanBoardTaskSettings.ts b/samples/react-kanban-board/src/kanban/IKanbanBoardTaskSettings.ts index a5e36e7b7..681873a78 100644 --- a/samples/react-kanban-board/src/kanban/IKanbanBoardTaskSettings.ts +++ b/samples/react-kanban-board/src/kanban/IKanbanBoardTaskSettings.ts @@ -1,5 +1,4 @@ export interface IKanbanBoardTaskSettings { - showLabels: boolean; showPriority: boolean; showAssignedTo: boolean; showTaskDetailsButton: boolean; diff --git a/samples/react-kanban-board/src/kanban/IKanbanTask.ts b/samples/react-kanban-board/src/kanban/IKanbanTask.ts index f9a76dacd..02772e686 100644 --- a/samples/react-kanban-board/src/kanban/IKanbanTask.ts +++ b/samples/react-kanban-board/src/kanban/IKanbanTask.ts @@ -1,18 +1,23 @@ +import { IPersonaProps } from "office-ui-fabric-react/lib/Persona"; + export interface IKanbanTask { - taskId: string; + taskId: string; title: string; isCompleted?: boolean; + assignedTo?: IPersonaProps[]; + htmlDescription?:string; + priority?:string; bucket: string; mamagedProperties?: IKanbanTaskManagedProps[]; - + } export interface IKanbanTaskManagedProps { name: string; displayName?: string; type: KanbanTaskMamagedPropertyType; - value: any; - renderer?: (name: string, value: object, type:KanbanTaskMamagedPropertyType) => JSX.Element; + value: string | number | IPersonaProps | IPersonaProps[] | any; + renderer?: (name: string, value: object, type: KanbanTaskMamagedPropertyType) => JSX.Element; } /* 0 is bad because @@ -20,11 +25,11 @@ export interface IKanbanTaskManagedProps { if(value) {is false} */ export enum KanbanTaskMamagedPropertyType { - string=1, - number=2, - percent=3, - html=4, - person=5, - persons=6, - complex=7 + string = 1, + number = 2, + percent = 3, + html = 4, + person = 5, + persons = 6, + complex = 7 } \ 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 index 760b4d956..43a06d7d2 100644 --- a/samples/react-kanban-board/src/kanban/KanbanComponent.tsx +++ b/samples/react-kanban-board/src/kanban/KanbanComponent.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import styles from './KanbanComponent.module.scss'; import * as strings from 'KanbanBoardStrings'; -import { IKanbanTask } from './IKanbanTask'; +import { IKanbanTask, KanbanTaskMamagedPropertyType } from './IKanbanTask'; import { IKanbanBoardTaskSettings } from './IKanbanBoardTaskSettings'; import { IKanbanBoardTaskActions } from './IKanbanBoardTaskActions'; import { IKanbanBoardRenderers } from './IKanbanBoardRenderers'; @@ -125,20 +125,20 @@ export default class KanbanComponent extends React.Component JSX.Element = () => (
Dialog Renderer Not Set
); let task: IKanbanTask = undefined; let bucket: IKanbanBucket = undefined; - let dialogheadline:string =''; + let dialogheadline: string = ''; switch (this.state.dialogState) { case DialogState.Edit: task = this.getTaskByID(this.state.openTaskId); renderer = this.internalTaskEditRenderer.bind(this); - dialogheadline =strings.EditTaskDlgHeadline; + dialogheadline = strings.EditTaskDlgHeadline; break; case DialogState.New: renderer = this.internalTaskAddRenderer.bind(this); - dialogheadline =strings.AddTaskDlgHeadline; + dialogheadline = strings.AddTaskDlgHeadline; break; default: task = this.getTaskByID(this.state.openTaskId); - dialogheadline =task.title; + dialogheadline = task.title; renderer = (this.props.renderers && this.props.renderers.taskDetail) ? this.props.renderers.taskDetail : this.internalTaskDetailRenderer.bind(this); break; @@ -171,12 +171,6 @@ export default class KanbanComponent extends React.Component ); - - - // Error Not found or more than one - - return (
); - } private clickEditTask(): void { @@ -193,7 +187,6 @@ export default class KanbanComponent extends React.Component - + {tasksettings && tasksettings.showPriority && ( + + )} + {tasksettings && tasksettings.showAssignedTo && ( + )} + + {task.mamagedProperties && ( task.mamagedProperties.map((p, i) => { return ( @@ -229,7 +242,6 @@ export default class KanbanComponent extends React.Component ); } diff --git a/samples/react-kanban-board/src/kanban/KanbanTask.tsx b/samples/react-kanban-board/src/kanban/KanbanTask.tsx index 7f43b56b8..45a91cad3 100644 --- a/samples/react-kanban-board/src/kanban/KanbanTask.tsx +++ b/samples/react-kanban-board/src/kanban/KanbanTask.tsx @@ -6,11 +6,11 @@ import { IKanbanTask } from './IKanbanTask'; import { IKanbanBoardTaskSettings } from './IKanbanBoardTaskSettings'; import { IKanbanBoardTaskActions } from './IKanbanBoardTaskActions'; import classNames from 'classnames'; -import { IconNames } from 'office-ui-fabric-react'; +import { IconNames, Persona, PersonaSize } from 'office-ui-fabric-react'; export interface IKanbanTaskProps extends IKanbanTask, IKanbanBoardTaskSettings { - toggleCompleted?: (taskId: string) => void; + toggleCompleted?: (taskId: string) => void; openDetails: (taskId: string) => void; onDragStart: (event) => void; onDragEnd: (event) => void; @@ -26,7 +26,7 @@ export default class KanbanTask extends React.Component { - const { title, showLabels, showPriority, showAssignedTo, isCompleted, isMoving, showTaskDetailsButton } = this.props; + const { title, showPriority, showAssignedTo, isCompleted, isMoving, showTaskDetailsButton } = this.props; const showCompleted = !!this.props.toggleCompleted; const iconCompleted = { iconName: isCompleted ? 'RadioBtnOn' : 'RadioBtnOff' }; return ( @@ -56,9 +56,23 @@ export default class KanbanTask extends React.Component
- {showAssignedTo && (
)} - {showLabels && (
)} - {showPriority && (
)} + {showPriority && this.props.priority && (
{this.props.priority}
)} + + {showAssignedTo && this.props.assignedTo && (
+ { + this.props.assignedTo.map((p, i) => ( +
+ +
)) + } +
)} + +
); diff --git a/samples/react-kanban-board/src/kanban/KanbanTaskManagedProp.tsx b/samples/react-kanban-board/src/kanban/KanbanTaskManagedProp.tsx index 0dfe546e4..34c4da385 100644 --- a/samples/react-kanban-board/src/kanban/KanbanTaskManagedProp.tsx +++ b/samples/react-kanban-board/src/kanban/KanbanTaskManagedProp.tsx @@ -6,6 +6,7 @@ import styles from './KanbanTaskManagedProp.module.scss'; import { IKanbanTaskManagedProps, KanbanTaskMamagedPropertyType } from './IKanbanTask'; import { IStackStyles, Stack } from 'office-ui-fabric-react/lib/Stack'; import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser'; +import { Persona, PersonaSize, PersonaPresence, IPersonaSharedProps, IPersonaProps } from 'office-ui-fabric-react'; export interface IKanbanTaskManagedPropProps extends IKanbanTaskManagedProps { } @@ -35,7 +36,7 @@ export default class KanbanTaskManagedProp extends React.Component{value} ); break; case KanbanTaskMamagedPropertyType.number: - return ({'' + value} ); + return ({value} ); //TODO maybe Formater break; case KanbanTaskMamagedPropertyType.percent: @@ -44,22 +45,39 @@ export default class KanbanTaskManagedProp extends React.Component{ReactHtmlParser(value)}); - //TODO maybe better Formater break; case KanbanTaskMamagedPropertyType.person: - return (TODO); - //TODO + + return ( + {value && ( + + )} + ); break; case KanbanTaskMamagedPropertyType.persons: - return (TODO); - //TODO + return ( + { + (value && ( + (value as IPersonaProps[]).map((p, i) => ()) + ) + ) + } + }; + ); break; case KanbanTaskMamagedPropertyType.complex: return ({JSON.stringify(value)}); break; default: throw "Unknow KanbanTaskMamagedPropertyType"; - break; } } diff --git a/samples/react-kanban-board/src/kanban/Readme.md b/samples/react-kanban-board/src/kanban/Readme.md index 47ba41858..4b05e4aac 100644 --- a/samples/react-kanban-board/src/kanban/Readme.md +++ b/samples/react-kanban-board/src/kanban/Readme.md @@ -5,6 +5,7 @@ Thinking about Kanban component with Fluent Ui Components ## current allowMove from one Bucket to the Other tested move task to other Bucket works +internalDislplayRenderer: Person / Persons playing with drag visibility @@ -59,7 +60,7 @@ Unexpected call to method or property access. # Next Steps Component: * think about Promise Task Actions, because actions are async -* internalDislplayRenderer: Person / Persons + * EditSchema To support Edit and New PNP Controls :) * BucketEdit Component (can be used in CustomPropertyPane) 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 3e1274178..bf8448808 100644 --- a/samples/react-kanban-board/src/kanban/loc/en-us.js +++ b/samples/react-kanban-board/src/kanban/loc/en-us.js @@ -9,7 +9,10 @@ define([], function () { "SaveTaskBtn": "Save and Close", "SaveAddTaskBtn": "Add and Close", "CloseTaskDialog": "Close", - "AddTaskDlgHeadline":"Add Task", - "EditTaskDlgHeadline":"Edit Task", + "AddTaskDlgHeadline": "Add Task", + "EditTaskDlgHeadline": "Edit Task", + "AssignedTo": "Assigned to", + "HtmlDescription": "Description", + "Priority": "Priority" } }); 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 0d5893f79..c36461212 100644 --- a/samples/react-kanban-board/src/kanban/loc/mystrings.d.ts +++ b/samples/react-kanban-board/src/kanban/loc/mystrings.d.ts @@ -4,12 +4,16 @@ declare interface IKanbanBoardStrings { IsNotCompleted: string; AddTask: string; OpenDetails: string; - EditTaskBtn:string; - SaveTaskBtn:string; - SaveAddTaskBtn:string; - CloseTaskDialog:string; - AddTaskDlgHeadline:string; - EditTaskDlgHeadline:string; + EditTaskBtn: string; + SaveTaskBtn: string; + SaveAddTaskBtn: string; + CloseTaskDialog: string; + AddTaskDlgHeadline: string; + EditTaskDlgHeadline: string; + + AssignedTo: string; + HtmlDescription: string; + Priority:string; } declare module 'KanbanBoardStrings' {