From 47ac813611864e1cc865639e99de0098768211a9 Mon Sep 17 00:00:00 2001 From: pmusaraj Date: Thu, 22 Feb 2018 16:08:54 -0500 Subject: [PATCH 001/163] start setting up UI screens for REST services --- jsapp/js/app.es6 | 4 +- jsapp/js/bem.es6 | 3 + jsapp/js/components/RESTServices.es6 | 135 +++++++++++++++++++++ jsapp/js/components/formSubScreens.es6 | 38 ++++-- jsapp/js/components/formViewTabs.es6 | 19 ++- jsapp/js/components/modal.es6 | 13 ++ jsapp/scss/components/_kobo.form-view.scss | 35 +++++- 7 files changed, 226 insertions(+), 21 deletions(-) create mode 100644 jsapp/js/components/RESTServices.es6 diff --git a/jsapp/js/app.es6 b/jsapp/js/app.es6 index c3f81d80b7..70730f2aae 100644 --- a/jsapp/js/app.es6 +++ b/jsapp/js/app.es6 @@ -292,8 +292,10 @@ export var routes = ( - + + + {/* used to force refresh form screens */} diff --git a/jsapp/js/bem.es6 b/jsapp/js/bem.es6 index 0560278fa7..47b27b57b1 100644 --- a/jsapp/js/bem.es6 +++ b/jsapp/js/bem.es6 @@ -11,6 +11,9 @@ bem.Loading = BEM('loading'); bem.Loading__inner = bem.Loading.__('inner'); bem.Loading__msg = bem.Loading.__('msg'); +bem.Empty = BEM('empty'); +bem.Empty__inner = bem.Empty.__('inner'); + bem.AssetRow = BEM('asset-row', '
  • '); bem.AssetRow__cell = bem.AssetRow.__('cell'); diff --git a/jsapp/js/components/RESTServices.es6 b/jsapp/js/components/RESTServices.es6 new file mode 100644 index 0000000000..d569c4a872 --- /dev/null +++ b/jsapp/js/components/RESTServices.es6 @@ -0,0 +1,135 @@ +import $ from 'jquery'; +import React from 'react'; +import PropTypes from 'prop-types' +import reactMixin from 'react-mixin'; +import alertify from 'alertifyjs'; +import moment from 'moment'; +import ui from '../ui'; +import bem from '../bem'; +import actions from '../actions'; +import stores from '../stores'; +import Select from 'react-select'; +import {dataInterface} from '../dataInterface'; +import { + t, + redirectTo, + assign, + formatTime +} from '../utils'; + +import DocumentTitle from 'react-document-title'; + +export default class RESTServices extends React.Component { + constructor(props){ + super(props); + this.state = {}; + } + + newServiceModal() { + stores.pageState.showModal({ + type: 'RESTservice', + sid: false + }); + } + + render () { + var docTitle = this.props.asset.name || t('Untitled'); + return ( + + + + + +

    {t('This project does not have any REST services yet!')}

    +

    + {t('You can use REST services to automatically post submissions to a third-party application.')} +   + + {t('Learn more')} + +

    + +     +     +     +     + ); + } +}; + +export class RESTServiceForm extends React.Component { + constructor(props){ + super(props); + } + + render() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } +}; \ No newline at end of file diff --git a/jsapp/js/components/formSubScreens.es6 b/jsapp/js/components/formSubScreens.es6 index 937aaf4b87..f5c1798840 100644 --- a/jsapp/js/components/formSubScreens.es6 +++ b/jsapp/js/components/formSubScreens.es6 @@ -22,6 +22,7 @@ import { } from '../components/formEditors'; import FormMap from '../components/map'; +import RESTServices from '../components/RESTServices'; import { assign, @@ -87,16 +88,23 @@ export class FormSubScreens extends React.Component { case `/forms/${this.state.uid}/data/map/${this.props.params.viewby}`: return ; break; - // case `/forms/${this.state.uid}/settings/kobocat`: - // iframeUrl = deployment__identifier+'/form_settings'; - // break; case `/forms/${this.state.uid}/data/downloads`: return this.renderProjectDownloads(); break; case `/forms/${this.state.uid}/settings`: - if (deployment__identifier != '') - iframeUrl = deployment__identifier+'/form_settings'; - return this.renderSettingsEditor(iframeUrl); + return this.renderSettingsEditor(); + break; + case `/forms/${this.state.uid}/settings/media`: + iframeUrl = deployment__identifier+'/form_settings'; + break; + case `/forms/${this.state.uid}/settings/sharing`: + return this.renderSharing(); + break; + case `/forms/${this.state.uid}/settings/rest`: + return ; + break; + case `/forms/${this.state.uid}/settings/kobocat`: + iframeUrl = deployment__identifier+'/form_settings'; break; case `/forms/${this.state.uid}/reset`: return this.renderReset(); @@ -116,12 +124,12 @@ export class FormSubScreens extends React.Component { ); } - renderSettingsEditor(iframeUrl) { + renderSettingsEditor() { var docTitle = this.state.name || t('Untitled'); return ( - + ); @@ -134,6 +142,20 @@ export class FormSubScreens extends React.Component { ); } + renderSharing() { + return ( + + + + ); + } + // renderREST() { + // return ( + // + + // + // ); + // } renderReset() { return ( diff --git a/jsapp/js/components/formViewTabs.es6 b/jsapp/js/components/formViewTabs.es6 index 517dd8e257..139a75b4d4 100644 --- a/jsapp/js/components/formViewTabs.es6 +++ b/jsapp/js/components/formViewTabs.es6 @@ -67,9 +67,6 @@ class FormViewTabs extends Reflux.Component { activeClassName='active'> {t('Form')} - - {t('Summary')} - { a.deployment__identifier != undefined && a.has_deployment && a.deployment__submission_count > 0 && this.userCan('view_submissions', a) && 0) { return ( diff --git a/jsapp/js/components/modal.es6 b/jsapp/js/components/modal.es6 index be6168596f..10d9995495 100644 --- a/jsapp/js/components/modal.es6 +++ b/jsapp/js/components/modal.es6 @@ -16,6 +16,7 @@ import { } from '../utils'; import {ProjectSettings} from '../components/formEditors'; +import {RESTServiceForm} from '../components/RESTServices'; import SharingForm from '../components/sharingForm'; import Submission from '../components/submission'; @@ -71,6 +72,12 @@ class Modal extends React.Component { sid: this.props.params.sid }); break; + case 'RESTservice': + console.log(this.props.params); + this.setState({ + title: t('New REST Service') + }); + break; } } @@ -157,6 +164,12 @@ class Modal extends React.Component { } + { this.props.params.type == 'RESTservice' && !this.props.params.sid && +
    + +
    + } + ) diff --git a/jsapp/scss/components/_kobo.form-view.scss b/jsapp/scss/components/_kobo.form-view.scss index e673128891..c04965c57a 100644 --- a/jsapp/scss/components/_kobo.form-view.scss +++ b/jsapp/scss/components/_kobo.form-view.scss @@ -505,8 +505,6 @@ } .form-view.form-view--form-settings { - overflow: initial; - .form-modal__form { height: 100%; @@ -521,6 +519,39 @@ } } +.form-view.form-view--form-settings-sharing { + .form-modal { + background: white; + padding: 40px; + height: 100%; + overflow: auto; + } +} + +.form-view.form-view--form-settings-REST { + background: white; + display: flex; + flex-direction: column; + justify-content: center; + + .empty { + text-align: center; + + i { + font-size: 156px; + opacity: 0.25; + } + + h2 { + font-weight: 400; + } + + .mdl-button { + margin-top: 30px; + } + } +} + .form-view.form-view--form-data-downloads { .form-modal__item { &:last-child { From 52016cc5fb8ef381bc90f4d3ba0338fd1fe5447a Mon Sep 17 00:00:00 2001 From: pmusaraj Date: Thu, 15 Mar 2018 15:25:40 -0400 Subject: [PATCH 002/163] more UI work for REST services --- jsapp/js/components/RESTServices.es6 | 189 ++++++++++++++++++--- jsapp/js/components/modal.es6 | 3 +- jsapp/scss/components/_kobo.bem.ui.scss | 22 +++ jsapp/scss/components/_kobo.form-view.scss | 31 +++- 4 files changed, 218 insertions(+), 27 deletions(-) diff --git a/jsapp/js/components/RESTServices.es6 b/jsapp/js/components/RESTServices.es6 index d569c4a872..11698f6d1f 100644 --- a/jsapp/js/components/RESTServices.es6 +++ b/jsapp/js/components/RESTServices.es6 @@ -2,6 +2,7 @@ import $ from 'jquery'; import React from 'react'; import PropTypes from 'prop-types' import reactMixin from 'react-mixin'; +import autoBind from 'react-autobind'; import alertify from 'alertifyjs'; import moment from 'moment'; import ui from '../ui'; @@ -22,7 +23,10 @@ import DocumentTitle from 'react-document-title'; export default class RESTServices extends React.Component { constructor(props){ super(props); - this.state = {}; + this.state = { + services: false + }; + autoBind(this); } newServiceModal() { @@ -35,8 +39,19 @@ export default class RESTServices extends React.Component { render () { var docTitle = this.props.asset.name || t('Untitled'); return ( - - + + + {this.state.services && +
    + + +
    + } + + {!this.state.services && @@ -54,6 +69,7 @@ export default class RESTServices extends React.Component { + }     ); @@ -63,6 +79,45 @@ export default class RESTServices extends React.Component { export class RESTServiceForm extends React.Component { constructor(props){ super(props); + this.state = { + name: '', + url: 'https://', + type: 'json', + securityType: 'oauth', + securityOptions: [ + { + value: 'oauth', + label: t('OAuth') + }, + { + value: 'auth_header', + label: t('Authorization Header') + } + ], + auth_header: '' + }; + autoBind(this); + } + + formItemChange(evt) { + if (evt.target) { + var val = evt.target.value; + var attr = evt.target.name; + } else { + var val = evt; + var attr = 'securityType'; + } + + this.setState({ + [attr]: val + }) + } + + onSubmit(evt) { + evt.preventDefault(); + console.log(this.state); + // TODO: send request to Backend + return false; } render() { @@ -74,10 +129,10 @@ export class RESTServiceForm extends React.Component { {t('Name')} @@ -85,16 +140,29 @@ export class RESTServiceForm extends React.Component { {t('Endpoint URL')} - - + + + @@ -103,23 +171,39 @@ export class RESTServiceForm extends React.Component { {t('Security')} + + } + + -