Report module

modules/reports/client-react/ReportModule.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import ClientModule, { ClientModuleShape } from '@restapp/module-client-react';
+
+export interface ReportModuleShape extends ClientModuleShape {
+  reportComponent?: Array<React.ReactElement<any>>;
+}
+
+interface ReportModule extends ReportModuleShape {}
+
+class ReportModule extends ClientModule {
+  constructor(...modules: ReportModuleShape[]) {
+    super(...modules);
+  }
+}
+
+export default ReportModule;

modules/reports/client-react/common/index.ts

@@ -0,0 +1,17 @@
+export const getObjectURLFromArray = (array: number[]) => {
+  const buffer = new Uint8Array(array);
+  const blob = new Blob([buffer]);
+  return window.URL.createObjectURL(blob);
+};
+
+export const downloadFile = (url: string, name: string) => {
+  const a = document.createElement('a');
+
+  document.body.appendChild(a);
+  a.style.display = 'none';
+  a.href = url;
+  a.download = name;
+  a.click();
+  a.remove();
+  window.URL.revokeObjectURL(url);
+};

modules/reports/client-react/containers/Report.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+
+import { PageLayout } from '@restapp/look-client-react';
+import { translate, TranslateFunction } from '@restapp/i18n-client-react';
+import settings from '../../../../settings';
+
+import reports from '../index';
+
+interface ReportProps {
+  t: TranslateFunction;
+}
+
+const Report = ({ t }: ReportProps) => (
+  <PageLayout>
+    <Helmet
+      title={`${settings.app.name} - ${t('title')}`}
+      meta={[
+        {
+          name: 'description',
+          content: `${settings.app.name} - ${t('meta')}`
+        }
+      ]}
+    />
+    {reports.reportComponent &&
+      reports.reportComponent.map((component: any, idx: number, items: any) =>
+        React.cloneElement(component, { key: idx + items.length })
+      )}
+  </PageLayout>
+);
+
+export default translate('report')(Report);

modules/reports/client-react/excel/actions/index.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const GET_EXCEL = () => ({
+  types: {},
+  APICall: () => axios.get(`${__API_URL__}/excel`)
+});
+export default GET_EXCEL;

modules/reports/client-react/excel/containers/DownloadReport.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+import { Button } from '@restapp/look-client-react';
+import { translate, TranslateFunction } from '@restapp/i18n-client-react';
+
+import { downloadFile, getObjectURLFromArray } from '../../common';
+import { connect } from 'react-redux';
+import GET_EXCEL from '../actions';
+
+interface DownloadReportProps {
+  t: TranslateFunction;
+  getExcel: () => Promise<any>;
+}
+
+const DownloadReport = ({ t, getExcel }: DownloadReportProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const download = async () => {
+    setIsLoading(true);
+    const data = await getExcel();
+    const url = getObjectURLFromArray(data);
+    downloadFile(url, 'Report.xlsx');
+    setIsLoading(false);
+  };
+
+  return (
+    <Button className="no-print" disabled={isLoading} style={{ marginLeft: '10px' }} onClick={download}>
+      {t('downloadExcel')}
+    </Button>
+  );
+};
+
+export default connect(
+  null,
+  { getExcel: GET_EXCEL }
+)(translate('ExcelReport')(DownloadReport));

modules/reports/client-react/excel/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import resources from './locales';
+import DownloadReport from './containers/DownloadReport';
+import ReportModule from '../ReportModule';
+
+export default new ReportModule({
+  localization: [{ ns: 'ExcelReport', resources }],
+  reportComponent: [<DownloadReport />]
+});

modules/reports/client-react/excel/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+  "downloadExcel": "Download Excel report from server"
+}

modules/reports/client-react/excel/locales/index.ts

@@ -0,0 +1 @@
+export default {};

modules/reports/client-react/excel/locales/ru/translations.json

@@ -0,0 +1,3 @@
+{
+  "downloadExcel": "Загрузить отчет в Excel c сервера"
+}

modules/reports/client-react/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Route, NavLink } from 'react-router-dom';
+import { translate, TranslateFunction } from '@restapp/i18n-client-react';
+import { MenuItem } from '@restapp/look-client-react';
+
+import ReportModule from './ReportModule';
+import excel from './excel';
+import pdf from './pdf';
+import print from './print';
+import Report from './containers/Report';
+import resources from './locales';
+
+const NavLinkWithI18n = translate('report')(({ t }: { t: TranslateFunction }) => (
+  <NavLink to="/report" className="nav-link" activeClassName="active">
+    {t('navLink')}
+  </NavLink>
+));
+
+export default new ReportModule(print, pdf, excel, {
+  route: [<Route exact path="/report" component={Report} />],
+  navItem: [
+    <MenuItem key="/report">
+      <NavLinkWithI18n />
+    </MenuItem>
+  ],
+  localization: [{ ns: 'report', resources }]
+});

modules/reports/client-react/locales/en/translations.json

@@ -0,0 +1,6 @@
+{
+  "title": "Report",
+  "navLink": "Report",
+  "meta": "A page example with a report",
+  "loading": "Loading..."
+}

modules/reports/client-react/locales/index.ts

@@ -0,0 +1 @@
+export default {};

modules/reports/client-react/locales/ru/translations.json

@@ -0,0 +1,6 @@
+{
+  "title": "Отчет",
+  "navLink": "Отчет",
+  "meta": "Пример страницы со отчетом",
+  "loading": "Загрузка..."
+}

modules/reports/client-react/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@restapp/reports-client-react",
+  "version": "0.1.0",
+  "private": true
+}

modules/reports/client-react/pdf/actions/index.tsx

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const GET_PDF = () => ({
+  types: {},
+  APICall: () => axios.get(`${__API_URL__}/pdf`)
+});
+export default GET_PDF;

