CCM NG: Some work for the PageModelEditor
git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5611 8810af33-2d31-482b-a856-94f89814c4dfpull/2/head
jensp
parent
bdb08575e1
commit
91970482f4
|
|
@ -1,9 +1,146 @@
|
|||
import * as React from "react";
|
||||
import { render } from "react-dom";
|
||||
|
||||
import { PageModelEditor } from "ccm-pagemodelseditor";
|
||||
import { AbstractComponentModelEditor,
|
||||
ComponentModel,
|
||||
ComponentModelEditorProps,
|
||||
ComponentModelEditorState,
|
||||
PageModelEditor,
|
||||
|
||||
} from "ccm-pagemodelseditor";
|
||||
|
||||
PageModelEditor.registerComponentModelEditor(
|
||||
"org.librecms.pagemodel.CategoryTreeComponent",
|
||||
(categoryTree) => {
|
||||
return <CategoryTreeComponentEditor
|
||||
component={categoryTree as CategoryTreeComponent} />
|
||||
}
|
||||
);
|
||||
PageModelEditor.registerComponentModelEditor(
|
||||
"org.librecms.pagemodel.ItemListComponent",
|
||||
(itemList) => {
|
||||
return <ItemListComponentEditor
|
||||
component={itemList as ItemListComponent} />
|
||||
}
|
||||
);
|
||||
|
||||
render(
|
||||
<PageModelEditor />,
|
||||
document.getElementById("cms-content"),
|
||||
);
|
||||
|
||||
interface CategoryTreeComponent extends ComponentModel {
|
||||
|
||||
showFullTree: boolean;
|
||||
}
|
||||
|
||||
interface CategoryTreeComponentEditorProps
|
||||
extends ComponentModelEditorProps<CategoryTreeComponent> {
|
||||
|
||||
}
|
||||
|
||||
interface CategoryTreeComponentEditorState
|
||||
extends ComponentModelEditorState {
|
||||
|
||||
showFullTree: boolean;
|
||||
}
|
||||
|
||||
|
||||
class CategoryTreeComponentEditor
|
||||
extends AbstractComponentModelEditor<CategoryTreeComponent,
|
||||
CategoryTreeComponentEditorProps,
|
||||
CategoryTreeComponentEditorState> {
|
||||
|
||||
public constructor(props: CategoryTreeComponentEditorProps) {
|
||||
|
||||
super(props);
|
||||
|
||||
this.setState({
|
||||
...this.state as any,
|
||||
dialogExpanded: "dialogClosed",
|
||||
showFullTree: false,
|
||||
});
|
||||
}
|
||||
|
||||
public renderPropertyList(): React.ReactFragment {
|
||||
|
||||
return <React.Fragment>
|
||||
<dt>Show full tree</dt>
|
||||
<dd>{this.props.component.showFullTree}</dd>
|
||||
</React.Fragment>;
|
||||
}
|
||||
|
||||
public renderEditorDialog(): React.ReactFragment {
|
||||
|
||||
return <React.Fragment />;
|
||||
}
|
||||
}
|
||||
|
||||
interface ItemListComponent extends ComponentModel {
|
||||
|
||||
descending: boolean;
|
||||
limitToType: string;
|
||||
pageSize: number;
|
||||
listOrder: string[],
|
||||
}
|
||||
|
||||
interface ItemListComponentEditorProps
|
||||
extends ComponentModelEditorProps<ItemListComponent> {
|
||||
|
||||
}
|
||||
|
||||
interface ItemListComponentEditorState
|
||||
extends ComponentModelEditorState {
|
||||
|
||||
descending: boolean;
|
||||
limitToType: string;
|
||||
pageSize: number;
|
||||
listOrder: string[];
|
||||
}
|
||||
|
||||
class ItemListComponentEditor
|
||||
extends AbstractComponentModelEditor<ItemListComponent,
|
||||
ItemListComponentEditorProps,
|
||||
ItemListComponentEditorState> {
|
||||
|
||||
public constructor(props: ItemListComponentEditorProps) {
|
||||
|
||||
super(props as any);
|
||||
|
||||
this.setState({
|
||||
...this.state,
|
||||
dialogExpanded: "dialogClosed",
|
||||
descending: false,
|
||||
limitToType: "",
|
||||
pageSize: 30,
|
||||
listOrder: [ "objectId", ],
|
||||
});
|
||||
}
|
||||
|
||||
public renderPropertyList(): React.ReactFragment {
|
||||
|
||||
return <React.Fragment>
|
||||
<dt>descending</dt>
|
||||
<dd>{this.props.component.descending}</dd>
|
||||
<dt>limitToType</dt>
|
||||
<dd>{this.props.component.limitToType}</dd>
|
||||
<dt>pageSize</dt>
|
||||
<dd>{this.props.component.pageSize}</dd>
|
||||
<dt>listOrder</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
{this.props.component.listOrder.map((order) => {
|
||||
<li>
|
||||
{order}
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
</dd>
|
||||
</React.Fragment>
|
||||
}
|
||||
|
||||
public renderEditorDialog(): React.ReactFragment {
|
||||
|
||||
return <React.Fragment />;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ import {
|
|||
|
||||
export {
|
||||
AbstractComponentModelEditor,
|
||||
ComponentModel,
|
||||
ComponentModelEditorProps,
|
||||
ComponentModelEditorState,
|
||||
ComponentInfo,
|
||||
PageModelEditor,
|
||||
PageModelEditorState,
|
||||
|
|
@ -876,10 +878,10 @@ class ContainerModelComponent
|
|||
private getComponentModelEditor(
|
||||
component: ComponentModel): React.ReactNode {
|
||||
|
||||
if (PageModelEditor.getAvailableComponents()[component.type] === null) {
|
||||
if (PageModelEditor.getAvailableComponents()[component.type]) {
|
||||
console.log(`Found editor generator: ${PageModelEditor.getAvailableComponents()[component.type]}`);
|
||||
return PageModelEditor
|
||||
.getAvailableComponents()[component.type](component);
|
||||
|
||||
} else {
|
||||
return <DefaultComponentModelEditor component={component} />;
|
||||
}
|
||||
|
|
@ -895,17 +897,31 @@ class ContainerModelComponent
|
|||
}
|
||||
}
|
||||
|
||||
interface ComponentModelEditorProps {
|
||||
interface ComponentModelEditorProps<C extends ComponentModel> {
|
||||
|
||||
component: ComponentModel;
|
||||
component: C;
|
||||
}
|
||||
|
||||
abstract class AbstractComponentModelEditor
|
||||
extends React.Component<ComponentModelEditorProps, {}> {
|
||||
interface ComponentModelEditorState {
|
||||
|
||||
constructor(props: ComponentModelEditorProps) {
|
||||
dialogExpanded: string;
|
||||
}
|
||||
|
||||
super(props);
|
||||
abstract class AbstractComponentModelEditor<
|
||||
C extends ComponentModel,
|
||||
P extends ComponentModelEditorProps<C>,
|
||||
S extends ComponentModelEditorState>
|
||||
|
||||
extends React.Component<P, S> {
|
||||
|
||||
constructor(props: ComponentModelEditorProps<C>) {
|
||||
|
||||
super(props as any);
|
||||
|
||||
this.setState({
|
||||
...this.state as any,
|
||||
dialogExpanded: "dialogClosed",
|
||||
});
|
||||
}
|
||||
|
||||
public abstract renderPropertyList(): React.ReactFragment;
|
||||
|
|
@ -914,7 +930,7 @@ abstract class AbstractComponentModelEditor
|
|||
|
||||
public render(): React.ReactNode {
|
||||
|
||||
return <li>
|
||||
return <li className="componentModelEditor">
|
||||
<dl>
|
||||
<dt>Key</dt>
|
||||
<dd>{this.props.component.key}</dd>
|
||||
|
|
@ -922,11 +938,46 @@ abstract class AbstractComponentModelEditor
|
|||
<dd>{this.props.component.type}</dd>
|
||||
{this.renderPropertyList}
|
||||
</dl>
|
||||
<button onClick={this.toggleEditorDialog}>
|
||||
Edit
|
||||
</button>
|
||||
<dialog className="{this.state.dialogExpanded}">
|
||||
{this.renderEditorDialog}
|
||||
</dialog>
|
||||
</li>;
|
||||
}
|
||||
|
||||
private toggleEditorDialog(
|
||||
event: React.MouseEvent<HTMLButtonElement>): void {
|
||||
|
||||
if (this.state.dialogExpanded === "dialogExpanded") {
|
||||
this.setState({
|
||||
...this.state as any,
|
||||
dialogExpanded: "dialogClosed",
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
...this.state as any,
|
||||
dialogExpanded: "dialogExpanded",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class DefaultComponentModelEditor extends AbstractComponentModelEditor {
|
||||
class DefaultComponentModelEditor
|
||||
extends AbstractComponentModelEditor<
|
||||
ComponentModel,
|
||||
ComponentModelEditorProps<ComponentModel>,
|
||||
ComponentModelEditorState> {
|
||||
|
||||
constructor(props: ComponentModelEditorProps<ComponentModel>) {
|
||||
|
||||
super(props);
|
||||
|
||||
this.setState({
|
||||
dialogExpanded: "dialogClosed",
|
||||
});
|
||||
}
|
||||
|
||||
public renderPropertyList(): React.ReactFragment {
|
||||
|
||||
|
|
@ -974,6 +1025,9 @@ class PageModelEditor
|
|||
public static getAvailableComponents(): {
|
||||
[type: string]: (component: ComponentModel) => React.ReactFragment} {
|
||||
|
||||
console.log("Available editors:");
|
||||
console.log(PageModelEditor.componentModelEditors.toString());
|
||||
|
||||
return {
|
||||
...PageModelEditor.componentModelEditors,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2064,3 +2064,24 @@ div.errorPanel {
|
|||
bottom: 5em;
|
||||
left: 5em;
|
||||
} */
|
||||
|
||||
li.componentModelEditor dialog.closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li.componentModelEditor dialog.closed {
|
||||
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 3em;
|
||||
|
||||
display: block;
|
||||
|
||||
position: fixed;
|
||||
top: 10vh;
|
||||
right: 10vw;
|
||||
bottom: 10vh;
|
||||
left: 10vw;
|
||||
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue