Update Reports (#1503)

bcgov · Feb 7, 2024 · 5265da6 · 5265da6
1 parent 0ff9c28
commit 5265da6
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 29 deletions.
diff --git a/app/subscriber/src/features/my-reports/admin/styled/ReportAdmin.tsx b/app/subscriber/src/features/my-reports/admin/styled/ReportAdmin.tsx
@@ -110,6 +110,17 @@ export const ReportAdmin = styled.div`
       background: ${(props) => props.theme.css.sectionHeader};
       color: ${(props) => props.theme.css.sectionHeaderText};
 
+      .frm-in {
+        max-height: 25px;
+        padding: 0;
+        > div {
+          max-height: 25px;
+          > input {
+            max-height: 25px;
+          }
+        }
+      }
+
       .section-label {
         .section-header-label {
           > span:nth-child(1) {

diff --git a/app/subscriber/src/features/my-reports/view/components/ContentForm.tsx b/app/subscriber/src/features/my-reports/view/components/ContentForm.tsx
@@ -54,7 +54,10 @@ export const ContentForm: React.FC<IContentFormProps> = ({
             : ''}
         </Col>
         <Col className="sentiment">
-          <Sentiment value={content.tonePools[0].value} showValue />
+          <Sentiment
+            value={content.tonePools.length ? content.tonePools[0].value : undefined}
+            showValue
+          />
         </Col>
       </Bar>
       <Show visible={show === 'all'}>

diff --git a/app/subscriber/src/features/my-reports/view/components/ReportSectionContent.tsx b/app/subscriber/src/features/my-reports/view/components/ReportSectionContent.tsx
@@ -179,15 +179,6 @@ export const ReportSectionContent: React.FC<IReportSectionContentProps> = ({
           disabled={disabled}
         />
       </Show>
-      <Show visible={!!section.filterId && !sectionContent.length}>
-        <p>No content was returned by the filter.</p>
-      </Show>
-      <Show visible={!!section.folderId && !sectionContent.length}>
-        <p>Folder is empty.</p>
-      </Show>
-      <Show visible={!section.filterId && !section.folderId && !sectionContent.length}>
-        <p>Section is empty</p>
-      </Show>
       <Droppable droppableId={section.name} isDropDisabled={disabled}>
         {(droppableProvided) => (
           <div {...droppableProvided.droppableProps} ref={droppableProvided.innerRef}>
@@ -259,6 +250,15 @@ export const ReportSectionContent: React.FC<IReportSectionContentProps> = ({
           </div>
         )}
       </Droppable>
+      <Show visible={!!section.filterId && !sectionContent.length}>
+        <p>No content was returned by the filter.</p>
+      </Show>
+      <Show visible={!!section.folderId && !sectionContent.length}>
+        <p>Folder is empty.</p>
+      </Show>
+      <Show visible={!section.filterId && !section.folderId && !sectionContent.length}>
+        <p>Section is empty</p>
+      </Show>
     </Col>
   );
 };
diff --git a/app/subscriber/src/features/my-reports/view/components/ReportSectionGallery.tsx b/app/subscriber/src/features/my-reports/view/components/ReportSectionGallery.tsx
@@ -27,6 +27,8 @@ export interface IReportSectionGalleryProps extends React.AllHTMLAttributes<HTML
   showForm?: boolean;
   /** Form is disabled. */
   disabled?: boolean;
+  /** Event fires when the row is clicked. */
+  onContentClick?: (content: IReportInstanceContentForm) => void;
 }
 
 /**
@@ -38,6 +40,7 @@ export const ReportSectionGallery: React.FC<IReportSectionGalleryProps> = ({
   sectionIndex,
   showForm,
   disabled,
+  onContentClick,
   ...rest
 }) => {
   const { values, setFieldValue } = useFormikContext<IReportForm>();
@@ -115,15 +118,6 @@ export const ReportSectionGallery: React.FC<IReportSectionGalleryProps> = ({
           disabled={disabled}
         />
       </Show>
-      <Show visible={!!section.filterId && !sectionContent.length}>
-        <p>No content was returned by the filter.</p>
-      </Show>
-      <Show visible={!!section.folderId && !sectionContent.length}>
-        <p>Folder is empty.</p>
-      </Show>
-      <Show visible={!section.filterId && !section.folderId && !sectionContent.length}>
-        <p>Section is empty</p>
-      </Show>
       <Droppable droppableId={section.name} isDropDisabled={disabled}>
         {(droppableProvided) => (
           <div {...droppableProvided.droppableProps} ref={droppableProvided.innerRef}>
@@ -163,6 +157,7 @@ export const ReportSectionGallery: React.FC<IReportSectionGalleryProps> = ({
                           }}
                           showSortOrder
                           onBlurSortOrder={(row) => handleChangeSortOrder(row, instance)}
+                          onContentClick={onContentClick}
                         />
                       </div>
                     );
@@ -174,6 +169,15 @@ export const ReportSectionGallery: React.FC<IReportSectionGalleryProps> = ({
           </div>
         )}
       </Droppable>
+      <Show visible={!!section.filterId && !sectionContent.length}>
+        <p>No content was returned by the filter.</p>
+      </Show>
+      <Show visible={!!section.folderId && !sectionContent.length}>
+        <p>Folder is empty.</p>
+      </Show>
+      <Show visible={!section.filterId && !section.folderId && !sectionContent.length}>
+        <p>Section is empty</p>
+      </Show>
     </Col>
   );
 };
diff --git a/app/subscriber/src/features/my-reports/view/components/ReportSectionMediaAnalytics.tsx b/app/subscriber/src/features/my-reports/view/components/ReportSectionMediaAnalytics.tsx
@@ -26,6 +26,8 @@ export interface IReportSectionMediaAnalyticsProps extends React.AllHTMLAttribut
   showForm?: boolean;
   /** Form is disabled. */
   disabled?: boolean;
+  /** Event fires when the row is clicked. */
+  onContentClick?: (content: IReportInstanceContentForm) => void;
 }
 
 /**
@@ -37,6 +39,7 @@ export const ReportSectionMediaAnalytics: React.FC<IReportSectionMediaAnalyticsP
   sectionIndex,
   showForm,
   disabled,
+  onContentClick,
   ...rest
 }) => {
   const { values, setFieldValue } = useFormikContext<IReportForm>();
@@ -114,15 +117,6 @@ export const ReportSectionMediaAnalytics: React.FC<IReportSectionMediaAnalyticsP
           disabled={disabled}
         />
       </Show>
-      <Show visible={!!section.filterId && !sectionContent.length}>
-        <p>No content was returned by the filter.</p>
-      </Show>
-      <Show visible={!!section.folderId && !sectionContent.length}>
-        <p>Folder is empty.</p>
-      </Show>
-      <Show visible={section.settings.useAllContent}>
-        <p>This section will use content from all other sections.</p>
-      </Show>
       <Show visible={!!instance.content.length}>
         <Droppable droppableId={section.name} isDropDisabled={disabled}>
           {(droppableProvided) => (
@@ -158,6 +152,7 @@ export const ReportSectionMediaAnalytics: React.FC<IReportSectionMediaAnalyticsP
                             }}
                             showSortOrder
                             onBlurSortOrder={(row) => handleChangeSortOrder(row, instance)}
+                            onContentClick={onContentClick}
                           />
                         </div>
                       );
@@ -169,6 +164,15 @@ export const ReportSectionMediaAnalytics: React.FC<IReportSectionMediaAnalyticsP
             </div>
           )}
         </Droppable>
+        <Show visible={!!section.filterId && !sectionContent.length}>
+          <p>No content was returned by the filter.</p>
+        </Show>
+        <Show visible={!!section.folderId && !sectionContent.length}>
+          <p>Folder is empty.</p>
+        </Show>
+        <Show visible={section.settings.useAllContent}>
+          <p>This section will use content from all other sections.</p>
+        </Show>
       </Show>
     </Col>
   );

diff --git a/app/subscriber/src/features/my-reports/view/components/ReportSections.tsx b/app/subscriber/src/features/my-reports/view/components/ReportSections.tsx
@@ -129,13 +129,15 @@ export const ReportSections: React.FC<IReportSectionsProps> = ({
                   sectionIndex={index}
                   showForm={form === 'sections'}
                   disabled={disabled}
+                  onContentClick={onContentClick}
                 />
               </Show>
               <Show visible={section.sectionType === ReportSectionTypeName.Gallery}>
                 <ReportSectionGallery
                   sectionIndex={index}
                   showForm={form === 'sections'}
                   disabled={disabled}
+                  onContentClick={onContentClick}
                 />
               </Show>
             </Section>

diff --git a/app/subscriber/src/features/my-reports/view/styled/ReportEdit.tsx b/app/subscriber/src/features/my-reports/view/styled/ReportEdit.tsx
@@ -28,7 +28,27 @@ export const ReportEdit = styled.div`
       border-bottom: solid 1px ${(props) => props.theme.css.lineSecondaryColor};
 
       .frm-in {
-        padding-bottom: 0;
+        max-height: 25px;
+        padding: 0;
+        > div {
+          max-height: 25px;
+          > input {
+            max-height: 25px;
+          }
+        }
+      }
+
+      .frm-select {
+        max-height: 25px;
+        padding: 0;
+        > div {
+          max-height: 25px;
+          min-height: unset;
+          > div {
+            align-content: center;
+            max-height: 25px;
+          }
+        }
       }
 
       > div {
@@ -58,6 +78,17 @@ export const ReportEdit = styled.div`
         background-color: ${(props) => props.theme.css.sectionHeader};
         color: ${(props) => props.theme.css.sectionHeaderText};
 
+        .frm-in {
+          max-height: 25px;
+          padding: 0;
+          > div {
+            max-height: 25px;
+            > input {
+              max-height: 25px;
+            }
+          }
+        }
+
         .section-label {
           span:nth-child(1) {
             min-width: 50px;