Reconciliation view: reformat reconciliation table, link IDs to match…

…grid records, and make "New" record slightly more prominent (CO-2133)
COmanage · benno · Sep 17, 2021 · Sep 17, 2021 · Sep 17, 2021 · Sep 17, 2021
commit 6528bd32c0e5ae97d396ad48d424bba343c13d1f
diff --git a/app/src/Locale/en_US/default.po b/app/src/Locale/en_US/default.po
@@ -378,6 +378,9 @@ msgstr "Matchgrid ID"
 msgid "match.fd.name"
 msgstr "Name"
 
+msgid "match.fd.new_record"
+msgstr "New Record"
+
 msgid "match.fd.notification_email"
 msgstr "Notification Email"
 
@@ -462,6 +465,9 @@ msgstr "System of Record ID"
 msgid "match.fd.status"
 msgstr "Status"
 
+msgid "match.fd.suggestion.a"
+msgstr "Suggestion {0}"
+
 msgid "match.fd.table_name"
 msgstr "Table Name"
 
@@ -576,7 +582,7 @@ msgid "match.op.reconcile"
 msgstr "Reconcile"
 
 msgid "match.op.reconcile.requests"
-msgstr "Reconcile Requests"
+msgstr "Reconcile Unresolved Requests"
 
 msgid "match.op.reconcile.a"
 msgstr "Reconcile Unresolved Requests ({0})"

diff --git a/app/src/Template/Matchgrids/reconcile.ctp b/app/src/Template/Matchgrids/reconcile.ctp
@@ -64,58 +64,79 @@
 
 <div class="titleNavContainer">
   <div class="pageTitle">
-    <h1><?= __('match.op.reconcile'); ?></h1>
+    <h1><?= __('match.op.reconcile.requests'); ?></h1>
   </div>
 </div>
 
-
-<table id="reconcile-table" class="side-by-side">
-  <tbody>
-    <tr>
-      <td class="empty"></td>
-      <th class="strong-header" colspan="<?= count($vv_candidates); ?>">
-        <h2><?= __('match.fd.referenceid', [99]); ?></h2>
-      </th>
-    </tr>
-    <tr>
-      <td class="empty"></td>
-      <?php foreach($vv_candidates as $c): ?>
-        <th class="reference-ids">
-          <?= 
-            (!empty($c['referenceid']) 
-            ? '<a href="#" title="' . $c['referenceid'] . '">' . substr($c['referenceid'],0,10) . '</a>' . (strlen($c['referenceid']) > 10 ? '...' : '') 
-            : __('match.op.new')); ?>
+<div id="reconcile-table-container" class="table-container">
+  <table id="reconcile-table" class="side-by-side">
+    <thead>
+      <tr>
+        <td class="empty"></td>
+        <?php $i = 0; // note that we'll skip the first, "new" record. ?>
+        <?php foreach($vv_candidates as $c): ?>
+          <th class="col-names" scope="col">
+            <?= !empty($c['referenceid']) ? __('match.fd.suggestion.a',[$i]) : __('match.fd.new_record'); ?>
+            <?php $i++; ?>
+          </th>
+        <?php endforeach; ?>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Reference IDs -->
+      <tr>
+        <th class="attr-title" scope="row">
+          <?= __('match.fd.referenceid', [99]); ?>
         </th>
-      <?php endforeach; ?>
-    </tr>
-    <tr>
-      <th class="strong-header"><h2><?= __('match.ct.Attributes', [99]); ?></h2></th>
-      <?php foreach($vv_candidates as $c): ?>
-        <th>
-          <?=
-            $this->Form->postLink(__('match.op.reconcile.' . (!empty($c['referenceid']) ? 'assign' : 'generate')),
-              ['action' => 'reconcile',
-                $vv_cur_mg->id],
-              ['data' => [
-                'rowid' => $vv_request['id'],
-                // Default value needs to be the literal string "new" and not a localized text string
-                'referenceid' => (!empty($c['referenceid']) ? $c['referenceid'] : 'new')
-              ],
-              'confirm' => __('match.op.assign.confirm'),
-              'class'   => 'linkbutton']);
-          ?>
+        <?php foreach($vv_candidates as $c): ?>
+          <td class="reference-ids">
+            <?= !empty($c['referenceid']) ? $c['referenceid'] : __('match.op.new'); ?>
+          </td>
+        <?php endforeach; ?>
+      </tr>
+      <!-- Actions -->
+      <tr>
+        <th class="attr-title" scope="row">
+          <?= __('match.fd.action'); ?>
         </th>
