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:
		
							parent
							
								
									c2f3cfd6ce
								
							
						
					
					
						commit
						2808440426
					
				@ -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);
 | 
				
			||||||
 | 
				
			|||||||
@ -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>
 | 
				
			||||||
 | 
				
			|||||||
@ -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 }) {
 | 
				
			||||||
 | 
				
			|||||||
@ -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);
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user