Merge pull request #185 from BLSQ/bluesquare-components-tree

tree selection

.github/workflows/build.yml

@@ -6,10 +6,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-            node-version: 12.x
+            node-version: 14.x
       - run: yarn install
       - run: curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > "./cc-test-reporter"
       - run: chmod +x "./cc-test-reporter"

package.json

@@ -9,8 +9,8 @@
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
   "engines": {
-    "node": ">=12",
-    "npm": ">=6"
+    "node": ">=14.17.0",
+    "npm": ">=7"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -37,8 +37,6 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/runtime": "^7.9.6",
     "@date-io/moment": "2.13.1",
-    "@material-ui/core": "4.11.0",
-    "@material-ui/icons": "4.9.1",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-json": "^4.0.3",
@@ -73,6 +71,7 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "3.4.4",
     "react-select": "^3.1.0",
+    "react-table": "7.8.0",
     "react-test-renderer": "^16.6.3",
     "recharts": "1.8.5",
     "rollup": "^2.10.0"
@@ -81,12 +80,16 @@
     "dist"
   ],
   "dependencies": {
-    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.2.1",
+    "@material-ui/lab": "^4.0.0-alpha.48",
     "@material-ui/pickers": "^3.2.10",
+    "bluesquare-components": "https://github.com/BLSQ/bluesquare-components",
     "history": "^5.0.0",
     "moment": "^2.27.0",
     "notistack": "^0.9.17",
     "qs": "^6.9.4",
+    "react-intl": "^5.10.16",
     "react-query": "^3.34.12",
     "react-redux": "^7.2.1",
     "react-router-redux": "^4.0.8",

rollup.config.js

@@ -20,6 +20,7 @@ export default {
   external: [
       ...Object.keys(pkg.dependencies || {}),
       ...Object.keys(pkg.peerDependencies || {}),
+      "bluesquare-components",
       "i18next",
       "papaparse",
       "mui-datatables",

src/components/App.js

@@ -8,9 +8,10 @@ import { withStyles } from "@material-ui/core/styles";
 import { Provider } from "react-redux";
 import { SnackbarProvider } from "notistack";
 import { I18nextProvider } from "react-i18next";
-import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
+import { createTheme, MuiThemeProvider } from "@material-ui/core/styles";
 import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import { store } from "./redux/store";
+import { IntlProvider } from "react-intl";
 
 import AppDrawer from "./shared/RawAppDrawer";
 import AppToolBar from "./shared/RawAppToolBar";
@@ -42,18 +43,58 @@ const queryClient = new QueryClient({
   },
 });
 
-const App = ({ classes, incentivesDescriptors, dataElementGroups, drawerLinks, defaultPathName }) => {
+const rawTheme = {
+  typography: {
+      useNextVariants: true,
+  },
+  textColor: '#333',
+  palette: {
+      primary: {
+          main: '#006699',
+          secondary: '#0066cc',
+          background: '#F5F5F5',
+      },
+      gray: {
+          main: '#666',
+          border: 'rgba(0,0,0,0.02)',
+          background: 'rgba(0,0,0,0.03)',
+      },
+      mediumGray: {
+          main: '#A2A2A2',
+      },
+      ligthGray: {
+          main: '#F7F7F7',
+          border: 'rgba(0, 0, 0, 0.12)',
+          background: 'rgba(0, 0, 0, 0.012)',
+      },
+      error: {
+          main: 'rgb(215, 25, 28)',
+          background: 'rgba(215, 25, 28, 0.2)',
+          backgroundHard: 'rgba(215, 25, 28, 0.7)',
+      },
+      success: {
+          main: '#4caf50',
+          background: 'rgba(#4caf50, 0.2)',
+      },
+  },
+};
+
+const defaultTheme = createTheme(rawTheme);
+
+const App = ({ classes, incentivesDescriptors, dataElementGroups, drawerLinks, defaultPathName, children }) => {
   const registry = PluginRegistry;
 
   const invoices = registry.extension("invoices.invoices");
   const dhis2 = registry.extension("core.dhis2");
   const config = registry.extension("core.config");
   const i18n = registry.extension("core.i18n");
-  const theme = registry.extension("core.theme") || createMuiTheme();
+  const theme = registry.extension("core.theme")
+
 
   return (
+    <IntlProvider messages={{}} locale="en" defaultLocale="en">
     <MuiPickersUtilsProvider utils={MomentUtils}>
-      <MuiThemeProvider theme={theme}>
+      <MuiThemeProvider theme={defaultTheme}>
         <I18nextProvider i18n={i18n}>
           <QueryClientProvider client={queryClient}>
             <SnackbarProvider
@@ -76,7 +117,8 @@ const App = ({ classes, incentivesDescriptors, dataElementGroups, drawerLinks, d
                         invoices={invoices}
                         incentivesDescriptors={incentivesDescriptors}
                         dataElementGroups={dataElementGroups}
-                      />
+                      >{children}</AppContent>
+
                     </div>
                   </div>
                 </Router>
@@ -88,6 +130,7 @@ const App = ({ classes, incentivesDescriptors, dataElementGroups, drawerLinks, d
         </I18nextProvider>
       </MuiThemeProvider>
     </MuiPickersUtilsProvider>
+    </IntlProvider>
   );
 };
 

src/components/contracts/ContractPage.js

@@ -36,6 +36,7 @@ import linksStyles from "../styles/links";
 import Table from "../shared/Table";
 import Filter from "../shared/Filter";
 import { filtersConfig, activeToday } from "./filters";
+import AncestorsBreadcrumbs from "../shared/AncestorsBreadcrumb";
 
 const styles = (theme) => ({
   ...linksStyles(theme),
@@ -176,13 +177,7 @@ const ContractPage = ({ match, location, t, history, currentUser }) => {
           <LocationOnIcon color="secondary" />
           &nbsp;
           <Typography className={classes.wrapIcon} color="secondary">
-            {orgUnit &&
-              orgUnit.ancestors.slice(1).map((a, index) => (
-                <span>
-                  <a href={"./index.html#/contracts?under_orgunit=" + a.id}>{a.name}</a>
-                  {index + 1 < orgUnit.ancestors.length - 1 && " > "}
-                </span>
-              ))}
+            <AncestorsBreadcrumbs orgUnit={orgUnit} link={(ancestor) => `/contracts?under_orgunit=${ancestor.id}`} />
           </Typography>
           {orgUnit && (
             <Button

src/components/contracts/ContractsSection.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import OrgunitRelatedSection from "../shared/OrgunitRelatedSection";
+import ContractSummary from "../shared/contracts/ContractSummary";
+
+const ContractsSection = ({ orgUnit, orgUnitSectionStyle }) => {
+  const { t } = useTranslation();
+  return (
+    <OrgunitRelatedSection messageKey={"dataEntry.activeContracts"} orgUnitSectionStyle={orgUnitSectionStyle}>
+      {orgUnit.activeContracts &&
+        orgUnit.activeContracts.map((c) => (
+          <div  style={{paddingTop : "0px"}}>
+            <ContractSummary orgUnit={orgUnit} contract={c} />
+          </div>
+        ))}
+      {(orgUnit.activeContracts === undefined || orgUnit.activeContracts.length === 0) && (
+        <div style={{ marginLeft: "20px" }}>{t("noActiveContracts")}</div>
+      )}
+    </OrgunitRelatedSection>
+  );
+};
+
+export default ContractsSection;

src/components/contracts/wizard/Step2.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import MUIDataTable from "mui-datatables";
 import PluginRegistry from "../../core/PluginRegistry";
-import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
+import { createTheme, MuiThemeProvider } from "@material-ui/core";
 
 function isIsoDate(str) {
   const isMatchingYYYYMMDD = /\d{4}-\d{2}-\d{2}/.test(str);

src/components/dataentry/DataEntriesSection.js

@@ -0,0 +1,33 @@
+import React from "react";
+import PluginRegistry from "../core/PluginRegistry";
+import OrgunitRelatedSection from "../shared/OrgunitRelatedSection";
+import DataEntryLinks from "../shared/data_entries/DataEntryLinks";
+
+const DataEntriesSection = ({ orgUnit, period, dataEntryCode, orgUnitSectionStyle }) => {
+  const dataEntryRegistry = PluginRegistry.extension("dataentry.dataEntries");
+  const config = PluginRegistry.extension("core.config");
+
+  let dataEntries = [];
+  if (orgUnit && orgUnit.activeContracts && orgUnit.activeContracts[0]) {
+    const expectedDataEntries = dataEntryRegistry.getExpectedDataEntries(orgUnit.activeContracts[0], period);
+    dataEntries = expectedDataEntries;
+  }
+
+  return (
+    <OrgunitRelatedSection messageKey="dataEntry.dataEntries" orgUnitSectionStyle={orgUnitSectionStyle}>
+      <div>
+        {dataEntries && (
+          <DataEntryLinks
+            dataEntries={dataEntries}
+            dataEntryCode={dataEntryCode || undefined}
+            period={period}
+            orgUnit={orgUnit}
+            periodFormat={config.global.periodFormat}
+          />
+        )}
+      </div>
+    </OrgunitRelatedSection>
+  );
+};
+
+export default DataEntriesSection;