Skip to content

Commit 0d6a894

Browse files
mvanbrabmvanbrab
committed
Split TemplatedQueryForm.jsx into TemplatedListResultTable.jsx and TemplatedQueryForm.jsx
1 parent 151b25b commit 0d6a894

File tree

3 files changed

+106
-84
lines changed

3 files changed

+106
-84
lines changed

‎src/App.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import SolidLoginForm from "./components/LoginPage/LoginPage";
1313
import {QueryClient} from "react-query";
1414
import Dashboard from "./components/Dashboard/Dashboard";
1515
import InteractionLayout from "./components/InteractionLayout/InteractionLayout";
16-
import TemplatedQueryForm from "./components/ListResultTable/TemplatedQueryForm.jsx";
16+
import TemplatedListResultTable from "./components/ListResultTable/TemplatedListResultTable.jsx";
1717

1818
const queryClient = new QueryClient({
1919
defaultOptions: {
@@ -70,7 +70,7 @@ function App() {
7070
name={query.id}
7171
options={{ label: query.name }}
7272
icon={IconProvider[query.icon]}
73-
list={TemplatedQueryForm}
73+
list={TemplatedListResultTable}
7474
/>
7575
);
7676
})}

‎src/components/ListResultTable/TemplatedListResultTable.jsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import {useState} from 'react';
2+
import {useResourceContext} from "react-admin";
3+
import {useLocation, useNavigate} from 'react-router-dom';
4+
import {Component} from "react";
5+
6+
import TemplatedQueryForm from "./TemplatedQueryForm.jsx";
7+
import ListResultTable from "./ListResultTable.jsx";
8+
import config from "../../config";
9+
10+
/**
11+
* A wrapper component around ListResultTable, to support templated queries
12+
* @param {object} props - the props passed down to the component
13+
* @returns {Component} the wrapper component
14+
*/
15+
const TemplatedListResultTable = (props) => {
16+
const resource = useResourceContext();
17+
const location = useLocation();
18+
const navigate = useNavigate();
19+
const [variables, setVariables] = useState({});
20+
21+
const query = config.queries.filter(
22+
(query) => query.id === resource
23+
)[0];
24+
const isTemplatedQuery = query.variables !== undefined;
25+
let tableEnabled = !isTemplatedQuery;
26+
27+
if (isTemplatedQuery) {
28+
// Update variables from query parameters
29+
const queryParams = new URLSearchParams(location.search);
30+
const queryVariables = {};
31+
for (const variableName of Object.keys(query.variables)) {
32+
if (queryParams.has(variableName)) {
33+
queryVariables[variableName] = queryParams.get(variableName);
34+
}
35+
}
36+
if (!equalSimpleObjects(variables, queryVariables)) {
37+
setVariables(queryVariables);
38+
} else {
39+
tableEnabled = (Object.keys(variables).length === Object.keys(query.variables).length);
40+
}
41+
}
42+
43+
const onSubmit = (formVariables) => {
44+
// Update query parameters from the TemplatedQueryForm fields
45+
const queryParams = new URLSearchParams(location.search);
46+
for (const [variableName, variableValue] of Object.entries(formVariables)) {
47+
if (variableValue) {
48+
queryParams.set(variableName, variableValue);
49+
}
50+
}
51+
const queryString= queryParams.toString();
52+
if (queryString.length > 0) {
53+
navigate(`?${queryString}`);
54+
}
55+
}
56+
57+
return (
58+
<>
59+
{isTemplatedQuery && !tableEnabled && <TemplatedQueryForm variableOptions={query.variables} onSubmit={onSubmit} />}
60+
{tableEnabled && <ListResultTable {...props} variables={variables}/>}
61+
</>
62+
)
63+
}
64+
65+
/**
66+
* Check if two objects have the same property values (of type a primitive value or a string)
67+
* @param {object} obj1 - the first object
68+
* @param {object} obj2 - the second object
69+
* @returns {boolean} true means equal
70+
*/
71+
function equalSimpleObjects(obj1, obj2) {
72+
if (Object.keys(obj1).length !== Object.keys(obj2).length) {
73+
return false;
74+
}
75+
for (const key1 in obj1) {
76+
if (obj1[key1] !== obj2[key1]) {
77+
return false;
78+
}
79+
}
80+
return true;
81+
}
82+
export default TemplatedListResultTable;

‎src/components/ListResultTable/TemplatedQueryForm.jsx‎

Lines changed: 22 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,34 @@
1-
import {useState} from 'react';
2-
import ListResultTable from "./ListResultTable.jsx";
3-
import {SelectInput, SimpleForm, useResourceContext, required} from "react-admin";
4-
import {useLocation, useNavigate} from 'react-router-dom';
1+
import {SelectInput, SimpleForm, required} from "react-admin";
52
import {Component} from "react";
6-
7-
import config from "../../config";
3+
import PropTypes from "prop-types";
84

95
/**
106
* A custom form to set/choose values for variables for a templated query before that query is executed
117
* @param {object} props - the props passed down to the component
128
* @returns {Component} the templated query form component
139
*/
1410
const TemplatedQueryForm = (props) => {
15-
const resource = useResourceContext();
16-
const location = useLocation();
17-
const navigate = useNavigate();
18-
const [variables, setVariables] = useState({});
19-
20-
const query = config.queries.filter(
21-
(query) => query.id === resource
22-
)[0];
23-
const isTemplatedQuery = query.variables !== undefined;
24-
let tableEnabled = !isTemplatedQuery;
25-
26-
if (isTemplatedQuery) {
27-
// Update variables from query parameters
28-
const queryParams = new URLSearchParams(location.search);
29-
const queryVariables = {};
30-
for (const variableName of Object.keys(query.variables)) {
31-
if (queryParams.has(variableName)) {
32-
queryVariables[variableName] = queryParams.get(variableName);
33-
}
34-
}
35-
if (!equalSimpleObjects(variables, queryVariables)) {
36-
setVariables(queryVariables);
37-
} else {
38-
tableEnabled = (Object.keys(variables).length === Object.keys(query.variables).length);
39-
}
40-
}
41-
42-
const onSubmit = (formVariables) => {
43-
// Update query parameters from the form fields
44-
const queryParams = new URLSearchParams(location.search);
45-
for (const [variableName, variableValue] of Object.entries(formVariables)) {
46-
if (variableValue) {
47-
queryParams.set(variableName, variableValue);
48-
}
49-
}
50-
const queryString= queryParams.toString();
51-
if (queryString.length > 0) {
52-
navigate(`?${queryString}`);
53-
}
54-
}
55-
11+
const {
12+
variableOptions,
13+
onSubmit
14+
} = props;
5615
return (
57-
<>
58-
{isTemplatedQuery && !tableEnabled && (
59-
<SimpleForm onSubmit={onSubmit}>
60-
{Object.entries(query.variables).map(([name, options]) => (
61-
<SelectInput key={name} source={name} name={name} label={name} validate={required()} choices={
62-
options.map((option) => ({
63-
id: option,
64-
name: option
65-
}))
66-
}/>
67-
))}
68-
</SimpleForm>
69-
)}
70-
{tableEnabled && (
71-
<ListResultTable {...props} variables={variables}/>
72-
)}
73-
</>
74-
)
16+
<SimpleForm onSubmit={onSubmit}>
17+
{Object.entries(variableOptions).map(([name, options]) => (
18+
<SelectInput key={name} source={name} name={name} label={name} validate={required()} choices={
19+
options.map((option) => ({
20+
id: option,
21+
name: option
22+
}))
23+
}/>
24+
))}
25+
</SimpleForm>
26+
);
7527
}
7628

77-
/**
78-
* Check if two objects have the same property values (of type a primitive value or a string)
79-
* @param {object} obj1 - the first object
80-
* @param {object} obj2 - the second object
81-
* @returns {boolean} true means equal
82-
*/
83-
function equalSimpleObjects(obj1, obj2) {
84-
if (Object.keys(obj1).length !== Object.keys(obj2).length) {
85-
return false;
86-
}
87-
for (const key1 in obj1) {
88-
if (obj1[key1] !== obj2[key1]) {
89-
return false;
90-
}
91-
}
92-
return true;
93-
}
29+
TemplatedQueryForm.propTypes = {
30+
variableOptions: PropTypes.object,
31+
onSubmit: PropTypes.func,
32+
};
33+
9434
export default TemplatedQueryForm;

0 commit comments

Comments
 (0)