Afform - Allow picking icon for tab, add CrmUiIconPicker widget

Since this is needed in several places, this adds a general purpose crmUiIconPicker widget to crmUi. It also switches Afforms's hook_civicrm_tabset to use the API, which ensures virtual forms get picked up. Adds the new icon for CiviGrant as an example.
civicrm · Jun 30, 2022 · 9df0dea · 9df0dea
1 parent c898b8c
commit 9df0dea
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 28 deletions.
diff --git a/ang/crmUi.js b/ang/crmUi.js
@@ -1170,6 +1170,21 @@
       };
     })
 
+    // Adds an icon picker widget
+    // Example: `<input crm-ui-icon-picker ng-model="model.icon">`
+    .directive('crmUiIconPicker', function($timeout) {
+      return {
+        restrict: 'A',
+        controller: function($element) {
+          CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').then(function() {
+            $timeout(function() {
+              $element.crmIconPicker();
+            });
+          });
+        }
+      };
+    })
+
     .run(function($rootScope, $location) {
       /// Example: <button ng-click="goto('home')">Go home!</button>
       $rootScope.goto = function(path) {

diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
@@ -95,6 +95,7 @@
           editor.afform.is_dashlet = false;
           editor.afform.title += ' ' + ts('(copy)');
         }
+        editor.afform.icon = editor.afform.icon || 'fa-list-alt';
         $scope.canvasTab = 'layout';
         $scope.layoutHtml = '';
         $scope.entities = {};

diff --git a/ext/afform/admin/ang/afGuiEditor/config-form.html b/ext/afform/admin/ang/afGuiEditor/config-form.html
@@ -71,6 +71,9 @@
           <option value="block">{{:: ts('As Block') }}</option>
           <option value="tab">{{:: ts('As Tab') }}</option>
         </select>
+        <div class="form-group" ng-show="editor.afform.contact_summary === 'tab'">
+          <input required ng-model="editor.afform.icon" crm-ui-icon-picker class="form-control">
+        </div>
       </div>
       <p class="help-block">{{:: ts('Placement can be configured using the Contact Layout Editor.') }}</p>
     </div>

diff --git a/ext/afform/core/Civi/Api4/Afform.php b/ext/afform/core/Civi/Api4/Afform.php
@@ -165,6 +165,10 @@ public static function getFields($checkPermissions = TRUE) {
             'tab' => ts('Contact Summary Tab'),
           ],
         ],
+        [
+          'name' => 'icon',
+          'description' => 'Icon shown in the contact summary tab',
+        ],
         [
           'name' => 'server_route',
         ],

diff --git a/ext/afform/core/afform.php b/ext/afform/core/afform.php
@@ -178,25 +178,25 @@ function afform_civicrm_tabset($tabsetName, &$tabs, $context) {
   if ($tabsetName !== 'civicrm/contact/view') {
     return;
   }
-  $scanner = \Civi::service('afform_scanner');
+  $afforms = Civi\Api4\Afform::get(FALSE)
+    ->addWhere('contact_summary', '=', 'tab')
+    ->addSelect('name', 'title', 'icon', 'module_name', 'directive_name')
+    ->execute();
   $weight = 111;
-  foreach ($scanner->getMetas() as $afform) {
-    if (!empty($afform['contact_summary']) && $afform['contact_summary'] === 'tab') {
-      $module = _afform_angular_module_name($afform['name']);
-      $tabs[] = [
-        'id' => $afform['name'],
-        'title' => $afform['title'],
-        'weight' => $weight++,
-        'icon' => 'crm-i fa-list-alt',
-        'is_active' => TRUE,
-        'template' => 'afform/contactSummary/AfformTab.tpl',
-        'module' => $module,
-        'directive' => _afform_angular_module_name($afform['name'], 'dash'),
-      ];
-      // If this is the real contact summary page (and not a callback from ContactLayoutEditor), load module.
-      if (empty($context['caller'])) {
-        Civi::service('angularjs.loader')->addModules($module);
-      }
+  foreach ($afforms as $afform) {
+    $tabs[] = [
+      'id' => $afform['name'],
+      'title' => $afform['title'],
+      'weight' => $weight++,
+      'icon' => 'crm-i ' . ($afform['icon'] ?: 'fa-list-alt'),
+      'is_active' => TRUE,
+      'template' => 'afform/contactSummary/AfformTab.tpl',
+      'module' => $afform['module_name'],
+      'directive' => $afform['directive_name'],
+    ];
+    // If this is the real contact summary page (and not a callback from ContactLayoutEditor), load module.
+    if (empty($context['caller'])) {
+      Civi::service('angularjs.loader')->addModules($afform['module_name']);
     }
   }
 }

diff --git a/ext/civigrant/ang/afsearchGrants.aff.json b/ext/civigrant/ang/afsearchGrants.aff.json
@@ -2,6 +2,7 @@
     "type": "search",
     "title": "Grants",
     "contact_summary": "tab",
+    "icon": "fa-money",
     "server_route": "",
     "permission": "access CiviGrant"
 }
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.component.js
@@ -22,12 +22,6 @@
         };
       };
 
-      function initWidgets() {
-        CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').then(function() {
-          $('.crm-search-admin-field-icon > input.crm-icon-picker[ng-model]', $element).crmIconPicker();
-        });
-      }
-
       this.$onInit = function() {
         $element.on('hidden.bs.dropdown', function() {
           $timeout(function() {
@@ -51,7 +45,6 @@
         }
         ctrl.iconFields = _.transform(allFields, getIconFields, []);
         ctrl.iconFieldMap = _.indexBy(ctrl.iconFields, 'id');
-        $timeout(initWidgets);
       };
 
       this.onSelectField = function(clause) {
@@ -72,7 +65,6 @@
           searchMeta.pickIcon().then(function(icon) {
             if (icon) {
               ctrl.item.icons.push({icon: icon, side: 'left', if: []});
-              $timeout(initWidgets);
             }
           });
         }
@@ -85,7 +77,6 @@
             item.icon = icon;
             delete item.field;
             item.if = item.if || [];
-            $timeout(initWidgets);
           }
         });
       };

diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.html b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.html
@@ -17,7 +17,7 @@
     </div>
   </div>
   <div class="form-group crm-search-admin-field-icon" ng-if="icon.icon">
-    <input required ng-model="icon.icon" class="form-control crm-icon-picker">
+    <input required ng-model="icon.icon" crm-ui-icon-picker class="form-control crm-icon-picker">
   </div>
   <select class="form-control" ng-model="icon.side" title="{{:: ts('Show icon on left or right side of the field') }}">
     <option value="left">{{:: ts('Align left') }}</option>