From d60b78d1ad9e463476c15b385460e503f31385cd Mon Sep 17 00:00:00 2001 From: Diana Nanyanzi Date: Wed, 18 Dec 2024 16:30:08 +0300 Subject: [PATCH] feat: add ui components for the edit page panels --- i18n/en.pot | 109 +++++--------- src/App.module.css | 159 +++++++++++++++++++++ src/components/header/PanelHeader.tsx | 10 ++ src/components/{ => loader}/Loader.tsx | 0 src/components/pages/Edit.tsx | 33 +++++ src/components/panels/EditorPanel.tsx | 66 +++++++++ src/components/panels/EmptyEditorPanel.tsx | 25 ++++ src/components/panels/KeysPanel.tsx | 49 +++++++ src/components/sections/Editor.tsx | 22 +++ 9 files changed, 399 insertions(+), 74 deletions(-) create mode 100644 src/App.module.css create mode 100644 src/components/header/PanelHeader.tsx rename src/components/{ => loader}/Loader.tsx (100%) create mode 100644 src/components/pages/Edit.tsx create mode 100644 src/components/panels/EditorPanel.tsx create mode 100644 src/components/panels/EmptyEditorPanel.tsx create mode 100644 src/components/panels/KeysPanel.tsx create mode 100644 src/components/sections/Editor.tsx diff --git a/i18n/en.pot b/i18n/en.pot index f3cc6aa..2dc9dcc 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,104 +5,65 @@ 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-05T03:27:06.316Z\n" -"PO-Revision-Date: 2024-12-05T03:27:06.317Z\n" +"POT-Creation-Date: 2024-12-18T09:41:03.249Z\n" +"PO-Revision-Date: 2024-12-18T09:41:03.250Z\n" -msgid "View keys" -msgstr "View keys" +msgid "An error has occurred" +msgstr "An error has occurred" -msgid "Click a namespace to view its keys" -msgstr "Click a namespace to view its keys" +msgid "Back to datastore" +msgstr "Back to datastore" -msgid "Add New Key" -msgstr "Add New Key" +msgid "Back to all namespaces" +msgstr "Back to all namespaces" -msgid "Add New Namespace" -msgstr "Add New Namespace" +msgid "Search namespaces" +msgstr "Search namespaces" + +msgid "New Namespace" +msgstr "New Namespace" msgid "Namespace" msgstr "Namespace" -msgid "Key" -msgstr "Key" - -msgid "Cancel" -msgstr "Cancel" - -msgid "Add Key" -msgstr "Add Key" +msgid "Close" +msgstr "Close" -msgid "Add Namespace" -msgstr "Add Namespace" - -msgid "Key created successfully" -msgstr "Key created successfully" - -msgid "There was an error creating the key" -msgstr "There was an error creating the key" - -msgid "Add new namespace" -msgstr "Add new namespace" - -msgid "New namespace" -msgstr "New namespace" - -msgid "Add new key" -msgstr "Add new key" - -msgid "New key" -msgstr "New key" - -msgid "Delete" -msgstr "Delete" - -msgid "Failed to fetch key values!" -msgstr "Failed to fetch key values!" - -msgid "Key successfully updated" -msgstr "Key successfully updated" - -msgid "There was an error updating the key" -msgstr "There was an error updating the key" - -msgid "Loading" -msgstr "Loading" +msgid "Save" +msgstr "Save" msgid "Save changes" msgstr "Save changes" -msgid "Key deleted successfully" -msgstr "Key deleted successfully" - -msgid "There was an error deleting the key" -msgstr "There was an error deleting the key" +msgid "Choose a key to start editing" +msgstr "Choose a key to start editing" -msgid "There was an error while deleting the key" -msgstr "There was an error while deleting the key" +msgid "Keys" +msgstr "Keys" -msgid "Error fetching namespaces" -msgstr "Error fetching namespaces" +msgid "New Key" +msgstr "New Key" -msgid "Namespaces" -msgstr "Namespaces" +msgid "Search keys" +msgstr "Search keys" -msgid "This will delete all the keys in this namespace" -msgstr "This will delete all the keys in this namespace" +msgid "Key" +msgstr "Key" msgid "DataStore" msgstr "DataStore" -msgid "User DataStore" -msgstr "User DataStore" +msgid "UserDataStore" +msgstr "UserDataStore" msgid "Search" msgstr "Search" -msgid "An error has occurred" -msgstr "An error has occurred" +msgid "Delete" +msgstr "Delete" -msgid "Back" -msgstr "Back" +msgid "Actions" +msgstr "Actions" -msgid "Back to DataStore" -msgstr "Back to DataStore" +msgid "Share" +msgstr "Share" diff --git a/src/App.module.css b/src/App.module.css new file mode 100644 index 0000000..1eac17a --- /dev/null +++ b/src/App.module.css @@ -0,0 +1,159 @@ +/* layout */ +.page { + height: 100%; + background-color: var(--colors-grey300); + box-sizing: border-box; + overflow-y: hidden; +} + +/* first page */ + +.firstPage { + margin: 0 auto; + padding: 0; + width: 70vw; +} + +.firstPageContainer { + margin: 0 auto; + padding: 0; + width: 100%; + font-size: 1rem; + background-color: white; + border: 1px solid var(--colors-grey400); + border-radius: 4px; +} + +/* second page */ + +.secondPage { + margin: 0 auto; + width: 98vw; + padding: 0; +} + +.secondPageContainer { + display: grid; + grid-template-columns: 40% 60%; + width: 100%; + font-size: 1rem; + background-color: white; + border: 1px solid var(--colors-grey400); + border-radius: 4px; +} + +/* page header */ +.pageHeader { + height: 40px; + display: flex; +} + +.firstPageHeader { + font-size: 20px; + font-weight: 400; + align-self: center; +} + +.secondPageHeader { + width: fit-content; + color: var(--colors-grey700); + text-decoration: none; + align-self: center; + font-size: 14px; +} + +.secondPageHeader span { + display: grid; + grid-template-columns: auto auto; + gap: 5px; +} + +/* panel header */ + +.panelHeader { + height: 50px; + padding: 0 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + border: 1px solid var(--colors-grey300); +} + +.keysPanelHeader { + font-weight: 500; + font-size: 18px; + color: var(--colors-grey800); +} + +.keysPanelMidSection { + padding: 10px; +} + +.emptyEditorPanelHeader { + font-style: italic; + font-size: 16px; + color: var(--colors-grey600); +} + +.editorPanelHeader { + font-size: 16px; + color: var(--colors-grey800); + font-weight: 500; +} + +/* namespace view */ + +.midSection { + padding: 0.7em; + display: grid; + grid-template-columns: repeat(1fr, 4); +} + +.search { + grid-column: 1 / 2; +} + +.createButton { + grid-column: 5; + color: var(--colors-grey600); +} + +.createButton button { + width: fit-content; + float: right; +} + +/* table */ +.columnHeader { + font-size: 14px; + font-weight: 600; +} + +.actionButtons { + padding: 0; + margin: 0; +} + +.actionButtons button { + height: fit-content; + border: none; + margin: 0 0.3em; + background-color: transparent; +} + +.actionButtons button:active button:focus-visible { + background-color: transparent; +} + +/* edit page */ + +.editButtons { + display: grid; + grid-template-columns: auto auto; + gap: 10px; +} + +.editButtons button { + width: fit-content; +} diff --git a/src/components/header/PanelHeader.tsx b/src/components/header/PanelHeader.tsx new file mode 100644 index 0000000..29411fd --- /dev/null +++ b/src/components/header/PanelHeader.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import classes from '../../App.module.css' + +type HeaderProps = { + children?: React.ReactNode +} + +export default function PanelHeader({ children }: HeaderProps) { + return
{children}
+} diff --git a/src/components/Loader.tsx b/src/components/loader/Loader.tsx similarity index 100% rename from src/components/Loader.tsx rename to src/components/loader/Loader.tsx diff --git a/src/components/pages/Edit.tsx b/src/components/pages/Edit.tsx new file mode 100644 index 0000000..65e1c4c --- /dev/null +++ b/src/components/pages/Edit.tsx @@ -0,0 +1,33 @@ +import { IconArrowLeft16 } from '@dhis2/ui' +import React from 'react' +import { Link, Outlet, useParams } from 'react-router-dom' +import classes from '../../App.module.css' +import i18n from '../../locales' +import KeysPanel from '../panels/KeysPanel' +import PageHeader from '../header/PageHeader' + +const EditPage = () => { + const { store } = useParams() + + return ( +
+ + + + {i18n.t('Back to all namespaces')} + + + +
+
+ +
+
+ +
+
+
+ ) +} + +export default EditPage diff --git a/src/components/panels/EditorPanel.tsx b/src/components/panels/EditorPanel.tsx new file mode 100644 index 0000000..69292ca --- /dev/null +++ b/src/components/panels/EditorPanel.tsx @@ -0,0 +1,66 @@ +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 Editor from '../sections/Editor' +import PanelHeader from '../header/PanelHeader' + +const EditorPanel = () => { + const { key, namespace, store } = useParams() + const navigate = useNavigate() + const data = { + results: { + name: 'Mars Perseverance Rover', + launch_date: '2020-07-30', + landing_date: '2021-02-18', + mission_status: 'active', + }, + } + const [value, setValue] = useState( + JSON.stringify(data?.results, null, 4) || '' + ) + + useEffect(() => { + setValue(JSON.stringify(data?.results, null, 4)) + }, [data]) + return ( +
+ + {key} +
+ + +
+ +
+ console.log('editor changes')} + /> +
+
+ ) +} + +export default EditorPanel diff --git a/src/components/panels/EmptyEditorPanel.tsx b/src/components/panels/EmptyEditorPanel.tsx new file mode 100644 index 0000000..0ccc068 --- /dev/null +++ b/src/components/panels/EmptyEditorPanel.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import classes from '../../App.module.css' +import i18n from '../../locales' +import Editor from '../sections/Editor' +import PanelHeader from '../header/PanelHeader' + +const EmptyEditorPanel = () => { + return ( +
+ + + {i18n.t('Choose a key to start editing')} + + +
+ console.log('editor changes')} + /> +
+
+ ) +} + +export default EmptyEditorPanel diff --git a/src/components/panels/KeysPanel.tsx b/src/components/panels/KeysPanel.tsx new file mode 100644 index 0000000..cd93f43 --- /dev/null +++ b/src/components/panels/KeysPanel.tsx @@ -0,0 +1,49 @@ +import { IconAdd16, colors } from '@dhis2/ui' +import React from 'react' +import { useParams } from 'react-router-dom' +import classes from '../../App.module.css' +import i18n from '../../locales' +import CreateButton from '../sections/CreateButton' +import PanelHeader from '../header/PanelHeader' +import SearchField from '../sections/SearchField' +import ItemsTable from '../table/ItemsTable' + +const KeysPanel = () => { + const { namespace } = useParams() + + const data = { + results: [ + 'settings', + 'configuration', + 'source', + 'managed_versions', + 'configuration_managed', + 'settings_old', + 'virtual_storage', + ], + } + + return ( + <> + + + {namespace} {i18n.t('Keys')} + + console.log('create new key')} + icon={} + /> + + +
+ +
+
+ {data && } +
+ + ) +} + +export default KeysPanel diff --git a/src/components/sections/Editor.tsx b/src/components/sections/Editor.tsx new file mode 100644 index 0000000..979b564 --- /dev/null +++ b/src/components/sections/Editor.tsx @@ -0,0 +1,22 @@ +import { json } from '@codemirror/lang-json' +import CodeMirror, { ViewUpdate } from '@uiw/react-codemirror' +import React from 'react' + +type EditorProps = { + handleChange?: (value: string, viewUpdate: ViewUpdate) => void + value: string +} + +const Editor = ({ value, handleChange }: EditorProps) => { + return ( + + ) +} + +export default Editor