From 20b8ab9baa4becf130d80a1c566525d507748fd3 Mon Sep 17 00:00:00 2001
From: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com>
Date: Thu, 14 Mar 2024 20:16:56 +0200
Subject: [PATCH] Add 'Edit Query' button to Query Results

This allows easier editing of existing query results
---
 .../plan/settings/locale/lang/HtmlLang.java   |  1 +
 .../assets/plan/locale/locale_CN.yml          |  1 +
 .../assets/plan/locale/locale_CS.yml          |  1 +
 .../assets/plan/locale/locale_DE.yml          |  1 +
 .../assets/plan/locale/locale_EN.yml          |  1 +
 .../assets/plan/locale/locale_ES.yml          |  1 +
 .../assets/plan/locale/locale_FI.yml          |  1 +
 .../assets/plan/locale/locale_FR.yml          |  1 +
 .../assets/plan/locale/locale_IT.yml          |  1 +
 .../assets/plan/locale/locale_JA.yml          |  1 +
 .../assets/plan/locale/locale_KO.yml          |  1 +
 .../assets/plan/locale/locale_NL.yml          |  1 +
 .../assets/plan/locale/locale_PT_BR.yml       |  1 +
 .../assets/plan/locale/locale_RU.yml          |  1 +
 .../assets/plan/locale/locale_TR.yml          |  1 +
 .../assets/plan/locale/locale_UK.yml          |  1 +
 .../assets/plan/locale/locale_ZH_TW.yml       |  1 +
 .../src/components/alert/QueryPath.jsx        |  8 ++-
 .../cards/query/QueryOptionsCard.jsx          | 62 ++++++++++++++-----
 .../cards/query/filter/BetweenDatesFilter.jsx |  8 +--
 .../query/filter/MultipleChoiceFilter.jsx     |  7 ++-
 .../src/views/query/NewQueryView.jsx          |  2 +-
 22 files changed, 78 insertions(+), 26 deletions(-)

