Added Persona

samples/react-kanban-board/src/kanban/IKanbanBoardTaskSettings.ts

@@ -1,5 +1,4 @@
 export interface IKanbanBoardTaskSettings {
-    showLabels: boolean;
     showPriority: boolean;
     showAssignedTo: boolean;
     showTaskDetailsButton: boolean;

samples/react-kanban-board/src/kanban/IKanbanTask.ts

@@ -1,7 +1,12 @@
+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[];
 
@@ -11,8 +16,8 @@ export interface IKanbanTaskManagedProps {
     name: string;
     displayName?: string;
     type: KanbanTaskMamagedPropertyType;
-    value: any;
+    value: string | number | IPersonaProps | IPersonaProps[] | any;
-    renderer?: (name: string, value: object, type:KanbanTaskMamagedPropertyType) => JSX.Element;
+    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,
+    string = 1,
-    number=2,
+    number = 2,
-    percent=3,
+    percent = 3,
-    html=4,
+    html = 4,
-    person=5,
+    person = 5,
-    persons=6,
+    persons = 6,
-    complex=7
+    complex = 7
 }

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<IKanbanComponentPro
         let renderer: (task?: IKanbanTask, bucket?: IKanbanBucket) => JSX.Element = () => (<div>Dialog Renderer Not Set</div>);
         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<IKanbanComponentPro
             </DialogFooter>
 
         </Dialog>);
-
-
-        // Error Not found or more than one
-
-        return (<div></div>);
-
     }
 
     private clickEditTask(): void {
@@ -193,7 +187,6 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
         }
     }
     private saveEditTask() {
-
         if (this.props.taskactions.editTaskSaved) {
             const edittask = clone(this.state.editTask);
             //check fist state and than event or in the other way
@@ -201,7 +194,6 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
             this.props.taskactions.editTaskSaved(edittask);
         } else {
             throw "allowEdit is Set but no handler is set";
-
         }
     }
     private saveAddTask() {
@@ -213,14 +205,35 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
             this.props.taskactions.editTaskSaved(edittask);
         } else {
             throw "allowAdd is Set but no handler is set";
-
         }
     }
 
 
 
     private internalTaskDetailRenderer(task: IKanbanTask): JSX.Element {
+        const  {tasksettings} = this.props;
         return (<Stack>
+           {tasksettings && tasksettings.showPriority && ( 
+           <KanbanTaskManagedProp 
+            name="assignedTo"
+            displayName={strings.Priority}
+            type={KanbanTaskMamagedPropertyType.string }
+            value={task.priority}
+             key={'assignedToProp'} />
+             )} 
+            {tasksettings && tasksettings.showAssignedTo && (<KanbanTaskManagedProp 
+            name="assignedTo"
+            displayName={strings.AssignedTo}
+            type={KanbanTaskMamagedPropertyType.persons }
+            value={task.assignedTo}
+             key={'assignedToProp'} />
+             )}
+             <KanbanTaskManagedProp 
+            name="assignedTo"
+            displayName={strings.HtmlDescription}
+            type={KanbanTaskMamagedPropertyType.html }
+            value={task.htmlDescription}
+             key={'htmlDescriptionProp'} />
              
             {task.mamagedProperties && (
                 task.mamagedProperties.map((p, i) => {
@@ -229,7 +242,6 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
                     );
                 })
             )}
-
         </Stack>
         );
     }

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<IKanbanTaskProps, IKanba
     }
     public render(): React.ReactElement<IKanbanTaskProps> {
 
-        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<IKanbanTaskProps, IKanba
 
                 </div>
                 <div className={styles.membersAndLabels}>
-                    {showAssignedTo && (<div className={styles.assignedto}></div>)}
+                    {showPriority && this.props.priority && (<div className={styles.priority}>{this.props.priority}</div>)}
-                    {showLabels && (<div className={styles.labels}></div>)}
+
-                    {showPriority && (<div className={styles.priority}></div>)}
+                    {showAssignedTo && this.props.assignedTo && (<div className={styles.assignedto}>
+                        {
+                            this.props.assignedTo.map((p, i) => (
+                                <div key={'personawrapper' + i}>
+                                    <Persona
+                                        key={'persona' + i}
+                                        {...p}
+                                        size={PersonaSize.size32}
+                                        hidePersonaDetails={false}
+                                    />
+                                </div>))
+                        }
+                    </div>)}
+
+
                 </div>
             </div>
         );

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<IKanbanTaskMa
                 return (<span>{value} </span>);
                 break;
             case KanbanTaskMamagedPropertyType.number:
-                return (<span>{'' + value} </span>);
+                return (<span>{value} </span>);
                 //TODO  maybe Formater
                 break;
             case KanbanTaskMamagedPropertyType.percent:
@@ -44,22 +45,39 @@ export default class KanbanTaskManagedProp extends React.Component<IKanbanTaskMa
                 break;
             case KanbanTaskMamagedPropertyType.html:
                 return (<span>{ReactHtmlParser(value)}</span>);
-                //TODO  maybe better Formater
                 break;
             case KanbanTaskMamagedPropertyType.person:
-                return (<span>TODO</span>);
+
-                //TODO 
+                return (<span>
+                    {value && (
+                        <Persona
+                            {...value}
+                            size={PersonaSize.size32}
+                            hidePersonaDetails={false} />
+                    )}
+                </span>);
                 break;
             case KanbanTaskMamagedPropertyType.persons:
-                return (<span>TODO</span>);
+                return (<span>
-                //TODO 
+                    {
+                        (value && (
+                            (value as IPersonaProps[]).map((p, i) => (<Persona
+                                key={'persona' + i}
+                                {...value}
+                                size={PersonaSize.size32}
+                                hidePersonaDetails={false}
+                            />))
+                            )
+                        )
+                    }
+                  };
+                </span>);
                 break;
             case KanbanTaskMamagedPropertyType.complex:
                 return (<span>{JSON.stringify(value)}</span>);
                 break;
             default:
                 throw "Unknow KanbanTaskMamagedPropertyType";
-
                 break;
         }
     }

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)
 

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",
+    "AddTaskDlgHeadline": "Add Task",
-    "EditTaskDlgHeadline":"Edit Task",
+    "EditTaskDlgHeadline": "Edit Task",
+    "AssignedTo": "Assigned to",
+    "HtmlDescription": "Description",
+    "Priority": "Priority"
   }
 });

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;
+  EditTaskBtn: string;
-  SaveTaskBtn:string;
+  SaveTaskBtn: string;
-  SaveAddTaskBtn:string;
+  SaveAddTaskBtn: string;
-  CloseTaskDialog:string;
+  CloseTaskDialog: string;
-  AddTaskDlgHeadline:string;
+  AddTaskDlgHeadline: string;
-  EditTaskDlgHeadline:string;
+  EditTaskDlgHeadline: string;
+
+  AssignedTo: string;
+  HtmlDescription: string;
+  Priority:string;
 }
 
 declare module 'KanbanBoardStrings' {