umami/components/pages/reports/FieldAddForm.js

45 lines
1.4 KiB
JavaScript
Raw Normal View History

2023-07-02 07:02:49 +02:00
import { useState } from 'react';
import { createPortal } from 'react-dom';
2023-07-05 07:51:23 +02:00
import { REPORT_PARAMETERS } from 'lib/constants';
import PopupForm from './PopupForm';
import FieldSelectForm from './FieldSelectForm';
import FieldAggregateForm from './FieldAggregateForm';
import FieldFilterForm from './FieldFilterForm';
2023-07-02 07:02:49 +02:00
import styles from './FieldAddForm.module.css';
2023-06-03 08:10:59 +02:00
2023-07-05 07:51:23 +02:00
export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
2023-07-02 07:02:49 +02:00
const [selected, setSelected] = useState();
2023-06-03 08:10:59 +02:00
2023-07-02 07:02:49 +02:00
const handleSelect = value => {
2023-07-05 07:51:23 +02:00
const { type } = value;
if (group === REPORT_PARAMETERS.groups || type === 'array' || type === 'boolean') {
value.value = group === REPORT_PARAMETERS.groups ? '' : 'total';
2023-07-02 07:02:49 +02:00
handleSave(value);
return;
}
setSelected(value);
2023-06-03 08:10:59 +02:00
};
2023-07-02 07:02:49 +02:00
const handleSave = value => {
2023-07-05 07:51:23 +02:00
onAdd(group, value);
2023-06-03 08:10:59 +02:00
onClose();
};
2023-07-02 07:02:49 +02:00
return createPortal(
<PopupForm className={styles.popup} element={element} onClose={onClose}>
2023-07-05 07:51:23 +02:00
{!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
{selected && group === REPORT_PARAMETERS.fields && (
<FieldAggregateForm {...selected} onSelect={handleSave} />
)}
{selected && group === REPORT_PARAMETERS.filters && (
<FieldFilterForm {...selected} onSelect={handleSave} />
)}
2023-07-02 07:02:49 +02:00
</PopupForm>,
document.body,
2023-06-03 08:10:59 +02:00
);
}
export default FieldAddForm;