|
@@ -30,7 +30,7 @@ import React, {
|
|
|
import classnames from 'classnames'
|
|
|
import { connect } from 'react-redux'
|
|
|
import { Row, Col, Tooltip, Popconfirm, Icon, Modal, Button } from 'antd'
|
|
|
-const styles = require('../Organizations/Project.less')
|
|
|
+
|
|
|
|
|
|
import saga from './sagas'
|
|
|
import reducer from './reducer'
|
|
@@ -56,9 +56,9 @@ import { makeSelectOrganizations } from '../Organizations/selectors'
|
|
|
import { checkNameUniqueAction } from '../App/actions'
|
|
|
import ComponentPermission from '../Account/components/checkMemberPermission'
|
|
|
import Star from 'components/StarPanel/Star'
|
|
|
-const StarUserModal = Star.StarUser
|
|
|
+
|
|
|
import HistoryStack from '../Organizations/component/historyStack'
|
|
|
-const historyStack = new HistoryStack()
|
|
|
+
|
|
|
import { RouteComponentWithParams } from 'utils/types'
|
|
|
import {
|
|
|
IProject,
|
|
@@ -74,6 +74,10 @@ import { uuid } from 'app/utils/util'
|
|
|
import { useResize } from './hooks/useResize'
|
|
|
import ProjectItem from './component/ProjectItem'
|
|
|
|
|
|
+const StarUserModal = Star.StarUser
|
|
|
+const historyStack = new HistoryStack()
|
|
|
+const styles = require('../Organizations/Project.less')
|
|
|
+
|
|
|
function enhanceInput(props, ref) {
|
|
|
const inputRef = useRef(null)
|
|
|
useImperativeHandle(ref, () => ({}))
|
|
@@ -135,18 +139,18 @@ const Toolbar: React.FC<IToolbarProps> = React.memo(
|
|
|
<div className={styles.menu}>{menus}</div>
|
|
|
<div className={styles.searchs}>
|
|
|
<EnhanceInput
|
|
|
- type="text"
|
|
|
+ type='text'
|
|
|
ref={searchRef}
|
|
|
val={searchKeywords}
|
|
|
onChange={getKeywords}
|
|
|
- placeholder="查找您的项目"
|
|
|
+ placeholder='查找您的项目'
|
|
|
/>
|
|
|
<span className={styles.searchButton}>
|
|
|
- <i className="iconfont icon-search" />
|
|
|
+ <i className='iconfont icon-search' />
|
|
|
</span>
|
|
|
</div>
|
|
|
<div className={styles.create}>
|
|
|
- <Button icon="plus" type="primary" shape="round" onClick={addPro}>
|
|
|
+ <Button icon='plus' type='primary' shape='round' onClick={addPro}>
|
|
|
{documentWidth < 860 ? '' : '创建'}
|
|
|
</Button>
|
|
|
</div>
|
|
@@ -162,28 +166,26 @@ function stopPPG(e: React.MouseEvent<HTMLElement>) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
-const Projects: React.FC<
|
|
|
- IProjectsProps & RouteComponentWithParams
|
|
|
-> = React.memo(
|
|
|
+const Projects: React.FC<IProjectsProps & RouteComponentWithParams> = React.memo(
|
|
|
({
|
|
|
- projects,
|
|
|
- onLoadProjects,
|
|
|
- onLoadOrganizations,
|
|
|
- organizations,
|
|
|
- loginUser,
|
|
|
- onLoadCollectProjects,
|
|
|
- collectProjects,
|
|
|
- history,
|
|
|
- onAddProject,
|
|
|
- onCheckUniqueName,
|
|
|
- onTransferProject,
|
|
|
- onDeleteProject,
|
|
|
- onClickCollectProjects,
|
|
|
- starUserList,
|
|
|
- onStarProject,
|
|
|
- onGetProjectStarUser,
|
|
|
- onEditProject
|
|
|
- }) => {
|
|
|
+ projects,
|
|
|
+ onLoadProjects,
|
|
|
+ onLoadOrganizations,
|
|
|
+ organizations,
|
|
|
+ loginUser,
|
|
|
+ onLoadCollectProjects,
|
|
|
+ collectProjects,
|
|
|
+ history,
|
|
|
+ onAddProject,
|
|
|
+ onCheckUniqueName,
|
|
|
+ onTransferProject,
|
|
|
+ onDeleteProject,
|
|
|
+ onClickCollectProjects,
|
|
|
+ starUserList,
|
|
|
+ onStarProject,
|
|
|
+ onGetProjectStarUser,
|
|
|
+ onEditProject
|
|
|
+ }) => {
|
|
|
const [formKey, setFormKey] = useState(() => uuid(8, 16))
|
|
|
const [projectType, setProjectType] = useState('all')
|
|
|
|
|
@@ -216,6 +218,10 @@ const Projects: React.FC<
|
|
|
let proForm: FormComponentProps<IProjectFormFieldProps> = null
|
|
|
|
|
|
useEffect(() => {
|
|
|
+ window.localStorage.setItem('inDataService', '')
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
if (onLoadProjects) {
|
|
|
onLoadProjects()
|
|
|
}
|
|
@@ -363,6 +369,7 @@ const Projects: React.FC<
|
|
|
|
|
|
const getProjectsBySearch = useMemo(() => {
|
|
|
const { proIdList } = historyStack.getAll()
|
|
|
+
|
|
|
function filterByKeyword(arr: IProject[]) {
|
|
|
return (
|
|
|
Array.isArray(arr) &&
|
|
@@ -373,7 +380,7 @@ const Projects: React.FC<
|
|
|
)
|
|
|
}
|
|
|
|
|
|
- function filterByProjectType (arr: IProject[]) {
|
|
|
+ function filterByProjectType(arr: IProject[]) {
|
|
|
if (Array.isArray(arr)) {
|
|
|
switch (projectType) {
|
|
|
case 'create':
|
|
@@ -389,7 +396,9 @@ const Projects: React.FC<
|
|
|
case 'history':
|
|
|
return proIdList.reduce((iteratee, pid) => {
|
|
|
const pl = arr.find((pro) => pro.id === pid)
|
|
|
- if (pl) {iteratee.push(pl) }
|
|
|
+ if (pl) {
|
|
|
+ iteratee.push(pl)
|
|
|
+ }
|
|
|
return iteratee
|
|
|
}, [])
|
|
|
case 'all':
|
|
@@ -407,11 +416,11 @@ const Projects: React.FC<
|
|
|
collectProjects.map((col) => col.id)
|
|
|
return Array.isArray(arr)
|
|
|
? arr.map((pro) => {
|
|
|
- return favoriteProjectsId.includes &&
|
|
|
- favoriteProjectsId.includes(pro.id)
|
|
|
- ? { ...pro, isFavorites: true }
|
|
|
- : pro
|
|
|
- })
|
|
|
+ return favoriteProjectsId.includes &&
|
|
|
+ favoriteProjectsId.includes(pro.id)
|
|
|
+ ? { ...pro, isFavorites: true }
|
|
|
+ : pro
|
|
|
+ })
|
|
|
: []
|
|
|
}
|
|
|
|
|
@@ -426,196 +435,196 @@ const Projects: React.FC<
|
|
|
const ProjectItems: ReactElement[] = useMemo(() => {
|
|
|
const items = Array.isArray(projects)
|
|
|
? getProjectsBySearch.map((pro: IProject, index) => {
|
|
|
- const {
|
|
|
- pic,
|
|
|
- name,
|
|
|
- description,
|
|
|
- createBy,
|
|
|
- isStar,
|
|
|
- isFavorites,
|
|
|
- id,
|
|
|
- starNum,
|
|
|
- orgId
|
|
|
- } = pro
|
|
|
-
|
|
|
- const isMimePro = !!(createBy && createBy.id === loginUserId)
|
|
|
-
|
|
|
- const getTagType = (function (mime, favorite) {
|
|
|
- const tagType = []
|
|
|
-
|
|
|
- if (mime) {
|
|
|
- tagType.push({
|
|
|
- text: '创建',
|
|
|
- color: '#108EE9'
|
|
|
- })
|
|
|
- } else {
|
|
|
- tagType.push({
|
|
|
- text: '参与',
|
|
|
- color: '#FA8C15'
|
|
|
- })
|
|
|
- }
|
|
|
- return tagType
|
|
|
- })(isMimePro, isFavorites)
|
|
|
-
|
|
|
- const starProject = (id) => () => {
|
|
|
- onStarProject(id, () => {
|
|
|
- if (onLoadProjects) {
|
|
|
- onLoadProjects()
|
|
|
- }
|
|
|
+ const {
|
|
|
+ pic,
|
|
|
+ name,
|
|
|
+ description,
|
|
|
+ createBy,
|
|
|
+ isStar,
|
|
|
+ isFavorites,
|
|
|
+ id,
|
|
|
+ starNum,
|
|
|
+ orgId
|
|
|
+ } = pro
|
|
|
+
|
|
|
+ const isMimePro = !!(createBy && createBy.id === loginUserId)
|
|
|
+
|
|
|
+ const getTagType = (function(mime, favorite) {
|
|
|
+ const tagType = []
|
|
|
+
|
|
|
+ if (mime) {
|
|
|
+ tagType.push({
|
|
|
+ text: '创建',
|
|
|
+ color: '#108EE9'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ tagType.push({
|
|
|
+ text: '参与',
|
|
|
+ color: '#FA8C15'
|
|
|
})
|
|
|
}
|
|
|
+ return tagType
|
|
|
+ })(isMimePro, isFavorites)
|
|
|
|
|
|
- const toProject = () => {
|
|
|
- history.push(`/project/${id}`)
|
|
|
- saveHistory(pro)
|
|
|
- }
|
|
|
+ const starProject = (id) => () => {
|
|
|
+ onStarProject(id, () => {
|
|
|
+ if (onLoadProjects) {
|
|
|
+ onLoadProjects()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const toProject = () => {
|
|
|
+ history.push(`/project/${id}`)
|
|
|
+ saveHistory(pro)
|
|
|
+ }
|
|
|
|
|
|
- const saveHistory = (pro) => historyStack.pushNode(pro)
|
|
|
+ const saveHistory = (pro) => historyStack.pushNode(pro)
|
|
|
|
|
|
- const currentOrganization: IOrganization = organizations.find(
|
|
|
- (org) => org.id === orgId
|
|
|
- )
|
|
|
+ const currentOrganization: IOrganization = organizations.find(
|
|
|
+ (org) => org.id === orgId
|
|
|
+ )
|
|
|
|
|
|
- const CreateButton = ComponentPermission(
|
|
|
- currentOrganization,
|
|
|
- ''
|
|
|
- )(Icon)
|
|
|
+ const CreateButton = ComponentPermission(
|
|
|
+ currentOrganization,
|
|
|
+ ''
|
|
|
+ )(Icon)
|
|
|
|
|
|
- const isHistoryType = !!(projectType && projectType === 'history')
|
|
|
+ const isHistoryType = !!(projectType && projectType === 'history')
|
|
|
|
|
|
- const favoriteProject = (e: React.MouseEvent<HTMLElement>) => {
|
|
|
- const { id, isFavorites } = pro
|
|
|
- stopPPG(e)
|
|
|
- if (favoritePro) {
|
|
|
- favoritePro(id, isFavorites)
|
|
|
- }
|
|
|
+ const favoriteProject = (e: React.MouseEvent<HTMLElement>) => {
|
|
|
+ const { id, isFavorites } = pro
|
|
|
+ stopPPG(e)
|
|
|
+ if (favoritePro) {
|
|
|
+ favoritePro(id, isFavorites)
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- const transferPro = (e: React.MouseEvent<HTMLElement>) => {
|
|
|
- stopPPG(e)
|
|
|
- if (showProForm) {
|
|
|
- showProForm('transfer', pro, e)
|
|
|
- }
|
|
|
+ const transferPro = (e: React.MouseEvent<HTMLElement>) => {
|
|
|
+ stopPPG(e)
|
|
|
+ if (showProForm) {
|
|
|
+ showProForm('transfer', pro, e)
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- const editPro = (e: React.MouseEvent<HTMLElement>) => {
|
|
|
- stopPPG(e)
|
|
|
- if (showProForm) {
|
|
|
- showProForm('edit', pro, e)
|
|
|
- }
|
|
|
+ const editPro = (e: React.MouseEvent<HTMLElement>) => {
|
|
|
+ stopPPG(e)
|
|
|
+ if (showProForm) {
|
|
|
+ showProForm('edit', pro, e)
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- const deleteProject = (e: React.MouseEvent<HTMLElement>) => {
|
|
|
- const { id, isFavorites } = pro
|
|
|
- if (deletePro) {
|
|
|
- deletePro(id, isFavorites)
|
|
|
- }
|
|
|
- stopPPG(e)
|
|
|
+ const deleteProject = (e: React.MouseEvent<HTMLElement>) => {
|
|
|
+ const { id, isFavorites } = pro
|
|
|
+ if (deletePro) {
|
|
|
+ deletePro(id, isFavorites)
|
|
|
}
|
|
|
+ stopPPG(e)
|
|
|
+ }
|
|
|
|
|
|
- const { Favorite, Transfer, Edit, Delete } = (function () {
|
|
|
- const favoriteClassName = classnames({
|
|
|
- [styles.ft16]: true,
|
|
|
- [styles.mainColor]: isFavorites
|
|
|
- })
|
|
|
+ const { Favorite, Transfer, Edit, Delete } = (function() {
|
|
|
+ const favoriteClassName = classnames({
|
|
|
+ [styles.ft16]: true,
|
|
|
+ [styles.mainColor]: isFavorites
|
|
|
+ })
|
|
|
|
|
|
- const themeFavorite = isFavorites ? 'filled' : 'outlined'
|
|
|
+ const themeFavorite = isFavorites ? 'filled' : 'outlined'
|
|
|
+
|
|
|
+ const Favorite = !isMimePro ? (
|
|
|
+ <Tooltip title='收藏'>
|
|
|
+ <Icon
|
|
|
+ type='heart'
|
|
|
+ theme={themeFavorite}
|
|
|
+ className={favoriteClassName}
|
|
|
+ onClick={favoriteProject}
|
|
|
+ />
|
|
|
+ </Tooltip>
|
|
|
+ ) : (
|
|
|
+ []
|
|
|
+ )
|
|
|
|
|
|
- const Favorite = !isMimePro ? (
|
|
|
- <Tooltip title="收藏">
|
|
|
- <Icon
|
|
|
- type="heart"
|
|
|
- theme={themeFavorite}
|
|
|
- className={favoriteClassName}
|
|
|
- onClick={favoriteProject}
|
|
|
- />
|
|
|
- </Tooltip>
|
|
|
- ) : (
|
|
|
- []
|
|
|
- )
|
|
|
+ const Transfer = (
|
|
|
+ <Tooltip title='移交'>
|
|
|
+ <CreateButton
|
|
|
+ type='swap'
|
|
|
+ className={styles.ft16}
|
|
|
+ onClick={transferPro}
|
|
|
+ />
|
|
|
+ </Tooltip>
|
|
|
+ )
|
|
|
|
|
|
- const Transfer = (
|
|
|
- <Tooltip title="移交">
|
|
|
- <CreateButton
|
|
|
- type="swap"
|
|
|
- className={styles.ft16}
|
|
|
- onClick={transferPro}
|
|
|
- />
|
|
|
- </Tooltip>
|
|
|
- )
|
|
|
+ const Edit = (
|
|
|
+ <Tooltip title='编辑'>
|
|
|
+ <CreateButton
|
|
|
+ type='form'
|
|
|
+ className={styles.ft16}
|
|
|
+ onClick={editPro}
|
|
|
+ />
|
|
|
+ </Tooltip>
|
|
|
+ )
|
|
|
|
|
|
- const Edit = (
|
|
|
- <Tooltip title="编辑">
|
|
|
+ const Delete = (
|
|
|
+ <Popconfirm
|
|
|
+ title='确定删除?'
|
|
|
+ placement='bottom'
|
|
|
+ onCancel={stopPPG}
|
|
|
+ onConfirm={deleteProject}
|
|
|
+ >
|
|
|
+ <Tooltip title='删除'>
|
|
|
<CreateButton
|
|
|
- type="form"
|
|
|
+ type='delete'
|
|
|
className={styles.ft16}
|
|
|
- onClick={editPro}
|
|
|
+ onClick={stopPPG}
|
|
|
/>
|
|
|
</Tooltip>
|
|
|
- )
|
|
|
-
|
|
|
- const Delete = (
|
|
|
- <Popconfirm
|
|
|
- title="确定删除?"
|
|
|
- placement="bottom"
|
|
|
- onCancel={stopPPG}
|
|
|
- onConfirm={deleteProject}
|
|
|
- >
|
|
|
- <Tooltip title="删除">
|
|
|
- <CreateButton
|
|
|
- type="delete"
|
|
|
- className={styles.ft16}
|
|
|
- onClick={stopPPG}
|
|
|
- />
|
|
|
- </Tooltip>
|
|
|
- </Popconfirm>
|
|
|
- )
|
|
|
+ </Popconfirm>
|
|
|
+ )
|
|
|
|
|
|
- return {
|
|
|
- Edit,
|
|
|
- Favorite,
|
|
|
- Transfer,
|
|
|
- Delete
|
|
|
- }
|
|
|
- })()
|
|
|
-
|
|
|
- return (
|
|
|
- <Col
|
|
|
- key={`pro${name}${uuid(8, 16)}orp${description}`}
|
|
|
- xxl={4}
|
|
|
- xl={6}
|
|
|
- lg={6}
|
|
|
- md={8}
|
|
|
- sm={12}
|
|
|
- xs={24}
|
|
|
+ return {
|
|
|
+ Edit,
|
|
|
+ Favorite,
|
|
|
+ Transfer,
|
|
|
+ Delete
|
|
|
+ }
|
|
|
+ })()
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Col
|
|
|
+ key={`pro${name}${uuid(8, 16)}orp${description}`}
|
|
|
+ xxl={4}
|
|
|
+ xl={6}
|
|
|
+ lg={6}
|
|
|
+ md={8}
|
|
|
+ sm={12}
|
|
|
+ xs={24}
|
|
|
+ >
|
|
|
+ <ProjectItem
|
|
|
+ title={name}
|
|
|
+ tags={getTagType}
|
|
|
+ onClick={toProject}
|
|
|
+ description={description}
|
|
|
+ key={`projectItem${uuid}`}
|
|
|
+ backgroundImg={`url(${require(`assets/images/bg${pic}.png`)})`}
|
|
|
>
|
|
|
- <ProjectItem
|
|
|
- title={name}
|
|
|
- tags={getTagType}
|
|
|
- onClick={toProject}
|
|
|
- description={description}
|
|
|
- key={`projectItem${uuid}`}
|
|
|
- backgroundImg={`url(${require(`assets/images/bg${pic}.png`)})`}
|
|
|
- >
|
|
|
- <div className={styles.others}>
|
|
|
- {!isHistoryType ? Edit : ''}
|
|
|
- {Favorite}
|
|
|
- {!isHistoryType ? Transfer : ''}
|
|
|
- {!isHistoryType ? Delete : ''}
|
|
|
- </div>
|
|
|
- <div className={styles.stars}>
|
|
|
- <Star
|
|
|
- proId={id}
|
|
|
- starNum={starNum}
|
|
|
- isStar={isStar}
|
|
|
- unStar={starProject}
|
|
|
- userList={getStarProjectUserList}
|
|
|
- />
|
|
|
- </div>
|
|
|
- </ProjectItem>
|
|
|
- </Col>
|
|
|
- )
|
|
|
- })
|
|
|
+ <div className={styles.others}>
|
|
|
+ {!isHistoryType ? Edit : ''}
|
|
|
+ {Favorite}
|
|
|
+ {!isHistoryType ? Transfer : ''}
|
|
|
+ {!isHistoryType ? Delete : ''}
|
|
|
+ </div>
|
|
|
+ <div className={styles.stars}>
|
|
|
+ <Star
|
|
|
+ proId={id}
|
|
|
+ starNum={starNum}
|
|
|
+ isStar={isStar}
|
|
|
+ unStar={starProject}
|
|
|
+ userList={getStarProjectUserList}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </ProjectItem>
|
|
|
+ </Col>
|
|
|
+ )
|
|
|
+ })
|
|
|
: []
|
|
|
|
|
|
return items
|