Redux-Form sample webpart (#503)
* Redux-Form sample SPFx webpart added. New SPFx webpart sample added that uses redux-form library. Sample is a data entry form with dynamic grid built using typescript, react, redux and redux-form library. * Readme file updated. Readme file updated with correct webpart demo gif file path.
This commit is contained in:
Vipul Kelkar
Vesa Juvonen
parent
87e30dd02a
commit
13954cc7bc
|
|
@ -0,0 +1,25 @@
|
||||||
|
# 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
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Build generated files
|
||||||
|
dist
|
||||||
|
lib
|
||||||
|
solution
|
||||||
|
temp
|
||||||
|
*.sppkg
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# OSX
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Visual Studio files
|
||||||
|
.ntvs_analysis.dat
|
||||||
|
.vs
|
||||||
|
bin
|
||||||
|
obj
|
||||||
|
|
||||||
|
# Resx Generated Code
|
||||||
|
*.resx.ts
|
||||||
|
|
||||||
|
# Styles Generated Code
|
||||||
|
*.scss.ts
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"version": "1.4.1",
|
||||||
|
"libraryName": "sp-fx-dynamic-grid",
|
||||||
|
"libraryId": "23cfb83a-b316-4112-8f37-5c769a66c024",
|
||||||
|
"environment": "spo"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
# SPFx webpart using Redux-Form library and React
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
Sample webpart to demonstrate the use of [Redux-Form](https://github.com/erikras/redux-form) library with SPFx, React and Typescript. Demonstrates how to easily build a dynamic grid using redux-form.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Used SharePoint Framework Version
|
||||||
|
|
||||||
|
|
||||||
|
## Applies to
|
||||||
|
|
||||||
|
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||||||
|
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
- Basic knowledge of react-redux concepts - reducer,actions and dispatch.
|
||||||
|
- PnP PowerShell - to setup Fields and Lists to work with the webpart.
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Solution|Author(s)
|
||||||
|
--------|---------
|
||||||
|
react-reduxform | Vipul Kelkar @vipulkelkar
|
||||||
|
|
||||||
|
## Version history
|
||||||
|
|
||||||
|
Version|Date|Comments
|
||||||
|
-------|----|--------
|
||||||
|
1.0|May 02, 2018|Initial release
|
||||||
|
|
||||||
|
## 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
|
||||||
|
|
||||||
|
- The webpart requires two custom lists in the SharePoint site. The folder "SetupScript" contains a PnP PowerShell script that will setup the custom fields, content type and the required lists.
|
||||||
|
|
||||||
|
- Change the site URL in the PowerShell script and execute with proper credentials to setup the lists.
|
||||||
|
|
||||||
|
- Clone this repository
|
||||||
|
- in the command line run:
|
||||||
|
- `npm install`
|
||||||
|
- `gulp serve`
|
||||||
|
|
||||||
|
- Navigate to - <Your SP site>/_layouts/workbench.aspx and add the "ReduxFormWebpart"
|
||||||
|
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- This is a data entry webpart to create a "Purchase Request". Each purchase request can have several items that can be ordered within it.
|
||||||
|
|
||||||
|
- The webpart interacts with two SharePoint lists - "PurchaseRequest" and "PurchaseRequestItems".
|
||||||
|
|
||||||
|
- The purchase request is created in the "PurchaseRequest" list. The purchase items are stored in separate "PurchaseRequestItems" list along with the ListItem ID of the corrosponding PurchaseRequest item.
|
||||||
|
|
||||||
|
|
||||||
|
Redux-Form :
|
||||||
|
|
||||||
|
- Webpart makes use of [Redux-Form](https://github.com/erikras/redux-form) library which makes it easy to maintain the state of form fields without explicitly requiring to maintain the state everytime data in a form field is added/updated/deleted.
|
||||||
|
Refer to the [Getting started](https://redux-form.com/6.4.3/docs/gettingstarted.md/) guide for the basics of redux-form
|
||||||
|
|
||||||
|
- The sample demonstrates how to integrate redux-form in SPFx webpart and develop a dynamic grid component using [FieldArray](https://redux-form.com/6.4.3/docs/api/fieldarray.md/) component of redux-form.
|
||||||
|
|
||||||
|
- The sample also uses custom renderers for form fields along with required field and number validations.
|
||||||
|
|
||||||
|
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-reduxform" />
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
Connect-PnPOnline -Url <URL>
|
||||||
|
|
||||||
|
Write-Host "Starting the setup....."
|
||||||
|
|
||||||
|
$fieldAndCTGroup = "ReduxFormSample"
|
||||||
|
|
||||||
|
Write-Host "Creating fields....."
|
||||||
|
|
||||||
|
Add-PnPField -DisplayName ProductCode -InternalName ProductCode -Type Text -Group $fieldAndCTGroup -ErrorAction SilentlyContinue
|
||||||
|
Add-PnPField -DisplayName PurchasedFor -InternalName PurchasedFor -Type Choice -Choices IT,Admin,HR,Finance -Group $fieldAndCTGroup -ErrorAction SilentlyContinue
|
||||||
|
Add-PnPField -DisplayName TypeOfPR -InternalName TypeOfPR -Type Choice -Choices @("Maintenance","IT Asset Purchase","Stationary","Other Services") -Group $fieldAndCTGroup -ErrorAction SilentlyContinue
|
||||||
|
Add-PnPField -DisplayName PurchaseRequestID -InternalName PurchaseRequestID -Type Number -Group $fieldAndCTGroup -ErrorAction SilentlyContinue
|
||||||
|
Add-PnPField -DisplayName Quantity -InternalName Quantity -Type Number -Group $fieldAndCTGroup -ErrorAction SilentlyContinue
|
||||||
|
Add-PnPField -DisplayName RatePerUnit -InternalName RatePerUnit -Type Number -Group $fieldAndCTGroup -ErrorAction SilentlyContinue
|
||||||
|
Add-PnPField -DisplayName TotalCost -InternalName TotalCost -Type Number -Group $fieldAndCTGroup -ErrorAction SilentlyContinue
|
||||||
|
|
||||||
|
Write-Host "Creating content types....."
|
||||||
|
|
||||||
|
Add-PnPContentType -Name 'PurchaseRequest' -Group $fieldAndCTGroup -ErrorAction SilentlyContinue
|
||||||
|
$purchaseRequestCT = Get-PnPContentType -Identity 'PurchaseRequest'
|
||||||
|
|
||||||
|
Add-PnPContentType -Name 'PurchaseRequestItems' -Group $fieldAndCTGroup -ErrorAction SilentlyContinue
|
||||||
|
$purchaseRequestItemsCT = Get-PnPContentType -Identity 'PurchaseRequestItems'
|
||||||
|
|
||||||
|
|
||||||
|
Write-Host "Adding fields to content type....."
|
||||||
|
|
||||||
|
# Add columns to purchase request CT
|
||||||
|
Add-PnPFieldToContentType -Field PurchasedFor -ContentType $purchaseRequestCT
|
||||||
|
Add-PnPFieldToContentType -Field TypeOfPR -ContentType $purchaseRequestCT
|
||||||
|
|
||||||
|
# Add columns to purchase request items CT
|
||||||
|
Add-PnPFieldToContentType -Field ProductCode -ContentType $purchaseRequestItemsCT
|
||||||
|
Add-PnPFieldToContentType -Field Quantity -ContentType $purchaseRequestItemsCT
|
||||||
|
Add-PnPFieldToContentType -Field RatePerUnit -ContentType $purchaseRequestItemsCT
|
||||||
|
Add-PnPFieldToContentType -Field TotalCost -ContentType $purchaseRequestItemsCT
|
||||||
|
Add-PnPFieldToContentType -Field PurchaseRequestID -ContentType $purchaseRequestItemsCT
|
||||||
|
|
||||||
|
Write-Host "Creating lists....."
|
||||||
|
|
||||||
|
New-PnPList -Title 'PurchaseRequest' -Template GenericList -Url Lists/PurchaseRequest -ErrorAction SilentlyContinue
|
||||||
|
$purchaseRequestList = Get-PnPList -Identity Lists/PurchaseRequest
|
||||||
|
Set-PnPList -Identity 'PurchaseRequest' -EnableContentTypes $true
|
||||||
|
Add-PnPContentTypeToList -List $purchaseRequestList -ContentType $purchaseRequestCT -DefaultContentType
|
||||||
|
|
||||||
|
|
||||||
|
New-PnPList -Title 'PurchaseRequestItems' -Template GenericList -Url Lists/PurchaseRequestItems -ErrorAction SilentlyContinue
|
||||||
|
$purchaseRequestItemsList = Get-PnPList -Identity Lists/PurchaseRequestItems
|
||||||
|
Set-PnPList -Identity 'PurchaseRequestItems' -EnableContentTypes $true
|
||||||
|
Add-PnPContentTypeToList -List $purchaseRequestItemsList -ContentType $purchaseRequestItemsCT -DefaultContentType
|
||||||
|
|
||||||
|
|
||||||
|
Write-Host "Setting up list views....."
|
||||||
|
|
||||||
|
Add-PnPView -List $purchaseRequestList -Title PurchaseRequest -SetAsDefault -Fields PurchasedFor,TypeOfPR,Author
|
||||||
|
Add-PnPView -List $purchaseRequestItemsList -Title PurchaseRequestItems -SetAsDefault -Fields ProductCode,Quantity,RatePerUnit,TotalCost,PurchaseRequestID
|
||||||
|
|
||||||
|
|
||||||
|
Write-Host "Setup completed....."
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 589 KiB |
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||||
|
"version": "2.0",
|
||||||
|
"bundles": {
|
||||||
|
"dynamic-grid-webpart-web-part": {
|
||||||
|
"components": [
|
||||||
|
{
|
||||||
|
"entrypoint": "./lib/webparts/PurchaseRequestWebpart/ReduxFormWebpart.js",
|
||||||
|
"manifest": "./src/webparts/PurchaseRequestWebpart/ReduxFormWebpartWebPart.manifest.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"externals": {},
|
||||||
|
"localizedResources": {
|
||||||
|
"DynamicGridWebpartWebPartStrings": "lib/webparts/PurchaseRequestWebpart/loc/{locale}.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||||
|
"deployCdnPath": "temp/deploy"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||||
|
"workingDir": "./temp/deploy/",
|
||||||
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
|
"container": "sp-fx-dynamic-grid",
|
||||||
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||||
|
"solution": {
|
||||||
|
"name": "sp-fx-dynamic-grid-client-side-solution",
|
||||||
|
"id": "23cfb83a-b316-4112-8f37-5c769a66c024",
|
||||||
|
"version": "1.0.0.0",
|
||||||
|
"includeClientSideAssets": true,
|
||||||
|
"skipFeatureDeployment": true
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"zippedPackage": "solution/sp-fx-dynamic-grid.sppkg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
|
||||||
|
"port": 4321,
|
||||||
|
"https": true,
|
||||||
|
"initialPage": "https://localhost:5432/workbench",
|
||||||
|
"api": {
|
||||||
|
"port": 5432,
|
||||||
|
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
|
||||||
|
// Display errors as warnings
|
||||||
|
"displayAsWarning": true,
|
||||||
|
// The TSLint task may have been configured with several custom lint rules
|
||||||
|
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
|
||||||
|
// project). If true, this flag will deactivate any of these rules.
|
||||||
|
"removeExistingRules": true,
|
||||||
|
// When true, the TSLint task is configured with some default TSLint "rules.":
|
||||||
|
"useDefaultConfigAsBase": false,
|
||||||
|
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
|
||||||
|
// which are active, other than the list of rules below.
|
||||||
|
"lintConfig": {
|
||||||
|
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
|
||||||
|
"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-case": true,
|
||||||
|
"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-use-before-declare": true,
|
||||||
|
"no-with-statement": true,
|
||||||
|
"semicolon": true,
|
||||||
|
"trailing-comma": false,
|
||||||
|
"typedef": false,
|
||||||
|
"typedef-whitespace": false,
|
||||||
|
"use-named-parameter": true,
|
||||||
|
"valid-typeof": true,
|
||||||
|
"variable-name": false,
|
||||||
|
"whitespace": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||||
|
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
'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.`);
|
||||||
|
|
||||||
|
build.initialize(gulp);
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,39 @@
|
||||||
|
{
|
||||||
|
"name": "sp-fx-dynamic-grid",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "gulp bundle",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"test": "gulp test"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@microsoft/sp-core-library": "~1.4.1",
|
||||||
|
"@microsoft/sp-lodash-subset": "~1.4.1",
|
||||||
|
"@microsoft/sp-office-ui-fabric-core": "~1.4.1",
|
||||||
|
"@microsoft/sp-webpart-base": "~1.4.1",
|
||||||
|
"@types/react": "15.6.6",
|
||||||
|
"@types/react-dom": "15.5.6",
|
||||||
|
"@types/redux-form": "^7.2.4",
|
||||||
|
"@types/webpack-env": ">=1.12.1 <1.14.0",
|
||||||
|
"react": "15.6.2",
|
||||||
|
"react-dom": "15.6.2",
|
||||||
|
"react-redux": "^5.0.7",
|
||||||
|
"redux": "^4.0.0",
|
||||||
|
"redux-form": "^7.3.0",
|
||||||
|
"redux-thunk": "^2.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@microsoft/sp-build-web": "~1.4.1",
|
||||||
|
"@microsoft/sp-module-interfaces": "~1.4.1",
|
||||||
|
"@microsoft/sp-webpart-workbench": "~1.4.1",
|
||||||
|
"@types/chai": ">=3.4.34 <3.6.0",
|
||||||
|
"@types/mocha": ">=2.2.33 <2.6.0",
|
||||||
|
"ajv": "~5.2.2",
|
||||||
|
"gulp": "~3.9.1",
|
||||||
|
"sp-pnp-js": "^3.0.7"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import * as ReactDom from 'react-dom';
|
||||||
|
import { Version } from '@microsoft/sp-core-library';
|
||||||
|
import {
|
||||||
|
BaseClientSideWebPart,
|
||||||
|
IPropertyPaneConfiguration,
|
||||||
|
PropertyPaneTextField
|
||||||
|
} from '@microsoft/sp-webpart-base';
|
||||||
|
|
||||||
|
import * as strings from 'DynamicGridWebpartWebPartStrings';
|
||||||
|
import PurchaseRequestWebpart from './components/PurchaseRequestWebpart/PurchaseRequestWebpart';
|
||||||
|
import { IPurchaseRequestWebpartProps } from './components/PurchaseRequestWebpart/IPurchaseRequestWebpartProps';
|
||||||
|
import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';
|
||||||
|
|
||||||
|
export interface IReduxFormWebpartProps {
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class ReduxFormWebpart extends BaseClientSideWebPart<IReduxFormWebpartProps> {
|
||||||
|
|
||||||
|
public render(): void {
|
||||||
|
|
||||||
|
var queryParameters = new UrlQueryParameterCollection(window.location.href);
|
||||||
|
let id: string = "";
|
||||||
|
if (queryParameters.getValue("itemid")) {
|
||||||
|
id = queryParameters.getValue("itemid");
|
||||||
|
}
|
||||||
|
|
||||||
|
const element: React.ReactElement<IReduxFormWebpartProps> = React.createElement(
|
||||||
|
PurchaseRequestWebpart,
|
||||||
|
{
|
||||||
|
description: this.properties.description,
|
||||||
|
siteUrl:this.context.pageContext.web.absoluteUrl,
|
||||||
|
spHttpClient:this.context.spHttpClient,
|
||||||
|
itemId:id
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
ReactDom.render(element, this.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected get dataVersion(): Version {
|
||||||
|
return Version.parse('1.0');
|
||||||
|
}
|
||||||
|
|
||||||
|
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||||
|
return {
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
header: {
|
||||||
|
description: strings.PropertyPaneDescription
|
||||||
|
},
|
||||||
|
groups: [
|
||||||
|
{
|
||||||
|
groupName: strings.BasicGroupName,
|
||||||
|
groupFields: [
|
||||||
|
PropertyPaneTextField('description', {
|
||||||
|
label: strings.DescriptionFieldLabel
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||||
|
"id": "5eae71fd-ab9e-4c89-ac18-24d2e19e9e79",
|
||||||
|
"alias": "DynamicGridWebpartWebPart",
|
||||||
|
"componentType": "WebPart",
|
||||||
|
|
||||||
|
// The "*" signifies that the version should be taken from the package.json
|
||||||
|
"version": "*",
|
||||||
|
"manifestVersion": 2,
|
||||||
|
|
||||||
|
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||||
|
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||||
|
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||||
|
"requiresCustomScript": false,
|
||||||
|
|
||||||
|
"preconfiguredEntries": [{
|
||||||
|
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||||
|
"group": { "default": "Other" },
|
||||||
|
"title": { "default": "ReduxFormWebpart" },
|
||||||
|
"description": { "default": "Sample webpart using redux-form library in SPFx." },
|
||||||
|
"officeFabricIconFontName": "Page",
|
||||||
|
"properties": {
|
||||||
|
"description": "Sample webpart using redux-form library in SPFx."
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { INewFormState } from '../state/INewFormControlsState';
|
||||||
|
import NewPurchaseRequestService from '../services/NewPurchaseRequestService';
|
||||||
|
|
||||||
|
// The file contains actions for the NewPurchaseRequestReducer
|
||||||
|
|
||||||
|
// Gets the choices for dropdown fields in the new form. The values are fetched from the choice field options.
|
||||||
|
export function GetInitialControlValuesAction(){
|
||||||
|
|
||||||
|
return dispatch => {
|
||||||
|
|
||||||
|
let newPurchaseRequestServiceObj:NewPurchaseRequestService = new NewPurchaseRequestService();
|
||||||
|
let formControlsState = {purchasedForOptions:[],typeOfPurchaseRequestOptions:[]} as INewFormState;
|
||||||
|
|
||||||
|
newPurchaseRequestServiceObj.getNewFormControlsState().then((resp:INewFormState) => {
|
||||||
|
|
||||||
|
formControlsState.purchasedForOptions = resp.purchasedForOptions;
|
||||||
|
formControlsState.typeOfPurchaseRequestOptions = resp.typeOfPurchaseRequestOptions;
|
||||||
|
|
||||||
|
dispatch({
|
||||||
|
type:"GET_DEFAULT_CONTROL_VALUES",
|
||||||
|
payload:formControlsState
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Creates a new purchase request.
|
||||||
|
export function CreateNewPurchaseRequest(purchaseRequestData:INewFormState, siteUrl){
|
||||||
|
return dispatch => {
|
||||||
|
|
||||||
|
let newPurchaseRequestServiceObj:NewPurchaseRequestService = new NewPurchaseRequestService();
|
||||||
|
|
||||||
|
newPurchaseRequestServiceObj.createNewPurchaseRequest(purchaseRequestData,siteUrl).then(response =>{
|
||||||
|
alert("Purchase request created...");
|
||||||
|
}).catch(()=>{
|
||||||
|
alert("Error in creating purchase request...")
|
||||||
|
});
|
||||||
|
|
||||||
|
dispatch({
|
||||||
|
type:"CREATE_NEW_REQUEST",
|
||||||
|
payload:purchaseRequestData
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,166 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { INewFormState } from '../../state/INewFormControlsState';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { Dispatch } from 'redux';
|
||||||
|
import { IPurchaseRequestWebpartProps } from '../PurchaseRequestWebpart/IPurchaseRequestWebpartProps';
|
||||||
|
import { GetInitialControlValuesAction, CreateNewPurchaseRequest } from '../../actions/NewFormControlsValuesAction';
|
||||||
|
import { Dropdown, IDropdown, DropdownMenuItemType, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
|
||||||
|
import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
|
||||||
|
import { Label } from 'office-ui-fabric-react/lib/Label';
|
||||||
|
import { Field, reduxForm, InjectedFormProps, FieldArray, WrappedFieldArrayProps, BaseFieldArrayProps } from 'redux-form';
|
||||||
|
import pnp from 'sp-pnp-js';
|
||||||
|
import { renderDropDown, renderInput } from '../Redux-Form-CustomComponents/FieldRenderers';
|
||||||
|
|
||||||
|
// Connected state
|
||||||
|
interface INewFormConnectedState{
|
||||||
|
|
||||||
|
// Represents a purchase request and the data from the form.
|
||||||
|
newFormControlValues : INewFormState;
|
||||||
|
|
||||||
|
// Represents the initial values. << Unused now. Useful for edit item feature >>
|
||||||
|
initialValues:any;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Represents the connected dispatch
|
||||||
|
interface INewFormConnectedDispatch{
|
||||||
|
|
||||||
|
// Gets the options for dropdown fields
|
||||||
|
getDefaultControlsData:() => void;
|
||||||
|
|
||||||
|
createNewPurchaseRequest:(purchaseRequestData:INewFormState, siteUrl:string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validations for the redux form
|
||||||
|
const required = value => (value ? undefined : ' *');
|
||||||
|
const number = value =>
|
||||||
|
value && isNaN(Number(value)) ? ' Invalid value' : undefined;
|
||||||
|
|
||||||
|
|
||||||
|
// Represents the repeating purchase items component.
|
||||||
|
// Used in "NewRequestComponent" react component below along with "FieldsArray" from redux-form.
|
||||||
|
// Renders custom input component with validations
|
||||||
|
class PurchaseItemsComponent extends React.Component<WrappedFieldArrayProps<any>,{}>{
|
||||||
|
|
||||||
|
public render(){
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<button type="button" onClick={() => this.props.fields.push({})}>Add purchase item</button>
|
||||||
|
{this.props.fields.map((purchaseItem, index) =>
|
||||||
|
<tr>
|
||||||
|
<div>
|
||||||
|
<h4>Item {index + 1}</h4>
|
||||||
|
<td>
|
||||||
|
<Field name={`${purchaseItem}.productCode`} type="text" component={renderInput} placeholder="Product code" validate={[required]}/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<Field name={`${purchaseItem}.quantity`} type="text" component={renderInput} placeholder="Quantity" validate={[required,number]}/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<Field name={`${purchaseItem}.ratePerUnit`} type="text" component={renderInput} placeholder="Price per unit" validate={[required,number]}/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<Field name={`${purchaseItem}.totalCost`} type="text" component={renderInput} placeholder="Total Cost" validate={[required,number]}/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" title="Remove Item" onClick={() => this.props.fields.remove(index)}>Remove item</button>
|
||||||
|
</td>
|
||||||
|
</div>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
class NewRequestComponent extends React.Component<INewFormConnectedState & INewFormConnectedDispatch & IPurchaseRequestWebpartProps & InjectedFormProps<{}, INewFormConnectedState>>{
|
||||||
|
|
||||||
|
constructor(props){
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(){
|
||||||
|
|
||||||
|
return(
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{/* Sent the props as well to the SubmitForm handler to use the Connected Dispatch. Renders custom dropdown component with validation*/}
|
||||||
|
<form onSubmit={this.props.handleSubmit(((values)=>this.SubmitForm(values,this.props)))}>
|
||||||
|
<div>
|
||||||
|
<Field component={renderDropDown} label="Purchased for : " name="purchasedFor" validate={required}>
|
||||||
|
<option key='' value=''></option>
|
||||||
|
{this.props.newFormControlValues.purchasedForOptions.map(purchasedFor => {return <option key={purchasedFor} value={purchasedFor}>{purchasedFor}</option>})};
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div>
|
||||||
|
<Field component={renderDropDown} label="Type of purchase request : " name="typeOfPurchaseRequest" validate={required}>
|
||||||
|
<option key='' value=''></option>
|
||||||
|
{this.props.newFormControlValues.typeOfPurchaseRequestOptions.map(typeOfPr => {return <option key={typeOfPr} value={typeOfPr}>{typeOfPr}</option>})} ;
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<table>
|
||||||
|
<FieldArray name="purchaseItems" component={PurchaseItemsComponent}/>
|
||||||
|
</table>
|
||||||
|
<br/>
|
||||||
|
<button type="submit" disabled={this.props.submitting}>Create purchase request</button>
|
||||||
|
<br/>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handles the submit form.
|
||||||
|
SubmitForm(values, props){
|
||||||
|
|
||||||
|
let purchaseRequestData = {} as INewFormState;
|
||||||
|
purchaseRequestData = values;
|
||||||
|
purchaseRequestData.purchasedForOptions = props.newFormControlValues.purchasedForOptions;
|
||||||
|
purchaseRequestData.typeOfPurchaseRequestOptions = props.newFormControlValues.typeOfPurchaseRequestOptions;
|
||||||
|
|
||||||
|
// Call the connected dispatch to create new purchase request
|
||||||
|
props.createNewPurchaseRequest(purchaseRequestData,props.siteUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
componentDidMount(){
|
||||||
|
this.props.getDefaultControlsData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Maps the State to props
|
||||||
|
const mapStateToProps = (state) : INewFormConnectedState => {
|
||||||
|
|
||||||
|
// Includes the initialValues property to load the form with initial values
|
||||||
|
return{
|
||||||
|
newFormControlValues : state.NewFormControlValues,
|
||||||
|
initialValues : state.NewFormControlValues
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Maps dispatch to props
|
||||||
|
const mapDispatchToProps = (dispatch):INewFormConnectedDispatch => {
|
||||||
|
return{
|
||||||
|
getDefaultControlsData:() => {
|
||||||
|
return dispatch(GetInitialControlValuesAction());
|
||||||
|
},
|
||||||
|
createNewPurchaseRequest:(purchaseRequestData:INewFormState, siteUrl:string) => {
|
||||||
|
return dispatch(CreateNewPurchaseRequest(purchaseRequestData,siteUrl));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default connect(mapStateToProps,mapDispatchToProps)(
|
||||||
|
reduxForm<{},INewFormConnectedState>(
|
||||||
|
{
|
||||||
|
form:'NewPurchaseRequestForm',
|
||||||
|
destroyOnUnmount:false,
|
||||||
|
|
||||||
|
// Reinitializes when the state changes. << Unused at the moment. Useful in edit item feature >>
|
||||||
|
enableReinitialize:true
|
||||||
|
}
|
||||||
|
)(NewRequestComponent)
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { SPHttpClient } from '@microsoft/sp-http';
|
||||||
|
|
||||||
|
export interface IPurchaseRequestWebpartProps {
|
||||||
|
description: string;
|
||||||
|
siteUrl:string;
|
||||||
|
spHttpClient:SPHttpClient;
|
||||||
|
itemId:string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||||
|
|
||||||
|
.dynamicGridWebpart {
|
||||||
|
.container {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0px auto;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
@include ms-Grid-row;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
background-color: $ms-color-themeDark;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include ms-Grid-col;
|
||||||
|
@include ms-lg10;
|
||||||
|
@include ms-xl8;
|
||||||
|
@include ms-xlPush2;
|
||||||
|
@include ms-lgPush1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
@include ms-font-xl;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
// Our button
|
||||||
|
text-decoration: none;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
// Primary Button
|
||||||
|
min-width: 80px;
|
||||||
|
background-color: $ms-color-themePrimary;
|
||||||
|
border-color: $ms-color-themePrimary;
|
||||||
|
color: $ms-color-white;
|
||||||
|
|
||||||
|
// Basic Button
|
||||||
|
outline: transparent;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: $ms-font-size-m;
|
||||||
|
font-weight: $ms-font-weight-regular;
|
||||||
|
border-width: 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: $ms-font-weight-semibold;
|
||||||
|
font-size: $ms-font-size-m;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import styles from './PurchaseRequestWebpart.module.scss';
|
||||||
|
import { IPurchaseRequestWebpartProps } from './IPurchaseRequestWebpartProps';
|
||||||
|
import { escape } from '@microsoft/sp-lodash-subset';
|
||||||
|
import ConfigureStore from "../../store/ConfigureStore";
|
||||||
|
import { connect } from "react-redux";
|
||||||
|
import {INewFormState} from "../../state/INewFormControlsState";
|
||||||
|
import { Provider } from "react-redux";
|
||||||
|
import NewPurchaseRequestComponent from "../CreateNewRequest/CreateNewRequestComponent";
|
||||||
|
|
||||||
|
export default class PurchaseRequestWebpart extends React.Component<IPurchaseRequestWebpartProps, {}> {
|
||||||
|
|
||||||
|
public render(){
|
||||||
|
|
||||||
|
// Initialize the redux store
|
||||||
|
const purchaseRequertStore = ConfigureStore();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Provider store={purchaseRequertStore}>
|
||||||
|
<NewPurchaseRequestComponent {...this.props}/>
|
||||||
|
</Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
// The file contains custom field render components used in the redux form in the purchase requestwebpart.
|
||||||
|
|
||||||
|
var requiredMessageStyle={
|
||||||
|
color:'Red'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Custom renderer for dropdown field with validation message
|
||||||
|
export class renderDropDown extends React.Component<any,{}>{
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<label>{this.props.label}</label>
|
||||||
|
<select {...this.props.input}>
|
||||||
|
{this.props.children}
|
||||||
|
</select>
|
||||||
|
<br/>
|
||||||
|
{this.props.meta.touched && this.props.meta.error && <span style={requiredMessageStyle}>{this.props.meta.error}</span>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom renderer for Input fields with validation message
|
||||||
|
export class renderInput extends React.Component<any,{}>{
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<label>{this.props.label}</label>
|
||||||
|
<input {...this.props.input} placeholder={this.props.placeholder}></input>
|
||||||
|
<br/>
|
||||||
|
{this.props.meta.touched && this.props.meta.error && <span style={requiredMessageStyle}>{this.props.meta.error}</span>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
define([], function() {
|
||||||
|
return {
|
||||||
|
"PropertyPaneDescription": "Description",
|
||||||
|
"BasicGroupName": "Group Name",
|
||||||
|
"DescriptionFieldLabel": "Description Field"
|
||||||
|
}
|
||||||
|
});
|
||||||
10
samples/react-reduxform/src/webparts/PurchaseRequestWebpart/loc/mystrings.d.ts
vendored
Normal file
10
samples/react-reduxform/src/webparts/PurchaseRequestWebpart/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
declare interface IDynamicGridWebpartWebPartStrings {
|
||||||
|
PropertyPaneDescription: string;
|
||||||
|
BasicGroupName: string;
|
||||||
|
DescriptionFieldLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'DynamicGridWebpartWebPartStrings' {
|
||||||
|
const strings: IDynamicGridWebpartWebPartStrings;
|
||||||
|
export = strings;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { INewFormState } from '../state/INewFormControlsState';
|
||||||
|
import { GetInitialControlValuesAction } from '../actions/NewFormControlsValuesAction';
|
||||||
|
|
||||||
|
// Initial state of the purcahse request.
|
||||||
|
export const newFormControlsInitialState:INewFormState = {
|
||||||
|
purchasedFor:"",
|
||||||
|
typeOfPurchaseRequest:"",
|
||||||
|
purchasedForOptions:[],
|
||||||
|
typeOfPurchaseRequestOptions:[],
|
||||||
|
purchaseItems:[]
|
||||||
|
};
|
||||||
|
|
||||||
|
export const NewPurchaseRequestReducer = (state:INewFormState=newFormControlsInitialState,action) => {
|
||||||
|
switch(action.type){
|
||||||
|
|
||||||
|
// Gets the values for dropdown fields from SharePoint choice columns.
|
||||||
|
case "GET_DEFAULT_CONTROL_VALUES":
|
||||||
|
|
||||||
|
state={
|
||||||
|
...state,
|
||||||
|
purchasedForOptions : action.payload.purchasedForOptions,
|
||||||
|
typeOfPurchaseRequestOptions : action.payload.typeOfPurchaseRequestOptions,
|
||||||
|
};
|
||||||
|
|
||||||
|
break;
|
||||||
|
|
||||||
|
// Creates a new purchase request.
|
||||||
|
case "CREATE_NEW_REQUEST":
|
||||||
|
|
||||||
|
state={
|
||||||
|
...state,
|
||||||
|
purchasedFor : action.payload.purchasedFor,
|
||||||
|
typeOfPurchaseRequest : action.payload.typeOfPurchaseRequest,
|
||||||
|
purchasedForOptions : action.payload.purchasedForOptions,
|
||||||
|
typeOfPurchaseRequestOptions : action.payload.typeOfPurchaseRequestOptions,
|
||||||
|
purchaseItems: action.payload.purchaseItems
|
||||||
|
};
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return state;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { INewFormState } from '../state/INewFormControlsState';
|
||||||
|
|
||||||
|
// Represents the service to interact with SharePoint to work with purchase request.
|
||||||
|
export default interface INewPurchaseRequestService{
|
||||||
|
getNewFormControlsState() : Promise<any>;
|
||||||
|
createNewPurchaseRequest(purchaseRequestData:INewFormState,siteUrl) : Promise<any>;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
import INewPurchaseRequestService from "./INewPurchaseRequestService";
|
||||||
|
import pnp from "sp-pnp-js";
|
||||||
|
import { INewFormState } from "../state/INewFormControlsState";
|
||||||
|
import { ItemAddResult,Web } from "sp-pnp-js";
|
||||||
|
|
||||||
|
|
||||||
|
export default class NewPurchaseRequestService implements INewPurchaseRequestService{
|
||||||
|
|
||||||
|
private getPurchasedForControlValues():Promise<any>{
|
||||||
|
return pnp.sp.web.fields.getByTitle("PurchasedFor").select("Choices").get().then(response => {
|
||||||
|
return response;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private getTypeOfPurchaseRequestValues():Promise<any>{
|
||||||
|
return pnp.sp.web.fields.getByTitle("TypeOfPR").select("Choices").get().then(response => {
|
||||||
|
return response;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gets the choices to be displayed in the dropdown fields.
|
||||||
|
getNewFormControlsState():Promise<any>{
|
||||||
|
|
||||||
|
let newFormControlsState = {} as INewFormState;
|
||||||
|
|
||||||
|
return this.getPurchasedForControlValues().then(purchasedForValuesResponse => {
|
||||||
|
newFormControlsState.purchasedForOptions = purchasedForValuesResponse.Choices;
|
||||||
|
|
||||||
|
return this.getTypeOfPurchaseRequestValues().then(typeOfPurchaseRequestResponse => {
|
||||||
|
newFormControlsState.typeOfPurchaseRequestOptions = typeOfPurchaseRequestResponse.Choices;
|
||||||
|
|
||||||
|
return newFormControlsState;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Creates a new purchase request. The request is created in two list. One where the master data is stored and one
|
||||||
|
// where the purchase items are stored with a reference of the ID of master request.
|
||||||
|
async createNewPurchaseRequest(purchaseRequestData:INewFormState,siteUrl) : Promise<any>{
|
||||||
|
|
||||||
|
return pnp.sp.web.lists.getByTitle("PurchaseRequest").items.add({
|
||||||
|
PurchasedFor:purchaseRequestData.purchasedFor,
|
||||||
|
TypeOfPR:purchaseRequestData.typeOfPurchaseRequest})
|
||||||
|
|
||||||
|
.then((result:ItemAddResult)=>{
|
||||||
|
let purchaseRequestID = result.data.Id;
|
||||||
|
console.log("Purchase request created : " + purchaseRequestID);
|
||||||
|
if(purchaseRequestData.purchaseItems != null && purchaseRequestData.purchaseItems.length > 0){
|
||||||
|
|
||||||
|
// Creates the multiple purchase items in batch.
|
||||||
|
let web = new Web(siteUrl);
|
||||||
|
let batch = web.createBatch();
|
||||||
|
|
||||||
|
purchaseRequestData.purchaseItems.forEach(purchaseItem => {
|
||||||
|
web.lists.getByTitle("PurchaseRequestItems").items.inBatch(batch).add({
|
||||||
|
ProductCode:purchaseItem.productCode,
|
||||||
|
Quantity:purchaseItem.quantity,
|
||||||
|
RatePerUnit:purchaseItem.ratePerUnit,
|
||||||
|
TotalCost:purchaseItem.totalCost,
|
||||||
|
PurchaseRequestID:purchaseRequestID
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
batch.execute().then(()=>{
|
||||||
|
console.log("Purchase items added to the list....");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
alert('Select atleast one purchase item.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
// Represents a purchase request
|
||||||
|
export interface INewFormState{
|
||||||
|
|
||||||
|
// Represent the choices to be displayed in dropdown when the form loads.
|
||||||
|
purchasedForOptions:string[];
|
||||||
|
typeOfPurchaseRequestOptions:string[];
|
||||||
|
|
||||||
|
// Represent the values selected for the fields
|
||||||
|
purchasedFor:string;
|
||||||
|
typeOfPurchaseRequest:string;
|
||||||
|
purchaseItems:IPurchaseItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Represents one purchase item in the purchase request.
|
||||||
|
export interface IPurchaseItem{
|
||||||
|
productCode:string;
|
||||||
|
quantity:number;
|
||||||
|
ratePerUnit:number;
|
||||||
|
totalCost:number;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { createStore,combineReducers, applyMiddleware } from "redux";
|
||||||
|
import { NewPurchaseRequestReducer } from "../reducers/NewPurchaseRequestReducer";
|
||||||
|
import thunk from "redux-thunk";
|
||||||
|
import { reducer as formReducer } from 'redux-form';
|
||||||
|
|
||||||
|
|
||||||
|
// Configures the redux store.
|
||||||
|
export default function ConfigureStore():any{
|
||||||
|
|
||||||
|
// Combine multiple reducers to create the store. FormReducer is for the redux-form.
|
||||||
|
const PurchaseRequestStore = createStore(
|
||||||
|
combineReducers
|
||||||
|
({
|
||||||
|
NewFormControlValues:NewPurchaseRequestReducer,
|
||||||
|
form:formReducer
|
||||||
|
}),
|
||||||
|
{},
|
||||||
|
applyMiddleware(thunk)
|
||||||
|
);
|
||||||
|
|
||||||
|
return PurchaseRequestStore;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "commonjs",
|
||||||
|
"jsx": "react",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"typeRoots": [
|
||||||
|
"./node_modules/@types",
|
||||||
|
"./node_modules/@microsoft"
|
||||||
|
],
|
||||||
|
"types": [
|
||||||
|
"es6-promise",
|
||||||
|
"webpack-env"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"es5",
|
||||||
|
"dom",
|
||||||
|
"es2015.collection"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue