feat(feed): ( isses #324 ) 增加审核开源设置功能及页面

slimkit · Aug 7, 2018 · 7335345 · 7335345
1 parent e52e8b7
commit 7335345
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 3 deletions.
diff --git a/packages/slimkit-plus-feed/admin/api/topic.js b/packages/slimkit-plus-feed/admin/api/topic.js
@@ -30,3 +30,15 @@ export function destroy(id) {
     validateStatus: status => status === 204,
   });
 }
+
+export function reviewSwitchToggle() {
+  return adminRequest.put('topic-review-switch-toggle', {}, {
+    validateStatus: status => status === 204
+  });
+}
+
+export function fetchReviewSwitch() {
+  return adminRequest.get('topic-review-switch-toggle', {
+    validateStatus: status => 200 === status
+  });
+}
diff --git a/packages/slimkit-plus-feed/admin/pages/topic/Settings.jsx b/packages/slimkit-plus-feed/admin/pages/topic/Settings.jsx
@@ -1,11 +1,111 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '@material-ui/core/styles/withStyles';
+import HeaderBar from './modules/SettingsHeaderBar';
+import Paper from '@material-ui/core/Paper';
+import Switch from '@material-ui/core/Switch';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Snackbar from '../../components/common/Snackbar';
+import { fetchReviewSwitch, reviewSwitchToggle } from '../../api/topic';
+
+const styles = theme => ({
+  paper: {
+    padding: theme.spacing.unit * 3,
+    paddingBottom: theme.spacing.unit * 2,
+    width: '100%',
+  },
+  control: {
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
 
 class Settings extends React.Component {
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired
+  }
+
+  state = {
+    switch: false,
+    loading: true,
+    message: {
+      type: 'success',
+      text: '',
+      open: false,
+    }
+  }
+
+  componentDidMount() {
+    fetchReviewSwitch()
+      .then(({ data }) => {
+        this.setState({ switch: data.switch, loading: false });
+      })
+      .catch(({ response: { data = { message: '获取配置失败，请刷新页面重试' } } = {} }) => {
+        this.setState({message: {
+          open: true,
+          type: 'error',
+          text: data
+        }});
+      });
+  }
+
+  handleToggleReviewSwitch = () => {
+    this.setState({ loading: true });
+    reviewSwitchToggle()
+      .then(() => {
+        this.setState({
+          switch: !this.state.switch,
+          message: { type: 'success', open: true, text: '切换成功' },
+          loading: false,
+        });
+      })
+      .catch(({ response: { data = { message: '获取配置失败，请刷新页面重试' } } = {} }) => {
+        this.setState({
+          loading: false,
+          message: { type: 'error', open: true, text: data }
+        })
+      });
+  }
+
+  handleCloseMessage = () => this.setState({message: {
+    ...this.state.message,
+    open: false
+  }})
+
   render() {
+    let { classes } = this.props;
+
     return (
-      <div>Settings.</div>
+      <div>
+        <HeaderBar />
+        <Paper className={classes.paper}>
+          <FormControl component="fieldset">
+            <FormLabel component="legend">话题是否开启审核？</FormLabel>
+            <div className={classes.control}>
+              <span>开关:</span>
+              <Switch
+                checked={this.state.switch}
+                onChange={this.handleToggleReviewSwitch}
+                disabled={this.state.loading}
+              />
+              {this.state.loading && <CircularProgress size={24} />}
+            </div>
+            <FormHelperText>当开关处于开启状态时，所有创建动态话题的地方均会进入等待审核状态，如果处于关闭状态，用户创建的话题将自动进入通过状态。</FormHelperText>
+          </FormControl>
+        </Paper>
+        <Snackbar
+          open={this.state.message.open}
+          message={this.state.message.text}
+          type={this.state.message.type}
+          onClose={this.handleCloseMessage}
+        />
+      </div>
     );
   }
 }
 
-export default Settings;
+export default withStyles(styles)(Settings);
diff --git a/packages/slimkit-plus-feed/admin/pages/topic/index.jsx b/packages/slimkit-plus-feed/admin/pages/topic/index.jsx
@@ -13,7 +13,6 @@ class Topic extends React.Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired
-    // match: PropTypes.object.isRequired
   };
 
   render() {

diff --git a/packages/slimkit-plus-feed/admin/pages/topic/modules/SettingsHeaderBar.jsx b/packages/slimkit-plus-feed/admin/pages/topic/modules/SettingsHeaderBar.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import withStyles from '@material-ui/core/styles/withStyles';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+import ContentHeaderBar from '../../../components/common/ContentHeaderBar';
+
+// Icons
+import UndoIcon from '@material-ui/icons/Undo';
+
+import headerBarButtonStyleCreator from './HeaderBarRightButtonCommon.style';
+const styles = theme => ({
+  headerBarButton: headerBarButtonStyleCreator(theme),
+});
+
+class SettingHeaderBar extends React.Component {
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired
+  }
+
+  render() {
+    let { classes } = this.props;
+
+    return (
+      <ContentHeaderBar title="设置" breadcrumbs={['动态', '话题']}>
+        <Tooltip title="返回列表">
+          <Button
+            className={classes.headerBarButton}
+            variant="fab"
+            mini={true}
+            component={Link}
+            to="/topic"
+          >
+            <UndoIcon />
+          </Button>
+        </Tooltip>
+      </ContentHeaderBar>
+    );
+  }
+}
+
+export default withStyles(styles)(SettingHeaderBar);
diff --git a/packages/slimkit-plus-feed/routes/new-admin.php b/packages/slimkit-plus-feed/routes/new-admin.php
@@ -27,4 +27,6 @@
     $route->put('topics/{topic}', \Zhiyi\Plus\Packages\Feed\Admin\Controllers\Topic::class.'@update');
     $route->delete('topics/{topic}', \Zhiyi\Plus\Packages\Feed\Admin\Controllers\Topic::class.'@destroy');
     $route->put('topics/{topic}/hot-toggle', \Zhiyi\Plus\Packages\Feed\Admin\Controllers\Topic::class.'@hotToggle');
+    $route->get('topic-review-switch-toggle', \Zhiyi\Plus\Packages\Feed\Admin\Controllers\Topic::class.'@getReviewSwitch');
+    $route->put('topic-review-switch-toggle', \Zhiyi\Plus\Packages\Feed\Admin\Controllers\Topic::class.'@reviewSwitchToggle');
 });
