ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(plugin-workflow): adjust style (#1079)

Browse Source
This commit is contained in:
Junyi 2022-11-13 18:12:56 +08:00 committed by GitHub
parent b7113b658a
commit c465f0c427
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/plugins/workflow/src/client/ExecutionCanvas.tsx
View File

@ -1,7 +1,6 @@
import React, { useEffect } from 'react';
import { Tag } from 'antd';
import { Tag, Breadcrumb } from 'antd';
import { cx } from '@emotion/css';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import {
@ -21,7 +20,7 @@ import { lang } from './locale';
function makeNodes(nodes, jobs = []): void {
function makeNodes(nodes, jobs: any[] = []): void {
const nodesMap = new Map();
nodes.forEach(item => nodesMap.set(item.id, item));
const jobsMap = new Map();
@ -47,7 +46,7 @@ export function ExecutionCanvas() {
const { setTitle } = useDocumentTitle();
useEffect(() => {
const { workflow } = data?.data ?? {};
setTitle(`${workflow?.title ? `${workflow.title} - ` : ''}${lang('Execution history')}`);
setTitle?.(`${workflow?.title ? `${workflow.title} - ` : ''}${lang('Execution history')}`);
}, [data?.data]);
if (!data?.data) {
@ -78,17 +77,17 @@ export function ExecutionCanvas() {
}}>
<div className="workflow-toolbar">
<header>
<span>
<Link to={`/admin/settings/workflow/workflows`}>
{lang('Workflow')}
</Link>
</span>
<span>
<Link to={`/admin/settings/workflow/workflows/${workflow.id}`}>
{workflow.title}
</Link>
</span>
<strong>{`#${execution.id}`}</strong>
<Breadcrumb>
<Breadcrumb.Item>
<Link to={`/admin/settings/workflow/workflows`}>{lang('Workflow')}</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>
<Link to={`/admin/settings/workflow/workflows/${workflow.id}`}>{workflow.title}</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>
<strong>{`#${execution.id}`}</strong>
</Breadcrumb.Item>
</Breadcrumb>
</header>
<aside>
<Tag color={statusOption.color}>{compile(statusOption.label)}</Tag>

2
packages/plugins/workflow/src/client/FlowContext.ts
View File

@ -1,7 +1,7 @@
import React, { useContext } from "react";
export const FlowContext = React.createContext(null);
export const FlowContext = React.createContext<any>({});
export function useFlowContext() {
return useContext(FlowContext);

31
packages/plugins/workflow/src/client/WorkflowCanvas.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { Dropdown, Menu, Button, Tag, Switch, message } from 'antd';
import { Dropdown, Menu, Button, Tag, Switch, message, Breadcrumb } from 'antd';
import { DownOutlined, RightOutlined, EllipsisOutlined } from '@ant-design/icons';
import { cx } from '@emotion/css';
import { useTranslation } from 'react-i18next';
@ -48,7 +48,7 @@ export function WorkflowCanvas() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const { title } = data?.data ?? {};
setTitle(`${lang('Workflow')}${title ? `: ${title}` : ''}`);
setTitle?.(`${lang('Workflow')}${title ? `: ${title}` : ''}`);
}, [data?.data]);
if (!data?.data && !loading) {
@ -111,27 +111,30 @@ export function WorkflowCanvas() {
}}>
<div className="workflow-toolbar">
<header>
<span>
<Link to={`/admin/settings/workflow/workflows`}>
{lang('Workflow')}
</Link>
</span>
<strong>{workflow.title}</strong>
<Breadcrumb>
<Breadcrumb.Item>
<Link to={`/admin/settings/workflow/workflows`}>
{lang('Workflow')}
</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>
<strong>{workflow.title}</strong>
</Breadcrumb.Item>
</Breadcrumb>
</header>
<aside>
<div className="workflow-versions">
<label>{lang('Version')}</label>
<Dropdown
trigger={['click']}
overlay={
<Menu
onClick={onSwitchVersion}
defaultSelectedKeys={[workflow.id]}
defaultSelectedKeys={[`${workflow.id}`]}
className={cx(workflowVersionDropdownClass)}
>
{revisions.sort((a, b) => b.id - a.id).map((item, index) => (
<Menu.Item
key={item.id}
key={`${item.id}`}
icon={item.current ? <RightOutlined /> : null}
className={classnames({
executed: item.executed,
@ -146,7 +149,11 @@ export function WorkflowCanvas() {
</Menu>
}
>
<Button type="link">{workflow?.id ? `#${workflow.id}` : null}<DownOutlined /></Button>
<Button type="text">
<label>{lang('Version')}</label>
<span>{workflow?.id ? `#${workflow.id}` : null}</span>
<DownOutlined />
</Button>
</Dropdown>
</div>
<Switch

14
packages/plugins/workflow/src/client/style.tsx
View File

@ -15,13 +15,7 @@ export const workflowPageClass = css`
header{
display: flex;
align-items: center;
> *:not(:last-child) {
&:after{
content: ">";
margin: 0 .5em;
}
}
min-height: 2rem;
}
aside{
@ -29,6 +23,12 @@ export const workflowPageClass = css`
align-items: center;
gap: .5em;
}
.workflow-versions{
label{
margin-right: .5em;
}
}
}
.workflow-canvas{

8
packages/plugins/workflow/src/client/triggers/index.tsx
View File

@ -12,7 +12,7 @@ import { nodeCardClass, nodeHeaderClass, nodeMetaClass, nodeTitleClass } from ".
import { useFlowContext } from "../FlowContext";
import collection from './collection';
import schedule from "./schedule/";
import { lang } from "../locale";
import { lang, NAMESPACE } from "../locale";
function useUpdateConfigAction() {
@ -29,7 +29,7 @@ function useUpdateConfigAction() {
return;
}
await form.submit();
await api.resource('workflows').update({
await api.resource('workflows').update?.({
filterByTk: workflow.id,
values: form.values
});
@ -98,7 +98,7 @@ function TriggerExecution() {
properties: {
createdAt: {
type: 'string',
title: '{{t("Triggered at")}}',
title: `{{t("Triggered at", { ns: "${NAMESPACE}" })}}`,
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
@ -108,7 +108,7 @@ function TriggerExecution() {
},
context: {
type: 'object',
title: '{{t("Trigger context")}}',
title: `{{t("Trigger context", { ns: "${NAMESPACE}" })}}`,
'x-decorator': 'FormItem',
'x-component': 'Input.JSON',
'x-component-props': {