Add actions dropdown to People index (CFM-207) (#51)

* Add actions dropdown to People index. Allow overriding of icon CSS class. (CFM-207) * Modify dropdown menu colors to improve contrast and link clarity. (CFM-207)
COmanage · Sep 13, 2022 · da76874 · da76874
1 parent 9d7d5df
commit da76874
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 50 deletions.
diff --git a/app/src/Model/Table/PeopleTable.php b/app/src/Model/Table/PeopleTable.php
@@ -139,6 +139,19 @@ public function initialize(array $config): void {
       'table' => [
         'add' =>      ['platformAdmin', 'coAdmin'],
         'index' =>    ['platformAdmin', 'coAdmin']
+      ],
+      // Related models whose permissions we'll need, typically for table views
+      'related' => [
+        'Addresses',
+        'AdHocAttributes',
+        'Names',
+        'EmailAddresses',
+        'ExternalIdentities',
+        'HistoryRecords',
+        'Identifiers',
+        'PersonRoles',
+        'TelephoneNumbers',
+        'Urls'
       ]
     ]);
   }

diff --git a/app/templates/People/actions.inc b/app/templates/People/actions.inc
@@ -0,0 +1,103 @@
+<?php
+/**
+ * COmanage Registry People Actions Menu Configuration
+ *
+ * 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          https://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v5.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+// Index top-links appear as top links in the index view
+$indexTopLinks = [];
+
+// Actions appear as row-level menu items in the index view gear icon and as a tab menu or top-link menu on 
+// edit and view pages based on user permissions (TODO).
+
+// TODO: Merge this with tabs (and top-links) available on the add-edit-view page (CFM-192 (and CO-647))
+// TODO: Note that this is already marked up for 'tab' or 'topLink' for use in CFM-192. 
+$actions = [
+  [
+    'controller' => 'names',
+    'action' => 'index',
+    'icon' => 'account_box',
+    'iconClass' => 'material-icons-outlined',
+    'type' => 'tab'
+  ],
+  [
+    'controller' => 'email_addresses',
+    'action' => 'index',
+    'icon' => 'email',
+    'iconClass' => 'material-icons-outlined',
+    'type' => 'tab'
+  ],
+  [
+    'controller' => 'identifiers',
+    'action' => 'index',
+    'icon' => 'fingerprint',
+    'type' => 'tab',
+    'class' => 'bottom-border'
+  ],
+  [
+    'controller' => 'person_roles',
+    'action' => 'index',
+    'icon' => 'emoji_people',
+    'type' => 'tab'
+  ],
+  [
+    'controller' => 'external_identities',
+    'action' => 'index',
+    'icon' => 'system_update_alt',
+    'type' => 'tab',
+    'class' => 'bottom-border'
+  ],
+  [
+    'controller' => 'ad_hoc_attributes',
+    'action' => 'index',
+    'icon' => 'check_box',
+    'iconClass' => 'material-icons-outlined',
+    'type' => 'tab'
+  ],
+  [
+    'controller' => 'addresses',
+    'action' => 'index',
+    'icon' => 'contact_mail',
+    'iconClass' => 'material-icons-outlined',
+    'type' => 'tab'
+  ],
+  [
+    'controller' => 'history_records',
+    'action' => 'index',
+    'icon' => 'history',
+    'type' => 'tab'
+  ],
+  [
+    'controller' => 'telephone_numbers',
+    'action' => 'index',
+    'icon' => 'phone',
+    'type' => 'tab'
+  ],
+  [
+    'controller' => 'urls',
+    'action' => 'index',
+    'icon' => 'link',
+    'type' => 'tab'
+  ]
+];
diff --git a/app/templates/Standard/index.php b/app/templates/Standard/index.php
@@ -237,30 +237,9 @@ function _column_key($modelsName, $c, $tz=null) {
         // Action list for command menu dropdown / button listing
         $action_args = array();
         $action_args['vv_attr_id'] =  $entity->id;
-
-          // Edit / View
-         /* TODO: Keep as reference for now; ultimately remove.
-          * if($vv_permission_set[$entity->id]['edit']) {
-            $action_args['vv_actions'][] = array(
-              'order' => $this->Menu->getMenuOrder('Edit'),
-              'icon' => $this->Menu->getMenuIcon('Edit'),
-              'url' => $this->Url->build(['action' => 'edit', $entity->id]),
-              'label' => __d('operation', 'edit')
-            );
-          } elseif($vv_permission_set[$entity->id]['view']) {
-            $action_args['vv_actions'][] = array(
-              'order' => $this->Menu->getMenuOrder('View'),
-              'icon' => $this->Menu->getMenuIcon('View'),
-              'url' => $this->Url->build(['action' => 'view', $entity->id]),
-              'label' => __d('operation', 'view')
-            );
-          }*/
 
     // Insert actions as per the .inc file
