diff --git a/app/resources/locales/en_US/operation.po b/app/resources/locales/en_US/operation.po
index 092608bc4..cb94909ca 100644
--- a/app/resources/locales/en_US/operation.po
+++ b/app/resources/locales/en_US/operation.po
@@ -33,6 +33,15 @@ msgstr "Add"
msgid "add.a"
msgstr "Add a New {0}"
+msgid "autocomplete.people.desc"
+msgstr "Begin typing to find a person (use at least {0} characters from a name, email address, or identifier)"
+
+msgid "autocomplete.people.label"
+msgstr "Search for a person"
+
+msgid "autocomplete.people.placeholder"
+msgstr "enter name, email address, or identifier"
+
msgid "api.key.generate"
msgstr "Generate API Key"
diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
index 961eaf862..1d2036aac 100644
--- a/app/src/View/Helper/FieldHelper.php
+++ b/app/src/View/Helper/FieldHelper.php
@@ -501,6 +501,77 @@ protected function formNameDiv(string $fieldName, string $labelText=null, string
' . ($desc ? '
' . $desc . '
' : "") .'
';
}
+
+ /**
+ * Emit a People Autocomplete (PrimeVue) control for selecting a person
+ *
+ * @since COmanage Registry v5.0.0
+ * @param string $fieldName Field name of input field
+ * @param string $type Type of person autocomplete to use (XXX should be an enum, and a default should be set)
+ * @return string Source HTML
+ */
+
+ public function peopleAutocompleteControl(string $fieldName, string $type = 'coperson'): string {
+ if($this->action == 'view') {
+ // return the member name value as plaintext
+ $coptions = ['type' => 'text'];
+ $entity = $this->getView()->get('vv_obj');
+ $controlCode = $entity->$fieldName;
+
+ // Return this to the generic control() function
+ return $this->control($fieldName, $coptions, ctrlCode: $controlCode, labelIsTextOnly: true);
+
+ } else {
+ // Create the options array for the (text input) form control
+ $coptions = [];
+ $coptions['class'] = 'form-control people-autocomplete';
+ $coptions['placeholder'] = __d('operation','autocomplete.people.placeholder');
+ $coptions['id'] = $fieldName;
+ $coptions['value'] = '';
+
+ $entity = $this->getView()->get('vv_obj');
+
+ // Get the existing values, if present
+ if(!empty($entity->$fieldName)) {
+ $coptions['value'] = ''; // XXX put the ID here.
+ }
+
+ // Create a field name for the autocomplete input
+ $autoCompleteFieldName = 'cm_autocomplete_' . $fieldName;
+
+ // 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 = [
+ 'fieldName' => $fieldName,
+ 'type' => $type,
+ 'htmlId' => $autoCompleteFieldName
+ ];
+
+ // Create a hidden field to hold our value and emit the autocomplete widget
+ $controlCode = $this->Form->hidden($fieldName, $coptions)
+ . $this->getView()->element('autocompletePeople', $autocompleteArgs);
+
+ // XXX the numeric value passed to 'autocomplete.people.desc' should be derived from config; it is the minLength value for starting autocomplete.
+ $autoCompleteDesc = '
info ' . __d('operation','autocomplete.people.desc',['2']) . '
';
+
+ // Specify a class on the
form control wrapper
+ $liClass = "fields-people-autocomplete";
+
+ // Pass everything to the generic control() function
+ return $this->control(
+ $fieldName,
+ $coptions,
+ ctrlCode: $controlCode,
+ afterField: $autoCompleteDesc,
+ cssClass: $liClass,
+ labelIsTextOnly: true
+ );
+ }
+ }
/**
* Emit a source control for an MVEA that has a source_foo_id field pointing
diff --git a/app/src/View/Helper/VueHelper.php b/app/src/View/Helper/VueHelper.php
index 3f84dfe30..329551567 100644
--- a/app/src/View/Helper/VueHelper.php
+++ b/app/src/View/Helper/VueHelper.php
@@ -50,6 +50,8 @@ class VueHelper extends Helper {
'datepicker.hour'
],
'operation' => [
+ 'autocomplete.people.label',
+ 'autocomplete.people.placeholder',
'close'
]
];
diff --git a/app/templates/GroupMembers/fields.inc b/app/templates/GroupMembers/fields.inc
index 6a9f07665..1fca865a3 100644
--- a/app/templates/GroupMembers/fields.inc
+++ b/app/templates/GroupMembers/fields.inc
@@ -26,8 +26,12 @@
*/
if($vv_action == 'add') {
- // As a temporary hack for development, we accept a manually entered Person ID
- print $this->Field->control('person_id', ['type' => 'text']);
+ // Produce the autocomplete people selector on 'add'
+ print $this->Field->peopleAutocompleteControl('person_id');
+
+ // XXX As a temporary hack for development, we accept a manually entered Person ID
+ // XXX leave here temporarily.
+ //print $this->Field->control('person_id', ['type' => 'text']);
} else {
print $this->Form->hidden('person_id');
}
diff --git a/app/templates/element/autocompletePeople.php b/app/templates/element/autocompletePeople.php
new file mode 100644
index 000000000..e80c984cf
--- /dev/null
+++ b/app/templates/element/autocompletePeople.php
@@ -0,0 +1,97 @@
+request->getAttribute('csrfToken');
+ // Load my helper functions
+ $vueHelper = $this->loadHelper('Vue');
+
+ // Create a people autocomplete text input.
+?>
+
+
+
+
+
+
+
diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php
index 2745b09b5..2cbac6959 100644
--- a/app/templates/layout/default.php
+++ b/app/templates/layout/default.php
@@ -63,10 +63,13 @@
'co-responsive'
]) . PHP_EOL ?>
-
+
Html->script([
'bootstrap/bootstrap.bundle.min.js',
- 'jquery/jquery.min.js'
+ 'jquery/jquery.min.js',
+ 'vue/vue-3.2.31.global.prod.js',
+ 'vue/primevue-3.48.1.core.min.js',
+ 'vue/primevue-3.48.1.autocomplete.min.js'
]) . PHP_EOL ?>
@@ -225,8 +228,7 @@
- Html->script([
- 'vue/vue-3.2.31.global.prod.js',
+ Html->script([
'js-cookie/js.cookie-2.1.3.min.js',
'comanage/comanage.js'
]) . PHP_EOL ?>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 6c5d48340..0f0f3e703 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1302,6 +1302,7 @@ ul.form-list .field-desc {
font-size: 0.9em;
font-style: italic;
padding-bottom: 1em;
+ color: var(--cmg-color-txt-soft);
}
ul.form-list .fields-header {
background-color: var(--cmg-color-body-bg);
@@ -1523,6 +1524,32 @@ ul.form-list .cm-time-picker-vals li {
}
.cm-time-picker-colon {
padding: 0 1em;
+}
+/* Autocomplete */
+.cm-autocomplete-panel {
+}
+.cm-autocomplete-panel ul {
+ padding: 0;
+ margin: 0;
+ background-color: var(--cmg-color-body-bg);
+ border: 1px solid var(--cmg-color-bg-008);
+}
+.cm-autocomplete-panel li {
+ padding: 1em;
+ list-style: none;
+ border-collapse: collapse;
+ border-bottom: 1px solid var(--cmg-color-bg-006);
+}
+.cm-autocomplete-panel li[data-p-focus=true] {
+ background-color: var(--cmg-color-bg-001);
+ box-shadow: inset 0 0 0.5em var(--cmg-color-highlight-017);
+}
+.cm-autocomplete-panel .cm-ac-subitems {
+ font-size: 0.9em;
+ margin-left: 1em;
+}
+.cm-autocomplete-panel .cm-ac-item-primary {
+
}
/* Vue transitions */
.v-enter-active,
diff --git a/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js
new file mode 100644
index 000000000..289f98af6
--- /dev/null
+++ b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js
@@ -0,0 +1,109 @@
+/**
+ * COmanage Registry PeoplePicker Component JavaScript
+ *
+ * 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)
+ */
+
+import { camelize } from '../utils/helpers.js';
+
+export default {
+ props: {
+ options: Object,
+ core: Object,
+ txt: Object
+ },
+ components: {
+ AutoComplete : primevue.autocomplete
+ },
+ data() {
+ return {
+ people: [],
+ person: ''
+ }
+ },
+ methods: {
+ search() {
+ this.people = [
+ {
+ "value": 16,
+ "label": "Test J Testington IV",
+ "email": "test.testington@myvo.org 1",
+ "emailLabel": "Email (official): ",
+ "identifier": "50010",
+ "identifierLabel": "Identifier (employeenumber): "
+ },
+ {
+ "value": 17,
+ "label": "Test JR Testington V",
+ "email": "test.testington@myvo.org 1",
+ "emailLabel": "Email (official): ",
+ "identifier": "50002",
+ "identifierLabel": "Identifier (employeenumber): "
+ },
+ {
+ "value": 280,
+ "label": "Test C Testington",
+ "email": "test.testington@myvo.org 1",
+ "emailLabel": "Email (official): ",
+ "identifier": "50052",
+ "identifierLabel": "Identifier (employeenumber): "
+ }
+ ];
+ },
+ setPerson() {
+ const field = document.getElementById(this.options.fieldName);
+ field.value = this.person.value;
+ }
+ },
+ template: `
+
+
+
+