fix origanzation three fields

webapp/app/containers/Organizations/Organization.less

@@ -127,6 +127,7 @@
     width: 260px;
     height: 120px;
     margin-right: 20px;
+    flex-shrink: 0;
     background-color: @body-background;
     background-repeat: no-repeat;
     background-size: 100%;
@@ -143,16 +144,22 @@
     display: flex;
     flex-direction: column;
     .title {
+      max-width: 460px;
       font-size: 18px;
       font-weight: 600;
       margin-bottom: 16px;
       color: @blue;
       cursor: pointer;
+      padding: 0px 58px 0 0;
+      .ellipsis;
     }
     .desc {
       font-size: 12px;
+      max-width: 400px;
       color: @light-text-color;
       margin-bottom: 8px;
+
+      .ellipsis;
     }
     .tag {
       margin-bottom: 8px;

webapp/app/containers/Organizations/Organization.tsx

@@ -23,6 +23,7 @@ import {
   makeSelectCurrentOrganizations,
   makeSelectCurrentOrganizationProjects,
   makeSelectCurrentOrganizationProjectsDetail,
+  makeSelectCurrentOrganizationRole,
   makeSelectCurrentOrganizationMembers,
   makeSelectInviteMemberList
 } from './selectors'
@@ -53,11 +54,13 @@ export class Organization extends React.PureComponent <IOrganizationProps & Rout
     const {
       onLoadOrganizationMembers,
       onLoadOrganizationDetail,
+      onLoadOrganizationRole,
       match
     } = this.props
     const organizationId = +match.params.organizationId
     onLoadOrganizationMembers(organizationId)
     onLoadOrganizationDetail(organizationId)
+    onLoadOrganizationRole(organizationId)
   }
 
   private deleteOrganization = (id) => {
@@ -71,22 +74,34 @@ export class Organization extends React.PureComponent <IOrganizationProps & Rout
     this.props.onEditOrganization(organization)
   }
 
+  private getRolesTotal (): number {
+    const { currentOrganizationRole } = this.props
+    return Array.isArray(currentOrganizationRole) ? currentOrganizationRole.length : 0
+  }
+
+  private getProjectsTotal () {
+    const { currentOrganizationProjects } = this.props
+    return Array.isArray(currentOrganizationProjects) ? currentOrganizationProjects.length : 0
+  }
+
+  private getMembersTotal () {
+    const { currentOrganizationMembers } = this.props
+    return Array.isArray(currentOrganizationMembers) ? currentOrganizationMembers.length : 0
+  }
+
   public render () {
     const {
       loginUser,
       organizations,
       currentOrganization,
-      currentOrganizationProjects,
       currentOrganizationMembers,
       inviteMemberList,
-      starUserList,
       match: { params: { organizationId } },
       currentOrganizationProjectsDetail
     } = this.props
 
     if (!currentOrganization) { return null }
-    const { avatar, name, memberNum, roleNum} = currentOrganization as IOrganization
-    const projectNum = currentOrganizationProjects && currentOrganizationProjects.length ? currentOrganizationProjects.length : 0
+    const { avatar, name} = currentOrganization as IOrganization
     const memeberOfLoginUser = currentOrganizationMembers && currentOrganizationMembers.find((m) => m.user.id === loginUser.id)
     const isLoginUserOwner = !!memeberOfLoginUser && memeberOfLoginUser.user.role === 1
     return (
@@ -108,7 +123,7 @@ export class Organization extends React.PureComponent <IOrganizationProps & Rout
             <div className={styles.title}>{name}</div>
           </div>
           <Tabs>
-            <TabPane tab={<span><Icon type="api" />项目<span className={styles.badge}>{projectNum}</span></span>} key="projects">
+            <TabPane tab={<span><Icon type="api" />项目<span className={styles.badge}>{this.getProjectsTotal()}</span></span>} key="projects">
               <ProjectList
                 currentOrganization={currentOrganization}
                 organizationId={organizationId}
@@ -118,7 +133,7 @@ export class Organization extends React.PureComponent <IOrganizationProps & Rout
                 organizationMembers={currentOrganizationMembers}
               />
             </TabPane>
-            <TabPane tab={<span><Icon type="user" />成员<span className={styles.badge}>{memberNum}</span></span>} key="members">
+            <TabPane tab={<span><Icon type="user" />成员<span className={styles.badge}>{this.getMembersTotal()}</span></span>} key="members">
               <MemberList
                 loginUser={loginUser}
                 toThatUserProfile={this.toThatTeam}
@@ -134,7 +149,7 @@ export class Organization extends React.PureComponent <IOrganizationProps & Rout
                 onGetRoleListByMemberId={this.props.onGetRoleListByMemberId}
               />
             </TabPane>
-            <TabPane tab={<span><Icon type="usergroup-add" />角色<span className={styles.badge}>{roleNum}</span></span>} key="roles">
+            <TabPane tab={<span><Icon type="usergroup-add" />角色<span className={styles.badge}>{this.getRolesTotal()}</span></span>} key="roles">
               <RoleList
                 isLoginUserOwner={isLoginUserOwner}
                 onLoadOrganizationDetail={this.props.onLoadOrganizationDetail}
@@ -164,6 +179,7 @@ const mapStateToProps = createStructuredSelector({
   organizations: makeSelectOrganizations(),
   inviteMemberList: makeSelectInviteMemberList(),
   currentOrganization: makeSelectCurrentOrganizations(),
+  currentOrganizationRole: makeSelectCurrentOrganizationRole(),
   currentOrganizationMembers: makeSelectCurrentOrganizationMembers(),
   currentOrganizationProjects: makeSelectCurrentOrganizationProjects(),
   currentOrganizationProjectsDetail: makeSelectCurrentOrganizationProjectsDetail()
@@ -173,6 +189,7 @@ export function mapDispatchToProps (dispatch) {
   return {
     onGetProjectStarUser: (id) => dispatch(ProjectActions.getProjectStarUser(id)),
     onLoadOrganizationProjects: (param) => dispatch(OrganizationActions.loadOrganizationProjects(param)),
+    onLoadOrganizationRole: (orgId) => dispatch(OrganizationActions.loadOrganizationRole(orgId)),
     onLoadOrganizationMembers: (id) => dispatch(OrganizationActions.loadOrganizationMembers(id)),
     onLoadOrganizationDetail: (id) => dispatch(OrganizationActions.loadOrganizationDetail(id)),
     onEditOrganization: (organization) => dispatch(OrganizationActions.editOrganization(organization)),

webapp/app/containers/Organizations/component/Project.tsx

@@ -99,6 +99,10 @@ export class ProjectsForm extends React.PureComponent<IProjectsFormProps & FormC
     }
   }
 
+  private substr (str: string) {
+    return  str?.length > 14 ?  `${str.substr(0, 14)}...` : str
+  }
+
   public render () {
     const { type, organizations, modalLoading, onCheckUniqueName } = this.props
     const { getFieldDecorator } = this.props.form
@@ -236,7 +240,7 @@ export class ProjectsForm extends React.PureComponent<IProjectsFormProps & FormC
               <p className={styles.desc}><span className={styles.label}>创建人</span>  <b>{createBy.username}</b></p>
               <p className={styles.button}>
                 <Tooltip title="移交">
-                  <Button type="default" onClick={this.props.showEditProjectForm}>移交 {name}</Button>
+                  <Button type="default" onClick={this.props.showEditProjectForm}>移交 {this.substr(name)}</Button>
                 </Tooltip>
               </p>
             </div>
@@ -254,7 +258,7 @@ export class ProjectsForm extends React.PureComponent<IProjectsFormProps & FormC
                   onConfirm={this.deleteProject(id)}
                 >
                   <Tooltip title="删除">
-                    <Button type="danger"  onClick={this.stopPPG} >删除 {name}</Button>
+                    <Button type="danger"  onClick={this.stopPPG} >删除 {this.substr(name)}</Button>
                   </Tooltip>
                 </Popconfirm>
               </p>

webapp/app/containers/Organizations/component/ProjectList.tsx

@@ -347,7 +347,6 @@ export class ProjectList extends React.PureComponent<
       vizs,
       organizations
     } = this.props
-    const { id: userId } = loginUser
 
     let CreateButton = void 0
     if (currentOrganization) {
@@ -514,7 +513,11 @@ export function mapDispatchToProps(dispatch) {
   }
 }
 
-const withConnect = connect<{}, {}, IProjectsProps>(
+
+type MappedStates = ReturnType<typeof mapStateToProps>
+type MappedDispatches = ReturnType<typeof mapDispatchToProps>
+
+const withConnect = connect<MappedStates, MappedDispatches, IProjectsProps>(
   mapStateToProps,
   mapDispatchToProps
 )

webapp/app/containers/Organizations/component/RoleList.tsx

@@ -4,17 +4,16 @@ import { createStructuredSelector } from 'reselect'
 import RoleForm from './RoleForm'
 import RelRoleMember from './RelRoleMember'
 import { connect } from 'react-redux'
-
+import {FormComponentProps} from 'antd/lib/form'
 import { Row, Col, Tooltip, Button, Input, Table, Modal, Popconfirm, Divider, message} from 'antd'
 import { ColumnProps } from 'antd/lib/table'
 const styles = require('../Organization.less')
-import * as Organization from '../Organization'
 import {checkNameUniqueAction} from 'containers/App/actions'
 import { OrganizationActions } from '../actions'
 const { addRole, loadOrganizationRole, deleteRole, relRoleMember, editRole, getRelRoleMember } = OrganizationActions
 import ComponentPermission from 'containers/Account/components/checkMemberPermission'
 import { makeSelectRoleModalLoading, makeSelectCurrentOrganizationRole } from '../selectors'
-import { IOrganization } from '../types'
+import { IOrganization, IOrganizationRole } from '../types'
 
 interface IRoleState {
   formType: string
@@ -39,7 +38,7 @@ interface IRoleProps {
   onGetRelRoleMember: (id: number, resolve: (result: any) => any) => any
   onLoadOrganizationRole?: (orgId: number) => any
   currentOrganization: IOrganization
-  currentOrganizationRole: any
+  currentOrganizationRole: IOrganizationRole[]
   organizationMembers: any[]
   organizations: any
   roleModalLoading?: boolean
@@ -88,11 +87,6 @@ export class RoleList extends React.PureComponent<IRoleProps, IRoleState> {
     RelRoleMember: (ref) => this.RelRoleMember = ref
   }
 
-  public componentWillMount () {
-    const {onLoadOrganizationRole, currentOrganization: {id}} = this.props
-    onLoadOrganizationRole(id)
-  }
-
   private showRelRoleForm = (flag, roleId?: number) => (e) => {
     const { onGetRelRoleMember } = this.props
     e.stopPropagation()
@@ -189,12 +183,12 @@ export class RoleList extends React.PureComponent<IRoleProps, IRoleState> {
   }
 
   private handleDelete = (roleId) => () => {
-    const {onDeleteRole, onLoadOrganizationRole, currentOrganization: {id}} = this.props
-    onLoadOrganizationRole(id)
+    const {onDeleteRole} = this.props
+    this.loadOrganizationRole()
     if (roleId) {
       onDeleteRole(roleId, () => {
         message.success('删除成功')
-        onLoadOrganizationRole(id)
+        this.loadOrganizationRole()
       })
     }
   }
@@ -222,19 +216,19 @@ export class RoleList extends React.PureComponent<IRoleProps, IRoleState> {
 
   private createOrRole = () =>  {
     const {formType} = this.state
-    const {onAddRole, onEditRole, onLoadOrganizationRole} = this.props
+    const {onAddRole, onEditRole} = this.props
     this.RoleForm.props.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
         const {name, description, id} = values
         const orgId = this.props.currentOrganization.id
         if (formType === 'add') {
           onAddRole(name, description, orgId,  () => {
-            onLoadOrganizationRole(orgId)
+            this.loadOrganizationRole()
             this.hideTeamForm()
           })
         } else {
           onEditRole(name, description, id,  () => {
-            onLoadOrganizationRole(orgId)
+            this.loadOrganizationRole()
             this.hideTeamForm()
           })
         }
@@ -375,6 +369,8 @@ export class RoleList extends React.PureComponent<IRoleProps, IRoleState> {
   }
 }
 
+type MappedStates = ReturnType<typeof mapStateToProps>
+type MappedDispatches = ReturnType<typeof mapDispatchToProps>
 
 const mapStateToProps = createStructuredSelector({
   roleModalLoading: makeSelectRoleModalLoading(),
@@ -393,6 +389,6 @@ export function mapDispatchToProps (dispatch) {
   }
 }
 
-export default connect<{}, {}, IRoleProps>(mapStateToProps, mapDispatchToProps)(RoleList)
+export default connect<MappedStates, MappedDispatches, IRoleProps & FormComponentProps>(mapStateToProps, mapDispatchToProps)(RoleList)
 
 

webapp/app/containers/Organizations/component/Setting.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 const styles = require('../Organization.less')
 import { Button, Input, Form, Row, Col, Radio, Modal } from 'antd'
+import {FormComponentProps} from 'antd/lib/form'
 const FormItem = Form.Item
 const RadioButton = Radio.Button
 import UploadAvatar from 'components/UploadAvatar'
@@ -130,36 +131,6 @@ export class Setting extends React.PureComponent <ISettingProps> {
                     )}
                   </FormItem>
                 </Col>
-                {/*<Col>*/}
-                  {/*<FormItem*/}
-                    {/*label="删除和移交项目"*/}
-                 {/*//   {...commonFormItemStyle}*/}
-                  {/*>*/}
-                    {/*{getFieldDecorator('allowDeleteOrTransferProject', {*/}
-                      {/*initialValue: true*/}
-                    {/*})(*/}
-                      {/*<Radio.Group size="small">*/}
-                        {/*<RadioButton value={false}>禁止</RadioButton>*/}
-                        {/*<RadioButton value={true}>允许</RadioButton>*/}
-                      {/*</Radio.Group>*/}
-                    {/*)}*/}
-                  {/*</FormItem>*/}
-                {/*</Col>*/}
-                {/*<Col>*/}
-                  {/*<FormItem*/}
-                 {/*//   {...commonFormItemStyle}*/}
-                    {/*label="修改项目是否可见"*/}
-                  {/*>*/}
-                    {/*{getFieldDecorator('allowChangeVisibility', {*/}
-                      {/*initialValue: true*/}
-                    {/*})(*/}
-                      {/*<Radio.Group size="small">*/}
-                        {/*<RadioButton value={false}>禁止</RadioButton>*/}
-                        {/*<RadioButton value={true}>允许</RadioButton>*/}
-                      {/*</Radio.Group>*/}
-                    {/*)}*/}
-                  {/*</FormItem>*/}
-                {/*</Col>*/}
                 <Col>
                   <FormItem
                  //   {...commonFormItemStyle}
@@ -171,8 +142,6 @@ export class Setting extends React.PureComponent <ISettingProps> {
                       <Radio.Group size="small">
                         <RadioButton value={0}>不可见任何</RadioButton>
                         <RadioButton value={1}>只可见公开</RadioButton>
-                        {/* <RadioButton value={2}>修改</RadioButton>
-                        <RadioButton value={3}>删除</RadioButton> */}
                       </Radio.Group>
                     )}
                   </FormItem>
@@ -205,7 +174,7 @@ export class Setting extends React.PureComponent <ISettingProps> {
   }
 }
 
-export default Form.create()(Setting)
+export default Form.create<ISettingProps & FormComponentProps>()(Setting)