sp-dev-fx-webparts/samples/react-mytasks/README.md

# React My Tasks Web Part 

## Summary

This web part allows user to manage planner tasks in SharePoint Site. The UI was inspired on Planner UI, it is full implemented with Office-UI-Fabric Components. Use MSGraph API's and PnPjs to data access.

The user can search task by name, can filter by progress status, all data are dynamic updated on change.

![MyTasks](/samples/react-mytasks/assets/MyTasks.gif)

## List of Task Cards

![MyTasks](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/My-Tasks/samples/react-mytasks/assets/screen1.png)

## Filter Tasks

![MyTasks](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/My-Tasks/samples/react-mytasks/assets/screen2.png)  

</br>
</br>


![tenant properties](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/My-Tasks/samples/react-mytasks/assets/screen3.png)  


</br>
</br>


![tenant properties](/samples/react-mytasks/assets/screen4.png) 


</br>
</br>


![tenant properties](/samples/react-mytasks/assets/screen5.png)  

</br>
</br>

## Add Task  
  
![MyTasks](/samples/react-mytasks/assets/AddTask.gif)

</br>
</br>


![tenant properties](/samples/react-mytasks/assets/screen6.png)  

</br>
</br>


![tenant properties](/samples/react-mytasks/assets/screen7.png)  

</br>
</br>

## Edit Tasks


![MyTasks](/samples/react-mytasks/assets/EditTask.gif)

</br>
</br>

![tenant properties](/samples/react-mytasks/assets/screen8.png)  
  

</br>
</br>


![tenant properties](/samples/react-mytasks/assets/screen9.png)  
  

</br>
</br>


![tenant properties](/samples/react-mytasks/assets/screen10.png)  

</br>
</br>


![tenant properties](/samples/react-mytasks/assets/screen11.png)  

  
</br>
</br>


![tenant properties](/samples/react-mytasks/assets/screen12.png)  


</br>
</br>


![tenant properties](/samples/react-mytasks/assets/screen13.png)  

  
</br>
</br>


![tenant properties](/samples/react-mytasks/assets/screen14.png)  

  
## Used SharePoint Framework Version 
![SPFx 1.11](https://img.shields.io/badge/version-1.11.0-green.svg)

## Applies to

* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)

## WebPart Properties
 
Property |Type|Required| comments
--------------------|----|--------|----------
WebPart Title| Text| no|
 

## Solution

The Web Part Use PnPjs library, Office-ui-fabric-react components and MSGraph API's

Solution|Author(s)
--------|---------
My Tasks |João Mendes
My Tasks |Swaminathan Sriram

## Version history

Version|Date|Comments
-------|----|--------
1.0.0|November 17, 2019|Initial release
1.0.1|September 9, 2020|Upgraded to SPFx 1.11.

## Disclaimer

**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

---

## Minimal Path to Awesome

- Clone this repository
- Move to sample folder
- in the command line run:
  - `npm install`
  - `gulp build`
  - `gulp bundle --ship`
  - `gulp package-solution --ship`
  - `Add to AppCatalog and deploy`
   - `go to SharePoint Admin Center and Approve required API Permissions`


<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-MyTask" />
Update Docs and GIFs 2019-11-18 16:27:11 -05:00			`# React My Tasks Web Part`
Update Docs 2019-11-18 14:53:51 -05:00
			`## Summary`

Update Docs 2019-11-18 15:36:40 -05:00			`This web part allows user to manage planner tasks in SharePoint Site. The UI was inspired on Planner UI, it is full implemented with Office-UI-Fabric Components. Use MSGraph API's and PnPjs to data access.`

			`The user can search task by name, can filter by progress status, all data are dynamic updated on change.`
Update Docs 2019-11-18 14:53:51 -05:00
Update README.md 2020-05-30 10:51:33 -04:00			`![MyTasks](/samples/react-mytasks/assets/MyTasks.gif)`
Add GIF 2019-11-18 16:20:19 -05:00
Fixed issues with SPFx 1.11 upgrade 2020-09-23 22:18:48 -04:00			`## List of Task Cards`
Update Docs 2019-11-18 15:36:40 -05:00
Update Docs 2019-11-18 15:06:42 -05:00			`![MyTasks](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/My-Tasks/samples/react-mytasks/assets/screen1.png)`
Update Docs 2019-11-18 14:53:51 -05:00
			`## Filter Tasks`

Update Docs 2019-11-18 15:06:42 -05:00			`![MyTasks](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/My-Tasks/samples/react-mytasks/assets/screen2.png)`
Update Docs 2019-11-18 14:53:51 -05:00
update Docs 2019-11-18 15:27:15 -05:00			`</br>`
			`</br>`
Update Docs 2019-11-18 15:36:40 -05:00

Update Docs 2019-11-18 15:06:42 -05:00			`![tenant properties](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/My-Tasks/samples/react-mytasks/assets/screen3.png)`
Update Docs 2019-11-18 14:53:51 -05:00

update Docs 2019-11-18 15:27:15 -05:00			`</br>`
			`</br>`
Update Docs 2019-11-18 15:36:40 -05:00

Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen4.png)`
Update Docs 2019-11-18 14:53:51 -05:00

update Docs 2019-11-18 15:27:15 -05:00			`</br>`
			`</br>`
Update Docs 2019-11-18 15:36:40 -05:00

Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen5.png)`
Update Docs 2019-11-18 14:53:51 -05:00
update Docs 2019-11-18 15:27:15 -05:00			`</br>`
			`</br>`
update Docs 2019-11-18 15:19:57 -05:00
update Docs 2019-11-18 15:12:16 -05:00			`## Add Task`

