mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 20:40:15 +02:00
Add advanced filters base component
This commit is contained in:
jeffvli
@@ -0,0 +1,467 @@
|
||||
import { useState } from 'react';
|
||||
import { Box, Stack, Group } from '@mantine/core';
|
||||
import _ from 'lodash';
|
||||
import { nanoid } from 'nanoid/non-secure';
|
||||
import { RiAddLine, RiMore2Line, RiSubtractLine } from 'react-icons/ri';
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
NumberInput,
|
||||
Select,
|
||||
TextInput,
|
||||
} from '@/renderer/components';
|
||||
|
||||
enum FilterGroupType {
|
||||
AND = 'and',
|
||||
OR = 'or',
|
||||
}
|
||||
|
||||
type AdvancedFilterRule = {
|
||||
field: string;
|
||||
operator: string;
|
||||
uniqueId: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
type AdvancedFilterGroup = {
|
||||
group: AdvancedFilterGroup[];
|
||||
rules: AdvancedFilterRule[];
|
||||
type: FilterGroupType;
|
||||
uniqueId: string;
|
||||
};
|
||||
|
||||
const DATE_FILTER_OPTIONS_DATA = [
|
||||
{ label: 'is before', value: '<' },
|
||||
{ label: 'is after', value: '>' },
|
||||
];
|
||||
|
||||
const STRING_FILTER_OPTIONS_DATA = [
|
||||
{ label: 'contains', value: '~' },
|
||||
{ label: 'does not contain', value: '!~' },
|
||||
{ label: 'is', value: '=' },
|
||||
{ label: 'is not', value: '!=' },
|
||||
{ label: 'starts with', value: '^' },
|
||||
{ label: 'ends with', value: '$' },
|
||||
];
|
||||
|
||||
const NUMBER_FILTER_OPTIONS_DATA = [
|
||||
{ label: 'is', value: '=' },
|
||||
{ label: 'is not', value: '!=' },
|
||||
{ label: 'is greater than', value: '>' },
|
||||
{ label: 'is less than', value: '<' },
|
||||
];
|
||||
|
||||
const FILTER_GROUP_OPTIONS_DATA = [
|
||||
{
|
||||
label: 'Match ALL',
|
||||
value: FilterGroupType.AND,
|
||||
},
|
||||
{
|
||||
label: 'Match ANY',
|
||||
value: FilterGroupType.OR,
|
||||
},
|
||||
];
|
||||
|
||||
const FILTER_OPTIONS_DATA = [
|
||||
{
|
||||
label: 'Artist Title',
|
||||
value: 'artist.title',
|
||||
},
|
||||
{
|
||||
label: 'Artist Rating',
|
||||
value: 'artist.rating',
|
||||
},
|
||||
{
|
||||
label: 'Artist Genre',
|
||||
value: 'artist.genre',
|
||||
},
|
||||
{
|
||||
label: 'Album Title',
|
||||
value: 'album.title',
|
||||
},
|
||||
{
|
||||
label: 'Album Genre',
|
||||
value: 'album.genre',
|
||||
},
|
||||
{
|
||||
label: 'Album Rating',
|
||||
value: 'album.rating',
|
||||
},
|
||||
{
|
||||
label: 'Album Year',
|
||||
value: 'album.year',
|
||||
},
|
||||
{
|
||||
label: 'Album Release Date',
|
||||
value: 'album.releaseDate',
|
||||
},
|
||||
{
|
||||
label: 'Album Plays',
|
||||
value: 'album.playCount',
|
||||
},
|
||||
{
|
||||
label: 'Album Date Added',
|
||||
value: 'album.dateAdded',
|
||||
},
|
||||
{
|
||||
label: 'Track Title',
|
||||
value: 'track.title',
|
||||
},
|
||||
{
|
||||
label: 'Track Plays',
|
||||
value: 'track.plays',
|
||||
},
|
||||
{
|
||||
label: 'Track Rating',
|
||||
value: 'track.rating',
|
||||
},
|
||||
];
|
||||
|
||||
const OPTIONS_MAP = {
|
||||
'album.dateAdded': {
|
||||
type: 'date',
|
||||
},
|
||||
'album.favorite': {
|
||||
type: 'boolean',
|
||||
},
|
||||
'album.genre': {
|
||||
type: 'string',
|
||||
},
|
||||
'album.playCount': {
|
||||
type: 'number',
|
||||
},
|
||||
'album.rating': {
|
||||
type: 'number',
|
||||
},
|
||||
'album.releaseDate': {
|
||||
type: 'date',
|
||||
},
|
||||
'album.title': {
|
||||
type: 'string',
|
||||
},
|
||||
'album.year': {
|
||||
type: 'number',
|
||||
},
|
||||
'artist.genre': {
|
||||
type: 'string',
|
||||
},
|
||||
'artist.rating': {
|
||||
type: 'number',
|
||||
},
|
||||
'artist.title': {
|
||||
type: 'string',
|
||||
},
|
||||
'track.plays': {
|
||||
type: 'number',
|
||||
},
|
||||
'track.rating': {
|
||||
type: 'number',
|
||||
},
|
||||
'track.title': {
|
||||
type: 'string',
|
||||
},
|
||||
};
|
||||
|
||||
const FilterOption = ({ level, onDeleteRule, uniqueId, groupIndex }: any) => {
|
||||
const [selectedOption, setSelectedOption] = useState<
|
||||
string | null | typeof OPTIONS_MAP
|
||||
>(FILTER_OPTIONS_DATA[0].value);
|
||||
|
||||
const handleDeleteRule = () => {
|
||||
onDeleteRule({ groupIndex, level, uniqueId });
|
||||
};
|
||||
|
||||
const filterMap = {
|
||||
date: <Select data={DATE_FILTER_OPTIONS_DATA} size="xs" width={150} />,
|
||||
number: <Select data={NUMBER_FILTER_OPTIONS_DATA} size="xs" width={150} />,
|
||||
string: <Select data={STRING_FILTER_OPTIONS_DATA} size="xs" width={150} />,
|
||||
};
|
||||
|
||||
const filterInputMap = {
|
||||
'album.dateAdded': <TextInput size="xs" width={150} />,
|
||||
'album.genre': <Select searchable data={['hello']} size="xs" width={150} />,
|
||||
'album.playCount': <NumberInput size="xs" width={150} />,
|
||||
'album.rating': <NumberInput size="xs" width={150} />,
|
||||
'album.releaseDate': <TextInput size="xs" width={150} />,
|
||||
'album.title': <TextInput size="xs" width={150} />,
|
||||
'album.year': <NumberInput size="xs" width={150} />,
|
||||
'artist.genre': <Select searchable data={[]} size="xs" width={150} />,
|
||||
'artist.rating': <NumberInput size="xs" width={150} />,
|
||||
'artist.title': <TextInput size="xs" width={150} />,
|
||||
'track.plays': <NumberInput size="xs" width={150} />,
|
||||
'track.rating': <NumberInput size="xs" width={150} />,
|
||||
'track.title': <TextInput size="xs" width={150} />,
|
||||
};
|
||||
|
||||
return (
|
||||
<Group ml={level === 0 ? '10px' : `${level * 10}px`}>
|
||||
<Select
|
||||
data={FILTER_OPTIONS_DATA}
|
||||
size="xs"
|
||||
onChange={setSelectedOption}
|
||||
/>
|
||||
{selectedOption &&
|
||||
filterMap[
|
||||
OPTIONS_MAP[selectedOption as keyof typeof OPTIONS_MAP]
|
||||
.type as keyof typeof filterMap
|
||||
]}
|
||||
{selectedOption &&
|
||||
filterInputMap[selectedOption as keyof typeof filterInputMap]}
|
||||
<Button
|
||||
px={5}
|
||||
size="xs"
|
||||
tooltip={{ label: 'Remove rule' }}
|
||||
variant="default"
|
||||
onClick={handleDeleteRule}
|
||||
>
|
||||
<RiSubtractLine size={20} />
|
||||
</Button>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
type AddArgs = {
|
||||
groupIndex: number[];
|
||||
level: number;
|
||||
};
|
||||
|
||||
type DeleteArgs = {
|
||||
groupIndex: number[];
|
||||
level: number;
|
||||
uniqueId: string;
|
||||
};
|
||||
|
||||
interface FilterGroupProps {
|
||||
data: AdvancedFilterGroup;
|
||||
groupIndex: number[];
|
||||
level: number;
|
||||
onAddRule: (args: AddArgs) => void;
|
||||
onAddRuleGroup: (args: AddArgs) => void;
|
||||
onDeleteRule: (args: DeleteArgs) => void;
|
||||
onDeleteRuleGroup: (args: DeleteArgs) => void;
|
||||
uniqueId: string;
|
||||
}
|
||||
|
||||
const FilterGroup = ({
|
||||
data,
|
||||
level,
|
||||
onAddRule,
|
||||
onDeleteRuleGroup,
|
||||
onDeleteRule,
|
||||
onAddRuleGroup,
|
||||
groupIndex,
|
||||
uniqueId,
|
||||
}: FilterGroupProps) => {
|
||||
const handleAddRule = () => {
|
||||
onAddRule({ groupIndex, level });
|
||||
};
|
||||
|
||||
const handleAddRuleGroup = () => {
|
||||
onAddRuleGroup({ groupIndex, level });
|
||||
};
|
||||
|
||||
const handleDeleteRuleGroup = () => {
|
||||
onDeleteRuleGroup({ groupIndex, level, uniqueId });
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack ml={`${level * 10}px`}>
|
||||
<Group>
|
||||
<Select
|
||||
data={FILTER_GROUP_OPTIONS_DATA}
|
||||
defaultValue={FILTER_GROUP_OPTIONS_DATA[0].value}
|
||||
size="xs"
|
||||
/>
|
||||
<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>
|
||||
{data.rules.map((rule: AdvancedFilterRule) => (
|
||||
<>
|
||||
<FilterOption
|
||||
key={rule.uniqueId}
|
||||
groupIndex={groupIndex || []}
|
||||
level={level}
|
||||
uniqueId={rule.uniqueId}
|
||||
onAddRule={handleAddRule}
|
||||
onDeleteRule={onDeleteRule}
|
||||
/>
|
||||
</>
|
||||
))}
|
||||
{data.group && (
|
||||
<>
|
||||
{data.group.map((group: AdvancedFilterGroup, index: number) => (
|
||||
<FilterGroup
|
||||
key={group.uniqueId}
|
||||
data={group}
|
||||
groupIndex={[...(groupIndex || []), index]}
|
||||
level={level + 1}
|
||||
uniqueId={group.uniqueId}
|
||||
onAddRule={onAddRule}
|
||||
onAddRuleGroup={onAddRuleGroup}
|
||||
onDeleteRule={onDeleteRule}
|
||||
onDeleteRuleGroup={onDeleteRuleGroup}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export const AdvancedFilters = () => {
|
||||
const [filters, setFilters] = useState<AdvancedFilterGroup>({
|
||||
group: [],
|
||||
rules: [],
|
||||
type: FilterGroupType.AND,
|
||||
uniqueId: nanoid(),
|
||||
});
|
||||
|
||||
const handleAddRuleGroup = (args: AddArgs) => {
|
||||
const { level, groupIndex } = args;
|
||||
const filtersCopy = { ...filters };
|
||||
|
||||
const getPath = (level: number) => {
|
||||
if (level === 0) return 'group';
|
||||
|
||||
const str = [];
|
||||
for (const index of groupIndex) {
|
||||
str.push(`group[${index}]`);
|
||||
}
|
||||
|
||||
return `${str.join('.')}.group`;
|
||||
};
|
||||
|
||||
const path = getPath(level);
|
||||
const updatedFilters = _.set(filtersCopy, path, [
|
||||
..._.get(filtersCopy, path),
|
||||
{
|
||||
group: [],
|
||||
rules: [],
|
||||
type: 'push',
|
||||
uniqueId: nanoid(),
|
||||
},
|
||||
]);
|
||||
|
||||
setFilters(updatedFilters);
|
||||
};
|
||||
|
||||
const handleDeleteRuleGroup = (args: DeleteArgs) => {
|
||||
const { uniqueId, level, groupIndex } = args;
|
||||
const filtersCopy = { ...filters };
|
||||
|
||||
const getPath = (level: number) => {
|
||||
if (level === 0) return 'group';
|
||||
|
||||
const str = [];
|
||||
for (let i = 0; i < groupIndex.length; i += 1) {
|
||||
if (i !== groupIndex.length - 1) {
|
||||
str.push(`group[${groupIndex[i]}]`);
|
||||
} else {
|
||||
str.push(`group`);
|
||||
}
|
||||
}
|
||||
|
||||
return `${str.join('.')}`;
|
||||
};
|
||||
|
||||
const path = getPath(level);
|
||||
|
||||
const updatedFilters = _.set(filtersCopy, path, [
|
||||
..._.get(filtersCopy, path).filter(
|
||||
(group: AdvancedFilterGroup) => group.uniqueId !== uniqueId
|
||||
),
|
||||
]);
|
||||
|
||||
setFilters(updatedFilters);
|
||||
};
|
||||
|
||||
const handleAddRule = (args: AddArgs) => {
|
||||
const { level, groupIndex } = args;
|
||||
const filtersCopy = { ...filters };
|
||||
|
||||
const getPath = (level: number) => {
|
||||
if (level === 0) return 'rules';
|
||||
|
||||
const str = [];
|
||||
for (const index of groupIndex) {
|
||||
str.push(`group[${index}]`);
|
||||
}
|
||||
|
||||
return `${str.join('.')}.rules`;
|
||||
};
|
||||
|
||||
const path = getPath(level);
|
||||
const updatedFilters = _.set(filtersCopy, path, [
|
||||
..._.get(filtersCopy, path),
|
||||
{ filter: 'newrule', uniqueId: nanoid() },
|
||||
]);
|
||||
|
||||
setFilters(updatedFilters);
|
||||
};
|
||||
|
||||
const handleDeleteRule = (args: DeleteArgs) => {
|
||||
const { uniqueId, level, groupIndex } = args;
|
||||
const filtersCopy = { ...filters };
|
||||
|
||||
const getPath = (level: number) => {
|
||||
if (level === 0) return 'rules';
|
||||
|
||||
const str = [];
|
||||
for (const index of groupIndex) {
|
||||
str.push(`group[${index}]`);
|
||||
}
|
||||
|
||||
return `${str.join('.')}.rules`;
|
||||
};
|
||||
|
||||
const path = getPath(level);
|
||||
const updatedFilters = _.set(
|
||||
filtersCopy,
|
||||
path,
|
||||
_.get(filtersCopy, path).filter(
|
||||
(rule: AdvancedFilterRule) => rule.uniqueId !== uniqueId
|
||||
)
|
||||
);
|
||||
|
||||
setFilters(updatedFilters);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box m={10}>
|
||||
<FilterGroup
|
||||
data={filters}
|
||||
groupIndex={[]}
|
||||
level={0}
|
||||
uniqueId={filters.uniqueId}
|
||||
onAddRule={handleAddRule}
|
||||
onAddRuleGroup={handleAddRuleGroup}
|
||||
onDeleteRule={handleDeleteRule}
|
||||
onDeleteRuleGroup={handleDeleteRuleGroup}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user