TNO-2527 Improve My Reports

api/net/Areas/Subscriber/Controllers/ReportController.cs

@@ -160,15 +160,19 @@ public IActionResult FindById(int id, bool includeContent = false)
     /// </summary>
     /// <param name="reportId"></param>
     /// <param name="ownerId"></param>
+    /// <param name="page"></param>
+    /// <param name="qty"></param>
     /// <returns></returns>
     [HttpGet("{reportId}/instances")]
     [Produces(MediaTypeNames.Application.Json)]
     [ProducesResponseType(typeof(IEnumerable<ReportInstanceModel>), (int)HttpStatusCode.OK)]
     [ProducesResponseType(typeof(string), (int)HttpStatusCode.NoContent)]
     [SwaggerOperation(Tags = new[] { "Report" })]
-    public IActionResult FindInstancesForReportId(int reportId, int? ownerId)
+    public IActionResult FindInstancesForReportId(int reportId, int? ownerId, int? page, int? qty)
     {
-        var result = _reportInstanceService.FindInstancesForReportId(reportId, ownerId);
+        var skip = page > 0 ? page.Value - 1 : 0;
+        var take = qty > 0 ? qty.Value : 10;
+        var result = _reportInstanceService.FindInstancesForReportId(reportId, ownerId, skip, take);
         return new JsonResult(result.Select(ri => new ReportInstanceModel(ri)));
     }
 

app/editor/package.json

@@ -58,7 +58,7 @@
     "react-tooltip": "5.10.0",
     "redux-logger": "3.0.6",
     "styled-components": "5.3.9",
-    "tno-core": "0.1.53"
+    "tno-core": "0.1.54"
   },
   "devDependencies": {
     "@simbathesailor/use-what-changed": "2.0.0",

app/editor/yarn.lock

@@ -10604,7 +10604,7 @@ __metadata:
     sass-extract-js: 0.4.0
     sass-extract-loader: 1.1.0
     styled-components: 5.3.9
-    tno-core: 0.1.53
+    tno-core: 0.1.54
     typescript: 4.9.5
   languageName: unknown
   linkType: soft
@@ -14741,9 +14741,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tno-core@npm:0.1.53":
-  version: 0.1.53
-  resolution: "tno-core@npm:0.1.53"
+"tno-core@npm:0.1.54":
+  version: 0.1.54
+  resolution: "tno-core@npm:0.1.54"
   dependencies:
     "@elastic/elasticsearch": ^8.10.0
     "@fortawesome/free-solid-svg-icons": ^6.4.2
@@ -14776,7 +14776,7 @@ __metadata:
     styled-components: ^5.3.9
     tno-core: 0.1.44
     yup: ^1.1.1
-  checksum: 27f47e9b33fcc89798f4b1ffae94032c82daeccc7ff1f706c20d3476eee58d27ba832c9590fb29c74d0b68f0a2384e54fca289c702c6ee3907b5c71ddf04cff9
+  checksum: aece116c487f67fb010b692ade4435808c76dbc6f7f636d0f5807516718a0ff71b48bc3740d57f7f693291b826639cd93bbc546538dc03d54bd8d7a67ecbd66c
   languageName: node
   linkType: hard
 

app/subscriber/package.json

@@ -54,7 +54,7 @@
     "redux-logger": "3.0.6",
     "sheetjs": "file:packages/xlsx-0.20.1.tgz",
     "styled-components": "5.3.9",
-    "tno-core": "0.1.53"
+    "tno-core": "0.1.54"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "5.16.5",

app/subscriber/src/features/my-reports/edit/ReportEditContext.tsx

@@ -11,6 +11,7 @@ import { toForm } from '../utils';
 import {
   ReportContentMenuOption,
   ReportMainMenuOption,
+  ReportSendMenuOption,
   ReportSettingsMenuOption,
   ReportViewMenuOption,
 } from './constants';
@@ -139,6 +140,7 @@ export const ReportEditContextProvider: React.FC<IReportEditContextProviderProps
     else if (path === ReportViewMenuOption.View) setActive(ReportViewMenuOption.View);
     else if (path === ReportMainMenuOption.Send) setActive(ReportMainMenuOption.Send);
     else if (path === ReportSettingsMenuOption.Send) setActive(ReportSettingsMenuOption.Send);
+    else if (path === ReportSendMenuOption.History) setActive(ReportSendMenuOption.History);
     else setActive(ReportMainMenuOption.Settings);
   }, [path1, path2]);
 

