Admin dashboard: accounts

core/public/script/admin.coffee

@@ -1,25 +1,4 @@
 $ ->
-  $('#tab-account-list .action-confirm-payment').click ->
-    $('.confirm-payment-modal .input-account-id').html $(@).parents('tr').data 'id'
-    $('.confirm-payment-modal').modal 'show'
-
-  $('.action-delete-account').click (e) ->
-    e.preventDefault()
-    if window.confirm 'Are you sure?'
-      request '/admin/delete_account',
-        account_id: $(@).parents('tr').data 'id'
-      , ->
-        location.reload()
-
-  $('.confirm-payment-modal .action-confirm-payment').click ->
-    request '/admin/confirm_payment',
-      account_id: $('.input-account-id').text()
-      type: 'taobao'
-      amount: parseFloat $('.input-amount').val()
-      order_id: $('.input-order-id').val()
-    , ->
-      location.reload()
-
   $('.action-generate-code').click ->
     request '/admin/generate_coupon_code',
       expired: $('.input-expired').val()

core/root.coffee

@@ -11,7 +11,9 @@ fs = require 'q-io/fs'
 _ = require 'lodash'
 Q = require 'q'
 
-require('node-jsx').install harmony: true
+require('node-jsx').install
+  harmony: true
+  extension: '.jsx'
 
 ###
   Class: Root object for control RootPanel, An instance is always available as the `root` global.

core/router/admin.coffee

@@ -137,7 +137,7 @@ router.use '/users', do (router = new Router) ->
   ###
   router.post '/:id/deposits/create', (req, res, next) ->
     Financials.createDepositRequest(req.user, req.body.amount,
-      provider: req.body.provider
+      provider: root.paymentProviders.byName(req.body.provider)
       order_id: req.body.orderId
     ).tap (financial) ->
       if req.body.status

core/view/admin/accounts.jsx

@@ -1,5 +1,5 @@
 var React = require('react');
-var {Table, Button, DropdownButton, MenuItem, Modal} = require('react-bootstrap');
+var {Table, Button, DropdownButton, MenuItem, Modal, Input} = require('react-bootstrap');
 var _ = require('lodash');
 var agent = require('../scripts/agent.coffee');
 var Cookies = require('js-cookie');
