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
ccm-docs
jensp 2018-06-07 13:06:24 +00:00
parent 898482650c
commit bb6ac896d2
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;
import com.arsdigita.kernel.KernelConfig;
import org.libreccm.configuration.ConfigurationManager;
import org.libreccm.core.CoreConstants;
import org.libreccm.l10n.GlobalizationHelper;
import org.libreccm.pagemodel.PageModel;
@ -64,6 +67,9 @@ public class PageModels {
@Inject
private GlobalizationHelper globalizationHelper;
@Inject
private ConfigurationManager confManager;
/**
* Retrieves all {@link PageModel}s available for an {@link CcmApplication}.
*
@ -177,6 +183,9 @@ public class PageModels {
final CcmApplication app = controller
.findCcmApplication(String.format("/%s/", appPath));
final KernelConfig kernelConfig = confManager
.findConfiguration(KernelConfig.class);
final PageModel pageModel;
if (controller.existsPageModel(app, pageModelName)) {
pageModel = controller.findPageModel(app, pageModelName);
@ -186,13 +195,13 @@ public class PageModels {
}
pageModel.setName(pageModelName);
if (pageModelData.containsKey("title")) {
pageModel.getTitle().addValue(Locale.ROOT,
pageModel.getTitle().addValue(kernelConfig.getDefaultLocale(),
pageModelData.getString("title"));
}
if (pageModelData.containsKey("description")) {
pageModel
.getDescription()
.addValue(Locale.ROOT,
.addValue(kernelConfig.getDefaultLocale(),
pageModelData.getString("description"));
}

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

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