From a2dd7529df0c1eaeddc8ce88aaab5e0db2b245f7 Mon Sep 17 00:00:00 2001
From: ruanhan1988 <2856197796@qq.com>
Date: Fri, 12 Jun 2020 18:43:54 +0800
Subject: [PATCH] fix origanzation three fields

---
 .../Organizations/Organization.less           |   7 +
 .../containers/Organizations/Organization.tsx |  31 +++-
 .../Organizations/component/Project.tsx       |   8 +-
 .../Organizations/component/ProjectList.tsx   |   7 +-
 .../Organizations/component/RoleList.tsx      |  28 ++-
 .../Organizations/component/Setting.tsx       |  35 +---
 .../Organizations/component/TeamForm.tsx      | 166 ------------------
 webapp/app/containers/Organizations/types.ts  |   2 +
 8 files changed, 58 insertions(+), 226 deletions(-)
 delete mode 100644 webapp/app/containers/Organizations/component/TeamForm.tsx

diff --git a/webapp/app/containers/Organizations/Organization.less b/webapp/app/containers/Organizations/Organization.less
index 2db45c24c..d87a4864b 100644
--- a/webapp/app/containers/Organizations/Organization.less
+++ b/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;
diff --git a/webapp/app/containers/Organizations/Organization.tsx b/webapp/app/containers/Organizations/Organization.tsx
index ea78812f6..4706cf8a8 100644
--- a/webapp/app/containers/Organizations/Organization.tsx
+++ b/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)),
diff --git a/webapp/app/containers/Organizations/component/Project.tsx b/webapp/app/containers/Organizations/component/Project.tsx
index 380728626..65017f308 100644
--- a/webapp/app/containers/Organizations/component/Project.tsx
+++ b/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>
diff --git a/webapp/app/containers/Organizations/component/ProjectList.tsx b/webapp/app/containers/Organizations/component/ProjectList.tsx
index c7ddd9b29..a761b64ee 100644
--- a/webapp/app/containers/Organizations/component/ProjectList.tsx
+++ b/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
 )
diff --git a/webapp/app/containers/Organizations/component/RoleList.tsx b/webapp/app/containers/Organizations/component/RoleList.tsx
index 6977966a7..5398a96cf 100644
--- a/webapp/app/containers/Organizations/component/RoleList.tsx
+++ b/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)
 
 
diff --git a/webapp/app/containers/Organizations/component/Setting.tsx b/webapp/app/containers/Organizations/component/Setting.tsx
index f29d36a3c..2d20ee90d 100644
--- a/webapp/app/containers/Organizations/component/Setting.tsx
+++ b/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)
 
 
 