app/subscriber/src/features/my-reports/edit/ReportEditForm.tsx

@@ -25,7 +25,7 @@ import {
   ReportEditTemplateForm,
 } from './settings';
 import * as styled from './styled';
-import { ReportSendForm, ReportView } from './view';
+import { ReportHistoryForm, ReportSendForm, ReportView } from './view';
 
 export interface IReportEditFormProps {
   /** Whether edit functionality is disabled. */
@@ -166,6 +166,9 @@ export const ReportEditForm = ({ disabled, updateForm }: IReportEditFormProps) =
       <Show visible={active === ReportSendMenuOption.Send}>
         <ReportSendForm />
       </Show>
+      <Show visible={active === ReportSendMenuOption.History}>
+        <ReportHistoryForm />
+      </Show>
       <ReportEditActions
         disabled={disabled}
         onPublish={() => toggleSend()}

app/subscriber/src/features/my-reports/edit/ReportEditMenu.tsx

@@ -215,13 +215,16 @@ export const ReportEditMenu = ({ onChange }: IReportEditMenuProps) => {
         </Show>
         {/* Send secondary menu */}
         <Show visible={active?.startsWith(ReportMainMenuOption.Send)}>
-          <div>
-            <MenuButton
-              label="Subscribers"
-              active={active === ReportSendMenuOption.Send}
-              onClick={() => onChange?.(`/reports/${values.id}/${ReportSendMenuOption.Send}`)}
-            />
-          </div>
+          <MenuButton
+            label="Subscribers"
+            active={active === ReportSendMenuOption.Send}
+            onClick={() => onChange?.(`/reports/${values.id}/${ReportSendMenuOption.Send}`)}
+          />
+          <MenuButton
+            label="History"
+            active={active === ReportSendMenuOption.History}
+            onClick={() => onChange?.(`/reports/${values.id}/${ReportSendMenuOption.History}`)}
+          />
         </Show>
       </div>
     </styled.ReportEditMenu>

app/subscriber/src/features/my-reports/edit/ReportEditPage.tsx

@@ -22,6 +22,7 @@ import { ReportEditContextProvider } from './ReportEditContext';
 import { ReportEditForm } from './ReportEditForm';
 import * as styled from './styled';
 import { ReportFormSchema } from './validation';
+import { ReportHistoryView } from './view';
 
 /**
  * Provides component to administer a report template, to manage the content in the report, and send the report to subscribers.
@@ -258,6 +259,7 @@ export const ReportEditPage = () => {
           <ReportEditContextProvider>
             <ReportEditForm disabled={!canEdit} updateForm={(form) => setReport(form)} />
             <ContentEditForm disabled={!canEdit} />
+            <ReportHistoryView />
           </ReportEditContextProvider>
         </FormikForm>
       </Show>

app/subscriber/src/features/my-reports/edit/constants/ReportMainMenuOption.ts

@@ -25,4 +25,5 @@ export enum ReportViewMenuOption {
 
 export enum ReportSendMenuOption {
   Send = 'send',
+  History = 'send/history',
 }

app/subscriber/src/features/my-reports/edit/settings/ReportEditDataSourcesForm.tsx

@@ -35,7 +35,7 @@ export const ReportEditDataSourcesForm = () => {
   }, []);
 
   return (
-    <styled.ReportEditDataSourcesForm>
+    <styled.ReportEditDataSourcesForm className="report-edit-section">
       <Row className="template-action-bar">
         {!!values.sections.length &&
           (values.sections.some((s) => s.open) ? (

app/subscriber/src/features/my-reports/edit/settings/ReportEditDetailsForm.tsx

@@ -8,7 +8,7 @@ export const ReportEditDetailsForm = () => {
   const { setFieldValue } = useReportEditContext();
 
   return (
-    <styled.ReportEditDetailsForm>
+    <styled.ReportEditDetailsForm className="report-edit-section">
       <div className="info">
         <div>
           <FaInfoCircle />

app/subscriber/src/features/my-reports/edit/settings/ReportEditSendForm.tsx

@@ -61,7 +61,7 @@ export const ReportEditSendForm = ({ onPublish, onGenerate }: IReportEditSendFor
   const isAuto = [ReportKindName.Auto, ReportKindName.AutoSend].includes(kind);
 
   return (
-    <styled.ReportEditSendForm>
+    <styled.ReportEditSendForm className="report-edit-section">
       <h2>Email options</h2>
       <div>
         <FormikText name="settings.subject.text" label="Email subject line:" required />

app/subscriber/src/features/my-reports/edit/settings/ReportEditTemplateForm.tsx

@@ -69,7 +69,7 @@ export const ReportEditTemplateForm = () => {
   );
 
   return (
-    <styled.ReportEditTemplateForm>
+    <styled.ReportEditTemplateForm className="report-edit-section">
       <AddSectionBar />
       <Row className="template-action-bar">
         {!!values.sections.length &&

app/subscriber/src/features/my-reports/edit/styled/ReportEditActions.tsx

@@ -9,7 +9,5 @@ export const ReportEditActions = styled.div`
   background: ${(props) => props.theme.css.bkTertiary};
 
   position: sticky;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset-block-end: 0;
 `;

app/subscriber/src/features/my-reports/edit/styled/ReportEditForm.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const ReportEditForm = styled.div`
   display: flex;
   flex-direction: column;
-  overflow-x: auto;
+  overflow-x: clip;
 
   .preview-report {
     border: solid 2px ${(props) => props.theme.css.linePrimaryColor};
@@ -74,4 +74,8 @@ export const ReportEditForm = styled.div`
     background: ${(props) => props.theme.css.bkInfo};
     color: ${(props) => props.theme.css.fInfo};
   }
+
+  .report-edit-section {
+    flex: 1;
+  }
 `;

app/subscriber/src/features/my-reports/edit/view/ReportHistoryForm.tsx

@@ -0,0 +1,80 @@
+import { Action } from 'components/action';
+import { getStatus } from 'features/my-reports/utils';
+import { formatDate } from 'features/utils';
+import React from 'react';
+import { FaSquarePollVertical } from 'react-icons/fa6';
+import { useApp, useReports } from 'store/hooks';
+import { useReportsStore } from 'store/slices';
+import { Col, IReportInstanceModel, Loading, ReportStatusName, Show } from 'tno-core';
+
+import { useReportEditContext } from '../ReportEditContext';
+import * as styled from './styled';
+
+export const ReportHistoryForm = () => {
+  const { values } = useReportEditContext();
+  const [{ requests }] = useApp();
+  const [, { findInstancesForReportId }] = useReports();
+  const [, { storeReportView }] = useReportsStore();
+
+  const [instances, setInstances] = React.useState<IReportInstanceModel[]>([]);
+
+  const isLoading = requests.some((r) => r.group.includes('view-report'));
+  const instanceId = values.instances.length ? values.instances[0].id : undefined;
+
+  const fetchInstances = React.useCallback(
+    async (reportId: number) => {
+      try {
+        const instances = await findInstancesForReportId(reportId);
+        setInstances(instances.filter((i) => i.status !== ReportStatusName.Pending));
+      } catch {}
+    },
+    [findInstancesForReportId],
+  );
+
+  React.useEffect(() => {
+    if (values.id) {
+      fetchInstances(values.id);
+    }
+    // The functions will result in infinite loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instanceId]);
+
+  const handleViewReport = React.useCallback(
+    (instance: IReportInstanceModel) => {
+      storeReportView({ instanceId: instance.id, subject: instance.subject, body: instance.body });
+    },
+    [storeReportView],
+  );
+
+  return (
+    <styled.ReportHistoryForm className="report-edit-section">
+      <Show visible={isLoading}>
+        <Loading />
+      </Show>
+      <Col className="report-history">
+        <div className="col-1">Published On</div>
+        <div className="col-2">Sent On</div>
+        <div className="col-3">Status</div>
+        <div className="col-4"></div>
+        {instances.map((instance) => {
+          return (
+            <React.Fragment key={instance.id}>
+              <div className="col-1">{formatDate(instance.publishedOn ?? '', true)}</div>
+              <div className="col-2">{formatDate(instance.sentOn ?? '', true)}</div>
+              <div className="col-3">{getStatus(instance.status)}</div>
+              <div className="col-4">
+                <Action
+                  icon={<FaSquarePollVertical />}
+                  title="View"
+                  onClick={() => {
+                    handleViewReport(instance);
+                  }}
+                />
+              </div>
+            </React.Fragment>
+          );
+        })}
+      </Col>
+    </styled.ReportHistoryForm>
+  );
+};

app/subscriber/src/features/my-reports/edit/view/ReportHistoryView.tsx

@@ -0,0 +1,38 @@
+import { Button } from 'components/button';
+import { FaX } from 'react-icons/fa6';
+import { useReportsStore } from 'store/slices';
+import { Col } from 'tno-core';
+
+import * as styled from './styled';
+
+export const ReportHistoryView = () => {
+  const [{ reportView }, { storeReportView }] = useReportsStore();
+
+  if (!reportView) return null;
+
+  return (
+    <styled.ReportHistoryView className="report-edit-section">
+      <div>
+        <h1>View Prior Report</h1>
+        <Button
+          variant="info"
+          onClick={() => {
+            storeReportView(undefined);
+          }}
+        >
+          <FaX />
+        </Button>
+      </div>
+      <Col className="preview-report">
+        <div
+          className="preview-subject"
+          dangerouslySetInnerHTML={{ __html: reportView?.subject ?? '' }}
+        ></div>
+        <div
+          className="preview-body"
+          dangerouslySetInnerHTML={{ __html: reportView?.body ?? '' }}
+        ></div>
+      </Col>
+    </styled.ReportHistoryView>
+  );
+};

app/subscriber/src/features/my-reports/edit/view/ReportSendForm.tsx

@@ -81,7 +81,7 @@ export const ReportSendForm: React.FC = () => {
   );
 
   return (
-    <styled.ReportSendForm className="report-send">
+    <styled.ReportSendForm className="report-send report-edit-section">
       <Row>
         {values.events.some((e) => e.isEnabled) && (
           <Row gap="1rem">

app/subscriber/src/features/my-reports/edit/view/ReportView.tsx

@@ -33,7 +33,7 @@ export const ReportView = () => {
   }, [instanceId, reportOutput]);
 
   return (
-    <div className="preview-section">
+    <div className="preview-section report-edit-section">
       <Show visible={isLoading}>
         <Loading />
       </Show>

app/subscriber/src/features/my-reports/edit/view/index.ts

@@ -1,2 +1,4 @@
+export * from './ReportHistoryForm';
+export * from './ReportHistoryView';
 export * from './ReportSendForm';
 export * from './ReportView';

app/subscriber/src/features/my-reports/edit/view/styled/ReportHistoryForm.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+export const ReportHistoryForm = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+
+  div.report-history {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+
+    > div {
+      padding: 0.25rem 1rem;
+    }
+
+    > div:nth-child(8n + 1),
+    > div:nth-child(8n + 2),
+    > div:nth-child(8n + 3),
+    > div:nth-child(8n + 4) {
+      background: ${(props) => props.theme.css.highlightSecondary};
+    }
+
+    > div:nth-child(1),
+    > div:nth-child(2),
+    > div:nth-child(3),
+    > div:nth-child(4) {
+      background: ${(props) => props.theme.css.sectionHeader};
+      color: ${(props) => props.theme.css.sectionHeaderText};
+      font-weight: 800;
+    }
+
+    > div.col-1 {
+    }
+
+    > div.col-4 {
+      display: flex;
+      justify-content: flex-end;
+      gap: 1rem;
+    }
+  }
+`;