mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 11:36:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(kanban）: kanban data on a page should be isolated (#3232)

Browse Source 
* fix: kanban block data on a page influences each other

* test: kanban test
This commit is contained in:
katherinehhh 2023-12-19 15:27:00 +08:00 committed by GitHub
parent c2f3cfd6ce
commit 2808440426
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/plugins/@nocobase/plugin-gantt/src/client/__e2e__/schemaSettings.test.ts
View File

@ -26,7 +26,7 @@ test.describe('configure params in gantt block', () => {
await page.getByRole('spinbutton').fill('1'); await page.getByRole('spinbutton').fill('1');
const [request] = await Promise.all([ const [request] = await Promise.all([
page.waitForRequest((request) => request.url().includes('api/general:list')), page.waitForRequest((request) => request.url().includes('api/general:list')),
page.getByRole('button', { name: 'OK' }).click(), page.getByRole('button', { name: 'OK', exact: true }).click(),
]); ]);
const requestUrl = request.url(); const requestUrl = request.url();
const queryParams = new URLSearchParams(new URL(requestUrl).search); const queryParams = new URLSearchParams(new URL(requestUrl).search);

8
packages/plugins/@nocobase/plugin-kanban/src/client/Kanban.tsx
View File

@ -53,7 +53,7 @@ export const toColumns = (groupField: any, dataSource: Array<any> = []) => {
export const Kanban: any = observer( export const Kanban: any = observer(
(props: any) => { (props: any) => {
const { styles } = useStyles(); const { styles } = useStyles();
const { groupField, onCardDragEnd, ...restProps } = useProps(props); const { groupField, onCardDragEnd, dataSource, setDataSource, ...restProps } = useProps(props);
const field = useField<ArrayField>(); const field = useField<ArrayField>();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const [disableCardDrag, setDisableCardDrag] = useState(false); const [disableCardDrag, setDisableCardDrag] = useState(false);
@ -77,11 +77,13 @@ export const Kanban: any = observer(
const handleCardRemove = (card, column) => { const handleCardRemove = (card, column) => {
const updatedBoard = Board.removeCard({ columns: field.value }, column, card); const updatedBoard = Board.removeCard({ columns: field.value }, column, card);
field.value = updatedBoard.columns; field.value = updatedBoard.columns;
setDataSource(updatedBoard.columns);
}; };
const handleCardDragEnd = (card, fromColumn, toColumn) => { const handleCardDragEnd = (card, fromColumn, toColumn) => {
onCardDragEnd?.({ columns: field.value, groupField }, fromColumn, toColumn); onCardDragEnd?.({ columns: field.value, groupField }, fromColumn, toColumn);
const updatedBoard = Board.moveCard({ columns: field.value }, fromColumn, toColumn); const updatedBoard = Board.moveCard({ columns: field.value }, fromColumn, toColumn);
field.value = updatedBoard.columns; field.value = updatedBoard.columns;
setDataSource(updatedBoard.columns);
}; };
return ( return (
<Spin wrapperClassName={styles.nbKanban} spinning={field.loading || false}> <Spin wrapperClassName={styles.nbKanban} spinning={field.loading || false}>
@ -99,7 +101,7 @@ export const Kanban: any = observer(
</div> </div>
)} )}
renderCard={(card, { column, dragging }) => { renderCard={(card, { column, dragging }) => {
const columnIndex = field.value?.indexOf(column); const columnIndex = dataSource?.indexOf(column);
const cardIndex = column?.cards?.indexOf(card); const cardIndex = column?.cards?.indexOf(card);
return ( return (
schemas.card && ( schemas.card && (
@ -136,7 +138,7 @@ export const Kanban: any = observer(
}} }}
> >
{{ {{
columns: field.value || [], columns: dataSource || [],
}} }}
</Board> </Board>
</Spin> </Spin>

10
packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockProvider.tsx
View File

@ -2,7 +2,7 @@ import { ArrayField } from '@formily/core';
import { Schema, useField, useFieldSchema } from '@formily/react'; import { Schema, useField, useFieldSchema } from '@formily/react';
import { Spin } from 'antd'; import { Spin } from 'antd';
import uniq from 'lodash/uniq'; import uniq from 'lodash/uniq';
import React, { createContext, useContext, useEffect } from 'react'; import React, { createContext, useContext, useEffect, useState } from 'react';
import { import {
useACLRoleContext, useACLRoleContext,
useCollection, useCollection,
@ -135,15 +135,17 @@ const useDisableCardDrag = () => {
export const useKanbanBlockProps = () => { export const useKanbanBlockProps = () => {
const field = useField<ArrayField>(); const field = useField<ArrayField>();
const ctx = useKanbanBlockContext(); const ctx = useKanbanBlockContext();
const [dataSource, setDataSource] = useState([]);
useEffect(() => { useEffect(() => {
if (!ctx?.service?.loading) { if (!ctx?.service?.loading) {
setTimeout(() => { field.value = toColumns(ctx.groupField, ctx?.service?.data?.data);
field.value = toColumns(ctx.groupField, ctx?.service?.data?.data); setDataSource(toColumns(ctx.groupField, ctx?.service?.data?.data));
});
} }
// field.loading = ctx?.service?.loading; // field.loading = ctx?.service?.loading;
}, [ctx?.service?.loading]); }, [ctx?.service?.loading]);
return { return {
setDataSource,
dataSource,
groupField: ctx.groupField, groupField: ctx.groupField,
disableCardDrag: useDisableCardDrag(), disableCardDrag: useDisableCardDrag(),
async onCardDragEnd({ columns, groupField }, { fromColumnId, fromPosition }, { toColumnId, toPosition }) { async onCardDragEnd({ columns, groupField }, { fromColumnId, fromPosition }, { toColumnId, toPosition }) {

2
packages/plugins/@nocobase/plugin-kanban/src/client/__e2e__/schemaSettings.test.ts
View File

@ -40,7 +40,7 @@ test.describe('configure setting', () => {
await page.getByRole('spinbutton').fill('1'); await page.getByRole('spinbutton').fill('1');
const [request] = await Promise.all([ const [request] = await Promise.all([
page.waitForRequest((request) => request.url().includes('api/general:list')), page.waitForRequest((request) => request.url().includes('api/general:list')),
page.getByRole('button', { name: 'OK' }).click(), page.getByRole('button', { name: 'OK', exact: true }).click(),
]); ]);
const requestUrl = request.url(); const requestUrl = request.url();
const queryParams = new URLSearchParams(new URL(requestUrl).search); const queryParams = new URLSearchParams(new URL(requestUrl).search);