balibabu
commited on
Commit
·
7a2a8fe
1
Parent(s):
b9ad0fd
feat: add GraphAvatar to graph list #918 (#1385)
Browse files### What problem does this PR solve?
feat: add GraphAvatar to graph list #918
### Type of change
- [x] New Feature (non-breaking change which adds functionality)
web/src/hooks/flow-hooks.ts
CHANGED
@@ -111,7 +111,12 @@ export const useSetFlow = () => {
|
|
111 |
mutateAsync,
|
112 |
} = useMutation({
|
113 |
mutationKey: ['setFlow'],
|
114 |
-
mutationFn: async (params: {
|
|
|
|
|
|
|
|
|
|
|
115 |
const { data } = await flowService.setCanvas(params);
|
116 |
if (data.retcode === 0) {
|
117 |
message.success(
|
|
|
111 |
mutateAsync,
|
112 |
} = useMutation({
|
113 |
mutationKey: ['setFlow'],
|
114 |
+
mutationFn: async (params: {
|
115 |
+
id?: string;
|
116 |
+
title?: string;
|
117 |
+
dsl?: DSL;
|
118 |
+
avatar?: string;
|
119 |
+
}) => {
|
120 |
const { data } = await flowService.setCanvas(params);
|
121 |
if (data.retcode === 0) {
|
122 |
message.success(
|
web/src/pages/flow/list/create-flow-modal.tsx
CHANGED
@@ -1,20 +1,11 @@
|
|
1 |
-
import { ReactComponent as NothingIcon } from '@/assets/svg/nothing.svg';
|
2 |
import { IModalManagerChildrenProps } from '@/components/modal-manager';
|
3 |
import { useTranslate } from '@/hooks/commonHooks';
|
4 |
import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
|
5 |
import { useSelectItem } from '@/hooks/logicHooks';
|
6 |
-
import {
|
7 |
-
Avatar,
|
8 |
-
Card,
|
9 |
-
Flex,
|
10 |
-
Form,
|
11 |
-
Input,
|
12 |
-
Modal,
|
13 |
-
Space,
|
14 |
-
Typography,
|
15 |
-
} from 'antd';
|
16 |
import classNames from 'classnames';
|
17 |
import { useEffect } from 'react';
|
|
|
18 |
import styles from './index.less';
|
19 |
|
20 |
const { Title } = Typography;
|
@@ -90,11 +81,7 @@ const CreateFlowModal = ({
|
|
90 |
onClick={handleItemClick(x.id)}
|
91 |
>
|
92 |
<Space size={'middle'}>
|
93 |
-
{x.avatar
|
94 |
-
<Avatar size={40} icon={<NothingIcon />} src={x.avatar} />
|
95 |
-
) : (
|
96 |
-
<NothingIcon width={40} height={30} />
|
97 |
-
)}
|
98 |
<b>{x.title}</b>
|
99 |
</Space>
|
100 |
<p>{x.description}</p>
|
|
|
|
|
1 |
import { IModalManagerChildrenProps } from '@/components/modal-manager';
|
2 |
import { useTranslate } from '@/hooks/commonHooks';
|
3 |
import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
|
4 |
import { useSelectItem } from '@/hooks/logicHooks';
|
5 |
+
import { Card, Flex, Form, Input, Modal, Space, Typography } from 'antd';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
6 |
import classNames from 'classnames';
|
7 |
import { useEffect } from 'react';
|
8 |
+
import GraphAvatar from './graph-avatar';
|
9 |
import styles from './index.less';
|
10 |
|
11 |
const { Title } = Typography;
|
|
|
81 |
onClick={handleItemClick(x.id)}
|
82 |
>
|
83 |
<Space size={'middle'}>
|
84 |
+
<GraphAvatar avatar={x.avatar}></GraphAvatar>
|
|
|
|
|
|
|
|
|
85 |
<b>{x.title}</b>
|
86 |
</Space>
|
87 |
<p>{x.description}</p>
|
web/src/pages/flow/list/flow-card/index.less
CHANGED
@@ -1,5 +1,5 @@
|
|
1 |
.container {
|
2 |
-
height:
|
3 |
display: flex;
|
4 |
flex-direction: column;
|
5 |
justify-content: space-between;
|
|
|
1 |
.container {
|
2 |
+
height: 160px;
|
3 |
display: flex;
|
4 |
flex-direction: column;
|
5 |
justify-content: space-between;
|
web/src/pages/flow/list/flow-card/index.tsx
CHANGED
@@ -1,12 +1,13 @@
|
|
1 |
import { formatDate } from '@/utils/date';
|
2 |
-
import { CalendarOutlined
|
3 |
-
import {
|
4 |
import { useNavigate } from 'umi';
|
5 |
|
6 |
import OperateDropdown from '@/components/operate-dropdown';
|
7 |
import { useDeleteFlow } from '@/hooks/flow-hooks';
|
8 |
import { IFlow } from '@/interfaces/database/flow';
|
9 |
import { useCallback } from 'react';
|
|
|
10 |
import styles from './index.less';
|
11 |
|
12 |
interface IProps {
|
@@ -29,11 +30,16 @@ const FlowCard = ({ item }: IProps) => {
|
|
29 |
<Card className={styles.card} onClick={handleCardClick}>
|
30 |
<div className={styles.container}>
|
31 |
<div className={styles.content}>
|
32 |
-
<
|
33 |
<OperateDropdown deleteItem={removeFlow}></OperateDropdown>
|
34 |
</div>
|
35 |
<div className={styles.titleWrapper}>
|
36 |
-
<
|
|
|
|
|
|
|
|
|
|
|
37 |
<p>{item.description}</p>
|
38 |
</div>
|
39 |
<div className={styles.footer}>
|
|
|
1 |
import { formatDate } from '@/utils/date';
|
2 |
+
import { CalendarOutlined } from '@ant-design/icons';
|
3 |
+
import { Card, Typography } from 'antd';
|
4 |
import { useNavigate } from 'umi';
|
5 |
|
6 |
import OperateDropdown from '@/components/operate-dropdown';
|
7 |
import { useDeleteFlow } from '@/hooks/flow-hooks';
|
8 |
import { IFlow } from '@/interfaces/database/flow';
|
9 |
import { useCallback } from 'react';
|
10 |
+
import GraphAvatar from '../graph-avatar';
|
11 |
import styles from './index.less';
|
12 |
|
13 |
interface IProps {
|
|
|
30 |
<Card className={styles.card} onClick={handleCardClick}>
|
31 |
<div className={styles.container}>
|
32 |
<div className={styles.content}>
|
33 |
+
<GraphAvatar avatar={item.avatar}></GraphAvatar>
|
34 |
<OperateDropdown deleteItem={removeFlow}></OperateDropdown>
|
35 |
</div>
|
36 |
<div className={styles.titleWrapper}>
|
37 |
+
<Typography.Title
|
38 |
+
className={styles.title}
|
39 |
+
ellipsis={{ tooltip: item.title }}
|
40 |
+
>
|
41 |
+
{item.title}
|
42 |
+
</Typography.Title>
|
43 |
<p>{item.description}</p>
|
44 |
</div>
|
45 |
<div className={styles.footer}>
|
web/src/pages/flow/list/graph-avatar.tsx
ADDED
@@ -0,0 +1,16 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { ReactComponent as NothingIcon } from '@/assets/svg/nothing.svg';
|
2 |
+
import { Avatar } from 'antd';
|
3 |
+
|
4 |
+
const GraphAvatar = ({ avatar }: { avatar?: string | null }) => {
|
5 |
+
return (
|
6 |
+
<div>
|
7 |
+
{avatar ? (
|
8 |
+
<Avatar size={40} icon={<NothingIcon />} src={avatar} />
|
9 |
+
) : (
|
10 |
+
<NothingIcon width={40} height={30} />
|
11 |
+
)}
|
12 |
+
</div>
|
13 |
+
);
|
14 |
+
};
|
15 |
+
|
16 |
+
export default GraphAvatar;
|
web/src/pages/flow/list/hooks.ts
CHANGED
@@ -45,6 +45,7 @@ export const useSaveFlow = () => {
|
|
45 |
const ret = await setFlow({
|
46 |
title,
|
47 |
dsl,
|
|
|
48 |
// dsl: dslJson,
|
49 |
// dsl: {
|
50 |
// ...retrievalRelevantRewriteAndGenerateBase,
|
|
|
45 |
const ret = await setFlow({
|
46 |
title,
|
47 |
dsl,
|
48 |
+
avatar: templateItem?.avatar,
|
49 |
// dsl: dslJson,
|
50 |
// dsl: {
|
51 |
// ...retrievalRelevantRewriteAndGenerateBase,
|