Github user benkeen commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/475#discussion_r38334319
--- Diff: app/addons/documents/doc-editor/components.react.jsx ---
@@ -0,0 +1,540 @@
+define([
+ 'api',
+ 'app',
+ 'react',
+ 'addons/documents/doc-editor/actions',
+ 'addons/documents/doc-editor/stores',
+ 'addons/fauxton/components.react',
+ 'addons/components/react-components.react',
+ 'helpers'
+], function (FauxtonAPI, app, React, Actions, Stores, FauxtonComponents,
GeneralComponents, Helpers) {
+
+ var store = Stores.docEditorStore;
+
+
+ var DocEditorController = React.createClass({
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ getStoreState: function () {
+ return {
+ isLoading: store.isLoading(),
+ doc: store.getDoc(),
+ cloneDocModalVisible: store.isCloneDocModalVisible(),
+ uploadModalVisible: store.isUploadModalVisible(),
+ deleteDocModalVisible: store.isDeleteDocModalVisible()
+ };
+ },
+
+ getDefaultProps: function () {
+ return {
+ database: {},
+ previousPage: '',
+ isNewDoc: false
+ };
+ },
+
+ getCodeEditor: function () {
+ if (this.state.isLoading) {
+ return (<GeneralComponents.LoadLines />);
+ }
+
+ var code = JSON.stringify(this.state.doc.attributes, null, ' ');
+ var editorCommands = [{
+ name: 'save',
+ bindKey: { win: 'Ctrl-S', mac: 'Ctrl-S' },
+ exec: this.saveDoc
+ }];
+
+ return (
+ <GeneralComponents.CodeEditor
+ id="docEditor"
+ ref="docEditor"
+ defaultCode={code}
+ mode="json"
+ autoFocus={true}
+ editorCommands={editorCommands}
+ notifyUnsavedChanges={true}
+ stringEditModalEnabled={true}
+ change={this.onChangeDoc} />
+ );
+ },
+
+ onChangeDoc: function (doc) {
+ // super ugly, but necessary. This tells the user they can't delete
the _id or _rev fields as they type and actually
+ // prevents it from being removed in the editable doc
+ var json;
+ try {
+ json = JSON.parse(doc);
+ } catch (exception) {
+ return;
+ }
+
+ var keyChecked = ['_id'];
+ if (this.state.doc.get('_rev')) {
+ keyChecked.push('_rev');
+ }
+ if (_.isEmpty(_.difference(keyChecked, _.keys(json)))) {
+ return;
+ }
+
+ this.getEditor().setReadOnly(true);
+ setTimeout(function () { this.getEditor().setReadOnly(false);
}.bind(this), 400);
+
+ // extend ensures _id stays at the top of the editor doc
+ json = _.extend({ _id: this.state.doc.id, _rev:
this.state.doc.get('_rev') }, json);
+ this.getEditor().setValue(JSON.stringify(json, null, ' '));
+
+ FauxtonAPI.addNotification({
+ type: 'error',
+ msg: "Cannot remove a document's id or revision.",
+ clear: true
+ });
+ },
+
+ componentDidMount: function () {
+ store.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function () {
+ store.off('change', this.onChange);
+ },
+
+ onChange: function () {
+ if (this.isMounted()) {
+ this.setState(this.getStoreState());
+ }
+ },
+
+ saveDoc: function () {
+ Actions.saveDoc(this.state.doc, this.checkDocIsValid(),
this.onSaveComplete);
+ },
+
+ onSaveComplete: function (json) {
+ this.getEditor().setValue(json);
+ this.getEditor().clearChanges();
+
+ // the save action updates the doc. This ensures the button row then
shows the appropriate buttons
+ this.forceUpdate();
+ },
+
+ hideDeleteDocModal: function () {
+ Actions.hideDeleteDocModal();
+ },
+
+ deleteDoc: function () {
+ Actions.hideDeleteDocModal();
+ Actions.deleteDoc(this.state.doc);
+ },
+
+ getEditor: function () {
+ return (this.refs.docEditor) ? this.refs.docEditor.getEditor() :
null;
+ },
+
+ checkDocIsValid: function () {
+ if (this.getEditor().hasErrors()) {
+ return false;
+ }
+ var json = JSON.parse(this.getEditor().getValue());
+ this.state.doc.clear().set(json, { validate: true });
+
+ return !this.state.doc.validationError;
+ },
+
+ clearChanges: function () {
+ this.refs.docEditor.clearChanges();
+ },
+
+ getButtonRow: function () {
+ if (this.props.isNewDoc) {
+ return false;
+ }
+ return (
+ <div>
+ <AttachmentsPanelButton doc={this.state.doc}
isLoading={this.state.isLoading} />
+ <div className="doc-editor-extension-icons"></div>
+ <PanelButton title="Upload Attachment"
iconClass="icon-circle-arrow-up" onClick={Actions.showUploadModal} />
+ <PanelButton title="Clone Document" iconClass="icon-repeat"
onClick={Actions.showCloneDocModal} />
+ <PanelButton title="Delete" iconClass="icon-trash"
onClick={Actions.showDeleteDocModal} />
+ </div>
+ );
+ },
+
+ uploadComplete: function () {
+ Actions.initDocEditor({
+ doc: this.state.doc,
+ onLoaded: function () {
+
this.getEditor().setValue(JSON.stringify(this.state.doc.attributes, null, '
'));
+ this.refs.uploadModal.reset();
--- End diff --
Very good, I didn't think of that. I think the parent component (which
passes the onSuccess method to the upload component) could listen to a
published "done" msg and do whatever it needs there. Much cleaner.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at [email protected] or file a JIRA ticket
with INFRA.
---
