mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 10:46:54 +00:00
feat: improve filter action initializer
This commit is contained in:
chenos
parent
bc27359637
commit
1c6289dd88
@ -1,5 +1,5 @@
|
||||
import { useForm } from '@formily/react';
|
||||
import { useCollectionManager } from '.';
|
||||
import { useCollection, useCollectionManager } from '.';
|
||||
import { useRequest } from '../api-client';
|
||||
import { useRecord } from '../record-provider';
|
||||
import { useActionContext } from '../schema-component';
|
||||
@ -16,6 +16,58 @@ export const useCancelAction = () => {
|
||||
};
|
||||
};
|
||||
|
||||
export const useCancelFilterAction = () => {
|
||||
const form = useForm();
|
||||
const ctx = useActionContext();
|
||||
return {
|
||||
async run() {
|
||||
ctx.setVisible(false);
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const useCollectionFilterOptions = (collectionName: string) => {
|
||||
const { getCollection, getInterface } = useCollectionManager();
|
||||
const options = [];
|
||||
const collection = getCollection(collectionName);
|
||||
const fields = collection?.fields || [];
|
||||
const field2option = (field) => {
|
||||
const fieldInterface = getInterface(field.interface);
|
||||
const option = {
|
||||
name: field.name,
|
||||
title: field?.uiSchema?.title || field.name,
|
||||
operators: fieldInterface.operators || [],
|
||||
};
|
||||
return option;
|
||||
}
|
||||
fields.forEach(field => {
|
||||
options.push(field2option(field));
|
||||
});
|
||||
return options;
|
||||
}
|
||||
|
||||
export const useFilterDataSource = (options) => {
|
||||
const { name } = useCollection();
|
||||
const data = useCollectionFilterOptions(name);
|
||||
return useRequest(
|
||||
() =>
|
||||
Promise.resolve({
|
||||
data,
|
||||
}),
|
||||
options,
|
||||
);
|
||||
}
|
||||
|
||||
export const useFilterAction = () => {
|
||||
const form = useForm();
|
||||
const ctx = useActionContext();
|
||||
return {
|
||||
async run() {
|
||||
ctx.setVisible(false);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export const useCreateAction = () => {
|
||||
const form = useForm();
|
||||
const ctx = useActionContext();
|
||||
|
||||
@ -41,7 +41,6 @@ export const Cascader = connect(
|
||||
});
|
||||
// 兼容值为 object[] 的情况
|
||||
const toValue = () => {
|
||||
return ['11'];
|
||||
return toArr(value).map((item) => {
|
||||
if (typeof item === 'object') {
|
||||
return item[fieldNames.value];
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ObjectField as ObjectFieldModel } from '@formily/core';
|
||||
import { observer, useField } from '@formily/react';
|
||||
import { observer, useField, useFieldSchema } from '@formily/react';
|
||||
import React from 'react';
|
||||
import { useRequest } from '../../../api-client';
|
||||
import { FilterContext } from './context';
|
||||
@ -14,6 +14,7 @@ const useDef = (options) => {
|
||||
export const Filter: any = observer((props: any) => {
|
||||
const { useDataSource = useDef, dynamicComponent } = props;
|
||||
const field = useField<ObjectFieldModel>();
|
||||
const fieldSchema = useFieldSchema();
|
||||
useDataSource({
|
||||
onSuccess(data) {
|
||||
console.log('onSuccess', data?.data);
|
||||
@ -22,7 +23,7 @@ export const Filter: any = observer((props: any) => {
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<FilterContext.Provider value={{ dynamicComponent, options: field.dataSource || [] }}>
|
||||
<FilterContext.Provider value={{ field, fieldSchema, dynamicComponent, options: field.dataSource || [] }}>
|
||||
<FilterGroup {...props} />
|
||||
</FilterContext.Provider>
|
||||
<pre>{JSON.stringify(field.value, null, 2)}</pre>
|
||||
|
||||
@ -2,6 +2,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
|
||||
import { observer, useField } from '@formily/react';
|
||||
import { Cascader, Select, Space } from 'antd';
|
||||
import React, { useContext } from 'react';
|
||||
import { useCompile } from '../..';
|
||||
import { RemoveConditionContext } from './context';
|
||||
import { DynamicComponent } from './DynamicComponent';
|
||||
import { useValues } from './useValues';
|
||||
@ -10,6 +11,7 @@ export const FilterItem = observer((props: any) => {
|
||||
const field = useField<any>();
|
||||
const remove = useContext(RemoveConditionContext);
|
||||
const { option, options, dataIndex, operator, setDataIndex, setOperator, value, setValue } = useValues();
|
||||
const compile = useCompile();
|
||||
return (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<Space>
|
||||
@ -25,14 +27,14 @@ export const FilterItem = observer((props: any) => {
|
||||
changeOnSelect={false}
|
||||
key={field.address.toString()}
|
||||
value={dataIndex}
|
||||
options={options}
|
||||
options={compile(options)}
|
||||
onChange={(value) => {
|
||||
setDataIndex(value);
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
value={operator}
|
||||
options={option?.operators}
|
||||
options={compile(option?.operators)}
|
||||
onChange={(value) => {
|
||||
setOperator(value);
|
||||
}}
|
||||
|
||||
@ -1,10 +1,15 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { useFieldSchema, useForm } from '@formily/react';
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDesignable } from '../../hooks';
|
||||
|
||||
export const SaveDefaultValue = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const { dn, refresh } = useDesignable();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const form = useForm();
|
||||
return (
|
||||
<Button
|
||||
className={css`
|
||||
@ -12,6 +17,22 @@ export const SaveDefaultValue = (props) => {
|
||||
color: rgb(241, 139, 98);
|
||||
`}
|
||||
type={'dashed'}
|
||||
onClick={() => {
|
||||
const filterSchema = fieldSchema?.parent?.parent?.parent?.properties?.filter;
|
||||
if (!filterSchema) {
|
||||
return;
|
||||
}
|
||||
const defaultValue = form.values.filter;
|
||||
dn.emit('patch', {
|
||||
schema: {
|
||||
'x-uid': filterSchema['x-uid'],
|
||||
default: defaultValue,
|
||||
},
|
||||
});
|
||||
dn.refresh();
|
||||
filterSchema.default = defaultValue;
|
||||
console.log('filterSchema', defaultValue);
|
||||
}}
|
||||
>
|
||||
{t('Save conditions')}
|
||||
</Button>
|
||||
|
||||
@ -1,4 +1,13 @@
|
||||
import { ObjectField } from '@formily/core';
|
||||
import { Schema } from '@formily/react';
|
||||
import { createContext } from 'react';
|
||||
|
||||
export interface FilterContextProps {
|
||||
field?: ObjectField;
|
||||
fieldSchema?: Schema;
|
||||
dynamicComponent?: any;
|
||||
options?: any[];
|
||||
}
|
||||
|
||||
export const RemoveConditionContext = createContext(null);
|
||||
export const FilterContext = createContext(null);
|
||||
export const FilterContext = createContext<FilterContextProps>(null);
|
||||
|
||||
@ -19,10 +19,10 @@ export const useValues = () => {
|
||||
}
|
||||
const values = flat(field.value || {}, { maxDepth });
|
||||
const value = Object.values<any>(values).shift();
|
||||
const findOption = (dataIndex) => {
|
||||
const findOption = (dataIndex = []) => {
|
||||
let items = options;
|
||||
let option;
|
||||
dataIndex.forEach((name, index) => {
|
||||
dataIndex?.forEach?.((name, index) => {
|
||||
const item = items.find((item) => item.name === name);
|
||||
if (item) {
|
||||
option = item;
|
||||
@ -44,6 +44,10 @@ export const useValues = () => {
|
||||
component: [Input, {}],
|
||||
// 当 dataIndex 变化，value 清空
|
||||
setDataIndex(di: string[]) {
|
||||
if (!di) {
|
||||
field.value = {};
|
||||
return;
|
||||
}
|
||||
const option = findOption(di);
|
||||
const op = option?.operators?.[0]?.value || '$eq';
|
||||
field.value = flat.unflatten({
|
||||
|
||||
@ -1,9 +1,73 @@
|
||||
import { Switch } from 'antd';
|
||||
import flat from 'flat';
|
||||
import React from 'react';
|
||||
import { SchemaInitializer } from '../../SchemaInitializer';
|
||||
import { useCurrentSchema } from '../utils';
|
||||
|
||||
const schema = {
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {
|
||||
popover: true,
|
||||
},
|
||||
type: 'void',
|
||||
title: '{{t("Filter")}}',
|
||||
properties: {
|
||||
popover: {
|
||||
type: 'void',
|
||||
'x-decorator': 'Form',
|
||||
'x-decorator-props': {},
|
||||
'x-component': 'Action.Popover',
|
||||
'x-component-props': {
|
||||
trigger: 'click',
|
||||
placement: 'bottomLeft',
|
||||
},
|
||||
properties: {
|
||||
filter: {
|
||||
type: 'object',
|
||||
default: {},
|
||||
'x-component': 'Filter',
|
||||
'x-component-props': {
|
||||
useDataSource: '{{cm.useFilterDataSource}}',
|
||||
},
|
||||
},
|
||||
footer: {
|
||||
type: 'void',
|
||||
'x-component': 'Action.Popover.Footer',
|
||||
properties: {
|
||||
actions: {
|
||||
type: 'void',
|
||||
'x-component': 'ActionBar',
|
||||
properties: {
|
||||
saveDefault: {
|
||||
type: 'void',
|
||||
'x-component': 'Filter.SaveDefaultValue',
|
||||
'x-component-props': {},
|
||||
},
|
||||
cancel: {
|
||||
type: 'void',
|
||||
title: '{{t("Cancel")}}',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {
|
||||
useAction: '{{cm.useCancelFilterAction}}',
|
||||
},
|
||||
},
|
||||
submit: {
|
||||
type: 'void',
|
||||
title: '{{t("Submit")}}',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {
|
||||
type: 'primary',
|
||||
useAction: '{{cm.useFilterAction}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const FilterActionInitializer = (props) => {
|
||||
const { item, insert } = props;
|
||||
const { exists, remove } = useCurrentSchema(item.schema['x-action'], 'x-action', item.find);
|
||||
@ -15,22 +79,8 @@ export const FilterActionInitializer = (props) => {
|
||||
return remove();
|
||||
}
|
||||
insert({
|
||||
...schema,
|
||||
...item.schema,
|
||||
name: 'filter',
|
||||
type: 'object',
|
||||
default: flat.unflatten({
|
||||
$or: [
|
||||
{ 'aa.$eq': 'b' },
|
||||
{ 'bb.field.$eq': ['aabb', 'aaa'] },
|
||||
{
|
||||
'bb.field': {
|
||||
$eq: ['aabb', 'aaa'],
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
'x-component': 'Filter',
|
||||
'x-component-props': {},
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user