honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-02-07 13:38:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Localization Playing with UI

Browse Source
This commit is contained in:
petkir 2020-06-28 21:59:53 +02:00
parent 8f33e431eb
commit 5b7982d136
16 changed files with 628 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
samples/react-kanban-board/README.md
View File

@ -3,7 +3,7 @@
## Summary
This solution contains an SPFx webpart which shows a Kanban board using Fluent UI components ([FluentUI](https://developer.microsoft.com/fluentui/)).
This solution contains an SPFx webpart which shows a Kanban board using Office UI Fabric components ([Office UI Fabric](https://developer.microsoft.com/fluentui/)).
The webpart uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks.
![picture of the web part in action](assets/kanban-board.gif)
@ -57,9 +57,10 @@ Version|Date|Comments
Thanks form @petkir to:
Daniel Westerdale for Testing and inspiration (everytime again)
Hugo Bernier for Inspiration to use Office UI Fabric
Jean-Philippe CIVADE for Bug Report IE11 (initiator of rewrite of this Sample)
(Daniel Westerdale)[https://github.com/westerdaled] for Testing and inspiration (everytime again)
(Hugo Bernier)[https://github.com/hugoabernier] for Inspiration to use Office UI Fabric
(Jean-Philippe CIVADE)[https://github.com/ewidance] for Bug Report IE11 (initiator of rewrite of this Sample)
(RamPrasadMeenavalli)[https://github.com/RamPrasadMeenavalli] for the initial Idea
@ -67,8 +68,6 @@ Jean-Philippe CIVADE for Bug Report IE11 (initiator of rewrite of this Sample)
**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.**
### only For Version 1
**THIS WEBPART USES jQWidgets FOR SHOWING THE KANBAN BOARD. jQWidgets IS FREE TO USE UNDER THE CREATIVE COMMONS ATTRIBUTION-NONCOMMERCIAL 3.0 LICENSE. FOR COMMERCIAL USE, PLEASE CHECK THE [LICENSING TERMS](https://www.jqwidgets.com/license/) FOR jQWidgets**
---
@ -87,4 +86,4 @@ This sample highlights the following concepts
When a task is moved to different columns in the Kanban Board, the status of the respective SharePoint list item is updated using PnP JS
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-kanban-board" />

498
samples/react-kanban-board/package-lock.json generated
View File

@ -1059,6 +1059,67 @@
"requires": {
"csstype": "^2.2.0"
}
},
"@uifabric/foundation": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-0.8.3.tgz",
"integrity": "sha512-r3WhRj7Out8QAOe50BGA36R8zgRPy0D0GNPuwFK9BB9oIidf91ycj7/miY8U0TZRZi5fB3Kg+dy/uxSDfgC6Og==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.50.7",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
},
"dependencies": {
"@uifabric/merge-styles": {
"version": "6.19.4",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz",
"integrity": "sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"tslib": "^1.7.1"
}
},
"@uifabric/styling": {
"version": "6.50.7",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.50.7.tgz",
"integrity": "sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
}
},
"@uifabric/utilities": {
"version": "6.45.2",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.45.2.tgz",
"integrity": "sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==",
"requires": {
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
"office-ui-fabric-react": {
"version": "6.143.0",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.143.0.tgz",
"integrity": "sha512-JXV1h8upR+WPYQ7SuJFgp9XuLrJUDT9QjI7bzbyY+dpwjKCX0D22BlTfi7O52IdDt4eFesJofN8DfW0A/opvMw==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/foundation": ">=0.7.1 <1.0.0",
"@uifabric/icons": ">=6.4.0 <7.0.0",
"@uifabric/merge-styles": ">=6.15.2 <7.0.0",
"@uifabric/set-version": ">=1.1.3 <2.0.0",
"@uifabric/styling": ">=6.41.0 <7.0.0",
"@uifabric/utilities": ">=6.29.3 <7.0.0",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
@ -1671,6 +1732,51 @@
"@types/react": "*"
}
},
"@uifabric/foundation": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-0.8.3.tgz",
"integrity": "sha512-r3WhRj7Out8QAOe50BGA36R8zgRPy0D0GNPuwFK9BB9oIidf91ycj7/miY8U0TZRZi5fB3Kg+dy/uxSDfgC6Og==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.50.7",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
},
"dependencies": {
"@uifabric/merge-styles": {
"version": "6.19.4",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz",
"integrity": "sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"tslib": "^1.7.1"
}
},
"@uifabric/styling": {
"version": "6.50.7",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.50.7.tgz",
"integrity": "sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
}
},
"@uifabric/utilities": {
"version": "6.45.2",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.45.2.tgz",
"integrity": "sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==",
"requires": {
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
"@uifabric/utilities": {
"version": "6.29.4",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.29.4.tgz",
@ -1681,6 +1787,22 @@
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
},
"office-ui-fabric-react": {
"version": "6.143.0",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.143.0.tgz",
"integrity": "sha512-JXV1h8upR+WPYQ7SuJFgp9XuLrJUDT9QjI7bzbyY+dpwjKCX0D22BlTfi7O52IdDt4eFesJofN8DfW0A/opvMw==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/foundation": ">=0.7.1 <1.0.0",
"@uifabric/icons": ">=6.4.0 <7.0.0",
"@uifabric/merge-styles": ">=6.15.2 <7.0.0",
"@uifabric/set-version": ">=1.1.3 <2.0.0",
"@uifabric/styling": ">=6.41.0 <7.0.0",
"@uifabric/utilities": ">=6.29.3 <7.0.0",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
@ -1800,6 +1922,67 @@
"@types/node": "*",
"@types/react": "*"
}
},
"@uifabric/foundation": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-0.8.3.tgz",
"integrity": "sha512-r3WhRj7Out8QAOe50BGA36R8zgRPy0D0GNPuwFK9BB9oIidf91ycj7/miY8U0TZRZi5fB3Kg+dy/uxSDfgC6Og==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.50.7",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
},
"dependencies": {
"@uifabric/merge-styles": {
"version": "6.19.4",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz",
"integrity": "sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"tslib": "^1.7.1"
}
},
"@uifabric/styling": {
"version": "6.50.7",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.50.7.tgz",
"integrity": "sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
}
},
"@uifabric/utilities": {
"version": "6.45.2",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.45.2.tgz",
"integrity": "sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==",
"requires": {
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
"office-ui-fabric-react": {
"version": "6.143.0",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.143.0.tgz",
"integrity": "sha512-JXV1h8upR+WPYQ7SuJFgp9XuLrJUDT9QjI7bzbyY+dpwjKCX0D22BlTfi7O52IdDt4eFesJofN8DfW0A/opvMw==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/foundation": ">=0.7.1 <1.0.0",
"@uifabric/icons": ">=6.4.0 <7.0.0",
"@uifabric/merge-styles": ">=6.15.2 <7.0.0",
"@uifabric/set-version": ">=1.1.3 <2.0.0",
"@uifabric/styling": ">=6.41.0 <7.0.0",
"@uifabric/utilities": ">=6.29.3 <7.0.0",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
@ -1884,6 +2067,67 @@
"version": "1.8.62",
"resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.8.62.tgz",
"integrity": "sha512-T9yplfIBWV6R5n0y9TuAnF8og7lUTFRqiOD/F8y3J4ziAkg3RD2Gih7p0TdTD4vmqbFJOpuuXMNMpERFFMgvvg=="
},
"@uifabric/foundation": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-0.8.3.tgz",
"integrity": "sha512-r3WhRj7Out8QAOe50BGA36R8zgRPy0D0GNPuwFK9BB9oIidf91ycj7/miY8U0TZRZi5fB3Kg+dy/uxSDfgC6Og==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.50.7",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
},
"dependencies": {
"@uifabric/merge-styles": {
"version": "6.19.4",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz",
"integrity": "sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"tslib": "^1.7.1"
}
},
"@uifabric/styling": {
"version": "6.50.7",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.50.7.tgz",
"integrity": "sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
}
},
"@uifabric/utilities": {
"version": "6.45.2",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.45.2.tgz",
"integrity": "sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==",
"requires": {
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
"office-ui-fabric-react": {
"version": "6.143.0",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.143.0.tgz",
"integrity": "sha512-JXV1h8upR+WPYQ7SuJFgp9XuLrJUDT9QjI7bzbyY+dpwjKCX0D22BlTfi7O52IdDt4eFesJofN8DfW0A/opvMw==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/foundation": ">=0.7.1 <1.0.0",
"@uifabric/icons": ">=6.4.0 <7.0.0",
"@uifabric/merge-styles": ">=6.15.2 <7.0.0",
"@uifabric/set-version": ">=1.1.3 <2.0.0",
"@uifabric/styling": ">=6.41.0 <7.0.0",
"@uifabric/utilities": ">=6.29.3 <7.0.0",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
@ -1947,6 +2191,55 @@
"@types/react": "*"
}
},
"@uifabric/foundation": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-0.8.3.tgz",
"integrity": "sha512-r3WhRj7Out8QAOe50BGA36R8zgRPy0D0GNPuwFK9BB9oIidf91ycj7/miY8U0TZRZi5fB3Kg+dy/uxSDfgC6Og==",
"dev": true,
"requires": {
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.50.7",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
},
"dependencies": {
"@uifabric/merge-styles": {
"version": "6.19.4",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz",
"integrity": "sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==",
"dev": true,
"requires": {
"@uifabric/set-version": "^1.1.3",
"tslib": "^1.7.1"
}
},
"@uifabric/styling": {
"version": "6.50.7",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.50.7.tgz",
"integrity": "sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==",
"dev": true,
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
}
},
"@uifabric/utilities": {
"version": "6.45.2",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.45.2.tgz",
"integrity": "sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==",
"dev": true,
"requires": {
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
"fs-extra": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz",
@ -1958,6 +2251,23 @@
"universalify": "^0.1.0"
}
},
"office-ui-fabric-react": {
"version": "6.143.0",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.143.0.tgz",
"integrity": "sha512-JXV1h8upR+WPYQ7SuJFgp9XuLrJUDT9QjI7bzbyY+dpwjKCX0D22BlTfi7O52IdDt4eFesJofN8DfW0A/opvMw==",
"dev": true,
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/foundation": ">=0.7.1 <1.0.0",
"@uifabric/icons": ">=6.4.0 <7.0.0",
"@uifabric/merge-styles": ">=6.15.2 <7.0.0",
"@uifabric/set-version": ">=1.1.3 <2.0.0",
"@uifabric/styling": ">=6.41.0 <7.0.0",
"@uifabric/utilities": ">=6.29.3 <7.0.0",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
},
"prop-types": {
"version": "15.6.0",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
@ -2901,14 +3211,48 @@
"integrity": "sha1-LrHQCl5Ow/pYx2r94S4YK2bcXBw="
},
"@uifabric/foundation": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-0.8.1.tgz",
"integrity": "sha512-KRy14XzKiJWVePiaRxNuDYnhV3MmUNZ+1WafOQ0ZLrZ7GnGzuny56MN8pDVaSBPigjB+ml+0RumOcw1+gTA1mw==",
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-0.8.3.tgz",
"integrity": "sha512-r3WhRj7Out8QAOe50BGA36R8zgRPy0D0GNPuwFK9BB9oIidf91ycj7/miY8U0TZRZi5fB3Kg+dy/uxSDfgC6Og==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.49.1",
"@uifabric/utilities": "^6.41.1",
"@uifabric/styling": "^6.50.7",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
},
"dependencies": {
"@uifabric/merge-styles": {
"version": "6.19.4",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz",
"integrity": "sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"tslib": "^1.7.1"
}
},
"@uifabric/styling": {
"version": "6.50.7",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.50.7.tgz",
"integrity": "sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
}
},
"@uifabric/utilities": {
"version": "6.45.2",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.45.2.tgz",
"integrity": "sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==",
"requires": {
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
"@uifabric/icons": {
@ -2970,6 +3314,83 @@
"@uifabric/set-version": ">=1.1.3 <2.0.0",
"office-ui-fabric-react": ">=6.110.1 <7.0.0",
"tslib": "^1.7.1"
},
"dependencies": {
"@uifabric/foundation": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-0.8.3.tgz",
"integrity": "sha512-r3WhRj7Out8QAOe50BGA36R8zgRPy0D0GNPuwFK9BB9oIidf91ycj7/miY8U0TZRZi5fB3Kg+dy/uxSDfgC6Og==",
"dev": true,
"requires": {
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.50.7",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
}
},
"@uifabric/icons": {
"version": "6.5.5",
"resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-6.5.5.tgz",
"integrity": "sha512-cGjzdpT0jzQ2RJvzlCVTrewaHCi4rb+ZNL2LWoceMi+5h196Y32qJwKMsc0ggR6u5CjMrzBiAxUFNppBSCutdA==",
"dev": true,
"requires": {
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.50.7",
"tslib": "^1.7.1"
}
},
"@uifabric/merge-styles": {
"version": "6.19.4",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz",
"integrity": "sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==",
"dev": true,
"requires": {
"@uifabric/set-version": "^1.1.3",
"tslib": "^1.7.1"
}
},
"@uifabric/styling": {
"version": "6.50.7",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.50.7.tgz",
"integrity": "sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==",
"dev": true,
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
}
},
"@uifabric/utilities": {
"version": "6.45.2",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.45.2.tgz",
"integrity": "sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==",
"dev": true,
"requires": {
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
},
"office-ui-fabric-react": {
"version": "6.214.0",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.214.0.tgz",
"integrity": "sha512-sYqi0bhZSdEWpQAsHSropoHm0SxLJkdvQDE+3reSnP+rWABD+WCLvMxRuunoQIFjZKDHZ1f+w+L6Nr7nXc+wbQ==",
"dev": true,
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/foundation": "^0.8.3",
"@uifabric/icons": "^6.5.5",
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.50.7",
"@uifabric/utilities": "^6.45.2",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
"@yarnpkg/lockfile": {
@ -10472,11 +10893,6 @@
"integrity": "sha1-o6vicYryQaKykE+EpiWXDzia4yo=",
"dev": true
},
"jqwidgets-scripts": {
"version": "8.1.2",
"resolved": "https://registry.npmjs.org/jqwidgets-scripts/-/jqwidgets-scripts-8.1.2.tgz",
"integrity": "sha512-2gSW2Oe5liPbCdLns3WKGgZz2rDLzwHDjTUhnkWz0c27DBnFK6v0yaPLwky+qvsIW6GJlBAHr7wlNYFvIUhBRw=="
},
"js-base64": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@ -12163,19 +12579,63 @@
"integrity": "sha512-gcBs5HHr7tjkvk/+Ls10ttb3jEllRn7SvJitX/kx/gQq8BiFMSMKr1w+oNqXlh4EgkBHWUlJVPrYUu1KW/jVaQ=="
},
"office-ui-fabric-react": {
"version": "6.143.0",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.143.0.tgz",
"integrity": "sha512-JXV1h8upR+WPYQ7SuJFgp9XuLrJUDT9QjI7bzbyY+dpwjKCX0D22BlTfi7O52IdDt4eFesJofN8DfW0A/opvMw==",
"version": "6.214.0",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.214.0.tgz",
"integrity": "sha512-sYqi0bhZSdEWpQAsHSropoHm0SxLJkdvQDE+3reSnP+rWABD+WCLvMxRuunoQIFjZKDHZ1f+w+L6Nr7nXc+wbQ==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/foundation": ">=0.7.1 <1.0.0",
"@uifabric/icons": ">=6.4.0 <7.0.0",
"@uifabric/merge-styles": ">=6.15.2 <7.0.0",
"@uifabric/set-version": ">=1.1.3 <2.0.0",
"@uifabric/styling": ">=6.41.0 <7.0.0",
"@uifabric/utilities": ">=6.29.3 <7.0.0",
"@uifabric/foundation": "^0.8.3",
"@uifabric/icons": "^6.5.5",
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.50.7",
"@uifabric/utilities": "^6.45.2",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
},
"dependencies": {
"@uifabric/icons": {
"version": "6.5.5",
"resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-6.5.5.tgz",
"integrity": "sha512-cGjzdpT0jzQ2RJvzlCVTrewaHCi4rb+ZNL2LWoceMi+5h196Y32qJwKMsc0ggR6u5CjMrzBiAxUFNppBSCutdA==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"@uifabric/styling": "^6.50.7",
"tslib": "^1.7.1"
}
},
"@uifabric/merge-styles": {
"version": "6.19.4",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz",
"integrity": "sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==",
"requires": {
"@uifabric/set-version": "^1.1.3",
"tslib": "^1.7.1"
}
},
"@uifabric/styling": {
"version": "6.50.7",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.50.7.tgz",
"integrity": "sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==",
"requires": {
"@microsoft/load-themed-styles": "^1.7.13",
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"@uifabric/utilities": "^6.41.7",
"tslib": "^1.7.1"
}
},
"@uifabric/utilities": {
"version": "6.45.2",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.45.2.tgz",
"integrity": "sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==",
"requires": {
"@uifabric/merge-styles": "^6.19.4",
"@uifabric/set-version": "^1.1.3",
"prop-types": "^15.5.10",
"tslib": "^1.7.1"
}
}
}
},
"on-finished": {

3
samples/react-kanban-board/package.json
View File

@ -28,8 +28,7 @@
"@types/react-dom": "16.8.0",
"@types/webpack-env": "1.13.1",
"classnames": "^2.2.6",
"jqwidgets-scripts": "^8.1.2",
"office-ui-fabric-react": "^6.143.0",
"office-ui-fabric-react": "6.214.0",
"react": "16.7.0",
"react-dom": "16.7.0"
},

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

@ -4,4 +4,5 @@ export interface IKanbanBucket {
percentageComplete: number;
color?:string;
allowAddTask?:boolean;
showPercentageHeadline?:boolean;
}

3
samples/react-kanban-board/src/kanban/KanbanBucket.module.scss
View File

@ -3,6 +3,9 @@
// border-right: 1px solid gray;
.headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 2px 10px;
line-height: 2em;
font-weight: 700;

58
samples/react-kanban-board/src/kanban/KanbanBucket.tsx
View File

@ -20,10 +20,10 @@ export interface IKanbanBucketProps extends IKanbanBucket {
addTask?: (bucket: string) => void;
onDragStart: (event, taskId: string, bucket: string) => void;
onDragEnd: (event, taskId: string, bucket: string) => void;
leavingTaskId?: string;
leavingBucket?: string;
@ -48,26 +48,26 @@ export default class KanbanBucket extends React.Component<IKanbanBucketProps, IK
nice to use a object merge
ECMAScript 2018 Standard Method
{...t, ...tasksettings, ...taskactions}
hope this will be translated
hope this will be translated in IE
*/
public render(): React.ReactElement<IKanbanBucketProps> {
const { bucket, bucketheadline, color, buckettasks,
const { bucket, bucketheadline, color, buckettasks,
tasksettings, percentageComplete,
allowAddTask, overBucket, leavingTaskId, leavingBucket } = this.props;
allowAddTask, showPercentageHeadline, leavingTaskId, leavingBucket } = this.props;
return (
<div
className={styles.bucket}
key={bucket}
>
<div className={styles.headline}
>
<span>{bucketheadline}</span>
{color && <div style={{ backgroundColor: color }} className={styles.colorindicator}></div>}
<ProgressIndicator percentComplete={percentageComplete / 100} />
{showPercentageHeadline && <ProgressIndicator percentComplete={percentageComplete / 100} />}
</div>
{allowAddTask && (<ActionButton
iconProps={{ iconName: 'Add' }}
@ -77,26 +77,26 @@ export default class KanbanBucket extends React.Component<IKanbanBucketProps, IK
{strings.AddTask}
</ActionButton>)}
<div className={styles.taskArea}>
{
buckettasks.map((t) => {
const merge = { ...t, ...tasksettings, };
const isMoving = (t.taskId === leavingTaskId && t.bucket === leavingBucket);
{
buckettasks.map((t) => {
const merge = { ...t, ...tasksettings, };
const isMoving = (t.taskId === leavingTaskId && t.bucket === leavingBucket);
return (<div
className={styles.taskplaceholder + (isMoving ? styles.placeholder : '')}
key={'' + t.taskId} >
<KanbanTask
key={'task' + t.taskId}
{...merge}
toggleCompleted={this.props.toggleCompleted}
isMoving={isMoving}
openDetails={this.props.openDetails}
onDragStart={(event) => this.props.onDragStart(event, t.taskId, t.bucket)}
onDragEnd={(event) => this.props.onDragEnd(event, t.taskId, t.bucket)}
/></div>
);
})
}
return (<div
className={styles.taskplaceholder + (isMoving ? styles.placeholder : '')}
key={'' + t.taskId} >
<KanbanTask
key={'task' + t.taskId}
{...merge}
toggleCompleted={this.props.toggleCompleted}
isMoving={isMoving}
openDetails={this.props.openDetails}
onDragStart={(event) => this.props.onDragStart(event, t.taskId, t.bucket)}
onDragEnd={(event) => this.props.onDragEnd(event, t.taskId, t.bucket)}
/></div>
);
})
}
</div>
</div >
);

52
samples/react-kanban-board/src/kanban/KanbanBucketConfigurator.tsx
View File

@ -83,14 +83,20 @@ export default class KanbanBucketConfigurator extends React.Component<IKanbanBuc
onChange={(ev, checked) => { this.setState({ showHeadline: checked }); }} />
*/}
<TextField label={strings.BucketConfigHeadline} defaultValue={statebucket.bucketheadline}
onChanged={(value: string) => {
const bucket = clone(this.state.bucket);
bucket.bucketheadline = value;
this.setState({ bucket: bucket });
}}
onChange={(ev, value?: string) => {
const bucket = clone(this.state.bucket);
bucket.bucketheadline = value;
this.setState({ bucket: bucket });
}}
/>
<Slider
<Toggle label={strings.BucketConfigShowPercentage} onText={strings.BucketConfigShowPercentageShow} offText={strings.BucketConfigShowPercentageHide} inlineLabel
checked={statebucket.showPercentageHeadline}
onChange={(ev, checked) => {
const bucket = clone(this.state.bucket);
bucket.showPercentageHeadline = checked;
this.setState({ bucket: bucket });
}} />
{statebucket.showPercentageHeadline && <Slider
label={strings.BucketConfigPercentageComplete}
max={100}
value={statebucket.percentageComplete}
@ -102,17 +108,7 @@ export default class KanbanBucketConfigurator extends React.Component<IKanbanBuc
bucket.percentageComplete = value;
this.setState({ bucket: bucket });
}}
/>
{/*
TODO editmapping
<Toggle label={strings.BucketConfigAllowAddTask} onText="On" offText="Off" inlineLabel
checked={statebucket.allowAddTask}
onChange={(ev, checked) => {
const bucket = clone(this.state.bucket);
bucket.allowAddTask = checked;
this.setState({ bucket: bucket });
}} />
*/}
/>}
<Toggle label={strings.BucketConfigUseColor} onText="On" offText="Off" inlineLabel
checked={this.state.useColor}
onChange={(ev, checked) => { this.setState({ useColor: checked }); }} />
@ -124,29 +120,15 @@ export default class KanbanBucketConfigurator extends React.Component<IKanbanBuc
// showPreview={true}
onChange={(ev: any, colorObj: IColor) => {
const bucket = clone(this.state.bucket);
bucket.color = colorObj.str;
bucket.color = colorObj.str;
this.setState({ bucket: bucket });
}
}
// The ColorPicker provides default English strings for visible text.
// If your app is localized, you MUST provide the `strings` prop with localized strings.
/*
FluentUI
strings={{
// By default, the sliders will use the text field labels as their aria labels.
// If you'd like to provide more detailed instructions, you can use these props.
alphaAriaLabel: 'Alpha slider: Use left and right arrow keys to change value, hold shift for a larger jump',
transparencyAriaLabel:
'Transparency slider: Use left and right arrow keys to change value, hold shift for a larger jump',
hueAriaLabel: 'Hue slider: Use left and right arrow keys to change value, hold shift for a larger jump',
}}
*/
/>
)}
<Stack>
<PrimaryButton text={strings.BucketConfigSave} onClick={this.submitData.bind(this)} />
{/* <!-- TODO Confirmation --!> */}
<DefaultButton text={strings.BucketConfigReset} onClick={this.resetState.bind(this)} />
</Stack>
@ -154,7 +136,7 @@ export default class KanbanBucketConfigurator extends React.Component<IKanbanBuc
);
}
private resetState():void {
private resetState(): void {
const newbucket: IKanbanBucket = clone(this.props.bucket);
this.setState({
bucket: newbucket,
@ -162,7 +144,7 @@ export default class KanbanBucketConfigurator extends React.Component<IKanbanBuc
useColor: newbucket.color && newbucket.color.length > 0
});
}
private submitData():void {
private submitData(): void {
const newbucket: IKanbanBucket = clone(this.state.bucket);
if (!this.state.useColor) {
newbucket.color = undefined;

1
samples/react-kanban-board/src/kanban/KanbanComponent.module.scss
View File

@ -4,6 +4,7 @@
.bucketwrapper {
border: 1px solid transparent;
display: table-cell;
// min-width: 220px;
}
.dragover {
border-color: "[theme: themePrimary, default: #0078d7]";

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

@ -1,5 +1,6 @@
import * as React from 'react';
import styles from './KanbanComponent.module.scss';
import bucketstyles from './KanbanBucket.module.scss';
import * as strings from 'KanbanBoardStrings';
import { IKanbanTask, KanbanTaskMamagedPropertyType } from './IKanbanTask';
@ -64,8 +65,9 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
};
this.bucketsref = [];
}
}
public render(): React.ReactElement<IKanbanComponentProps> {
const { buckets, tasks, tasksettings, taskactions, showCommandbar } = this.props;
const { openDialog } = this.state;
@ -76,7 +78,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
};
return (
<div>
<div style={{ overflowX: 'auto' }}>
{showCommandbar && <CommandBar
items={this.getItems()}
@ -92,7 +94,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
style={{ width: bucketwidth ? bucketwidth + '%' : '100%' }}
className={styles.bucketwrapper}
ref={bucketContent => this.bucketsref[i] = bucketContent}
key={'BucketWrapper'+b.bucket+i}
key={'BucketWrapper' + b.bucket + i}
onDragOver={(event) => this.onDragOver(event, b.bucket)}
onDragLeave={(event) => this.onDragLeave(event, b.bucket)}
onDrop={(event) => this.onDrop(event, b.bucket)}
@ -100,7 +102,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
<KanbanBucket
key={b.bucket}
{...merge}
buckettasks={tasks.filter((x) => x.bucket == b.bucket)}
tasksettings={tasksettings}
@ -109,7 +111,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
addTask={this.internalAddTask.bind(this)}
openDetails={this.internalOpenDialog.bind(this)}
onDragStart={this.onDragStart.bind(this)}
onDragEnd={this.onDragEnd.bind(this)}
/>
@ -305,18 +307,18 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
}
}
private onDragLeave(event,bucket): void {
private onDragLeave(event, bucket): void {
const index = findIndex(this.props.buckets, element => element.bucket == bucket);
if (index != -1 && this.bucketsref.length > index ){
//&& this.bucketsref[index].classList.contains(styles.dragover)) {
this.bucketsref[index].classList.remove(styles.dragover);
if (index != -1 && this.bucketsref.length > index) {
//&& this.bucketsref[index].classList.contains(styles.dragover)) {
this.bucketsref[index].classList.remove(styles.dragover);
}
}
private onDragEnd(event): void {
console.log('onDragEnd');
this.dragelement = undefined;
this.setState({
leavingTaskId: null,
@ -326,26 +328,19 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
}
private onDragStart(event, taskId: string, bucket: string): void {
console.log('onDragStart');
const taskitem = this.props.tasks.filter(p => p.taskId === taskId);
console.log('onDragStart taskitem');
if (taskitem.length === 1) {
console.log('onDragStart taskitem check done');
event.dataTransfer.setData("text", taskId);
event.dataTransfer.effectAllowed = 'copy';
//event.dataTransfer.setData("sourcebucket", bucket);
//set element because event.dataTransfer is empty by DragOver
console.log('set dragelement');
this.dragelement = taskitem[0];
this.setState({
leavingTaskId: taskId,
leavingBucket: bucket,
});
console.log('dragelement set and refresh state');
} else {
// Error not consitent
console.log('onDragStart prop data wrong!!');
throw "TaskItem not found on DragStart";
}
@ -355,24 +350,21 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
private onDragOver(event, targetbucket: string): void {
event.preventDefault();
if (this.dragelement.bucket !== targetbucket) {
const index = findIndex(this.props.buckets, element => element.bucket == targetbucket);
if (index > -1 && this.bucketsref.length > index ){
console.log(this.bucketsref[index]);
console.log(this.bucketsref[index].classList);
//&& this.bucketsref[index].classList.contains(styles.dragover)) {
this.bucketsref[index].classList.add(styles.dragover);
if (index > -1 && this.bucketsref.length > index) {
//&& this.bucketsref[index].classList.contains(styles.dragover)) {
this.bucketsref[index].classList.add(styles.dragover);
}
}
}
private onDrop(event, targetbucket: string): void {
console.log('onDrop');
if (this.bucketsref && this.bucketsref.length>0) {
this.bucketsref.forEach(x=> {x.classList.remove(styles.dragover);});
}
if (this.bucketsref && this.bucketsref.length > 0) {
this.bucketsref.forEach(x => { x.classList.remove(styles.dragover); });
}
if (this.dragelement.bucket !== targetbucket) {
//event.dataTransfer.getData("text");
const taskId = this.dragelement.taskId;
@ -401,6 +393,8 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
}
private getItems = () => {
if (this.props.allowAdd) {
//TODO

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

@ -67,23 +67,22 @@ The KanbanBoard control can be configured with the following properties:
### IKanbanBucket
| Property | Type | Required | Description | Default |
| ---- | ---- | ---- | ---- | ---- |
|bucket|string|*|internalname||
|bucketheadline|string||Optional Headline|name of property bucket|
|percentageComplete| number||Percentage of Bucket shows in bar under Headline|
|color|string||||
bucket:string;
bucketheadline:string;
percentageComplete: number;
color?:string;
allowAddTask?:boolean;
### IKanbanTask
| Property | Type | Required | Description | Default |
| ---- | ---- | ---- | ---- | ---- |
taskId: string;
title: string;
isCompleted?: boolean;
assignedTo?: IPersonaProps;
htmlDescription?:string;
priority?:string;
bucket: string;
mamagedProperties?: IKanbanTaskManagedProps[];
| taskId | string | * | | |
| title | string | * | | |
| assignedTo | IPersonaProps | | | |
| htmlDescription | string | | | |
| priority | string | | | |
| bucket | string | * | | |
| mamagedProperties | IKanbanTaskManagedProps | | | |
### IKanbanComponentProps
@ -105,7 +104,7 @@ The KanbanBoard control can be configured with the following properties:
| Property | Type | Required | Description | Default |
| ---- | ---- | ---- | ---- | ---- |
IPersonaProps reference to Fluent UI
IPersonaProps reference to Office UI Fabric
## Samples

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

@ -22,6 +22,9 @@ define([], function () {
"BucketConfigUseColor": "Use Color?",
"BucketConfigSave": "Save",
"BucketConfigReset": "Reset",
"Percent":"percent"
"Percent":"percent",
"BucketConfigShowPercentage": "Show Processindicator",
"BucketConfigShowPercentageShow": "Show",
"BucketConfigShowPercentageHide": "Hide"
}
});

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

@ -23,6 +23,9 @@ declare interface IKanbanBoardStrings {
BucketConfigSave: string;
BucketConfigReset: string;
Percent: string;
BucketConfigShowPercentage: string;
BucketConfigShowPercentageShow: string;
BucketConfigShowPercentageHide: string;
}
declare module 'KanbanBoardStrings' {

18
samples/react-kanban-board/src/webparts/kanbanBoard/KanbanBoardWebPart.ts
View File

@ -49,7 +49,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
spfxContext: this.context
});
if (Environment.type == EnvironmentType.Local || Environment.type == EnvironmentType.Test) {
this.dataService= new MockKanbanService();
this.dataService = new MockKanbanService();
} else {
this.dataService = new SPKanbanService();
}
@ -58,8 +58,6 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
}
public render(): void {
console.log('bucket render webpart');
console.log(this.properties.buckets);
const element: React.ReactElement<IKanbanBoardV2Props> = React.createElement(
KanbanBoardV2,
{
@ -98,11 +96,13 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneToggle('hideWPTitle', {
label: 'Hide WP Title',
checked: this.properties.hideWPTitle
label: strings.propertyPaneHideWPHeadline,
checked: this.properties.hideWPTitle,
onText: strings.propertyPaneHideWPHeadlineHide,
offText: strings.propertyPaneHideWPHeadlineShow
}),
PropertyFieldListPicker('listId', {
label: 'Select a list',
label: strings.propertyPaneSelectList,
selectedList: this.properties.listId,
includeHidden: false,
orderBy: PropertyFieldListPickerOrderBy.Title,
@ -133,11 +133,11 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
if (this.properties.listId && this.properties.buckets && this.properties.buckets.length > 1) {
generalgroups.push(
{
groupName: "Order Buckets",
groupName: strings.propertyPaneLabelOrderBuckets,
groupFields: [
PropertyFieldOrder("buckets", {
key: "orderedItems",
label: "Ordered Items",
label: strings.propertyPaneLabelOrderBuckets,
items: this.properties.buckets,
properties: this.properties,
onPropertyChange: this.onPropertyPaneFieldChanged,
@ -156,7 +156,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
propertypages.push({
key: { i },
header: {
description: "Bucket Configuration"
description: strings.propertyPaneBucketConfiguration
},
groups: [{
groupName: b.bucketheadline ? b.bucketheadline : b.bucket,

10
samples/react-kanban-board/src/webparts/kanbanBoard/components/KanbanBoardV2.tsx
View File

@ -67,7 +67,6 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
return false;
}
public componentDidUpdate(prevProps: IKanbanBoardV2Props) {
console.log('componentDidUpdate');
if (this.props.listId !== prevProps.listId) {
this._getData();
}
@ -91,14 +90,14 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
updateProperty={this.props.updateProperty} />
)}
{!isConfigured && !isLoading && (<Placeholder iconName='Edit'
iconText='Configure your web part'
description='Please configure the web part.'
buttonLabel='Configure'
iconText={strings.PlaceholderIconText}
description={strings.PlaceholderDescription}
buttonLabel={strings.PlaceholderButtonLabel}
hideButton={displayMode === DisplayMode.Read}
onConfigure={this._onConfigure} />
)}
{isConfigured && isLoading && (
<Spinner label="Seriously, still loading..." ariaLive="assertive" labelPosition="top" />
<Spinner label={strings.SpinnerLabel} ariaLive="assertive" labelPosition="top" />
)}
{isConfigured && !isLoading && (
<KanbanComponent
@ -132,7 +131,6 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
newArray[elementsIndex].bucket = targetBucket.bucket;
this.dataService.updateTaskBucketMove(this.props.listId, +taskId, targetBucket.bucket)
.then(res => {
console.log("Task updated");
this.setState({ tasks: newArray });
}).catch(error => {
this.setState({ errorMessage: 'Error Update Task Item' });

22
samples/react-kanban-board/src/webparts/kanbanBoard/loc/en-us.js vendored
View File

@ -1,8 +1,22 @@
define([], function() {
define([], function () {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Basic Configuration",
"ListTitleFieldLabel": "List Title",
"PercentComplete": "Percent Complete"
"PercentComplete": "Percent Complete",
"propertyPaneHideWPHeadline": "Hide WebPart-Title?",
"propertyPaneHideWPHeadlineShow": "show",
"propertyPaneHideWPHeadlineHide": "hide",
"propertyPaneSelectList": "Select List",
"propertyPaneGroupNameOrderBuckets": "Order Buckets",
"propertyPaneLabelOrderBuckets": "",
"propertyPaneBucketConfiguration": "Bucket Configuration",
"PlaceholderIconText": "Configure your web part",
"PlaceholderDescription": "Please configure the web part.",
"PlaceholderButtonLabel": "Configure",
"SpinnerLabel": "Seriously, still loading..."
}
});
});

18
samples/react-kanban-board/src/webparts/kanbanBoard/loc/mystrings.d.ts vendored
View File

@ -1,8 +1,24 @@
declare interface IKanbanBoardWebPartStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
ListTitleFieldLabel: string;
//Resource is used for Translating percentage SP Field Title would be better
PercentComplete: string;
propertyPaneHideWPHeadline: string;
propertyPaneHideWPHeadlineShow: string;
propertyPaneHideWPHeadlineHide: string;
propertyPaneSelectList: string;
propertyPaneGroupNameOrderBuckets: string;
propertyPaneLabelOrderBuckets: string;
propertyPaneBucketConfiguration: string;
PlaceholderIconText: string;
PlaceholderDescription: string;
PlaceholderButtonLabel: string;
SpinnerLabel: string;
}
declare module 'KanbanBoardWebPartStrings' {