Improve Pending Match UX Attribute Display (CO-2233) (#48)

* Improve display of unresolved requests: duplicate referenceids are now merged into a single column heading for Suggestion #, referenceid, and the "Assign this ReferenceID" button. (CO-2167)

* Improve Pending Match UX Attribute Display - add highlight switches and improve ordering of attributes (CO-2233)

* Restore id, sor, and sorid to the top of attributes listing and outline defined attributes (CO-2233)

app/resources/locales/en_US/default.po

@@ -659,6 +659,18 @@ msgstr "Filter"
 msgid "match.op.go"
 msgstr "Go"
 
+msgid "match.op.highlight"
+msgstr "Highlight:"
+
+msgid "match.op.highlight.both"
+msgstr "both"
+
+msgid "match.op.highlight.differences"
+msgstr "differences"
+
+msgid "match.op.highlight.matches"
+msgstr "matches"
+
 msgid "match.op.last"
 msgstr "Last"
 

app/templates/Matchgrids/reconcile.php

@@ -75,18 +75,41 @@
     // Test for content and equality between the row's attribute values and
     // set the third "match?" column to true (1) if non-empty equality found
     $canAttr[$i][2] = !empty($canAttr[$i][1][0]) && count(ArrayUtil::array_iunique($canAttr[$i][1])) === 1 ? 1 : 0;
-
   }
+
+  // Move request_time and resolution_time to the bottom
+  $tempArr = [];
+  foreach ($canAttr as $key => $val) {
+    if($val[0] == 'request_time' || $val[0] == 'resolution_time') {
+      $tempArr[] = $val;
+      unset($canAttr[$key]);
+    }
+  }
+  $canAttr = array_merge($canAttr, $tempArr);
 ?>
 
 <div class="titleNavContainer">
   <div class="pageTitle">
     <h1><?= __('match.op.reconcile.requests'); ?></h1>
   </div>
 </div>
-
+<div class="view-controls">
+  <span class="view-controls-title"><?= __('match.op.highlight'); ?></span>
+  <div class="form-check form-check-inline">
+    <input id="view-mode-diff" class="form-check-input" name="view-mode" type="radio" checked> 
+    <label for="view-mode-diff" class="form-check-label"><?= __('match.op.highlight.differences'); ?></label>
+  </div>
+  <div class="form-check form-check-inline">
+    <input id="view-mode-match" class="form-check-input" name="view-mode" type="radio"> 
+    <label for="view-mode-match" class="form-check-label"><?= __('match.op.highlight.matches'); ?></label>
+  </div>
+  <div class="form-check form-check-inline">
+    <input id="view-mode-both" class="form-check-input" name="view-mode" type="radio"> 
+    <label for="view-mode-both" class="form-check-label"><?= __('match.op.highlight.both'); ?></label>
+  </div>  
+</div>
 <div id="reconcile-table-container" class="table-container">
-  <table id="reconcile-table" class="side-by-side">
+  <table id="reconcile-table" class="side-by-side view-mode-diff">
     <thead>
       <tr>
         <td class="empty"></td>
@@ -135,12 +158,29 @@
       </tr>
       <!-- All other attributes -->
       <?php for($i = 0; $i < count($canAttr); $i++): ?>
-        <?php $matchClass = $canAttr[$i][2] ? ' class="match"' : ''; ?>
-        <tr<?= $matchClass ?>>
+        <?php
+          $atr = $canAttr[$i][0];
+          // set the row css class
+          // (attribute name + standard, diff, or match)
+          $matchClass = 'matr-' . $atr;
+          if(
+            $atr == 'id' 
+            || $atr == 'sor'
+            || $atr == 'sorid'
+            || $atr == 'request_time'
+            || $atr == 'resolution_time'
+          ) {
+            $matchClass .= ' standard';
+          } else {
+            $matchClass .= ' defined-attr';
+            $matchClass .= ($canAttr[$i][2] ? ' match' : ' diff');
+          }
+        ?>
+        <tr class="<?= $matchClass ?>">
           <th class="attr-title" scope="row"><?= $canAttr[$i][0] ?></th>
           <?php foreach($canAttr[$i][1] as $key => $val): ?>
             <td>
-              <?php if($canAttr[$i][0] == 'id'): ?>
+              <?php if($atr == 'id'): ?>
                 <?= $this->Html->link(
                   $val, 
                   ['controller' => 'matchgrid-records', 
@@ -156,4 +196,14 @@
       <?php endfor; ?>
     </tbody>
   </table>
-</div>
+</div>
+
+<script>
+  function js_local_onload() {
+    // Handle display-mode switching
+    $('.view-controls input').click(function () {
+      // Remove existing view-mode classes and add the new class equal to the view-controls switch ID
+      $('#reconcile-table').removeClass('view-mode-diff view-mode-match view-mode-both').addClass($(this).attr('id'));
+    });
+  }
+</script>  

app/webroot/css/co-base.css

@@ -724,9 +724,33 @@ body.logged-in #top-menu {
 #reconcile-table tr:nth-child(2n+1) td {
   background-color: var(--cmg-color-white); 
 }
-#reconcile-table tr.match td {
+#reconcile-table.view-mode-match tr.match td,
+#reconcile-table.view-mode-both tr.match td {
   background-color: var(--cmg-color-green-003);
 }
+#reconcile-table.view-mode-diff tr.diff td,
+#reconcile-table.view-mode-both tr.diff td {
+  background-color: var(--cmg-color-yellow-003);
+}
+#reconcile-table tr.defined-attr th {
+  background-color: var(--cmg-color-lightgray-001);
+  border-left: 4px solid var(--cmg-color-lightgray-007);
+}
+#reconcile-table tr.defined-attr td:last-child {
+  border-right: 2px solid var(--cmg-color-lightgray-007);
+}
+#reconcile-table tr.matr-sorid th,
+#reconcile-table tr.matr-sorid td {
+  border-bottom: 2px solid var(--cmg-color-lightgray-007);
+}
+#reconcile-table tr.matr-request_time th,
+#reconcile-table tr.matr-request_time td {
+  border-top: 2px solid var(--cmg-color-lightgray-007);
+}
+/* view-controls */
+.view-controls-title {
+  margin-right: 1em;
+}
 /* MATCHGRID MANAGEMENT */
 #matchgrid-management {
   padding: 0;

app/webroot/css/co-color.css

@@ -63,7 +63,7 @@
 
   --cmg-color-yellow-001: #f5f5bb;    /* yellow warning */
   --cmg-color-yellow-002: #fbec88;    /* infobox informational area */
-  --cmg-color-yellow-003: #ffd;       /* forms: focused input */
+  --cmg-color-yellow-003: #ffd;       /* forms: focused input; diffing fields for reconciliation */
 
   --cmg-color-red-001: #fcc;          /* red warning */
   --cmg-color-red-002: #c00;          /* forms: error icons */