compenf-780: Make table headers sticky (#139)

frontend/cypress/e2e/complaint-list.cy.ts

@@ -0,0 +1,39 @@
+/*
+Tests to verify complaint list specification functionality
+*/
+describe('Complaint List Functionality', () => {
+
+    const complaintTypes = ['#hwcr-tab', '#ers-tab'];
+
+    beforeEach(function() {
+      cy.viewport("macbook-16");
+      cy.kcLogout().kcLogin();
+    });
+
+    Cypress._.times(complaintTypes.length, ((index) => {
+
+      it('Verifies the complaint tabs, filter and table header are sticky', {scrollBehavior: false}, () => {
+        cy.visit("/");
+        cy.get('.comp-loader-overlay').should('exist');
+        cy.get('.comp-loader-overlay').should('not.exist');
+
+        cy.get(complaintTypes[index]).click({ force: true });
+
+        // remove the open filter
+        cy.get('#comp-status-filter').click({ force: true });
+        cy.get('#comp-zone-filter').click({ force: true });
+
+
+        //-- check to make sure there are enough rows to scroll
+        cy.get('.pagination').should('exist');
+
+        //scroll to the bottom of the page
+        cy.scrollTo('bottom');
+
+        cy.get('.fixed-nav-header').isInViewport();
+        cy.get('.fixed-filter-header').isInViewport();
+        cy.get('.fixed-table-header').isInViewport();
+
+      });
+    }));
+  });

frontend/cypress/support/commands.ts

@@ -218,6 +218,18 @@ Cypress.Commands.add("navigateToAllegationEditScreen", (complaintIdentifier: str
   cy.get("#details-screen-edit-button").click({ force: true });
 });
 
+Cypress.Commands.add('isInViewport', { prevSubject: true },(subject) => {
+  const bottom = Cypress.$(cy.state('window')).height();
+  const rect = subject[0].getBoundingClientRect();
+
+  console.log(rect.top);
+
+  expect(rect.top).not.to.be.greaterThan(bottom, `Expected element not to be below the visible scrolled area`);
+  expect(rect.top).to.be.greaterThan(0, `Expected element not to be above the visible scrolled area`);
+
+  return subject;
+});
+
 function hasSameTopLevelDomain(url1: string, url2: string): boolean {
   const tld1 = extractTopLevelDomain(url1);
   const tld2 = extractTopLevelDomain(url2);
@@ -233,4 +245,6 @@ function extractTopLevelDomain(url: string): string {
   return tld;
 }
 
+
+
 module.exports = {};

frontend/cypress/support/index.ts

@@ -9,5 +9,6 @@ declare namespace Cypress {
     navigateToHWLCEditScreen(complaintIdentifier: string) : Chainable<any>;
     navigateToAllegationDetailsScreen(complaintIdentifier: string) : Chainable<any>;
     navigateToAllegationEditScreen(complaintIdentifier: string) : Chainable<any>;
+    isInViewport() : Chainable<any>;
   }
 }

frontend/src/app/components/common/comp-input.tsx

@@ -2,6 +2,7 @@ import { FC } from "react";
 
 type Props = {
   id: string;
+  divId: string;
   type: "input" | "number" | "text";
   label?: string;
   inputClass?: string;
@@ -25,6 +26,7 @@ const noop = () => {};
 
 export const CompInput: FC<Props> = ({
   id,
+  divId,
   type,
   inputClass,
   formClass,
@@ -62,6 +64,7 @@ export const CompInput: FC<Props> = ({
 
   const props = {
     id: id,
+    divId: divId,
     value: value,
    //  defaultValue: defaultValue,
     className: inputClasses.join(" "),
@@ -80,7 +83,7 @@ export const CompInput: FC<Props> = ({
   }
 
   return (
-    <div className={formClass} id="x-coordinate-pair-id">
+    <div className={formClass} id={divId}>
       {label && (
         <label className="text-box" htmlFor={id}>
           {label}

frontend/src/app/components/containers/complaints/complaint-filter-bar.tsx

@@ -71,7 +71,7 @@ export const ComplaintFilterBar: FC<Props> = ({viewType, toggleViewType}) => {
   );
 
   return (
-    <div className="comp-filter-pill-container">
+    <div className="fixed-filter-header comp-filter-pill-container">
       <MapListToggle
         onToggle={toggleViewType}
         activeView={viewType}

frontend/src/app/components/containers/complaints/complaints.tsx

@@ -111,7 +111,7 @@ export const Complaints: FC<Props> = ({ defaultComplaintType }) => {
       <div className="comp-sub-header">Complaints</div>
 
       {/* <!-- create list of complaint types --> */}
-      <Navbar className="basic-navbar-nav complaint-tab-container-width">
+      <Navbar className="fixed-nav-header basic-navbar-nav complaint-tab-container-width">
         <Nav className="nav nav-tabs comp-tab container-fluid">
           {/* <!-- dynamic tabs --> */}
           {complaintTypes.map(({ id, code, name }) => {

frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx

@@ -572,6 +572,7 @@ export const ComplaintDetailsEdit: FC<ComplaintDetailsProps> = ({
               </div>
               <CompInput
                 id="comp-details-edit-x-coordinate-input"
+                divId="x-coordinate-pair-id"
                 type="input"
                 label="X Coordinate"
                 containerClass="comp-details-edit-input"
@@ -588,7 +589,8 @@ export const ComplaintDetailsEdit: FC<ComplaintDetailsProps> = ({
                 }
               />
               <CompInput
-                id="comp-details-edit-x-coordinate-input"
+                id="comp-details-edit-y-coordinate-input"
+                divId="y-coordinate-pair-id"
                 type="input"
                 label="Y Coordinate"
                 containerClass="comp-details-edit-input"

frontend/src/app/components/containers/complaints/headers/allegation-complaint-list-header.tsx

@@ -13,7 +13,7 @@ export const AllegationComplaintListHeader: FC<Props> = ({
   sortDirection,
 }) => {
   return (
-    <thead>
+    <thead className="fixed-table-header">
       <tr>
         <SortableHeader
           title="Incident#"

frontend/src/app/components/containers/complaints/headers/wildlife-complaint-list-header.tsx

@@ -13,7 +13,7 @@ export const WildlifeComplaintListHeader: FC<Props> = ({
   sortDirection,
 }) => {
   return (
-    <thead>
+    <thead className="fixed-table-header">
       <tr>
         <SortableHeader
           title="Incident#"

frontend/src/assets/sass/complaint.scss

@@ -415,11 +415,6 @@
     height: 38px;
     text-align: left;
 
-    margin-left: 12px;
-    margin-right: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-
     th {
       background: #8c8c8c;
       background-color: #e4e4e4;

frontend/src/assets/sass/layout.scss

@@ -11,6 +11,23 @@
   top: 0;
 }
 
+.fixed-nav-header {
+  position: sticky !important;
+  top: 72px; // Header (72px)
+  background-color: $white;
+}
+
+.fixed-filter-header {
+  position: sticky;
+  top: 130px; // Header (72px) + Tabs (58px) 
+  background-color: $white;
+}
+
+.fixed-table-header {
+  position: sticky;
+  top: 176px; // Header (72px) + Tabs (58px) + filters (46px)
+}
+
 .comp-header {
   height: 72px;
   padding: 0 0 0 12px;