diff --git a/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/SpSiteErDiagram.tsx b/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/SpSiteErDiagram.tsx index 8f5e6a07a..19a924141 100644 --- a/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/SpSiteErDiagram.tsx +++ b/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/SpSiteErDiagram.tsx @@ -5,11 +5,14 @@ import getSPSiteData from './helpers/SPSiteData'; import { initDiagram } from './helpers/GoJSHelper'; import getGoJSNodesFromSPSiteData from './helpers/SPSiteDataToGoJSER'; import { CommandBar, ProgressIndicator } from 'office-ui-fabric-react'; +import { WebPartContext } from '@microsoft/sp-webpart-base'; export interface ISpSiteDiagramProps { - context: any + context: WebPartContext } const SpSiteErDiagram: React.FC = (props: ISpSiteDiagramProps) => { + // Refs + const diagramRef = React.useRef(); // State: Data const [loadingProgress, setLoadingProgress] = React.useState(0); const [nodeDataArray, setNodeDataArray] = React.useState([]); @@ -17,6 +20,8 @@ const SpSiteErDiagram: React.FC = (props: ISpSiteDiagramPro // State: Options const [optionRelationOnly, setOptionRelationOnly] = React.useState(true); const [useInternalName, setUseInternalName] = React.useState(true); + const [alertsActive, setAlertsActive] = React.useState(true); + const [fieldsActive, setFieldsActive] = React.useState(true); const loadDiagram = async (refresh: boolean) => { if(refresh) { setLoadingProgress(0); setNodeDataArray([]); } @@ -24,7 +29,7 @@ const SpSiteErDiagram: React.FC = (props: ISpSiteDiagramPro let spSiteData = await getSPSiteData(props.context, refresh, (progress) => {setLoadingProgress(progress);}); console.log("SPSiteData", spSiteData); // Transform to GoJS Model - let goJSNodes = getGoJSNodesFromSPSiteData(spSiteData, useInternalName ? "name" : "displayName"); + let goJSNodes = getGoJSNodesFromSPSiteData(spSiteData, useInternalName ? "name" : "displayName", alertsActive, fieldsActive); // Set State setNodeDataArray(goJSNodes.nodeDataArray.filter((n) => optionRelationOnly && goJSNodes.linkDataArray.some(l => l.from == n.key || l.to == n.key) || !optionRelationOnly // Filter optionRelationOnly @@ -35,21 +40,35 @@ const SpSiteErDiagram: React.FC = (props: ISpSiteDiagramPro // "ComponentDitMount" React.useEffect(() => { loadDiagram(false); - }, [optionRelationOnly, useInternalName]); + }, [optionRelationOnly, useInternalName, alertsActive, fieldsActive]); + + const downloadAsImage = () => { + if(diagramRef && diagramRef.current) { + let canvas = (diagramRef.current as any).divRef.current.firstChild; + console.log((diagramRef.current as any).divRef.current); + var link = document.createElement('a'); + link.download = props.context.pageContext.web.title + '_ERDiagram.png'; + link.href = canvas.toDataURL() + link.click(); + } + } return (
{ loadDiagram(true); }}, - {key: '2', text: 'Only Lists with Relations', iconProps: { iconName: optionRelationOnly ? 'CheckboxComposite' : 'Checkbox' }, onClick: () => { setOptionRelationOnly(!optionRelationOnly); }}, - {key: '3', text: useInternalName ? "InternalName" : "DisplayName", iconProps: { iconName: useInternalName ? 'ToggleLeft' : 'ToggleRight' }, onClick: () => { setUseInternalName(!useInternalName); }} + {key: '2', text: 'Only lists with relations', iconProps: { iconName: optionRelationOnly ? 'CheckboxComposite' : 'Checkbox' }, onClick: () => { setOptionRelationOnly(!optionRelationOnly); }}, + {key: '2', text: 'Show alerts', iconProps: { iconName: alertsActive ? 'CheckboxComposite' : 'Checkbox' }, onClick: () => { setAlertsActive(!alertsActive); }}, + {key: '2', text: 'Show fields', iconProps: { iconName: fieldsActive ? 'CheckboxComposite' : 'Checkbox' }, onClick: () => { setFieldsActive(!fieldsActive); }}, + {key: '3', text: useInternalName ? "InternalName" : "DisplayName", iconProps: { iconName: useInternalName ? 'ToggleLeft' : 'ToggleRight' }, onClick: () => { setUseInternalName(!useInternalName); }}, + {key: '4', text: "Download as image", iconProps: { iconName: 'Share' }, onClick: () => { downloadAsImage() }} ]} />
{ loadingProgress != 100 && nodeDataArray.length == 0 ?
: - 3500 && list.ItemCount < 5000 && table.alerts.push({ title: `Itemcount (${list.ItemCount}) will reach soon 5k => check if all necessary columns are indexed !!`, type:"Error" }); + list.ItemCount > 5000 && table.alerts.push({ title: `Itemcount (${list.ItemCount}) > 5k. Filter or sorting might not work anymore`, type:"Error" }); + !list.EnableVersioning && table.alerts.push({ title: "no versioning activated", type: "Warning" }); list.MajorVersionLimit && list.MajorVersionLimit > 100 && table.alerts.push({ title: `high max. version limit (${list.MajorVersionLimit})`, type: "Warning" }); - table.alerts.push({ title: `Crawling is ${list.NoCrawl ? 'inactive' : 'active'}`, type:"Info" }) + // Infos + table.alerts.push({ title: `Crawling is ${list.NoCrawl ? 'inactive' : 'active'}`, type:"Info" }); + table.alerts.push({ title: `Item Count: ${list.ItemCount}`, type:"Info" }); + table.alerts.push({ title: `ContentTypes ${list.ContentTypesEnabled ? 'enabled' : 'disabled'}`, type:"Info" }); // add Table spSiteData.tables.push(table); diff --git a/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteDataToGoJSER.ts b/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteDataToGoJSER.ts index 03191321a..4c3409ed6 100644 --- a/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteDataToGoJSER.ts +++ b/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteDataToGoJSER.ts @@ -76,7 +76,7 @@ export interface GoJSLink { text: string, toText: string } -const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData, fieldNameProperty: string = "name") : { nodeDataArray: GoJSNode[], linkDataArray: GoJSLink[] } => { +const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData, fieldNameProperty: string = "name", alertsActive = true, fieldsActive = true) : { nodeDataArray: GoJSNode[], linkDataArray: GoJSLink[] } => { let nodeDataArray: GoJSNode[] = []; let linkDataArray: GoJSLink[] = []; @@ -84,8 +84,8 @@ const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData, fieldNameProperty: s nodeDataArray = spSiteData.tables.map(t => { return { key: t.title, items: [ - ...t.alerts.map(a => getNodeItemFromAlert(a)), - ...t.fields.map(f => getNodeItemFromField(f, fieldNameProperty)) + ...(alertsActive ? t.alerts.map(a => getNodeItemFromAlert(a)) : []), + ...(fieldsActive ? t.fields.map(f => getNodeItemFromField(f, fieldNameProperty)) : []) ].sort((a,b) => a.order.charCodeAt(0) - b.order.charCodeAt(0)) }})