-      <?php endforeach; ?>
-    </tr>
-
-    <?php for($i = 0; $i < count($canAttr); $i++): ?>
-      <?php $matchClass = $canAttr[$i][2] ? ' class="match"' : ''; ?>
-      <tr<?= $matchClass ?>>
-        <td class="attr-title"><?= $canAttr[$i][0] ?></td>
-        <?php foreach($canAttr[$i][1] as $key => $val): ?>
-          <td><?= $val; ?></td>
+        <?php foreach($vv_candidates as $c): ?>
+          <td class="reconcile-actions">
+            <?=
+              $this->Form->postLink(__('match.op.reconcile.' . (!empty($c['referenceid']) ? 'assign' : 'generate')),
+                ['action' => 'reconcile',
+                  $vv_cur_mg->id],
+                ['data' => [
+                  'rowid' => $vv_request['id'],
+                  // Default value needs to be the literal string "new" and not a localized text string
+                  'referenceid' => (!empty($c['referenceid']) ? $c['referenceid'] : 'new')
+                ],
+                  'confirm' => __('match.op.assign.confirm'),
+                  'class'   => 'btn btn-primary']);
+            ?>
+          </td>
         <?php endforeach; ?>
       </tr>
-    <?php endfor; ?>
-  </tbody>
-</table>
+      <!-- All other attributes -->
+      <?php for($i = 0; $i < count($canAttr); $i++): ?>
+        <?php $matchClass = $canAttr[$i][2] ? ' class="match"' : ''; ?>
+        <tr<?= $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'): ?>
+                <?= $this->Html->link(
+                  $val, 
+                  ['controller' => 'matchgrid-records', 
+                   'action' => 'edit', 
+                   $val, 
+                   '?' => ['matchgrid_id' => $vv_cur_mg->id]]); ?>
+              <?php else: ?>
+                <?= $val; ?>
+              <?php endif; ?>
+            </td>
+          <?php endforeach; ?>
+        </tr>
+      <?php endfor; ?>
+    </tbody>
+  </table>
+</div>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -515,41 +515,55 @@ body.logged-in #top-menu {
 }
 #reconcile-table td,
 #reconcile-table th {
-  border: 1px solid #eee;
+  border: 1px solid #ddd;
 }
 #reconcile-table th {
-  background-color: white;
-  text-align: center;
+  font-weight: normal;
 }
-#reconcile-table th.reference-ids a {
-  color: black;
-  text-decoration: none;
-  cursor: context-menu;
+#reconcile-table th.col-names {
+  text-align: center;
+  background-color: white;
+  border: none;
+  font-weight: bold;
 }
 #reconcile-table td.empty {
   background-color: white !important;
   border: none;
   font-size: 0.5em;
 }
-#reconcile-table th.strong-header {
-  padding-top: 0;
-  padding-bottom: 0;
-  background-color: #eee;
+#reconcile-table tbody td.reference-ids {
+  text-align: center;
+  word-break: break-all;
+  background-color: #f5f5f5 !important;
+}
+#reconcile-table td.reconcile-actions {
+  text-align: center;
 }
-#reconcile-table h2 {
+#reconcile-table .btn {
   font-size: 1em;
-  margin: 0;
-  padding: 0;
 }
-#reconcile-table td.attr-title {
-  font-weight: bold;
+#reconcile-table th.attr-title {
+  border: none;
+  background-color: white;
   text-align: right;
 }
+/* set the borders on the "new" reference id */
+#reconcile-table tbody td:nth-child(2) {
+  border-left: 2px solid #ccc;
+  border-right: 2px solid #ccc;
+}
+#reconcile-table tbody tr:first-child td:nth-child(2) {
+  border-top: 2px solid #ccc;
+}
+#reconcile-table tbody tr:last-child td:nth-child(2) {
+  border-bottom: 2px solid #ccc;
+}
+/* no zebra for this table */
 #reconcile-table tr:nth-child(2n+1) td {
-  background-color: white; /* no zebra for this table */
+  background-color: white; 
 }
 #reconcile-table tr.match td {
-  background-color: #efe;
+  background-color: #dfd;
 }
 /* MATCHGRID MANAGEMENT */
 #matchgrid-management {

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -192,15 +192,11 @@
     margin-bottom: 0;
   }
   /* MATCHGRID MANAGEMENT */
-  #matchgrid-management {
-    max-width: 700px;
-  }
   #matchgrid-config-menu {
     display: grid;
     column-gap: 1em;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     margin-bottom: 4em;
-    max-width: 700px;
   }
   /* RECONCILE TABLE */
   #reconcile-table {