Added quick reports (at this moment only one) to campaign statistics page.

client/src/campaigns/List.js

@@ -2,38 +2,17 @@
 
 import React, {Component} from 'react';
 import {withTranslation} from '../lib/i18n';
-import {
-    ButtonDropdown,
-    Icon
-} from '../lib/bootstrap-components';
-import {
-    DropdownLink,
-    NavDropdown,
-    requiresAuthenticatedUser,
-    Title,
-    Toolbar,
-    withPageHelpers
-} from '../lib/page';
-import {
-    withAsyncErrorHandler,
-    withErrorHandling
-} from '../lib/error-handling';
+import {ButtonDropdown, Icon} from '../lib/bootstrap-components';
+import {DropdownLink, requiresAuthenticatedUser, Title, Toolbar, withPageHelpers} from '../lib/page';
+import {withAsyncErrorHandler, withErrorHandling} from '../lib/error-handling';
 import {Table} from '../lib/table';
-import moment
-    from 'moment';
-import {
-    CampaignSource,
-    CampaignStatus,
-    CampaignType
-} from "../../../shared/campaigns";
+import moment from 'moment';
+import {CampaignSource, CampaignStatus, CampaignType} from "../../../shared/campaigns";
 import {checkPermissions} from "../lib/permissions";
 import {getCampaignLabels} from "./helpers";
-import {
-    tableAddDeleteButton,
-    tableRestActionDialogInit,
-    tableRestActionDialogRender
-} from "../lib/modals";
+import {tableAddDeleteButton, tableRestActionDialogInit, tableRestActionDialogRender} from "../lib/modals";
 import {withComponentMixins} from "../lib/decorator-helpers";
+import styles from "./styles.scss";
 
 @withComponentMixins([
     withTranslation,
@@ -79,7 +58,7 @@ export default class List extends Component {
 
         const columns = [
             { data: 1, title: t('name') },
-            { data: 2, title: t('id'), render: data => <code>{data}</code> },
+            { data: 2, title: t('id'), render: data => <code>{data}</code>, className: styles.tblCol_id },
             { data: 3, title: t('description') },
             { data: 4, title: t('type'), render: data => this.campaignTypeLabels[data] },
             {
@@ -101,6 +80,7 @@ export default class List extends Component {
             { data: 8, title: t('created'), render: data => moment(data).fromNow() },
             { data: 9, title: t('namespace') },
             {
+                className: styles.tblCol_buttons,
                 actions: data => {
                     const actions = [];
                     const perms = data[10];

client/src/campaigns/Statistics.js

@@ -1,26 +1,17 @@
 'use strict';
 
 import React, {Component} from 'react';
-import PropTypes
-    from 'prop-types';
+import PropTypes from 'prop-types';
 import {withTranslation} from '../lib/i18n';
-import {
-    requiresAuthenticatedUser,
-    Title,
-    withPageHelpers
-} from '../lib/page';
-import {
-    withAsyncErrorHandler,
-    withErrorHandling
-} from '../lib/error-handling';
-import axios
-    from "../lib/axios";
+import {Trans} from 'react-i18next';
+import {requiresAuthenticatedUser, Title, withPageHelpers} from '../lib/page';
+import {withAsyncErrorHandler, withErrorHandling} from '../lib/error-handling';
+import axios from "../lib/axios";
 import {getUrl} from "../lib/urls";
 import {AlignedRow} from "../lib/form";
 import {Icon} from "../lib/bootstrap-components";
 
-import styles
-    from "./styles.scss";
+import styles from "./styles.scss";
 import {Link} from "react-router-dom";
 import {withComponentMixins} from "../lib/decorator-helpers";
 
@@ -128,6 +119,14 @@ export default class Statistics extends Component {
                 {renderMetricsWithProgress('unsubscribed', t('unsubscribed'), 'warning')}
                 {!entity.open_tracking_disabled && renderMetricsWithProgress('opened', t('opened'), 'success')}
                 {!entity.click_tracking_disabled && renderMetricsWithProgress('clicks', t('clicked'), 'success')}
+
+                <hr/>
+
+                <h3>{t('Quick Reports')}</h3>
+                <small className="text-muted"><Trans>Below, you can download pre-made reports related to this campaign. Each link generates a CSV file that can be viewed in a spreadsheet editor. Custom reports and reports that cover more than one campaign can be created through <Link to="/reports">Reports</Link> functionality of Mailtrain.</Trans></small>
+                <ul className="list-unstyled my-3">
+                    <li><a href={getUrl(`quick-rpts/open-and-click-counts/${entity.id}`)}>Open and click counts per currently subscribed subscriber</a></li>
+                </ul>
            </div>
         );
     }

client/src/campaigns/styles.scss

@@ -92,3 +92,12 @@
 .overrideCheckbox{
   margin-top: -8px !important;
 }
+
+.tblCol_id {
+  min-width: 5ex;
+  max-width: 8ex;
+}
+
+.tblCol_buttons {
+  min-width: 5.8rem;
+}

client/src/lib/table.js

@@ -276,6 +276,7 @@ class Table extends Component {
 
         const dtOptions = {
             columns,
+            autoWidth: false,
             pageLength: this.props.pageLength,
             dom: // This overrides Bootstrap 4 settings. It may need to be updated if there are updates in the DataTables Bootstrap 4 plugin.
                 "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +

client/src/reports/templates/CUD.js

@@ -163,8 +163,8 @@ export default class CUD extends Component {
                     js:
                         'const results = await campaigns.getCampaignOpenStatistics(inputs.campaign, ["field:country", "count_opened", "count_all"], (query, col) =>\n' +
                         '  query.count("* AS count_all")\n' +
-                        '    .select(knex.raw("SUM(IF(`" + col(tracker:count) +"` IS NULL, 0, 1)) AS count_opened"))\n' +
-                        '    .groupBy("field:country")\n' +
+                        '    .select(knex.raw("SUM(IF(`" + col("tracker:count") +"` IS NULL, 0, 1)) AS count_opened"))\n' +
+                        '    .groupBy(col("field:country"))\n' +
                         ')\n' +
                         '\n' +
                         'for (const row of results) {\n' +