From 3f8b391fdede1c50e638b55185a02940dc438896 Mon Sep 17 00:00:00 2001 From: Diana Nanyanzi Date: Thu, 19 Dec 2024 23:43:57 +0300 Subject: [PATCH 1/4] feat: add update key values functionality --- src/components/panels/EditorPanel.tsx | 42 +------ src/components/sections/EditSection.tsx | 135 ++++++++++++++++++++++ src/components/sections/EditorSection.tsx | 45 -------- src/routes/Router.tsx | 4 +- 4 files changed, 142 insertions(+), 84 deletions(-) create mode 100644 src/components/sections/EditSection.tsx delete mode 100644 src/components/sections/EditorSection.tsx diff --git a/src/components/panels/EditorPanel.tsx b/src/components/panels/EditorPanel.tsx index 35e08fb..51da98f 100644 --- a/src/components/panels/EditorPanel.tsx +++ b/src/components/panels/EditorPanel.tsx @@ -1,10 +1,6 @@ -import { Button } from '@dhis2/ui' import React from 'react' -import { useNavigate, useParams } from 'react-router-dom' -import classes from '../../App.module.css' -import i18n from '../../locales' -import PanelHeader from '../header/PanelHeader' -import EditorSection from '../sections/EditorSection' +import { useParams } from 'react-router-dom' +import EditSection from '../sections/EditSection' const DataStoreKeyValuesQuery = { results: { @@ -23,43 +19,15 @@ const UserDataStoreKeyValuesQuery = { } const EditorPanel = () => { - const { key, namespace, store } = useParams() - const navigate = useNavigate() + const { store } = useParams() return (
- - {key} -
- - -
- {store === 'dataStore' && ( - + )} {store === 'userDataStore' && ( - + )}
) diff --git a/src/components/sections/EditSection.tsx b/src/components/sections/EditSection.tsx new file mode 100644 index 0000000..f3f521f --- /dev/null +++ b/src/components/sections/EditSection.tsx @@ -0,0 +1,135 @@ +import { useAlert, useDataEngine, useDataQuery } from '@dhis2/app-runtime' +import { Button } from '@dhis2/ui' +import React, { useEffect, useState } from 'react' +import { useNavigate, useParams } from 'react-router-dom' +import classes from '../../App.module.css' +import i18n from '../../locales' +import PanelHeader from '../header/PanelHeader' +import Editor from './Editor' + +const EditSection = ({ query }) => { + const { key, namespace, store } = useParams() + const engine = useDataEngine() + const navigate = useNavigate() + const { show: showError } = useAlert('An error fetching this data', { + critical: true, + }) + const [setEditError] = useState(null) + const [updateLoading, setUpdateLoading] = useState(false) + + const { data, loading, refetch } = useDataQuery(query, { + variables: { + key, + namespace, + }, + onError: () => showError(), + }) + + const [value, setValue] = useState( + JSON.stringify(data?.results, null, 4) || '' + ) + + const handleEditorChange = (value) => { + setValue(value) + } + + const closeEditorAlert = useAlert(i18n.t('Do not save these changes?'), { + warning: true, + actions: [ + { + label: i18n.t('Confirm'), + onClick: () => navigate(`/${store}/edit/${namespace}`), + }, + { + label: i18n.t('Cancel'), + onClick: () => closeEditorAlert.hide(), + }, + ], + }) + + const handleClose = () => { + if (JSON.stringify(data?.results, null, 4) === value) { + navigate(`/${store}/edit/${namespace}`) + } else { + closeEditorAlert.show() + } + } + + const handleUpdate = async () => { + let body + const resource = `${store}` + setEditError(null) + setUpdateLoading(true) + + try { + body = JSON.parse(value) + await engine.mutate( + { + type: 'update' as const, + resource: resource, + id: `${namespace}/${key}`, + data: body, + }, + { + onComplete: () => { + refetch({ + key, + namespace, + }) + }, + } + ) + } catch (error) { + console.error(error) + setEditError(error.message) + } + setUpdateLoading(false) + } + + useEffect(() => { + setValue(JSON.stringify(data?.results, null, 4)) + }, [data]) + + useEffect(() => { + refetch({ + key, + namespace, + }) + }, [store, namespace, key]) + + return ( +
+ + {key} +
+ + +
+ + +
+ ) +} + +export default EditSection diff --git a/src/components/sections/EditorSection.tsx b/src/components/sections/EditorSection.tsx deleted file mode 100644 index b604b9b..0000000 --- a/src/components/sections/EditorSection.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { useAlert, useDataQuery } from '@dhis2/app-runtime' -import React, { useEffect, useState } from 'react' -import { useParams } from 'react-router-dom' -import Editor from './Editor' - -const EditorSection = ({ query }) => { - const { key, namespace, store } = useParams() - const { show: showError } = useAlert('An error fetching this data', { - critical: true, - }) - - const { data, loading, refetch } = useDataQuery(query, { - variables: { - key, - namespace, - }, - onError: () => showError(), - }) - - const [value, setValue] = useState( - JSON.stringify(data?.results, null, 4) || '' - ) - - useEffect(() => { - setValue(JSON.stringify(data?.results, null, 4)) - }, [data]) - - useEffect(() => { - refetch({ - key, - namespace, - }) - }, [store, namespace, key]) - - return ( -
- console.log('editor changes')} - /> -
- ) -} - -export default EditorSection diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx index f710b88..9e0f64e 100644 --- a/src/routes/Router.tsx +++ b/src/routes/Router.tsx @@ -1,7 +1,7 @@ import React from 'react' import { Navigate, createHashRouter } from 'react-router-dom' import ErrorComponent from '../components/error/ErrorComponent' -import Edit from '../components/pages/Edit' +import EditPage from '../components/pages/Edit' import NamespacesPage from '../components/pages/Namespaces' import EditorPanel from '../components/panels/EditorPanel' import EmptyEditorPanel from '../components/panels/EmptyEditorPanel' @@ -20,7 +20,7 @@ export const hashRouter = createHashRouter([ }, { path: ':store/edit/:namespace', - element: , + element: , children: [ { index: true, From b2062e2c255bf86481f3c507dcd7b95f7edaab0f Mon Sep 17 00:00:00 2001 From: Diana Nanyanzi Date: Fri, 20 Dec 2024 01:28:41 +0300 Subject: [PATCH 2/4] feat: add update and fetch alerts for key values --- i18n/en.pot | 40 ++++++++--- src/components/sections/EditSection.tsx | 92 +++++++++++++++++-------- 2 files changed, 92 insertions(+), 40 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index 4e4366e..ab51396 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2024-12-19T22:29:04.401Z\n" -"PO-Revision-Date: 2024-12-19T22:29:04.402Z\n" +"POT-Creation-Date: 2024-12-19T22:30:05.381Z\n" +"PO-Revision-Date: 2024-12-19T22:30:05.382Z\n" msgid "An error has occurred" msgstr "An error has occurred" @@ -41,15 +41,6 @@ msgstr "Back to all namespaces" msgid "Configure Namespaces" msgstr "Configure Namespaces" -msgid "Close" -msgstr "Close" - -msgid "Save" -msgstr "Save" - -msgid "Save changes" -msgstr "Save changes" - msgid "Choose a key to start editing" msgstr "Choose a key to start editing" @@ -59,6 +50,33 @@ msgstr "DataStore" msgid "UserDataStore" msgstr "UserDataStore" +msgid "There was a problem fetching this data - {{error}}" +msgstr "There was a problem fetching this data - {{error}}" + +msgid "Do not save these changes?" +msgstr "Do not save these changes?" + +msgid "Confirm" +msgstr "Confirm" + +msgid "Key '{{key}}' updated successfully" +msgstr "Key '{{key}}' updated successfully" + +msgid "There was a problem updating the key - {{error}}" +msgstr "There was a problem updating the key - {{error}}" + +msgid "There was a problem - {{error}}" +msgstr "There was a problem - {{error}}" + +msgid "Close" +msgstr "Close" + +msgid "Save" +msgstr "Save" + +msgid "Save changes" +msgstr "Save changes" + msgid "Key '{{key}}' added successfully" msgstr "Key '{{key}}' added successfully" diff --git a/src/components/sections/EditSection.tsx b/src/components/sections/EditSection.tsx index f3f521f..9a1c624 100644 --- a/src/components/sections/EditSection.tsx +++ b/src/components/sections/EditSection.tsx @@ -3,6 +3,7 @@ import { Button } from '@dhis2/ui' import React, { useEffect, useState } from 'react' import { useNavigate, useParams } from 'react-router-dom' import classes from '../../App.module.css' +import useCustomAlert from '../../hooks/useCustomAlert' import i18n from '../../locales' import PanelHeader from '../header/PanelHeader' import Editor from './Editor' @@ -11,10 +12,10 @@ const EditSection = ({ query }) => { const { key, namespace, store } = useParams() const engine = useDataEngine() const navigate = useNavigate() - const { show: showError } = useAlert('An error fetching this data', { - critical: true, - }) - const [setEditError] = useState(null) + + const { showError, showSuccess } = useCustomAlert() + + const [editError, setEditError] = useState(null) const [updateLoading, setUpdateLoading] = useState(false) const { data, loading, refetch } = useDataQuery(query, { @@ -22,7 +23,14 @@ const EditSection = ({ query }) => { key, namespace, }, - onError: () => showError(), + onError(error) { + showError( + i18n.t('There was a problem fetching this data - {{error}}', { + error: error.message, + interpolation: { escapeValue: false }, + }) + ) + }, }) const [value, setValue] = useState( @@ -72,16 +80,37 @@ const EditSection = ({ query }) => { }, { onComplete: () => { + showSuccess( + i18n.t("Key '{{key}}' updated successfully", { + key, + }) + ) refetch({ key, namespace, }) }, + onError(error) { + showError( + i18n.t( + 'There was a problem updating the key - {{error}}', + { + error: error.message, + interpolation: { escapeValue: false }, + } + ) + ) + }, } ) } catch (error) { - console.error(error) setEditError(error.message) + showError( + i18n.t('There was a problem - {{error}}', { + error: error.message, + interpolation: { escapeValue: false }, + }) + ) } setUpdateLoading(false) } @@ -100,29 +129,34 @@ const EditSection = ({ query }) => { return (
- {key} -
- - -
+ {data && ( + <> + {key} +
+ + +
+ + )} Date: Fri, 20 Dec 2024 15:27:19 +0300 Subject: [PATCH 3/4] feat: add scrollable height for the table --- src/components/table/ItemsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/ItemsTable.tsx b/src/components/table/ItemsTable.tsx index 754d105..389ffc5 100644 --- a/src/components/table/ItemsTable.tsx +++ b/src/components/table/ItemsTable.tsx @@ -42,7 +42,7 @@ const ItemsTable = ({ return (
{data && ( - + Date: Fri, 20 Dec 2024 20:27:14 +0300 Subject: [PATCH 4/4] feat: set active key row when params change --- src/components/table/ItemsTable.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/table/ItemsTable.tsx b/src/components/table/ItemsTable.tsx index 389ffc5..a1919d2 100644 --- a/src/components/table/ItemsTable.tsx +++ b/src/components/table/ItemsTable.tsx @@ -6,7 +6,7 @@ import { TableBody, TableHead, } from '@dhis2/ui' -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { useNavigate, useParams } from 'react-router-dom' import classes from '../../App.module.css' import i18n from '../../locales' @@ -39,6 +39,10 @@ const ItemsTable = ({ setActiveRow(item) } + useEffect(() => { + setActiveRow(key) + }, [key]) + return (
{data && (