diff --git a/components/input/WebsiteSelect.js b/components/input/WebsiteSelect.js index a0ac38e4..b77ae57c 100644 --- a/components/input/WebsiteSelect.js +++ b/components/input/WebsiteSelect.js @@ -19,7 +19,6 @@ export function WebsiteSelect({ websiteId, onSelect }) { onChange={onSelect} alignment="end" placeholder={formatMessage(labels.selectWebsite)} - style={{ width: 200 }} > {({ id, name }) => {name}} diff --git a/components/layout/PageHeader.js b/components/layout/PageHeader.js index c01192d2..f1363140 100644 --- a/components/layout/PageHeader.js +++ b/components/layout/PageHeader.js @@ -5,7 +5,7 @@ import styles from './PageHeader.module.css'; export function PageHeader({ title, children, className }) { return (
-
{title}
+ {title &&
{title}
}
{children}
); diff --git a/components/layout/PageHeader.module.css b/components/layout/PageHeader.module.css index 5ea85b70..03a1c7c8 100644 --- a/components/layout/PageHeader.module.css +++ b/components/layout/PageHeader.module.css @@ -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 { diff --git a/components/messages.js b/components/messages.js index bcb2a5c1..166a121b 100644 --- a/components/messages.js +++ b/components/messages.js @@ -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({ diff --git a/components/pages/reports/BaseParameters.js b/components/pages/reports/BaseParameters.js index 2d04f228..5dbe0f60 100644 --- a/components/pages/reports/BaseParameters.js +++ b/components/pages/reports/BaseParameters.js @@ -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 => { diff --git a/components/pages/reports/ReportHeader.js b/components/pages/reports/ReportHeader.js index 08465ef9..b8104203 100644 --- a/components/pages/reports/ReportHeader.js +++ b/components/pages/reports/ReportHeader.js @@ -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} - + ); }; return ( - } className={styles.header}> - - {formatMessage(labels.save)} - +
+ }> + + {formatMessage(labels.save)} + + +
+ +
{toast} - +
); } diff --git a/components/pages/reports/ReportHeader.module.css b/components/pages/reports/ReportHeader.module.css new file mode 100644 index 00000000..01e483a0 --- /dev/null +++ b/components/pages/reports/ReportHeader.module.css @@ -0,0 +1,3 @@ +.description { + color: var(--font-color300); +} diff --git a/components/pages/reports/funnel/FunnelParameters.js b/components/pages/reports/funnel/FunnelParameters.js index 991bf690..cf22f19c 100644 --- a/components/pages/reports/funnel/FunnelParameters.js +++ b/components/pages/reports/funnel/FunnelParameters.js @@ -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 => { diff --git a/components/pages/reports/funnel/UrlAddForm.js b/components/pages/reports/funnel/UrlAddForm.js index b9d25f29..17d19a91 100644 --- a/components/pages/reports/funnel/UrlAddForm.js +++ b/components/pages/reports/funnel/UrlAddForm.js @@ -17,13 +17,8 @@ export function UrlAddForm({ defaultValue = '', onSave, onClose }) { setUrl(e.target.value); }; - const handleClose = () => { - setUrl(''); - onClose(); - }; - return ( -
+ {formatMessage(labels.save)} - ); diff --git a/components/pages/reports/reports.module.css b/components/pages/reports/reports.module.css index b75aee64..6fa54281 100644 --- a/components/pages/reports/reports.module.css +++ b/components/pages/reports/reports.module.css @@ -7,6 +7,7 @@ .header { grid-row: 1 / 2; grid-column: 1 / 3; + margin-bottom: 40px; } .menu {