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

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

@ -39,7 +39,8 @@ const newPageModel: PageModel = {
version: PageModelVersion.DRAFT,
};
const pageModelEditorContext = React.createContext({
const pageModelEditorContext: React.Context<PageModelEditorContext>
= React.createContext({
pageModelSelected: false,
selectedPageModel: newPageModel,
});
@ -116,7 +117,7 @@ class PageModelsList
});
}
public render() {
public render(): React.ReactNode {
return <div className="pageModelsList">
{this.state.errorMsg !== null &&
@ -148,20 +149,14 @@ interface PageModelListItemProps {
class PageModelListItem
extends React.Component<PageModelListItemProps, {}> {
private onClick(event: any): void {
console.log(`Setting selected PageModel. this is ${this}`);
this.props.selectPageModel(this.props.pageModel);
}
public render() {
public render(): React.ReactNode {
return <li>
<a data-pagemodel-id="{this.props.pageModel.pageModelId}"
href="#"
onClick={
(event) => {
console.log("A PageModel has been selected");
this.props.selectPageModel(this.props.pageModel)
// console.log("A PageModel has been selected");
this.props.selectPageModel(this.props.pageModel);
}
}>
{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 {
//
// }
@ -196,7 +236,7 @@ class PageModelEditor
};
}
public render() {
public render(): React.ReactNode {
return <React.Fragment>
<pageModelEditorContext.Provider value={this.state.context}>
@ -219,13 +259,13 @@ class PageModelEditor
dispatcherPrefix={this.getDispatcherPrefix()}
selectPageModel={(pageModel: PageModel) => {
this.setState((state: any) => {
console.log("Updating state for selectedPageModel");
// console.log("Updating state for selectedPageModel");
return {
// ...state,
context: {
pageModelSelected: true,
selectedPageModel: pageModel,
}
},
};
});
}} />
@ -242,19 +282,23 @@ class PageModelEditor
<div className="column-head">
</div>
<div className="column-content">
PageModelEditor Placeholder
<pageModelEditorContext.Consumer>
{(context) =>
<React.Fragment>
<pre>
pageModelSelected: {context.pageModelSelected ? "true" : "false" }
</pre>
{context.pageModelSelected && <pre>
{context.selectedPageModel.name}
</pre>
{context.pageModelSelected &&
<PageModelComponent pageModel={context.selectedPageModel} />
}
</React.Fragment>
// <React.Fragment>
// <pre>
// pageModelSelected: {context.pageModelSelected ? "true" : "false" }
// </pre>
// {context.pageModelSelected && <pre>
//
// {context.selectedPageModel.name}
// </pre>
// }
// </React.Fragment>
}
</pageModelEditorContext.Consumer>
<pre>

2
ccm-pagemodelseditor/tslint.json
View File

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