diff --git a/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java b/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java
index b65db83dd..00b46125f 100644
--- a/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java
+++ b/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java
@@ -336,6 +336,7 @@ public enum HtmlLang implements Lang {
     QUERY_SERVERS_TWO("html.query.label.servers.two", "using data of 2 servers"),
     QUERY_SERVERS_MANY("html.query.label.servers.many", "using data of {number} servers"),
     QUERY_SHOW_FULL_QUERY("html.query.label.showFullQuery", "Show Full Query"),
+    QUERY_EDIT_QUERY("html.query.label.editQuery", "Edit Query"),
 
     HELP_TEST_RESULT("html.label.help.testResult", "Test result"),
     HELP_TEST_IT_OUT("html.label.help.testPrompt", "Test it out:"),
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_CN.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_CN.yml
index f2d9eefef..324d13396 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_CN.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_CN.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`是`"
         label:
+            editQuery: "Edit Query"
             from: ">从 </label>"
             makeAnother: "进行另一个查询"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_CS.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_CS.yml
index c9365f39f..8beef4936 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_CS.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_CS.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "` jsou`"
         label:
+            editQuery: "Edit Query"
             from: ">od</label>"
             makeAnother: "Vytvořit další dotaz"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_DE.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_DE.yml
index 35f6e73a9..6783cbbba 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_DE.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_DE.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`are`"
         label:
+            editQuery: "Edit Query"
             from: ">from</label>"
             makeAnother: "Make another query"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_EN.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_EN.yml
index ab289f0ca..79eec9005 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_EN.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_EN.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`are`"
         label:
+            editQuery: "Edit Query"
             from: ">from</label>"
             makeAnother: "Make another query"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_ES.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_ES.yml
index 72fa2d836..aab495743 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_ES.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_ES.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`are`"
         label:
+            editQuery: "Edit Query"
             from: ">de</label>"
             makeAnother: "Realiza otra consulta"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_FI.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_FI.yml
index 700041a94..a9a65d383 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_FI.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_FI.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`ovat`"
         label:
+            editQuery: "Edit Query"
             from: ">tästä</label>"
             makeAnother: "Tee toinen kysely"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_FR.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_FR.yml
index 6d06d8256..567ef5ba9 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_FR.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_FR.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`sont`"
         label:
+            editQuery: "Edit Query"
             from: ">de</label>"
             makeAnother: "Faire une autre Requête"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_IT.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_IT.yml
index 7bfa3aac5..dec833ffa 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_IT.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_IT.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`are`"
         label:
+            editQuery: "Edit Query"
             from: ">from</label>"
             makeAnother: "Make another query"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_JA.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_JA.yml
index c85068f2e..fa608b8c9 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_JA.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_JA.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`それは`"
         label:
+            editQuery: "Edit Query"
             from: ">から</label>"
             makeAnother: "別のクエリを作る"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_KO.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_KO.yml
index 97148034d..ad1619bb5 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_KO.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_KO.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`are`"
         label:
+            editQuery: "Edit Query"
             from: ">from</label>"
             makeAnother: "Make another query"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_NL.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_NL.yml
index 67d6a0303..a0318480e 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_NL.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_NL.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`zijn`"
         label:
+            editQuery: "Edit Query"
             from: ">van</label>"
             makeAnother: "Maak nog een query"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_PT_BR.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_PT_BR.yml
index 055993a19..f519c18c8 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_PT_BR.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_PT_BR.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`are`"
         label:
+            editQuery: "Edit Query"
             from: ">from</label>"
             makeAnother: "Make another query"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_RU.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_RU.yml
index 0c009a846..645d904de 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_RU.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_RU.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "``"
         label:
+            editQuery: "Edit Query"
             from: ">с</label>"
             makeAnother: "Сделать другой запрос"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_TR.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_TR.yml
index 8eb37e2e7..3832aaf5f 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_TR.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_TR.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`vardır`"
         label:
+            editQuery: "Edit Query"
             from: ">dan</label>"
             makeAnother: "Başka bir sorgu yap"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_UK.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_UK.yml
index 106f931ff..620a45e5e 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_UK.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_UK.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "``"
         label:
+            editQuery: "Edit Query"
             from: ">з</label>"
             makeAnother: "Зробити інший запит"
             servers:
diff --git a/Plan/common/src/main/resources/assets/plan/locale/locale_ZH_TW.yml b/Plan/common/src/main/resources/assets/plan/locale/locale_ZH_TW.yml
index 90d5c3f7f..faddbd836 100644
--- a/Plan/common/src/main/resources/assets/plan/locale/locale_ZH_TW.yml
+++ b/Plan/common/src/main/resources/assets/plan/locale/locale_ZH_TW.yml
@@ -794,6 +794,7 @@ html:
         generic:
             are: "`是`"
         label:
+            editQuery: "Edit Query"
             from: ">從 </label>"
             makeAnother: "進行另一個查詢"
             servers:
diff --git a/Plan/react/dashboard/src/components/alert/QueryPath.jsx b/Plan/react/dashboard/src/components/alert/QueryPath.jsx
index 02cd896e1..dbc80ffd8 100644
--- a/Plan/react/dashboard/src/components/alert/QueryPath.jsx
+++ b/Plan/react/dashboard/src/components/alert/QueryPath.jsx
@@ -3,13 +3,14 @@ import {useQueryResultContext} from "../../hooks/queryResultContext";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faFilter} from "@fortawesome/free-solid-svg-icons";
 import {useTranslation} from "react-i18next";
+import {Link} from "react-router-dom";
 
-const QueryPath = () => {
+const QueryPath = ({newQuery}) => {
     const {t} = useTranslation();
     const {result} = useQueryResultContext();
-    const hasResults = result && result.data;
+    const hasResults = Boolean(result?.data);
     const path = result?.path;
-    if (!path || !path.length) return <></>;
+    if (!path?.length || (newQuery && hasResults)) return <></>;
 
 
     const getReadableFilterName = kind => {
@@ -48,6 +49,7 @@ const QueryPath = () => {
 
     return (
         <aside id={"result-path"} className={"alert shadow " + (hasResults ? "alert-success" : "alert-warning")}>
+            {!newQuery && <Link className={"link float-end"} to={"/query/new"}>{t('html.query.label.editQuery')}</Link>}
             {path.map((step, i) => <p key={step.kind + step.size}
                                       style={{marginBottom: 0, marginLeft: i * 0.7 + "rem"}}>
                 <FontAwesomeIcon
diff --git a/Plan/react/dashboard/src/components/cards/query/QueryOptionsCard.jsx b/Plan/react/dashboard/src/components/cards/query/QueryOptionsCard.jsx
index 70a61e54e..42d23f2c9 100644
--- a/Plan/react/dashboard/src/components/cards/query/QueryOptionsCard.jsx
+++ b/Plan/react/dashboard/src/components/cards/query/QueryOptionsCard.jsx
@@ -17,6 +17,7 @@ import FilterDropdown from "./FilterDropdown";
 import FilterList from "./FilterList";
 import {useQueryResultContext} from "../../../hooks/queryResultContext";
 import {useNavigate} from "react-router-dom";
+import {useNavigation} from "../../../hooks/navigationHook.jsx";
 
 const parseTime = (dateString, timeString) => {
     const d = dateString.match(
@@ -37,7 +38,8 @@ const parseTime = (dateString, timeString) => {
 const QueryOptionsCard = () => {
     const {t} = useTranslation();
     const navigate = useNavigate()
-    const {setResult} = useQueryResultContext();
+    const {result, setResult} = useQueryResultContext();
+    const {setCurrentTab} = useNavigation();
 
     const [loadingResults, setLoadingResults] = useState(false);
 
@@ -52,6 +54,7 @@ const QueryOptionsCard = () => {
 
     // View & filter data
     const {data: options, loadingError} = useDataRequest(fetchFilters, []);
+
     const [graphData, setGraphData] = useState(undefined);
     useEffect(() => {
         if (options) {
@@ -71,24 +74,22 @@ const QueryOptionsCard = () => {
         if (invalidFields.length || !options) return;
         if (!fromDate && !fromTime && !toDate && !toTime) return;
 
-        const newMin = parseTime(
-            fromDate ? fromDate : options.view.afterDate,
-            fromTime ? fromTime : options.view.afterTime
-        );
-        const newMax = parseTime(
-            toDate ? toDate : options.view.beforeDate,
-            toTime ? toTime : options.view.beforeTime
-        );
         setExtremes({
-            min: newMin,
-            max: newMax
+            min: parseTime(
+                fromDate || options.view.afterDate,
+                fromTime || options.view.afterTime
+            ),
+            max: parseTime(
+                toDate || options.view.beforeDate,
+                toTime || options.view.beforeTime
+            )
         });
     }, [invalidFields, options]);
     /* eslint-enable react-hooks/exhaustive-deps */
-    useEffect(updateExtremes, [invalidFields, updateExtremes]);
+    useEffect(updateExtremes, [updateExtremes]);
 
     const onSetExtremes = useCallback((event) => {
-        if (event && event.trigger) {
+        if (event?.trigger) {
             const afterDate = Highcharts.dateFormat('%d/%m/%Y', event.min);
             const afterTime = Highcharts.dateFormat('%H:%M', event.min);
             const beforeDate = Highcharts.dateFormat('%d/%m/%Y', event.max);
@@ -100,6 +101,33 @@ const QueryOptionsCard = () => {
         }
     }, [setFromTime, setFromDate, setToTime, setToDate]);
 
+    useEffect(() => {
+        if (!options || !result) return;
+
+        setSelectedServers(result.view.servers.map(server => options.view.servers.findIndex(s => s.serverUUID === server.serverUUID)).filter(i => i !== -1))
+
+        setFromDate(result.view.afterDate);
+        setFromTime(result.view.afterTime);
+        setToDate(result.view.beforeDate);
+        setToTime(result.view.beforeTime);
+
+        const existingFilters = result.filters;
+        existingFilters.forEach(f => f.options = options.filters.find(fo => fo.kind === f.kind).options);
+        setFilters(existingFilters);
+
+        setExtremes({
+            min: parseTime(
+                result.view.afterDate || options.view.afterDate,
+                result.view.afterTime || options.view.afterTime
+            ),
+            max: parseTime(
+                result.view.beforeDate || options.view.beforeDate,
+                result.view.beforeTime || options.view.beforeTime
+            )
+        });
+        setCurrentTab('html.query.label.editQuery')
+    }, [options, result, setFromDate, setFromTime, setToDate, setToTime, setFilters, setSelectedServers, setExtremes]);
+
     const getServerSelectorMessage = () => {
         const selected = selectedServers.length;
         const available = options.view.servers.length;
@@ -117,10 +145,10 @@ const QueryOptionsCard = () => {
     const performQuery = async () => {
         const inputDto = {
             view: {
-                afterDate: fromDate ? fromDate : options.view.afterDate,
-                afterTime: fromTime ? fromTime : options.view.afterTime,
-                beforeDate: toDate ? toDate : options.view.beforeDate,
-                beforeTime: toTime ? toTime : options.view.beforeTime,
+                afterDate: fromDate || options.view.afterDate,
+                afterTime: fromTime || options.view.afterTime,
+                beforeDate: toDate || options.view.beforeDate,
+                beforeTime: toTime || options.view.beforeTime,
                 servers: selectedServers.map(index => options.view.servers[index])
             },
             filters
diff --git a/Plan/react/dashboard/src/components/cards/query/filter/BetweenDatesFilter.jsx b/Plan/react/dashboard/src/components/cards/query/filter/BetweenDatesFilter.jsx
index 68759c194..fc914745e 100644
--- a/Plan/react/dashboard/src/components/cards/query/filter/BetweenDatesFilter.jsx
+++ b/Plan/react/dashboard/src/components/cards/query/filter/BetweenDatesFilter.jsx
@@ -12,10 +12,10 @@ const BetweenDatesFilter = ({index, label, filter, removeFilter, setFilterOption
 
     const options = filter.options;
 
-    const [fromDate, setFromDate] = useState(options.after[0]);
-    const [fromTime, setFromTime] = useState(options.after[1]);
-    const [toDate, setToDate] = useState(options.before[0]);
-    const [toTime, setToTime] = useState(options.before[1]);
+    const [fromDate, setFromDate] = useState(filter.parameters?.afterDate || options.after[0]);
+    const [fromTime, setFromTime] = useState(filter.parameters?.afterTime || options.after[1]);
+    const [toDate, setToDate] = useState(filter.parameters?.beforeDate || options.before[0]);
+    const [toTime, setToTime] = useState(filter.parameters?.beforeTime || options.before[1]);
     useEffect(() => {
         setFilterOptions({
             ...filter,
diff --git a/Plan/react/dashboard/src/components/cards/query/filter/MultipleChoiceFilter.jsx b/Plan/react/dashboard/src/components/cards/query/filter/MultipleChoiceFilter.jsx
index 83b4c33a1..0d2190320 100644
--- a/Plan/react/dashboard/src/components/cards/query/filter/MultipleChoiceFilter.jsx
+++ b/Plan/react/dashboard/src/components/cards/query/filter/MultipleChoiceFilter.jsx
@@ -9,7 +9,12 @@ const MultipleChoiceFilter = ({index, label, filter, removeFilter, setFilterOpti
     const {t} = useTranslation();
     const select = index === 0 ? t('html.query.filter.generic.start') : t('html.query.filter.generic.and');
 
-    const [selectedIndexes, setSelectedIndexes] = useState([]);
+    const parameterSelected = filter.parameters?.selected
+        ? JSON.parse(filter.parameters.selected)
+            .map(option => filter.options.options.indexOf(option))
+        : undefined;
+
+    const [selectedIndexes, setSelectedIndexes] = useState(parameterSelected || []);
     useEffect(() => {
         setFilterOptions({
             ...filter,
diff --git a/Plan/react/dashboard/src/views/query/NewQueryView.jsx b/Plan/react/dashboard/src/views/query/NewQueryView.jsx
index e82cb75f7..f3e74ce91 100644
--- a/Plan/react/dashboard/src/views/query/NewQueryView.jsx
+++ b/Plan/react/dashboard/src/views/query/NewQueryView.jsx
@@ -12,7 +12,7 @@ const NewQueryView = () => {
             {hasPermission('access.query') && <section className={"query-options-view"}>
                 <Row>
                     <Col md={12}>
-                        <QueryPath/>
+                        <QueryPath newQuery/>
                         <QueryOptionsCard/>
                     </Col>
                 </Row>