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

Added Persona

This commit is contained in:
petkir 2020-06-20 20:23:23 +02:00
parent 5a84a00f54
commit 881f37f254
8 changed files with 106 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/react-kanban-board/src/kanban/IKanbanBoardTaskSettings.ts
View File

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

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

@ -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
}

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

@ -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>
);
}

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

@ -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>
);

32
samples/react-kanban-board/src/kanban/KanbanTaskManagedProp.tsx
View File

@ -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;
}
}

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

@ -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)

7
samples/react-kanban-board/src/kanban/loc/en-us.js vendored
View File

@ -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"
}
});

16
samples/react-kanban-board/src/kanban/loc/mystrings.d.ts vendored
View File

@ -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' {