diff --git a/packages/slimkit-plus-feed/src/Admin/Controllers/Topic.php b/packages/slimkit-plus-feed/src/Admin/Controllers/Topic.php
@@ -20,11 +20,13 @@
 
 namespace Zhiyi\Plus\Packages\Feed\Admin\Controllers;
 
+use Illuminate\Http\Response;
 use Illuminate\Support\Carbon;
 use Illuminate\Http\JsonResponse;
 use Zhiyi\Plus\Models\FeedTopic as TopicModel;
 use Zhiyi\Plus\API2\Controllers\Feed\Topic as Controller;
 use Zhiyi\Plus\Packages\Feed\Admin\Requests\ListAllTopics as ListTopicsRequest;
+use function Zhiyi\Plus\setting;
 
 class Topic extends Controller
 {
@@ -81,4 +83,19 @@ public function destroy(TopicModel $topic)
             return response('', 204);
         });
     }
+
+    public function getReviewSwitch(): JsonResponse
+    {
+        return new JsonResponse([
+            'switch' => (bool) setting('feed', 'topic:need-review', false)
+        ], JsonResponse::HTTP_OK);
+    }
+
+    public function reviewSwitchToggle(): Response
+    {
+        $setting = setting('feed');
+        $setting->set('topic:need-review', ! $setting->get('topic:need-review'));
+
+        return new Response('', 204);
+    }
 }