filter with selected person. Update the picker if a value alreday exi…

…sts.

app/src/View/Helper/FilterHelper.php

@@ -168,6 +168,9 @@ public function getHiddenFields(): array
    */
   public function getFullName(int $personId): string
   {
+    if(empty($personId)) {
+      return '';
+    }
     $ModelTable = TableRegistry::getTableLocator()->get('Names');
     $person = $ModelTable->primaryName($personId);
     return "{$person->given} {$person->family}";

app/templates/element/filter/filter.php

@@ -27,8 +27,24 @@
 
 declare(strict_types = 1);
 
-use Cake\Utility\Inflector;
+?>
+
+<script type="text/javascript">
+  $(function() {
+    // Remove the friendly representation of the person_id input element before submiting
+    const filterForm = document.getElementById("top-filters-form");
+    filterForm.addEventListener('formdata', (event) => {
+      if(event.formData.has('person_id')) {
+        const regex = new RegExp('[() ]', 'gm')
+        const personId = event.formData.get('person_id').replace(regex, '').split(':')[1]
+        event.formData.set('person_id', personId)
+      }
+    });
+  });
+</script>
 
+<?php
+use Cake\Utility\Inflector;
 
 // $this->name = Models
 $modelsName = $this->name;

app/templates/element/filter/peoplePicker.php

@@ -53,7 +53,10 @@
 
 // Get the Field configuration
 $formParams = $this->Filter->calculateFieldParams($key, $label);
-$vv_autocomplete_arguments['label'] = $label;
+if(!empty($formParams['value']) && $key == 'person_id') {
+  $formParams['fullName'] = $this->Filter->getFullName((int)$formParams['value']);
+}
+$vv_autocomplete_arguments['formParams'] = $formParams;
 
 ?>
 

app/templates/element/javascript.php

@@ -175,7 +175,7 @@
           $('#top-filters-submit').addClass("tss-rebalance"); 
         } else {
           $('#top-filters-submit').removeClass("tss-rebalance");
-        }          
+        }
       }
     });
 

app/templates/element/peopleAutocomplete.php

@@ -27,7 +27,7 @@
 
   // Get parameters
   $type = $type ?? 'stand-alone'; // autocomplete person picker type: 'stand-alone' or 'field', defaults to 'stand-alone'.
-  $label = $label ?? __d('operation','autocomplete.people.label');
+  $label = $label ?? $formParams['label'] ?? __d('operation','autocomplete.people.label');
   $fieldName = $fieldName ?? 'person_id';
   $personType = $personType ?? 'coperson';
   $htmlId = $htmlId ?? 'cmPersonPickerId';
@@ -38,6 +38,7 @@
   $token = $this->request->getAttribute('csrfToken');
   // Load my helper functions
   $vueHelper = $this->loadHelper('Vue');
+  $inputValue = $inputValue ?? $formParams['value'] ?? '';
 
   // If we have the $actionUrl array, construct the URL
   $constructedActionUrl = '';
@@ -80,7 +81,12 @@
           personType: '<?= $personType ?>',
           minLength: 2, // XXX probably should be set by config and default to 3
           htmlId: '<?= $htmlId ?>',
-          actionUrl: '<?= $constructedActionUrl ?>'
+          actionUrl: '<?= $constructedActionUrl ?>',
+          inputValue: '<?= $inputValue ?>',
+          inputProps: {
+            name: '<?= $htmlId ?>'
+          },
+          formParams: <?= json_encode($formParams) ?>,
         },
         error: ''
       }

app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js

@@ -159,10 +159,12 @@ export default {
       })
     },
     setPerson() {
-      if(this.options.type == 'field') {
+      if(this.options.type == 'default') {
+        // Do nothing
+      } else if(this.options.type == 'field') {
         // The picker is part of a standard form field
         const field = document.getElementById(this.options.fieldName);
-        field.value = this.person.value;  
+        field.value = this.person.value;
       } else {
         // The picker is stand-alone, and should render the configured page in a modal on @item-select
         const urlForModal = this.options.actionUrl + '&person_id=' + this.person.value;
@@ -180,6 +182,13 @@ export default {
       return str
     }
   },
+  mounted() {
+    if(this.options.inputValue != undefined
+       && this.options.inputValue != ''
+       && this.options.htmlId == 'person_id') {
+      this.options.inputProps.value = `${this.options.formParams?.fullName} (ID: ${this.options.inputValue})`
+    }
+  },
   computed: {
     hasMorePages: function() {
       if(this.rawData.responseMeta !== undefined) {
@@ -209,7 +218,8 @@ export default {
       @complete="searchPeople"
       inputClass="cm-autocomplete"
       panelClass="cm-autocomplete-panel"
-      :inputId="this.options.htmlId" 
+      :inputId="this.options.htmlId"
+      :inputProps="this.options.inputProps"
       :suggestions="this.people" 
       optionLabel="label"
       :minLength="this.options.minLength"