tachybase_todo/packages/client/src/schema-component/antd/kanban/demos/demo1.tsx
SemmyWong 36ae278302
Nocobase next kanban (#223)
* feat: add kanban component

* feat: add kanban designer

* feat: kanban  completed

* refactor: modify kanban

* feat: kanban card

* feat: modify kanban

Co-authored-by: chenos <chenlinxh@gmail.com>
2022-03-09 09:31:51 +08:00

267 lines
6.0 KiB
TypeScript

/**
* title: Kanban
*/
import { ISchema, useForm } from '@formily/react';
import { observable } from '@formily/reactive';
import {
ActionContext,
AntdSchemaComponentProvider,
CollectionField,
CollectionManagerProvider,
CollectionProvider,
SchemaComponent,
SchemaComponentProvider,
SchemaInitializerProvider
} from '@nocobase/client';
import React, { useContext } from 'react';
const dataSource = observable([
{
id: 1,
title: 'Card title 1',
description: 'Card content',
status: 'doing',
},
{
id: 2,
title: 'Card title 2',
description: 'Card content',
status: 'doing',
},
{
id: 3,
title: 'Card title 3',
description: 'Card content',
status: 'undo',
},
{
id: 4,
title: 'Card title 4',
description: 'Card content',
status: 'doing',
},
{
id: 5,
title: 'Card title 5',
description: 'Card content',
status: 'done',
},
]);
const groupField = {
name: 'status',
enum: [
{ label: '未开始', value: 'undo', index: 1 },
{ label: '进行中', value: 'doing', index: 2 },
{ label: '已完成', value: 'done', index: 3 },
],
};
const schema: ISchema = {
type: 'array',
name: 'kanban',
'x-component': 'Kanban',
'x-component-props': {
dataSource,
groupField,
cardAdderPosition: 'bottom',
allowAddCard: { on: 'bottom' },
disableColumnDrag: true,
useDragEndAction: '{{ useDragEndHandler }}',
},
properties: {
card: {
type: 'void',
name: 'card',
'x-component': 'Kanban.Card',
properties: {
title: {
'x-decorator': 'div',
'x-component': 'Input',
'x-read-pretty': true,
},
description: {
'x-decorator': 'div',
'x-component': 'Input',
'x-read-pretty': true,
},
},
// 'x-designer': 'Kanban.Card.Designer',
},
cardAdder: {
type: 'void',
name: 'cardAdder',
'x-component': 'Kanban.CardAdder',
'x-component-props': {
block: true,
type: 'text',
},
title: '添加卡片',
properties: {
modal: {
'x-component': 'Action.Drawer',
'x-decorator': 'Form',
type: 'void',
title: 'Drawer Title',
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'GridFormItemInitializers',
},
footer: {
'x-component': 'Action.Drawer.Footer',
type: 'void',
properties: {
action1: {
title: '{{ t("Cancel") }}',
'x-component': 'Action',
'x-component-props': {
useAction: '{{ useCancelAction }}',
},
},
action2: {
title: '{{ t("Submit") }}',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: '{{ useOkAction }}',
},
},
},
},
},
},
},
},
cardViewer: {
type: 'void',
name: 'cardViewer',
'x-component': 'Kanban.CardViewer',
properties: {
modal: {
'x-component': 'Action.Drawer',
'x-decorator': 'Form',
type: 'void',
title: 'Drawer Title',
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
},
},
},
},
},
},
};
const collection = {
name: 'KanbanCollection',
title: '看板',
fields: [
{
type: 'string',
name: 'id',
interface: 'input',
title: 'ID',
uiSchema: {
type: 'string',
'x-component': 'Input',
'x-decorator': 'FormItem',
},
},
{
type: 'string',
name: 'title',
interface: 'input',
title: '标题',
uiSchema: {
type: 'string',
'x-component': 'Input',
'x-decorator': 'FormItem',
},
},
{
type: 'string',
name: 'description',
interface: 'input',
title: '描述',
uiSchema: {
type: 'string',
'x-component': 'Input',
'x-decorator': 'FormItem',
},
},
{
type: 'string',
name: 'status',
interface: 'select',
title: '状态',
uiSchema: {
type: 'string',
'x-component': 'Select',
enum: [
{ label: '未开始', value: 'undo' },
{ label: '进行中', value: 'doing' },
{ label: '已完成', value: 'done' },
],
'x-decorator': 'FormItem',
},
},
],
};
export default () => {
const useDragEndHandler = () => {
return {
async run(card, fromColumn, toColumn) {
for (const ds of dataSource) {
if (ds.id === card.id) {
ds.status = toColumn.toColumnId;
break;
}
}
},
};
};
const useOkAction = () => {
const form = useForm();
const { setVisible } = useContext(ActionContext);
return {
async run() {
console.log(form);
dataSource.push(form.values);
setVisible(false);
},
};
};
const useCancelAction = () => {
const form = useForm();
const { setVisible } = useContext(ActionContext);
return {
async run() {
setVisible(false);
},
};
};
return (
<CollectionManagerProvider>
<CollectionProvider collection={collection}>
<SchemaComponentProvider
designable={true}
components={{ CollectionField }}
scope={{ useOkAction, useCancelAction, useDragEndHandler }}
>
<SchemaInitializerProvider>
<AntdSchemaComponentProvider>
<SchemaComponent schema={schema} />
</AntdSchemaComponentProvider>
</SchemaInitializerProvider>
</SchemaComponentProvider>
</CollectionProvider>
</CollectionManagerProvider>
);
};