modules/reports/client-react/pdf/containers/DownloadReport.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+import { Button } from '@restapp/look-client-react';
+import { translate, TranslateFunction } from '@restapp/i18n-client-react';
+
+import { downloadFile, getObjectURLFromArray } from '../../common';
+import { connect } from 'react-redux';
+import GET_PDF from '../actions';
+
+interface DownloadReportProps {
+  t: TranslateFunction;
+  getPdf: () => Promise<any>;
+}
+
+const DownloadReport = ({ t, getPdf }: DownloadReportProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const download = async () => {
+    setIsLoading(true);
+    const data = await getPdf();
+    const url = getObjectURLFromArray(data);
+    downloadFile(url, 'Report.pdf');
+    setIsLoading(false);
+  };
+
+  return (
+    <Button className="no-print" disabled={isLoading} style={{ marginLeft: '10px' }} onClick={download}>
+      {t('downloadPdf')}
+    </Button>
+  );
+};
+
+export default connect(
+  null,
+  { getPdf: GET_PDF }
+)(translate('PdfReport')(DownloadReport));

modules/reports/client-react/pdf/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import resources from './locales';
+import DownloadReport from './containers/DownloadReport';
+import ReportModule from '../ReportModule';
+
+export default new ReportModule({
+  localization: [{ ns: 'PdfReport', resources }],
+  reportComponent: [<DownloadReport />]
+});

modules/reports/client-react/pdf/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+  "downloadPDF": "Download PDF report from server"
+}

modules/reports/client-react/pdf/locales/index.ts

@@ -0,0 +1 @@
+export default {};

modules/reports/client-react/pdf/locales/ru/translations.json

@@ -0,0 +1,4 @@
+
+{
+  "downloadPDF": "Загрузить отчет в PDF с сервера"
+}

modules/reports/client-react/print/actions/index.ts

@@ -0,0 +1,10 @@
+import axios from 'axios';
+import { ActionType } from '../reducers';
+
+const GET_REPORT_DATA = () => ({
+  types: {
+    SUCCESS: ActionType.SET_REPORT_DATA
+  },
+  APICall: () => axios.get(`${__API_URL__}/report`)
+});
+export default GET_REPORT_DATA;

modules/reports/client-react/print/containers/PrintReport.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+
+import { translate, TranslateFunction } from '@restapp/i18n-client-react';
+import { Table, Button } from '@restapp/look-client-react';
+import { connect } from 'react-redux';
+import GET_REPORT_DATA from '../actions';
+
+interface ReportProps {
+  t: TranslateFunction;
+  reportData: any[];
+  getReportData: () => Promise<any>;
+}
+
+interface Report {
+  id: string;
+  name: string;
+  phone: string;
+  email: string;
+  typename?: string;
+}
+
+const Report = ({ t, reportData, getReportData }: ReportProps) => {
+  const [isReady, setIsReady] = useState(false);
+  const print = () => {
+    window.print();
+  };
+
+  useEffect(() => {
+    (async () => {
+      if (!reportData.length) {
+        await getReportData();
+      }
+      setIsReady(true);
+    })();
+  }, []);
+
+  const columns = Object.keys(reportData.length && reportData[0]).map((name: string) => ({
+    title: name,
+    key: name,
+    dataIndex: name
+  }));
+
+  return isReady ? (
+    <>
+      <Table dataSource={reportData} columns={columns} />
+      <Button className="no-print" onClick={print}>
+        {t('print')}
+      </Button>
+    </>
+  ) : null;
+};
+
+export default connect(
+  ({ reportData: { reportData } }: any) => ({
+    reportData
+  }),
+  { getReportData: GET_REPORT_DATA }
+)(translate('PrintReport')(Report));

modules/reports/client-react/print/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import resources from './locales';
+import PrintReport from './containers/PrintReport';
+import ReportModule from '../ReportModule';
+import reducer from './reducers';
+
+export default new ReportModule({
+  reducer: [{ reportData: reducer }],
+  localization: [{ ns: 'PrintReport', resources }],
+  reportComponent: [<PrintReport />]
+});

modules/reports/client-react/print/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+  "print": "Print report from the component"
+}

modules/reports/client-react/print/locales/index.ts

@@ -0,0 +1 @@
+export default {};

modules/reports/client-react/print/locales/ru/translations.json

@@ -0,0 +1,3 @@
+{
+  "print": "Распечатать отчет из компонента"
+}

modules/reports/client-react/print/reducers/index.ts

@@ -0,0 +1,38 @@
+export interface ActionProps {
+  type: ActionType | ActionType[];
+  payload?: any;
+  APICall?: () => Promise<any>;
+  [key: string]: any;
+}
+
+export enum ActionType {
+  SET_REPORT_DATA = 'SET_REPORT_DATA',
+  CLEAR_REPORT_DATA = 'CLEAR_REPORT_DATA'
+}
+
+export interface ReportDataState {
+  reportData: any[];
+}
+
+const defaultState: ReportDataState = {
+  reportData: []
+};
+
+export default function(state = defaultState, action: ActionProps) {
+  switch (action.type) {
+    case ActionType.SET_REPORT_DATA:
+      return {
+        ...state,
+        reportData: action.payload
+      };
+
+    case ActionType.CLEAR_REPORT_DATA:
+      return {
+        ...state,
+        reportData: null
+      };
+
+    default:
+      return state;
+  }
+}

modules/reports/server-ts/controllers.ts

@@ -0,0 +1,7 @@
+import { Request, Response } from 'express';
+
+import reportsDAO from './sql';
+
+export const report = async (_req: Request, res: Response) => {
+  res.json(await reportsDAO.getReportData());
+};