CO-2256_Improve_Matchgrid_status_column_with_color_or_badge

app/resources/locales/en_US/default.po

@@ -152,6 +152,9 @@ msgstr "Potential"
 msgid "match.en.ConfidenceModeEnum.S"
 msgstr "Suspended"
 
+msgid "match.en.ConfidenceModeEnum.S.badge"
+msgstr "Danger"
+
 msgid "match.en.PermissionEnum.A"
 msgstr "Platform Administrator"
 
@@ -200,6 +203,9 @@ msgstr "Active"
 msgid "match.en.StatusEnum.S"
 msgstr "Suspended"
 
+msgid "match.en.StatusEnum.S.badge"
+msgstr "Danger"
+
 ### Error Messages
 msgid "match.er.args"
 msgstr "Incorrect arguments provided to {0}"

app/src/Lib/Enum/StandardEnum.php

@@ -47,8 +47,8 @@ public static function getLocalizedConsts() {
 
     $consts = $reflect->getConstants();
 
-    $className = substr(strrchr(get_called_class(), '\\'), 1);
-    
+    $className = $reflect->getShortName();
+
     foreach(array_values($consts) as $key) {
       $ret[$key] = __('match.en.'.$className.'.'.$key);
     }

app/src/View/AppView.php

@@ -41,5 +41,7 @@ class AppView extends View {
   public function initialize(): void {
     parent::initialize();
     $this->loadHelper('Field');
+    $this->loadHelper('Menu');
+    $this->loadHelper('Badge');
   }
 }

app/src/View/Helper/BadgeHelper.php

@@ -0,0 +1,127 @@
+<?php
+/**
+ * COmanage Match Badge Helper
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          http://www.internet2.edu/comanage COmanage Project
+ * @package       match
+ * @since         COmanage Match v1.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+declare(strict_types = 1);
+
+namespace App\View\Helper;
+use \Cake\View\Helper;
+
+class BadgeHelper extends Helper {
+
+  public $helpers = ['Html'];
+
+  /**
+   * Helper which will produce Bootstrap based Badge
+   *
+   * @param string $title            The title of the badge
+   * @param string $type             Define the type of Badge. The value should be one of
+   *                                  [primary,secondary,success,danger,warning,info,light,dark]
+   *                                  Defaults to light
+   * @param boolean $badge_pill      Is this a bg-pill. Defaults to false
+   * @param boolean $badge_outline   Is this an outlined badge. Defaults to false
+   * @param array $class_list        List of extra classes
+   * @param string|null $fa_class    Fonts Awesome Icon we will prepend to the badge text
+   * @param boolean $dis_text_dark   Disable dark-text fonts for light|info color mode.
+   * @return mixed
+   * @since  COmanage Match v1.0.0
+   */
+  public function badgeIt(
+    string $title,
+    string $type = 'secondary',
+    bool $badge_pill = false,
+    bool $badge_outline = false,
+    array $class_list = [],
+    string $fa_class = null,
+    bool $dis_text_dark = false
+  ) {
+
+    $badge_classes = [];
+
+    if($badge_pill) {
+      $badge_classes[] = "rounded-pill";
+    }
+    if($badge_outline) {
+      $badge_classes[] = "bg-outline-" . $type;
+    } else {
+      $badge_classes[] = "bg-" . $type;
+    }
+
+    if(in_array($type, ['light', 'info'])
+       && !$dis_text_dark) {
+      $badge_classes[] = "text-dark";
+    }
+
+    if(!empty($class_list)) {
+      $badge_classes[] = implode(' ', $class_list);
+    }
+
+    if(!empty($fa_class)) {
+      $fa_element = '<i class="mr-1 fa ' . $fa_class .'"></i>';
+    }
+
+    return $this->Html->tag(
+      'span',
+      $fa_element . $title,
+      [
+        'class' => 'mr-1 badge ' . implode(' ', $badge_classes),
+        'escape' => false,
+      ]
+    );
+  }
+
+  /**
+   * Get the Badge Color
+   *
+   * @param string $color
+   * @return string|null
+   *
+   * @since  COmanage Match v1.0.0
+   */
+  public function getBadgeColor(string $color): ?string {
+    if(empty($color)) {
+      return null;
+    }
+
+    $color_map = [
+      'Success'   => 'success',
+      'Danger'    => 'danger',
+      'Warning'   => 'warning',
+      'Primary'   => 'primary',
+      'Secondary' => 'secondary',
+      'Light'     => 'light',
+      'Info'      => 'info',
+      'Dark'      => 'dark',
+    ];
+
+    if(!isset($color_map[$color])) {
+      return null;
+    }
+
+    return $color_map[$color];
+  }
+
+}

app/templates/Standard/index.php

