add export postman collection utility

package.json

@@ -23,7 +23,7 @@
   "license": "ISC",
   "dependencies": {
     "animate.css": "3.5.2",
-    "bootstrap": "^4.0.0-beta.2",
+    "bootstrap": "^4.1.1",
     "chart.js": "^2.6.0",
     "codemirror": "5.27.2",
     "graceful": "1.0.1",

src/components/editor/RepositoryEditor.jsx

@@ -12,9 +12,10 @@ import { addRepository, updateRepository, clearRepository } from '../../actions/
 import { addModule, updateModule, deleteModule, sortModuleList } from '../../actions/module'
 import { addInterface, updateInterface, deleteInterface, lockInterface, unlockInterface, sortInterfaceList } from '../../actions/interface'
 import { addProperty, updateProperty, deleteProperty, updateProperties, sortPropertyList } from '../../actions/property'
-import { GoRepo, GoPencil, GoPlug, GoDatabase, GoJersey } from 'react-icons/lib/go'
+import { GoRepo, GoPencil, GoPlug, GoDatabase, GoJersey, GoLinkExternal } from 'react-icons/lib/go'
 
 import './RepositoryEditor.css'
+import ExportPostmanForm from '../repository/ExportPostmanForm';
 
 // DONE 2.1 import Spin from '../utils/Spin'
 // TODO 2.2 缺少测试器
@@ -57,7 +58,8 @@ class RepositoryEditor extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      update: false
+      update: false,
+      exportPostman: false,
     }
   }
   render () {
@@ -91,6 +93,7 @@ class RepositoryEditor extends Component {
           </span>
           <div className='toolbar'>
             {/* 编辑权限：拥有者或者成员 */}
+
             {isOwned || isJoined
               ? <span className='fake-link edit' onClick={e => this.setState({ update: true })}><GoPencil /> 编辑</span>
               : null
@@ -101,6 +104,10 @@ class RepositoryEditor extends Component {
             <Link to={`${serve}/app/plugin/${repository.id}`} target='_blank' className='api'><GoPlug /> 插件</Link>
             <Link to={`${serve}/repository/get?id=${repository.id}`} target='_blank' className='api'><GoDatabase /> 数据</Link>
             <Link to={`${serve}/test/test.plugin.jquery.html?id=${repository.id}`} target='_blank' className='api'><GoJersey /> 测试</Link>
+            <span className='fake-link edit' onClick={e => this.setState({ exportPostman: true })}><GoLinkExternal /> 导出Postman Collection</span>
+            <RModal when={this.state.exportPostman} onClose={e => this.setState({ exportPostman: false })}>
+              <ExportPostmanForm title='导出到Postman' repoId={repository.id} />
+            </RModal>
           </div>
           <RepositorySearcher repository={repository} />
           <div className='desc'>{repository.description}</div>

src/components/repository/ExportPostmanForm.jsx

@@ -0,0 +1,68 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { RParsley } from '../utils'
+import config from '../../config'
+
+class ExportPostmanForm extends Component {
+  static contextTypes = {
+    rmodal: PropTypes.object.isRequired,
+  }
+  static propTypes = {
+    repoId: PropTypes.number,
+  }
+  render() {
+    const { rmodal } = this.context
+    const { repoId } = this.props
+    return (
+      <section className='RepositoryForm'>
+        <div className='rmodal-header'>
+          <span className='rmodal-title'>{this.props.title}</span>
+        </div>
+        <RParsley ref={rparsley => { this.rparsley = rparsley }}>
+          <form className='form-horizontal' onSubmit={() => false} >
+            <div className='rmodal-body'>
+              <div>
+                请在Postman中点击导入（Import），选择从链接导入（Import From Link），输入如下链接即可。
+              </div>
+              <div className="alert alert-info" role="alert" style={{ margin: '8px 0' }}> {config.serve}/postman/export?id={repoId} </div>
+            </div>
+            <div className='rmodal-footer'>
+              <div className='form-group row mb0'>
+                <label className='col-sm-2 control-label' />
+                <div className='col-sm-10'>
+                  <button onClick={e => { e.preventDefault(); rmodal.close() }} className='mr10 btn btn-secondary'>关闭</button>
+                </div>
+              </div>
+            </div>
+          </form>
+        </RParsley>
+      </section>
+    )
+  }
+  componentDidUpdate() {
+    this.context.rmodal.reposition()
+  }
+  handleSubmit = (e) => {
+    e.preventDefault()
+
+    if (!this.rparsley.isValid()) return
+
+    let { onAddRepository, onUpdateRepository } = this.context
+    let onAddOrUpdateRepository = this.state.id ? onUpdateRepository : onAddRepository
+    let { organization } = this.props
+    let repository = {
+      ...this.state,
+      // ownerId: owner.id, // DONE 2.2 支持转移仓库
+      organizationId: organization ? organization.id : null,
+      memberIds: (this.state.members || []).map(user => user.id)
+    }
+    let { owner, newOwner } = this.state
+    if (newOwner && newOwner.id !== owner.id) repository.ownerId = newOwner.id
+    onAddOrUpdateRepository(repository, () => {
+      let { rmodal } = this.context
+      if (rmodal) rmodal.resolve()
+    })
+  }
+}
+
+export default ExportPostmanForm

src/components/repository/ImportRepositoryForm.jsx

@@ -36,7 +36,7 @@ class ImportRepositoryForm extends Component {
             <div className='form-group row'>
               <label className='col-sm-2 control-label'>版本</label>
               <div className='col-sm-10'>
-                <RadioList data={[{ 'label': 'RAP1', 'value': 1 }, { 'label': 'RAP2(开发中...)', 'value': 2 }]}
+                <RadioList data={[{ 'label': 'RAP1', 'value': 1 }]}
                   curVal={this.state.version} name='version' disabled />
               </div>
             </div>