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@5465 8810af33-2d31-482b-a856-94f89814c4df
ccm-docs
jensp 2018-06-01 18:11:20 +00:00
parent e179b120f4
commit 7eebf6aa6b
1 changed files with 105 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,10 +22,32 @@ export {
* ); * );
*/ */
interface PageModelEditorContext {
selectedPageModel: PageModel;
}
const newPageModel: PageModel = {
description: "New PageModel",
modelUuid: "",
name: "newPageModel",
pageModelId: 0,
title: "A new PageModel",
type: "",
uuid: "",
version: PageModelVersion.DRAFT,
};
const pageModelEditorContext = React.createContext({
pageModelSelected: false,
selectedPageModel: newPageModel,
});
interface PageModelsListProps { interface PageModelsListProps {
ccmApplication: string; ccmApplication: string;
dispatcherPrefix: string; dispatcherPrefix: string;
selectPageModel: (selectedPageModel: PageModel) => void;
} }
interface PageModelsListState { interface PageModelsListState {
@ -104,7 +126,8 @@ class PageModelsList
{this.state.pageModels.length > 0 && {this.state.pageModels.length > 0 &&
<ul> <ul>
{this.state.pageModels.map((pageModel: PageModel) => {this.state.pageModels.map((pageModel: PageModel) =>
<PageModelListItem pageModel={pageModel} />, <PageModelListItem pageModel={pageModel}
selectPageModel={this.props.selectPageModel} />,
)} )}
</ul> </ul>
} }
@ -114,6 +137,7 @@ class PageModelsList
interface PageModelListItemProps { interface PageModelListItemProps {
pageModel: PageModel; pageModel: PageModel;
selectPageModel: (selectedPageModel: PageModel) => void;
} }
// interface PageModelListItemState { // interface PageModelListItemState {
@ -123,9 +147,19 @@ interface PageModelListItemProps {
class PageModelListItem class PageModelListItem
extends React.Component<PageModelListItemProps, {}> { 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() {
return <li> return <li>
<a> <a data-pagemodel-id="{this.props.pageModel.pageModelId}"
href="#"
onClick={
(event) => this.props.selectPageModel(this.props.pageModel)
}>
{this.props.pageModel.title} {this.props.pageModel.title}
</a> </a>
</li>; </li>;
@ -138,50 +172,80 @@ class PageModelListItem
// //
// interface PageModelEditorState { // interface PageModelEditorState {
// //
// selectedPageModel: PageModel | null;
//
// } // }
class PageModelEditor class PageModelEditor
extends React.Component<{}, {}> { extends React.Component<{}, any> {
constructor(props: any) {
super(props);
this.state = {
selectedPageModel: newPageModel,
};
}
public render() { public render() {
return <React.Fragment> return <React.Fragment>
<div id="left"> <pageModelEditorContext.Provider value={this.state.selectedPageModel}>
<div className="column-head"></div> <div id="left">
<div className="column-content"> <div className="column-head"></div>
<div className="bebop-left"> <div className="column-content">
<div className="bebop-segmented-panel"> <div className="bebop-left">
<div className="bebop-segment"> <div className="bebop-segmented-panel">
<h3 className="bebop-segment-header"> <div className="bebop-segment">
Available PageModels <h3 className="bebop-segment-header">
Available PageModels
</h3> </h3>
<div className="bebop-segment-body"> <div className="bebop-segment-body">
<button className="pagemodels addbutton"> <button
<span>+</span> Create new PageModel className="pagemodels addbutton">
</button> <span>+</span> Create new PageModel
<PageModelsList </button>
ccmApplication={this.getCcmApplication()} <PageModelsList
dispatcherPrefix={this ccmApplication={this.getCcmApplication()}
.getDispatcherPrefix()} /> dispatcherPrefix={this.getDispatcherPrefix()}
<button className="pagemodels addbutton"> selectPageModel={(pageModel: PageModel) => {
<span>+</span> Create new PageModel this.setState((state: any) => {
return {
...state,
selectedPageModel: pageModel,
};
});
}} />
<button className="pagemodels addbutton">
<span>+</span> Create new PageModel
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div id="right">
<div id="right"> <div className="column-head">
<div className="column-head"> </div>
<div className="column-content">
PageModelEditor Placeholder
<pageModelEditorContext.Consumer>
{(context) =>
<pre>
{context.pageModelSelected &&
context.selectedPageModel.name
}
</pre>
}
</pageModelEditorContext.Consumer>
<pre>
{this.getCcmApplication()}
</pre>
</div>
</div> </div>
<div className="column-content"> </pageModelEditorContext.Provider>
PageModelEditor Placeholder
<pre>
{this.getCcmApplication()}
</pre>
</div>
</div>
</React.Fragment>; </React.Fragment>;
} }
@ -220,4 +284,14 @@ class PageModelEditor
} }
} }
} }
// private setSelectedPageModel(selectedPageModel: PageModel): void {
//
// this.setState((state: any) => {
// return {
// ...state,
// selectedPageModel,
// };
// });
// }
} }