Merge pull request #2093 from AJIXuMuK/kanban-update

samples/react-kanban-board/.editorconfig

@@ -1,25 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# we recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[{package,bower}.json]
-indent_style = space
-indent_size = 2

samples/react-kanban-board/.gitignore

@@ -11,6 +11,7 @@ dist
 lib
 solution
 temp
+release
 *.sppkg
 
 # Coverage directory used by tools like istanbul

samples/react-kanban-board/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-kanban-board/.vscode/launch.json

@@ -4,23 +4,7 @@
    * Chrome browser: https://aka.ms/spfx-debugger-extensions
    */
   "version": "0.2.0",
-  "configurations": [{
+  "configurations": [
-      "name": "Local workbench",
-      "type": "chrome",
-      "request": "launch",
-      "url": "https://localhost:4321/temp/workbench.html",
-      "webRoot": "${workspaceRoot}",
-      "sourceMaps": true,
-      "sourceMapPathOverrides": {
-        "webpack:///.././src/*": "${webRoot}/src/*",
-        "webpack:///../../../src/*": "${webRoot}/src/*",
-        "webpack:///../../../../src/*": "${webRoot}/src/*",
-        "webpack:///../../../../../src/*": "${webRoot}/src/*"
-      },
-      "runtimeArgs": [
-        "--remote-debugging-port=9222"
-      ]
-    },
     {
       "name": "Hosted workbench",
       "type": "chrome",

samples/react-kanban-board/.yo-rc.json

@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.10.0",
+    "version": "1.13.0",
     "libraryName": "react-kanban-board",
     "libraryId": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
     "packageManager": "npm",

samples/react-kanban-board/README.md

@@ -24,9 +24,17 @@ The web part uses the default columns of the SharePoint Tasks list for showing t
 
 ![picture of the web part in action](assets/kanbanofficeUI.gif)
 
-## Used SharePoint Framework Version
 
-![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
+## Compatibility
+
+![SPFx 1.13.0](https://img.shields.io/badge/SPFx-1.13.0-green.svg)
+![Node.js LTS v14 | LTS v12 | LTS v10](https://img.shields.io/badge/Node.js-LTS%20v14%20%7C%20LTS%20v12%20%7C%20LTS%20v10-green.svg) 
+![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
+![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
+![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
+![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
+![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
+
 
 ## Applies to
 
@@ -49,9 +57,10 @@ The Task list can be chosen using the web part properties (BaseTemplate 171 or 1
 
 Solution|Author(s)
 --------|---------
-react-kanban-board | [Ram](https://twitter.com/ram_meenavalli)
+react-kanban-board | [Ram Prasad Meenavalli](https://github.com/RamPrasadMeenavalli) ([@ram_meenavalli](https://twitter.com/ram_meenavalli))
-react-kanban-board | Daniel Westerdale ([Westerdale Solutions Ltd.](https://westerdale.blog), [@westerdaled](https://twitter.com/westerdaled?s=20))
+react-kanban-board | [Daniel Westerdale](https://github.com/westerdaled) ([Westerdale Solutions Ltd.](https://westerdale.blog), [@westerdaled](https://twitter.com/westerdaled?s=20))
-react-kanban-board | Peter Paul Kirschner ([@petkir_at](https://twitter.com/petkir_at))
+react-kanban-board | [Peter Paul Kirschner](https://github.com/petkir) ([@petkir_at](https://twitter.com/petkir_at))
+react-kanban-board | [Alex Terentiev](https://github.com/AJIXuMuK) ([@alexaterentiev](https://twitter.com/alexaterentiev))
 
 ## Version history
 
@@ -60,6 +69,7 @@ Version|Date|Comments
 1.0.0.0|July 17, 2019|Initial release
 1.0.1.0|April 21, 2020|Added support for Teams hosts
 2.0.0.0|July 10, 2020| jqwidgets replaced with a custom Kanban Board based on Office UI Component and IE11 Support
+3.0.0.0|October 29, 2021| SPFx 1.13, PnPJS v2, PnP Controls v3
 
 [Read More about the implementation of this Board](./src/kanban/README.md)
 
@@ -80,13 +90,6 @@ Version|Date|Comments
 <!---* [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-->
 
-## 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
@@ -102,4 +105,26 @@ 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
 
+
+## 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.**
+
+## Help
+
+We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.
+
+
+You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/labels/react-kanban-board) to see if anybody else is having the same issues.
+
+You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Areact-kanban-board) and see what the community is saying
+
+If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-kanban-board&authors=@RamPrasadMeenavalli%20@westerdaled%20@petkir%20@AJIXuMuK&title=react-kanban-board%20-%20).
+
+For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-kanban-board&authors=@RamPrasadMeenavalli%20@westerdaled%20@petkir%20@AJIXuMuK&title=react-kanban-board%20-%20).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-kanban-board&authors=@RamPrasadMeenavalli%20@westerdaled%20@petkir%20@AJIXuMuK&title=react-kanban-board%20-%20).
+
+
+
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-kanban-board" />

samples/react-kanban-board/assets/sample.json

@@ -21,11 +21,15 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.10.0"
+        "value": "1.13.0"
       },
       {
         "key": "SPFX-TEAMSTAB",
         "value": "true"
+      },
+      {
+        "key": "PNPCONTROLS",
+        "value": "PropertyFieldListPicker, PropertyFieldOrder, WebPartTitle, Placeholder"
       }
     ],
     "thumbnails": [
@@ -57,6 +61,13 @@
         "pictureUrl": "https://github.com/petkir.png",
         "name": "Peter Paul Kirschner",
         "twitter": "petkir_at"
+      },
+      {
+        "gitHubAccount": "AJIXuMuK",
+        "company": "Sharepointalist",
+        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460\u0026u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f\u0026v=4",
+        "name": "Alex Terentiev",
+        "twitter": "alexaterentiev"
       }
     ],
     "references": [

samples/react-kanban-board/config/copy-assets.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
-  "deployCdnPath": "temp/deploy"
-}

samples/react-kanban-board/config/deploy-azure-storage.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
-  "workingDir": "./temp/deploy/",
+  "workingDir": "./release/assets/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "react-kanban-board",
   "accessKey": "<!-- ACCESS KEY -->"

samples/react-kanban-board/config/package-solution.json

@@ -3,10 +3,17 @@
     "solution": {
         "name": "react-kanban-board-client-side-solution",
         "id": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
-        "version": "2.0.0.0",
+        "version": "3.0.0.0",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": true,
-        "isDomainIsolated": false
+        "isDomainIsolated": false,
+        "developer": {
+            "name": "",
+            "privacyUrl": "",
+            "termsOfUseUrl": "",
+            "websiteUrl": "",
+            "mpnId": ""
+          }
     },
     "paths": {
         "zippedPackage": "solution/react-kanban-board.sppkg"

samples/react-kanban-board/config/serve.json

@@ -2,9 +2,5 @@
   "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://localhost:5432/workbench",
+  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-  }
 }

samples/react-kanban-board/gulpfile.js

@@ -6,50 +6,13 @@ const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
-// This section is inspired by Stefan Bauer's article at https://n8d.at/how-to-version-new-sharepoint-framework-projects/
+var getTasks = build.rig.getTasks;
-// Stefan rocks!
+build.rig.getTasks = function () {
-let syncVersionsSubtask = build.subTask('version-sync', function (gulp, buildOptions, done) {
+  var result = getTasks.call(build.rig);
-    this.log('Synching versions');
-
-    // import gulp utilits to write error messages
-    const gutil = require('gulp-util');
-
-    // import file system utilities form nodeJS
-    const fs = require('fs');
-
-    // read package.json
-    var pkgConfig = require('./package.json');
-
-    // read configuration of web part solution file
-    var pkgSolution = require('./config/package-solution.json');
-
-    // log old version
-    this.log('package-solution.json version:\t' + pkgSolution.solution.version);
-
-    // Generate new MS compliant version number
-    var newVersionNumber = pkgConfig.version.split('-')[0] + '.0';
-
-    if (pkgSolution.solution.version !== newVersionNumber) {
-        // assign newly generated version number to web part version
-        pkgSolution.solution.version = newVersionNumber;
-
-        // log new version
-        this.log('New package-solution.json version:\t' + pkgSolution.solution.version);
-
-        fs.writeFile('./config/package-solution.json', JSON.stringify(pkgSolution, null, 4), function (err, result) {
-            if (err) this.log('error', err);
-        });
-
-    }
-    else {
-        this.log('package-solution.json version is up-to-date');
-    }
-
-    done();
-});
-let syncVersionTask = build.task('version-sync', syncVersionsSubtask);
-build.rig.addPreBuildTask(syncVersionTask);
 
+  result.set('serve', result.get('serve-deprecated'));
 
+  return result;
+};
 
 build.initialize(gulp);

samples/react-kanban-board/package.json

@@ -1,53 +1,39 @@
 {
   "name": "react-kanban-board",
   "main": "lib/index.js",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "private": true,
-  "engines": {
+  "engines": "undefined",
-    "node": ">=0.10.0"
-  },
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.10.0",
+    "@microsoft/sp-core-library": "1.13.0",
-    "@microsoft/sp-lodash-subset": "1.10.0",
+    "@microsoft/sp-lodash-subset": "1.13.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.13.0",
-    "@microsoft/sp-property-pane": "1.10.0",
+    "@microsoft/sp-property-pane": "1.13.0",
-    "@microsoft/sp-webpart-base": "1.10.0",
+    "@microsoft/sp-webpart-base": "1.13.0",
-    "@pnp/common": "^1.3.3",
+    "@pnp/sp": "2.10.0",
-    "@pnp/logging": "^1.3.3",
+    "@pnp/spfx-controls-react": "^3.5.0-beta.2d993b2",
-    "@pnp/odata": "^1.3.3",
+    "@pnp/spfx-property-controls": "^3.3.0-beta.d48002e",
-    "@pnp/polyfill-ie11": "^2.0.2",
+    "office-ui-fabric-react": "7.174.1",
-    "@pnp/sp": "^1.3.3",
+    "react": "16.13.1",
-    "@pnp/spfx-controls-react": "1.19.0",
+    "react-dom": "16.13.1"
-    "@pnp/spfx-property-controls": "1.19.0",
-    "@types/es6-promise": "0.0.33",
-    "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.3",
-    "@types/webpack-env": "1.13.1",
-    "classnames": "^2.2.6",
-    "office-ui-fabric-react": "6.214.0",
-    "react": "16.8.5",
-    "react-dom": "16.8.5"
-  },
-  "resolutions": {
-    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-2.9": "0.7.7",
+    "@microsoft/rush-stack-compiler-3.7": "0.2.3",
-    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
+    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
-    "@microsoft/sp-build-web": "1.10.0",
+    "@microsoft/sp-build-web": "1.13.0",
-    "@microsoft/sp-module-interfaces": "1.10.0",
+    "@microsoft/sp-module-interfaces": "1.13.0",
-    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-tslint-rules": "1.13.0",
-    "@microsoft/sp-webpart-workbench": "1.10.0",
+    "@types/react": "16.9.51",
-    "@types/chai": "3.4.34",
+    "@types/react-dom": "16.9.8",
-    "@types/mocha": "2.2.38",
+    "@types/webpack-env": "1.13.1",
     "ajv": "~5.2.2",
     "autoprefixer": "^9.8.4",
-    "gulp": "~3.9.1",
+    "gulp": "4.0.2",
     "react-html-parser": "^2.0.2"
   }
 }

samples/react-kanban-board/src/kanban/KanbanComponent.tsx

@@ -331,6 +331,7 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
     }
 
     private onDragStart(event, taskId: string, bucket: string): void {
+        console.log('onDragStart');
         const taskitem = this.props.tasks.filter(p => p.taskId === taskId);
         if (taskitem.length === 1) {
             event.dataTransfer.setData("text", taskId);
@@ -353,6 +354,7 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
 
     private onDragOver(event, targetbucket: string): void {
         event.preventDefault();
+        console.log('onDragOver');
 
         if (this.dragelement.bucket !== targetbucket) {
             const index = findIndex(this.props.buckets, element => element.bucket == targetbucket);

samples/react-kanban-board/src/kanban/KanbanTaskManagedProp.tsx

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import styles from './KanbanTaskManagedProp.module.scss';
 import { IKanbanTaskManagedProps, KanbanTaskMamagedPropertyType } from './IKanbanTask';
-import {  Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import ReactHtmlParser from 'react-html-parser';
 import { Persona, PersonaSize, IPersonaProps } from 'office-ui-fabric-react';
 
@@ -67,10 +67,8 @@ export default class KanbanTaskManagedProp extends React.Component<IKanbanTaskMa
                                 size={PersonaSize.size32}
                                 hidePersonaDetails={false}
                             />))
-                            )
+                        ))
-                        )
                     }
-                  };
                 </span>);
                 break;
             case KanbanTaskMamagedPropertyType.complex:

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

@@ -11,7 +11,6 @@ import { cloneDeep } from '@microsoft/sp-lodash-subset';
 import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
 import { PropertyFieldOrder } from '@pnp/spfx-property-controls/lib/PropertyFieldOrder';
 import * as strings from 'KanbanBoardWebPartStrings';
-import "@pnp/polyfill-ie11";
 import { sp } from '@pnp/sp';
 
 import PropertyPaneBucketConfigComponent from './components/PropertyPaneBucketConfig';
@@ -113,7 +112,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
             onListsRetrieved: (lists) => {
               //TODO Check from TS Definition it should be a string but i get a number
               // with Typesafe equal it fails
-              if (Environment.type == EnvironmentType.Local || Environment.type == EnvironmentType.Test) {
+              if (Environment.type == EnvironmentType.Test) {
                 return lists;
               } else {
                 const alists = lists.filter((l: any) => {

samples/react-kanban-board/src/webparts/kanbanBoard/services/MockKanbanService.ts

@@ -1,6 +1,4 @@
 import { ISPKanbanService } from "./ISPKanbanService";
-import "@pnp/polyfill-ie11";
-import { sp } from '@pnp/sp';
 import { IKanbanTask, KanbanTaskMamagedPropertyType } from "../../../kanban";
 import * as strings from 'KanbanBoardWebPartStrings';
 

samples/react-kanban-board/src/webparts/kanbanBoard/services/SPKanbanService.ts

@@ -1,8 +1,16 @@
 import { ISPKanbanService } from "./ISPKanbanService";
-import "@pnp/polyfill-ie11";
 import { sp } from '@pnp/sp';
+import '@pnp/sp/webs';
+import '@pnp/sp/lists';
+import '@pnp/sp/items';
+import '@pnp/sp/fields';
 import { IKanbanTask, KanbanTaskMamagedPropertyType } from "../../../kanban";
 import * as strings from 'KanbanBoardWebPartStrings';
+import { IFieldInfo } from "@pnp/sp/fields";
+
+interface IFieldChoiceInfo extends IFieldInfo {
+    Choices: string[];
+}
 
 export default class SPKanbanService implements ISPKanbanService {
 
@@ -50,7 +58,7 @@ export default class SPKanbanService implements ISPKanbanService {
     }
     public getBuckets(listId: string, ): Promise<string[]> {
         return sp.web.lists.getById(listId).fields.getByInternalNameOrTitle("Status").get()
-            .then(status => status.Choices.map((val, index) => {
+            .then((status: IFieldChoiceInfo) => status.Choices.map((val, index) => {
                 return val;
             }));
     }

samples/react-kanban-board/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -19,20 +19,18 @@
       "./node_modules/@microsoft"
     ],
     "types": [
-      "es6-promise",
       "webpack-env"
     ],
     "lib": [
       "es5",
       "dom",
-      "es2015.collection"
+      "es2015.collection",
+      "es2015.promise"
     ]
   },
   "include": [
-    "src/**/*.ts", "src/webparts/kanbanBoard/components/bucketOrder.tsx"
+    "src/**/*.ts", 
+    "src/**/*.tsx"
   ],
-  "exclude": [
+  "exclude": []
-    "node_modules",
-    "lib"
-  ]
 }

samples/react-kanban-board/tslint.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
   "rules": {
     "class-name": false,
     "export-name": false,
@@ -17,7 +17,6 @@
     "no-switch-case-fall-through": true,
     "no-unnecessary-semicolons": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-with-statement": true,
     "semicolon": true,
     "trailing-comma": false,