Upgrade spfx 1.19 node 18 PNPJS v4
This commit is contained in:
Peter Paul Kirschner
parent
92202c896c
commit
8bd087c1ed
|
|
@ -1,7 +1,7 @@
|
|||
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
|
||||
{
|
||||
"name": "SPFx 1.13.0",
|
||||
"image": "docker.io/m365pnp/spfx:1.13.0",
|
||||
"name": "SPFx 1.19.0",
|
||||
"image": "docker.io/m365pnp/spfx:1.19.0",
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {},
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
require('@rushstack/eslint-config/patch/modern-module-resolution');
|
||||
export default {
|
||||
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
|
||||
parserOptions: { tsconfigRootDir: __dirname }
|
||||
};
|
||||
|
|
@ -35,3 +35,5 @@ obj
|
|||
*.cer
|
||||
# .PEM Certificates
|
||||
*.pem
|
||||
|
||||
.heft
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": [
|
||||
"development"
|
||||
],
|
||||
"hints": {
|
||||
"no-inline-styles": "off"
|
||||
}
|
||||
}
|
||||
|
|
@ -7,9 +7,9 @@
|
|||
"configurations": [
|
||||
{
|
||||
"name": "Hosted workbench",
|
||||
"type": "chrome",
|
||||
"type": "msedge",
|
||||
"request": "launch",
|
||||
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
|
||||
"url": "https://{tenantDomain}/_layouts/workbench.aspx",
|
||||
"webRoot": "${workspaceRoot}",
|
||||
"sourceMaps": true,
|
||||
"sourceMapPathOverrides": {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
"**/bower_components": true,
|
||||
"**/coverage": true,
|
||||
"**/lib-amd": true,
|
||||
"src/**/*.scss.ts": true
|
||||
"src/**/*.scss.ts": true,
|
||||
"**/jest-output": true
|
||||
},
|
||||
"typescript.tsdk": ".\\node_modules\\typescript\\lib"
|
||||
}
|
||||
|
|
@ -1,12 +1,17 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"nodeVersion": "18.17.1",
|
||||
"isCreatingSolution": true,
|
||||
"environment": "spo",
|
||||
"version": "1.13.0",
|
||||
"version": "1.19.0",
|
||||
"libraryName": "react-kanban-board",
|
||||
"libraryId": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
|
||||
"packageManager": "npm",
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
"componentType": "webpart",
|
||||
"sdkVersions": {
|
||||
"@microsoft/teams-js": "2.12.0",
|
||||
"@microsoft/microsoft-graph-client": "3.0.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ The web part uses the default columns of the SharePoint Tasks list for showing t
|
|||
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|
||||
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
|
@ -74,6 +74,7 @@ Version|Date|Comments
|
|||
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
|
||||
4.0.0.0|Jun 1, 2024| SPFx 1.19, Node 18
|
||||
|
||||
[Read More about the implementation of this Board](./src/kanban/README.md)
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "react-kanban-board-client-side-solution",
|
||||
"id": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
|
||||
"version": "3.0.0.0",
|
||||
"version": "4.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
|
|
@ -13,7 +13,30 @@
|
|||
"termsOfUseUrl": "",
|
||||
"websiteUrl": "",
|
||||
"mpnId": ""
|
||||
}
|
||||
},
|
||||
"metadata": {
|
||||
"shortDescription": {
|
||||
"default": "react-kanban-board description"
|
||||
},
|
||||
"longDescription": {
|
||||
"default": "react-kanban-board description"
|
||||
},
|
||||
"screenshotPaths": [],
|
||||
"videoUrl": "",
|
||||
"categories": []
|
||||
},
|
||||
"features": [
|
||||
{
|
||||
"title": "react-kanban-board KanbanBoardWebPart Feature",
|
||||
"description": "The feature that activates KanbanBoardWebPart from the react-kanban-board solution.",
|
||||
"id": "67cd5938-806b-4c79-b589-501f7f26998e",
|
||||
"version": "3.0.0.0",
|
||||
"componentIds": [
|
||||
"67cd5938-806b-4c79-b589-501f7f26998e"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-kanban-board.sppkg"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
|
||||
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
'use strict';
|
||||
|
||||
|
||||
|
||||
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.`);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,39 +1,46 @@
|
|||
{
|
||||
"name": "react-kanban-board",
|
||||
"main": "lib/index.js",
|
||||
"version": "3.0.0",
|
||||
"version": "4.0.0",
|
||||
"private": true,
|
||||
"engines": "undefined",
|
||||
"engines": {
|
||||
"node": ">=18.17.1 <19.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.13.0",
|
||||
"@microsoft/sp-lodash-subset": "1.13.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.13.0",
|
||||
"@microsoft/sp-property-pane": "1.13.0",
|
||||
"@microsoft/sp-webpart-base": "1.13.0",
|
||||
"@pnp/sp": "2.10.0",
|
||||
"@pnp/spfx-controls-react": "^3.5.0-beta.2d993b2",
|
||||
"@pnp/spfx-property-controls": "^3.3.0-beta.d48002e",
|
||||
"office-ui-fabric-react": "7.174.1",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1"
|
||||
"@fluentui/react": "8.106.4",
|
||||
"@microsoft/sp-adaptive-card-extension-base": "1.19.0",
|
||||
"@microsoft/sp-core-library": "1.19.0",
|
||||
"@microsoft/sp-lodash-subset": "1.19.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.19.0",
|
||||
"@microsoft/sp-property-pane": "1.19.0",
|
||||
"@microsoft/sp-webpart-base": "1.19.0",
|
||||
"@pnp/sp": "^4.1.0",
|
||||
"@pnp/spfx-controls-react": "^3.18",
|
||||
"@pnp/spfx-property-controls": "^3.17",
|
||||
"html-react-parser": "^5.1.10",
|
||||
"react": "17.0.1",
|
||||
"react-dom": "17.0.1",
|
||||
"tslib": "2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
|
||||
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
|
||||
"@microsoft/sp-build-web": "1.13.0",
|
||||
"@microsoft/sp-module-interfaces": "1.13.0",
|
||||
"@microsoft/sp-tslint-rules": "1.13.0",
|
||||
"@types/react": "16.9.51",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"ajv": "~5.2.2",
|
||||
"autoprefixer": "^9.8.4",
|
||||
"@microsoft/eslint-config-spfx": "1.20.1",
|
||||
"@microsoft/eslint-plugin-spfx": "1.20.1",
|
||||
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
|
||||
"@microsoft/sp-build-web": "1.20.1",
|
||||
"@microsoft/sp-module-interfaces": "1.20.1",
|
||||
"@rushstack/eslint-config": "2.5.1",
|
||||
"@types/react": "17.0.45",
|
||||
"@types/react-dom": "17.0.17",
|
||||
"@types/webpack-env": "1.15.2",
|
||||
"ajv": "6.12.5",
|
||||
"eslint": "8.7.0",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"gulp": "4.0.2",
|
||||
"react-html-parser": "^2.0.2"
|
||||
"typescript": "4.7.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { IPersonaProps } from "office-ui-fabric-react/lib/Persona";
|
||||
import { IPersonaProps } from "@fluentui/react";
|
||||
|
||||
export interface IKanbanTask {
|
||||
taskId: string;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.bucket {
|
||||
width: 100%;
|
||||
// border-right: 1px solid gray;
|
||||
|
|
|
|||
|
|
@ -3,12 +3,10 @@ import styles from './KanbanBucket.module.scss';
|
|||
import { IKanbanBucket } from './IKanbanBucket';
|
||||
import { IKanbanTask } from './IKanbanTask';
|
||||
import { IKanbanBoardTaskSettings } from './IKanbanBoardTaskSettings';
|
||||
import { IKanbanBoardTaskActions } from './IKanbanBoardTaskActions';
|
||||
import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
|
||||
import { ActionButton } from 'office-ui-fabric-react';
|
||||
|
||||
import KanbanTask from './KanbanTask';
|
||||
import classNames from 'classnames';
|
||||
import * as strings from 'KanbanBoardStrings';
|
||||
import { ActionButton, ProgressIndicator } from '@fluentui/react';
|
||||
|
||||
export interface IKanbanBucketProps extends IKanbanBucket {
|
||||
|
||||
|
|
@ -19,9 +17,9 @@ export interface IKanbanBucketProps extends IKanbanBucket {
|
|||
toggleCompleted?: (taskId: string) => void;
|
||||
addTask?: (bucket: string) => void;
|
||||
|
||||
onDragStart: (event, taskId: string, bucket: string) => void;
|
||||
onDragStart: (event: any, taskId: string, bucket: string) => void;
|
||||
|
||||
onDragEnd: (event, taskId: string, bucket: string) => void;
|
||||
onDragEnd: (event: any, taskId: string, bucket: string) => void;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
|
@ -3,25 +3,12 @@ import * as React from 'react';
|
|||
//import styles from './KanbanBucketConfigurator.module.scss';
|
||||
|
||||
import * as strings from 'KanbanBoardStrings';
|
||||
import { TextField, MaskedTextField } from 'office-ui-fabric-react/lib/TextField';
|
||||
import { Stack, IStackProps, IStackStyles } from 'office-ui-fabric-react/lib/Stack';
|
||||
import { Slider } from 'office-ui-fabric-react/lib/Slider';
|
||||
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
|
||||
import { cloneDeep, clone, isEqual } from '@microsoft/sp-lodash-subset';
|
||||
import {
|
||||
ColorPicker,
|
||||
ChoiceGroup,
|
||||
IChoiceGroupOption,
|
||||
getColorFromString,
|
||||
IColor,
|
||||
IColorPickerStyles,
|
||||
IColorPickerProps,
|
||||
PrimaryButton,
|
||||
DefaultButton,
|
||||
ThemeSettingName,
|
||||
} from 'office-ui-fabric-react/lib/index';
|
||||
|
||||
import { clone, isEqual } from '@microsoft/sp-lodash-subset';
|
||||
|
||||
|
||||
import { IKanbanBucket } from './IKanbanBucket';
|
||||
import { ColorPicker, DefaultButton, IColor, PrimaryButton, Slider, Stack, TextField, Toggle } from '@fluentui/react';
|
||||
|
||||
|
||||
export interface IKanbanBucketConfiguratorProps {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.kanbanBoard {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -11,14 +11,8 @@ import { IKanbanBucket } from './IKanbanBucket';
|
|||
import KanbanBucket from './KanbanBucket';
|
||||
import KanbanTaskManagedProp from './KanbanTaskManagedProp';
|
||||
|
||||
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
|
||||
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
|
||||
import { IStackStyles, Stack } from 'office-ui-fabric-react/lib/Stack';
|
||||
import { clone } from '@microsoft/sp-lodash-subset';
|
||||
|
||||
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
|
||||
|
||||
import { TooltipHost, findIndex } from 'office-ui-fabric-react';
|
||||
import { CommandBar, DefaultButton, Dialog, DialogFooter, DialogType, PrimaryButton, Stack, findIndex } from '@fluentui/react';
|
||||
|
||||
export interface IKanbanComponentProps {
|
||||
buckets: IKanbanBucket[];
|
||||
|
|
@ -65,16 +59,16 @@ export class KanbanComponent extends React.Component<IKanbanComponentProps, IKan
|
|||
|
||||
};
|
||||
this.bucketsref = [];
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IKanbanComponentProps> {
|
||||
const { buckets, tasks, tasksettings, taskactions, showCommandbar } = this.props;
|
||||
const { openDialog } = this.state;
|
||||
const bucketwidth: number = buckets.length > 0 ? 100 / buckets.length : 100;
|
||||
const { leavingBucket, leavingTaskId } = this.state;
|
||||
const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).length >0;
|
||||
|
||||
const hasprocessIndicator = buckets.filter((b) => b.showPercentageHeadline).length > 0;
|
||||
|
||||
return (
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
{showCommandbar && <CommandBar
|
||||
|
|
@ -89,12 +83,12 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
|
|||
buckets.map((b, i) => {
|
||||
const merge = { ...b, ...this.state };
|
||||
return (<div
|
||||
|
||||
style={{
|
||||
flexBasis: bucketwidth ? bucketwidth + '%' : '100%' ,
|
||||
|
||||
style={{
|
||||
flexBasis: bucketwidth ? bucketwidth + '%' : '100%',
|
||||
maxWidth: bucketwidth ? bucketwidth + '%' : '100%'
|
||||
}}
|
||||
|
||||
|
||||
className={styles.bucketwrapper}
|
||||
ref={bucketContent => this.bucketsref[i] = bucketContent}
|
||||
key={'BucketWrapper' + b.bucket + i}
|
||||
|
|
@ -310,7 +304,7 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
|
|||
}
|
||||
}
|
||||
|
||||
private onDragLeave(event, bucket): void {
|
||||
private onDragLeave(event: any, bucket: string): void {
|
||||
const index = findIndex(this.props.buckets, element => element.bucket == bucket);
|
||||
if (index != -1 && this.bucketsref.length > index) {
|
||||
|
||||
|
|
@ -320,7 +314,7 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
|
|||
|
||||
}
|
||||
|
||||
private onDragEnd(event): void {
|
||||
private onDragEnd(event: any): void {
|
||||
|
||||
this.dragelement = undefined;
|
||||
this.setState({
|
||||
|
|
@ -330,7 +324,7 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
|
|||
});
|
||||
}
|
||||
|
||||
private onDragStart(event, taskId: string, bucket: string): void {
|
||||
private onDragStart(event: any, taskId: string, bucket: string): void {
|
||||
console.log('onDragStart');
|
||||
const taskitem = this.props.tasks.filter(p => p.taskId === taskId);
|
||||
if (taskitem.length === 1) {
|
||||
|
|
@ -352,7 +346,7 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
|
|||
|
||||
}
|
||||
|
||||
private onDragOver(event, targetbucket: string): void {
|
||||
private onDragOver(event: any, targetbucket: string): void {
|
||||
event.preventDefault();
|
||||
console.log('onDragOver');
|
||||
|
||||
|
|
@ -366,7 +360,7 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
|
|||
|
||||
}
|
||||
|
||||
private onDrop(event, targetbucket: string): void {
|
||||
private onDrop(event: any, targetbucket: string): void {
|
||||
if (this.bucketsref && this.bucketsref.length > 0) {
|
||||
this.bucketsref.forEach(x => { x.classList.remove(styles.dragover); });
|
||||
}
|
||||
|
|
@ -398,7 +392,7 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
private getItems = () => {
|
||||
if (this.props.allowAdd) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.taskcard {
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import * as React from 'react';
|
||||
import styles from './KanbanTask.module.scss';
|
||||
import * as strings from 'KanbanBoardStrings';
|
||||
import { IconButton } from 'office-ui-fabric-react/lib/Button';
|
||||
|
||||
import { IKanbanTask } from './IKanbanTask';
|
||||
import { IKanbanBoardTaskSettings } from './IKanbanBoardTaskSettings';
|
||||
import classNames from 'classnames';
|
||||
import { Persona, PersonaSize } from 'office-ui-fabric-react';
|
||||
import { IconButton, Persona, PersonaSize } from '@fluentui/react';
|
||||
|
||||
export interface IKanbanTaskProps extends IKanbanTask, IKanbanBoardTaskSettings {
|
||||
|
||||
toggleCompleted?: (taskId: string) => void;
|
||||
openDetails: (taskId: string) => void;
|
||||
onDragStart: (event) => void;
|
||||
onDragEnd: (event) => void;
|
||||
onDragStart: (event:any) => void;
|
||||
onDragEnd: (event:any) => void;
|
||||
isMoving: boolean;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.rowcol1{
|
||||
flex-basis: 30%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
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 ReactHtmlParser from 'react-html-parser';
|
||||
import { Persona, PersonaSize, IPersonaProps } from 'office-ui-fabric-react';
|
||||
import { IPersonaProps, Persona, PersonaSize, Stack } from '@fluentui/react';
|
||||
import HTMLReactParser from 'html-react-parser';
|
||||
|
||||
|
||||
export interface IKanbanTaskManagedPropProps extends IKanbanTaskManagedProps { }
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ export default class KanbanTaskManagedProp extends React.Component<IKanbanTaskMa
|
|||
//TODO maybe better Formater
|
||||
break;
|
||||
case KanbanTaskMamagedPropertyType.html:
|
||||
return (<span>{ReactHtmlParser(value)}</span>);
|
||||
return (<span>{HTMLReactParser(value)}</span>);
|
||||
break;
|
||||
case KanbanTaskMamagedPropertyType.person:
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ 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 { sp } from '@pnp/sp';
|
||||
import { spfi, SPFI, SPFx } from "@pnp/sp";
|
||||
|
||||
import PropertyPaneBucketConfigComponent from './components/PropertyPaneBucketConfig';
|
||||
import KanbanBoardV2, { IKanbanBoardV2Props } from './components/KanbanBoardV2';
|
||||
|
|
@ -34,20 +34,19 @@ export interface IKanbanBoardWebPartProps {
|
|||
}
|
||||
|
||||
export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoardWebPartProps> {
|
||||
private kanbanComponent = null;
|
||||
//private kanbanComponent = null;
|
||||
private dataService: ISPKanbanService;
|
||||
private statekey: string = Date.now().toString();
|
||||
public onInit(): Promise<void> {
|
||||
|
||||
return super.onInit().then(_ => {
|
||||
|
||||
sp.setup({
|
||||
spfxContext: this.context
|
||||
});
|
||||
if (Environment.type == EnvironmentType.Local || Environment.type == EnvironmentType.Test) {
|
||||
const sp = spfi().using(SPFx( this.context));
|
||||
//.using(PnPLogging(LogLevel.Warning));
|
||||
if ( Environment.type == EnvironmentType.Test) {
|
||||
this.dataService = new MockKanbanService();
|
||||
} else {
|
||||
this.dataService = new SPKanbanService();
|
||||
this.dataService = new SPKanbanService(sp);
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -66,12 +65,13 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
|
|||
statekey: this.statekey,
|
||||
context: this.context,
|
||||
listId: this.properties.listId,
|
||||
configuredBuckets: this.properties.buckets
|
||||
configuredBuckets: this.properties.buckets,
|
||||
dataService: this.dataService
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
this.kanbanComponent = ReactDom.render(element, this.domElement);
|
||||
ReactDom.render(element, this.domElement);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
|
|||
disabled: false,
|
||||
onPropertyChange: this.listConfigurationChanged.bind(this),
|
||||
properties: this.properties,
|
||||
context: this.context,
|
||||
context: (this.context as any),
|
||||
onGetErrorMessage: null,
|
||||
deferredValidationTime: 0,
|
||||
key: 'listPickerFieldId',
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.ordercolor {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import * as strings from 'KanbanBoardWebPartStrings';
|
|||
import { DisplayMode, Guid, Environment, EnvironmentType } from '@microsoft/sp-core-library';
|
||||
import { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||
import { findIndex, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset';
|
||||
import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
|
||||
|
||||
|
||||
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
|
||||
|
|
@ -17,6 +16,7 @@ import { mergeBucketsWithChoices } from './helper';
|
|||
import { ISPKanbanService } from '../services/ISPKanbanService';
|
||||
import SPKanbanService from '../services/SPKanbanService';
|
||||
import MockKanbanService from '../services/MockKanbanService';
|
||||
import { Spinner } from '@fluentui/react';
|
||||
|
||||
export interface IKanbanBoardV2Props {
|
||||
hideWPTitle: boolean;
|
||||
|
|
@ -27,6 +27,7 @@ export interface IKanbanBoardV2Props {
|
|||
listId: string;
|
||||
configuredBuckets: IKanbanBucket[]; // need mearge with current readed
|
||||
statekey: string; // force refresh ;)
|
||||
dataService: ISPKanbanService;
|
||||
}
|
||||
|
||||
export interface IKanbanBoardV2State {
|
||||
|
|
@ -43,7 +44,7 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
|
|||
private dataService: ISPKanbanService;
|
||||
constructor(props: IKanbanBoardV2Props) {
|
||||
super(props);
|
||||
|
||||
this.dataService= this.props.dataService;
|
||||
this.state = {
|
||||
loading: false,
|
||||
isConfigured: false,
|
||||
|
|
@ -52,11 +53,6 @@ export default class KanbanBoardV2 extends React.Component<IKanbanBoardV2Props,
|
|||
};
|
||||
}
|
||||
public componentDidMount(): void {
|
||||
if (Environment.type == EnvironmentType.Local || Environment.type == EnvironmentType.Test) {
|
||||
this.dataService= new MockKanbanService();
|
||||
} else {
|
||||
this.dataService = new SPKanbanService();
|
||||
}
|
||||
this._getData();
|
||||
}
|
||||
public shouldComponentUpdate(nextProps: IKanbanBoardV2Props, nextState: IKanbanBoardV2State): boolean {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export interface IPropertyPaneBucketConfig {
|
|||
|
||||
export interface IPropertyPaneBucketConfigInternal extends IPropertyPaneBucketConfig {
|
||||
targetProperty: string;
|
||||
onRender(elem: HTMLElement, ctx, changeCallback): void;
|
||||
onRender(elem: HTMLElement, ctx:any, changeCallback:(targetProperty: string, value: any) => void): void;
|
||||
onDispose(elem: HTMLElement): void;
|
||||
onChanged(targetProperty: string, value: IKanbanBucket): void;
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@ class PropertyPaneBucketConfigBuilder implements IPropertyPaneField<IPropertyPan
|
|||
this.properties.onDispose = this.dispose;
|
||||
}
|
||||
|
||||
private render(elem: HTMLElement, ctx?, changeCallback?: (targetProperty: string, value: any) => void): void {
|
||||
private render(elem: HTMLElement, ctx?:any, changeCallback?: (targetProperty: string, value: any) => void): void {
|
||||
if (!this.elem) {
|
||||
this.elem = elem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { ISPKanbanService } from "./ISPKanbanService";
|
||||
import { sp } from '@pnp/sp';
|
||||
|
||||
import '@pnp/sp/webs';
|
||||
import '@pnp/sp/lists';
|
||||
import '@pnp/sp/items';
|
||||
|
|
@ -7,16 +7,20 @@ import '@pnp/sp/fields';
|
|||
import { IKanbanTask, KanbanTaskMamagedPropertyType } from "../../../kanban";
|
||||
import * as strings from 'KanbanBoardWebPartStrings';
|
||||
import { IFieldInfo } from "@pnp/sp/fields";
|
||||
import { SPFI } from "@pnp/sp";
|
||||
|
||||
interface IFieldChoiceInfo extends IFieldInfo {
|
||||
Choices: string[];
|
||||
}
|
||||
|
||||
export default class SPKanbanService implements ISPKanbanService {
|
||||
|
||||
private sp:SPFI = null;
|
||||
constructor(sp:SPFI) {
|
||||
sp=sp;
|
||||
}
|
||||
|
||||
public updateTaskBucketMove(listid: string, taskId: number, bucket: string): Promise<boolean> {
|
||||
return sp.web.lists.getById(listid).items.getById(+taskId).update({
|
||||
return this.sp.web.lists.getById(listid).items.getById(+taskId).update({
|
||||
Status: bucket
|
||||
}).then(() => { return true; });
|
||||
}
|
||||
|
|
@ -26,9 +30,9 @@ export default class SPKanbanService implements ISPKanbanService {
|
|||
'ID', 'Title', 'Status', 'Priority', 'PercentComplete', 'Body'
|
||||
];
|
||||
|
||||
return sp.web.lists.getById(listId).items
|
||||
return this.sp.web.lists.getById(listId).items
|
||||
.select(odatafiels.join(','))
|
||||
.expand('AssignedTo').getAll().then(res => {
|
||||
.expand('AssignedTo')().then(res => {
|
||||
const tasks: IKanbanTask[] = res.map((x) => {
|
||||
return {
|
||||
taskId: '' + x.ID,
|
||||
|
|
@ -57,7 +61,7 @@ export default class SPKanbanService implements ISPKanbanService {
|
|||
|
||||
}
|
||||
public getBuckets(listId: string, ): Promise<string[]> {
|
||||
return sp.web.lists.getById(listId).fields.getByInternalNameOrTitle("Status").get()
|
||||
return this.sp.web.lists.getById(listId).fields.getByInternalNameOrTitle("Status")()
|
||||
.then((status: IFieldChoiceInfo) => status.Choices.map((val, index) => {
|
||||
return val;
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"noImplicitAny": true,
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
Execute in bash
|
||||
-----------------------
|
||||
npm un -S office-ui-fabric-react
|
||||
npm un -D @microsoft/sp-tslint-rules
|
||||
npm i -SE @microsoft/sp-core-library@1.19.0 @microsoft/sp-lodash-subset@1.19.0 @microsoft/sp-office-ui-fabric-core@1.19.0 @microsoft/sp-webpart-base@1.19.0 @microsoft/sp-property-pane@1.19.0 @microsoft/sp-adaptive-card-extension-base@1.19.0 @fluentui/react@8.106.4 react@17.0.1 react-dom@17.0.1 tslib@2.3.1
|
||||
npm i -DE @microsoft/sp-build-web@1.20.1 @microsoft/sp-module-interfaces@1.20.1 @microsoft/eslint-plugin-spfx@1.20.1 @microsoft/eslint-config-spfx@1.20.1 typescript@4.7.4 @microsoft/rush-stack-compiler-4.7@0.1.0 eslint@8.7.0 @types/react@17.0.45 @types/react-dom@17.0.17 ajv@6.12.5 @types/webpack-env@1.15.2 @rushstack/eslint-config@2.5.1 eslint-plugin-react-hooks@4.3.0
|
||||
npm dedupe
|
||||
cat > "config/sass.json" << EOF
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
|
||||
}
|
||||
EOF
|
||||
rm "tslint.json"
|
||||
cat > ".eslintrc.js" << EOF
|
||||
require('@rushstack/eslint-config/patch/modern-module-resolution');
|
||||
export default {
|
||||
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
|
||||
parserOptions: { tsconfigRootDir: __dirname }
|
||||
};
|
||||
EOF
|
||||
|
||||
./.yo-rc.json
|
||||
-------------
|
||||
Update version in .yo-rc.json:
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.19.0"
|
||||
}
|
||||
}
|
||||
|
||||
Update @microsoft/teams-js SDK version in .yo-rc.json:
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"sdkVersions": {
|
||||
"@microsoft/teams-js": "2.12.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Update nodeVersion in .yo-rc.json:
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"nodeVersion": "18.17.1"
|
||||
}
|
||||
}
|
||||
|
||||
Update @microsoft/microsoft-graph-client SDK version in .yo-rc.json:
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"sdkVersions": {
|
||||
"@microsoft/microsoft-graph-client": "3.0.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vscode/settings.json
|
||||
---------------------
|
||||
Add excluding Jest output files in .vscode/settings.json:
|
||||
{
|
||||
"files.exclude": {
|
||||
"**/jest-output": true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
./tsconfig.json
|
||||
---------------
|
||||
Update tsconfig.json extends property:
|
||||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json"
|
||||
}
|
||||
|
||||
Add noImplicitAny in tsconfig.json:
|
||||
{
|
||||
"compilerOptions": {
|
||||
"noImplicitAny": true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
./package.json
|
||||
--------------
|
||||
Update package.json engines.node property:
|
||||
{
|
||||
"engines": {
|
||||
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vscode/launch.json
|
||||
-------------------
|
||||
In the .vscode/launch.json file, update the type property for the hosted workbench launch configuration:
|
||||
{
|
||||
"configurations": [
|
||||
{
|
||||
"type": "msedge"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
In the .vscode/launch.json file, update the url property for the hosted workbench launch configuration:
|
||||
{
|
||||
"configurations": [
|
||||
{
|
||||
"url": "https://{tenantDomain}/_layouts/workbench.aspx"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
./config/serve.json
|
||||
-------------------
|
||||
Update serve.json initialPage URL:
|
||||
{
|
||||
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
|
||||
}
|
||||
|
||||
Update serve.json schema URL:
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json"
|
||||
}
|
||||
|
||||
|
||||
src/kanban/KanbanBucket.module.scss
|
||||
-----------------------------------
|
||||
Add scss file import:
|
||||
@import '~@fluentui/react/dist/sass/References.scss'
|
||||
|
||||
|
||||
src/kanban/KanbanBucketConfigurator.module.scss
|
||||
-----------------------------------------------
|
||||
Add scss file import:
|
||||
@import '~@fluentui/react/dist/sass/References.scss'
|
||||
|
||||
|
||||
src/kanban/KanbanComponent.module.scss
|
||||
--------------------------------------
|
||||
Add scss file import:
|
||||
@import '~@fluentui/react/dist/sass/References.scss'
|
||||
|
||||
|
||||
src/kanban/KanbanTask.module.scss
|
||||
---------------------------------
|
||||
Add scss file import:
|
||||
@import '~@fluentui/react/dist/sass/References.scss'
|
||||
|
||||
|
||||
src/kanban/KanbanTaskManagedProp.module.scss
|
||||
--------------------------------------------
|
||||
Add scss file import:
|
||||
@import '~@fluentui/react/dist/sass/References.scss'
|
||||
|
||||
|
||||
src/webparts/kanbanBoard/components/KanbanBoardV2.module.scss
|
||||
-------------------------------------------------------------
|
||||
Add scss file import:
|
||||
@import '~@fluentui/react/dist/sass/References.scss'
|
||||
|
||||
|
||||
./.gitignore
|
||||
------------
|
||||
To .gitignore add the '.heft' folder:
|
||||
.heft
|
||||
|
||||
|
||||
./config/package-solution.json
|
||||
------------------------------
|
||||
In package-solution.json add metadata section:
|
||||
{
|
||||
"solution": {
|
||||
"metadata": {
|
||||
"shortDescription": {
|
||||
"default": "react-kanban-board description"
|
||||
},
|
||||
"longDescription": {
|
||||
"default": "react-kanban-board description"
|
||||
},
|
||||
"screenshotPaths": [],
|
||||
"videoUrl": "",
|
||||
"categories": []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
In package-solution.json add features for components:
|
||||
{
|
||||
"solution": {
|
||||
"features": [
|
||||
{
|
||||
"title": "react-kanban-board KanbanBoardWebPart Feature",
|
||||
"description": "The feature that activates KanbanBoardWebPart from the react-kanban-board solution.",
|
||||
"id": "67cd5938-806b-4c79-b589-501f7f26998e",
|
||||
"version": "3.0.0.0",
|
||||
"componentIds": [
|
||||
"67cd5938-806b-4c79-b589-501f7f26998e"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue