OM-79: eslint fix, new navbar contribs init, draft pages

README.md

@@ -12,8 +12,12 @@ In development mode, you can use `npm link` and `npm start` to continuously scan
 
 ## Main Menu Contributions
 
+**Workers and Vouchers** ('worker.MainMenu') - it is displayed if __"isWorker"__ variable is set to __true__.
+
 ## Other Contributions
 
+* `core.Router`: registering `voucher/vouchers`, `voucher/vouchers/voucher`, `voucher/acquirement`, `voucher/assignment`, routes in openIMIS client-side router
+
 ## Available Contribution Points
 
 ## Dispatched Redux Actions

package.json

@@ -16,6 +16,9 @@
     "format": "prettier src -w",
     "prepare": "npm run build"
   },
+  "peerDependency": {
+    "react-intl": "^5.8.1"
+  },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.6",
@@ -29,13 +32,12 @@
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-url": "^5.0.0",
-    "moment": "^2.25.3",
-    "prop-types": "^15.7.2",
-    "react-autosuggest": "^10.0.2",
-    "react-intl": "^2.9.0",
-    "react-router-dom": "^5.2.0",
-    "redux": "^4.0.5",
-    "redux-api-middleware": "^3.2.1",
+    "eslint": "^7.32.0 || ^8.2.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "rollup": "^2.10.0"
   },
   "files": [

rollup.config.js

@@ -1,40 +1,40 @@
-import babel from '@rollup/plugin-babel'
-import json from '@rollup/plugin-json'
-import pkg from './package.json'
+import babel from '@rollup/plugin-babel';
+import json from '@rollup/plugin-json';
+import pkg from './package.json';
 
 export default {
   input: 'src/index.js',
   output: [
     {
       file: pkg.module,
       format: 'es',
-      sourcemap: true
+      sourcemap: true,
     },
     {
       file: 'dist/index.js',
       format: 'cjs',
-      sourcemap: true
-    }
+      sourcemap: true,
+    },
   ],
   external: [
     /^@babel.*/,
     /^@date-io\/.*/,
     /^@material-ui\/.*/,
     /^@openimis.*/,
-    "classnames",
-    "clsx",
-    "history",
+    'classnames',
+    'clsx',
+    'history',
     /^lodash.*/,
-    "moment",
-    "prop-types",
+    'moment',
+    'prop-types',
     /^react.*/,
-    /^redux.*/
+    /^redux.*/,
   ],
   plugins: [
     json(),
     babel({
       exclude: 'node_modules/**',
-      babelHelpers: 'runtime'
+      babelHelpers: 'runtime',
     }),
-  ]
-}
+  ],
+};

sonar-project.properties

@@ -0,0 +1,5 @@
+sonar.projectKey=openimis_openimis-fe-worker_voucher_js
+sonar.organization=openimis-1
+sonar.projectName=openimis-fe-worker_voucher_js
+sonar.sources=src
+sonar.sourceEncoding=UTF-8

src/constants.js

@@ -0,0 +1,2 @@
+// TODO: Adjust rights to the proper ones after BE implementation
+export const VOUCHER_RIGHT_SEARCH = 101101;

src/index.js

@@ -1,9 +1,54 @@
-import messages_en from "./translations/en.json";
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable camelcase */
+
+import React from 'react';
+
+import ListAltIcon from '@material-ui/icons/ListAlt';
+import LocalAtmIcon from '@material-ui/icons/LocalAtm';
+import GroupAddIcon from '@material-ui/icons/GroupAdd';
+
+import { FormattedMessage } from '@openimis/fe-core';
+import { VOUCHER_RIGHT_SEARCH } from './constants';
+import VoucherAcquirementPage from './pages/VoucherAcquirementPage';
+import VoucherAssignmentPage from './pages/VoucherAssignmentPage';
+import VoucherDetailsPage from './pages/VoucherDetailsPage';
+import VouchersPage from './pages/VouchersPage';
+import messages_en from './translations/en.json';
+
+const ROUTE_WORKER_VOUCHERS_LIST = 'voucher/vouchers';
+const ROUTE_WORKER_VOUCHER = 'voucher/vouchers/voucher';
+const ROUTE_WORKER_VOUCHER_ACQUIREMENT = 'voucher/acquirement';
+const ROUTE_WORKER_VOUCHER_ASSIGNMENT = 'voucher/assignment';
 
 const DEFAULT_CONFIG = {
-  "translations": [{ key: "en", messages: messages_en }],
+  translations: [{ key: 'en', messages: messages_en }],
+  'worker.MainMenu': [
+    {
+      text: <FormattedMessage module="workerVoucher" id="menu.voucherList" />,
+      icon: <ListAltIcon />,
+      route: `/${ROUTE_WORKER_VOUCHERS_LIST}`,
+      filter: (rights) => [VOUCHER_RIGHT_SEARCH].some((right) => rights.includes(right)),
+    },
+    {
+      text: <FormattedMessage module="workerVoucher" id="menu.voucherAcquirement" />,
+      icon: <LocalAtmIcon />,
+      route: `/${ROUTE_WORKER_VOUCHER_ACQUIREMENT}`,
+      filter: (rights) => [VOUCHER_RIGHT_SEARCH].some((right) => rights.includes(right)),
+    },
+    {
+      text: <FormattedMessage module="workerVoucher" id="menu.voucherAssignment" />,
+      icon: <GroupAddIcon />,
+      route: `/${ROUTE_WORKER_VOUCHER_ASSIGNMENT}`,
+      filter: (rights) => [VOUCHER_RIGHT_SEARCH].some((right) => rights.includes(right)),
+    },
+  ],
+  'core.Router': [
+    { path: ROUTE_WORKER_VOUCHERS_LIST, component: VouchersPage },
+    { path: `${ROUTE_WORKER_VOUCHER}/:voucher_uuid?`, component: VoucherDetailsPage },
+    { path: ROUTE_WORKER_VOUCHER_ACQUIREMENT, component: VoucherAcquirementPage },
+    { path: ROUTE_WORKER_VOUCHER_ASSIGNMENT, component: VoucherAssignmentPage },
+  ],
 };
 
-export const WorkerVoucherModule = (cfg) => {
-  return { ...DEFAULT_CONFIG, ...cfg };
-};
+export const WorkerVoucherModule = (cfg) => ({ ...DEFAULT_CONFIG, ...cfg });

src/pages/VoucherAcquirementPage.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function VoucherAcquirementPage() {
+  return (
+    <div>
+      VoucherAcquirementPage
+    </div>
+  );
+}
+
+export default VoucherAcquirementPage;

src/pages/VoucherAssignmentPage.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function VoucherAssignmentPage() {
+  return (
+    <div>
+      VoucherAssignmentPage
+    </div>
+  );
+}
+
+export default VoucherAssignmentPage;

src/pages/VoucherDetailsPage.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function VoucherDetailsPage() {
+  return (
+    <div>
+      VoucherDetailsPage
+    </div>
+  );
+}
+
+export default VoucherDetailsPage;

src/pages/VouchersPage.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function VouchersPage() {
+  return (
+    <div>
+      VouchersPage
+    </div>
+  );
+}
+
+export default VouchersPage;

src/translations/en.json

@@ -1,2 +1,5 @@
 {
-}
+  "workerVoucher.menu.voucherList": "Voucher List",
+  "workerVoucher.menu.voucherAcquirement": "Voucher Acquirement",
+  "workerVoucher.menu.voucherAssignment": "Voucher Assignment"
+}