-
-    // TODO: create an element or move this to MenuHelper so it can be used by topLinks as well as actions 
-    // XXX this isn't quite the right test
-    // if(isset($entity->status) && $entity->status == StatusEnum::Active) {
+    // TODO: create an element or move this to MenuHelper so it can be used by topLinks as well as actions
         $actionOrderDefault = $this->Menu->getMenuOrder('Default');
         foreach($actions as $a) {
           $ok = false;
@@ -284,6 +263,7 @@ function _column_key($modelsName, $c, $tz=null) {
           if($ok) {
             $actionOrder = !empty($a['order']) ? $a['order'] : $actionOrderDefault++;
             $actionIcon = !empty($a['icon']) ? $a['icon'] : $this->Menu->getMenuIcon('Default');
+            $actionIconClass = !empty($a['iconClass']) ? $a['iconClass'] : '';
             $actionClass = !empty($a['class']) ? $a['class'] : '';
             $actionUrl = '';
             $actionLabel = '';
@@ -338,6 +318,7 @@ function _column_key($modelsName, $c, $tz=null) {
             $action_args['vv_actions'][] = array(
               'order' => $actionOrder,
               'icon' => $actionIcon,
+              'iconClass' => $actionIconClass,
               'url' => $actionUrl,
               'label' => $actionLabel,
               'class' => $actionClass,
@@ -346,31 +327,6 @@ function _column_key($modelsName, $c, $tz=null) {
           }
         }
 
-//            }
-
-      // Delete
-      /* TODO: Keep as reference for now - ultimately remove.
-       * if($vv_permission_set[$entity->id]['delete']) {
-          $actionPostBtnArray = ['action' => 'delete', $entity->id];
-          $actionUrl = $this->Url->build(['action' => 'delete', $entity->id]);
-          $action_args['vv_actions'][] = array(
-            'order' => $this->Menu->getMenuOrder('Delete'),
-            'icon' =>  $this->Menu->getMenuIcon('Delete'),
-            'url' => 'javascript:void(0);',
-            'label' => __d('operation', 'delete'),
-            'class' => 'deletebutton nospin',
-            'onclick' => array(
-              'dg_bd_txt' => __d('operation', 'delete.confirm', [$entity->id]),
-              'dg_post_btn_array' => $actionPostBtnArray,
-              'dg_url' => $actionUrl,
-              'dg_conf_btn' => __d('operation', 'remove'),
-              'dg_cancel_btn' => __d('operation', 'cancel'),
-              'dg_title' => __d('operation', 'remove'),
-              'dg_bd_txt_repl_str' => ''
-            ),
-          );
-        }*/
-
         ?>  
 
         <td class="actions">

diff --git a/app/templates/element/menuAction.php b/app/templates/element/menuAction.php
@@ -64,7 +64,11 @@ class="<?= $actionsMenuClass; ?>">
         <?php if(empty($action['onclick'])): ?>
           <a class="<?= $actionCssClass; ?>" href="<?= $action['url']; ?>">
             <?php if(!empty($action['icon'])): ?>
-              <em class="material-icons"><?= $action['icon']; ?></em>
+              <?php if(!empty($action['iconClass'])): ?>
+                <em class="<?= $action['iconClass']; ?>"><?= $action['icon']; ?></em>
+              <?php else: ?>
+                <em class="material-icons"><?= $action['icon']; ?></em>
+              <?php endif; ?>
             <?php endif; ?>
             <?= $action['label']; ?>
           </a>
@@ -85,7 +89,11 @@ class="<?= $actionsMenuClass; ?>">
           <a class="<?= $actionCssClass; ?>" href="#" onclick="<?= $dg_onclick; ?>"  
              data-bs-toggle="modal" data-bs-target="#dialog">
             <?php if(!empty($action['icon'])): ?>
-              <em class="material-icons"><?= $action['icon']; ?></em>
+              <?php if(!empty($action['icon_class'])): ?>
+                <em class="<?= $action['icon_class']; ?>"><?= $action['icon']; ?></em>
+              <?php else: ?>
+                <em class="material-icons"><?= $action['icon']; ?></em>
+              <?php endif; ?>
             <?php endif; ?>
             <?= $action['label']; ?>
           </a>

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -751,19 +751,25 @@ a.action-menu-toggle {
 }
 .field-actions a.dropdown-item {
   padding: 0.5em 1em;
-  color: var(--cmg-color-gray-001);
+  color: var(--cmg-color-blue-002);
 }
 #main .field-actions a.dropdown-item:hover {
   color: var(--cmg-color-black);
   text-decoration: none;
 }
+.dropdown-item {
+  background-color: var(--cmg-color-lightgray-011);
+}
 .dropdown-item.active, 
 .dropdown-item:active {
   background-color: var(--cmg-color-lightgray-004);
 }
 a.dropdown-item.deletebutton {
   color: var(--cmg-color-red-002);
 }
+.dropdown-item.bottom-border {
+  border-bottom: 1px solid var(--cmg-color-lightgray-005);
+}
 /* INDEX ACTION BULK EDIT */
 .field-actions.top-links #bulk-edit-switch-container {
   padding: 0.5em 1em;

diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
@@ -54,6 +54,7 @@
   --cmg-color-lightgray-008: #bbb;    /* border color */
   --cmg-color-lightgray-009: #ededed; /* data-list background color */
   --cmg-color-lightgray-010: #e8e8e8; /* co-grid background color */
+  --cmg-color-lightgray-011: #fcfcfc; /* action dropdown menu background color */
 
   /* Greens */
   --cmg-color-green-001: #b4ffba;     /* alert: success */