import { FormOutlined } from '@ant-design/icons';
import { FormLayout } from '@formily/antd-v5';
import { SchemaOptionsContext, useForm } from '@formily/react';
import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import {
APIClientProvider,
useCollectionManager_deprecated,
useGlobalTheme,
FormDialog,
SchemaComponent,
SchemaComponentOptions,
DataBlockInitializer,
useSchemaInitializer,
useSchemaInitializerItem,
useAPIClient,
} from '@nocobase/client';
import { createKanbanBlockUISchema } from './createKanbanBlockUISchema';
import { CreateAndSelectSort } from './CreateAndSelectSort';
import { NAMESPACE } from './locale';
const CreateKanbanForm = ({ item, sortFields, collectionFields, fields, options, api }) => {
const form = useForm();
const { t } = useTranslation();
return (
{
form.setValuesIn('dragSortBy', null);
},
},
'x-decorator': 'FormItem',
},
dragSortBy: {
title: t('Sorting field', { ns: NAMESPACE }),
required: true,
description: t(
'Used for sorting kanban cards, only sorting fields corresponding to grouping fields can be selected',
{ ns: NAMESPACE },
),
'x-component': CreateAndSelectSort,
'x-component-props': {
objectValue: true,
fieldNames: { label: 'label', value: 'value' },
sortFields,
},
'x-decorator': 'FormItem',
'x-reactions': [
(field) => {
field.dataSource = sortFields.map((v) => {
return {
...v,
disabled: v.scopeKey !== field.form.values?.groupField?.value,
};
});
field.groupField = field.form.values?.groupField;
field.setComponentProps({
dataSource: item.dataSource,
collectionName: item.name,
collectionFields,
sortFields: sortFields,
});
},
{
dependencies: ['.groupField'],
fulfill: {
schema: {
'x-component-props': '{{$form.values}}',
},
},
},
],
},
},
}}
/>
);
};
export const KanbanBlockInitializer = () => {
const { insert } = useSchemaInitializer();
const { t } = useTranslation();
const { getCollectionFields } = useCollectionManager_deprecated();
const { theme } = useGlobalTheme();
const itemConfig = useSchemaInitializerItem();
const options = useContext(SchemaOptionsContext);
const api = useAPIClient();
return (
}
onCreateBlockSchema={async ({ item }) => {
const { data } = await api.resource('collections.fields', item.name).list({ paginate: false });
const targetFields = getCollectionFields(item.name, item.dataSource);
const collectionFields = item.dataSource === 'main' ? data.data : targetFields;
const fields = collectionFields
?.filter((field) => ['select', 'radioGroup'].includes(field.interface))
?.map((field) => {
return {
label: field?.uiSchema?.title,
value: field.name,
uiSchema: {
...field.uiSchema,
name: field.name,
},
};
});
const sortFields = collectionFields
?.filter((field) => ['sort'].includes(field.interface))
?.map((field) => {
return {
label: field?.uiSchema?.title,
value: field.name,
scopeKey: field.scopeKey,
uiSchema: {
...field.uiSchema,
name: field.name,
},
};
});
const values = await FormDialog(
t('Create kanban block'),
,
theme,
).open({
initialValues: {},
});
insert(
createKanbanBlockUISchema({
sortField: values.dragSortBy,
groupField: values.groupField.value,
collectionName: item.name,
dataSource: item.dataSource,
params: {
sort: [values.dragSortBy],
},
}),
);
}}
/>
);
};