,
- S extends ComponentModelEditorState>
+interface BasicComponentModelEditorDialogState {
- extends React.Component {
+ componentKey: string;
+ dialogOpen: boolean;
+ errorMsg: string | null;
+}
- constructor(props: ComponentModelEditorProps) {
- super(props as any);
+
+class BasicComponentModelPropertiesList
+ extends React.Component<
+ BasicComponentModelPropertiesListProps, {}> {
+
+ // constructor(props: BasicComponentModelPropertiesListProps) {
+ //
+ // super(props);
+ // }
+
+ public render(): React.ReactNode {
+
+ return
+ - Key
+ - {this.props.component.key}
+ - Type
+ - {this.props.component.type}
+ {this.props.children}
+
+ }
+}
+
+class BasicComponentModelEditorDialog
+ extends React.Component<
+ BasicComponentModelEditorDialogProps,
+ BasicComponentModelEditorDialogState> {
+
+ constructor(props: BasicComponentModelEditorDialogProps) {
+
+ super(props);
this.state = {
- ...this.state as any,
- dialogExpanded: "dialogClosed",
- dialogOpened: false,
+ componentKey: this.props.component.key,
+ dialogOpen: false,
errorMsg: null,
};
@@ -956,30 +992,41 @@ abstract class AbstractComponentModelEditor<
this.handleSubmit = this.handleSubmit.bind(this);
}
- public handleChange(event: React.ChangeEvent): void {
+ public handleChange(event: React.ChangeEvent): void {
- if (event.currentTarget.id === this.props.component.key + "_componentKey") {
+ const target: HTMLInputElement = event.currentTarget;
- const target: HTMLInputElement
- = event.currentTarget as HTMLInputElement;
+ const idPrefix: string
+ = `${this.props.containerKey}_${this.props.component.key}_`;
- this.setState({
- ...this.state as any,
- componentKey: target.value,
- });
+ switch(target.id) {
+ case `${idPrefix}componentKey`: {
+
+ const componentKey: string = target.value;
+ this.setState({
+ ...this.state,
+ componentKey,
+ });
+ break;
+ }
}
-
}
public handleSubmit(event: React.FormEvent): void {
- const componentData: any = this.getComponentData();
+ const componentProperties: {[name: string]: any}
+ = this.props.getComponentModelProperties();
+
+ const data: {[name: string]: any} = {
+ ...componentProperties,
+ componentKey: this.state.componentKey,
+ };
const headers: Headers = new Headers();
headers.append("Content-Type", "application/json");
const init: RequestInit = {
- body: JSON.stringify(componentData),
+ body: JSON.stringify(data),
credentials: "same-origin",
headers,
method: "PUT",
@@ -1012,136 +1059,386 @@ abstract class AbstractComponentModelEditor<
});
}
- public getComponentData(): any {
-
- return {
- key: this.state.componentKey,
- };
- }
-
- public abstract renderPropertyList(): React.ReactFragment;
-
- public abstract renderEditorDialog(): React.ReactFragment;
-
public render(): React.ReactNode {
- return
-
- - Key
- - {this.props.component.key}
- - Type
- - {this.props.component.type}
- {this.renderPropertyList()}
-
- ;
+ ;
}
- private closeOnButton(event: React.MouseEvent): void {
+ private openCloseOnButton(
+ event: React.MouseEvent): void {
event.preventDefault();
this.toggleEditorDialog();
}
- private closeOnEsc(event: React.KeyboardEvent): 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,
- });
- }
+ this.setState({
+ ...this.state,
+ dialogOpen: !this.state.dialogOpen,
+ });
}
}
-class DefaultComponentModelEditor
- extends AbstractComponentModelEditor<
- ComponentModel,
- ComponentModelEditorProps,
- ComponentModelEditorState> {
+interface EditorComponents {
- constructor(props: ComponentModelEditorProps) {
+ propertiesList: typeof React.Component;
+ editorDialog: typeof React.Component;
+}
+
+interface ComponentModelEditorProps {
+
+ ccmApplication: string;
+ component: ComponentModel;
+ containerKey: string;
+ dispatcherPrefix: string;
+ pageModelName: string;
+}
+
+class ComponentModelEditor
+ extends React.Component {
+
+ private editorComponents: {[type: string]: EditorComponents};
+ private propertiesListComponents: {[type: string]: typeof React.Component};
+ private editorDialogComponents: {[type: string]: typeof React.Component};
+
+ constructor(props: ComponentModelEditorProps) {
super(props);
- this.setState({
- dialogExpanded: "dialogClosed",
- });
+ this.editorComponents = {};
+ this.propertiesListComponents = {};
+ this.editorDialogComponents = {};
}
- public renderPropertyList(): React.ReactFragment {
+ public registerEditorComponents(type: string,
+ components: EditorComponents) {
- return ;
- }
+ this.editorComponents = {
+ ...this.editorComponents,
+ type: components,
+ };
- public renderEditorDialog(): React.ReactFragment {
+ this.propertiesListComponents = {
+ ...this.propertiesListComponents,
+ type: components.propertiesList,
+ };
- return ;
+ this.editorDialogComponents = {
+ ...this.editorDialogComponents,
+ type: components.editorDialog,
+ }
}
public render(): React.ReactNode {
- return super.render();
+
+ const components: EditorComponents
+ = this.editorComponents[this.props.component.type];
+ const PropertiesList: typeof React.Component
+ = components.propertiesList;
+ const EditorDialog: typeof React.Component
+ = components.propertiesList;
+
+ return
+
+
+
+
}
+ private getEditorComponents(type: string): EditorComponents {
+
+ if (this.editorComponents.hasOwnProperty(type)) {
+ return this.editorComponents[type];
+ } else {
+ const basicComponents: EditorComponents = {
+ propertiesList:
+ BasicComponentModelPropertiesList as typeof React.Component,
+ editorDialog:
+ BasicComponentModelEditorDialog as typeof React.Component,
+ };
+
+ return basicComponents;
+ }
+ }
}
+// interface OldComponentModelEditorProps {
+//
+// 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,
+// S extends OldComponentModelEditorState>
+//
+// extends React.Component {
+//
+// constructor(props: OldComponentModelEditorProps) {
+//
+// 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): 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): 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
+//
+// - Key
+// - {this.props.component.key}
+// - Type
+// - {this.props.component.type}
+// {this.renderPropertyList()}
+//
+// this.closeOnButton(event)}>
+// Edit
+//
+//
+// ;
+// }
+//
+// private closeOnButton(event: React.MouseEvent): void {
+//
+// event.preventDefault();
+//
+// this.toggleEditorDialog();
+// }
+//
+// private closeOnEsc(event: React.KeyboardEvent): 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,
+// OldComponentModelEditorState> {
+//
+// constructor(props: OldComponentModelEditorProps) {
+//
+// super(props);
+//
+// this.setState({
+// dialogExpanded: "dialogClosed",
+// });
+// }
+//
+// public renderPropertyList(): React.ReactFragment {
+//
+// return ;
+// }
+//
+// public renderEditorDialog(): React.ReactFragment {
+//
+// return ;
+// }
+//
+// public render(): React.ReactNode {
+// return super.render();
+// }
+//
+// }
+
// interface PageModelEditorProps {
//
// }
@@ -1169,47 +1466,47 @@ interface ComponentInfo {
class PageModelEditor
extends React.Component<{}, PageModelEditorState> {
- public static getAvailableComponents(): {
- [type: string]: (props: ComponentModelEditorProps)
- => React.ReactFragment} {
+ // public static getAvailableComponents(): {
+ // [type: string]: (props: OldComponentModelEditorProps)
+ // => React.ReactFragment} {
+ //
+ // console.log("Available editors:");
+ // for(let key of Object.keys(PageModelEditor.componentModelEditors)) {
+ //
+ // console.log(`${key} -> ${PageModelEditor.componentModelEditors}`);
+ // }
+ //
+ // return {
+ // ...PageModelEditor.componentModelEditors,
+ // };
+ // }
- 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: ComponentModelEditorProps)
- => 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]: (
- props: ComponentModelEditorProps) => React.ReactFragment;
- };
+ // public static registerComponentModelEditor(
+ // type: string,
+ // generator: ((props: OldComponentModelEditorProps)
+ // => 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]: (
+ // props: OldComponentModelEditorProps) => React.ReactFragment;
+ // };
private static getDispatcherPrefix(): string {