feat: Add new review pages for admin and ISV (#591)

openpitrix · Dec 20, 2018 · aa5f664 · aa5f664
1 parent 879a69e
commit aa5f664
Show file tree

Hide file tree

Showing 24 changed files with 1,215 additions and 138 deletions.
diff --git a/src/components/AppName/index.jsx b/src/components/AppName/index.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import classnames from 'classnames';
+import { translate } from 'react-i18next';
+
+import { Image } from 'components/Base';
+import styles from './index.scss';
+
+@translate()
+export default class AppName extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    icon: PropTypes.string,
+    linkUrl: PropTypes.string,
+    name: PropTypes.string,
+    type: PropTypes.string,
+    versionName: PropTypes.string
+  };
+
+  render() {
+    const {
+      className, icon, name, linkUrl, type, versionName
+    } = this.props;
+
+    return (
+      <div className={classnames(styles.appName, className)}>
+        <span className={styles.image}>
+          <Image src={icon} iconLetter={name} iconSize={40} />
+        </span>
+
+        <span className={styles.info}>
+          {linkUrl ? (
+            <Link to={linkUrl} title={name} className={styles.name}>
+              {name}
+            </Link>
+          ) : (
+            <div title={name} className={styles.name}>
+              {name}
+            </div>
+          )}
+
+          {Boolean(type || versionName) && (
+            <div className={styles.description}>
+              <span className={styles.type}>{type}</span>
+              &nbsp;/&nbsp;<span className={styles.versionName}>
+                {versionName}
+              </span>
+            </div>
+          )}
+        </span>
+      </div>
+    );
+  }
+}
diff --git a/src/components/AppName/index.scss b/src/components/AppName/index.scss
@@ -0,0 +1,48 @@
+@import '~scss/vars';
+
+.appName {
+  display: inline-block;
+  .image {
+    display: inline-block;
+    float: left;
+    margin-right: 8px;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      vertical-align: middle;
+    }
+  }
+
+  .info {
+    display: inline-block;
+    line-height: 20px;
+    font-size: 12px;
+
+    .name {
+      width: 120px;
+      color: $N500;
+      font-weight: 500;
+      width: 130px;
+      @include textCut;
+    }
+
+    a:hover {
+      color: $link-hover;
+    }
+
+    .description {
+      .type {
+        color: $N300;
+        font-weight: 500;
+      }
+
+      .versionName {
+        color: $N300;
+      }
+    }
+  }
+}
diff --git a/src/components/DetailTabs/index.jsx b/src/components/DetailTabs/index.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { noop } from 'lodash';
+import _, { noop } from 'lodash';
 import { translate } from 'react-i18next';
 
 import styles from './index.scss';
