Filter tag enhancements.

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

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>

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);

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">

View File

@ -13,20 +13,19 @@ import WebsiteTableView from './WebsiteTableView';
export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
const { data: website, isLoading, error } = useWebsite(websiteId);
const pathname = usePathname();
const showLinks = !pathname.includes('/share/');
const {
query: { view, url, referrer, os, browser, device, country, region, city, title },
} = useNavigation();
const { query } = useNavigation();
if (isLoading || error) {
return <Page isLoading={isLoading} error={error} />;
}
const showLinks = !pathname.includes('/share/');
const { view, ...params } = query;
return (
<>
<WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
<FilterTags params={{ url, referrer, os, browser, device, country, region, city, title }} />
<FilterTags websiteId={websiteId} params={params} />
<WebsiteMetricsBar websiteId={websiteId} sticky={true} />
<WebsiteChart websiteId={websiteId} />
{!website && <Loading icon="dots" style={{ minHeight: 300 }} />}

View File

@ -0,0 +1,3 @@
.button {
font-weight: 700;
}

View File

@ -1,8 +1,10 @@
import classNames from 'classnames';
import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
import FilterSelectForm from 'app/(main)/reports/[reportId]/FilterSelectForm';
import { useFields, useMessages, useNavigation } from 'components/hooks';
import { OPERATORS } from 'lib/constants';
import { OPERATOR_PREFIXES } from 'lib/constants';
import styles from './WebsiteFilterButton.module.css';
export function WebsiteFilterButton({
websiteId,
@ -16,22 +18,14 @@ export function WebsiteFilterButton({
const { fields } = useFields();
const handleAddFilter = ({ name, operator, value }) => {
let prefix = '';
if (operator === OPERATORS.notEquals) {
prefix = '!';
} else if (operator === OPERATORS.contains) {
prefix = '~';
} else if (operator === OPERATORS.doesNotContain) {
prefix = '!~';
}
const prefix = OPERATOR_PREFIXES[operator];
router.push(renderUrl({ [name]: prefix + value }));
};
return (
<PopupTrigger>
<Button className={className}>
<Button className={classNames(className, styles.button)} variant="quiet">
<Icon>
<Icons.Plus />
</Icon>

View File

@ -4,7 +4,7 @@ import { OPERATORS } from 'lib/constants';
export function useFilters() {
const { formatMessage, labels } = useMessages();
const filterLabels = {
const operatorLabels = {
[OPERATORS.equals]: formatMessage(labels.is),
[OPERATORS.notEquals]: formatMessage(labels.isNot),
[OPERATORS.set]: formatMessage(labels.isSet),
@ -37,11 +37,17 @@ export function useFilters() {
uuid: [OPERATORS.equals],
};
const filters = Object.keys(typeFilters).flatMap(key => {
return (
typeFilters[key]?.map(value => ({ type: key, value, label: operatorLabels[value] })) ?? []
);
});
const getFilters = type => {
return typeFilters[type]?.map(key => ({ type, value: key, label: filterLabels[key] })) ?? [];
return typeFilters[type]?.map(key => ({ type, value: key, label: operatorLabels[key] })) ?? [];
};
return { getFilters, filterLabels, typeFilters };
return { filters, operatorLabels, typeFilters, getFilters };
}
export default useFilters;

View File

@ -13,18 +13,39 @@
flex-direction: row;
align-items: center;
gap: 10px;
font-size: var(--font-size-sm);
border: 1px solid var(--blue400);
background: var(--base75);
border: 1px solid var(--base400);
border-radius: var(--border-radius);
box-shadow: 1px 1px 1px var(--base500);
padding: 8px 16px;
cursor: pointer;
background: var(--blue100);
}
.tag:hover {
background: var(--blue200);
background: var(--base100);
}
.tag b {
text-transform: lowercase;
.close {
font-weight: 700;
}
.name,
.value {
color: var(--base700);
font-weight: 700;
}
.operator {
text-transform: lowercase;
font-weight: 900;
}
.icon {
margin-left: 10px;
padding: 2px;
border-radius: 100%;
}
.icon:hover {
background: var(--base200);
}

View File

@ -1,30 +1,61 @@
import { safeDecodeURI } from 'next-basics';
import { Button, Icon, Icons, Text } from 'react-basics';
import { useNavigation } from 'components/hooks';
import { useMessages } from 'components/hooks';
import { useFormat } from 'components/hooks';
import { MouseEvent } from 'react';
import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
import {
useDateRange,
useFields,
useNavigation,
useMessages,
useFormat,
useFilters,
} from 'components/hooks';
import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
import FieldFilterEditForm from 'app/(main)/reports/[reportId]/FieldFilterEditForm';
import { OPERATOR_PREFIXES } from 'lib/constants';
import { operatorEquals, parseParameterValue } from 'lib/params';
import styles from './FilterTags.module.css';
export function FilterTags({ params }) {
export function FilterTags({
websiteId,
params,
}: {
websiteId: string;
params: { [key: string]: string };
}) {
const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
const [dateRange] = useDateRange(websiteId);
const {
router,
renderUrl,
query: { view },
} = useNavigation();
const { fields } = useFields();
const { operatorLabels } = useFilters();
const { startDate, endDate } = dateRange;
if (Object.keys(params).filter(key => params[key]).length === 0) {
return null;
}
function handleCloseFilter(param?: string) {
const handleCloseFilter = (param: string, e: MouseEvent) => {
e.stopPropagation();
router.push(renderUrl({ [param]: undefined }));
}
};
function handleResetFilter() {
const handleResetFilter = () => {
router.push(renderUrl({ view }, true));
}
};
const handleChangeFilter = (
values: { name: string; operator: string; value: string },
close: () => void,
) => {
const { name, operator, value } = values;
const prefix = OPERATOR_PREFIXES[operator];
router.push(renderUrl({ [name]: prefix + value }));
close();
};
return (
<div className={styles.filters}>
@ -33,18 +64,43 @@ export function FilterTags({ params }) {
if (!params[key]) {
return null;
}
const label = fields.find(f => f.name === key)?.label;
const { operator, value } = parseParameterValue(params[key]);
const paramValue = operatorEquals(operator) ? formatValue(value, key) : value;
return (
<div key={key} className={styles.tag} onClick={() => handleCloseFilter(key)}>
<Text>
<b>{formatMessage(labels[key])}</b> = {formatValue(safeDecodeURI(params[key]), key)}
</Text>
<Icon>
<PopupTrigger key={key}>
<div key={key} className={styles.tag}>
<Text className={styles.name}>{label}</Text>
<Text className={styles.operator}>{operatorLabels[operator]}</Text>
<Text className={styles.value}>{paramValue}</Text>
<Icon className={styles.icon} onClick={e => handleCloseFilter(key, e)}>
<Icons.Close />
</Icon>
</div>
<Popup alignment="start">
{(close: () => void) => {
return (
<PopupForm>
<FieldFilterEditForm
label={label}
type="string"
websiteId={websiteId}
name={key}
operator={operator}
defaultValue={value}
startDate={startDate}
endDate={endDate}
onChange={values => handleChangeFilter(values, close)}
/>
</PopupForm>
);
}}
</Popup>
</PopupTrigger>
);
})}
<Button size="sm" variant="quiet" onClick={handleResetFilter}>
<Button className={styles.close} variant="quiet" onClick={handleResetFilter}>
<Icon>
<Icons.Close />
</Icon>

View File

@ -94,6 +94,13 @@ export const OPERATORS = {
after: 'af',
} as const;
export const OPERATOR_PREFIXES = {
[OPERATORS.equals]: '',
[OPERATORS.notEquals]: '!',
[OPERATORS.contains]: '~',
[OPERATORS.doesNotContain]: '!~',
};
export const DATA_TYPES = {
[DATA_TYPE.string]: 'string',
[DATA_TYPE.number]: 'number',

15
src/lib/params.ts Normal file
View File

@ -0,0 +1,15 @@
import { OPERATOR_PREFIXES, OPERATORS } from 'lib/constants';
export function parseParameterValue(param: string) {
const [, prefix, value] = param.match(/^(!~|!|~)?(.*)$/);
const operator =
Object.keys(OPERATOR_PREFIXES).find(key => OPERATOR_PREFIXES[key] === prefix) ||
OPERATORS.equals;
return { operator, value };
}
export function operatorEquals(operator: any) {
return [OPERATORS.equals, OPERATORS.notEquals].includes(operator);
}

View File

@ -1,13 +1,7 @@
import { NextApiRequest } from 'next';
import { getAllowedUnits, getMinimumUnit } from './date';
import { getWebsiteDateRange } from '../queries';
import { FILTER_COLUMNS, OPERATORS } from 'lib/constants';
const OPERATOR_SYMBOLS = {
'!': 'neq',
'~': 'c',
'!~': 'dnc',
};
import { FILTER_COLUMNS, OPERATORS, OPERATOR_PREFIXES } from 'lib/constants';
export async function parseDateRangeQuery(req: NextApiRequest) {
const { websiteId, startAt, endAt, unit } = req.query;
@ -52,7 +46,7 @@ export function getQueryFilters(req: NextApiRequest) {
obj[key] = {
name: key,
column: FILTER_COLUMNS[key],
operator: OPERATOR_SYMBOLS[prefix] || OPERATORS.equals,
operator: OPERATOR_PREFIXES[prefix] || OPERATORS.equals,
value: paramValue,
};
}