chg: [UI] Rotate header for role index table

app/Controller/RolesController.php

@@ -112,6 +112,7 @@ class RolesController extends AppController
         if ($this->IndexFilter->isRest()) {
             return $this->restResponsePayload;
         }
+        $this->set('options', $this->Role->premissionLevelName);
         $this->set('permFlags', $this->Role->permFlags);
         $this->set('menuData', array('menuList' => 'globalActions', 'menuItem' => 'roles'));
     }

app/View/Elements/genericElements/IndexTable/Fields/boolean.ctp

@@ -43,9 +43,19 @@
         }
         $rules_raw = implode('<br />', $rules_raw);
     }
+
+    $classes = ['fa'];
+    $classes[] = !empty(Hash::extract($row, $field['data_path'])[0]) ? 'fa-check' : 'fa-times';
+
+    if (!empty($field['colors'])) {
+        $classes[] = !empty(Hash::extract($row, $field['data_path'])[0]) ? 'green' : 'grey';
+    } else {
+        $classes[] = 'black';
+    }
+
     echo sprintf(
-        '<i class="black fa fa-%s" role="img" aria-label="%s"></i>%s',
-        (!empty(Hash::extract($row, $field['data_path'])[0])) ? 'check' : 'times',
+        '<i class="%s" role="img" aria-label="%s"></i>%s',
+        implode(' ', $classes),
         (!empty(Hash::extract($row, $field['data_path'])[0])) ? __('Yes') : __('No'),	
         empty($rules_raw) ? '' :
         sprintf(
@@ -55,4 +65,4 @@
             __('Rules')
         )
     );
-?>
+

app/View/Elements/genericElements/IndexTable/headers.ctp

@@ -19,11 +19,19 @@
                 } else {
                     $header_data = h($header['name']);
                 }
-
             }
+            $classes = [];
+            if (!empty($header['sort'])) {
+                $classes[] = 'pagination_link';
+            }
+            if (!empty($header['rotate_header'])) {
+                $classes[] = 'rotate';
+                $header_data = "<div><span>$header_data</span></div>";
+            }
+
             $headersHtml .= sprintf(
                 '<th%s>%s</th>',
-                !empty($header['sort']) ? ' class="pagination_link"' : '',
+                !empty($classes) ? ' class="' . implode(' ', $classes) .'"' : '',
                 $header_data
             );
         }

app/View/Roles/admin_index.ctp

@@ -18,6 +18,14 @@
             'name' => __('Name'),
             'sort' => 'Role.name',
             'data_path' => 'Role.name'
+        ],
+        [
+            'name' => __('Permission'),
+            'sort' => 'Role.permission',
+            'element' => 'custom',
+            'function' => function (array $row) use ($options) {
+                return $options[$row['Role']['permission']];
+            }
         ]
     ];
 
@@ -26,7 +34,10 @@
             'name' => Inflector::Humanize(substr($k, 5)),
             'sort' => 'Role.' . $k,
             'data_path' => 'Role.' . $k,
-            'element' => 'boolean'
+            'element' => 'boolean',
+            'rotate_header' => true,
+            'class' => 'rotate',
+            'colors' => true,
         ];
     }
 

app/webroot/css/main.css

@@ -2687,3 +2687,39 @@ a.orgImg {
 .misp-error-container {
     margin: 0 20px;
 }
+
+th.rotate {
+    /* Something you can count on */
+    height: 100px;
+    white-space: nowrap;
+    vertical-align: inherit !important;
+}
+
+th.rotate > div {
+    transform:
+        /* Magic Numbers */
+            translate(15px, 30px)
+                /* 45 is really 360 - 45 */
+            rotate(315deg);
+    width: 25px;
+}
+
+th.rotate > div > span {
+    padding: 5px 0;
+}
+
+td.rotate {
+    text-align: center;
+}
+
+th.rotate, td.rotate {
+    width: 25px;
+}
+
+th.rotate + th:not(.rotate) {
+    padding-left: 30px;
+}
+
+td.rotate + td:not(.rotate) {
+    padding-left: 30px;
+}