Update report parameters.

This commit is contained in:
Mike Cao 2023-06-05 03:08:43 -07:00
parent 22d477b98b
commit 64c6d73b77
10 changed files with 44 additions and 40 deletions

View File

@ -19,7 +19,6 @@ export function WebsiteSelect({ websiteId, onSelect }) {
onChange={onSelect}
alignment="end"
placeholder={formatMessage(labels.selectWebsite)}
style={{ width: 200 }}
>
{({ id, name }) => <Item key={id}>{name}</Item>}
</Dropdown>

View File

@ -5,7 +5,7 @@ import styles from './PageHeader.module.css';
export function PageHeader({ title, children, className }) {
return (
<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>
);

View File

@ -4,7 +4,6 @@
align-items: center;
align-content: center;
align-self: stretch;
margin-bottom: 40px;
flex-wrap: wrap;
}
@ -23,6 +22,7 @@
font-weight: 700;
gap: 20px;
height: 60px;
flex: 1;
}
.actions {

View File

@ -48,6 +48,8 @@ export const labels = defineMessages({
deleteWebsite: { id: 'label.delete-website', defaultMessage: 'Delete website' },
reset: { id: 'label.reset', defaultMessage: 'Reset' },
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' },
currentPassword: { id: 'label.current-password', defaultMessage: 'Current password' },
newPassword: { id: 'label.new-password', defaultMessage: 'New password' },
@ -129,8 +131,8 @@ export const labels = defineMessages({
window: { id: 'label.window', defaultMessage: 'Window' },
addUrl: { id: 'label.add-url', defaultMessage: 'Add URL' },
runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
field: { id: 'label.field', defaultMessage: 'Field' },
fields: { id: 'label.fields', defaultMessage: 'Fields' },
addField: { id: 'label.add-field', defaultMessage: 'Add field' },
});
export const messages = defineMessages({

View File

@ -15,7 +15,7 @@ export function BaseParameters() {
const { value, startDate, endDate } = dateRange || {};
const handleWebsiteSelect = websiteId => {
updateReport({ parameters: { websiteId } });
updateReport({ websiteId, parameters: { websiteId } });
};
const handleDateChange = value => {

View File

@ -1,13 +1,11 @@
import { useContext } from 'react';
import { useRouter } from 'next/router';
import { Flexbox, Icon, LoadingButton, InlineEditField, useToast } from 'react-basics';
import WebsiteSelect from 'components/input/WebsiteSelect';
import { Icon, LoadingButton, InlineEditField, useToast } from 'react-basics';
import PageHeader from 'components/layout/PageHeader';
import DateFilter from 'components/input/DateFilter';
import { parseDateRange } from 'lib/date';
import { useMessages, useApi } from 'hooks';
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 }) {
const { report, updateReport } = useContext(ReportContext);
@ -20,17 +18,8 @@ export function ReportHeader({ icon }) {
post(`/reports/${data.id}`, data),
);
const { name, parameters } = report || {};
const { name, description, parameters } = report || {};
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 () => {
if (!report.id) {
@ -53,27 +42,41 @@ export function ReportHeader({ icon }) {
updateReport({ name });
};
const handleDescriptionChange = description => {
updateReport({ description });
};
const Title = () => {
return (
<>
<Icon size="lg">{icon}</Icon>
<InlineEditField value={name} onCommit={handleNameChange} />
<InlineEditField name="name" value={name} onCommit={handleNameChange} />
</>
);
};
return (
<PageHeader title={<Title />} className={styles.header}>
<LoadingButton
variant="primary"
loading={isCreating || isUpdating}
disabled={!websiteId || !value}
onClick={handleSave}
>
{formatMessage(labels.save)}
</LoadingButton>
<div className={reportStyles.header}>
<PageHeader title={<Title />}>
<LoadingButton
variant="primary"
loading={isCreating || isUpdating}
disabled={!websiteId || !dateRange?.value || !name}
onClick={handleSave}
>
{formatMessage(labels.save)}
</LoadingButton>
</PageHeader>
<div className={styles.description}>
<InlineEditField
name="description"
value={description}
placeholder={`+ ${formatMessage(labels.addDescription)}`}
onCommit={handleDescriptionChange}
/>
</div>
{toast}
</PageHeader>
</div>
);
}

View File

@ -0,0 +1,3 @@
.description {
color: var(--font-color300);
}

View File

@ -28,8 +28,10 @@ export function FunnelParameters() {
const { websiteId, dateRange, urls } = parameters || {};
const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
const handleSubmit = values => {
runReport(values);
const handleSubmit = data => {
if (!queryDisabled) {
runReport(data);
}
};
const handleAddUrl = url => {

View File

@ -17,13 +17,8 @@ export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
setUrl(e.target.value);
};
const handleClose = () => {
setUrl('');
onClose();
};
return (
<Form className={styles.form}>
<Form className={styles.form} onSubmit={handleSave}>
<FormRow label={formatMessage(labels.url)}>
<TextField
name="url"
@ -37,7 +32,6 @@ export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
<Button variant="primary" onClick={handleSave}>
{formatMessage(labels.save)}
</Button>
<Button onClick={handleClose}>{formatMessage(labels.cancel)}</Button>
</FormButtons>
</Form>
);

View File

@ -7,6 +7,7 @@
.header {
grid-row: 1 / 2;
grid-column: 1 / 3;
margin-bottom: 40px;
}
.menu {