Fixed report issues.

This commit is contained in:
Mike Cao 2023-06-23 01:19:08 -07:00
parent 414854b064
commit 79856867fb
8 changed files with 1199 additions and 2112 deletions

View File

@ -135,6 +135,8 @@ export const labels = defineMessages({
fields: { id: 'label.fields', defaultMessage: 'Fields' },
createReport: { id: 'labels.create-report', defaultMessage: 'Create report' },
description: { id: 'labels.description', defaultMessage: 'Description' },
untitled: { id: 'labels.untitled', defaultMessage: 'Untitled' },
type: { id: 'labels.type', defaultMessage: 'Type' },
});
export const messages = defineMessages({

View File

@ -50,7 +50,13 @@ export function ReportHeader({ icon }) {
return (
<>
<Icon size="lg">{icon}</Icon>
<InlineEditField name="name" value={name} onCommit={handleNameChange} />
<InlineEditField
key={name}
name="name"
value={name}
placeholder={formatMessage(labels.untitled)}
onCommit={handleNameChange}
/>
</>
);
};
@ -69,6 +75,7 @@ export function ReportHeader({ icon }) {
</PageHeader>
<div className={styles.description}>
<InlineEditField
key={description}
name="description"
value={description}
placeholder={`+ ${formatMessage(labels.addDescription)}`}

View File

@ -2,15 +2,14 @@ import Link from 'next/link';
import { Button, Text, Icon, Icons } from 'react-basics';
import SettingsTable from 'components/common/SettingsTable';
import useMessages from 'hooks/useMessages';
import useConfig from 'hooks/useConfig';
export function ReportsTable({ data = [] }) {
const { formatMessage, labels } = useMessages();
const { openExternal } = useConfig();
const columns = [
{ name: 'name', label: formatMessage(labels.name) },
{ name: 'description', label: formatMessage(labels.description) },
{ name: 'type', label: formatMessage(labels.type) },
{ name: 'action', label: ' ' },
];

View File

@ -96,8 +96,10 @@ function AddUrlButton({ onAdd }) {
</Icon>
</TooltipPopup>
<Popup position="bottom" alignment="start">
{close => {
return <UrlAddForm onSave={onAdd} onClose={close} />;
{(close, element) => {
const { right, bottom } = element.getBoundingClientRect();
return <UrlAddForm onSave={onAdd} onClose={close} style={{ left: right, top: bottom }} />;
}}
</Popup>
</PopupTrigger>

View File

@ -1,13 +1,15 @@
import { useState } from 'react';
import { createPortal } from 'react-dom';
import { useMessages } from 'hooks';
import { Button, Form, FormButtons, FormRow, TextField } from 'react-basics';
import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
import styles from './UrlAddForm.module.css';
export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
export function UrlAddForm({ defaultValue = '', style, onSave, onClose }) {
const [url, setUrl] = useState(defaultValue);
const { formatMessage, labels } = useMessages();
const handleSave = () => {
const handleSave = e => {
e?.stopPropagation?.();
onSave?.(url);
setUrl('');
onClose();
@ -17,23 +19,29 @@ export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
setUrl(e.target.value);
};
return (
<Form className={styles.form} onSubmit={handleSave}>
const handleClick = e => {
e.stopPropagation();
};
return createPortal(
<Form className={styles.form} onSubmit={handleSave} style={style} onClick={handleClick}>
<FormRow label={formatMessage(labels.url)}>
<Flexbox gap={10}>
<TextField
className={styles.input}
name="url"
value={url}
onChange={handleChange}
autoFocus={true}
autoComplete="off"
/>
</FormRow>
<FormButtons align="center" flex>
<Button variant="primary" onClick={handleSave}>
{formatMessage(labels.save)}
{formatMessage(labels.add)}
</Button>
</FormButtons>
</Form>
</Flexbox>
</FormRow>
</Form>,
document.body,
);
}

View File

@ -1,8 +1,14 @@
.form {
position: absolute;
background: var(--base50);
width: 300px;
padding: 30px;
margin-top: 10px;
border: 1px solid var(--base400);
border-radius: var(--border-radius);
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
}
.input {
width: 100%;
}

View File

@ -90,12 +90,12 @@
"kafkajs": "^2.1.0",
"maxmind": "^4.3.6",
"moment-timezone": "^0.5.35",
"next": "13.4.6",
"next-basics": "^0.30.0",
"next": "13.3.1",
"next-basics": "^0.31.0",
"node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5",
"react": "^18.2.0",
"react-basics": "^0.85.0",
"react-basics": "^0.89.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.4",

3235
yarn.lock

File diff suppressed because it is too large Load Diff