Merge pull request #317 from yuhouchuhe1/ts

source/view/dashboard portal authorization

webapp/app/containers/Bizlogic/Bizlogic.less

@@ -118,17 +118,11 @@
             width: 100%;
             padding-bottom: 30px;
           }
+          // .ant-tree > li:first-child {
+          //   padding-top: 0 !important;
+          // }
         }
       }
-      // .fromSqlAlert {
-      //   margin-top: 10px;
-      //   .sqlAlertText {
-      //     a {
-      //       top: 0 !important;
-      //       padding-bottom: 22px !important;
-      //     }
-      //   }
-      // }
       .sqlAlertText {
         margin-right: 16px;
         a {
@@ -165,8 +159,12 @@
   display: flex;
   direction: row;
   .teamTreeTitle {
-    width: 100px;
-    flex-shrink: 0
+    width: 130px;
+    flex-shrink: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-right: 25px;
   }
   .teamInput {
     width: 90px;
@@ -190,6 +188,3 @@
   margin-right: 50px;
   margin-top: -10px;
 }
-
-
-

webapp/app/containers/Bizlogic/Bizlogic.tsx

@@ -807,12 +807,13 @@ export class Bizlogic extends React.Component<IBizlogicFormProps, IBizlogicFormS
     this.setState({ selectedKeys })
   }
 
-  private renderTreeNodes = (data) => {
+  private renderTreeNodes = (data, depth = 0) => {
     return data.map((item) => {
       const { listData, teamParams } = this.state
       const currentItem = listData.find((ld) => ld.id === item.id)
       const treeTitle = (
         <TeamTreeAction
+          depth={depth}
           onTeamParamChange={this.onTeamParamChange}
           teamParams={teamParams}
           currentItem={currentItem}
@@ -821,11 +822,11 @@ export class Bizlogic extends React.Component<IBizlogicFormProps, IBizlogicFormS
       if (item.children) {
         return (
           <TreeNode key={item.id} title={treeTitle} dataRef={item}>
-            {this.renderTreeNodes(item.children)}
+            {this.renderTreeNodes(item.children, depth + 1)}
           </TreeNode>
         )
       }
-      return <TreeNode key={item.id} title={treeTitle} />
+      return <TreeNode key={item.id} title={treeTitle} className={styles.test} />
     })
   }
 
@@ -1096,7 +1097,7 @@ export class Bizlogic extends React.Component<IBizlogicFormProps, IBizlogicFormS
           <Col span={24} className={styles.treeSearch}>
             <Search
               className={styles.searchSource}
-              placeholder="Search Source"
+              placeholder="Search the Source"
               onChange={this.searchSchema}
             />
           </Col>

webapp/app/containers/Bizlogic/TeamTreeAction.tsx

@@ -23,6 +23,7 @@ const Input = require('antd/lib/input')
 const styles = require('./Bizlogic.less')
 
 interface ITeamTreeActionProps {
+  depth: number
   currentItem: {
     id: number,
     name: string,
@@ -43,6 +44,7 @@ export class TeamTreeAction extends React.PureComponent<ITeamTreeActionProps, {}
 
   public render () {
     const {
+      depth,
       currentItem,
       teamParams,
       onTeamParamChange
@@ -63,10 +65,11 @@ export class TeamTreeAction extends React.PureComponent<ITeamTreeActionProps, {}
           )
       })
 
+    const titleWidth = `${-18 * depth}px`
     return (
       <div className={styles.teamTree}>
-        <span className={styles.teamTreeTitle}>{currentItem.name}</span>
-        {paramsInput}
+        <span className={styles.teamTreeTitle} title={currentItem.name}>{currentItem.name}</span>
+        <span style={{ marginLeft: titleWidth }}>{paramsInput}</span>
       </div>
     )
   }

webapp/app/containers/Bizlogic/index.tsx

@@ -48,13 +48,17 @@ import { loadBizlogics, deleteBizlogic } from './actions'
 import { makeSelectBizlogics, makeSelectTableLoading } from './selectors'
 const utilStyles = require('../../assets/less/util.less')
 import { makeSelectLoginUser } from '../App/selectors'
+import {makeSelectCurrentProject} from '../Projects/selectors'
+import ModulePermission from '../Account/components/checkModulePermission'
+import {IProject} from '../Projects'
 
 interface IBizlogicsProps  {
   params: any
   bizlogics: boolean | any[]
   loginUser: object
   tableLoading: false
   router: InjectedRouter
+  currentProject: IProject
   onLoadBizlogics: (projectId: number, resolve?: any) => any
   onDeleteBizlogic: (id: number) => any
 }
@@ -154,9 +158,13 @@ export class Bizlogics extends React.PureComponent<IBizlogicsProps, IBizlogicsSt
 
     const {
       onDeleteBizlogic,
-      tableLoading
+      tableLoading,
+      currentProject
     } = this.props
 
+    const AdminButton = ModulePermission(currentProject, 'view', true)(Button)
+    const EditButton = ModulePermission(currentProject, 'view', false)(Button)
+
     const columns = [{
       title: '名称',
       dataIndex: 'name',
@@ -190,15 +198,15 @@ export class Bizlogics extends React.PureComponent<IBizlogicsProps, IBizlogicsSt
       render: (text, record) => (
         <span className="ant-table-action-column">
           <Tooltip title="修改">
-            <Button icon="edit" shape="circle" type="ghost" onClick={this.showDetail(record.id)} />
+            <EditButton icon="edit" shape="circle" type="ghost" onClick={this.showDetail(record.id)} />
           </Tooltip>
           <Popconfirm
             title="确定删除？"
             placement="bottom"
             onConfirm={onDeleteBizlogic(record.id)}
           >
             <Tooltip title="删除">
-              <Button icon="delete" shape="circle" type="ghost" />
+              <AdminButton icon="delete" shape="circle" type="ghost" />
             </Tooltip>
           </Popconfirm>
         </span>
@@ -233,7 +241,7 @@ export class Bizlogics extends React.PureComponent<IBizlogicsProps, IBizlogicsSt
               </Box.Title>
               <Box.Tools>
                 <Tooltip placement="bottom" title="新增">
-                  <Button type="primary" icon="plus" onClick={this.showAdd} />
+                  <AdminButton type="primary" icon="plus" onClick={this.showAdd} />
                 </Tooltip>
               </Box.Tools>
             </Box.Header>
@@ -268,7 +276,8 @@ export function mapDispatchToProps (dispatch) {
 const mapStateToProps = createStructuredSelector({
   bizlogics: makeSelectBizlogics(),
   loginUser: makeSelectLoginUser(),
-  tableLoading: makeSelectTableLoading()
+  tableLoading: makeSelectTableLoading(),
+  currentProject: makeSelectCurrentProject()
 })
 
 const withConnect = connect(mapStateToProps, mapDispatchToProps)

webapp/app/containers/Dashboard/components/DashboardAction.tsx

@@ -24,8 +24,10 @@ const Tooltip = require('antd/lib/tooltip')
 const Popover = require('antd/lib/popover')
 const Popconfirm = require('antd/lib/popconfirm')
 const styles = require('../Dashboard.less')
+import {IProject} from '../../Projects'
 
 interface IDashboardActionProps {
+  currentProject: IProject
   depth: number
   item: {
     id: number,
@@ -41,6 +43,7 @@ interface IDashboardActionProps {
 export class DashboardAction extends React.PureComponent<IDashboardActionProps, {}> {
   public render () {
     const {
+      currentProject,
       depth,
       item,
       actionItemVisible,
@@ -49,7 +52,7 @@ export class DashboardAction extends React.PureComponent<IDashboardActionProps,
       initChangeDashboard
     } = this.props
 
-    const ulAction = (
+    const ulActionAll = (
       <ul className={styles.menu}>
         <li onClick={onInitOperateMore(item.id, 'edit')}>
           <Icon type="edit" /> 编辑
@@ -61,7 +64,18 @@ export class DashboardAction extends React.PureComponent<IDashboardActionProps,
           <Icon type="swap" className={styles.swap} /> 移动
         </li>
         <li onClick={onInitOperateMore(item.id, 'delete')}>
-            <Icon type="delete" /> 删除
+          <Icon type="delete" /> 删除
+        </li>
+      </ul>
+    )
+
+    const ulActionPart = (
+      <ul className={styles.menu}>
+        <li onClick={onInitOperateMore(item.id, 'edit')}>
+          <Icon type="edit" /> 编辑
+        </li>
+        <li onClick={onInitOperateMore(item.id, 'move')}>
+          <Icon type="swap" className={styles.swap} /> 移动
         </li>
       </ul>
     )
@@ -74,28 +88,39 @@ export class DashboardAction extends React.PureComponent<IDashboardActionProps,
       />
     )
 
+    let ulPopover
+    if (currentProject && currentProject.permission) {
+      const currentPermission = currentProject.permission.vizPermission
+      if (currentPermission === 0 || currentPermission === 1) {
+        ulPopover = null
+      } else {
+        ulPopover = (
+          <Popover
+            placement="bottomRight"
+            content={currentPermission === 2 ? ulActionPart : ulActionAll}
+            trigger="click"
+            visible={actionItemVisible}
+            onVisibleChange={onHandleVisibleChange}
+          >
+            {icon}
+          </Popover>)
+      }
+    }
+
     const titleWidth = `${130 - 18 * depth}px`
 
     return (
       <span className={styles.portalTreeItem}>
         <Tooltip placement="right" title={`名称：${item.name}`}>
           {
             item.type === 0
-              ? <h4 className={styles.protalTitle} style={{ width: titleWidth}}>{item.name}</h4>
+              ? <h4 className={styles.protalTitle} style={{ width: titleWidth }}>{item.name}</h4>
               : <span style={{width: titleWidth}} onClick={initChangeDashboard(item.id)} className={styles.dashboardTitle}>
                   <Icon type="dot-chart" />
                   <span className={styles.itemName}>{item.name}</span>
                 </span>
           }
-          <Popover
-            placement="bottomRight"
-            content={ulAction}
-            trigger="click"
-            visible={actionItemVisible}
-            onVisibleChange={onHandleVisibleChange}
-          >
-            {icon}
-          </Popover>
+          {ulPopover}
         </Tooltip>
       </span>
     )

webapp/app/containers/Dashboard/index.tsx

@@ -66,13 +66,17 @@ import { listToTree, findFirstLeaf } from './components/localPositionUtil'
 const utilStyles = require('../../assets/less/util.less')
 const styles = require('./Dashboard.less')
 const widgetStyles = require('../Widget/Widget.less')
+import {makeSelectCurrentProject} from '../Projects/selectors'
+import ModulePermission from '../Account/components/checkModulePermission'
+import {IProject} from '../Projects'
 
 interface IDashboardProps {
   modalLoading: boolean
   dashboards: IDashboard[]
   loginUser: { id: number, admin: boolean }
   router: InjectedRouter
   params: any
+  currentProject: IProject
   onLoadDashboards: (portalId: number, resolve: any) => void
   onAddDashboard: (dashboard: IDashboard, resolve: any) => any
   onEditDashboard: (type: string, dashboard: IDashboard[], resolve: any) => void
@@ -523,7 +527,8 @@ export class Dashboard extends React.Component<IDashboardProps, IDashboardStates
       dashboards,
       loginUser,
       modalLoading,
-      children
+      children,
+      currentProject
     } = this.props
 
     const {
@@ -582,6 +587,7 @@ export class Dashboard extends React.Component<IDashboardProps, IDashboardStates
     const loop = (data, depth = 0) => data.map((item) => {
       const dashboardAction = (
         <DashboardAction
+          currentProject={currentProject}
           depth={depth}
           item={item}
           onInitOperateMore={this.onOperateMore}
@@ -601,6 +607,16 @@ export class Dashboard extends React.Component<IDashboardProps, IDashboardStates
       return <TreeNode icon={<Icon type="smile-o" />} key={item.id} title={dashboardAction} />
     })
 
+    const AdminIcon = ModulePermission(currentProject, 'viz', true)(Icon)
+
+    let isTreeDraggable
+    if (currentProject && currentProject.permission) {
+      const currentPermission = currentProject.permission.vizPermission
+      isTreeDraggable = (currentPermission === 0 || currentPermission === 1) ? false : true
+    } else {
+      isTreeDraggable = false
+    }
+
     return (
       <div className={styles.portal}>
         <Helmet title={params.portalName} />
@@ -640,7 +656,7 @@ export class Dashboard extends React.Component<IDashboardProps, IDashboardStates
                   </Tooltip>
                 </Popover>
                 <Tooltip placement="top" title="新增">
-                  <Icon
+                  <AdminIcon
                     type="plus"
                     className={styles.plus}
                     onClick={this.onAddItem}
@@ -667,13 +683,11 @@ export class Dashboard extends React.Component<IDashboardProps, IDashboardStates
             { dashboardData.length
               ? <div  className={styles.portalTreeNode}>
                 <Tree
-                  // showIcon
-                  // showLine
                   onExpand={this.onExpand}
                   expandedKeys={this.state.expandedKeys}
                   autoExpandParent={this.state.autoExpandParent}
                   selectedKeys={[this.props.params.dashboardId]}
-                  draggable
+                  draggable={isTreeDraggable}
                   onDrop={this.onDrop}
                 >
                 {loop(dashboardData)}
@@ -718,7 +732,8 @@ export class Dashboard extends React.Component<IDashboardProps, IDashboardStates
 const mapStateToProps = createStructuredSelector({
   dashboards: makeSelectDashboards(),
   loginUser: makeSelectLoginUser(),
-  modalLoading: makeSelectModalLoading()
+  modalLoading: makeSelectModalLoading(),
+  currentProject: makeSelectCurrentProject()
 })
 
 export function mapDispatchToProps (dispatch) {

webapp/app/containers/Schedule/index.tsx

@@ -66,7 +66,7 @@ interface IScheduleProps {
   dashboards: boolean | any[]
   tableLoading: boolean
   formLoading: boolean
-  currentProject: IProject[]
+  currentProject: IProject
   onAddSchedule: (param: object, resolve: any) => any
   onLoadWidgets: (pid: number) => any
   onLoadSchedules: (pid: number) => any