mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 02:13:33 +00:00
temp
This commit is contained in:
jeffvli
parent
16433457ad
commit
65974dbf28
4 changed files with 958 additions and 0 deletions
241
src/renderer/components/query-builder/index.tsx
Normal file
241
src/renderer/components/query-builder/index.tsx
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
import { Group, Stack } from '@mantine/core';
|
||||
import { Select } from '/@/renderer/components/select';
|
||||
import { FilterGroupType } from '/@/renderer/types';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { RiAddLine, RiMore2Line } from 'react-icons/ri';
|
||||
import { Button } from '/@/renderer/components/button';
|
||||
import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
|
||||
import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-builder-option';
|
||||
|
||||
export type AdvancedFilterGroup = {
|
||||
children: AdvancedFilterGroup[];
|
||||
rules: AdvancedFilterRule[];
|
||||
type: FilterGroupType;
|
||||
uniqueId: string;
|
||||
};
|
||||
|
||||
export type AdvancedFilterRule = {
|
||||
field?: string | null;
|
||||
operator?: string | null;
|
||||
uniqueId: string;
|
||||
value?: string | number | Date | undefined | null | any;
|
||||
};
|
||||
|
||||
const FILTER_GROUP_OPTIONS_DATA = [
|
||||
{
|
||||
label: 'Match all',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
label: 'Match any',
|
||||
value: 'any',
|
||||
},
|
||||
];
|
||||
|
||||
// const queryJson = [
|
||||
// {
|
||||
// any: [{ is: { loved: true } }, { gt: { rating: 3 } }],
|
||||
// },
|
||||
// { inTheRange: { year: [1981, 1990] } },
|
||||
// ];
|
||||
|
||||
// const parseQuery = (query: Record<string, any>[]) => {
|
||||
// // for (const ruleset in query) {
|
||||
// // // console.log('key', key);
|
||||
// // // console.log('query[key]', query[key]);
|
||||
// // // console.log('Object.keys(query[key])', Object.keys(query[key]));
|
||||
// // // console.log('Object.values(query[key])', Object.values(query[key]));
|
||||
// // // console.log('Object.entries(query[key])', Object.entries(query[key]));
|
||||
|
||||
// // const keys = Object.keys(query[ruleset]);
|
||||
// // }
|
||||
|
||||
// const res = flatMapDeep(query, flatten);
|
||||
// console.log('res', res);
|
||||
|
||||
// return res;
|
||||
// };
|
||||
|
||||
// const OperatorSelect = ({ value, onChange }: any) => {
|
||||
// const handleChange = (e: any) => {
|
||||
// onChange(e);
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <Select
|
||||
// data={operators}
|
||||
// label="Operator"
|
||||
// value={value}
|
||||
// onChange={handleChange}
|
||||
// />
|
||||
// );
|
||||
// };
|
||||
|
||||
type AddArgs = {
|
||||
groupIndex: number[];
|
||||
groupValue: string;
|
||||
level: number;
|
||||
};
|
||||
|
||||
type DeleteArgs = {
|
||||
groupIndex: number[];
|
||||
groupValue: string;
|
||||
level: number;
|
||||
uniqueId: string;
|
||||
};
|
||||
|
||||
interface QueryBuilderProps {
|
||||
data: Record<string, any>;
|
||||
filters: { label: string; value: string }[];
|
||||
groupIndex: number[];
|
||||
level: number;
|
||||
onAddRule: (args: AddArgs) => void;
|
||||
onAddRuleGroup: (args: AddArgs) => void;
|
||||
onChangeField: (args: any) => void;
|
||||
onChangeOperator: (args: any) => void;
|
||||
onChangeType: (args: any) => void;
|
||||
onChangeValue: (args: any) => void;
|
||||
onDeleteRule: (args: DeleteArgs) => void;
|
||||
onDeleteRuleGroup: (args: DeleteArgs) => void;
|
||||
uniqueId: string;
|
||||
}
|
||||
|
||||
export const QueryBuilder = ({
|
||||
data,
|
||||
level,
|
||||
onAddRule,
|
||||
onDeleteRuleGroup,
|
||||
onDeleteRule,
|
||||
onAddRuleGroup,
|
||||
onChangeType,
|
||||
onChangeField,
|
||||
onChangeOperator,
|
||||
onChangeValue,
|
||||
groupIndex,
|
||||
uniqueId,
|
||||
filters,
|
||||
}: QueryBuilderProps) => {
|
||||
const groupValue = Object.keys(data)[0];
|
||||
const rules = data[groupValue].filter((rule: any) => !rule.any && !rule.all);
|
||||
const group = data[groupValue].filter((rule: any) => rule.any || rule.all);
|
||||
|
||||
const handleAddRule = () => {
|
||||
onAddRule({ groupIndex, groupValue, level });
|
||||
};
|
||||
|
||||
const handleAddRuleGroup = () => {
|
||||
onAddRuleGroup({ groupIndex, groupValue, level });
|
||||
};
|
||||
|
||||
const handleDeleteRuleGroup = () => {
|
||||
onDeleteRuleGroup({ groupIndex, groupValue, level, uniqueId });
|
||||
};
|
||||
|
||||
const handleChangeType = (value: string | null) => {
|
||||
onChangeType({ groupIndex, level, value });
|
||||
};
|
||||
|
||||
console.log('rules :>> ', rules);
|
||||
|
||||
return (
|
||||
<Stack ml={`${level * 10}px`}>
|
||||
<Group>
|
||||
<Select
|
||||
data={FILTER_GROUP_OPTIONS_DATA}
|
||||
maxWidth={175}
|
||||
size="xs"
|
||||
value={groupValue}
|
||||
width="20%"
|
||||
onChange={handleChangeType}
|
||||
/>
|
||||
<Button
|
||||
px={5}
|
||||
size="xs"
|
||||
tooltip={{ label: 'Add rule' }}
|
||||
variant="default"
|
||||
onClick={handleAddRule}
|
||||
>
|
||||
<RiAddLine size={20} />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
p={0}
|
||||
size="xs"
|
||||
variant="subtle"
|
||||
>
|
||||
<RiMore2Line size={20} />
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<DropdownMenu.Item onClick={handleAddRuleGroup}>Add rule group</DropdownMenu.Item>
|
||||
{level > 0 && (
|
||||
<DropdownMenu.Item onClick={handleDeleteRuleGroup}>
|
||||
Remove rule group
|
||||
</DropdownMenu.Item>
|
||||
)}
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
</Group>
|
||||
<AnimatePresence
|
||||
key="advanced-filter-option"
|
||||
initial={false}
|
||||
>
|
||||
{rules.map((rule: AdvancedFilterRule, i: number) => (
|
||||
<motion.div
|
||||
key={`rule-${level}-${Object.keys(rule)[0]}`}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -25 }}
|
||||
initial={{ opacity: 0, x: -25 }}
|
||||
transition={{ duration: 0.2, ease: 'easeInOut' }}
|
||||
>
|
||||
<QueryBuilderOption
|
||||
data={rule}
|
||||
filters={filters}
|
||||
groupIndex={groupIndex || []}
|
||||
groupValue={groupValue}
|
||||
level={level}
|
||||
noRemove={data?.rules?.length === 1}
|
||||
onChangeField={onChangeField}
|
||||
onChangeOperator={onChangeOperator}
|
||||
onChangeValue={onChangeValue}
|
||||
onDeleteRule={onDeleteRule}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
{group && (
|
||||
<AnimatePresence
|
||||
key="advanced-filter-group"
|
||||
initial={false}
|
||||
>
|
||||
{group.map((group: AdvancedFilterGroup, index: number) => (
|
||||
<motion.div
|
||||
key={`group-${level}-${index}`}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -25 }}
|
||||
initial={{ opacity: 0, x: -25 }}
|
||||
transition={{ duration: 0.2, ease: 'easeInOut' }}
|
||||
>
|
||||
<QueryBuilder
|
||||
data={group}
|
||||
filters={filters}
|
||||
groupIndex={[...(groupIndex || []), index]}
|
||||
level={level + 1}
|
||||
uniqueId={group.uniqueId}
|
||||
onAddRule={onAddRule}
|
||||
onAddRuleGroup={onAddRuleGroup}
|
||||
onChangeField={onChangeField}
|
||||
onChangeOperator={onChangeOperator}
|
||||
onChangeType={onChangeType}
|
||||
onChangeValue={onChangeValue}
|
||||
onDeleteRule={onDeleteRule}
|
||||
onDeleteRuleGroup={onDeleteRuleGroup}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
380
src/renderer/components/query-builder/query-builder-option.tsx
Normal file
380
src/renderer/components/query-builder/query-builder-option.tsx
Normal file
|
|
@ -0,0 +1,380 @@
|
|||
import { Group } from '@mantine/core';
|
||||
import dayjs from 'dayjs';
|
||||
import { RiSubtractLine } from 'react-icons/ri';
|
||||
import { Button } from '/@/renderer/components/button';
|
||||
import { TextInput } from '/@/renderer/components/input';
|
||||
import { Select } from '/@/renderer/components/select';
|
||||
import { AdvancedFilterRule } from '/@/renderer/types';
|
||||
|
||||
const operators = [
|
||||
{ label: 'is', value: 'is' },
|
||||
{ label: 'is not', value: 'isNot' },
|
||||
{ label: 'is greater than', value: 'gt' },
|
||||
{ label: 'is less than', value: 'lt' },
|
||||
{ label: 'contains', value: 'contains' },
|
||||
{ label: 'does not contain', value: 'notContains' },
|
||||
{ label: 'starts with', value: 'startsWith' },
|
||||
{ label: 'ends with', value: 'endsWith' },
|
||||
{ label: 'is in the range', value: 'inTheRange' },
|
||||
{ label: 'before', value: 'before' },
|
||||
{ label: 'after', value: 'after' },
|
||||
{ label: 'is in the last', value: 'inTheLast' },
|
||||
{ label: 'is not in the last', value: 'notInTheLast' },
|
||||
];
|
||||
|
||||
type DeleteArgs = {
|
||||
groupIndex: number[];
|
||||
groupValue: string;
|
||||
level: number;
|
||||
uniqueId: string;
|
||||
};
|
||||
|
||||
interface QueryOptionProps {
|
||||
data: AdvancedFilterRule;
|
||||
filters: { label: string; value: string }[];
|
||||
groupIndex: number[];
|
||||
groupValue: string;
|
||||
level: number;
|
||||
noRemove: boolean;
|
||||
onChangeField: (args: any) => void;
|
||||
onChangeOperator: (args: any) => void;
|
||||
onChangeValue: (args: any) => void;
|
||||
onDeleteRule: (args: DeleteArgs) => void;
|
||||
}
|
||||
|
||||
export const QueryBuilderOption = ({
|
||||
data,
|
||||
filters,
|
||||
level,
|
||||
onDeleteRule,
|
||||
groupIndex,
|
||||
groupValue,
|
||||
noRemove,
|
||||
onChangeField,
|
||||
onChangeOperator,
|
||||
onChangeValue,
|
||||
}: QueryOptionProps) => {
|
||||
const { field, operator, uniqueId, value } = data;
|
||||
|
||||
const handleDeleteRule = () => {
|
||||
onDeleteRule({ groupIndex, groupValue, level, uniqueId });
|
||||
};
|
||||
|
||||
const handleChangeField = (e: any) => {
|
||||
onChangeField({ groupIndex, level, uniqueId, value: e });
|
||||
};
|
||||
|
||||
const handleChangeOperator = (e: any) => {
|
||||
onChangeOperator({ groupIndex, level, uniqueId, value: e });
|
||||
};
|
||||
|
||||
const handleChangeValue = (e: any) => {
|
||||
const isDirectValue =
|
||||
typeof e === 'string' ||
|
||||
typeof e === 'number' ||
|
||||
typeof e === 'undefined' ||
|
||||
typeof e === null;
|
||||
|
||||
if (isDirectValue) {
|
||||
return onChangeValue({
|
||||
groupIndex,
|
||||
level,
|
||||
uniqueId,
|
||||
value: e,
|
||||
});
|
||||
}
|
||||
|
||||
const isDate = e instanceof Date;
|
||||
|
||||
if (isDate) {
|
||||
return onChangeValue({
|
||||
groupIndex,
|
||||
level,
|
||||
uniqueId,
|
||||
value: dayjs(e).format('YYYY-MM-DD'),
|
||||
});
|
||||
}
|
||||
|
||||
return onChangeValue({
|
||||
groupIndex,
|
||||
level,
|
||||
uniqueId,
|
||||
value: e.currentTarget.value,
|
||||
});
|
||||
};
|
||||
|
||||
// const filterOperatorMap = {
|
||||
// date: (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={DATE_FILTER_OPTIONS_DATA}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={operator}
|
||||
// width="20%"
|
||||
// onChange={handleChangeOperator}
|
||||
// />
|
||||
// ),
|
||||
// id: (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={ID_FILTER_OPTIONS_DATA}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={operator}
|
||||
// width="20%"
|
||||
// onChange={handleChangeOperator}
|
||||
// />
|
||||
// ),
|
||||
// number: (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={NUMBER_FILTER_OPTIONS_DATA}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={operator}
|
||||
// width="20%"
|
||||
// onChange={handleChangeOperator}
|
||||
// />
|
||||
// ),
|
||||
// string: (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={STRING_FILTER_OPTIONS_DATA}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={operator}
|
||||
// width="20%"
|
||||
// onChange={handleChangeOperator}
|
||||
// />
|
||||
// ),
|
||||
// };
|
||||
|
||||
// const filterInputValueMap = {
|
||||
// 'albumArtists.genres.id': (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={genresData?.albumArtist || []}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albumArtists.name': (
|
||||
// <TextInput
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albumArtists.ratings.value': (
|
||||
// <NumberInput
|
||||
// max={5}
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.dateAdded': (
|
||||
// <DatePicker
|
||||
// initialLevel="year"
|
||||
// maxDate={dayjs(new Date()).year(3000).toDate()}
|
||||
// maxWidth={175}
|
||||
// minDate={dayjs(new Date()).year(1950).toDate()}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.genres.id': (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={genresData?.album || []}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.name': (
|
||||
// <TextInput
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.playCount': (
|
||||
// <NumberInput
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={(e) => handleChangeValue(e)}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.ratings.value': (
|
||||
// <NumberInput
|
||||
// max={5}
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.releaseDate': (
|
||||
// <DatePicker
|
||||
// initialLevel="year"
|
||||
// maxDate={dayjs(new Date()).year(3000).toDate()}
|
||||
// maxWidth={175}
|
||||
// minDate={dayjs(new Date()).year(1950).toDate()}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.releaseYear': (
|
||||
// <NumberInput
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'artists.genres.id': (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={genresData?.artist || []}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'artists.name': (
|
||||
// <TextInput
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'artists.ratings.value': (
|
||||
// <NumberInput
|
||||
// max={5}
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'songs.genres.id': (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={genresData?.song || []}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'songs.name': (
|
||||
// <TextInput
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'songs.playCount': (
|
||||
// <NumberInput
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'songs.ratings.value': (
|
||||
// <NumberInput
|
||||
// max={5}
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// };
|
||||
|
||||
const ml = (level + 1) * 10 - level * 5;
|
||||
|
||||
return (
|
||||
<Group ml={ml}>
|
||||
<Select
|
||||
searchable
|
||||
data={filters}
|
||||
maxWidth={175}
|
||||
size="xs"
|
||||
value={field}
|
||||
width="20%"
|
||||
onChange={handleChangeField}
|
||||
/>
|
||||
<Select
|
||||
searchable
|
||||
data={operators}
|
||||
// disabled={!field}
|
||||
maxWidth={175}
|
||||
size="xs"
|
||||
value={field}
|
||||
width="20%"
|
||||
onChange={handleChangeField}
|
||||
/>
|
||||
{field ? (
|
||||
<></>
|
||||
) : (
|
||||
<TextInput
|
||||
disabled
|
||||
maxWidth={175}
|
||||
size="xs"
|
||||
width="20%"
|
||||
/>
|
||||
)}
|
||||
{/* // filterOperatorMap[ // OPTIONS_MAP[field as keyof typeof OPTIONS_MAP].type as keyof typeof
|
||||
filterOperatorMap // ] */}
|
||||
<Button
|
||||
disabled={noRemove}
|
||||
px={5}
|
||||
size="xs"
|
||||
tooltip={{ label: 'Remove rule' }}
|
||||
variant="default"
|
||||
onClick={handleDeleteRule}
|
||||
>
|
||||
<RiSubtractLine size={20} />
|
||||
</Button>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue