Updated WebsiteSelect behavior. Fixed date select.

This commit is contained in:
Mike Cao 2025-08-27 16:59:44 -07:00
parent f9442001e4
commit 8d5e8b072d
4 changed files with 23 additions and 12 deletions

View file

@ -10,7 +10,6 @@ import { useNavigation } from './useNavigation';
export interface UseDateRangeOptions { export interface UseDateRangeOptions {
ignoreOffset?: boolean; ignoreOffset?: boolean;
useQueryParameter?: boolean;
} }
export function useDateRange(websiteId?: string, options: UseDateRangeOptions = {}) { export function useDateRange(websiteId?: string, options: UseDateRangeOptions = {}) {
@ -21,11 +20,7 @@ export function useDateRange(websiteId?: string, options: UseDateRangeOptions =
} = useNavigation(); } = useNavigation();
const websiteConfig = useWebsites(state => state[websiteId]?.dateRange); const websiteConfig = useWebsites(state => state[websiteId]?.dateRange);
const globalConfig = useApp(state => state.dateRangeValue); const globalConfig = useApp(state => state.dateRangeValue);
const dateValue = const dateValue = websiteConfig?.value || date || globalConfig || DEFAULT_DATE_RANGE_VALUE;
(options.useQueryParameter ? date : false) ||
websiteConfig?.value ||
globalConfig ||
DEFAULT_DATE_RANGE_VALUE;
const dateRange = useMemo(() => { const dateRange = useMemo(() => {
const dateRangeObject = parseDateRange(dateValue, locale); const dateRangeObject = parseDateRange(dateValue, locale);

View file

@ -1,6 +1,12 @@
import { useState } from 'react'; import { useState } from 'react';
import { Select, SelectProps, ListItem, Text } from '@umami/react-zen'; import { Select, SelectProps, ListItem, Text } from '@umami/react-zen';
import { useUserWebsitesQuery, useWebsiteQuery, useNavigation } from '@/components/hooks'; import {
useUserWebsitesQuery,
useWebsiteQuery,
useNavigation,
useMessages,
} from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
export function WebsiteSelect({ export function WebsiteSelect({
websiteId, websiteId,
@ -10,6 +16,7 @@ export function WebsiteSelect({
websiteId?: string; websiteId?: string;
teamId?: string; teamId?: string;
} & SelectProps) { } & SelectProps) {
const { formatMessage, messages } = useMessages();
const { router, renderUrl } = useNavigation(); const { router, renderUrl } = useNavigation();
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const { data: website } = useWebsiteQuery(websiteId); const { data: website } = useWebsiteQuery(websiteId);
@ -23,6 +30,10 @@ export function WebsiteSelect({
setSearch(value); setSearch(value);
}; };
const handleOpenChange = () => {
setSearch('');
};
return ( return (
<Select <Select
{...props} {...props}
@ -35,6 +46,10 @@ export function WebsiteSelect({
searchValue={search} searchValue={search}
onSearch={handleSearch} onSearch={handleSearch}
onChange={handleSelect} onChange={handleSelect}
onOpenChange={handleOpenChange}
listProps={{
renderEmptyState: () => <Empty message={formatMessage(messages.noResultsFound)} />,
}}
renderValue={() => ( renderValue={() => (
<Text truncate weight="bold" style={{ maxWidth: 160, lineHeight: 1 }}> <Text truncate weight="bold" style={{ maxWidth: 160, lineHeight: 1 }}>
{website?.name} {website?.name}

View file

@ -3,7 +3,7 @@ import { PrismaClient } from '@/generated/prisma/client';
import { PrismaPg } from '@prisma/adapter-pg'; import { PrismaPg } from '@prisma/adapter-pg';
import { readReplicas } from '@prisma/extension-read-replicas'; import { readReplicas } from '@prisma/extension-read-replicas';
import { SESSION_COLUMNS, OPERATORS, DEFAULT_PAGE_SIZE, FILTER_COLUMNS } from './constants'; import { SESSION_COLUMNS, OPERATORS, DEFAULT_PAGE_SIZE, FILTER_COLUMNS } from './constants';
import { QueryOptions, QueryFilters } from './types'; import { QueryOptions, QueryFilters, Operator } from './types';
import { filtersObjectToArray } from './params'; import { filtersObjectToArray } from './params';
const log = debug('umami:prisma'); const log = debug('umami:prisma');
@ -143,7 +143,7 @@ function getQueryParams(filters: Record<string, any>) {
return { return {
...filters, ...filters,
...filtersObjectToArray(filters).reduce((obj, { name, operator, value }) => { ...filtersObjectToArray(filters).reduce((obj, { name, operator, value }) => {
obj[name] = [OPERATORS.contains, OPERATORS.doesNotContain].includes(operator) obj[name] = ([OPERATORS.contains, OPERATORS.doesNotContain] as Operator[]).includes(operator)
? `%${value}%` ? `%${value}%`
: value; : value;

View file

@ -1,5 +1,5 @@
import { UseQueryOptions } from '@tanstack/react-query'; import { UseQueryOptions } from '@tanstack/react-query';
import { DATA_TYPE, PERMISSIONS, ROLES } from './constants'; import { DATA_TYPE, PERMISSIONS, ROLES, OPERATORS } from './constants';
import { TIME_UNIT } from './date'; import { TIME_UNIT } from './date';
export type ObjectValues<T> = T[keyof T]; export type ObjectValues<T> = T[keyof T];
@ -10,6 +10,7 @@ export type TimeUnit = ObjectValues<typeof TIME_UNIT>;
export type Permission = ObjectValues<typeof PERMISSIONS>; export type Permission = ObjectValues<typeof PERMISSIONS>;
export type Role = ObjectValues<typeof ROLES>; export type Role = ObjectValues<typeof ROLES>;
export type DynamicDataType = ObjectValues<typeof DATA_TYPE>; export type DynamicDataType = ObjectValues<typeof DATA_TYPE>;
export type Operator = (typeof OPERATORS)[keyof typeof OPERATORS];
export interface Auth { export interface Auth {
user?: { user?: {
@ -26,10 +27,10 @@ export interface Auth {
export interface Filter { export interface Filter {
name: string; name: string;
operator: string; operator: Operator;
value: string; value: string;
type?: string; type?: string;
columns?: string; column?: string;
prefix?: string; prefix?: string;
} }