mirror of
https://github.com/umami-software/umami.git
synced 2026-02-12 16:45:35 +01:00
Updated WebsiteSelect behavior. Fixed date select.
This commit is contained in:
parent
f9442001e4
commit
8d5e8b072d
4 changed files with 23 additions and 12 deletions
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue