TNO-2114 Enhance Edit Report Content (#1490)

bcgov · Feb 5, 2024 · 9ae1c57 · 9ae1c57
1 parent de079a1
commit 9ae1c57
Show file tree

Hide file tree

Showing 19 changed files with 259 additions and 118 deletions.
diff --git a/app/editor/src/features/content/papers/PaperToolbar.tsx b/app/editor/src/features/content/papers/PaperToolbar.tsx
@@ -39,22 +39,32 @@ export const PaperToolbar: React.FC<IPaperToolbarProps> = ({ onSearch }) => {
   const [{ mediaTypeOptions }] = useLookupOptions();
   const [{ publishReport }] = useReports();
   const [{ publishNotification }] = useNotifications();
-  const [{ settings }] = useLookup();
+  const [{ isReady, settings }] = useLookup();
   const { toggle, isShowing } = useModal();
 
   const [, setMediaTypeOptions] = React.useState<IOptionItem[]>([]);
-  const [morningReportId, setMorningReportId] = React.useState('');
-  const [frontPageImagesReportId, setFrontPageImagesReportId] = React.useState('');
-  const [topStoryAlertId, setTopStoryAlertId] = React.useState('');
+  const [morningReportId, setMorningReportId] = React.useState(0);
+  const [frontPageImagesReportId, setFrontPageImagesReportId] = React.useState(0);
+  const [topStoryAlertId, setTopStoryAlertId] = React.useState(0);
   const [sendInfo, setSendInfo] = React.useState<IReportInfo>();
 
   React.useEffect(() => {
-    setMorningReportId(settings.find((s) => s.name === Settings.MorningReport)?.value ?? '');
-    setFrontPageImagesReportId(
-      settings.find((s) => s.name === Settings.FrontPageImagesReport)?.value ?? '',
-    );
-    setTopStoryAlertId(settings.find((s) => s.name === Settings.TopStoryAlert)?.value ?? '');
-  }, [settings]);
+    if (isReady) {
+      const morningReportId = settings.find((s) => s.name === Settings.MorningReport)?.value;
+      if (morningReportId) setMorningReportId(+morningReportId);
+      else toast.error(`${Settings.MorningReport} setting needs to be configured.`);
+
+      const frontPageImagesReportId = settings.find(
+        (s) => s.name === Settings.FrontPageImagesReport,
+      )?.value;
+      if (frontPageImagesReportId) setFrontPageImagesReportId(+frontPageImagesReportId);
+      else toast.error(`${Settings.FrontPageImagesReport} setting needs to be configured.`);
+
+      const topStoryAlertId = settings.find((s) => s.name === Settings.TopStoryAlert)?.value;
+      if (topStoryAlertId) setTopStoryAlertId(+topStoryAlertId);
+      else toast.error(`${Settings.TopStoryAlert} setting needs to be configured.`);
+    }
+  }, [isReady, settings]);
 
   React.useEffect(() => {
     setMediaTypeOptions([new OptionItem<number>('Any', 0), ...mediaTypeOptions]);

diff --git a/app/subscriber/src/components/section/PageSection.tsx b/app/subscriber/src/components/section/PageSection.tsx
@@ -14,10 +14,12 @@ export interface IPageSectionProps extends React.HTMLAttributes<HTMLDivElement>
   includeContentActions?: boolean;
   /** context of content if needed */
   activeContent?: IContentModel[];
-  /** set active content */
-  setActiveContent?: (content: IContentModel[]) => void;
   /** ignore min-width of fit-content for mobile */
   ignoreMinWidth?: boolean;
+  /** Event fires when keyboard is pressed in section form */
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  /** Event fires when keyboard is pressed in section */
+  onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement>;
 }
 
 /**
@@ -32,15 +34,18 @@ export const PageSection: React.FC<IPageSectionProps> = ({
   ignoreLastChildGap,
   includeContentActions,
   activeContent,
-  setActiveContent,
   ignoreMinWidth,
+  onKeyDown,
+  onKeyDownCapture,
   ...rest
 }) => {
   return (
     <styled.PageSection
       $ignoreLastChildGap={ignoreLastChildGap}
       $ignoreMinWidth={ignoreMinWidth}
       className={`page-section${className ? ` ${className}` : ''}`}
+      onKeyDown={onKeyDown}
+      onKeyDownCapture={onKeyDownCapture}
       {...rest}
     >
       {includeContentActions && !!activeContent && (

diff --git a/app/subscriber/src/components/section/Section.tsx b/app/subscriber/src/components/section/Section.tsx
@@ -44,8 +44,8 @@ export const Section: React.FC<ISectionProps> = ({
     <styled.Section open={open} showOpen={showOpen} className={`section ${className}`} {...rest}>
       <div className="section-header">
         {icon && <div className="section-icon">{icon}</div>}
-        <div className="section-label">
-          <span onClick={() => showOpen && handleChange(!open)}>{label}</span>
+        <div className="section-label" onClick={() => showOpen && handleChange(!open)}>
+          {label}
         </div>
         {actions && (
           <div className="section-actions">

diff --git a/app/subscriber/src/components/section/styled/Section.tsx b/app/subscriber/src/components/section/styled/Section.tsx
@@ -35,13 +35,9 @@ export const Section = styled.div<ISectionProps>`
     .section-label {
       flex: 1;
       overflow: hidden;
-
-      span {
-        display: block;
-        white-space: nowrap;
-        max-width: 500px;
-        cursor: ${(props) => (props.showOpen ? 'pointer' : 'unset')};
-      }
+      display: block;
+      white-space: nowrap;
+      cursor: ${(props) => (props.showOpen ? 'pointer' : 'unset')};
     }
 
     .section-actions {

diff --git a/app/subscriber/src/components/sentiment/Sentiment.tsx b/app/subscriber/src/components/sentiment/Sentiment.tsx
@@ -1,4 +1,4 @@
-import { FaRegCircle, FaRegFrown, FaRegMeh, FaRegSmile } from 'react-icons/fa';
+import { FaCircle, FaFrown, FaMeh, FaSmile } from 'react-icons/fa';
 import { Show } from 'tno-core';
 
 import * as styled from './styled';
@@ -21,16 +21,16 @@ export const Sentiment: React.FC<ISentimentProps> = ({ value, title, showValue }
   return (
     <styled.Sentiment value={value}>
       <Show visible={value === undefined}>
-        <FaRegCircle className="tone-icon" color="#E0E0E0" title={title} />
+        <FaCircle className="tone-icon" color="#E0E0E0" title={title} />
       </Show>
       <Show visible={value !== undefined && value < 0}>
-        <FaRegFrown className="tone-icon" color="#DC3545" title={title} />
+        <FaFrown className="tone-icon" color="#DC3545" title={title} />
       </Show>
       <Show visible={value !== undefined && value === 0}>
-        <FaRegMeh className="tone-icon" color="#FFC107" title={title} />
+        <FaMeh className="tone-icon" color="#FFC107" title={title} />
       </Show>
       <Show visible={value !== undefined && value > 0}>
-        <FaRegSmile className="tone-icon" color="#20C997" title={title} />
+        <FaSmile className="tone-icon" color="#20C997" title={title} />
       </Show>
       {showValue && <span>{value}</span>}
     </styled.Sentiment>

diff --git a/app/subscriber/src/components/tabs/interfaces/ITab.ts b/app/subscriber/src/components/tabs/interfaces/ITab.ts
@@ -1,9 +1,16 @@
 export interface ITab {
+  /** Unique key */
   key: string;
+  /** Label of tab. */
   label?: React.ReactNode;
+  /** Icon to display. */
   icon?: React.ReactNode;
-  to?: string;
+  /** Type of tab */
   type?: 'tab' | 'other';
+  /** Class name for styling */
   className?: string;
+  /** Navigate to when clicked. */
+  to?: string;
+  /** Event fires when user clicks tab.  This overrides default onClick behaviour. */
   onClick?: (tab: ITab, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
diff --git a/app/subscriber/src/css/_variables.module.scss b/app/subscriber/src/css/_variables.module.scss
@@ -82,6 +82,10 @@
   tableActiveRowColor: $table-active-row-color;
   tableHoverRow: $table-hover-row;
 
+  // Sections
+  sectionHeader: $section-header;
+  sectionHeaderText: $section-header-text;
+
   /////////////////////////////////////
   //  STOP USING ANYTHING BELOW THIS!
   /////////////////////////////////////

diff --git a/app/subscriber/src/css/_variables.scss b/app/subscriber/src/css/_variables.scss
@@ -3,7 +3,7 @@
 // Background
 $bk-primary: linear-gradient(#f0eeee, #d9d9d9);
 $bk-secondary: linear-gradient(0deg, #ffffff, #ffffff),
-  linear-gradient(0deg, #f0eeee, #f0eeee);
+linear-gradient(0deg, #f0eeee, #f0eeee);
 $bk-tertiary: #e8e9f1;
 $bk-quaternary: #e8e9f1;
 $bk-white: #ffff;
@@ -26,14 +26,14 @@ $box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 25%);
 
 // Fonts
 $f-primary: 'Source Sans 3',
-  'BCSans',
-  'Noto Sans',
-  Arial,
-  sans serif;
+'BCSans',
+'Noto Sans',
+Arial,
+sans serif;
 $f-secondary: 'BCSans',
-  'Noto Sans',
-  Arial,
-  sans serif;
+'Noto Sans',
+Arial,
+sans serif;
 $f-primary-color: #41393b;
 $h-primary-color: #971d29;
 $f-red-color: #d9293a;
@@ -88,6 +88,10 @@ $table-active-row-color: #fff;
 $table-active-row: #8084b1;
 $table-hover-row: #EDEDED;
 
+// Sections
+$section-header: #646293;
+$section-header-text: #fff;
+
 /////////////////////////////////////
 //  STOP USING ANYTHING BELOW THIS!
 /////////////////////////////////////
@@ -96,16 +100,16 @@ $action-button-color: #007af5;
 $background-color: white;
 $primary-color: #003366;
 $primary-color-rgb: 0,
-  51,
-  102;
+51,
+102;
 $primary-light-color: #38598a;
 $primary-light-color-rgb: 56,
-  89,
-  138;
+89,
+138;
 $secondary-variant-color: #428bca;
 $secondary-variant-color-rgb: 66,
-  139,
-  202;
+139,
+202;
 $light-variant-color: #606060;
 $dark-variant-color: #121212;
 $text-color: #494949;
@@ -187,38 +191,38 @@ $bs-danger: #dc3545;
 $bs-light: #f8f9fa;
 $bs-dark: #212529;
 $bs-primary-rgb: 13,
-  110,
-  253;
+110,
+253;
 $bs-secondary-rgb: 108,
-  117,
-  125;
+117,
+125;
 $bs-success-rgb: 25,
-  135,
-  84;
+135,
+84;
 $bs-info-rgb: 13,
-  202,
-  240;
+202,
+240;
 $bs-warning-rgb: 255,
-  193,
-  7;
+193,
+7;
 $bs-danger-rgb: 220,
-  53,
-  69;
+53,
+69;
 $bs-light-rgb: 248,
-  249,
-  250;
+249,
+250;
 $bs-dark-rgb: 33,
-  37,
-  41;
+37,
+41;
 $bs-white-rgb: 255,
-  255,
-  255;
+255,
+255;
 $bs-black-rgb: 0,
-  0,
-  0;
+0,
+0;
 $bs-body-color-rgb: 33,
-  37,
-  41;
+37,
+41;
 $bs-body-bg-rgb: 255,
-  255,
-  255;
+255,
+255;
diff --git a/app/subscriber/src/features/my-reports/admin/ReportTemplate.tsx b/app/subscriber/src/features/my-reports/admin/ReportTemplate.tsx
@@ -21,6 +21,7 @@ import {
   Text,
 } from 'tno-core';
 
+import { SectionLabel } from '../components';
 import { IReportForm } from '../interfaces';
 import {
   AddSectionBar,
@@ -29,7 +30,6 @@ import {
   ReportSectionMediaAnalytics,
   ReportSectionTableOfContents,
   ReportSectionText,
-  SectionLabel,
 } from './components';
 
 export interface IReportTemplateProps {
@@ -149,7 +149,7 @@ export const ReportTemplate: React.FC<IReportTemplateProps> = ({ onChange }) =>
                             open={section.open}
                             onChange={(open) => setFieldValue(`sections.${index}.open`, open)}
                             actions={
-                              <Row gap="1rem">
+                              <Row gap="1rem" alignItems="center">
                                 <Text
                                   name={`sections.${index}.sortOrder`}
                                   value={sortOrders.length > index ? sortOrders[index] : ''}
@@ -177,7 +177,6 @@ export const ReportTemplate: React.FC<IReportTemplateProps> = ({ onChange }) =>
                                             : 0,
                                         ),
                                     });
-                                    // setFieldValue(`sections.${index}.sortOrder`, +e.target.value);
                                   }}
                                 />
                                 <FormikCheckbox

diff --git a/app/subscriber/src/features/my-reports/admin/components/index.ts b/app/subscriber/src/features/my-reports/admin/components/index.ts
@@ -5,5 +5,3 @@ export * from './ReportSectionGallery';
 export * from './ReportSectionMediaAnalytics';
 export * from './ReportSectionTableOfContents';
 export * from './ReportSectionText';
-export * from './SectionIcon';
-export * from './SectionLabel';
diff --git a/app/subscriber/src/features/my-reports/admin/styled/ReportAdmin.tsx b/app/subscriber/src/features/my-reports/admin/styled/ReportAdmin.tsx
@@ -105,5 +105,22 @@ export const ReportAdmin = styled.div`
   .section {
     border-left: solid 1px ${(props) => props.theme.css.lineTertiaryColor};
     border-right: solid 1px ${(props) => props.theme.css.lineTertiaryColor};
+
+    .section-header {
+      background: ${(props) => props.theme.css.sectionHeader};
+      color: ${(props) => props.theme.css.sectionHeaderText};
+
+      .section-label {
+        .section-header-label {
+          > span:nth-child(1) {
+            min-width: 50px;
+            text-align: center;
+          }
+          > svg:first-of-type {
+            padding-right: 0.5rem;
+          }
+        }
+      }
+    }
   }
 `;
diff --git a/...-reports/admin/components/SectionIcon.tsx → ...res/my-reports/components/SectionIcon.tsx b/...-reports/admin/components/SectionIcon.tsx → ...res/my-reports/components/SectionIcon.tsx