Merge pull request #1459 from flexion/937-mobile-tables

937: show 2 view options for docket record table on mobile (temporarily)
flexion · Apr 22, 2019 · e62991c · e62991c
2 parents d3aad2e + 2b84abf
commit e62991c
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 4 deletions.
diff --git a/web-client/cypress/integration/file-a-petition.spec.js b/web-client/cypress/integration/file-a-petition.spec.js
@@ -207,7 +207,7 @@ describe('can view case detail', () => {
   });
 
   it('shows docket record table and data', () => {
-    cy.get('table#docket-record tbody tr').should('exist');
+    cy.get('table.docket-record tbody tr').should('exist');
   });
 
   it('accordion header expands/collapses', () => {

diff --git a/web-client/src/styles/tables.scss b/web-client/src/styles/tables.scss
@@ -176,13 +176,25 @@ table.work-queue {
   overflow-y: scroll;
 }
 
-table#docket-record {
+@media only screen and (max-width: $medium-screen - 1px) {
+  .scrollable-table-container-mobile {
+    overflow: scroll;
+    max-height: 500px;
+    margin-top: 300px;
+  }
+}
+
+table.docket-record {
   thead th {
     font-weight: $font-semibold;
   }
 
   /* big screens */
   @media only screen and (min-width: $medium-screen) {
+    &.mobile-only-extra-table {
+      display: none;
+    }
+
     .center-column {
       text-align: center;
     }

diff --git a/web-client/src/views/DocketRecord.jsx b/web-client/src/views/DocketRecord.jsx
@@ -62,8 +62,7 @@ export const DocketRecord = connect(
         )}
         <div className="scrollable-table-container">
           <table
-            className="responsive-table row-border-only"
-            id="docket-record"
+            className="docket-record responsive-table row-border-only"
             aria-label="docket record"
           >
             <thead>
@@ -188,6 +187,107 @@ export const DocketRecord = connect(
             </tbody>
           </table>
         </div>
+
+        <div className="scrollable-table-container-mobile">
+          <table
+            className="docket-record mobile-only-extra-table row-border-only"
+            aria-label="docket record"
+          >
+            <thead>
+              <tr>
+                <th className="center-column">No.</th>
+                <th>Date</th>
+                <th className="center-column">Event</th>
+                <th className="icon-column" />
+                <th>Filings and Proceedings</th>
+                <th>Filed By</th>
+                <th>Action</th>
+                <th>Served</th>
+                <th className="center-column">Parties</th>
+              </tr>
+            </thead>
+            <tbody>
+              {caseDetail.docketRecordWithDocument.map(
+                ({ record, document, index }) => (
+                  <tr key={index}>
+                    <td className="center-column">{index + 1}</td>
+                    <td>{record.createdAtFormatted}</td>
+                    <td className="center-column">
+                      {document && document.eventCode}
+                    </td>
+                    <td className="filing-type-icon">
+                      {document && document.isPaper && (
+                        <FontAwesomeIcon icon={['fas', 'file-alt']} />
+                      )}
+                      {document &&
+                        helper.showDirectDownloadLink &&
+                        document.processingStatus !== 'complete' && (
+                          <FontAwesomeIcon
+                            icon="spinner"
+                            className="fa-spin spinner"
+                          />
+                        )}
+                    </td>
+                    <td>
+                      {document &&
+                        helper.showDirectDownloadLink &&
+                        document.processingStatus === 'complete' &&
+                        renderDocumentLink(
+                          document.documentId,
+                          record.description,
+                          document.isPaper,
+                        )}
+                      {document &&
+                        helper.showDirectDownloadLink &&
+                        document.processingStatus !== 'complete' && (
+                          <React.Fragment>
+                            <span
+                              className="usa-label-uploading"
+                              aria-label="document uploading marker"
+                            >
+                              <span aria-hidden="true">Uploading</span>
+                            </span>
+                            {record.description}
+                          </React.Fragment>
+                        )}
+                      {document && helper.showDocumentDetailLink && (
+                        <a
+                          href={documentHelper({
+                            docketNumber: caseDetail.docketNumber,
+                            documentId: document.documentId,
+                          })}
+                          aria-label="View PDF"
+                        >
+                          {record.description}
+                        </a>
+                      )}
+                      {!document &&
+                        record.documentId &&
+                        renderDocumentLink(
+                          record.documentId,
+                          record.description,
+                        )}
+                      {!document && !record.documentId && record.description}
+                      {record.filingsAndProceedings &&
+                        ` ${record.filingsAndProceedings}`}
+                    </td>
+                    <td>{document && document.filedBy}</td>
+                    <td>{record.action}</td>
+                    <td>
+                      {document && document.isStatusServed && (
+                        <span>{caseDetail.datePetitionSentToIrsMessage}</span>
+                      )}
+                      {document && helper.showDocumentStatus && (
+                        <span>{document.status}</span>
+                      )}
+                    </td>
+                    <td className="center-column">{record.servedParties}</td>
+                  </tr>
+                ),
+              )}
+            </tbody>
+          </table>
+        </div>
       </React.Fragment>
     );
   },