From 32769a10dcf795bf4e228823d312a579b8e96b15 Mon Sep 17 00:00:00 2001 From: jensp Date: Thu, 21 Jun 2018 10:26:58 +0000 Subject: [PATCH] CCM NG: Current status PageModelEditor git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5538 8810af33-2d31-482b-a856-94f89814c4df Former-commit-id: 15ab46f9948e85c3d01aa256d4c686c0293a1a67 --- .../package-lock.json | 26 + ccm-cms-js/package-lock.json | 26 + ccm-pagemodelseditor/package-lock.json | 38 ++ ccm-pagemodelseditor/package.json | 2 + .../ccm-pagemodelseditor/PageModelsEditor.tsx | 596 ++++++++++-------- .../ccm-pagemodelseditor/datatypes.ts | 4 +- ccm-pagemodelseditor/tslint.json | 2 +- .../themes/foundry/foundry/styles/admin.css | 13 + 8 files changed, 447 insertions(+), 260 deletions(-) diff --git a/ccm-bundle-devel-wildfly-web/package-lock.json b/ccm-bundle-devel-wildfly-web/package-lock.json index 8c56bb742..bcb5c5be3 100644 --- a/ccm-bundle-devel-wildfly-web/package-lock.json +++ b/ccm-bundle-devel-wildfly-web/package-lock.json @@ -1711,6 +1711,7 @@ "requires": { "react": "16.4.0", "react-dom": "16.4.0", + "react-modal": "3.4.5", "react-redux": "5.0.7", "redux": "4.0.0" }, @@ -1866,6 +1867,10 @@ "version": "2.0.2", "bundled": true }, + "exenv": { + "version": "1.2.2", + "bundled": true + }, "fbjs": { "version": "0.8.16", "bundled": true, @@ -2045,6 +2050,20 @@ "prop-types": "15.6.1" } }, + "react-lifecycles-compat": { + "version": "3.0.4", + "bundled": true + }, + "react-modal": { + "version": "3.4.5", + "bundled": true, + "requires": { + "exenv": "1.2.2", + "prop-types": "15.6.1", + "react-lifecycles-compat": "3.0.4", + "warning": "3.0.0" + } + }, "react-redux": { "version": "5.0.7", "bundled": true, @@ -2140,6 +2159,13 @@ "version": "0.7.18", "bundled": true }, + "warning": { + "version": "3.0.0", + "bundled": true, + "requires": { + "loose-envify": "1.3.1" + } + }, "whatwg-fetch": { "version": "2.0.4", "bundled": true diff --git a/ccm-cms-js/package-lock.json b/ccm-cms-js/package-lock.json index 04406ceb6..a2ad1e61e 100644 --- a/ccm-cms-js/package-lock.json +++ b/ccm-cms-js/package-lock.json @@ -108,6 +108,7 @@ "requires": { "react": "16.4.0", "react-dom": "16.4.0", + "react-modal": "3.4.5", "react-redux": "5.0.7", "redux": "4.0.0" }, @@ -263,6 +264,10 @@ "version": "2.0.2", "bundled": true }, + "exenv": { + "version": "1.2.2", + "bundled": true + }, "fbjs": { "version": "0.8.16", "bundled": true, @@ -442,6 +447,20 @@ "prop-types": "15.6.1" } }, + "react-lifecycles-compat": { + "version": "3.0.4", + "bundled": true + }, + "react-modal": { + "version": "3.4.5", + "bundled": true, + "requires": { + "exenv": "1.2.2", + "prop-types": "15.6.1", + "react-lifecycles-compat": "3.0.4", + "warning": "3.0.0" + } + }, "react-redux": { "version": "5.0.7", "bundled": true, @@ -537,6 +556,13 @@ "version": "0.7.18", "bundled": true }, + "warning": { + "version": "3.0.0", + "bundled": true, + "requires": { + "loose-envify": "1.3.1" + } + }, "whatwg-fetch": { "version": "2.0.4", "bundled": true diff --git a/ccm-pagemodelseditor/package-lock.json b/ccm-pagemodelseditor/package-lock.json index 27e1e32c6..f27971473 100644 --- a/ccm-pagemodelseditor/package-lock.json +++ b/ccm-pagemodelseditor/package-lock.json @@ -29,6 +29,15 @@ "@types/react": "16.3.14" } }, + "@types/react-modal": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.1.2.tgz", + "integrity": "sha512-EmzMU61fnQiTe1rajQRgo0ceaTo/TD5qsBCjMgPhp9PWia0HOD2VyDMnNErcVfWq8VBmkBJZoGhFmtQm2COY5g==", + "dev": true, + "requires": { + "@types/react": "16.3.14" + } + }, "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", @@ -204,6 +213,11 @@ "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", "dev": true }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "fbjs": { "version": "0.8.16", "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", @@ -421,6 +435,22 @@ "prop-types": "15.6.1" } }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-modal": { + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.4.5.tgz", + "integrity": "sha512-fYaGmsvt4z5voC2Bl/9ngIWES4BSRYgGnTljMwuzTuYZ1BBpaZbnXia8xlvj7mF0kg3aPV+5APjZRiMfRG6vyA==", + "requires": { + "exenv": "1.2.2", + "prop-types": "15.6.1", + "react-lifecycles-compat": "3.0.4", + "warning": "3.0.0" + } + }, "react-redux": { "version": "5.0.7", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz", @@ -540,6 +570,14 @@ "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz", "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==" }, + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "1.3.1" + } + }, "whatwg-fetch": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", diff --git a/ccm-pagemodelseditor/package.json b/ccm-pagemodelseditor/package.json index b3501beb5..fcaefa916 100644 --- a/ccm-pagemodelseditor/package.json +++ b/ccm-pagemodelseditor/package.json @@ -17,12 +17,14 @@ "dependencies": { "react": "^16.3.2", "react-dom": "^16.3.2", + "react-modal": "^3.4.5", "react-redux": "^5.0.7", "redux": "^4.0.0" }, "devDependencies": { "@types/react": "^16.3.14", "@types/react-dom": "^16.0.5", + "@types/react-modal": "^3.1.2", "tslint": "^5.10.0", "typescript": "^2.8.3" } diff --git a/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx b/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx index 105f62c2d..29fbe27fc 100644 --- a/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx +++ b/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx @@ -1,9 +1,10 @@ import * as React from "react"; +import * as ReactModal from "react-modal"; import { ContainerModel, PageModel, PageModelVersion, - PublicationStatus + PublicationStatus, } from "./datatypes"; export { @@ -55,7 +56,7 @@ interface PageModelsListProps { ccmApplication: string; dispatcherPrefix: string; - pageModels: PageModel[], + pageModels: PageModel[]; selectPageModel: (selectedPageModel: PageModel) => void; } @@ -101,8 +102,8 @@ class PageModelsList // .catch((error) => { // this.setState({ // ...this.state, - // errorMsg: `Failed to retrieve PageModels from ` - // + `${url}: ${error.message}`, + // errorMsg: `Failed to retrieve PageModels ` + // + ` from ${url}: ${error.message}`, // }); // }); // } else { @@ -128,22 +129,22 @@ class PageModelsList return
{this.props.pageModels.length > 0 && - }
; } } interface PageModelListItemProps { - index: number, + index: number; pageModel: PageModel; selectPageModel: (selectedPageModel: PageModel) => void; } @@ -158,14 +159,14 @@ class PageModelListItem public render(): React.ReactNode { return
  • { - event.preventDefault(); - // console.log("A PageModel has been selected"); - this.props.selectPageModel(this.props.pageModel); - } - }> + href="#" + onClick={ + (event) => { + event.preventDefault(); + // console.log("A PageModel has been selected"); + this.props.selectPageModel(this.props.pageModel); + } + }> {this.props.pageModel.title}
    • ; @@ -190,7 +191,7 @@ interface PageModelComponentState { name: string; title: string; description: string; - } + }; } class PageModelComponent @@ -203,14 +204,15 @@ class PageModelComponent editMode: this.props.pageModel.pageModelId === 0, errorMsg: null, form: { + description: this.props.pageModel.description, name: this.props.pageModel.name, title: this.props.pageModel.title, - description: this.props.pageModel.description - } + }, }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); + this.publishPageModel = this.publishPageModel.bind(this); } public render(): React.ReactNode { @@ -218,9 +220,9 @@ class PageModelComponent if (this.state.editMode) { return
    {this.state.errorMsg !== null && -
    - {this.state.errorMsg} -
    +
    + {this.state.errorMsg} +
    }
    + value={this.state.form.name} />
    + ; } else { return
    @@ -295,16 +297,20 @@ class PageModelComponent }); }}>Edit - {this.props.pageModel.publicationStatus === PublicationStatus.NOT_PUBLISHED.toString() - && + {this.props.pageModel.publicationStatus + === PublicationStatus.NOT_PUBLISHED.toString() + && } - {this.props.pageModel.publicationStatus === PublicationStatus.NEEDS_UPDATE.toString() - && + {this.props.pageModel.publicationStatus + === PublicationStatus.NEEDS_UPDATE.toString() + && } + ccmApplication={this.props.ccmApplication} + containers={this.props.pageModel.containers} + dispatcherPrefix={this.props.dispatcherPrefix} />
    ; } } @@ -317,10 +323,10 @@ class PageModelComponent ...this.state, editMode: false, form: { + description: this.props.pageModel.description, name: this.props.pageModel.name, title: this.props.pageModel.title, - description: this.props.pageModel.description, - } + }, }); } @@ -359,10 +365,10 @@ class PageModelComponent this.setState({ editMode: this.state.editMode, form: { + description: this.state.form.description, name: targetInput.value, title: this.state.form.title, - description: this.state.form.description, - } + }, }); break; } @@ -372,10 +378,10 @@ class PageModelComponent this.setState({ editMode: this.state.editMode, form: { + description: this.state.form.description, name: this.state.form.name, title: targetInput.value, - description: this.state.form.description, - } + }, }); break; } @@ -385,10 +391,10 @@ class PageModelComponent this.setState({ editMode: this.state.editMode, form: { + description: targetArea.value, name: this.state.form.name, title: this.state.form.title, - description: targetArea.value, - } + }, }); break; } @@ -408,8 +414,8 @@ class PageModelComponent const init: RequestInit = { body: JSON.stringify({ - title: this.state.form.title, description: this.state.form.description, + title: this.state.form.title, }), credentials: "same-origin", headers, @@ -433,14 +439,15 @@ class PageModelComponent this.setState({ ...this.state, errorMsg: `Failed to update/create PageModel: ` - + ` ${response.status} ${response.statusText}`, + + ` ${response.status} ${response.statusText}`, }); } }) .catch((error) => { this.setState({ ...this.state, - errorMsg: `Failed to update/create PageModel: ${error.message}`, + errorMsg: `Failed to update/create PageModel: ` + + `${error.message}`, }); }); } @@ -450,13 +457,13 @@ class PageModelComponent event.preventDefault(); const headers: Headers = new Headers(); - //headers.append("Content-Type", "application/json"); + // headers.append("Content-Type", "application/json"); headers.append("Content-Type", "application/x-www-form-urlencoded"); - //const formData: FormData = new FormData(); - //formData.set("action", "publish"); - //const data: URLSearchParams = new URLSearchParams(); - //data.append("action", "publish"); + // const formData: FormData = new FormData(); + // formData.set("action", "publish"); + // const data: URLSearchParams = new URLSearchParams(); + // data.append("action", "publish"); const init: RequestInit = { @@ -479,7 +486,7 @@ class PageModelComponent this.setState({ ...this.state, errorMsg: `Failed to publish PageModel: ` - + ` ${response.status} ${response.statusText}`, + + ` ${response.status} ${response.statusText}`, }); } }) @@ -487,7 +494,7 @@ class PageModelComponent this.setState({ ...this.state, errorMsg: `Failed to publish PageModel: ${error.message}`, - }) + }); }); } @@ -496,25 +503,99 @@ class PageModelComponent interface ContainerListProps { - containers: ContainerModel[], + ccmApplication: string; + containers: ContainerModel[]; + dispatcherPrefix: string; } -class ContainerListComponent extends React.Component { +interface ContainerListState { + + newContainerName: string; +} + +class ContainerListComponent + extends React.Component { + + constructor(props: ContainerListProps) { + + super(props); + + this.state = { + newContainerName: "", + } + + this.addContainer = this.addContainer.bind(this); + } public render(): React.ReactNode { return
    - +
    + + + +
      {this.props.containers - && this.props.containers.map((container) => -
    • - {container.key} - - - -
      • )} + && this.props.containers.map((container) => +
    • + {container.key} + + + +
      • )}
    -
    + ; + } + + private updateNewContainerName( + event: React.ChangeEvent): void { + + const target: HTMLInputElement = event.target as HTMLInputElement; + + this.setState({ + ...this.state, + newContainerName: target.value, + }); + } + + private addContainer( + event: React.FormEvent): void { + + event.preventDefault(); + + const headers: Headers = new Headers(); + headers.append("Content-Type", "application/json"); + + const init: RequestInit = { + + body: JSON.stringify({}), + credentials: "same-origin", + headers, + method: "PUT", + } + + const url: string = `${this.props.dispatcherPrefix}` + + `/page-models/${this.props.ccmApplication}/` + + `${this.state.newContainerName}`; } } @@ -530,7 +611,7 @@ interface PageModelEditorState { interface PageModelEditorState { - errorMessages: string[], + errorMessages: string[]; pageModels: PageModel[]; selectedPageModel: PageModel | null; } @@ -538,194 +619,6 @@ interface PageModelEditorState { class PageModelEditor extends React.Component<{}, PageModelEditorState> { - constructor(props: any) { - - super(props); - - // this.state = { - // // selectedPageModel: newPageModel, - // context: { - // pageModelSelected: false, - // selectedPageModel: newPageModel, - // }, - // }; - this.state = { - errorMessages: [], - pageModels: [], - selectedPageModel: null, - } - } - - public componentDidMount() { - - this.fetchPageModels(); - } - - public render(): React.ReactNode { - - return -
    -
    -
    -
    -
    -
    -

    - Available PageModels -

    -
    - - { - this.setState( - (state: PageModelEditorState) => { - return { - ...state, - selectedPageModel, - }; - }); - }}/> - -
    -
    -
    -
    -
    -
    - -     ; - } - - private createNewPageModel(event: React.MouseEvent): void { - - event.preventDefault(); - - this.setState({ - ...this.state, - selectedPageModel: { - containers: [], - description: "", - lastModified: 0, - lastPublished: 0, - modelUuid: "", - name: "", - pageModelId: 0, - publicationStatus: PublicationStatus.NOT_PUBLISHED.toString(), - title: "", - type: "", - uuid: "", - version: PageModelVersion.DRAFT, - } - }); - } - - private fetchPageModels(): void { - - const init: RequestInit = { - credentials: "same-origin", - method: "GET", - }; - - const url: string = `${PageModelEditor.getDispatcherPrefix()}` - + `/page-models/${PageModelEditor.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 static getDispatcherPrefix(): string { const dataElem: HTMLElement | null = document @@ -762,6 +655,184 @@ class PageModelEditor } } + constructor(props: any) { + + super(props); + + // this.state = { + // // selectedPageModel: newPageModel, + // context: { + // pageModelSelected: false, + // selectedPageModel: newPageModel, + // }, + // }; + this.state = { + errorMessages: [], + pageModels: [], + selectedPageModel: null, + }; + + this.createNewPageModel = this.createNewPageModel.bind(this); + this.selectPageModel = this.selectPageModel.bind(this); + } + + public componentDidMount() { + + this.fetchPageModels(); + } + + public render(): React.ReactNode { + + return +
    +
    +
    +
    +
    +
    +

    + Available PageModels +

    +
    + + + +
    +
    +
    +
    +
    +
    + +     ; + } + + private createNewPageModel( + event: React.MouseEvent): void { + + event.preventDefault(); + + this.setState({ + ...this.state, + selectedPageModel: { + containers: [], + description: "", + lastModified: 0, + lastPublished: 0, + modelUuid: "", + name: "", + pageModelId: 0, + publicationStatus: PublicationStatus.NOT_PUBLISHED.toString(), + title: "", + type: "", + uuid: "", + version: PageModelVersion.DRAFT, + }, + }); + } + + private fetchPageModels(): void { + + const init: RequestInit = { + credentials: "same-origin", + method: "GET", + }; + + const url: string = `${PageModelEditor.getDispatcherPrefix()}` + + `/page-models/${PageModelEditor.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 reload(): void { this.fetchPageModels(); @@ -771,6 +842,17 @@ class PageModelEditor // }); } + private selectPageModel(selectedPageModel: PageModel): void { + + this.setState( + (state: PageModelEditorState) => { + return { + ...state, + selectedPageModel, + }; + }); + } + // private setSelectedPageModel(selectedPageModel: PageModel): void { // // this.setState((state: any) => { diff --git a/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/datatypes.ts b/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/datatypes.ts index 48390d0e1..c9c565fba 100644 --- a/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/datatypes.ts +++ b/ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/datatypes.ts @@ -9,7 +9,7 @@ interface ContainerModel { interface PageModel { - containers: ContainerModel[], + containers: ContainerModel[]; description: string; modelUuid: string; name: string; @@ -34,4 +34,4 @@ enum PublicationStatus { NOT_PUBLISHED = "NOT_PUBLISHED", PUBLISHED = "PUBLISHED", NEEDS_UPDATE = "NEEDS_UPDATE", -} \ No newline at end of file +} diff --git a/ccm-pagemodelseditor/tslint.json b/ccm-pagemodelseditor/tslint.json index e437be29b..3e8e90f2b 100644 --- a/ccm-pagemodelseditor/tslint.json +++ b/ccm-pagemodelseditor/tslint.json @@ -12,7 +12,7 @@ "options": [100] }, "max-line-length": { - "options": [120] + "options": [80] } }, "rulesDirectory": [] diff --git a/ccm-theme-foundry/src/main/resources/themes/foundry/foundry/styles/admin.css b/ccm-theme-foundry/src/main/resources/themes/foundry/foundry/styles/admin.css index eea88ef7f..ae0e173a6 100644 --- a/ccm-theme-foundry/src/main/resources/themes/foundry/foundry/styles/admin.css +++ b/ccm-theme-foundry/src/main/resources/themes/foundry/foundry/styles/admin.css @@ -2039,3 +2039,16 @@ form.pagemodeleditor.propertiesForm { display: flex; flex-direction: column; } + +/* dialog.pageModelEditor { + + background-color: #fff; + + border-radius: 5%; + + position: fixed; + top: 5em; + right: 5em; + bottom: 5em; + left: 5em; +} */