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

* 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

View File

@ -26,7 +26,7 @@ test.describe('configure params in gantt block', () => {
await page.getByRole('spinbutton').fill('1');
const [request] = await Promise.all([
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 queryParams = new URLSearchParams(new URL(requestUrl).search);

View File

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

View File

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

View File

@ -40,7 +40,7 @@ test.describe('configure setting', () => {
await page.getByRole('spinbutton').fill('1');
const [request] = await Promise.all([
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 queryParams = new URLSearchParams(new URL(requestUrl).search);