watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 23:57:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Filter tag enhancements.

Browse source
This commit is contained in:
Mike Cao 2024-04-01 10:10:56 -07:00
parent a4d8afe516
commit ef11124672
12 changed files with 160 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
View file

@ -16,6 +16,7 @@ import {
} from 'react-basics';
import { useMessages, useFilters, useFormat, useLocale, useWebsiteValues } from 'components/hooks';
import { OPERATORS } from 'lib/constants';
import { operatorEquals } from 'lib/params';
import styles from './FieldFilterEditForm.module.css';
export interface FieldFilterFormProps {
@ -49,13 +50,12 @@ export default function FieldFilterEditForm({
const [operator, setOperator] = useState(defaultOperator);
const [value, setValue] = useState(defaultValue);
const [showMenu, setShowMenu] = useState(false);
const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(operator as any);
const isEquals = operatorEquals(operator);
const [search, setSearch] = useState('');
const [selected, setSelected] = useState(isEquals ? value : '');
const { getFilters } = useFilters();
const { filters } = useFilters();
const { formatValue } = useFormat();
const { locale } = useLocale();
const filters = getFilters(type);
const isDisabled = !operator || (isEquals && !selected) || (!isEquals && !value);
const {
data: values = [],
@ -98,7 +98,7 @@ export default function FieldFilterEditForm({
}, [value, formattedValues]);
const renderFilterValue = (value: any) => {
return filters.find((f: { value: any }) => f.value === value)?.label;
return filters.find((filter: { value: any }) => filter.value === value)?.label;
};
const handleAdd = () => {
@ -142,7 +142,7 @@ export default function FieldFilterEditForm({
{allowFilterSelect && (
<Dropdown
className={styles.dropdown}
items={filters}
items={filters.filter(f => f.type === type)}
value={operator}
renderValue={renderFilterValue}
onChange={handleOperatorChange}
@ -154,7 +154,7 @@ export default function FieldFilterEditForm({
)}
{selected && isEquals && (
<div className={styles.selected} onClick={handleReset}>
<Text>{selected}</Text>
<Text>{formatValue(selected, name)}</Text>
<Icon>
<Icons.Close />
</Icon>

2
src/app/(main)/reports/[reportId]/FieldParameters.tsx
View file

@ -5,7 +5,7 @@ import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
import FieldSelectForm from '../[reportId]/FieldSelectForm';
import ParameterList from '../[reportId]/ParameterList';
import PopupForm from '../[reportId]/PopupForm';
import { ReportContext } from '../[reportId]/Report';
import { ReportContext } from './Report';
export function FieldParameters() {
const { report, updateReport } = useContext(ReportContext);

9
src/app/(main)/reports/[reportId]/FilterParameters.tsx
View file

@ -6,8 +6,8 @@ import FilterSelectForm from '../[reportId]/FilterSelectForm';
import ParameterList from '../[reportId]/ParameterList';
import PopupForm from '../[reportId]/PopupForm';
import { ReportContext } from './Report';
import { OPERATORS } from 'lib/constants';
import FieldFilterEditForm from '../[reportId]/FieldFilterEditForm';
import { operatorEquals } from 'lib/params';
import styles from './FilterParameters.module.css';
export function FilterParameters() {
@ -69,7 +69,8 @@ export function FilterParameters() {
{filters.map(
({ name, operator, value }: { name: string; operator: string; value: string }) => {
const label = fields.find(f => f.name === name)?.label;
const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(operator as any);
const isEquals = operatorEquals(operator);
return (
<ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
<FilterParameter
@ -101,13 +102,13 @@ const FilterParameter = ({
endDate,
onChange,
}) => {
const { filterLabels } = useFilters();
const { operatorLabels } = useFilters();
return (
<PopupTrigger>
<div className={styles.item}>
<div className={styles.label}>{label}</div>
<div className={styles.op}>{filterLabels[operator]}</div>
<div className={styles.op}>{operatorLabels[operator]}</div>
<div className={styles.value}>{value}</div>
</div>
<Popup className={styles.edit} alignment="start">