@@ -8,7 +8,9 @@ var $ = require('jquery');
 module.exports = AdminAccounts = React.createClass({
   getInitialState: function() {
     return {
-      accounts: this.props.accounts
+      accounts: this.props.accounts,
+      accountDetailsModal: null,
+      createDepositModal: null
     };
   },
 
@@ -20,13 +22,13 @@ module.exports = AdminAccounts = React.createClass({
 
   showAccountDetails: function(account_id) {
     this.setState({
-      detailsModal: account_id
+      accountDetailsModal: account_id
     });
   },
 
   closeAccountDetails: function() {
     this.setState({
-      detailsModal: null
+      accountDetailsModal: null
     });
   },
 
@@ -46,6 +48,44 @@ module.exports = AdminAccounts = React.createClass({
     });
   },
 
+  showCreateDeposit: function(account_id) {
+    this.setState({
+      createDepositModal: account_id
+    });
+  },
+
+  closeCreateDeposit: function() {
+    this.setState({
+      createDepositModal: null
+    });
+  },
+
+  createDeposit: function() {
+    var accountId = this.refs.depositAccountId.getValue();
+    var provider = this.refs.depositProvider.getValue();
+    var orderId = this.refs.depositOrderId.getValue();
+    var amount = parseFloat(this.refs.depositAmount.getValue());
+
+    agent.post(`/admin/users/${accountId}/deposits/create`, {
+      provider: provider,
+      orderId: orderId,
+      amount: amount
+    }).then( deposit => {
+      alert(deposit._id);
+      this.closeCreateDeposit();
+    });
+  },
+
+  deleteAccount: function(account_id) {
+    agent.delete(`/admin/users/${account_id}`).then( () => {
+      this.setState({
+        accounts: this.state.accounts.filter(function(originalAccount) {
+          return originalAccount._id != account_id;
+        })
+      });
+    });
+  },
+
   updateAccount: function(account) {
     this.setState({
       accounts: this.state.accounts.map(function(originalAccount) {
@@ -72,6 +112,43 @@ module.exports = AdminAccounts = React.createClass({
         </thead>
         <tbody>
           {this.state.accounts.map( account => {
+            var showAccountDetails = this.showAccountDetails.bind(this, account._id);
+            var showCreateDeposit = this.showCreateDeposit.bind(this, account._id);
+            var deleteAccount = this.deleteAccount.bind(this, account._id);
+
+            if (this.state.accountDetailsModal == account._id) {
+              var accountDetailsModal = <Modal show={true} onHide={this.closeAccountDetails} bsSize='large'>
+                <Modal.Header closeButton>
+                  <Modal.Title>{account._id}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  <pre>{JSON.stringify(account, null, '    ')}</pre>
+                </Modal.Body>
+                <Modal.Footer>
+                  <Button onClick={this.closeAccountDetails}>关闭</Button>
+                </Modal.Footer>
+              </Modal>;
+            }
+
+            if (this.state.createDepositModal == account._id) {
+              var createDepositModal = <Modal show={true} onHide={this.closeCreateDeposit}>
+                <Modal.Header closeButton>
+                  <Modal.Title>{account._id}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  <form className='form-horizontal'>
+                    <Input ref='depositAccountId' type='text' label='用户 ID' value={account._id} labelClassName='col-xs-4' wrapperClassName='col-xs-8' />
+                    <Input ref='depositProvider' type='text' label='渠道' labelClassName='col-xs-4' wrapperClassName='col-xs-8' />
+                    <Input ref='depositOrderId' type='text' label='订单号' labelClassName='col-xs-4' wrapperClassName='col-xs-8' />
+                    <Input ref='depositAmount' type='text' label='金额' labelClassName='col-xs-4' wrapperClassName='col-xs-8' />
+                  </form>
+                </Modal.Body>
+                <Modal.Footer>
+                  <Button bsStyle='success' onClick={this.createDeposit}>创建</Button>
+                </Modal.Footer>
+              </Modal>;
+            }
+
             return (
               <tr key={account._id}>
                 <td>{account.username}</td>
@@ -79,35 +156,27 @@ module.exports = AdminAccounts = React.createClass({
                 <td>{_.keys(account.plans).join()}</td>
                 <td>{account.balance.toFixed(2)}</td>
                 <td>
-                  <Button bsStyle='info' bsSize='small' onClick={this.showAccountDetails.bind(this, account._id)}>
+                  <Button bsStyle='info' bsSize='small' onClick={showAccountDetails}>
                     详情
                   </Button>
-                  {this.state.detailsModal == account._id && (
-                    <Modal show={true} onHide={this.closeAccountDetails} bsSize='large'>
-                      <Modal.Header closeButton>
-                        <Modal.Title>{account._id}</Modal.Title>
-                      </Modal.Header>
-                      <Modal.Body>
-                        <pre>{JSON.stringify(account, null, '    ')}</pre>
-                      </Modal.Body>
-                      <Modal.Footer>
-                        <Button onClick={this.closeAccountDetails}>关闭</Button>
-                      </Modal.Footer>
-                    </Modal>
-                  )}
                   <DropdownButton title='付费计划' bsStyle='warning' bsSize='small'>
                     {this.props.plans.map( plan => {
+                      var joinPlan = this.joinPlan.bind(this, account._id, plan.name);
+                      var leavePlan = this.leavePlan.bind(this, account._id, plan.name);
+
                       if (account.plans[plan.name]) {
-                        return <MenuItem key={plan.name} className='bg-danger' eventKey={plan.name} onSelect={this.leavePlan.bind(this, account._id)}>离开计划 {plan.name}</MenuItem>;
+                        return <MenuItem key={plan.name} onSelect={leavePlan}>离开计划 {plan.name}</MenuItem>;
                       } else {
-                        return <MenuItem key={plan.name} className='bg-success' eventKey={plan.name} onSelect={this.joinPlan.bind(this, account._id)}>加入计划 {plan.name}</MenuItem>;
+                        return <MenuItem key={plan.name} onSelect={joinPlan}>加入计划 {plan.name}</MenuItem>;
                       }
                     })}
                   </DropdownButton>
                   <DropdownButton title='操作' bsStyle='primary' bsSize='small'>
-                    <MenuItem>确认充值</MenuItem>
-                    <MenuItem>删除账号</MenuItem>
+                    <MenuItem onSelect={showCreateDeposit}>确认充值</MenuItem>
+                    <MenuItem onSelect={deleteAccount}>删除账号</MenuItem>
                   </DropdownButton>
+                  {accountDetailsModal}
+                  {createDepositModal}
                 </td>
               </tr>
             )