From f9f55fce46b19427e33146204d420019d9097dfc Mon Sep 17 00:00:00 2001 From: Chandani Prajapati Date: Tue, 1 Nov 2022 19:37:24 +0530 Subject: [PATCH] React-datatable: Added list attachment support --- samples/react-datatable/.gitignore | 1 + .../react-datatable/fast-serve/config.json | 6 +++++ .../fast-serve/webpack.extend.js | 24 +++++++++++++++++++ samples/react-datatable/gulpfile.js | 6 +++++ samples/react-datatable/package.json | 6 +++-- .../RenderImageOrLink/RenderImageOrLink.tsx | 3 +-- .../src/shared/service/SPService.ts | 4 ++-- .../components/ReactDatatable.tsx | 19 +++++++++++---- 8 files changed, 58 insertions(+), 11 deletions(-) create mode 100644 samples/react-datatable/fast-serve/config.json create mode 100644 samples/react-datatable/fast-serve/webpack.extend.js diff --git a/samples/react-datatable/.gitignore b/samples/react-datatable/.gitignore index 636a3337f..a2e1387b1 100644 --- a/samples/react-datatable/.gitignore +++ b/samples/react-datatable/.gitignore @@ -35,3 +35,4 @@ obj *.cer # .PEM Certificates *.pem +*.scss.d.ts \ No newline at end of file diff --git a/samples/react-datatable/fast-serve/config.json b/samples/react-datatable/fast-serve/config.json new file mode 100644 index 000000000..fbb6384ca --- /dev/null +++ b/samples/react-datatable/fast-serve/config.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.latest.schema.json", + "cli": { + "isLibraryComponent": false + } +} \ No newline at end of file diff --git a/samples/react-datatable/fast-serve/webpack.extend.js b/samples/react-datatable/fast-serve/webpack.extend.js new file mode 100644 index 000000000..22e737e60 --- /dev/null +++ b/samples/react-datatable/fast-serve/webpack.extend.js @@ -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 +} diff --git a/samples/react-datatable/gulpfile.js b/samples/react-datatable/gulpfile.js index be2918708..8e3857742 100644 --- a/samples/react-datatable/gulpfile.js +++ b/samples/react-datatable/gulpfile.js @@ -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')); + diff --git a/samples/react-datatable/package.json b/samples/react-datatable/package.json index 7f261aed9..760cad565 100644 --- a/samples/react-datatable/package.json +++ b/samples/react-datatable/package.json @@ -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" } } diff --git a/samples/react-datatable/src/shared/common/RenderImageOrLink/RenderImageOrLink.tsx b/samples/react-datatable/src/shared/common/RenderImageOrLink/RenderImageOrLink.tsx index 61a46a7ea..ac789275d 100644 --- a/samples/react-datatable/src/shared/common/RenderImageOrLink/RenderImageOrLink.tsx +++ b/samples/react-datatable/src/shared/common/RenderImageOrLink/RenderImageOrLink.tsx @@ -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) { ) } ; - } diff --git a/samples/react-datatable/src/shared/service/SPService.ts b/samples/react-datatable/src/shared/service/SPService.ts index 9b4721d24..2d696892e 100644 --- a/samples/react-datatable/src/shared/service/SPService.ts +++ b/samples/react-datatable/src/shared/service/SPService.ts @@ -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; } diff --git a/samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx b/samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx index 0ba59ace5..19a24ea10 100644 --- a/samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx +++ b/samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx @@ -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 ({ 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 <>
); + break; default: break; }