umami/components/pages/reports/FunnelForm.js

115 lines
3.4 KiB
JavaScript
Raw Normal View History

2023-05-12 01:42:58 +02:00
import DateFilter from 'components/input/DateFilter';
import WebsiteSelect from 'components/input/WebsiteSelect';
import useMessages from 'hooks/useMessages';
import { parseDateRange } from 'lib/date';
2023-05-15 06:38:03 +02:00
import { useState } from 'react';
2023-05-12 01:42:58 +02:00
import {
Button,
Form,
FormButtons,
FormInput,
FormRow,
SubmitButton,
TextField,
} from 'react-basics';
import styles from './FunnelForm.module.css';
export function FunnelForm({ onSearch }) {
2023-05-15 06:38:03 +02:00
const { formatMessage, labels } = useMessages();
const [dateRange, setDateRange] = useState('');
const [startAt, setStartAt] = useState();
const [endAt, setEndAt] = useState();
2023-05-15 23:03:42 +02:00
const [urls, setUrls] = useState(['/', '/docs/getting-started', '/docs/intall']);
2023-05-12 01:42:58 +02:00
const [websiteId, setWebsiteId] = useState('');
2023-05-15 06:38:03 +02:00
const [window, setWindow] = useState(60);
2023-05-12 01:42:58 +02:00
const handleSubmit = async data => {
onSearch(data);
};
const handleDateChange = value => {
const { startDate, endDate } = parseDateRange(value);
setDateRange(value);
2023-05-15 06:38:03 +02:00
setStartAt(startDate.getTime());
setEndAt(endDate.getTime());
2023-05-12 01:42:58 +02:00
};
2023-05-15 06:38:03 +02:00
const handleAddUrl = () => setUrls([...urls, '']);
2023-05-12 01:42:58 +02:00
const handleRemoveUrl = i => setUrls(urls.splice(i, 1));
2023-05-15 06:38:03 +02:00
const handleWindowChange = value => setWindow(value.target.value);
2023-05-12 01:42:58 +02:00
const handleUrlChange = (value, i) => {
const nextUrls = [...urls];
nextUrls[i] = value.target.value;
setUrls(nextUrls);
};
return (
<>
<Form
values={{
websiteId,
2023-05-15 06:38:03 +02:00
startAt,
endAt,
2023-05-12 01:42:58 +02:00
urls,
2023-05-15 06:38:03 +02:00
window,
2023-05-12 01:42:58 +02:00
}}
onSubmit={handleSubmit}
>
2023-05-15 06:38:03 +02:00
<FormRow label={formatMessage(labels.website)}>
2023-05-12 01:42:58 +02:00
<WebsiteSelect websiteId={websiteId} onSelect={value => setWebsiteId(value)} />
<FormInput name="websiteId" rules={{ required: formatMessage(labels.required) }}>
<TextField value={websiteId} className={styles.hiddenInput} />
</FormInput>
</FormRow>
<FormRow label="Date">
<DateFilter
className={styles.filter}
value={dateRange}
alignment="start"
onChange={handleDateChange}
2023-05-15 06:38:03 +02:00
isF
2023-05-12 01:42:58 +02:00
/>
<FormInput
2023-05-15 06:38:03 +02:00
name="startAt"
2023-05-12 01:42:58 +02:00
className={styles.hiddenInput}
rules={{ required: formatMessage(labels.required) }}
>
2023-05-15 06:38:03 +02:00
<TextField value={startAt} />
2023-05-12 01:42:58 +02:00
</FormInput>
2023-05-15 06:38:03 +02:00
<FormInput name="endAt" rules={{ required: formatMessage(labels.required) }}>
<TextField value={endAt} className={styles.hiddenInput} />
</FormInput>
</FormRow>
<FormRow label="Window (minutes)">
<FormInput
name="window"
rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
>
<TextField value={window} onChange={handleWindowChange} />
2023-05-12 01:42:58 +02:00
</FormInput>
</FormRow>
<Button onClick={handleAddUrl}>Add URL</Button>
{urls.map((a, i) => (
2023-05-15 06:38:03 +02:00
<FormRow className={styles.urlFormRow} key={`url${i}`} label={`URL ${i + 1}`}>
2023-05-12 01:42:58 +02:00
<TextField value={urls[i]} onChange={value => handleUrlChange(value, i)} />
2023-05-15 06:38:03 +02:00
<Button onClick={() => handleRemoveUrl(i)}>Remove URL</Button>
2023-05-12 01:42:58 +02:00
</FormRow>
))}
<FormButtons>
2023-05-15 06:38:03 +02:00
<SubmitButton variant="primary" disabled={false}>
Search
</SubmitButton>
2023-05-12 01:42:58 +02:00
</FormButtons>
</Form>
</>
);
}
export default FunnelForm;