diff --git a/webapp/app/containers/Organizations/component/TeamForm.tsx b/webapp/app/containers/Organizations/component/TeamForm.tsx
deleted file mode 100644
index 665ec9d34..000000000
--- a/webapp/app/containers/Organizations/component/TeamForm.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-/*
- * <<
- * Davinci
- * ==
- * Copyright (C) 2016 - 2017 EDP
- * ==
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * >>
- */
-
-import React from 'react'
-import { Form, Row, Col, Input, Button, Select } from 'antd'
-const FormItem = Form.Item
-const TextArea = Input.TextArea
-const Option = Select.Option
-import Avatar from 'components/Avatar'
-const styles = require('../Organization.less')
-import { ITeam } from './RoleList'
-
-
-
-interface IProjectsFormProps {
-  listType: string
-  type: string
-  form: any
-  orgId: number
-  teams: ITeam[]
-  modalLoading: boolean
-  onModalOk: () => any
-  onWidgetTypeChange: () => any
-  onOrganizationTypeChange: () => any
-  onCheckUniqueName: (pathname: any, data: any, resolve: () => any, reject: (error: string) => any) => any
-}
-
-export class ProjectsForm extends React.PureComponent<IProjectsFormProps, {}> {
-  private filterTeamsByOrg = (teams) => {
-    if (teams) {
-      const { orgId } = this.props
-      const result =  teams.filter((team) => {
-        if (team.organization.id === orgId) {
-          return team
-        }
-      })
-      return result
-    }
-  }
-  public render () {
-    const { onOrganizationTypeChange, modalLoading, teams, listType } = this.props
-    const { getFieldDecorator } = this.props.form
-
-    const filterTeams = this.filterTeamsByOrg(teams)
-    const teamsOptions = filterTeams ? filterTeams.map((o) => (
-      <Option key={o.id} value={`${o.id}`} className={styles.selectOption}>
-        <div className={styles.title}>
-          <span className={styles.owner}>{o.name}</span>
-        </div>
-        {`${o.id}` !== this.props.form.getFieldValue('parentTeamId')
-          ? (<Avatar size="small" path={o.avatar}/>)
-          : ''}
-      </Option>
-    )) : ''
-
-    const commonFormItemStyle = {
-      labelCol: { span: 3 },
-      wrapperCol: { span: 24 }
-    }
-
-    const modalButtons = [(
-      <Button
-        key="submit"
-        type="primary"
-        loading={modalLoading}
-        disabled={modalLoading}
-        onClick={this.props.onModalOk}
-      >
-        保 存
-      </Button>
-    )]
-    return (
-      <div className={styles.formWrapper}>
-        <div className={styles.header}>
-          <div className={styles.title}>
-            创建团队
-          </div>
-          <div className={styles.desc}>
-            团队隶属于组织，可以在团队中指定项目的模块权限
-          </div>
-        </div>
-        <div className={styles.body}>
-          <Form>
-            <Row gutter={8}>
-              <Col span={24}>
-                <FormItem label="名称" {...commonFormItemStyle}>
-                  {getFieldDecorator('name', {
-                    rules: [{
-                      required: true,
-                      message: 'Name 不能为空'
-                    }, {
-                      validator: this.props.onCheckUniqueName
-                    }]
-                  })(
-                    <Input placeholder="Name" />
-                  )}
-                </FormItem>
-              </Col>
-              <Col span={24}>
-                <FormItem label="描述" {...commonFormItemStyle}>
-                  {getFieldDecorator('description', {
-                    initialValue: ''
-                  })(
-                    <TextArea
-                      placeholder="Description"
-                      autosize={{minRows: 2, maxRows: 6}}
-                    />
-                  )}
-                </FormItem>
-              </Col>
-              <Col span={24}>
-                <FormItem label="上级" {...commonFormItemStyle}>
-                  {getFieldDecorator('parentTeamId', {
-                    initialValue: ''
-                  })(
-                    <Select
-                      placeholder="Please select a team"
-                      onChange={onOrganizationTypeChange}
-                      disabled={listType === 'teamTeamList' ? true : false}
-                    >
-                      {teamsOptions}
-                    </Select>
-                  )}
-                </FormItem>
-              </Col>
-              {/* <Col span={24}>
-                <FormItem label="" {...commonFormItemStyle}>
-                  {getFieldDecorator('visibility', {
-                    initialValue: ''
-                  })(
-                    <RadioGroup>
-                      <Radio value="0" className={styles.radioStyle}>授权（只对该团队成员可见）</Radio>
-                      <Radio value="1" className={styles.radioStyle}>公开 <Tag>推荐</Tag>（对该组织内所有成员可见）</Radio>
-                    </RadioGroup>
-                  )}
-                </FormItem>
-              </Col> */}
-            </Row>
-          </Form>
-        </div>
-        <div className={styles.footer}>
-          {modalButtons}
-        </div>
-      </div>
-    )
-  }
-}
-
-export default Form.create()(ProjectsForm)
diff --git a/webapp/app/containers/Organizations/types.ts b/webapp/app/containers/Organizations/types.ts
index 004be4da0..a2c393d07 100644
--- a/webapp/app/containers/Organizations/types.ts
+++ b/webapp/app/containers/Organizations/types.ts
@@ -186,6 +186,7 @@ export interface IOrganizationProps {
   inviteMemberList: any
   currentOrganization: IOrganization
   collectProjects: IProject[]
+  currentOrganizationRole: IOrganizationRole[]
   onLoadOrganizationProjects: (param: {id: number, pageNum?: number, pageSize?: number}) => any
   onLoadOrganizationMembers: (id: number) => any
   onLoadOrganizationDetail: (id: number) => any
@@ -202,6 +203,7 @@ export interface IOrganizationProps {
   onDeleteOrganization: (id: number, resolve: () => any) => any
   onCheckUniqueName: (pathname: any, data: any, resolve: () => any, reject: (error: string) => any) => any
   onGetRoleListByMemberId: onGetRoleListByMemberId
+  onLoadOrganizationRole: (id: number) => any
 }
 
 export interface IInviteMemberProps {