LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

CCM NG: PageModelsEditor progress 

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5467 8810af33-2d31-482b-a856-94f89814c4df
jensp 2018-06-02 17:27:55 +00:00
parent dcf681a834
commit 2c9ca290c2
2 changed files with 72 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx
View File

@ -39,10 +39,11 @@ const newPageModel: PageModel = {
version: PageModelVersion.DRAFT, version: PageModelVersion.DRAFT,
}; };
const pageModelEditorContext = React.createContext({ const pageModelEditorContext: React.Context<PageModelEditorContext>
pageModelSelected: false, = React.createContext({
selectedPageModel: newPageModel, pageModelSelected: false,
}); selectedPageModel: newPageModel,
});
interface PageModelsListProps { interface PageModelsListProps {
@ -116,7 +117,7 @@ class PageModelsList
}); });
} }
public render() { public render(): React.ReactNode {
return <div className="pageModelsList"> return <div className="pageModelsList">
{this.state.errorMsg !== null && {this.state.errorMsg !== null &&
@ -148,20 +149,14 @@ interface PageModelListItemProps {
class PageModelListItem class PageModelListItem
extends React.Component<PageModelListItemProps, {}> { extends React.Component<PageModelListItemProps, {}> {
private onClick(event: any): void { public render(): React.ReactNode {
console.log(`Setting selected PageModel. this is ${this}`);
this.props.selectPageModel(this.props.pageModel);
}
public render() {
return <li> return <li>
<a data-pagemodel-id="{this.props.pageModel.pageModelId}" <a data-pagemodel-id="{this.props.pageModel.pageModelId}"
href="#" href="#"
onClick={ onClick={
(event) => { (event) => {
console.log("A PageModel has been selected"); // console.log("A PageModel has been selected");
this.props.selectPageModel(this.props.pageModel) this.props.selectPageModel(this.props.pageModel);
} }
}> }>
{this.props.pageModel.title} {this.props.pageModel.title}
@ -170,6 +165,51 @@ class PageModelListItem
} }
} }
interface PageModelComponentProps {
pageModel: PageModel;
}
class PageModelComponent extends React.Component<PageModelComponentProps, {}> {
constructor(props: PageModelComponentProps) {
super(props);
}
public render(): React.ReactNode {
return <div className="bebop-body">
<dl className="properties-list">
<dt>Name</dt>
<dd>{this.props.pageModel.name}</dd>
<dt>Title</dt>
<dd>{this.props.pageModel.title}</dd>
<dt>Type</dt>
<dd>{this.props.pageModel.type}</dd>
<dt>Version</dt>
<dd>{this.props.pageModel.version}</dd>
<dt>Description</dt>
<dd>{this.props.pageModel.description}</dd>
</dl>
<button>Edit</button>
</div>;
// return <dl>
// <dt>Name</dt>
// <dd>{this.props.pageModel.name}</dd>
// <dt>Title</dt>
// <dd>{this.props.pageModel.title}</dd>
// <dt>Type</dt>
// <dd>{this.props.pageModel.type}</dd>
// <dt>Version</dt>
// <dd>{this.props.pageModel.version}</dd>
// <dt>Description</dt>
// <dd>{this.props.pageModel.description}</dd>
// </dl>;
}
}
// interface PageModelEditorProps { // interface PageModelEditorProps {
// //
// } // }
@ -196,7 +236,7 @@ class PageModelEditor
}; };
} }
public render() { public render(): React.ReactNode {
return <React.Fragment> return <React.Fragment>
<pageModelEditorContext.Provider value={this.state.context}> <pageModelEditorContext.Provider value={this.state.context}>
@ -208,7 +248,7 @@ class PageModelEditor
<div className="bebop-segment"> <div className="bebop-segment">
<h3 className="bebop-segment-header"> <h3 className="bebop-segment-header">
Available PageModels Available PageModels
</h3> </h3>
<div className="bebop-segment-body"> <div className="bebop-segment-body">
<button <button
className="pagemodels addbutton"> className="pagemodels addbutton">
@ -219,13 +259,13 @@ class PageModelEditor
dispatcherPrefix={this.getDispatcherPrefix()} dispatcherPrefix={this.getDispatcherPrefix()}
selectPageModel={(pageModel: PageModel) => { selectPageModel={(pageModel: PageModel) => {
this.setState((state: any) => { this.setState((state: any) => {
console.log("Updating state for selectedPageModel"); // console.log("Updating state for selectedPageModel");
return { return {
// ...state, // ...state,
context: { context: {
pageModelSelected: true, pageModelSelected: true,
selectedPageModel: pageModel, selectedPageModel: pageModel,
} },
}; };
}); });
}} /> }} />
@ -242,19 +282,23 @@ class PageModelEditor
<div className="column-head"> <div className="column-head">
</div> </div>
<div className="column-content"> <div className="column-content">
PageModelEditor Placeholder <pageModelEditorContext.Consumer>
<pageModelEditorContext.Consumer>
{(context) => {(context) =>
<React.Fragment> <React.Fragment>
<pre> {context.pageModelSelected &&
pageModelSelected: {context.pageModelSelected ? "true" : "false" } <PageModelComponent pageModel={context.selectedPageModel} />
</pre>
{context.pageModelSelected && <pre>
{context.selectedPageModel.name}
</pre>
} }
</React.Fragment> </React.Fragment>
// <React.Fragment>
// <pre>
// pageModelSelected: {context.pageModelSelected ? "true" : "false" }
// </pre>
// {context.pageModelSelected && <pre>
//
// {context.selectedPageModel.name}
// </pre>
// }
// </React.Fragment>
} }
</pageModelEditorContext.Consumer> </pageModelEditorContext.Consumer>
<pre> <pre>

2
ccm-pagemodelseditor/tslint.json
View File

@ -12,7 +12,7 @@
"options": [100] "options": [100]
}, },
"max-line-length": { "max-line-length": {
"options": [80] "options": [120]
} }
}, },
"rulesDirectory": [] "rulesDirectory": []