Fix person roles people picker

COmanage · Feb 4, 2025 · a050f09 · a050f09
1 parent 650dfc9
commit a050f09
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 48 deletions.
diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
@@ -227,11 +227,12 @@ public function calculateLiClasses(): string
    *
    * @param   string  $element         HTML element created with the CAKEPHP HTML Helper
    * @param   string  $vueElementName  The name of the JavaScript module
+   * @param   array   $formParams      List of element parameters
    *
    * @return string
    * @since  COmanage Registry v5.0.0
    */
-  public function constructSPAField(string $element, string $vueElementName): string {
+  public function constructSPAField(string $element, string $vueElementName, array $formParams = []): string {
     // Parse the ID attribute
     $regexId = '/id="(.*?)"/m';
     preg_match_all($regexId, $element, $matchesId, PREG_SET_ORDER, 0);
@@ -244,14 +245,18 @@ public function constructSPAField(string $element, string $vueElementName): stri
     $regexClass = '/class="(.*?)"/m';
     preg_match_all($regexClass, $element, $matchesClass, PREG_SET_ORDER, 0);
     if(!empty($matchesId[0][1]) && !empty($matchesName[0][1])) {
-      return $this->getView()->element($vueElementName, [
+      $arguments = [
         'htmlId' => $matchesId[0][1],
         'fieldName' => $matchesName[0][1],
         'containerClasses' => $matchesClass[0][1],
         'type' => 'field',
         // we want the label to be an empty string to hide the default label introduced by the module.
         'label' => ''
-      ]);
+      ];
+      if (!empty($formParams)) {
+        $arguments['formParams'] = $formParams;
+      }
+      return $this->getView()->element($vueElementName, $arguments);
     }
 
     // Fallback to an error element

diff --git a/app/templates/PersonRoles/fields.inc b/app/templates/PersonRoles/fields.inc
@@ -59,29 +59,11 @@ if($vv_action == 'add' || $vv_action == 'edit' || $vv_action == 'view') {
   // For now, we render sponsor and manager as read only.
   // XXX Need People Picker (CFM-150)
   foreach(['sponsor', 'manager'] as $f) {
-    $fp = $f."_person";
-
-    $fname = "";
-    $flink = [];
-
-    if(!empty($vv_obj->$fp->names[0])) {
-      $fname = $vv_obj->$fp->names[0]->full_name;
-      $fid = $vv_obj->$fp->id;
-      $flink = ['url' => ['controller' => 'people', 'action' => 'edit', $vv_obj->$fp->id]];
-      $formParams = [
-        'value' => $fid,
-        'fullName' => $fname,
-        'link' => $flink,
-      ];
-      $this->set('formParams', $formParams);
-    }
-
+    $fp = $f . '_person';
+
     $vv_autocomplete_arguments = [
       'fieldName' => $f.'_person_id',
-      'status' => $fname,
-      'link' => $flink,
       'fieldLabel' => __d('field', $f),
-      'fieldOptions' => [],
       'autocomplete' => [
         'configuration' => [
           'action' => 'GET',
@@ -90,6 +72,15 @@ if($vv_action == 'add' || $vv_action == 'edit' || $vv_action == 'view') {
       ]
     ];
 
+    if(!empty($vv_obj->$fp->names[0])) {
+      $flink = ['url' => ['controller' => 'people', 'action' => 'edit', $vv_obj->$fp->id]];
+      $vv_autocomplete_arguments['formParams'] = [
+        'value' => $vv_obj->$fp->id,
+        'fullName' => $vv_obj->$fp->names[0]->full_name,
+        'link' => $flink,
+      ];
+    }
+
     print $this->element('form/listItem', ['arguments' => $vv_autocomplete_arguments]);
   }
 

diff --git a/app/templates/element/form/infoDiv/autocomplete.php b/app/templates/element/form/infoDiv/autocomplete.php
@@ -27,29 +27,19 @@
 
 declare(strict_types = 1);
 
-// Create a field name for the autocomplete input
-$autoCompleteFieldName = 'cm_autocomplete_' . $fieldName;
+unset($vv_field_arguments['autocomplete']);
+if (isset($vv_field_arguments['formParams'])) {
+  $formParams = $vv_field_arguments['formParams'];
+  unset($vv_field_arguments['formParams']);
+}
 
-// Because we use JavaScript to set the value of the hidden field,
-// disable form-tamper checking for the autocomplete fields.
-// XXX We ought not have to do this for the hidden field ($fieldName) at least
-$this->Form->unlockField($fieldName);
-$this->Form->unlockField($autoCompleteFieldName);
-
-$autocompleteArgs = [
-  'type' => 'field',
-  'fieldName' => $fieldName,
-  'personType' => 'person',
-  'htmlId' => $autoCompleteFieldName,
-  'viewConfigParameters' => $vv_field_arguments['autocomplete']['configuration']
-];
-
-?>
-
-
-<?php
-  // Create a hidden field to hold our value and emit the autocomplete widget
-  print $this->Form->hidden($fieldName, $vv_field_arguments['fieldOptions']) . $this->element('peopleAutocomplete', $autocompleteArgs);
+print $this->Field->constructSPAField(
+  // The Default field will be used to harvest the attributes
+  element:        $this->Field->formField(...$vv_field_arguments),
+  // Vue/JS element
+  vueElementName: 'peopleAutocomplete',
+  formParams:     $formParams ?? []
+);
 ?>
 <div class="field-desc field-autocomplete-desc">
   <span class="material-symbols-outlined">info</span>

diff --git a/app/templates/element/peopleAutocomplete.php b/app/templates/element/peopleAutocomplete.php
@@ -84,7 +84,7 @@
           actionUrl: '<?= $constructedActionUrl ?>',
           inputValue: '<?= $inputValue ?>',
           inputProps: {
-            name: '<?= $htmlId ?>',
+            name: '<?= $fieldName ?>',
             // This is not translated to data-personid but to datapersonid.
             dataPersonid: '<?= $inputValue ?>'
           },

diff --git a/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js
@@ -247,8 +247,8 @@ export default {
   mounted() {
     if(this.options.inputValue != undefined
       && this.options.inputValue != ''
-      && this.options.htmlId.endsWith('person_id')) {
-      this.options.inputProps.value = `${this.options.formParams?.fullName} (ID: ${this.options.inputValue})`
+      && this.options.inputProps.name.endsWith('person_id')) {
+      this.person = `${this.options.formParams?.fullName} (ID: ${this.options.inputValue})`
     }
   },
   computed: {