CCM NG: Code cleanup
git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5631 8810af33-2d31-482b-a856-94f89814c4df
jensp
parent
621b4be785
commit
68285da10b
|
|
@ -2,20 +2,17 @@ import * as React from "react";
|
||||||
import { render } from "react-dom";
|
import { render } from "react-dom";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
// AbstractComponentModelEditor,
|
|
||||||
ComponentModel,
|
|
||||||
BasicComponentModelEditorDialog,
|
BasicComponentModelEditorDialog,
|
||||||
BasicComponentModelEditorDialogProps,
|
BasicComponentModelEditorDialogProps,
|
||||||
BasicComponentModelEditorDialogState,
|
BasicComponentModelEditorDialogState,
|
||||||
BasicComponentModelPropertiesList,
|
BasicComponentModelPropertiesList,
|
||||||
BasicComponentModelPropertiesListProps,
|
BasicComponentModelPropertiesListProps,
|
||||||
ComponentModelEditor,
|
|
||||||
ComponentModelEditorProps,
|
|
||||||
ComponentModelEditorDialogProps,
|
|
||||||
ComponentInfo,
|
ComponentInfo,
|
||||||
|
ComponentModel,
|
||||||
|
ComponentModelEditor,
|
||||||
|
ComponentModelEditorDialogProps,
|
||||||
|
ComponentModelEditorProps,
|
||||||
EditorComponents,
|
EditorComponents,
|
||||||
// ComponentModelEditorProps,
|
|
||||||
// ComponentModelEditorState,
|
|
||||||
PageModelEditor,
|
PageModelEditor,
|
||||||
} from "ccm-pagemodelseditor";
|
} from "ccm-pagemodelseditor";
|
||||||
|
|
||||||
|
|
@ -35,7 +32,7 @@ class CategoryTreeComponentPropertiesList
|
||||||
component={this.props.component}>
|
component={this.props.component}>
|
||||||
<dt>showFullTree</dt>
|
<dt>showFullTree</dt>
|
||||||
<dd>{this.props.component.showFullTree}</dd>
|
<dd>{this.props.component.showFullTree}</dd>
|
||||||
</BasicComponentModelPropertiesList>
|
</BasicComponentModelPropertiesList>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -81,7 +78,7 @@ class CategoryTreeComponentEditorDialog
|
||||||
id={`${idPrefix}showFullTree`}
|
id={`${idPrefix}showFullTree`}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
type="checkbox" />
|
type="checkbox" />
|
||||||
</BasicComponentModelEditorDialog>
|
</BasicComponentModelEditorDialog>;
|
||||||
}
|
}
|
||||||
|
|
||||||
private getComponentModelProperties(): {[name: string]: any} {
|
private getComponentModelProperties(): {[name: string]: any} {
|
||||||
|
|
@ -132,15 +129,15 @@ class ItemListComponentPropertiesList extends React.Component<
|
||||||
<dd>
|
<dd>
|
||||||
{Array.isArray(this.props.component.listOrder) ?
|
{Array.isArray(this.props.component.listOrder) ?
|
||||||
(
|
(
|
||||||
this.props.component.listOrder.map((order) => {
|
this.props.component.listOrder.map((order) =>
|
||||||
<li>
|
<li>
|
||||||
{order}
|
{order}
|
||||||
</li>
|
</li>,
|
||||||
})
|
)
|
||||||
) : ("No order set")
|
) : ("No order set")
|
||||||
}
|
}
|
||||||
</dd>
|
</dd>
|
||||||
</BasicComponentModelPropertiesList>
|
</BasicComponentModelPropertiesList>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -166,8 +163,8 @@ class ItemListComponentEditorDialog extends React.Component<
|
||||||
...this.state,
|
...this.state,
|
||||||
descending: this.props.component.descending,
|
descending: this.props.component.descending,
|
||||||
limitToType: this.props.component.limitToType,
|
limitToType: this.props.component.limitToType,
|
||||||
pageSize: this.props.component.pageSize,
|
|
||||||
listOrder: this.props.component.listOrder,
|
listOrder: this.props.component.listOrder,
|
||||||
|
pageSize: this.props.component.pageSize,
|
||||||
};
|
};
|
||||||
|
|
||||||
this.handleChange = this.handleChange.bind(this);
|
this.handleChange = this.handleChange.bind(this);
|
||||||
|
|
@ -234,8 +231,8 @@ class ItemListComponentEditorDialog extends React.Component<
|
||||||
return {
|
return {
|
||||||
descending: this.state.descending,
|
descending: this.state.descending,
|
||||||
limitToType: this.state.limitToType,
|
limitToType: this.state.limitToType,
|
||||||
pageSize: this.state.pageSize,
|
|
||||||
listOrder: this.state.listOrder,
|
listOrder: this.state.listOrder,
|
||||||
|
pageSize: this.state.pageSize,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -287,29 +284,6 @@ class ItemListComponentEditorDialog extends React.Component<
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// PageModelEditor.registerComponentModelEditor(
|
|
||||||
// "org.librecms.pagemodel.CategoryTreeComponent",
|
|
||||||
// (props: ComponentModelEditorProps<ComponentModel>) => {
|
|
||||||
// return <CategoryTreeComponentEditor
|
|
||||||
// ccmApplication={props.ccmApplication}
|
|
||||||
// component={props.component as CategoryTreeComponent}
|
|
||||||
// containerKey={props.containerKey}
|
|
||||||
// dispatcherPrefix={props.dispatcherPrefix}
|
|
||||||
// pageModelName={props.pageModelName} />
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// PageModelEditor.registerComponentModelEditor(
|
|
||||||
// "org.librecms.pagemodel.ItemListComponent",
|
|
||||||
// (props: ComponentModelEditorProps<ComponentModel>) => {
|
|
||||||
// return <ItemListComponentEditor
|
|
||||||
// ccmApplication={props.ccmApplication}
|
|
||||||
// component={props.component as ItemListComponent}
|
|
||||||
// containerKey={props.containerKey}
|
|
||||||
// dispatcherPrefix={props.dispatcherPrefix}
|
|
||||||
// pageModelName={props.pageModelName} />
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
|
|
||||||
render(
|
render(
|
||||||
<PageModelEditor />,
|
<PageModelEditor />,
|
||||||
document.getElementById("cms-content"),
|
document.getElementById("cms-content"),
|
||||||
|
|
@ -320,54 +294,12 @@ interface CategoryTreeComponent extends ComponentModel {
|
||||||
showFullTree: boolean;
|
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 {
|
interface ItemListComponent extends ComponentModel {
|
||||||
|
|
||||||
descending: boolean;
|
descending: boolean;
|
||||||
limitToType: string;
|
limitToType: string;
|
||||||
|
listOrder: string[];
|
||||||
pageSize: number;
|
pageSize: number;
|
||||||
listOrder: string[],
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ComponentModelEditor.registerEditorComponents(
|
ComponentModelEditor.registerEditorComponents(
|
||||||
|
|
@ -377,7 +309,7 @@ ComponentModelEditor.registerEditorComponents(
|
||||||
CategoryTreeComponentEditorDialog as typeof React.Component,
|
CategoryTreeComponentEditorDialog as typeof React.Component,
|
||||||
propertiesList:
|
propertiesList:
|
||||||
CategoryTreeComponentPropertiesList as typeof React.Component,
|
CategoryTreeComponentPropertiesList as typeof React.Component,
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
ComponentModelEditor.registerEditorComponents(
|
ComponentModelEditor.registerEditorComponents(
|
||||||
|
|
@ -387,98 +319,5 @@ ComponentModelEditor.registerEditorComponents(
|
||||||
ItemListComponentEditorDialog as typeof React.Component,
|
ItemListComponentEditorDialog as typeof React.Component,
|
||||||
propertiesList:
|
propertiesList:
|
||||||
ItemListComponentPropertiesList as typeof React.Component,
|
ItemListComponentPropertiesList as typeof React.Component,
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
// 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: [],
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// public renderPropertyList(): React.ReactFragment {
|
|
||||||
//
|
|
||||||
// console.log("Rendering properties list for ItemListComponent...");
|
|
||||||
// console.log(`listOrder = ${this.props.component.listOrder}`);
|
|
||||||
//
|
|
||||||
// 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>
|
|
||||||
// {Array.isArray(this.props.component.listOrder) ?
|
|
||||||
// (
|
|
||||||
// this.props.component.listOrder.map((order) => {
|
|
||||||
// <li>
|
|
||||||
// {order}
|
|
||||||
// </li>
|
|
||||||
// })
|
|
||||||
// ) : ("No order set")
|
|
||||||
// }
|
|
||||||
// </dd>
|
|
||||||
// </React.Fragment>
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// public renderEditorDialog(): React.ReactFragment {
|
|
||||||
//
|
|
||||||
// return <React.Fragment>
|
|
||||||
// <label htmlFor="descending">
|
|
||||||
// Descending?
|
|
||||||
// </label>
|
|
||||||
// <input checked={this.props.component.descending}
|
|
||||||
// id="descending"
|
|
||||||
// type="checkbox" />
|
|
||||||
// <label htmlFor="limitToType">Limit to type</label>
|
|
||||||
// <input id="limitToType"
|
|
||||||
// maxLength={1024}
|
|
||||||
// size={64}
|
|
||||||
// type="text"
|
|
||||||
// value={this.props.component.limitToType}/>
|
|
||||||
// <label htmlFor="pageSize">Page size</label>
|
|
||||||
// <input id="pageSize"
|
|
||||||
// min="1"
|
|
||||||
// type="number"
|
|
||||||
// value={this.props.component.pageSize}/>
|
|
||||||
// <label htmlFor="listOrder">List Order</label>
|
|
||||||
// <textarea cols={40} id="listOrder" rows={5}>
|
|
||||||
// {Array.isArray(this.props.component.listOrder) ? (
|
|
||||||
// this.props.component.listOrder.join(", ")
|
|
||||||
// ) : (
|
|
||||||
// ""
|
|
||||||
// )}
|
|
||||||
// </textarea>
|
|
||||||
// </React.Fragment>;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
|
||||||
|
|
@ -821,7 +821,7 @@ class ContainerModelComponent
|
||||||
containerKey={this.props.container.key}
|
containerKey={this.props.container.key}
|
||||||
dispatcherPrefix={this.props.dispatcherPrefix}
|
dispatcherPrefix={this.props.dispatcherPrefix}
|
||||||
key={component.componentModelId}
|
key={component.componentModelId}
|
||||||
pageModelName={this.props.pageModelName} />
|
pageModelName={this.props.pageModelName} />,
|
||||||
// this.getComponentModelEditor(component),
|
// this.getComponentModelEditor(component),
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -892,38 +892,6 @@ class ContainerModelComponent
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//
|
|
||||||
// private getComponentModelEditor(
|
|
||||||
// component: ComponentModel): React.ReactNode {
|
|
||||||
//
|
|
||||||
// console.log(`Trying to find editor for ${component.type}`);
|
|
||||||
// // console.log("Available editors:");
|
|
||||||
// // for(let key of Object.keys(PageModelEditor.getAvailableComponents())) {
|
|
||||||
// //
|
|
||||||
// // console.log(`${key} -> ${PageModelEditor.getAvailableComponents()[key]}`);
|
|
||||||
// // }
|
|
||||||
//
|
|
||||||
// if (PageModelEditor.getAvailableComponents()[component.type]) {
|
|
||||||
// console.log(`Found a editor generator for ${component.type} `);
|
|
||||||
// return PageModelEditor
|
|
||||||
// .getAvailableComponents()[component.type]({
|
|
||||||
// ccmApplication: this.props.ccmApplication,
|
|
||||||
// component,
|
|
||||||
// containerKey: this.props.container.key,
|
|
||||||
// dispatcherPrefix: this.props.dispatcherPrefix,
|
|
||||||
// pageModelName: this.props.pageModelName,
|
|
||||||
// });
|
|
||||||
// } else {
|
|
||||||
// console.warn(`No editor for type ${component.type} found. `
|
|
||||||
// + `Using default editor.`);
|
|
||||||
// return <OldDefaultComponentModelEditor
|
|
||||||
// ccmApplication={this.props.ccmApplication}
|
|
||||||
// component={component}
|
|
||||||
// containerKey={this.props.container.key}
|
|
||||||
// dispatcherPrefix={this.props.dispatcherPrefix}
|
|
||||||
// pageModelName={this.props.pageModelName} />;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
private deleteContainer(
|
private deleteContainer(
|
||||||
event: React.MouseEvent<HTMLButtonElement>,
|
event: React.MouseEvent<HTMLButtonElement>,
|
||||||
|
|
@ -962,17 +930,10 @@ interface BasicComponentModelEditorDialogState {
|
||||||
errorMsg: string | null;
|
errorMsg: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class BasicComponentModelPropertiesList
|
class BasicComponentModelPropertiesList
|
||||||
extends React.Component<
|
extends React.Component<
|
||||||
BasicComponentModelPropertiesListProps<ComponentModel>, {}> {
|
BasicComponentModelPropertiesListProps<ComponentModel>, {}> {
|
||||||
|
|
||||||
// constructor(props: BasicComponentModelPropertiesListProps<ComponentModel>) {
|
|
||||||
//
|
|
||||||
// super(props);
|
|
||||||
// }
|
|
||||||
|
|
||||||
public render(): React.ReactNode {
|
public render(): React.ReactNode {
|
||||||
|
|
||||||
return <dl>
|
return <dl>
|
||||||
|
|
@ -981,7 +942,7 @@ class BasicComponentModelPropertiesList
|
||||||
<dt>Type</dt>
|
<dt>Type</dt>
|
||||||
<dd>{this.props.component.type}</dd>
|
<dd>{this.props.component.type}</dd>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</dl>
|
</dl>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1069,7 +1030,7 @@ class BasicComponentModelEditorDialog
|
||||||
...this.state as any,
|
...this.state as any,
|
||||||
errorMsg: `Failed to update/create ComponentModel: `
|
errorMsg: `Failed to update/create ComponentModel: `
|
||||||
+ `${error.message}`,
|
+ `${error.message}`,
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1115,7 +1076,8 @@ class BasicComponentModelEditorDialog
|
||||||
|
|
||||||
<div className="dialogButtonBar">
|
<div className="dialogButtonBar">
|
||||||
<button type="submit">Save</button>
|
<button type="submit">Save</button>
|
||||||
<button onClick={(event) => this.openCloseOnButton(event)}>
|
<button
|
||||||
|
onClick={(event) => this.openCloseOnButton(event)}>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1158,47 +1120,24 @@ interface ComponentModelEditorProps {
|
||||||
class ComponentModelEditor
|
class ComponentModelEditor
|
||||||
extends React.Component<ComponentModelEditorProps, {}> {
|
extends React.Component<ComponentModelEditorProps, {}> {
|
||||||
|
|
||||||
private static editorComponents: Map<string, EditorComponents>
|
|
||||||
= new Map<string, EditorComponents>();
|
|
||||||
//{[type: string]: EditorComponents} = {};
|
|
||||||
// private propertiesListComponents: {[type: string]: typeof React.Component};
|
|
||||||
// private editorDialogComponents: {[type: string]: typeof React.Component};
|
|
||||||
|
|
||||||
constructor(props: ComponentModelEditorProps) {
|
|
||||||
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
// this.editorComponents = {};
|
|
||||||
// this.propertiesListComponents = {};
|
|
||||||
// this.editorDialogComponents = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
public static registerEditorComponents(type: string,
|
public static registerEditorComponents(type: string,
|
||||||
components: EditorComponents) {
|
components: EditorComponents) {
|
||||||
|
|
||||||
ComponentModelEditor.editorComponents.set(type, components);
|
ComponentModelEditor.editorComponents.set(type, components);
|
||||||
|
}
|
||||||
|
|
||||||
// ComponentModelEditor.editorComponents = {
|
private static editorComponents: Map<string, EditorComponents>
|
||||||
// ...ComponentModelEditor.editorComponents,
|
= new Map<string, EditorComponents>();
|
||||||
// type: components,
|
|
||||||
// };
|
|
||||||
|
|
||||||
// this.propertiesListComponents = {
|
constructor(props: ComponentModelEditorProps) {
|
||||||
// ...this.propertiesListComponents,
|
|
||||||
// type: components.propertiesList,
|
super(props);
|
||||||
// };
|
|
||||||
//
|
|
||||||
// this.editorDialogComponents = {
|
|
||||||
// ...this.editorDialogComponents,
|
|
||||||
// type: components.editorDialog,
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): React.ReactNode {
|
public render(): React.ReactNode {
|
||||||
|
|
||||||
const components: EditorComponents
|
const components: EditorComponents
|
||||||
= this.getEditorComponents(this.props.component.type);
|
= this.getEditorComponents(this.props.component.type);
|
||||||
//= ComponentModelEditor.editorComponents[this.props.component.type];
|
|
||||||
const PropertiesList: typeof React.Component
|
const PropertiesList: typeof React.Component
|
||||||
= components.propertiesList;
|
= components.propertiesList;
|
||||||
const EditorDialog: typeof React.Component
|
const EditorDialog: typeof React.Component
|
||||||
|
|
@ -1213,7 +1152,7 @@ class ComponentModelEditor
|
||||||
containerKey={this.props.containerKey}
|
containerKey={this.props.containerKey}
|
||||||
dispatcherPrefix={this.props.dispatcherPrefix}
|
dispatcherPrefix={this.props.dispatcherPrefix}
|
||||||
pageModelName={this.props.pageModelName} />
|
pageModelName={this.props.pageModelName} />
|
||||||
</li>
|
</li>;
|
||||||
}
|
}
|
||||||
|
|
||||||
private getEditorComponents(type: string): EditorComponents {
|
private getEditorComponents(type: string): EditorComponents {
|
||||||
|
|
@ -1223,10 +1162,10 @@ class ComponentModelEditor
|
||||||
.editorComponents.get(type) as EditorComponents;
|
.editorComponents.get(type) as EditorComponents;
|
||||||
} else {
|
} else {
|
||||||
const basicComponents: EditorComponents = {
|
const basicComponents: EditorComponents = {
|
||||||
propertiesList:
|
|
||||||
BasicComponentModelPropertiesList as typeof React.Component,
|
|
||||||
editorDialog:
|
editorDialog:
|
||||||
BasicComponentModelEditorDialog as typeof React.Component,
|
BasicComponentModelEditorDialog as typeof React.Component,
|
||||||
|
propertiesList:
|
||||||
|
BasicComponentModelPropertiesList as typeof React.Component,
|
||||||
};
|
};
|
||||||
|
|
||||||
return basicComponents;
|
return basicComponents;
|
||||||
|
|
@ -1234,235 +1173,6 @@ class ComponentModelEditor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// interface OldComponentModelEditorProps<C extends ComponentModel> {
|
|
||||||
//
|
|
||||||
// ccmApplication: string;
|
|
||||||
// component: C;
|
|
||||||
// containerKey: string;
|
|
||||||
// dispatcherPrefix: string;
|
|
||||||
// pageModelName: string;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// interface OldComponentModelEditorState {
|
|
||||||
//
|
|
||||||
// componentKey: string;
|
|
||||||
// dialogExpanded: string;
|
|
||||||
// dialogOpened: boolean | undefined;
|
|
||||||
// errorMsg: string;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// abstract class OldAbstractComponentModelEditor<
|
|
||||||
// C extends ComponentModel,
|
|
||||||
// P extends OldComponentModelEditorProps<C>,
|
|
||||||
// S extends OldComponentModelEditorState>
|
|
||||||
//
|
|
||||||
// extends React.Component<P, S> {
|
|
||||||
//
|
|
||||||
// constructor(props: OldComponentModelEditorProps<C>) {
|
|
||||||
//
|
|
||||||
// super(props as any);
|
|
||||||
//
|
|
||||||
// this.state = {
|
|
||||||
// ...this.state as any,
|
|
||||||
// dialogExpanded: "dialogClosed",
|
|
||||||
// dialogOpened: false,
|
|
||||||
// errorMsg: null,
|
|
||||||
// };
|
|
||||||
//
|
|
||||||
// this.handleChange = this.handleChange.bind(this);
|
|
||||||
// this.handleSubmit = this.handleSubmit.bind(this);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// public handleChange(event: React.ChangeEvent<HTMLElement>): void {
|
|
||||||
//
|
|
||||||
// if (event.currentTarget.id === this.props.component.key + "_componentKey") {
|
|
||||||
//
|
|
||||||
// const target: HTMLInputElement
|
|
||||||
// = event.currentTarget as HTMLInputElement;
|
|
||||||
//
|
|
||||||
// this.setState({
|
|
||||||
// ...this.state as any,
|
|
||||||
// componentKey: target.value,
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// public handleSubmit(event: React.FormEvent<HTMLFormElement>): void {
|
|
||||||
//
|
|
||||||
// const componentData: any = this.getComponentData();
|
|
||||||
//
|
|
||||||
// const headers: Headers = new Headers();
|
|
||||||
// headers.append("Content-Type", "application/json");
|
|
||||||
//
|
|
||||||
// const init: RequestInit = {
|
|
||||||
// body: JSON.stringify(componentData),
|
|
||||||
// credentials: "same-origin",
|
|
||||||
// headers,
|
|
||||||
// method: "PUT",
|
|
||||||
// };
|
|
||||||
//
|
|
||||||
// const componentUrl = `${this.props.dispatcherPrefix}`
|
|
||||||
// + `/page-models/${this.props.ccmApplication}`
|
|
||||||
// + `/${this.props.pageModelName}`
|
|
||||||
// + `/containers/${this.props.containerKey}`
|
|
||||||
// + `/components/${this.state.componentKey}`;
|
|
||||||
//
|
|
||||||
// fetch(componentUrl, init)
|
|
||||||
// .then((response: Response) => {
|
|
||||||
// if (response.ok) {
|
|
||||||
// this.toggleEditorDialog();
|
|
||||||
// } else {
|
|
||||||
// this.setState({
|
|
||||||
// ...this.state as any,
|
|
||||||
// errorMsg: `Failed to update/create ComponentModel: `
|
|
||||||
// + ` ${response.status} ${response.statusText}`,
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// .catch((error) => {
|
|
||||||
// this.setState({
|
|
||||||
// ...this.state as any,
|
|
||||||
// errorMsg: `Failed to update/create ComponentModel: `
|
|
||||||
// + `${error.message}`,
|
|
||||||
// })
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// public getComponentData(): any {
|
|
||||||
//
|
|
||||||
// return {
|
|
||||||
// key: this.state.componentKey,
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// public abstract renderPropertyList(): React.ReactFragment;
|
|
||||||
//
|
|
||||||
// public abstract renderEditorDialog(): React.ReactFragment;
|
|
||||||
//
|
|
||||||
// public render(): React.ReactNode {
|
|
||||||
//
|
|
||||||
// return <li className="componentModelEditor">
|
|
||||||
// <dl>
|
|
||||||
// <dt>Key</dt>
|
|
||||||
// <dd>{this.props.component.key}</dd>
|
|
||||||
// <dt>Type</dt>
|
|
||||||
// <dd>{this.props.component.type}</dd>
|
|
||||||
// {this.renderPropertyList()}
|
|
||||||
// </dl>
|
|
||||||
// <button onClick={(event) => this.closeOnButton(event)}>
|
|
||||||
// Edit
|
|
||||||
// </button>
|
|
||||||
// <dialog aria-labelledby={this.props.component.key
|
|
||||||
// + "_editDialogHeading"}
|
|
||||||
// className={this.state.dialogExpanded}
|
|
||||||
// onKeyPress={(event) => this.closeOnEsc(event)}
|
|
||||||
// open={this.state.dialogOpened}
|
|
||||||
// tabIndex={0}>
|
|
||||||
// <button className="closeButton"
|
|
||||||
// onClick={(event) => this.closeOnButton(event)}>
|
|
||||||
// <span className="screenreader">Close</span>
|
|
||||||
// <span className="fa fa-times-circle"></span>
|
|
||||||
// </button>
|
|
||||||
// <h1 id={this.props.component.key + "_editDialogHeading"}>
|
|
||||||
// Edit component {this.props.component.key}
|
|
||||||
// </h1>
|
|
||||||
// <form onSubmit={this.handleSubmit}>
|
|
||||||
// <label htmlFor={this.props.component.key + "_componentKey"}>
|
|
||||||
// Key
|
|
||||||
// </label>
|
|
||||||
// <input id={this.props.component.key + "_componentKey"}
|
|
||||||
// onChange={this.handleChange}
|
|
||||||
// required={true}
|
|
||||||
// type="text"
|
|
||||||
// value={this.state.componentKey} />
|
|
||||||
// {this.renderEditorDialog()}
|
|
||||||
//
|
|
||||||
// {this.state.errorMsg !== null &&
|
|
||||||
// <div className="errorPanel">
|
|
||||||
// {this.state.errorMsg}
|
|
||||||
// </div>
|
|
||||||
// }
|
|
||||||
// <div className="dialogButtonBar">
|
|
||||||
// <button type="submit">Save</button>
|
|
||||||
// <button onClick={(event) => this.closeOnButton(event)}>
|
|
||||||
// Cancel
|
|
||||||
// </button>
|
|
||||||
// </div>
|
|
||||||
// </form>
|
|
||||||
// </dialog>
|
|
||||||
// </li>;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// private closeOnButton(event: React.MouseEvent<HTMLButtonElement>): void {
|
|
||||||
//
|
|
||||||
// event.preventDefault();
|
|
||||||
//
|
|
||||||
// this.toggleEditorDialog();
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// private closeOnEsc(event: React.KeyboardEvent<HTMLElement>): void {
|
|
||||||
//
|
|
||||||
// console.log(`Key press detected: ${event.key}`);
|
|
||||||
//
|
|
||||||
// if (event.key === "27") {
|
|
||||||
// this.toggleEditorDialog();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// private toggleEditorDialog(): void {
|
|
||||||
//
|
|
||||||
// if (this.state.dialogExpanded === "dialogExpanded") {
|
|
||||||
// this.setState({
|
|
||||||
// ...this.state as any,
|
|
||||||
// dialogExpanded: "dialogClosed",
|
|
||||||
// dialogOpened: false,
|
|
||||||
// });
|
|
||||||
// } else {
|
|
||||||
// this.setState({
|
|
||||||
// ...this.state as any,
|
|
||||||
// dialogExpanded: "dialogExpanded",
|
|
||||||
// dialogOpened: true,
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// class OldDefaultComponentModelEditor
|
|
||||||
// extends OldAbstractComponentModelEditor<
|
|
||||||
// ComponentModel,
|
|
||||||
// OldComponentModelEditorProps<ComponentModel>,
|
|
||||||
// OldComponentModelEditorState> {
|
|
||||||
//
|
|
||||||
// constructor(props: OldComponentModelEditorProps<ComponentModel>) {
|
|
||||||
//
|
|
||||||
// super(props);
|
|
||||||
//
|
|
||||||
// this.setState({
|
|
||||||
// dialogExpanded: "dialogClosed",
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// public renderPropertyList(): React.ReactFragment {
|
|
||||||
//
|
|
||||||
// return <React.Fragment />;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// public renderEditorDialog(): React.ReactFragment {
|
|
||||||
//
|
|
||||||
// return <React.Fragment />;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// public render(): React.ReactNode {
|
|
||||||
// return super.render();
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
|
|
||||||
// interface PageModelEditorProps {
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
interface PageModelEditorState {
|
interface PageModelEditorState {
|
||||||
|
|
||||||
selectedPageModel: PageModel | null;
|
selectedPageModel: PageModel | null;
|
||||||
|
|
@ -1486,48 +1196,6 @@ interface ComponentInfo {
|
||||||
class PageModelEditor
|
class PageModelEditor
|
||||||
extends React.Component<{}, PageModelEditorState> {
|
extends React.Component<{}, PageModelEditorState> {
|
||||||
|
|
||||||
// public static getAvailableComponents(): {
|
|
||||||
// [type: string]: (props: OldComponentModelEditorProps<ComponentModel>)
|
|
||||||
// => React.ReactFragment} {
|
|
||||||
//
|
|
||||||
// console.log("Available editors:");
|
|
||||||
// for(let key of Object.keys(PageModelEditor.componentModelEditors)) {
|
|
||||||
//
|
|
||||||
// console.log(`${key} -> ${PageModelEditor.componentModelEditors}`);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// return {
|
|
||||||
// ...PageModelEditor.componentModelEditors,
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
|
|
||||||
// public static registerComponentModelEditor(
|
|
||||||
// type: string,
|
|
||||||
// generator: ((props: OldComponentModelEditorProps<ComponentModel>)
|
|
||||||
// => React.ReactFragment)): void {
|
|
||||||
//
|
|
||||||
// console.log(`Registering editor for type ${type}...`);
|
|
||||||
//
|
|
||||||
// const editors = {
|
|
||||||
// ...PageModelEditor.componentModelEditors,
|
|
||||||
// };
|
|
||||||
//
|
|
||||||
// editors[type] = generator;
|
|
||||||
// PageModelEditor.componentModelEditors = editors;
|
|
||||||
//
|
|
||||||
// console.log("The following editors are now available:");
|
|
||||||
// for(let key of Object.keys(PageModelEditor.componentModelEditors)) {
|
|
||||||
//
|
|
||||||
// console.log(`${key} -> ${PageModelEditor.componentModelEditors}`);
|
|
||||||
// }
|
|
||||||
// console.log("-----------------------");
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// private static componentModelEditors: {
|
|
||||||
// [type: string]: <C extends ComponentModel>(
|
|
||||||
// props: OldComponentModelEditorProps<C>) => React.ReactFragment;
|
|
||||||
// };
|
|
||||||
|
|
||||||
private static getDispatcherPrefix(): string {
|
private static getDispatcherPrefix(): string {
|
||||||
|
|
||||||
const dataElem: HTMLElement | null = document
|
const dataElem: HTMLElement | null = document
|
||||||
|
|
@ -1568,13 +1236,6 @@ class PageModelEditor
|
||||||
|
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
// this.state = {
|
|
||||||
// // selectedPageModel: newPageModel,
|
|
||||||
// context: {
|
|
||||||
// pageModelSelected: false,
|
|
||||||
// selectedPageModel: newPageModel,
|
|
||||||
// },
|
|
||||||
// };
|
|
||||||
this.state = {
|
this.state = {
|
||||||
errorMessages: [],
|
errorMessages: [],
|
||||||
pageModels: [],
|
pageModels: [],
|
||||||
|
|
@ -1745,10 +1406,6 @@ class PageModelEditor
|
||||||
private reload(): void {
|
private reload(): void {
|
||||||
|
|
||||||
this.fetchPageModels();
|
this.fetchPageModels();
|
||||||
// this.setState({
|
|
||||||
// ...this.state,
|
|
||||||
// selectedPageModel: null,
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private selectPageModel(selectedPageModel: PageModel): void {
|
private selectPageModel(selectedPageModel: PageModel): void {
|
||||||
|
|
@ -1761,14 +1418,4 @@ class PageModelEditor
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// private setSelectedPageModel(selectedPageModel: PageModel): void {
|
|
||||||
//
|
|
||||||
// this.setState((state: any) => {
|
|
||||||
// return {
|
|
||||||
// ...state,
|
|
||||||
// selectedPageModel,
|
|
||||||
// };
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue