Skip to content

Commit

Permalink
feat: initial commit configurations
Browse files Browse the repository at this point in the history
  • Loading branch information
tomzemp committed Jan 3, 2024
1 parent 636942c commit cd4bde8
Show file tree
Hide file tree
Showing 69 changed files with 4,656 additions and 2,509 deletions.
58 changes: 52 additions & 6 deletions i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -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: 2023-08-22T13:27:44.584Z\n"
"PO-Revision-Date: 2023-08-22T13:27:44.584Z\n"
"POT-Creation-Date: 2023-12-06T13:17:13.364Z\n"
"PO-Revision-Date: 2023-12-06T13:17:13.364Z\n"

msgid "Aggregate data exchange information is not accessible"
msgstr "Aggregate data exchange information is not accessible"
Expand Down Expand Up @@ -73,11 +73,32 @@ msgstr "{{requestsCount}} data reports"
msgid "Source data was generated {{timeDifference}} ago"
msgstr "Source data was generated {{timeDifference}} ago"

msgid "Exchange content not accessible"
msgstr "Exchange content not accessible"
msgid "Data exchange configurator"
msgstr "Data exchange configurator"

msgid "New exchange configuration"
msgstr "New exchange configuration"

msgid "{{numberOfRequests}} requests"
msgstr "{{numberOfRequests}} requests"

msgid "Created {{createdDate}}"
msgstr "Created {{createdDate}}"

msgid "Click to refresh"
msgstr "Click to refresh"
msgid "Edit"
msgstr "Edit"

msgid "Delete"
msgstr "Delete"

msgid "Edit exchange"
msgstr "Edit exchange"

msgid "Save exchange"
msgstr "Save exchange"

msgid "Cancel"
msgstr "Cancel"

msgid "Conflicts"
msgstr "Conflicts"
Expand All @@ -100,6 +121,13 @@ msgstr "Yes, submit"
msgid "There was a problem submitting data"
msgstr "There was a problem submitting data"

msgid ""
"It was not possible to submit your data. The message below provides "
"additional detail."
msgstr ""
"It was not possible to submit your data. The message below provides "
"additional detail."

msgid "Close"
msgstr "Close"

Expand Down Expand Up @@ -210,3 +238,21 @@ msgstr "Data exchange"

msgid "Choose a data exchange"
msgstr "Choose a data exchange"

msgid "Configurations"
msgstr "Configurations"

msgid "Exchange content not accessible"
msgstr "Exchange content not accessible"

msgid ""
"It was not possible to retrieve data for the requested exchange. This may "
"be due to either a connection error or a configuration issue. The message "
"below provides additional detail."
msgstr ""
"It was not possible to retrieve data for the requested exchange. This may "
"be due to either a connection error or a configuration issue. The message "
"below provides additional detail."

msgid "The exchange you requested does not exist or you do not have access to it"
msgstr "The exchange you requested does not exist or you do not have access to it"
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,18 @@
"devDependencies": {
"@dhis2/cli-app-scripts": "^10.0.0",
"@dhis2/cli-style": "^10.4.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"@dhis2/cypress-commands": "^9.0.2",
"@dhis2/cypress-plugins": "^9.0.2",
"cypress": "^9.7.0",
"cypress-cucumber-preprocessor": "^4.3.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"start-server-and-test": "^1.14.0"
},
"dependencies": {
"@dhis2/app-runtime": "^3.4.4",
"@dhis2/ui": "^8.15.1",
"classnames": "^2.5.1",
"react-router-dom": "^6.4.1",
"use-query-params": "^2.1.1"
}
Expand Down
10 changes: 8 additions & 2 deletions src/app-context/app-provider.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useDataQuery } from '@dhis2/app-runtime'
import i18n from '@dhis2/d2-i18n'
import PropTypes from 'prop-types'
import React from 'react'
import { Loader, Warning } from '../shared/index.js'
import { Loader, Warning } from '../components/shared/index.js'
import { AppContext } from './app-context.js'

const query = {
Expand All @@ -12,7 +12,13 @@ const query = {
resource: 'aggregateDataExchanges',
params: {
paging: false,
fields: ['id', 'displayName'],
fields: [
'id',
'displayName',
'created',
'target[type]',
'source[requests~size]',
],
},
},
}
Expand Down
79 changes: 25 additions & 54 deletions src/app/app.js
Original file line number Diff line number Diff line change
@@ -1,63 +1,34 @@
import { CssVariables } from '@dhis2/ui'
import PropTypes from 'prop-types'
import React, { useState } from 'react'
import { HashRouter, Route } from 'react-router-dom'
import React from 'react'
import { HashRouter, Route, Routes } from 'react-router-dom'
import { QueryParamProvider } from 'use-query-params'
import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'
import { AppProvider } from '../app-context/index.js'
import { BottomBar } from '../bottom-bar/index.js'
import { DataWorkspace } from '../data-workspace/index.js'
import { ExchangeProvider } from '../exchange-context/index.js'
import { SubmitModal } from '../submit-modal/index.js'
import { TopBar } from '../top-bar/index.js'
import { Layout } from './layout.js'
import { DataPage, EditPage, EditItem } from '../pages/index.js'

const App = ({ router: Router }) => {
const [submitModalOpen, setSubmitModalOpen] = useState(false)
const [dataSubmitted, setDataSubmitted] = useState(null)

const closeSubmitModal = () => {
setSubmitModalOpen(false)
}
const openSubmitModal = () => {
setSubmitModalOpen(true)
}
return (
<>
<CssVariables spacers colors theme />
<Router>
<QueryParamProvider
adapter={ReactRouter6Adapter}
ReactRouterRoute={Route}
>
<AppProvider>
<Layout.Container>
<Layout.Top>
<TopBar />
</Layout.Top>
<ExchangeProvider>
<Layout.Content>
<DataWorkspace />
<SubmitModal
open={submitModalOpen}
onClose={closeSubmitModal}
setDataSubmitted={setDataSubmitted}
/>
</Layout.Content>
<Layout.Bottom>
<BottomBar
openSubmitModal={openSubmitModal}
dataSubmitted={dataSubmitted}
/>
</Layout.Bottom>
</ExchangeProvider>
</Layout.Container>
</AppProvider>
</QueryParamProvider>
</Router>
</>
)
}
const App = ({ router: Router }) => (
<>
<CssVariables spacers colors theme />
<Router>
<QueryParamProvider
adapter={ReactRouter6Adapter}
ReactRouterRoute={Route}
>
<AppProvider>
<Routes>
<Route path="/" element={<DataPage />}></Route>
<Route path="/edit" element={<EditPage />}></Route>
<Route
path="/edit/:exchangeID"
element={<EditItem />}
></Route>
</Routes>
</AppProvider>
</QueryParamProvider>
</Router>
</>
)

App.defaultProps = {
router: HashRouter,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import i18n from '@dhis2/d2-i18n'
import { Button } from '@dhis2/ui'
import PropTypes from 'prop-types'
import React from 'react'
import { useExchangeContext } from '../exchange-context/index.js'
import { useExchangeContext } from '../../exchange-context/index.js'
import { useExchangeId } from '../../use-context-selection/index.js'
import { ButtonWithTooltip } from '../shared/button-with-tooltip/index.js'
import { useExchangeId } from '../use-context-selection/index.js'

const BottomBar = ({ openSubmitModal, dataSubmitted }) => {
const [exchangeId] = useExchangeId()
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import i18n from '@dhis2/d2-i18n'
import { CenteredContent } from '@dhis2/ui'
import React, { useEffect } from 'react'
import { useAppContext } from '../app-context/index.js'
import { useExchangeContext } from '../exchange-context/index.js'
import { Warning } from '../shared/index.js'
import { useAppContext } from '../../app-context/index.js'
import { useExchangeContext } from '../../exchange-context/index.js'
import {
useExchangeId,
useRequestIndex,
} from '../use-context-selection/index.js'
} from '../../use-context-selection/index.js'
import { Warning } from '../shared/index.js'
import { EntryScreen } from './entry-screen.js'
import { RequestsDisplay } from './requests-display/index.js'
import { RequestsNavigation } from './requests-navigation/index.js'
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import i18n from '@dhis2/d2-i18n'
import { Button, IconLaunch16 } from '@dhis2/ui'
import PropTypes from 'prop-types'
import React from 'react'
import { useExchangeContext } from '../../exchange-context/index.js'
import { useExchangeContext } from '../../../exchange-context/index.js'
import { Warning } from '../../shared/index.js'
import { Table } from '../table/index.js'
import styles from './requests-display.module.css'
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import i18n from '@dhis2/d2-i18n'
import { IconInfo16, IconDimensionDataSet16, Tooltip } from '@dhis2/ui'
import moment from 'moment'
import React from 'react'
import { useExchangeContext } from '../../exchange-context/index.js'
import { useExchangeContext } from '../../../exchange-context/index.js'
import styles from './title-bar.module.css'

const getRelativeTimeDifference = ({ startTimestamp, endTimestamp }) => {
Expand Down
23 changes: 23 additions & 0 deletions src/components/edit/overview/edit-home-top-bar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import i18n from '@dhis2/d2-i18n'
import { Button, SelectorBar } from '@dhis2/ui'
import React from 'react'
import { Link } from 'react-router-dom'
import styles from './edit-home-top-bar.module.css'

export const EditHomeTopBar = () => (
<div>
<SelectorBar>
<Link to="/">
<Button small className={styles.exitConfigurationsButton}>
{i18n.t('Exit configuration mode')}
</Button>
</Link>
</SelectorBar>
<div className={styles.editTopBarContainer}>
<h2 className={styles.editTitle}>
{i18n.t('Data exchange configurator')}
</h2>
<Button primary>{i18n.t('New exchange configuration')}</Button>
</div>
</div>
)
15 changes: 15 additions & 0 deletions src/components/edit/overview/edit-home-top-bar.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.editTopBarContainer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--spacers-dp16) 0 var(--spacers-dp16);
}

.editTitle {
font-size: 26px;
font-weight: 300;
}

.exitConfigurationsButton {
margin: var(--spacers-dp8);
}
85 changes: 85 additions & 0 deletions src/components/edit/overview/items-list.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { useTimeZoneConversion } from '@dhis2/app-runtime'
import i18n from '@dhis2/d2-i18n'
import {
Button,
ButtonStrip,
Card,
IconArrowRight16,
IconApps16,
IconClock16,
} from '@dhis2/ui'
import PropTypes from 'prop-types'
import React from 'react'
import { Link } from 'react-router-dom'
import { useAppContext } from '../../../app-context/index.js'
import { getNaturalCapitalization } from '../../../utils/helpers.js'
import styles from './items-list.module.css'

const IconTextItem = ({ icon, text }) => (
<div className={styles.iconText}>
<div className={styles.icon}>{icon}</div>
<div>{text}</div>
</div>
)

IconTextItem.propTypes = {
icon: PropTypes.node,
text: PropTypes.string,
}

const AggregateDataExchangeCard = ({ ade }) => {
const { fromServerDate } = useTimeZoneConversion()
const createdClient = fromServerDate(ade?.created)
return (
<div className={styles.cardContainer}>
<Card key={ade.id} className={styles.cardContainerInner}>
<div className={styles.exchangeTitle}>{ade.displayName}</div>
<div className={styles.detailsContainer}>
<IconTextItem
icon={<IconArrowRight16 />}
text={getNaturalCapitalization(ade.target?.type)}
/>
<IconTextItem
icon={<IconApps16 />}
text={i18n.t('{{numberOfRequests}} requests', {
numberOfRequests: ade.source.requests,
})}
/>
<IconTextItem
icon={<IconClock16 />}
text={i18n.t('Created {{createdDate}}', {
createdDate: createdClient
.getClientZonedISOString()
.substring(0, 10),
})}
/>
</div>
<div>
<ButtonStrip>
<Link to={`/edit/${ade.id}`}>
<Button small>{i18n.t('Edit')}</Button>
</Link>
<Button destructive secondary small>
{i18n.t('Delete')}
</Button>
</ButtonStrip>
</div>
</Card>
</div>
)
}

AggregateDataExchangeCard.propTypes = {
ade: PropTypes.object,
}

export const EditItemsList = () => {
const { aggregateDataExchanges } = useAppContext()
return (
<div className={styles.listContainer}>
{aggregateDataExchanges.map((ade) => (
<AggregateDataExchangeCard key={ade.id} ade={ade} />
))}
</div>
)
}
Loading

0 comments on commit cd4bde8

Please sign in to comment.