watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-16 02:25:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Cohorts editing.

Browse source
This commit is contained in:
Mike Cao 2025-08-26 23:55:57 -07:00
parent 07665f4824
commit 8c8e36c63b
26 changed files with 1066 additions and 985 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/(main)/websites/[websiteId]/segments/SegmentAddButton.tsx
View file

@ -15,7 +15,7 @@ export function SegmentAddButton({ websiteId }: { websiteId: string }) {
<Text>{formatMessage(labels.segment)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.segment)} style={{ width: 800, maxHeight: '90vh' }}>
<Dialog title={formatMessage(labels.segment)} style={{ width: 800, minHeight: 300 }}>
{({ close }) => {
return <SegmentEditForm websiteId={websiteId} onClose={close} />;
}}

4
src/app/(main)/websites/[websiteId]/segments/SegmentEditButton.tsx
View file

@ -11,13 +11,13 @@ export function SegmentEditButton({
}: {
segmentId: string;
websiteId: string;
filters: any[];
filters?: any[];
}) {
const { formatMessage, labels } = useMessages();
return (
<ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
<Dialog title={formatMessage(labels.segment)} style={{ width: 800, maxHeight: '90vh' }}>
<Dialog title={formatMessage(labels.segment)} style={{ width: 800, minHeight: 300 }}>
{({ close }) => {
return (
<SegmentEditForm

48
src/app/(main)/websites/[websiteId]/segments/SegmentEditForm.tsx
View file

@ -5,14 +5,11 @@ import {
FormField,
FormSubmitButton,
TextField,
Label,
Loading,
Label,
} from '@umami/react-zen';
import { subMonths, endOfDay } from 'date-fns';
import { FieldFilters } from '@/components/input/FieldFilters';
import { useState } from 'react';
import { useMessages, useUpdateQuery, useWebsiteSegmentQuery } from '@/components/hooks';
import { filtersArrayToObject } from '@/lib/params';
import { messages } from '@/components/messages';
export function SegmentEditForm({
@ -32,30 +29,23 @@ export function SegmentEditForm({
}) {
const { data } = useWebsiteSegmentQuery(websiteId, segmentId);
const { formatMessage, labels } = useMessages();
const [currentFilters, setCurrentFilters] = useState(filters);
const startDate = subMonths(endOfDay(new Date()), 6);
const endDate = endOfDay(new Date());
const { mutate, error, isPending, touch, toast } = useUpdateQuery(
`/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`,
{
...data,
type: 'segment',
},
);
const handleSubmit = async (data: any) => {
mutate(
{ ...data, parameters: filtersArrayToObject(currentFilters) },
{
onSuccess: async () => {
toast(formatMessage(messages.saved));
touch('segments');
onSave?.();
onClose?.();
},
const handleSubmit = async (formData: any) => {
mutate(formData, {
onSuccess: async () => {
toast(formatMessage(messages.saved));
touch('segments');
onSave?.();
onClose?.();
},
);
});
};
if (segmentId && !data) {
@ -63,35 +53,27 @@ export function SegmentEditForm({
}
return (
<Form error={error} onSubmit={handleSubmit} defaultValues={data}>
<Form error={error} onSubmit={handleSubmit} defaultValues={data || { parameters: { filters } }}>
<FormField
name="name"
label={formatMessage(labels.name)}
rules={{ required: formatMessage(labels.required) }}
>
<TextField autoFocus />
<TextField autoFocus={!segmentId} />
</FormField>
{showFilters && (
<>
<Label>{formatMessage(labels.filters)}</Label>
<FieldFilters
websiteId={websiteId}
filters={currentFilters}
startDate={startDate}
endDate={endDate}
onSave={setCurrentFilters}
/>
<FormField name="parameters.filters" rules={{ required: formatMessage(labels.required) }}>
<FieldFilters websiteId={websiteId} />
</FormField>
</>
)}
<FormButtons>
<Button isDisabled={isPending} onPress={onClose}>
{formatMessage(labels.cancel)}
</Button>
<FormSubmitButton
variant="primary"
data-test="button-submit"
isDisabled={isPending || currentFilters.length === 0}
>
<FormSubmitButton variant="primary" data-test="button-submit" isDisabled={isPending}>
{formatMessage(labels.save)}
</FormSubmitButton>
</FormButtons>

9
src/app/(main)/websites/[websiteId]/segments/SegmentsTable.tsx
View file

@ -2,7 +2,6 @@ import { DataTable, DataColumn, Row } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { DateDistance } from '@/components/common/DateDistance';
import { filtersObjectToArray } from '@/lib/params';
import { SegmentEditButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditButton';
import { SegmentDeleteButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentDeleteButton';
import Link from 'next/link';
@ -27,15 +26,11 @@ export function SegmentsTable({ data = [] }) {
</DataColumn>
<DataColumn id="action" align="end" width="100px">
{(row: any) => {
const { id, name, parameters } = row;
const { id, name } = row;
return (
<Row>
<SegmentEditButton
segmentId={id}
websiteId={websiteId}
filters={filtersObjectToArray(parameters)}
/>
<SegmentEditButton segmentId={id} websiteId={websiteId} />
<SegmentDeleteButton segmentId={id} websiteId={websiteId} name={name} />
</Row>
);