Upstream/Plan
1
0
Fork 0
mirror of https://github.com/plan-player-analytics/Plan.git synced 2025-01-10 18:37:57 +01:00
Code Issues Projects Releases Wiki Activity

Implemented query page loader

Browse Source
This commit is contained in:
Aurora Lahtela 2022-11-20 20:44:44 +02:00
parent 838f362e30
commit ac88a57afe
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Plan/react/dashboard/src/components/cards/query/QueryOptionsCard.js
View File

@ -8,7 +8,7 @@ import {ChartLoader} from "../../navigation/Loader";
import DateInputField from "../../input/DateInputField"; import DateInputField from "../../input/DateInputField";
import TimeInputField from "../../input/TimeInputField"; import TimeInputField from "../../input/TimeInputField";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faSearch} from "@fortawesome/free-solid-svg-icons"; import {faGear, faSearch} from "@fortawesome/free-solid-svg-icons";
import PlayersOnlineGraph from "../../graphs/PlayersOnlineGraph"; import PlayersOnlineGraph from "../../graphs/PlayersOnlineGraph";
import Highcharts from "highcharts/highstock"; import Highcharts from "highcharts/highstock";
import MultiSelect from "../../input/MultiSelect"; import MultiSelect from "../../input/MultiSelect";
@ -39,6 +39,8 @@ const QueryOptionsCard = () => {
const navigate = useNavigate() const navigate = useNavigate()
const {setResult} = useQueryResultContext(); const {setResult} = useQueryResultContext();
const [loadingResults, setLoadingResults] = useState(false);
// View state // View state
const [fromDate, setFromDate] = useState(undefined); const [fromDate, setFromDate] = useState(undefined);
const [fromTime, setFromTime] = useState(undefined); const [fromTime, setFromTime] = useState(undefined);
@ -125,7 +127,9 @@ const QueryOptionsCard = () => {
} }
// TODO handle error // TODO handle error
setLoadingResults(true);
const {data} = await postQuery(inputDto); const {data} = await postQuery(inputDto);
setLoadingResults(false);
setResult(data); setResult(data);
window.scrollTo(0, 0); window.scrollTo(0, 0);
if (data?.data) { if (data?.data) {
@ -224,9 +228,10 @@ const QueryOptionsCard = () => {
</Card.Body> </Card.Body>
<button id={"query-button"} <button id={"query-button"}
className={"btn bg-plan m-2"} className={"btn bg-plan m-2"}
disabled={Boolean(invalidFields.length)} disabled={Boolean(invalidFields.length) || loadingResults}
onClick={performQuery}> onClick={performQuery}>
<FontAwesomeIcon icon={faSearch}/> {t('html.query.performQuery')} <FontAwesomeIcon icon={loadingResults ? faGear : faSearch}
spin={loadingResults}/> {t('html.query.performQuery')}
</button> </button>
</Card> </Card>
) )