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

wip

This commit is contained in:
NiklasWilhelm 2022-10-03 22:15:30 +02:00
parent fe6be569c5
commit f33c23603e
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/SpSiteErDiagram.tsx
View File

@ -5,6 +5,7 @@ import { ReactDiagram } from 'gojs-react';
import getSPSiteData from './helpers/SPSiteData'; import getSPSiteData from './helpers/SPSiteData';
import { initDiagram } from './helpers/GoJSHelper'; import { initDiagram } from './helpers/GoJSHelper';
import getGoJSNodesFromSPSiteData from './helpers/SPSiteDataToGoJSER'; import getGoJSNodesFromSPSiteData from './helpers/SPSiteDataToGoJSER';
import { ProgressIndicator } from 'office-ui-fabric-react';
interface SpSiteDiagramState { interface SpSiteDiagramState {
loadingProgress: number, loadingProgress: number,
@ -33,14 +34,18 @@ export default class SpSiteErDiagram extends React.Component<ISpSiteErDiagramPro
public render(): React.ReactElement<ISpSiteErDiagramProps> { public render(): React.ReactElement<ISpSiteErDiagramProps> {
return ( return (
<div className={styles.spSiteErDiagram} style={{height: "calc(100% - 0px)", padding: "0px"}}> <div className={styles.spSiteErDiagram} style={{height: "calc(100% - 0px)", padding: "0px"}}>
{this.state.loadingProgress != 100 || this.state.nodeDataArray.length == 0 ? { // this.state.loadingProgress != 100 || this.state.nodeDataArray.length == 0
<div>Loading ({this.state.loadingProgress}%)</div> : this.state.loadingProgress != 100 || this.state.nodeDataArray.length == 0 ?
<div style={{ padding: "8%" }}>
<ProgressIndicator label={`Loading Lists and Columns ${this.state.loadingProgress.toFixed(0)}%`} percentComplete={this.state.loadingProgress/100} />
</div> :
<ReactDiagram //ref={diagramRef} <ReactDiagram //ref={diagramRef}
divClassName='diagram-component' divClassName='diagram-component'
style={{ backgroundColor: '#eee' }} style={{ backgroundColor: '#eee' }}
initDiagram={initDiagram} initDiagram={initDiagram}
nodeDataArray={this.state.nodeDataArray} nodeDataArray={this.state.nodeDataArray}
linkDataArray={this.state.linkDataArray} linkDataArray={this.state.linkDataArray}
/>} />}
</div> </div>
); );

6
samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteData.ts
View File

@ -60,7 +60,7 @@ const getSPSiteData = async (spfxContext: any, force?: boolean, progress?: (numb
progress && progress(loadedCount/totalCount * 100); progress && progress(loadedCount/totalCount * 100);
// save names for later // save names for later
tmp_listNames[`{${list.Id}}`] = list.Title; tmp_listNames[`{${list.Id.toLocaleLowerCase()}}`] = list.Title;
// Tables/Lists // Tables/Lists
let table: SPTable = { title: list.Title, fields: [], alerts: [] }; let table: SPTable = { title: list.Title, fields: [], alerts: [] };
@ -102,7 +102,9 @@ const getSPSiteData = async (spfxContext: any, force?: boolean, progress?: (numb
} }
// resolve Ids // resolve Ids
spSiteData.relations = spSiteData.relations.map<SPRelation>((r) => {return {...r, toTableTitle: tmp_listNames[r.toTableTitle]}}) console.log("tmp_listNames",tmp_listNames);
console.log("asd", [...spSiteData.relations]);
spSiteData.relations = spSiteData.relations.map<SPRelation>((r) => {return {...r, toTableTitle: tmp_listNames[r.toTableTitle.toLocaleLowerCase()]}})
localStorage.setItem(storageKey, JSON.stringify(spSiteData)); localStorage.setItem(storageKey, JSON.stringify(spSiteData));