Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/475#discussion_r38316073
--- 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();
+ }.bind(this)
+ });
+ FauxtonAPI.addNotification({
+ msg: 'Document saved successfully.',
+ type: 'success',
+ clear: true
+ });
+ },
+
+ render: function () {
+ return (
+ <div>
+ <div id="doc-editor-actions-panel">
+ <div className="doc-actions-left">
+ <button className="save-doc btn btn-success save"
type="button" onClick={this.saveDoc}>
+ <i className="icon fonticon-ok-circled"></i> Save
+ </button>
+ <div>
+ <a href={this.props.previousPage} className="js-back
cancel-button">Cancel</a>
+ </div>
+ </div>
+ <div className="alignRight">
+ {this.getButtonRow()}
+ </div>
+ </div>
+
+ <div className="code-region">
+ <div className="bgEditorGutter"></div>
+ <div id="editor-container"
className="doc-code">{this.getCodeEditor()}</div>
+ </div>
+
+ <UploadModal
+ ref="uploadModal"
+ visible={this.state.uploadModalVisible}
+ doc={this.state.doc}
+ uploadComplete={this.uploadComplete} />
+ <CloneDocModal
+ visible={this.state.cloneDocModalVisible}
+ onSubmit={this.clearChanges} />
+ <FauxtonComponents.ConfirmationModal
+ visible={this.state.deleteDocModalVisible}
+ text="Are you sure you want to delete this document?"
+ onClose={this.hideDeleteDocModal}
+ onSubmit={this.deleteDoc} />
+ </div>
+ );
+ }
+ });
+
+ var AttachmentsPanelButton = React.createClass({
+
+ propTypes: {
+ isLoading: React.PropTypes.bool.isRequired,
+ doc: React.PropTypes.object
+ },
+
+ getDefaultProps: function () {
+ return {
+ isLoading: true,
+ doc: {}
+ };
+ },
+
+ getAttachmentList: function () {
+ var docBaseURL = this.props.doc.url();
+ return _.map(this.props.doc.get('_attachments'), function (item,
filename) {
+ var url = docBaseURL + '/' + app.utils.safeURLName(filename);
+ return (
+ <li key={filename}>
+ <a href={url} target="_blank" data-bypass="true">
<strong>{filename}</strong> -
+ <span>{item.content_type},
{Helpers.formatSize(item.length)}</span>
+ </a>
+ </li>
+ );
+ });
+ },
+
+ render: function () {
+ if (this.props.isLoading || !this.props.doc.get('_attachments')) {
+ return false;
+ }
+
+ return (
+ <div className="panel-section view-attachments-section btn-group">
+ <button className="panel-button dropdown-toggle btn"
data-bypass="true" data-toggle="dropdown" title="View Attachments"
+ id="view-attachments-menu">
+ <i className="icon fonticon-picture"></i>
+ <span>View Attachments</span>{' '}
+ <span className="caret"></span>
+ </button>
+ <ul className="dropdown-menu" role="menu"
aria-labelledby="view-attachments-menu">
+ {this.getAttachmentList()}
+ </ul>
+ </div>
+ );
+ }
+ });
+
+
+ var PanelButton = React.createClass({
+ propTypes: {
+ title: React.PropTypes.string.isRequired,
+ onClick: React.PropTypes.func.isRequired
+ },
+
+ getDefaultProps: function () {
+ return {
+ title: '',
+ iconClass: '',
+ onClick: function () { }
+ };
+ },
+
+ render: function () {
+ var iconClasses = 'icon ' + this.props.iconClass;
+ return (
+ <div className="panel-section">
+ <button className="panel-button upload" title={this.props.title}
onClick={this.props.onClick}>
+ <i className={iconClasses}></i>
+ <span>{this.props.title}</span>
+ </button>
+ </div>
+ );
+ }
+ });
+
+
+ var UploadModal = React.createClass({
+ propTypes: {
+ visible: React.PropTypes.bool.isRequired,
+ doc: React.PropTypes.object,
+ uploadComplete: React.PropTypes.func.isRequired
+ },
+
+ getInitialState: function () {
+ return {
+ inProgress: false,
+ loadPercentage: 0,
+ errorMessage: ''
+ };
+ },
+
+ componentDidUpdate: function () {
+ var params = (this.props.visible) ? { show: true, backdrop:
'static', keyboard: true } : 'hide';
+ $(this.getDOMNode()).modal(params);
+ },
+
+ // ensure that if the user clicks ESC to close the window, the store
gets wind of it
+ componentDidMount: function () {
+ $(this.getDOMNode()).on('hidden.bs.modal', function () {
+ Actions.hideUploadModal();
+ });
+ },
+
+ componentWillUnmount: function () {
+ $(this.getDOMNode()).off('hidden.bs.modal');
+ },
+
+ closeModal: function () {
+ if (this.state.inProgress) {
+ Actions.cancelUpload();
+ }
+ Actions.hideUploadModal();
+
+ // timeout needed to only clear it once the animate close effect is
done, otherwise the user sees it reset
+ // as it closes, which looks bad
+ setTimeout(function () {
+ this.reset();
+ }.bind(this), 1000);
+ },
+
+ reset: function () {
+ this.setState({
+ inProgress: false,
+ loadPercentage: 0,
+ errorMessage: ''
+ });
+ this.refs.uploadForm.getDOMNode().reset();
+ },
+
+ upload: function () {
+ if ($(this.refs.attachments.getDOMNode())[0].files.length === 0) {
+ this.setState({
+ errorMessage: 'Please select a file to be uploaded.'
+ });
+ return;
+ }
+
+ this.setState({
+ inProgress: true,
+ errorMessage: ''
+ });
+
+ Actions.uploadAttachment({
+ url: this.props.doc.url(),
+ $form: $(this.refs.uploadForm.getDOMNode()),
--- End diff --
???
---
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.
---
