honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

React-datatable: Added list attachment support

This commit is contained in:
Chandani Prajapati 2022-11-01 19:37:24 +05:30
parent eec02d8a80
commit f9f55fce46
8 changed files with 58 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/react-datatable/.gitignore vendored
View File

@ -35,3 +35,4 @@ obj
*.cer
# .PEM Certificates
*.pem
*.scss.d.ts

6
samples/react-datatable/fast-serve/config.json Normal file
View File

@ -0,0 +1,6 @@
{
"$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.latest.schema.json",
"cli": {
"isLibraryComponent": false
}
}

24
samples/react-datatable/fast-serve/webpack.extend.js Normal file
View File

@ -0,0 +1,24 @@
/*
* User webpack settings file. You can add your own settings here.
* Changes from this file will be merged into the base webpack configuration file.
* This file will not be overwritten by the subsequent spfx-fast-serve calls.
*/
// you can add your project related webpack configuration here, it will be merged using webpack-merge module
// i.e. plugins: [new webpack.Plugin()]
const webpackConfig = {
}
// for even more fine-grained control, you can apply custom webpack settings using below function
const transformConfig = function (initialWebpackConfig) {
// transform the initial webpack config here, i.e.
// initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.
return initialWebpackConfig;
}
module.exports = {
webpackConfig,
transformConfig
}

6
samples/react-datatable/gulpfile.js vendored
View File

@ -13,4 +13,10 @@ build.rig.getTasks = function () {
return result;
};
/* fast-serve */
const { addFastServe } = require("spfx-fast-serve-helpers");
addFastServe(build);
/* end of fast-serve */
build.initialize(require('gulp'));

6
samples/react-datatable/package.json
View File

@ -9,7 +9,8 @@
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
"test": "gulp test",
"serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve"
},
"dependencies": {
"@material-ui/core": "^4.12.3",
@ -39,6 +40,7 @@
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"@types/webpack-env": "1.14.0",
"@types/es6-promise": "0.0.33"
"@types/es6-promise": "0.0.33",
"spfx-fast-serve-helpers": "~1.14.0"
}
}

3
samples/react-datatable/src/shared/common/RenderImageOrLink/RenderImageOrLink.tsx
View File

@ -30,7 +30,7 @@ export function RenderImageOrLink(props: IImageOrLinkProps) {
alt={description}
height={50}
width={50}
onClick={() => window.location.href = url }
onClick={() => window.location.href = url}
imageFit={ImageFit.cover}
/>
) :
@ -40,5 +40,4 @@ export function RenderImageOrLink(props: IImageOrLinkProps) {
)
}
</>;
}

4
samples/react-datatable/src/shared/service/SPService.ts
View File

@ -25,7 +25,7 @@ export class SPService {
expandQuery.push(selectedFields[i].key);
break;
case 'SP.Field':
selectQuery.push('Attachments,AttachmentFiles');
selectQuery.push('AttachmentFiles');
expandQuery.push('AttachmentFiles');
break;
default:
@ -54,7 +54,7 @@ export class SPService {
const allFields: any[] = await sp.web.lists
.getById(selectedList)
.fields
.filter("Hidden eq false and ReadOnlyField eq false and Title ne 'Content Type' and Title ne 'Attachments'")
.filter("Hidden eq false and ReadOnlyField eq false and Title ne 'Content Type'")
.get();
return allFields;
}

19
samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx
View File

@ -7,14 +7,14 @@ import { SPService } from '../../../shared/service/SPService';
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import { DisplayMode } from '@microsoft/sp-core-library';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Grid } from '@material-ui/core';
import { Link, Text } from 'office-ui-fabric-react';
import Grid from '@material-ui/core/Grid';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { ExportListItemsToCSV } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSV';
import { ExportListItemsToPDF } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDF';
import { Pagination } from '../../../shared/common/Pagination/Pagination';
import { RenderImageOrLink } from '../../../shared/common/RenderImageOrLink/RenderImageOrLink';
import { DetailsList, DetailsListLayoutMode, DetailsRow, IDetailsRowStyles, IDetailsListProps, IColumn, MessageBar, SelectionMode } from 'office-ui-fabric-react';
import { DetailsList, DetailsListLayoutMode, DetailsRow, IDetailsRowStyles, IDetailsListProps, IColumn, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
import { pdfCellFormatter } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter';
import { csvCellFormatter } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter';
import { IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane';
@ -66,7 +66,14 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
/** Format list items for data grid */
listItems = listItems && listItems.map(item => ({
id: item.Id, ...fields.reduce((ob, f) => {
ob[f.key] = item[f.key] ? this.formatColumnValue(item[f.key], f.fieldType) : '-';
if (f.key === "Attachments") {
ob[f.key] = this.formatColumnValue(item["AttachmentFiles"], f.fieldType);
}
else {
if (item[f.key]) {
ob[f.key] = this.formatColumnValue(item[f.key], f.fieldType);
}
}
return ob;
}, {})
}));
@ -88,7 +95,6 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
this.props.context.propertyPane.open();
}
public formatColumnValue(value: any, type: string) {
if (!value) {
return value;
@ -128,6 +134,9 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
case 'SP.FieldLocation':
value = JSON.parse(value).DisplayName;
break;
case 'SP.Field':
value = value?.map(v => <><RenderImageOrLink key={v['odata.id']} url={v['ServerRelativeUrl']} description={v['FileName']}></RenderImageOrLink><br /></>);
break;
default:
break;
}