Add "button" type to column configuration for index view (CO-2137) (#15)

* Matchgrid Records: truncate length of field value output (i.e. Reference ID) to shrink the width of columns, but allow the full value to be displayed and copied (CO-2137) * Matchgrid Records: remove popover attribute (CO-2137) * Gather button-specific options together in columns.inc (CO-2137)
COmanage · Sep 30, 2021 · 119a4b5 · 119a4b5
1 parent 17f5759
commit 119a4b5
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 6 deletions.
diff --git a/app/templates/MatchgridRecords/columns.inc b/app/templates/MatchgridRecords/columns.inc
@@ -48,8 +48,14 @@ $indexColumns = [
     'sortable'   => true
   ],
   'referenceid' => [
-    'type'        => 'echo',
-    'sortable'    => true
+    'type'       => 'button',
+    'button'     => [
+      'text'       => 'fieldVal',
+      'attrs'      => ['class' => 'btn link referenceid'],
+      'popover'    => 'fieldVal',
+    ],
+    'truncate'   => 8,
+    'sortable'   => true
   ]
 ];
 

diff --git a/app/templates/Standard/index.php b/app/templates/Standard/index.php
@@ -214,6 +214,34 @@ function _column_key($modelsName, $c, $tz=null) {
                 print $entity->$col;
               }
               break;
+            case 'button':
+              $buttonAttrs = [];
+              $buttonText = $entity->$col;
+              if(!empty($cfg['button']['attrs'])) {
+                $buttonAttrs = $cfg['button']['attrs'];
+              }
+              $buttonAttrs['type'] = 'button';
+              if(!empty($cfg['button']['text']) && $cfg['button']['text'] != 'fieldVal') {
+                $buttonText = $cfg['button']['text'];
+              }
+              if(!empty($cfg['truncate']) && is_int($cfg['truncate'])) {
+                $buttonText = (strlen($buttonText) > $cfg['truncate']) ? substr($buttonText,0,$cfg['truncate']).'...' : $buttonText;
+              }
+              if(!empty($cfg['button']['popover'])) {
+                if($cfg['button']['popover'] == 'fieldVal') {
+                  $buttonAttrs['data-content'] = $entity->$col;
+                } else {
+                  $buttonAttrs['data-content'] = $cfg['button']['popover'];  
+                }
+                $label = !empty($cfg['label']) ? $cfg['label'] : _column_key($modelsName, $col, $vv_tz);
+                $buttonAttrs['title'] = $label;  
+                $buttonAttrs['data-toggle'] = 'popover';
+                $buttonAttrs['data-container'] = 'body';
+                $buttonAttrs['data-placement'] = 'top';
+                $buttonAttrs['data-animation'] = 'false';
+              }
+              print $this->Form->button($buttonText, $buttonAttrs);  
+              break;
             case 'link':
             case 'echo':
             default:

diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
@@ -171,6 +171,11 @@
 
     // Make all select form controls Bootstrappy
     $("select").addClass("form-control");
+
+    // Enable Bootstrap Popovers. Unless needed elsewhere, constrain this to #content
+    $(function () {
+      $('#content [data-toggle="popover"]').popover()
+    });
 
     // Other buttons (jQuery)
     $(".addbutton").button({

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -716,7 +716,14 @@ body.logged-in #top-menu {
   color: #222;
   margin-right: 0.5em;
 }
-/* Pagination */
+/* MATCHGRID RECORDS INDEX */
+body.matchgridrecords .popover {
+  max-width: unset;
+}
+body.matchgridrecords .popover-header {
+  font-size: 1em;
+}
+/* PAGINATION */
 #pagination {
   margin: 0;
   min-height: 1.5em;
@@ -1190,9 +1197,6 @@ td.indented {
   color: white !important;
   text-decoration: none !important;
 }
-.btn:focus {
-  border: 1px dotted white;
-}
 .btn-primary.disabled,
 .btn-primary:disabled {
   color: #fff;
@@ -1214,6 +1218,12 @@ td.indented {
   background-color: #c33; /* red */
   color: white;
 }
+.btn.link {
+  font-size: 1em;
+  text-decoration: underline;
+  color: var(--cmg-blue-primary);
+  border: none;
+}
 /* Call to Action Blocks */
 .call-to-action {
   margin-bottom: 2em;