+ {this.state.isloading ? (
+
+ ) : (
+ <>
+ {this.state.hasError ? ( // has error
+
{this.state.errorMessage}
+ ) : (
+ <>
+
+ ) => {
+ this.setState({ showDialog: true });
+ }}
+ />
+
+
+
+
+ {renderTasks.length === 0 ? ( // has tasks ?
+ <>
+
+
+
+
+ {strings.NoTaskFoundLabel}
+
+ >
+ ) : (
+ <>
+
+ {renderTasks}
+
+ >
+ )}
+ {this.state.showDialog && (
+
+ )}
+ >
+ )}
+ >
+ )}
+
+ );
+ }
+}
diff --git a/samples/react-mytasks/src/webparts/myTasks/components/NewTask/INewTaskProps.ts b/samples/react-mytasks/src/webparts/myTasks/components/NewTask/INewTaskProps.ts
new file mode 100644
index 000000000..f12d6b4c9
--- /dev/null
+++ b/samples/react-mytasks/src/webparts/myTasks/components/NewTask/INewTaskProps.ts
@@ -0,0 +1,7 @@
+import { ITask} from './../../../../services/ITask';
+import spservice from './../../../../services/spservices';
+export interface INewTaskProps{
+ spservice: spservice;
+ displayDialog:boolean;
+ onDismiss: (refresh:boolean) => void;
+}
diff --git a/samples/react-mytasks/src/webparts/myTasks/components/NewTask/INewTaskState.ts b/samples/react-mytasks/src/webparts/myTasks/components/NewTask/INewTaskState.ts
new file mode 100644
index 000000000..f0294f78c
--- /dev/null
+++ b/samples/react-mytasks/src/webparts/myTasks/components/NewTask/INewTaskState.ts
@@ -0,0 +1,19 @@
+
+import { IContextualMenu, IContextualMenuItem , IFacepilePersona} from "office-ui-fabric-react";
+
+export interface INewTaskState {
+hideDialog: boolean;
+hasError: boolean;
+errorMessage: string;
+planSelectedKey: string | number;
+taskName: string;
+disableAdd:boolean;
+selectedBucket?:IContextualMenuItem;
+buckets:IContextualMenuItem[];
+isLoading: boolean;
+addAssigns: boolean;
+dueDate?: string;
+calloutTarget: HTMLElement;
+assignments: IFacepilePersona[];
+
+}
diff --git a/samples/react-mytasks/src/webparts/myTasks/components/NewTask/NewTask.module.scss b/samples/react-mytasks/src/webparts/myTasks/components/NewTask/NewTask.module.scss
new file mode 100644
index 000000000..6a3c01071
--- /dev/null
+++ b/samples/react-mytasks/src/webparts/myTasks/components/NewTask/NewTask.module.scss
@@ -0,0 +1,10 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+.selectPlanContainer{
+ display: flex;
+ align-items: center;
+}
+
+.peoplePicker {
+ border-style: none;
+ background-color: $ms-color-neutralLighter;
+}
diff --git a/samples/react-mytasks/src/webparts/myTasks/components/NewTask/NewTask.tsx b/samples/react-mytasks/src/webparts/myTasks/components/NewTask/NewTask.tsx
new file mode 100644
index 000000000..a8f7fa0d3
--- /dev/null
+++ b/samples/react-mytasks/src/webparts/myTasks/components/NewTask/NewTask.tsx
@@ -0,0 +1,468 @@
+import * as jsStyles from './NewTaskStyles';
+import * as moment from 'moment';
+import * as React from 'react';
+import styles from './NewTask.module.scss';
+import {
+ ActionButton,
+ CommandButton,
+ DatePicker,
+ DayOfWeek,
+ DefaultButton,
+ Dialog,
+ DialogFooter,
+ DialogType,
+ Dropdown,
+ FirstWeekOfYear,
+ Icon,
+ IContextualMenu,
+ IContextualMenuItem,
+ IconType,
+ IDatePickerStrings,
+ IDropdownOption,
+ IDropdownProps,
+ IIconProps,
+ ITextFieldProps,
+ MessageBar,
+ MessageBarType,
+ PrimaryButton,
+ Spinner,
+ SpinnerType,
+ Stack,
+ TextField,
+ Facepile,
+ OverflowButtonType,
+ PersonaSize,
+ IFacepilePersona,
+ } from 'office-ui-fabric-react';
+import { Assigns } from './../Assigns/Assigns';
+import { CommunicationColors } from '@uifabric/fluent-theme/lib/fluent/FluentColors';
+import { DefaultPalette, FontSizes, FontWeights } from 'office-ui-fabric-react/lib/Styling';
+import { INewTaskProps } from './INewTaskProps';
+import { INewTaskState } from './INewTaskState';
+import { IPlannerBucket } from '../../../../services/IPlannerBucket';
+import { IPlannerPlanExtended } from '../../../../services/IPlannerPlanExtended';
+import { IUser } from '../../../../services/IUser';
+import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker';
+import { IPlannerPlan } from '../../../../services/IPlannerPlan';
+import { IMember } from '../../../../services/IGroupMembers';
+import { AssignMode } from '../Assigns/EAssignMode';
+const DayPickerStrings: IDatePickerStrings = {
+ months: [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December'
+ ],
+
+ shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+
+ days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+
+ shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+
+ goToToday: 'Go to today',
+ prevMonthAriaLabel: 'Go to previous month',
+ nextMonthAriaLabel: 'Go to next month',
+ prevYearAriaLabel: 'Go to previous year',
+ nextYearAriaLabel: 'Go to next year',
+ closeButtonAriaLabel: 'Close date picker'
+};
+
+const textFieldStylesdatePicker: ITextFieldProps = {
+ style: { display: 'flex', justifyContent: 'flex-start', marginLeft: 15 },
+ iconProps: { style: { left: 0 } }
+};
+
+const addFriendIcon: IIconProps = { iconName: 'AddFriend', style: { marginLeft: 0, paddingLeft: 0 } };
+const taskBoardIcon: IIconProps = {iconName: 'Taskboard', style: { left: 5, marginLeft: 0, paddingLeft: 0 }};
+/**
+ * New task
+ */
+export class NewTask extends React.Component