@@ -28,8 +28,11 @@ export default class DetailTabs extends Component {
   constructor(props) {
     super(props);
 
+    const curTabValue = _.isObject(props.tabs[0])
+      ? props.tabs[0].value
+      : props.tabs[0];
     this.state = {
-      curTab: props.defaultTab || props.tabs[0]
+      curTab: props.defaultTab || curTabValue
     };
   }
 
@@ -48,7 +51,11 @@ export default class DetailTabs extends Component {
   }
 
   handleChange = tab => {
-    this.setState({ curTab: tab });
+    const tabValue = _.isObject(tab) ? tab.value : tab;
+
+    if (!tab.isDisabled) {
+      this.setState({ curTab: tabValue });
+    }
   };
 
   render() {
@@ -65,13 +72,16 @@ export default class DetailTabs extends Component {
           className
         )}
       >
-        {tabs.map((tab, idx) => (
+        {tabs.map(tab => (
           <label
-            className={classnames({ [styles.active]: tab === curTab })}
-            key={idx}
+            className={classnames({
+              [styles.active]: (tab.value || tab) === curTab,
+              [styles.disabled]: tab.isDisabled
+            })}
+            key={tab.value || tab}
             onClick={() => this.handleChange(tab)}
           >
-            {t(tab)}
+            {t(tab.name || tab)}
           </label>
         ))}
       </div>

diff --git a/src/components/DetailTabs/index.scss b/src/components/DetailTabs/index.scss
@@ -20,6 +20,12 @@
       color: $P75;
       border-bottom: 1px solid $P75;
     }
+
+    &.disabled {
+      color: $N100;
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
   }
 }
 

diff --git a/src/components/Layout/SideNav/index.jsx b/src/components/Layout/SideNav/index.jsx
@@ -25,14 +25,16 @@ const keys = [
   'categories',
   'category',
   'user',
-  'create'
+  'create',
+  'provider'
 ];
 const changeKey = {
   review: 'app',
   cluster: 'repo',
   runtime: 'repo',
   categories: 'app',
-  category: 'app'
+  category: 'app',
+  applications: 'provider'
 };
 
 @translate()

diff --git a/src/components/Layout/SideNav/navMap.js b/src/components/Layout/SideNav/navMap.js
@@ -7,7 +7,7 @@ export const subNavMap = {
     title: 'Store',
     links: [
       { name: 'All Apps', link: '/dashboard/apps', active: '/app' },
-      { name: 'App Reviews', link: '/dashboard/reviews', active: 'review' },
+      { name: 'App Reviews', link: '/dashboard/app-reviews', active: 'review' },
       { name: 'Categroies', link: '/dashboard/categories', active: 'categor' }
       /* { name: 'Appearance', link: '#', active: 'appearance' } */
     ]
@@ -30,6 +30,19 @@ export const subNavMap = {
       { name: 'All Clusters', link: '/dashboard/clusters', active: 'cluster' }
       /* { name: 'Service Status', link: '#', active: 'service' } */
     ]
+  },
+  provider: {
+    title: 'App service provider',
+    links: [
+      { name: '全部服务商', link: '/dashboard/providers', active: 'providers' },
+      {
+        name: '入驻申请',
+        link: '/dashboard/applications',
+        active: 'applications'
+      },
+      { name: '合约', link: '#', active: '#' },
+      { name: '保证金', link: '#', active: '#' }
+    ]
   }
 };
 
@@ -48,10 +61,10 @@ export const getNavs = {
       title: 'App Store'
     },
     {
-      link: '/dashboard/repos',
+      link: '/dashboard/providers',
       iconName: 'shield',
-      active: 'repo',
-      title: 'App service provider ISV'
+      active: 'provider',
+      title: 'App service provider'
     },
     {
       link: '#',

diff --git a/src/locales/zh/apps.json b/src/locales/zh/apps.json
@@ -151,19 +151,21 @@
   "APP_DELIVERY_MODES_EXPLAIN": "每个应用可支持多种交付方式，每种交付方式的版本是相互独立的。",
   "Not added": "未添加",
   "optional": "可选",
-  "fileConfig": "配置文件",
-  "setPrice": "定价",
-  "updateLog": "更新日志",
+  "Config File": "配置文件",
+  "Set Price": "定价",
+  "Update Log": "更新日志",
 
   "Test Runtime": "测试环境",
   "Instance Name ID": "实例名称 ID",
   "Create Time": "创建时间",
+
   "App Info": "应用信息",
   "Base Info": "基本信息",
   "Instructions": "使用说明",
   "Terms of service": "服务条款",
   "Select file": "选择文件",
 
-  "Preview": "预览"
-
+  "Preview": "预览",
+  "Processed": "已处理",
+  "Unprocessed": "未处理"
 }
diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json
@@ -389,7 +389,7 @@
 
   "QingCloud App Center": "QingCloud 应用中心",
   "My dashboard": "我的工作台",
-  "App service provider ISV": "应用服务商ISV",
+  "App service provider": "应用服务商",
   "Work list": "工单",
   "Financial Center": "财务中心",
   "Message and monitoring": "消息与监控",

diff --git a/src/pages/Dashboard/Audit/index.jsx b/src/pages/Dashboard/Audit/index.jsx