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

CCM NG: Simplification of PageModelEditor code. Removed unnecessary usage of React's Context API 

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5499 8810af33-2d31-482b-a856-94f89814c4df
pull/2/head
jensp 2018-06-07 13:06:24 +00:00
parent 173ac16938
commit b59fce4bbd
2 changed files with 237 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ccm-core/src/main/java/org/libreccm/pagemodel/rs/PageModels.java
View File

@ -18,6 +18,9 @@
*/ */
package org.libreccm.pagemodel.rs; package org.libreccm.pagemodel.rs;
import com.arsdigita.kernel.KernelConfig;
import org.libreccm.configuration.ConfigurationManager;
import org.libreccm.core.CoreConstants; import org.libreccm.core.CoreConstants;
import org.libreccm.l10n.GlobalizationHelper; import org.libreccm.l10n.GlobalizationHelper;
import org.libreccm.pagemodel.PageModel; import org.libreccm.pagemodel.PageModel;
@ -64,6 +67,9 @@ public class PageModels {
@Inject @Inject
private GlobalizationHelper globalizationHelper; private GlobalizationHelper globalizationHelper;
@Inject
private ConfigurationManager confManager;
/** /**
* Retrieves all {@link PageModel}s available for an {@link CcmApplication}. * Retrieves all {@link PageModel}s available for an {@link CcmApplication}.
* *
@ -177,6 +183,9 @@ public class PageModels {
final CcmApplication app = controller final CcmApplication app = controller
.findCcmApplication(String.format("/%s/", appPath)); .findCcmApplication(String.format("/%s/", appPath));
final KernelConfig kernelConfig = confManager
.findConfiguration(KernelConfig.class);
final PageModel pageModel; final PageModel pageModel;
if (controller.existsPageModel(app, pageModelName)) { if (controller.existsPageModel(app, pageModelName)) {
pageModel = controller.findPageModel(app, pageModelName); pageModel = controller.findPageModel(app, pageModelName);
@ -186,13 +195,13 @@ public class PageModels {
} }
pageModel.setName(pageModelName); pageModel.setName(pageModelName);
if (pageModelData.containsKey("title")) { if (pageModelData.containsKey("title")) {
pageModel.getTitle().addValue(Locale.ROOT, pageModel.getTitle().addValue(kernelConfig.getDefaultLocale(),
pageModelData.getString("title")); pageModelData.getString("title"));
} }
if (pageModelData.containsKey("description")) { if (pageModelData.containsKey("description")) {
pageModel pageModel
.getDescription() .getDescription()
.addValue(Locale.ROOT, .addValue(kernelConfig.getDefaultLocale(),
pageModelData.getString("description")); pageModelData.getString("description"));
} }

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

@ -3,6 +3,7 @@ import { PageModel, PageModelVersion } from "./datatypes";
export { export {
PageModelEditor, PageModelEditor,
PageModelEditorState,
// PageModelEditorProps, // PageModelEditorProps,
// PageModelEditorState, // PageModelEditorState,
}; };
@ -22,114 +23,113 @@ export {
* ); * );
*/ */
interface PageModelEditorContext { // interface PageModelEditorContext {
//
// pageModelSelected: boolean;
// selectedPageModel: PageModel;
// }
pageModelSelected: boolean; // const newPageModel: PageModel = {
selectedPageModel: PageModel; // description: "New PageModel",
} // modelUuid: "",
// name: "newPageModel",
// pageModelId: 0,
// title: "A new PageModel",
// type: "",
// uuid: "",
// version: PageModelVersion.DRAFT,
// };
const newPageModel: PageModel = { // const pageModelEditorContext: React.Context<PageModelEditorContext>
description: "New PageModel", // = React.createContext({
modelUuid: "", // pageModelSelected: false,
name: "newPageModel", // selectedPageModel: newPageModel,
pageModelId: 0, // });
title: "A new PageModel",
type: "",
uuid: "",
version: PageModelVersion.DRAFT,
};
const pageModelEditorContext: React.Context<PageModelEditorContext>
= React.createContext({
pageModelSelected: false,
selectedPageModel: newPageModel,
});
interface PageModelsListProps { interface PageModelsListProps {
ccmApplication: string; ccmApplication: string;
dispatcherPrefix: string; dispatcherPrefix: string;
pageModels: PageModel[],
selectPageModel: (selectedPageModel: PageModel) => void; selectPageModel: (selectedPageModel: PageModel) => void;
} }
interface PageModelsListState { // interface PageModelsListState {
//
errorMsg: string | null; // errorMsg: string | null;
pageModels: PageModel[]; // pageModels: PageModel[];
} // }
class PageModelsList class PageModelsList
extends React.Component<PageModelsListProps, PageModelsListState> { extends React.Component<PageModelsListProps, {}> {
constructor(props: PageModelsListProps) { constructor(props: PageModelsListProps) {
super(props); super(props);
this.state = { // this.state = {
errorMsg: null, // errorMsg: null,
pageModels: [], // pageModels: [],
}; // };
} }
public componentDidMount() { // public componentDidMount() {
//
const init: RequestInit = { // const init: RequestInit = {
credentials: "same-origin", // credentials: "same-origin",
method: "GET", // method: "GET",
}; // };
//
const url: string = `${this.props.dispatcherPrefix}` // const url: string = `${this.props.dispatcherPrefix}`
+ `/page-models/${this.props.ccmApplication}`; // + `/page-models/${this.props.ccmApplication}`;
//
fetch(url, init) // fetch(url, init)
.then((response: Response) => { // .then((response: Response) => {
if (response.ok) { // if (response.ok) {
response // response
.json() // .json()
.then((pageModels: PageModel[]) => { // .then((pageModels: PageModel[]) => {
this.setState({ // this.setState({
...this.state, // ...this.state,
pageModels, // pageModels,
}); // });
}) // })
.catch((error) => { // .catch((error) => {
this.setState({ // this.setState({
...this.state, // ...this.state,
errorMsg: `Failed to retrieve PageModels from ` // errorMsg: `Failed to retrieve PageModels from `
+ `${url}: ${error.message}`, // + `${url}: ${error.message}`,
}); // });
}); // });
} else { // } else {
this.setState({ // this.setState({
...this.state, // ...this.state,
errorMsg: `Failed to retrieve PageModels from ` // errorMsg: `Failed to retrieve PageModels from `
+ `\"${url}\": HTTP Status Code: ` // + `\"${url}\": HTTP Status Code: `
+ `${response.status}; ` // + `${response.status}; `
+ `message: ${response.statusText}`, // + `message: ${response.statusText}`,
}); // });
} // }
}) // })
.catch((error) => { // .catch((error) => {
this.setState({ // this.setState({
...this.state, // ...this.state,
errorMsg: `Failed to retrieve PageModels from ` // errorMsg: `Failed to retrieve PageModels from `
+ `${url}: ${error.message}`, // + `${url}: ${error.message}`,
}); // });
}); // });
} // }
public render(): React.ReactNode { public render(): React.ReactNode {
return <div className="pagemodeleditor pageModelsList"> return <div className="pagemodeleditor pageModelsList">
{this.state.errorMsg !== null && {this.props.pageModels.length > 0 &&
<div className="errorPanel">
{this.state.errorMsg}
</div>
}
{this.state.pageModels.length > 0 &&
<ul> <ul>
{this.state.pageModels.map((pageModel: PageModel) => {this.props.pageModels
<PageModelListItem pageModel={pageModel} .map((pageModel: PageModel, index: number) =>
selectPageModel={this.props.selectPageModel} />, <PageModelListItem
index={index}
pageModel={pageModel}
selectPageModel={this.props.selectPageModel} />,
)} )}
</ul> </ul>
} }
@ -138,6 +138,7 @@ class PageModelsList
} }
interface PageModelListItemProps { interface PageModelListItemProps {
index: number,
pageModel: PageModel; pageModel: PageModel;
selectPageModel: (selectedPageModel: PageModel) => void; selectPageModel: (selectedPageModel: PageModel) => void;
} }
@ -155,6 +156,7 @@ class PageModelListItem
href="#" href="#"
onClick={ onClick={
(event) => { (event) => {
event.preventDefault();
// 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);
} }
@ -170,6 +172,7 @@ interface PageModelComponentProps {
ccmApplication: string; ccmApplication: string;
dispatcherPrefix: string; dispatcherPrefix: string;
pageModel: PageModel; pageModel: PageModel;
reload: () => void;
} }
interface PageModelComponentState { interface PageModelComponentState {
@ -379,6 +382,7 @@ class PageModelComponent
...this.state, ...this.state,
editMode: false, editMode: false,
}); });
this.props.reload();
} else { } else {
this.setState({ this.setState({
...this.state, ...this.state,
@ -409,100 +413,160 @@ class PageModelComponent
interface PageModelEditorState { interface PageModelEditorState {
errorMessages: string[],
pageModels: PageModel[]; pageModels: PageModel[];
selectedPageModelIndex: number; selectedPageModel: PageModel | null;
} }
class PageModelEditor class PageModelEditor
extends React.Component<{}, any> { extends React.Component<{}, PageModelEditorState> {
constructor(props: any) { constructor(props: any) {
super(props); super(props);
// this.state = {
// // selectedPageModel: newPageModel,
// context: {
// pageModelSelected: false,
// selectedPageModel: newPageModel,
// },
// };
this.state = { this.state = {
// selectedPageModel: newPageModel, errorMessages: [],
context: { pageModels: [],
pageModelSelected: false, selectedPageModel: null,
selectedPageModel: newPageModel, }
}, }
};
public componentDidMount() {
this.fetchPageModels();
} }
public render(): React.ReactNode { public render(): React.ReactNode {
return <React.Fragment> return <React.Fragment>
<pageModelEditorContext.Provider value={this.state.context}> <div id="left">
<div id="left"> <div className="column-head"></div>
<div className="column-head"></div> <div className="column-content">
<div className="column-content"> <div className="bebop-left">
<div className="bebop-left"> <div className="bebop-segmented-panel">
<div className="bebop-segmented-panel"> <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="pagemodeleditor addbutton"> className="pagemodeleditor addbutton">
<span>+</span> Create new PageModel <span>+</span> Create new PageModel
</button> </button>
<PageModelsList <PageModelsList
ccmApplication={this.getCcmApplication()} ccmApplication={this.getCcmApplication()}
dispatcherPrefix={this.getDispatcherPrefix()} dispatcherPrefix={this.getDispatcherPrefix()}
selectPageModel={(pageModel: PageModel) => { pageModels={this.state.pageModels}
this.setState((state: any) => { selectPageModel={(selectedPageModel: PageModel) => {
// console.log("Updating state for selectedPageModel"); this.setState((state: PageModelEditorState) => {
return { return {
// ...state, ...state,
context: { selectedPageModel,
pageModelSelected: true, };
selectedPageModel: pageModel, });
}, }} />
}; <button className="pagemodeleditor addbutton">
}); <span>+</span> Create new PageModel
}} />
<button className="pagemodeleditor addbutton">
<span>+</span> Create new PageModel
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="right"> </div>
<div className="column-head"> <div id="right">
</div> <div className="column-head">
<div className="column-content">
<pageModelEditorContext.Consumer>
{(context) =>
<React.Fragment>
{context.pageModelSelected &&
<PageModelComponent
ccmApplication={this.getCcmApplication()}
dispatcherPrefix={this.getDispatcherPrefix()}
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>
</div>
</div> </div>
</pageModelEditorContext.Provider> <div className="column-content">
{this.state.errorMessages.length > 0 &&
<div className="errorPanel">
{this.state.errorMessages.map((msg) => {
<p>
{msg}
</p>
})}
</div>
}
{this.state.selectedPageModel !== null &&
<PageModelComponent
ccmApplication={this.getCcmApplication()}
dispatcherPrefix={this.getDispatcherPrefix()}
pageModel={this.state.selectedPageModel}
reload={() => { this.reload(); }} />
}
</div>
</div>
</React.Fragment>; </React.Fragment>;
} }
private fetchPageModels(): void {
const init: RequestInit = {
credentials: "same-origin",
method: "GET",
}
const url: string = `${this.getDispatcherPrefix()}`
+ `/page-models/${this.getCcmApplication()}`;
fetch(url, init)
.then((response) => {
if (response.ok) {
response
.json()
.then((pageModels: PageModel[]) => {
this.setState({
...this.state,
pageModels
})
})
.catch((error) => {
const errorMessages: string[] = this
.state.errorMessages;
errorMessages.push(`Failed to retrieve PageModels ` +
`from ${url}: ${error.message}`);
this.setState({
...this.state,
errorMessages,
});
});
} else {
const errorMessages: string[] = this
.state.errorMessages;
errorMessages.push(`Failed to retrieve PageModels from `
+ `\"${url}\": HTTP Status Code: `
+ `${response.status}; `
+ `message: ${response.statusText}`);
this.setState({
...this.state,
errorMessages,
});
}
})
.catch((error) => {
const errorMessages: string[] = this
.state.errorMessages;
errorMessages.push(`Failed to retrieve PageModels ` +
`from ${url}: ${error.message}`);
this.setState({
...this.state,
errorMessages,
});
});
}
private getDispatcherPrefix(): string { private getDispatcherPrefix(): string {
const dataElem: HTMLElement | null = document const dataElem: HTMLElement | null = document
@ -539,6 +603,16 @@ class PageModelEditor
} }
} }
private reload(): void {
this.fetchPageModels();
// this.setState({
// ...this.state,
// selectedPageModel: null,
// });
}
// private setSelectedPageModel(selectedPageModel: PageModel): void { // private setSelectedPageModel(selectedPageModel: PageModel): void {
// //
// this.setState((state: any) => { // this.setState((state: any) => {