Update README.md 2020-05-30 10:53:29 -04:00			`![MyTasks](/samples/react-mytasks/assets/AddTask.gif)`
Add GIF 2019-11-18 16:20:19 -05:00
			`</br>`
			`</br>`

update Docs 2019-11-18 15:12:16 -05:00
Update Docs 2019-11-18 14:53:51 -05:00
Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen6.png)`
Update Docs 2019-11-18 14:53:51 -05:00
update Docs 2019-11-18 15:27:15 -05:00			`</br>`
			`</br>`
update Docs 2019-11-18 15:19:57 -05:00
Update Docs 2019-11-18 15:36:40 -05:00
Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen7.png)`
Update Docs 2019-11-18 14:53:51 -05:00
update Docs 2019-11-18 15:27:15 -05:00			`</br>`
			`</br>`
update Docs 2019-11-18 15:19:57 -05:00
update Docs 2019-11-18 15:12:16 -05:00			`## Edit Tasks`
Update Docs 2019-11-18 14:53:51 -05:00
update Docs 2019-11-18 15:19:57 -05:00
Update README.md 2020-05-30 10:53:29 -04:00			`![MyTasks](/samples/react-mytasks/assets/EditTask.gif)`
Add GIF 2019-11-18 16:20:19 -05:00
			`</br>`
			`</br>`
update Docs 2019-11-18 15:19:57 -05:00
Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen8.png)`
update Docs 2019-11-18 15:12:16 -05:00
Update Docs 2019-11-18 14:53:51 -05:00
update Docs 2019-11-18 15:27:15 -05:00			`</br>`
			`</br>`
update Docs 2019-11-18 15:19:57 -05:00
update Docs 2019-11-18 15:30:19 -05:00
Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen9.png)`
update Docs 2019-11-18 15:12:16 -05:00

update Docs 2019-11-18 15:27:15 -05:00			`</br>`
			`</br>`
update Docs 2019-11-18 15:30:19 -05:00

Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen10.png)`
update Docs 2019-11-18 15:12:16 -05:00
update Docs 2019-11-18 15:27:15 -05:00			`</br>`
			`</br>`
update Docs 2019-11-18 15:30:19 -05:00

Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen11.png)`
update Docs 2019-11-18 15:12:16 -05:00


update Docs 2019-11-18 15:27:15 -05:00			`</br>`
			`</br>`
update Docs 2019-11-18 15:30:19 -05:00

Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen12.png)`
Update Docs 2019-11-18 14:53:51 -05:00
update Docs 2019-11-18 15:19:57 -05:00
update Docs 2019-11-18 15:30:19 -05:00			`</br>`
			`</br>`

update Docs 2019-11-18 15:19:57 -05:00
update Docs 2019-11-18 15:12:16 -05:00
Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen13.png)`
Update Docs 2019-11-18 14:53:51 -05:00
update Docs 2019-11-18 15:12:16 -05:00
Update Docs 2019-11-18 15:36:40 -05:00			`</br>`
			`</br>`
Update Docs 2019-11-18 14:53:51 -05:00


Update README.md 2020-05-30 10:53:29 -04:00			`![tenant properties](/samples/react-mytasks/assets/screen14.png)`
Update Docs 2019-11-18 15:36:40 -05:00



Update Docs 2019-11-18 14:53:51 -05:00			`## Used SharePoint Framework Version`
Fixed issues with SPFx 1.11 upgrade 2020-09-23 22:18:48 -04:00			`![SPFx 1.11](https://img.shields.io/badge/version-1.11.0-green.svg)`
Update Docs 2019-11-18 14:53:51 -05:00
			`## Applies to`

URL dev.office.com to docs.microsoft.com 2020-06-09 03:09:22 -04:00			`* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)`
			`* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)`
Update Docs 2019-11-18 14:53:51 -05:00
			`## WebPart Properties`

			`Property \|Type\|Required\| comments`
			`--------------------\|----\|--------\|----------`
			`WebPart Title\| Text\| no\|`


			`## Solution`
Fixed issues with SPFx 1.11 upgrade 2020-09-23 22:18:48 -04:00
Update Docs 2019-11-18 14:53:51 -05:00			`The Web Part Use PnPjs library, Office-ui-fabric-react components and MSGraph API's`

			`Solution\|Author(s)`
			`--------\|---------`
			`My Tasks \|João Mendes`
Added author 2020-09-23 22:20:54 -04:00			`My Tasks \|Swaminathan Sriram`
Update Docs 2019-11-18 14:53:51 -05:00
			`## Version history`

			`Version\|Date\|Comments`
			`-------\|----\|--------`
			`1.0.0\|November 17, 2019\|Initial release`
Fixed issues with SPFx 1.11 upgrade 2020-09-23 22:18:48 -04:00			`1.0.1\|September 9, 2020\|Upgraded to SPFx 1.11.`
Update Docs 2019-11-18 14:53:51 -05:00
			`## Disclaimer`
Fixed issues with SPFx 1.11 upgrade 2020-09-23 22:18:48 -04:00
Update Docs 2019-11-18 14:53:51 -05:00			`*THIS CODE IS PROVIDED AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**`

			`---`

			`## Minimal Path to Awesome`

			`- Clone this repository`
			`- Move to sample folder`
			`- in the command line run:`
			- `npm install`
			- `gulp build`
			- `gulp bundle --ship`
			- `gulp package-solution --ship`
			- `Add to AppCatalog and deploy`
			- `go to SharePoint Admin Center and Approve required API Permissions`


			`<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-MyTask" />`