Added Persona
This commit is contained in:
parent
5a84a00f54
commit
881f37f254
|
@ -1,5 +1,4 @@
|
|||
export interface IKanbanBoardTaskSettings {
|
||||
showLabels: boolean;
|
||||
showPriority: boolean;
|
||||
showAssignedTo: boolean;
|
||||
showTaskDetailsButton: boolean;
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -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,15 +205,36 @@ 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) => {
|
||||
return (
|
||||
|
@ -229,7 +242,6 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
|
|||
);
|
||||
})
|
||||
)}
|
||||
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>)}
|
||||
{showLabels && (<div className={styles.labels}></div>)}
|
||||
{showPriority && (<div className={styles.priority}></div>)}
|
||||
{showPriority && this.props.priority && (<div className={styles.priority}>{this.props.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>
|
||||
);
|
||||
|
|
|
@ -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>);
|
||||
//TODO
|
||||
return (<span>
|
||||
{
|
||||
(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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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' {
|
||||
|
|
Loading…
Reference in New Issue