@@ -187,7 +187,14 @@ function _column_key($modelsName, $c, $tz=null) {
               break;
             case 'enum':
               if($entity->$col) {
-                print __('match.en.'.$cfg['class'].'.'.$entity->$col);
+                $badge_color_class = __('match.en.'.$cfg['class'].'.'.$entity->$col . '.badge');
+                $title = __('match.en.'.$cfg['class'].'.'.$entity->$col);
+
+                if(!empty($badge_color_class) && strpos($badge_color_class, '.badge') === false) {
+                  print $this->Badge->badgeIt($title, $this->Badge->getBadgeColor($badge_color_class));
+                } else {
+                  print $title;
+                }
               }
               break;
             case 'fk':

app/templates/element/badgeList.php

@@ -0,0 +1,78 @@
+<?php
+/*
+ * COmanage Match Badge List
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * List of Badge configuration
+ * $vv_badge_list = array(
+ *   array(
+ *    'order' => BadgeOrderEnum::Status,
+ *    'text' => "mytext",
+ *    'color' => BadgeColorModeEnum::Blue,
+ *    'outline' => false,
+ *    'pill' => true,
+ *    'fa_class' => 'fa-key',
+ *   ),
+ * );
+ *
+ *
+ * @link          http://www.internet2.edu/comanage COmanage Project
+ * @package       match
+ * @since         COmanage Match v1.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+?>
+
+<?php
+// Sort the Badges
+usort($vv_badge_list, function ($item1, $item2) {
+  if ($item1['order'] == $item2['order']) return 0;
+  return $item1['order'] < $item2['order'] ? -1 : 1;
+});
+
+foreach($vv_badge_list as $badge) {
+  $badge_classes = [];
+  $fa_element = "";
+
+  if(isset($badge['pill']) && $badge['pill']) {
+    $badge_classes[] = "rounded-pill";
+  }
+  if(!empty($badge['fa_class'])) {
+    $fa_element = '<i class="mr-1 fa ' . $badge["fa_class"] .'"></i>';
+  }
+  if(isset($badge['outline']) && $badge['outline']) {
+    $badge_classes[] = "bg-outline-" . $badge['color'];
+  } else {
+    $badge_classes[] = "bg-" . $badge['color'];
+  }
+  if(in_array($badge['color'], ['light', 'info'])
+     && !$badge['dis_text_dark']) {
+    $badge_classes[] = "text-dark";
+  }
+
+  // Print the Badge
+  print $this->Html->tag(
+    'span',
+    $fa_element . $badge['text'],
+    [
+      'class' => 'mr-1 badge ' . implode(' ', $badge_classes),
+      'escape' => false,
+    ]
+  );
+}

app/webroot/css/co-base.css

@@ -1311,6 +1311,62 @@ td.indented {
   vertical-align: text-bottom;
   margin-right: 0.25em;
 }
+/*Bootstrap badge*/
+.badge {
+  font-size: 0.95em;
+  font-weight: normal;
+  height: min-content;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.bg-secondary,
+.bg-success,
+.bg-danger,
+.bg-warning,
+.bg-info,
+.bg-light,
+.bg-dark,
+.bg-primary {
+  border: 1px solid transparent;
+}
+.bg-warning {
+  background-color: var(--cmg-color-yellow-002);
+}
+.bg-primary {
+  background-color: var(--cmg-color-blue-003);
+}
+.bg-secondary {
+  background-color: var(--cmg-color-gray-002);
+}
+/* Bootstrap bg-outline */
+.bg-outline-primary {
+  color: var(--cmg-color-blue-003);
+  border: 1px solid var(--cmg-color-blue-003);
+}
+.bg-outline-info {
+  color: var(--cmg-color-blue-006);
+  border: 1px solid var(--cmg-color-blue-006);
+}
+.bg-outline-danger {
+  color: var(--cmg-color-red-005);;
+  border: 1px solid var(--cmg-color-red-005);;
+}
+.bg-outline-success {
+  color: var(--cmg-color-green-007);
+  border: 1px solid var(--cmg-color-green-007);
+}
+.bg-outline-warning {
+  color: var(--cmg-color-yellow-002);
+  border: 1px solid var(--cmg-color-yellow-002);
+}
+.bg-outline-light {
+  color: var(--cmg-color-gray-004);
+  border: 1px solid var(--cmg-color-gray-004);
+}
+.bg-outline-secondary {
+  color: var(--cmg-color-gray-002);
+  border: 1px solid var(--cmg-color-gray-002);
+}
 /* FOOTER */
 footer {
   text-align: center;

app/webroot/css/co-color.css

@@ -35,10 +35,12 @@
   --cmg-color-blue-003: #0c75c0;     /* submit buttons, .btn-primary */
   --cmg-color-blue-004: #9fc6e2;     /* spinner  */
   --cmg-color-blue-005: #53B1F4;     /* link focus borders for keyboard nav */
-
+  --cmg-color-blue-006: #17a2b8;     /* info bagde */
+
   --cmg-color-gray-001: #222;        /* body text */
   --cmg-color-gray-002: #555;        /* headings text */
   --cmg-color-gray-003: #666;        /* disabled text or form fields */
+  --cmg-color-gray-004: #212529;     /* badge light */
 
   --cmg-color-lightgray-001: #fafafa; /* background color, drawer */
   --cmg-color-lightgray-002: #f8f8f8; /* background color */
@@ -57,7 +59,8 @@
   --cmg-color-green-004: #282;       /* pagination */
   --cmg-color-green-005: #030;       /* pagination border color */
   --cmg-color-green-006: #040;       /* pagination button color */
-
+  --cmg-color-green-007: #28a745;    /* success badge */
+
   --cmg-color-yellow-001: #f5f5bb;    /* yellow warning */
   --cmg-color-yellow-002: #fbec88;    /* infobox informational area */
   --cmg-color-yellow-003: #ffd;       /* forms: focused input */
@@ -66,6 +69,7 @@
   --cmg-color-red-002: #c00;          /* forms: error icons */
   --cmg-color-red-003: #e33;          /* title for deleted/archived */
   --cmg-color-red-004: #c33;          /* button */
+  --cmg-color-red-005: #dc3545;       /* danger badge */
 
   --cmg-color-white: #fff;            /* white */
   --cmg-color-black: #000;            /* black */