From 68285da10b0c0a26465c2b302d97a9efe38e42a9 Mon Sep 17 00:00:00 2001 From: jensp Date: Thu, 2 Aug 2018 09:19:46 +0000 Subject: [PATCH] CCM NG: Code cleanup git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5631 8810af33-2d31-482b-a856-94f89814c4df --- .../ccm-cms/ccm-cms-pagemodelseditor.tsx | 197 +-------- .../ccm-pagemodelseditor/PageModelsEditor.tsx | 385 +----------------- 2 files changed, 34 insertions(+), 548 deletions(-) diff --git a/ccm-cms-js/src/main/typescript/ccm-cms/ccm-cms-pagemodelseditor.tsx b/ccm-cms-js/src/main/typescript/ccm-cms/ccm-cms-pagemodelseditor.tsx index ec3725a43..8f5e106de 100644 --- a/ccm-cms-js/src/main/typescript/ccm-cms/ccm-cms-pagemodelseditor.tsx +++ b/ccm-cms-js/src/main/typescript/ccm-cms/ccm-cms-pagemodelseditor.tsx @@ -2,21 +2,18 @@ import * as React from "react"; import { render } from "react-dom"; import { - // AbstractComponentModelEditor, - ComponentModel, BasicComponentModelEditorDialog, BasicComponentModelEditorDialogProps, BasicComponentModelEditorDialogState, BasicComponentModelPropertiesList, BasicComponentModelPropertiesListProps, - ComponentModelEditor, - ComponentModelEditorProps, - ComponentModelEditorDialogProps, ComponentInfo, + ComponentModel, + ComponentModelEditor, + ComponentModelEditorDialogProps, + ComponentModelEditorProps, EditorComponents, - // ComponentModelEditorProps, - // ComponentModelEditorState, - PageModelEditor, + PageModelEditor, } from "ccm-pagemodelseditor"; class CategoryTreeComponentPropertiesList @@ -35,7 +32,7 @@ class CategoryTreeComponentPropertiesList component={this.props.component}>
showFullTree
{this.props.component.showFullTree}
- + ; } } @@ -81,7 +78,7 @@ class CategoryTreeComponentEditorDialog id={`${idPrefix}showFullTree`} onChange={this.handleChange} type="checkbox" /> - + ; } private getComponentModelProperties(): {[name: string]: any} { @@ -97,7 +94,7 @@ class CategoryTreeComponentEditorDialog const idPrefix: string = `${this.props.containerKey}_${this.props.component.key}_`; - switch(target.id) { + switch (target.id) { case `${idPrefix}showFullTree`: { this.setState({ ...this.state, @@ -132,15 +129,15 @@ class ItemListComponentPropertiesList extends React.Component<
{Array.isArray(this.props.component.listOrder) ? ( - this.props.component.listOrder.map((order) => { + this.props.component.listOrder.map((order) =>
  • {order} -
    • - }) + , + ) ) : ("No order set") }
    - + ; } } @@ -166,8 +163,8 @@ class ItemListComponentEditorDialog extends React.Component< ...this.state, descending: this.props.component.descending, limitToType: this.props.component.limitToType, - pageSize: this.props.component.pageSize, listOrder: this.props.component.listOrder, + pageSize: this.props.component.pageSize, }; this.handleChange = this.handleChange.bind(this); @@ -234,8 +231,8 @@ class ItemListComponentEditorDialog extends React.Component< return { descending: this.state.descending, limitToType: this.state.limitToType, - pageSize: this.state.pageSize, listOrder: this.state.listOrder, + pageSize: this.state.pageSize, }; } @@ -245,7 +242,7 @@ class ItemListComponentEditorDialog extends React.Component< const idPrefix: string = `${this.props.containerKey}_${this.props.component.key}_`; - switch(target.id) { + switch (target.id) { case `${idPrefix}descending`: { this.setState({ ...this.state, @@ -287,29 +284,6 @@ class ItemListComponentEditorDialog extends React.Component< } -// PageModelEditor.registerComponentModelEditor( -// "org.librecms.pagemodel.CategoryTreeComponent", -// (props: ComponentModelEditorProps) => { -// return -// } -// ); -// PageModelEditor.registerComponentModelEditor( -// "org.librecms.pagemodel.ItemListComponent", -// (props: ComponentModelEditorProps) => { -// return -// } -// ); - render( , document.getElementById("cms-content"), @@ -320,54 +294,12 @@ interface CategoryTreeComponent extends ComponentModel { showFullTree: boolean; } -// interface CategoryTreeComponentEditorProps -// extends ComponentModelEditorProps { -// -// } -// -// interface CategoryTreeComponentEditorState -// extends ComponentModelEditorState { -// -// showFullTree: boolean; -// } -// -// -// class CategoryTreeComponentEditor -// extends AbstractComponentModelEditor { -// -// public constructor(props: CategoryTreeComponentEditorProps) { -// -// super(props); -// -// this.setState({ -// ...this.state as any, -// dialogExpanded: "dialogClosed", -// showFullTree: false, -// }); -// } -// -// public renderPropertyList(): React.ReactFragment { -// -// return -//
    Show full tree
    -//
    {this.props.component.showFullTree}
    -//     ; -// } -// -// public renderEditorDialog(): React.ReactFragment { -// -// return ; -// } -// } - interface ItemListComponent extends ComponentModel { descending: boolean; limitToType: string; + listOrder: string[]; pageSize: number; - listOrder: string[], } ComponentModelEditor.registerEditorComponents( @@ -377,7 +309,7 @@ ComponentModelEditor.registerEditorComponents( CategoryTreeComponentEditorDialog as typeof React.Component, propertiesList: CategoryTreeComponentPropertiesList as typeof React.Component, - } + }, ); ComponentModelEditor.registerEditorComponents( @@ -387,98 +319,5 @@ ComponentModelEditor.registerEditorComponents( ItemListComponentEditorDialog as typeof React.Component, propertiesList: ItemListComponentPropertiesList as typeof React.Component, - } + }, ); - - -// interface ItemListComponentEditorProps -// extends ComponentModelEditorProps { -// -// } -// -// interface ItemListComponentEditorState -// extends ComponentModelEditorState { -// -// descending: boolean; -// limitToType: string; -// pageSize: number; -// listOrder: string[]; -// } -// -// class ItemListComponentEditor -// extends AbstractComponentModelEditor { -// -// 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 -//
    descending
    -//
    {this.props.component.descending}
    -//
    limitToType
    -//
    {this.props.component.limitToType}
    -//
    pageSize
    -//
    {this.props.component.pageSize}
    -//
    listOrder
    -//
    -// {Array.isArray(this.props.component.listOrder) ? -// ( -// this.props.component.listOrder.map((order) => { -//
  • -// {order} -//
    • -// }) -// ) : ("No order set") -// } -//
    -//     -// } -// -// public renderEditorDialog(): React.ReactFragment { -// -// return -// -// -// -// -// -// -// -// -// ; -// } -// } diff --git a/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx b/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx index 5b7f70bdc..1ce372962 100644 --- a/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx +++ b/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx @@ -821,7 +821,7 @@ class ContainerModelComponent containerKey={this.props.container.key} dispatcherPrefix={this.props.dispatcherPrefix} key={component.componentModelId} - pageModelName={this.props.pageModelName} /> + pageModelName={this.props.pageModelName} />, // this.getComponentModelEditor(component), )} @@ -892,40 +892,8 @@ 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 ; - // } - // } - private deleteContainer( + private deleteContainer( event: React.MouseEvent, containerKey: string): void { @@ -962,17 +930,10 @@ interface BasicComponentModelEditorDialogState { errorMsg: string | null; } - - class BasicComponentModelPropertiesList extends React.Component< BasicComponentModelPropertiesListProps, {}> { - // constructor(props: BasicComponentModelPropertiesListProps) { - // - // super(props); - // } - public render(): React.ReactNode { return
    @@ -981,7 +942,7 @@ class BasicComponentModelPropertiesList
    Type
    {this.props.component.type}
    {this.props.children} -
    + ; } } @@ -1011,7 +972,7 @@ class BasicComponentModelEditorDialog const idPrefix: string = `${this.props.containerKey}_${this.props.component.key}_`; - switch(target.id) { + switch (target.id) { case `${idPrefix}componentKey`: { const componentKey: string = target.value; @@ -1069,7 +1030,7 @@ class BasicComponentModelEditorDialog ...this.state as any, errorMsg: `Failed to update/create ComponentModel: ` + `${error.message}`, - }) + }); }); } @@ -1115,7 +1076,8 @@ class BasicComponentModelEditorDialog
    -
    @@ -1158,47 +1120,24 @@ interface ComponentModelEditorProps { class ComponentModelEditor extends React.Component { - private static editorComponents: Map - = new Map(); - //{[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, components: EditorComponents) { ComponentModelEditor.editorComponents.set(type, components); + } - // ComponentModelEditor.editorComponents = { - // ...ComponentModelEditor.editorComponents, - // type: components, - // }; + private static editorComponents: Map + = new Map(); - // this.propertiesListComponents = { - // ...this.propertiesListComponents, - // type: components.propertiesList, - // }; - // - // this.editorDialogComponents = { - // ...this.editorDialogComponents, - // type: components.editorDialog, - // } + constructor(props: ComponentModelEditorProps) { + + super(props); } public render(): React.ReactNode { const components: EditorComponents = this.getEditorComponents(this.props.component.type); - //= ComponentModelEditor.editorComponents[this.props.component.type]; const PropertiesList: typeof React.Component = components.propertiesList; const EditorDialog: typeof React.Component @@ -1213,7 +1152,7 @@ class ComponentModelEditor containerKey={this.props.containerKey} dispatcherPrefix={this.props.dispatcherPrefix} pageModelName={this.props.pageModelName} /> - + ; } private getEditorComponents(type: string): EditorComponents { @@ -1223,10 +1162,10 @@ class ComponentModelEditor .editorComponents.get(type) as EditorComponents; } else { const basicComponents: EditorComponents = { - propertiesList: - BasicComponentModelPropertiesList as typeof React.Component, editorDialog: BasicComponentModelEditorDialog as typeof React.Component, + propertiesList: + BasicComponentModelPropertiesList as typeof React.Component, }; return basicComponents; @@ -1234,235 +1173,6 @@ class ComponentModelEditor } } -// 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.closeOnEsc(event)} -// open={this.state.dialogOpened} -// tabIndex={0}> -// -//

    -// Edit component {this.props.component.key} -//

    -//
    -// -// -// {this.renderEditorDialog()} -// -// {this.state.errorMsg !== null && -//
    -// {this.state.errorMsg} -//
    -// } -//
    -// -// -//
    -//
    -//     -//
    • ; -// } -// -// 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 { -// -// } -// interface PageModelEditorState { selectedPageModel: PageModel | null; @@ -1486,48 +1196,6 @@ interface ComponentInfo { class PageModelEditor extends React.Component<{}, PageModelEditorState> { - // 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, - // }; - // } - - // 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 { const dataElem: HTMLElement | null = document @@ -1568,13 +1236,6 @@ class PageModelEditor super(props); - // this.state = { - // // selectedPageModel: newPageModel, - // context: { - // pageModelSelected: false, - // selectedPageModel: newPageModel, - // }, - // }; this.state = { errorMessages: [], pageModels: [], @@ -1745,10 +1406,6 @@ class PageModelEditor private reload(): void { this.fetchPageModels(); - // this.setState({ - // ...this.state, - // selectedPageModel: null, - // }); } private selectPageModel(selectedPageModel: PageModel): void { @@ -1761,14 +1418,4 @@ class PageModelEditor }; }); } - - // private setSelectedPageModel(selectedPageModel: PageModel): void { - // - // this.setState((state: any) => { - // return { - // ...state, - // selectedPageModel, - // }; - // }); - // } }