mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-24 18:26:20 +01:00
Update report parameters.
This commit is contained in:
parent
22d477b98b
commit
64c6d73b77
@ -19,7 +19,6 @@ export function WebsiteSelect({ websiteId, onSelect }) {
|
|||||||
onChange={onSelect}
|
onChange={onSelect}
|
||||||
alignment="end"
|
alignment="end"
|
||||||
placeholder={formatMessage(labels.selectWebsite)}
|
placeholder={formatMessage(labels.selectWebsite)}
|
||||||
style={{ width: 200 }}
|
|
||||||
>
|
>
|
||||||
{({ id, name }) => <Item key={id}>{name}</Item>}
|
{({ id, name }) => <Item key={id}>{name}</Item>}
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
@ -5,7 +5,7 @@ import styles from './PageHeader.module.css';
|
|||||||
export function PageHeader({ title, children, className }) {
|
export function PageHeader({ title, children, className }) {
|
||||||
return (
|
return (
|
||||||
<div className={classNames(styles.header, className)}>
|
<div className={classNames(styles.header, className)}>
|
||||||
<div className={styles.title}>{title}</div>
|
{title && <div className={styles.title}>{title}</div>}
|
||||||
<div className={styles.actions}>{children}</div>
|
<div className={styles.actions}>{children}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -4,7 +4,6 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
margin-bottom: 40px;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -23,6 +22,7 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
|
@ -48,6 +48,8 @@ export const labels = defineMessages({
|
|||||||
deleteWebsite: { id: 'label.delete-website', defaultMessage: 'Delete website' },
|
deleteWebsite: { id: 'label.delete-website', defaultMessage: 'Delete website' },
|
||||||
reset: { id: 'label.reset', defaultMessage: 'Reset' },
|
reset: { id: 'label.reset', defaultMessage: 'Reset' },
|
||||||
addWebsite: { id: 'label.add-website', defaultMessage: 'Add website' },
|
addWebsite: { id: 'label.add-website', defaultMessage: 'Add website' },
|
||||||
|
addField: { id: 'label.add-field', defaultMessage: 'Add field' },
|
||||||
|
addDescription: { id: 'label.add-description', defaultMessage: 'Add description' },
|
||||||
changePassword: { id: 'label.change-password', defaultMessage: 'Change password' },
|
changePassword: { id: 'label.change-password', defaultMessage: 'Change password' },
|
||||||
currentPassword: { id: 'label.current-password', defaultMessage: 'Current password' },
|
currentPassword: { id: 'label.current-password', defaultMessage: 'Current password' },
|
||||||
newPassword: { id: 'label.new-password', defaultMessage: 'New password' },
|
newPassword: { id: 'label.new-password', defaultMessage: 'New password' },
|
||||||
@ -129,8 +131,8 @@ export const labels = defineMessages({
|
|||||||
window: { id: 'label.window', defaultMessage: 'Window' },
|
window: { id: 'label.window', defaultMessage: 'Window' },
|
||||||
addUrl: { id: 'label.add-url', defaultMessage: 'Add URL' },
|
addUrl: { id: 'label.add-url', defaultMessage: 'Add URL' },
|
||||||
runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
|
runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
|
||||||
|
field: { id: 'label.field', defaultMessage: 'Field' },
|
||||||
fields: { id: 'label.fields', defaultMessage: 'Fields' },
|
fields: { id: 'label.fields', defaultMessage: 'Fields' },
|
||||||
addField: { id: 'label.add-field', defaultMessage: 'Add field' },
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const messages = defineMessages({
|
export const messages = defineMessages({
|
||||||
|
@ -15,7 +15,7 @@ export function BaseParameters() {
|
|||||||
const { value, startDate, endDate } = dateRange || {};
|
const { value, startDate, endDate } = dateRange || {};
|
||||||
|
|
||||||
const handleWebsiteSelect = websiteId => {
|
const handleWebsiteSelect = websiteId => {
|
||||||
updateReport({ parameters: { websiteId } });
|
updateReport({ websiteId, parameters: { websiteId } });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDateChange = value => {
|
const handleDateChange = value => {
|
||||||
|
@ -1,13 +1,11 @@
|
|||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { Flexbox, Icon, LoadingButton, InlineEditField, useToast } from 'react-basics';
|
import { Icon, LoadingButton, InlineEditField, useToast } from 'react-basics';
|
||||||
import WebsiteSelect from 'components/input/WebsiteSelect';
|
|
||||||
import PageHeader from 'components/layout/PageHeader';
|
import PageHeader from 'components/layout/PageHeader';
|
||||||
import DateFilter from 'components/input/DateFilter';
|
|
||||||
import { parseDateRange } from 'lib/date';
|
|
||||||
import { useMessages, useApi } from 'hooks';
|
import { useMessages, useApi } from 'hooks';
|
||||||
import { ReportContext } from './Report';
|
import { ReportContext } from './Report';
|
||||||
import styles from './reports.module.css';
|
import styles from './ReportHeader.module.css';
|
||||||
|
import reportStyles from './reports.module.css';
|
||||||
|
|
||||||
export function ReportHeader({ icon }) {
|
export function ReportHeader({ icon }) {
|
||||||
const { report, updateReport } = useContext(ReportContext);
|
const { report, updateReport } = useContext(ReportContext);
|
||||||
@ -20,17 +18,8 @@ export function ReportHeader({ icon }) {
|
|||||||
post(`/reports/${data.id}`, data),
|
post(`/reports/${data.id}`, data),
|
||||||
);
|
);
|
||||||
|
|
||||||
const { name, parameters } = report || {};
|
const { name, description, parameters } = report || {};
|
||||||
const { websiteId, dateRange } = parameters || {};
|
const { websiteId, dateRange } = parameters || {};
|
||||||
const { value, startDate, endDate } = dateRange || {};
|
|
||||||
|
|
||||||
const handleWebsiteSelect = websiteId => {
|
|
||||||
updateReport({ parameters: { websiteId } });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDateChange = value => {
|
|
||||||
updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
if (!report.id) {
|
if (!report.id) {
|
||||||
@ -53,27 +42,41 @@ export function ReportHeader({ icon }) {
|
|||||||
updateReport({ name });
|
updateReport({ name });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleDescriptionChange = description => {
|
||||||
|
updateReport({ description });
|
||||||
|
};
|
||||||
|
|
||||||
const Title = () => {
|
const Title = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Icon size="lg">{icon}</Icon>
|
<Icon size="lg">{icon}</Icon>
|
||||||
<InlineEditField value={name} onCommit={handleNameChange} />
|
<InlineEditField name="name" value={name} onCommit={handleNameChange} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageHeader title={<Title />} className={styles.header}>
|
<div className={reportStyles.header}>
|
||||||
<LoadingButton
|
<PageHeader title={<Title />}>
|
||||||
variant="primary"
|
<LoadingButton
|
||||||
loading={isCreating || isUpdating}
|
variant="primary"
|
||||||
disabled={!websiteId || !value}
|
loading={isCreating || isUpdating}
|
||||||
onClick={handleSave}
|
disabled={!websiteId || !dateRange?.value || !name}
|
||||||
>
|
onClick={handleSave}
|
||||||
{formatMessage(labels.save)}
|
>
|
||||||
</LoadingButton>
|
{formatMessage(labels.save)}
|
||||||
|
</LoadingButton>
|
||||||
|
</PageHeader>
|
||||||
|
<div className={styles.description}>
|
||||||
|
<InlineEditField
|
||||||
|
name="description"
|
||||||
|
value={description}
|
||||||
|
placeholder={`+ ${formatMessage(labels.addDescription)}`}
|
||||||
|
onCommit={handleDescriptionChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
{toast}
|
{toast}
|
||||||
</PageHeader>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
3
components/pages/reports/ReportHeader.module.css
Normal file
3
components/pages/reports/ReportHeader.module.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.description {
|
||||||
|
color: var(--font-color300);
|
||||||
|
}
|
@ -28,8 +28,10 @@ export function FunnelParameters() {
|
|||||||
const { websiteId, dateRange, urls } = parameters || {};
|
const { websiteId, dateRange, urls } = parameters || {};
|
||||||
const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
|
const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
|
||||||
|
|
||||||
const handleSubmit = values => {
|
const handleSubmit = data => {
|
||||||
runReport(values);
|
if (!queryDisabled) {
|
||||||
|
runReport(data);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAddUrl = url => {
|
const handleAddUrl = url => {
|
||||||
|
@ -17,13 +17,8 @@ export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
|
|||||||
setUrl(e.target.value);
|
setUrl(e.target.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setUrl('');
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form className={styles.form}>
|
<Form className={styles.form} onSubmit={handleSave}>
|
||||||
<FormRow label={formatMessage(labels.url)}>
|
<FormRow label={formatMessage(labels.url)}>
|
||||||
<TextField
|
<TextField
|
||||||
name="url"
|
name="url"
|
||||||
@ -37,7 +32,6 @@ export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
|
|||||||
<Button variant="primary" onClick={handleSave}>
|
<Button variant="primary" onClick={handleSave}>
|
||||||
{formatMessage(labels.save)}
|
{formatMessage(labels.save)}
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={handleClose}>{formatMessage(labels.cancel)}</Button>
|
|
||||||
</FormButtons>
|
</FormButtons>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
.header {
|
.header {
|
||||||
grid-row: 1 / 2;
|
grid-row: 1 / 2;
|
||||||
grid-column: 1 / 3;
|
grid-column: 1 / 3;
|
||||||
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
|
Loading…
Reference in New Issue
Block a user