mirror of
https://github.com/pnp/sp-dev-fx-webparts.git
synced 2025-02-07 21:48:24 +00:00
Localization Playing with UI
This commit is contained in:
parent
8f33e431eb
commit
5b7982d136
@ -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
498
samples/react-kanban-board/package-lock.json
generated
@ -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": {
|
||||
|
@ -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"
|
||||
},
|
||||
|
@ -4,4 +4,5 @@ export interface IKanbanBucket {
|
||||
percentageComplete: number;
|
||||
color?:string;
|
||||
allowAddTask?:boolean;
|
||||
showPercentageHeadline?:boolean;
|
||||
}
|
@ -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;
|
||||
|
@ -48,12 +48,12 @@ 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,
|
||||
tasksettings, percentageComplete,
|
||||
allowAddTask, overBucket, leavingTaskId, leavingBucket } = this.props;
|
||||
allowAddTask, showPercentageHeadline, leavingTaskId, leavingBucket } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -67,7 +67,7 @@ export default class KanbanBucket extends React.Component<IKanbanBucketProps, IK
|
||||
>
|
||||
<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' }}
|
||||
|
@ -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) => {
|
||||
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 }); }} />
|
||||
@ -128,25 +124,11 @@ export default class KanbanBucketConfigurator extends React.Component<IKanbanBuc
|
||||
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>
|
||||
|
||||
|
@ -4,6 +4,7 @@
|
||||
.bucketwrapper {
|
||||
border: 1px solid transparent;
|
||||
display: table-cell;
|
||||
// min-width: 220px;
|
||||
}
|
||||
.dragover {
|
||||
border-color: "[theme: themePrimary, default: #0078d7]";
|
||||
|
@ -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,6 +65,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
|
||||
|
||||
};
|
||||
this.bucketsref = [];
|
||||
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IKanbanComponentProps> {
|
||||
@ -76,7 +78,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
{showCommandbar && <CommandBar
|
||||
items={this.getItems()}
|
||||
|
||||
@ -316,7 +318,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
|
||||
}
|
||||
|
||||
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";
|
||||
|
||||
}
|
||||
@ -359,8 +354,6 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
|
||||
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);
|
||||
}
|
||||
@ -369,7 +362,6 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
|
||||
}
|
||||
|
||||
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); });
|
||||
}
|
||||
@ -401,6 +393,8 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
private getItems = () => {
|
||||
if (this.props.allowAdd) {
|
||||
//TODO
|
||||
|
@ -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
|
||||
|
||||
|
@ -22,6 +22,9 @@ define([], function () {
|
||||
"BucketConfigUseColor": "Use Color?",
|
||||
"BucketConfigSave": "Save",
|
||||
"BucketConfigReset": "Reset",
|
||||
"Percent":"percent"
|
||||
"Percent":"percent",
|
||||
"BucketConfigShowPercentage": "Show Processindicator",
|
||||
"BucketConfigShowPercentageShow": "Show",
|
||||
"BucketConfigShowPercentageHide": "Hide"
|
||||
}
|
||||
});
|
||||
|
@ -23,6 +23,9 @@ declare interface IKanbanBoardStrings {
|
||||
BucketConfigSave: string;
|
||||
BucketConfigReset: string;
|
||||
Percent: string;
|
||||
BucketConfigShowPercentage: string;
|
||||
BucketConfigShowPercentageShow: string;
|
||||
BucketConfigShowPercentageHide: string;
|
||||
}
|
||||
|
||||
declare module 'KanbanBoardStrings' {
|
||||
|
@ -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,
|
||||
|
@ -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' });
|
||||
|
@ -2,7 +2,21 @@ 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..."
|
||||
}
|
||||
});
|
@ -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' {
|
||||
|
Loading…
x
Reference in New Issue
Block a user