Jobs page: advanced filtration and implemented sorting (#4319)
Co-authored-by: Nikita Manovich <nikita.manovich@intel.com> Co-authored-by: Maya <maya17grd@gmail.com>main
Boris Sekachev
4 years ago
committed by
GitHub
parent
c07a93d1ad
commit
b5bac8c0a5
@ -0,0 +1,335 @@
|
||||
// Copyright (C) 2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import 'react-awesome-query-builder/lib/css/styles.css';
|
||||
import AntdConfig from 'react-awesome-query-builder/lib/config/antd';
|
||||
import {
|
||||
Builder, Config, ImmutableTree, Query, Utils as QbUtils,
|
||||
} from 'react-awesome-query-builder';
|
||||
import {
|
||||
DownOutlined, FilterFilled, FilterOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import Dropdown from 'antd/lib/dropdown';
|
||||
import Space from 'antd/lib/space';
|
||||
import Button from 'antd/lib/button';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox/Checkbox';
|
||||
import Menu from 'antd/lib/menu';
|
||||
|
||||
interface ResourceFilterProps {
|
||||
predefinedVisible: boolean;
|
||||
recentVisible: boolean;
|
||||
builderVisible: boolean;
|
||||
onPredefinedVisibleChange(visible: boolean): void;
|
||||
onBuilderVisibleChange(visible: boolean): void;
|
||||
onRecentVisibleChange(visible: boolean): void;
|
||||
onApplyFilter(filter: string | null): void;
|
||||
}
|
||||
|
||||
export default function ResourceFilterHOC(
|
||||
filtrationCfg: Partial<Config>,
|
||||
localStorageRecentKeyword: string,
|
||||
localStorageRecentCapacity: number,
|
||||
predefinedFilterValues: Record<string, string>,
|
||||
defaultEnabledFilters: string[],
|
||||
): React.FunctionComponent<ResourceFilterProps> {
|
||||
const config: Config = { ...AntdConfig, ...filtrationCfg };
|
||||
const defaultTree = QbUtils.checkTree(
|
||||
QbUtils.loadTree({ id: QbUtils.uuid(), type: 'group' }), config,
|
||||
) as ImmutableTree;
|
||||
|
||||
function keepFilterInLocalStorage(filter: string): void {
|
||||
if (typeof filter !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
let savedItems: string[] = [];
|
||||
try {
|
||||
savedItems = JSON.parse(localStorage.getItem(localStorageRecentKeyword) || '[]');
|
||||
if (!Array.isArray(savedItems) || savedItems.some((item: any) => typeof item !== 'string')) {
|
||||
throw new Error('Wrong filters value stored');
|
||||
}
|
||||
} catch (_: any) {
|
||||
// nothing to do
|
||||
}
|
||||
savedItems.splice(0, 0, filter);
|
||||
savedItems = Array.from(new Set(savedItems)).slice(0, localStorageRecentCapacity);
|
||||
localStorage.setItem(localStorageRecentKeyword, JSON.stringify(savedItems));
|
||||
}
|
||||
|
||||
function receiveRecentFilters(): Record<string, string> {
|
||||
let recentFilters: string[] = [];
|
||||
try {
|
||||
recentFilters = JSON.parse(localStorage.getItem(localStorageRecentKeyword) || '[]');
|
||||
if (!Array.isArray(recentFilters) || recentFilters.some((item: any) => typeof item !== 'string')) {
|
||||
throw new Error('Wrong filters value stored');
|
||||
}
|
||||
} catch (_: any) {
|
||||
// nothing to do
|
||||
}
|
||||
|
||||
return recentFilters
|
||||
.reduce((acc: Record<string, string>, val: string) => ({ ...acc, [val]: val }), {});
|
||||
}
|
||||
|
||||
const defaultAppliedFilter: {
|
||||
predefined: string[] | null;
|
||||
recent: string | null;
|
||||
built: string | null;
|
||||
} = {
|
||||
predefined: null,
|
||||
recent: null,
|
||||
built: null,
|
||||
};
|
||||
|
||||
function ResourceFilterComponent(props: ResourceFilterProps): JSX.Element {
|
||||
const {
|
||||
predefinedVisible, builderVisible, recentVisible,
|
||||
onPredefinedVisibleChange, onBuilderVisibleChange, onRecentVisibleChange, onApplyFilter,
|
||||
} = props;
|
||||
|
||||
const user = useSelector((state: CombinedState) => state.auth.user);
|
||||
const [isMounted, setIsMounted] = useState<boolean>(false);
|
||||
const [recentFilters, setRecentFilters] = useState<Record<string, string>>({});
|
||||
const [predefinedFilters, setPredefinedFilters] = useState<Record<string, string>>({});
|
||||
const [appliedFilter, setAppliedFilter] = useState<typeof defaultAppliedFilter>(defaultAppliedFilter);
|
||||
const [state, setState] = useState<ImmutableTree>(defaultTree);
|
||||
|
||||
useEffect(() => {
|
||||
setRecentFilters(receiveRecentFilters());
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
const result: Record<string, string> = {};
|
||||
for (const key of Object.keys(predefinedFilterValues)) {
|
||||
result[key] = predefinedFilterValues[key].replace('<username>', `${user.username}`);
|
||||
}
|
||||
|
||||
setPredefinedFilters(result);
|
||||
setAppliedFilter({
|
||||
...appliedFilter,
|
||||
predefined: defaultEnabledFilters
|
||||
.filter((filterKey: string) => filterKey in result)
|
||||
.map((filterKey: string) => result[filterKey]),
|
||||
});
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
function unite(filters: string[]): string {
|
||||
if (filters.length > 1) {
|
||||
return JSON.stringify({
|
||||
and: filters.map((filter: string): JSON => JSON.parse(filter)),
|
||||
});
|
||||
}
|
||||
|
||||
return filters[0];
|
||||
}
|
||||
|
||||
function isValidTree(tree: ImmutableTree): boolean {
|
||||
return (QbUtils.queryString(tree, config) || '').trim().length > 0 && QbUtils.isValidTree(tree);
|
||||
}
|
||||
|
||||
if (!isMounted) {
|
||||
// do not request jobs before until on mount hook is done
|
||||
return;
|
||||
}
|
||||
|
||||
if (appliedFilter.predefined?.length) {
|
||||
onApplyFilter(unite(appliedFilter.predefined));
|
||||
} else if (appliedFilter.recent) {
|
||||
onApplyFilter(appliedFilter.recent);
|
||||
const tree = QbUtils.loadFromJsonLogic(JSON.parse(appliedFilter.recent), config);
|
||||
if (isValidTree(tree)) {
|
||||
setState(tree);
|
||||
}
|
||||
} else if (appliedFilter.built) {
|
||||
onApplyFilter(appliedFilter.built);
|
||||
} else {
|
||||
onApplyFilter(null);
|
||||
setState(defaultTree);
|
||||
}
|
||||
}, [appliedFilter]);
|
||||
|
||||
const renderBuilder = (builderProps: any): JSX.Element => (
|
||||
<div className='query-builder-container'>
|
||||
<div className='query-builder qb-lite'>
|
||||
<Builder {...builderProps} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='cvat-jobs-page-filters'>
|
||||
<Dropdown
|
||||
destroyPopupOnHide
|
||||
visible={predefinedVisible}
|
||||
placement='bottomLeft'
|
||||
overlay={(
|
||||
<div className='cvat-jobs-page-predefined-filters-list'>
|
||||
{Object.keys(predefinedFilters).map((key: string): JSX.Element => (
|
||||
<Checkbox
|
||||
checked={appliedFilter.predefined?.includes(predefinedFilters[key])}
|
||||
onChange={(event: CheckboxChangeEvent) => {
|
||||
let updatedValue: string[] | null = appliedFilter.predefined || [];
|
||||
if (event.target.checked) {
|
||||
updatedValue.push(predefinedFilters[key]);
|
||||
} else {
|
||||
updatedValue = updatedValue
|
||||
.filter((appliedValue: string) => (
|
||||
appliedValue !== predefinedFilters[key]
|
||||
));
|
||||
}
|
||||
|
||||
if (!updatedValue.length) {
|
||||
updatedValue = null;
|
||||
}
|
||||
|
||||
setAppliedFilter({
|
||||
...defaultAppliedFilter,
|
||||
predefined: updatedValue,
|
||||
});
|
||||
}}
|
||||
key={key}
|
||||
>
|
||||
{key}
|
||||
</Checkbox>
|
||||
)) }
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<Button type='default' onClick={() => onPredefinedVisibleChange(!predefinedVisible)}>
|
||||
Quick filters
|
||||
{ appliedFilter.predefined ?
|
||||
<FilterFilled /> :
|
||||
<FilterOutlined />}
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<Dropdown
|
||||
placement='bottomRight'
|
||||
visible={builderVisible}
|
||||
destroyPopupOnHide
|
||||
overlay={(
|
||||
<div className='cvat-jobs-page-filters-builder'>
|
||||
{ Object.keys(recentFilters).length ? (
|
||||
<Dropdown
|
||||
placement='bottomRight'
|
||||
visible={recentVisible}
|
||||
destroyPopupOnHide
|
||||
overlay={(
|
||||
<div className='cvat-jobs-page-recent-filters-list'>
|
||||
<Menu selectable={false}>
|
||||
{Object.keys(recentFilters).map((key: string): JSX.Element | null => {
|
||||
const tree = QbUtils.loadFromJsonLogic(JSON.parse(key), config);
|
||||
|
||||
if (!tree) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu.Item
|
||||
key={key}
|
||||
onClick={() => {
|
||||
if (appliedFilter.recent === key) {
|
||||
setAppliedFilter(defaultAppliedFilter);
|
||||
} else {
|
||||
setAppliedFilter({
|
||||
...defaultAppliedFilter,
|
||||
recent: key,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
{QbUtils.queryString(tree, config)}
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
size='small'
|
||||
type='text'
|
||||
onClick={
|
||||
() => onRecentVisibleChange(!recentVisible)
|
||||
}
|
||||
>
|
||||
Recent
|
||||
<DownOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
) : null}
|
||||
|
||||
<Query
|
||||
{...config}
|
||||
onChange={(tree: ImmutableTree) => {
|
||||
setState(tree);
|
||||
}}
|
||||
value={state}
|
||||
renderBuilder={renderBuilder}
|
||||
/>
|
||||
<Space className='cvat-jobs-page-filters-space'>
|
||||
<Button
|
||||
disabled={!QbUtils.queryString(state, config)}
|
||||
size='small'
|
||||
onClick={() => {
|
||||
setState(defaultTree);
|
||||
setAppliedFilter({
|
||||
...appliedFilter,
|
||||
recent: null,
|
||||
built: null,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
size='small'
|
||||
type='primary'
|
||||
onClick={() => {
|
||||
const filter = QbUtils.jsonLogicFormat(state, config).logic;
|
||||
const stringified = JSON.stringify(filter);
|
||||
keepFilterInLocalStorage(stringified);
|
||||
setRecentFilters(receiveRecentFilters());
|
||||
onBuilderVisibleChange(false);
|
||||
setAppliedFilter({
|
||||
predefined: null,
|
||||
recent: null,
|
||||
built: stringified,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<Button type='default' onClick={() => onBuilderVisibleChange(!builderVisible)}>
|
||||
Filter
|
||||
{ appliedFilter.built || appliedFilter.recent ?
|
||||
<FilterFilled /> :
|
||||
<FilterOutlined />}
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<Button
|
||||
disabled={!(appliedFilter.built || appliedFilter.predefined || appliedFilter.recent)}
|
||||
size='small'
|
||||
type='link'
|
||||
onClick={() => { setAppliedFilter({ ...defaultAppliedFilter }); }}
|
||||
>
|
||||
Clear filters
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return React.memo(ResourceFilterComponent);
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
// Copyright (C) 2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import { Config } from 'react-awesome-query-builder';
|
||||
|
||||
export const config: Partial<Config> = {
|
||||
fields: {
|
||||
state: {
|
||||
label: 'State',
|
||||
type: 'select',
|
||||
operators: ['select_any_in', 'select_equals'], // ['select_equals', 'select_not_equals', 'select_any_in', 'select_not_any_in']
|
||||
valueSources: ['value'],
|
||||
fieldSettings: {
|
||||
listValues: [
|
||||
{ value: 'new', title: 'new' },
|
||||
{ value: 'in progress', title: 'in progress' },
|
||||
{ value: 'rejected', title: 'rejected' },
|
||||
{ value: 'completed', title: 'completed' },
|
||||
],
|
||||
},
|
||||
},
|
||||
stage: {
|
||||
label: 'Stage',
|
||||
type: 'select',
|
||||
operators: ['select_any_in', 'select_equals'],
|
||||
valueSources: ['value'],
|
||||
fieldSettings: {
|
||||
listValues: [
|
||||
{ value: 'annotation', title: 'annotation' },
|
||||
{ value: 'validation', title: 'validation' },
|
||||
{ value: 'acceptance', title: 'acceptance' },
|
||||
],
|
||||
},
|
||||
},
|
||||
dimension: {
|
||||
label: 'Dimension',
|
||||
type: 'select',
|
||||
operators: ['select_equals'],
|
||||
valueSources: ['value'],
|
||||
fieldSettings: {
|
||||
listValues: [
|
||||
{ value: '2d', title: '2D' },
|
||||
{ value: '3d', title: '3D' },
|
||||
],
|
||||
},
|
||||
},
|
||||
assignee: {
|
||||
label: 'Assignee',
|
||||
type: 'text', // todo: change to select
|
||||
valueSources: ['value'],
|
||||
fieldSettings: {
|
||||
// useAsyncSearch: true,
|
||||
// forceAsyncSearch: true,
|
||||
// async fetch does not work for now in this library for AntdConfig
|
||||
// but that issue was solved, see https://github.com/ukrbublik/react-awesome-query-builder/issues/616
|
||||
// waiting for a new release, alternative is to use material design, but it is not the best option too
|
||||
// asyncFetch: async (search: string | null) => {
|
||||
// const users = await core.users.get({
|
||||
// limit: 10,
|
||||
// is_active: true,
|
||||
// ...(search ? { search } : {}),
|
||||
// });
|
||||
|
||||
// return {
|
||||
// values: users.map((user: any) => ({
|
||||
// value: user.username, title: user.username,
|
||||
// })),
|
||||
// hasMore: false,
|
||||
// };
|
||||
// },
|
||||
},
|
||||
},
|
||||
updated_date: {
|
||||
label: 'Last updated',
|
||||
type: 'datetime',
|
||||
operators: ['between', 'greater', 'greater_or_equal', 'less', 'less_or_equal'],
|
||||
},
|
||||
id: {
|
||||
label: 'ID',
|
||||
type: 'number',
|
||||
operators: ['equal', 'between', 'greater', 'greater_or_equal', 'less', 'less_or_equal'],
|
||||
fieldSettings: { min: 0 },
|
||||
valueSources: ['value'],
|
||||
},
|
||||
task_id: {
|
||||
label: 'Task ID',
|
||||
type: 'number',
|
||||
operators: ['equal', 'between', 'greater', 'greater_or_equal', 'less', 'less_or_equal'],
|
||||
fieldSettings: { min: 0 },
|
||||
valueSources: ['value'],
|
||||
},
|
||||
project_id: {
|
||||
label: 'Project ID',
|
||||
type: 'number',
|
||||
operators: ['equal', 'between', 'greater', 'greater_or_equal', 'less', 'less_or_equal'],
|
||||
fieldSettings: { min: 0 },
|
||||
valueSources: ['value'],
|
||||
},
|
||||
task_name: {
|
||||
label: 'Task name',
|
||||
type: 'text',
|
||||
valueSources: ['value'],
|
||||
operators: ['like'],
|
||||
},
|
||||
project_name: {
|
||||
label: 'Project name',
|
||||
type: 'text',
|
||||
valueSources: ['value'],
|
||||
operators: ['like'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const localStorageRecentCapacity = 10;
|
||||
export const localStorageRecentKeyword = 'recentlyAppliedJobsFilters';
|
||||
export const predefinedFilterValues = {
|
||||
'Assigned to me': '{"and":[{"==":[{"var":"assignee"},"<username>"]}]}',
|
||||
'Not completed': '{"!":{"or":[{"==":[{"var":"state"},"completed"]},{"==":[{"var":"stage"},"acceptance"]}]}}',
|
||||
};
|
||||
export const defaultEnabledFilters = ['Not completed'];
|
||||
@ -0,0 +1,182 @@
|
||||
// Copyright (C) 2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
|
||||
import {
|
||||
OrderedListOutlined, SortAscendingOutlined, SortDescendingOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import Button from 'antd/lib/button';
|
||||
import Dropdown from 'antd/lib/dropdown';
|
||||
import Radio from 'antd/lib/radio';
|
||||
|
||||
import CVATTooltip from 'components/common/cvat-tooltip';
|
||||
|
||||
interface Props {
|
||||
sortingFields: string[];
|
||||
defaultFields: string[];
|
||||
visible: boolean;
|
||||
onVisibleChange(visible: boolean): void;
|
||||
onApplySorting(sorting: string | null): void;
|
||||
}
|
||||
|
||||
const ANCHOR_KEYWORD = '__anchor__';
|
||||
|
||||
const SortableItem = SortableElement(
|
||||
({
|
||||
value, appliedSorting, setAppliedSorting, valueIndex, anchorIndex,
|
||||
}: {
|
||||
value: string;
|
||||
valueIndex: number;
|
||||
anchorIndex: number;
|
||||
appliedSorting: Record<string, string>;
|
||||
setAppliedSorting: (arg: Record<string, string>) => void;
|
||||
}): JSX.Element => {
|
||||
const isActiveField = value in appliedSorting;
|
||||
const isAscendingField = isActiveField && !appliedSorting[value]?.startsWith('-');
|
||||
const isDescendingField = isActiveField && !isAscendingField;
|
||||
const onClick = (): void => {
|
||||
if (isDescendingField) {
|
||||
setAppliedSorting({ ...appliedSorting, [value]: value });
|
||||
} else if (isAscendingField) {
|
||||
setAppliedSorting({ ...appliedSorting, [value]: `-${value}` });
|
||||
}
|
||||
};
|
||||
|
||||
if (value === ANCHOR_KEYWORD) {
|
||||
return (
|
||||
<hr className='cvat-sorting-anchor' />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='cvat-sorting-field'>
|
||||
<Radio.Button disabled={valueIndex > anchorIndex}>{value}</Radio.Button>
|
||||
<div>
|
||||
<CVATTooltip overlay={appliedSorting[value]?.startsWith('-') ? 'Descending sort' : 'Ascending sort'}>
|
||||
<Button type='text' disabled={!isActiveField} onClick={onClick}>
|
||||
{
|
||||
isDescendingField ? (
|
||||
<SortDescendingOutlined />
|
||||
) : (
|
||||
<SortAscendingOutlined />
|
||||
)
|
||||
}
|
||||
</Button>
|
||||
</CVATTooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
const SortableList = SortableContainer(
|
||||
({ items, appliedSorting, setAppliedSorting } :
|
||||
{
|
||||
items: string[];
|
||||
appliedSorting: Record<string, string>;
|
||||
setAppliedSorting: (arg: Record<string, string>) => void;
|
||||
}) => (
|
||||
<div className='cvat-jobs-page-sorting-list'>
|
||||
{ items.map((value: string, index: number) => (
|
||||
<SortableItem
|
||||
key={`item-${value}`}
|
||||
appliedSorting={appliedSorting}
|
||||
setAppliedSorting={setAppliedSorting}
|
||||
index={index}
|
||||
value={value}
|
||||
valueIndex={index}
|
||||
anchorIndex={items.indexOf(ANCHOR_KEYWORD)}
|
||||
/>
|
||||
)) }
|
||||
</div>
|
||||
),
|
||||
);
|
||||
|
||||
function SortingModalComponent(props: Props): JSX.Element {
|
||||
const {
|
||||
sortingFields: sortingFieldsProp,
|
||||
defaultFields, visible, onApplySorting, onVisibleChange,
|
||||
} = props;
|
||||
const [appliedSorting, setAppliedSorting] = useState<Record<string, string>>(
|
||||
defaultFields.reduce((acc: Record<string, string>, field: string) => {
|
||||
const [isAscending, absField] = field.startsWith('-') ?
|
||||
[false, field.slice(1).replace('_', ' ')] : [true, field.replace('_', ' ')];
|
||||
const originalField = sortingFieldsProp.find((el: string) => el.toLowerCase() === absField.toLowerCase());
|
||||
if (originalField) {
|
||||
return { ...acc, [originalField]: isAscending ? originalField : `-${originalField}` };
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, {}),
|
||||
);
|
||||
const [sortingFields, setSortingFields] = useState<string[]>(
|
||||
Array.from(new Set([...Object.keys(appliedSorting), ANCHOR_KEYWORD, ...sortingFieldsProp])),
|
||||
);
|
||||
const [appliedOrder, setAppliedOrder] = useState<string[]>([...defaultFields]);
|
||||
|
||||
useEffect(() => {
|
||||
const anchorIdx = sortingFields.indexOf(ANCHOR_KEYWORD);
|
||||
const appliedSortingCopy = { ...appliedSorting };
|
||||
const slicedSortingFields = sortingFields.slice(0, anchorIdx);
|
||||
const updated = slicedSortingFields.length !== appliedOrder.length || slicedSortingFields
|
||||
.some((field: string, index: number) => field !== appliedOrder[index]);
|
||||
|
||||
sortingFields.forEach((field: string, index: number) => {
|
||||
if (index < anchorIdx && !(field in appliedSortingCopy)) {
|
||||
appliedSortingCopy[field] = field;
|
||||
} else if (index >= anchorIdx && field in appliedSortingCopy) {
|
||||
delete appliedSortingCopy[field];
|
||||
}
|
||||
});
|
||||
|
||||
if (updated) {
|
||||
setAppliedOrder(slicedSortingFields);
|
||||
setAppliedSorting(appliedSortingCopy);
|
||||
}
|
||||
}, [sortingFields]);
|
||||
|
||||
useEffect(() => {
|
||||
// this hook uses sortingFields to understand order
|
||||
// but we do not specify this field in dependencies
|
||||
// because we do not want the hook to be called after changing sortingField
|
||||
// sortingField value is always relevant because if order changes, the hook before will be called first
|
||||
|
||||
const anchorIdx = sortingFields.indexOf(ANCHOR_KEYWORD);
|
||||
const sortingString = sortingFields.slice(0, anchorIdx)
|
||||
.map((field: string): string => appliedSorting[field])
|
||||
.join(',').toLowerCase().replace(/\s/g, '_');
|
||||
onApplySorting(sortingString || null);
|
||||
}, [appliedSorting]);
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
destroyPopupOnHide
|
||||
visible={visible}
|
||||
placement='bottomLeft'
|
||||
overlay={(
|
||||
<SortableList
|
||||
onSortEnd={({ oldIndex, newIndex }: { oldIndex: number, newIndex: number }) => {
|
||||
if (oldIndex !== newIndex) {
|
||||
const sortingFieldsCopy = [...sortingFields];
|
||||
sortingFieldsCopy.splice(newIndex, 0, ...sortingFieldsCopy.splice(oldIndex, 1));
|
||||
setSortingFields(sortingFieldsCopy);
|
||||
}
|
||||
}}
|
||||
helperClass='cvat-sorting-dragged-item'
|
||||
items={sortingFields}
|
||||
appliedSorting={appliedSorting}
|
||||
setAppliedSorting={setAppliedSorting}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<Button type='default' onClick={() => onVisibleChange(!visible)}>
|
||||
Sort by
|
||||
<OrderedListOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(SortingModalComponent);
|
||||
@ -0,0 +1,218 @@
|
||||
# Copyright (C) 2022 Intel Corporation
|
||||
#
|
||||
# SPDX-License-Identifier: MIT
|
||||
|
||||
from rest_framework import filters
|
||||
from functools import reduce
|
||||
import operator
|
||||
import json
|
||||
from django.db.models import Q
|
||||
from rest_framework.compat import coreapi, coreschema
|
||||
from django.utils.translation import gettext_lazy as _
|
||||
from django.utils.encoding import force_str
|
||||
from rest_framework.exceptions import ValidationError
|
||||
|
||||
class SearchFilter(filters.SearchFilter):
|
||||
|
||||
def get_search_fields(self, view, request):
|
||||
search_fields = getattr(view, 'search_fields', [])
|
||||
lookup_fields = {field:field for field in search_fields}
|
||||
view_lookup_fields = getattr(view, 'lookup_fields', {})
|
||||
keys_to_update = set(search_fields) & set(view_lookup_fields.keys())
|
||||
for key in keys_to_update:
|
||||
lookup_fields[key] = view_lookup_fields[key]
|
||||
|
||||
return lookup_fields.values()
|
||||
|
||||
def get_schema_fields(self, view):
|
||||
assert coreapi is not None, 'coreapi must be installed to use `get_schema_fields()`'
|
||||
assert coreschema is not None, 'coreschema must be installed to use `get_schema_fields()`'
|
||||
|
||||
search_fields = getattr(view, 'search_fields', [])
|
||||
full_description = self.search_description + \
|
||||
f' Avaliable search_fields: {search_fields}'
|
||||
|
||||
return [
|
||||
coreapi.Field(
|
||||
name=self.search_param,
|
||||
required=False,
|
||||
location='query',
|
||||
schema=coreschema.String(
|
||||
title=force_str(self.search_title),
|
||||
description=force_str(full_description)
|
||||
)
|
||||
)
|
||||
]
|
||||
|
||||
def get_schema_operation_parameters(self, view):
|
||||
search_fields = getattr(view, 'search_fields', [])
|
||||
full_description = self.search_description + \
|
||||
f' Avaliable search_fields: {search_fields}'
|
||||
|
||||
return [{
|
||||
'name': self.search_param,
|
||||
'required': False,
|
||||
'in': 'query',
|
||||
'description': force_str(full_description),
|
||||
'schema': {
|
||||
'type': 'string',
|
||||
},
|
||||
}]
|
||||
|
||||
class OrderingFilter(filters.OrderingFilter):
|
||||
ordering_param = 'sort'
|
||||
def get_ordering(self, request, queryset, view):
|
||||
ordering = []
|
||||
lookup_fields = self._get_lookup_fields(request, queryset, view)
|
||||
for term in super().get_ordering(request, queryset, view):
|
||||
flag = ''
|
||||
if term.startswith("-"):
|
||||
flag = '-'
|
||||
term = term[1:]
|
||||
ordering.append(flag + lookup_fields[term])
|
||||
|
||||
return ordering
|
||||
|
||||
def _get_lookup_fields(self, request, queryset, view):
|
||||
ordering_fields = self.get_valid_fields(queryset, view, {'request': request})
|
||||
lookup_fields = {field:field for field, _ in ordering_fields}
|
||||
lookup_fields.update(getattr(view, 'lookup_fields', {}))
|
||||
|
||||
return lookup_fields
|
||||
|
||||
def get_schema_fields(self, view):
|
||||
assert coreapi is not None, 'coreapi must be installed to use `get_schema_fields()`'
|
||||
assert coreschema is not None, 'coreschema must be installed to use `get_schema_fields()`'
|
||||
|
||||
ordering_fields = getattr(view, 'ordering_fields', [])
|
||||
full_description = self.ordering_description + \
|
||||
f' Avaliable ordering_fields: {ordering_fields}'
|
||||
|
||||
return [
|
||||
coreapi.Field(
|
||||
name=self.ordering_param,
|
||||
required=False,
|
||||
location='query',
|
||||
schema=coreschema.String(
|
||||
title=force_str(self.ordering_title),
|
||||
description=force_str(full_description)
|
||||
)
|
||||
)
|
||||
]
|
||||
|
||||
def get_schema_operation_parameters(self, view):
|
||||
ordering_fields = getattr(view, 'ordering_fields', [])
|
||||
full_description = self.ordering_description + \
|
||||
f' Avaliable ordering_fields: {ordering_fields}'
|
||||
|
||||
return [{
|
||||
'name': self.ordering_param,
|
||||
'required': False,
|
||||
'in': 'query',
|
||||
'description': force_str(full_description),
|
||||
'schema': {
|
||||
'type': 'string',
|
||||
},
|
||||
}]
|
||||
|
||||
class JsonLogicFilter(filters.BaseFilterBackend):
|
||||
filter_param = 'filter'
|
||||
filter_title = _('Filter')
|
||||
filter_description = _('A filter term.')
|
||||
|
||||
def _build_Q(self, rules, lookup_fields):
|
||||
op, args = next(iter(rules.items()))
|
||||
if op in ['or', 'and']:
|
||||
return reduce({
|
||||
'or': operator.or_,
|
||||
'and': operator.and_
|
||||
}[op], [self._build_Q(arg, lookup_fields) for arg in args])
|
||||
elif op == '!':
|
||||
return ~self._build_Q(args, lookup_fields)
|
||||
elif op == '!!':
|
||||
return self._build_Q(args, lookup_fields)
|
||||
elif op == 'var':
|
||||
return Q(**{args + '__isnull': False})
|
||||
elif op in ['==', '<', '>', '<=', '>='] and len(args) == 2:
|
||||
var = lookup_fields[args[0]['var']]
|
||||
q_var = var + {
|
||||
'==': '',
|
||||
'<': '__lt',
|
||||
'<=': '__lte',
|
||||
'>': '__gt',
|
||||
'>=': '__gte'
|
||||
}[op]
|
||||
return Q(**{q_var: args[1]})
|
||||
elif op == 'in':
|
||||
if isinstance(args[0], dict):
|
||||
var = lookup_fields[args[0]['var']]
|
||||
return Q(**{var + '__in': args[1]})
|
||||
else:
|
||||
var = lookup_fields[args[1]['var']]
|
||||
return Q(**{var + '__contains': args[0]})
|
||||
elif op == '<=' and len(args) == 3:
|
||||
var = lookup_fields[args[1]['var']]
|
||||
return Q(**{var + '__gte': args[0]}) & Q(**{var + '__lte': args[2]})
|
||||
else:
|
||||
raise ValidationError(f'filter: {op} operation with {args} arguments is not implemented')
|
||||
|
||||
def filter_queryset(self, request, queryset, view):
|
||||
json_rules = request.query_params.get(self.filter_param)
|
||||
if json_rules:
|
||||
try:
|
||||
rules = json.loads(json_rules)
|
||||
if not len(rules):
|
||||
raise ValidationError(f"filter shouldn't be empty")
|
||||
except json.decoder.JSONDecodeError:
|
||||
raise ValidationError(f'filter: Json syntax should be used')
|
||||
lookup_fields = self._get_lookup_fields(request, view)
|
||||
try:
|
||||
q_object = self._build_Q(rules, lookup_fields)
|
||||
except KeyError as ex:
|
||||
raise ValidationError(f'filter: {str(ex)} term is not supported')
|
||||
return queryset.filter(q_object)
|
||||
|
||||
return queryset
|
||||
|
||||
def get_schema_fields(self, view):
|
||||
assert coreapi is not None, 'coreapi must be installed to use `get_schema_fields()`'
|
||||
assert coreschema is not None, 'coreschema must be installed to use `get_schema_fields()`'
|
||||
|
||||
filter_fields = getattr(view, 'filter_fields', [])
|
||||
full_description = self.filter_description + \
|
||||
f' Avaliable filter_fields: {filter_fields}'
|
||||
|
||||
return [
|
||||
coreapi.Field(
|
||||
name=self.filter_param,
|
||||
required=False,
|
||||
location='query',
|
||||
schema=coreschema.String(
|
||||
title=force_str(self.filter_title),
|
||||
description=force_str(full_description)
|
||||
)
|
||||
)
|
||||
]
|
||||
|
||||
def get_schema_operation_parameters(self, view):
|
||||
filter_fields = getattr(view, 'filter_fields', [])
|
||||
full_description = self.filter_description + \
|
||||
f' Avaliable filter_fields: {filter_fields}'
|
||||
return [
|
||||
{
|
||||
'name': self.filter_param,
|
||||
'required': False,
|
||||
'in': 'query',
|
||||
'description': force_str(full_description),
|
||||
'schema': {
|
||||
'type': 'string',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
def _get_lookup_fields(self, request, view):
|
||||
filter_fields = getattr(view, 'filter_fields', [])
|
||||
lookup_fields = {field:field for field in filter_fields}
|
||||
lookup_fields.update(getattr(view, 'lookup_fields', {}))
|
||||
|
||||
return lookup_fields
|
||||
Loading…
Reference in New Issue