Skip to content

Commit

Permalink
fix(bug): edp963#1759
Browse files Browse the repository at this point in the history
  • Loading branch information
ruanhan committed Jun 5, 2020
1 parent 80e29a9 commit c925532
Show file tree
Hide file tree
Showing 9 changed files with 192 additions and 149 deletions.
87 changes: 34 additions & 53 deletions webapp/app/components/StarPanel/Star.tsx
Original file line number Diff line number Diff line change
@@ -1,74 +1,55 @@
import React, {useState, useCallback} from 'react'
import { Modal, Row, Col } from 'antd'
import { IStarUser } from 'containers/Projects/types'
import { IStar, IEvent} from './type'
/*
* <<
* 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 { IStar, IEvent, IStarUserList } from './type'
const styles = require('./Star.less')
import Avatar from 'components/Avatar'
import StarUser from './Staruser'




function stopPPG (e: IEvent) {
function stopPPG(e: IEvent) {
e.stopPropagation()
}

const Star: React.FC<IStar> = ({
proId,
isStar,
unStar,
starNum,
userList,
starUser,
}) => {
const [visible, setVisible] = useState(false)

const toggleModal = useCallback((e: IEvent) => {
stopPPG(e)
setVisible(!visible)
}, [visible])


const Star: React.FC<IStar> & {
StarUser: React.FC<IStarUserList>
} = ({ proId, isStar, unStar, starNum, userList }) => {
return (
<div className={styles.starWrapper} onClick={stopPPG}>
<span onClick={stopPPG}>
<span className={styles.leftWrapper} onClick={unStar(proId)}>
<span className={`iconfont ${isStar ? 'icon-star1' : 'icon-star'}`} style={{fontSize: '12px'}}/>&nbsp;
<span
className={`iconfont ${isStar ? 'icon-star1' : 'icon-star'}`}
style={{ fontSize: '12px' }}
/>
&nbsp;
<span>{isStar ? 'Unstar' : 'star'}</span>
</span>
</span>
<span onClick={toggleModal}>
<span>
<span className={styles.starCount} onClick={userList(proId)}>
{starNum}
</span>
</span>
<Modal
title={null}
visible={visible}
footer={null}
onCancel={toggleModal}
>
<div className={styles.formWrapper}>
<div className={styles.header}>
<div className={styles.title}>
点赞用户
</div>
</div>
<div className={styles.body}>
{
starUser ? starUser.map((user: IStarUser, index) => (
<div className={styles.avatar} key={`star${index}list`}>
<Avatar path={user.avatar} size="small" enlarge={true}/>
<p className={styles.title}>
{user.username}
</p>
</div>
)) : ''
}
</div>
</div>
</Modal>
</div>
)
}

Star.StarUser = StarUser
export default Star
57 changes: 57 additions & 0 deletions webapp/app/components/StarPanel/StarUser.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/*
* <<
* 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 { Modal } from 'antd'
const styles = require('./Star.less')
import { IStarUserList } from './type'
import Avatar from 'components/Avatar'
import { IStarUser } from 'containers/Projects/types'

const StarUsr: React.FC<IStarUserList> = ({
visible,
starUser,
closeUserListModal
}) => {
return (
<Modal title={null} visible={visible} footer={null} onCancel={closeUserListModal}>
<div className={styles.formWrapper}>
<div className={styles.header}>
<div className={styles.title}>点赞用户</div>
</div>
<div className={styles.body}>
{starUser
? starUser.map((user: IStarUser, index) => (
<div className={styles.avatar} key={`star${index}list`}>
<Avatar path={user.avatar} size="small" enlarge={true} />
<p className={styles.title}>{user.username}</p>
</div>
))
: ''}
</div>
</div>
</Modal>
)
}

export default StarUsr



8 changes: 7 additions & 1 deletion webapp/app/components/StarPanel/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,10 @@ export interface IStar {
starUser?: IStarUser[]
}

export type IEvent = React.MouseEvent<HTMLElement>
export interface IStarUserList {
visible: boolean
starUser: IStarUser[]
closeUserListModal: () => void
}

export type IEvent = React.MouseEvent<HTMLElement>
16 changes: 2 additions & 14 deletions webapp/app/containers/Organizations/component/ProjectItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ interface IProjectItemProps {
toProject: (id: number) => any
loginUser: any
deleteProject?: (id: number) => any
starUser: IStarUser[]
collectProjects: IProject[]
currentOrganization: IOrganization
unStar?: (id: number) => any
Expand All @@ -28,15 +27,6 @@ interface IPropsState {
isDisableCollect: boolean
}

interface IProjectOptions {
id: number
name: string
description: string
createBy: number
pic: string
isLike: boolean
}

export class ProjectItem extends React.PureComponent<IProjectItemProps, IPropsState> {
constructor (props) {
super(props)
Expand Down Expand Up @@ -87,7 +77,7 @@ export class ProjectItem extends React.PureComponent<IProjectItemProps, IPropsSt
}

public render () {
const { pro, loginUser, currentOrganization, starUser, collectProjects} = this.props
const { pro, loginUser, currentOrganization, collectProjects} = this.props
const { currentCollectProjectIds } = this.state

let currentCollectIds = []
Expand All @@ -97,8 +87,6 @@ export class ProjectItem extends React.PureComponent<IProjectItemProps, IPropsSt
currentCollectIds = collectProjects.map((cp) => cp.id)
}

const currentLoginUser = JSON.parse(localStorage.getItem('loginUser'))

const tags = (<div className={styles.tag}>{pro.createBy.id === loginUser.id ? <Tag key="small">我创建的</Tag> : ''}</div>)
let CreateButton = void 0
if (currentOrganization) {
Expand All @@ -109,7 +97,7 @@ export class ProjectItem extends React.PureComponent<IProjectItemProps, IPropsSt
let StarPanel = void 0
if (pro) {
const { isStar, starNum, id} = pro
StarPanel = <Star isStar={isStar} starNum={starNum} proId={id} starUser={starUser} unStar={this.props.unStar} userList={this.props.userList}/>
StarPanel = <Star isStar={isStar} starNum={starNum} proId={id} unStar={this.props.unStar} userList={this.props.userList}/>
}

return (
Expand Down
19 changes: 16 additions & 3 deletions webapp/app/containers/Organizations/component/ProjectList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ import scheduleReducer from 'containers/Schedule/reducer'
import scheduleSaga from 'containers/Schedule/sagas'
import { loadVizs } from 'containers/Schedule/actions'
import { makeSelectLoginUser } from 'containers/App/selectors'
import Star from 'components/StarPanel/Star'
const StarUserModal = Star.StarUser
const styles = require('../Organization.less')
import {
makeSelectStarUserList,
Expand All @@ -51,7 +53,8 @@ export class ProjectList extends React.PureComponent<
pageNum: 1,
pageSize: 10,
organizationProjects: null,
currentProject: null
currentProject: null,
starModalVisble: false
}
}

Expand All @@ -62,6 +65,10 @@ export class ProjectList extends React.PureComponent<
ProjectEditForm: (ref) => (this.ProjectEditForm = ref)
}

private onCloseStarModal = () => {
this.setState({starModalVisble: false})
}

private showProjectForm = (type: string) => (e) => {
e.stopPropagation()
this.setState({
Expand Down Expand Up @@ -315,6 +322,7 @@ export class ProjectList extends React.PureComponent<
private getStarProjectUserList = (id) => () => {
const { onGetProjectStarUser } = this.props
onGetProjectStarUser(id)
this.setState({starModalVisble: true})
}

public render() {
Expand All @@ -325,7 +333,8 @@ export class ProjectList extends React.PureComponent<
organizationProjects,
editFormVisible,
currentProject,
adminFormVisible
adminFormVisible,
starModalVisble
} = this.state
const {
onLoadOrganizationProjects,
Expand Down Expand Up @@ -377,7 +386,6 @@ export class ProjectList extends React.PureComponent<
<ProjectItem
unStar={this.starProject}
userList={this.getStarProjectUserList}
starUser={starUserList}
collectProjects={collectProjects}
currentOrganization={currentOrganization}
key={index}
Expand Down Expand Up @@ -448,6 +456,11 @@ export class ProjectList extends React.PureComponent<
wrappedComponentRef={this.refHandlers.ProjectEditForm}
/>
</Modal>
<StarUserModal
visible={starModalVisble}
starUser={starUserList}
closeUserListModal={this.onCloseStarModal}
/>
</div>
)
}
Expand Down
1 change: 1 addition & 0 deletions webapp/app/containers/Organizations/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export interface IProjectsStates {
pageNum: number
pageSize: number
currentProject: any
starModalVisble: boolean
organizationProjects: IProject[]
}

Expand Down
Loading

0 comments on commit c925532

Please sign in to comment.