diff --git a/packages/person-select/README.md b/packages/person-select/README.md index d4f26b91e1cfce85f51af81fa2d307256a85872c..daf97c11a70ecac187a1bbee0cdc9c825209a066 100644 --- a/packages/person-select/README.md +++ b/packages/person-select/README.md @@ -19,6 +19,9 @@ - the `value` will also be set automatically when a person is chosen in the selector - `data-object` (read-only): when a person is selected the person object will be set as json string - example `<vpu-person-select data-object="{"@id":"/people/testuser", "@type":"http://schema.org/Person", "identifier":"testuser", "givenName":"Hans", "familyName":"Tester", "honorificSuffix":"Ing.", "telephone":"+43 (876) 123-4567", "phoneExtension":"4567", "email":"hans.tester@email.com", "name":"Hans Tester"}"></vpu-person-select>` +- `show-birth-date` (optional): also shows the birth date of the persons to distinguish people with the same name + - the currently logged in user needs to have permissions to show the birth date of people + - example `<vpu-person-select show-birth-date></vpu-person-select>` - `show-reload-button` (optional): if set a reload button will be viewed next to the select box - the button triggers a `change` event on the web component - the button is disabled if no person is selected diff --git a/packages/person-select/src/vpu-person-select.js b/packages/person-select/src/vpu-person-select.js index 7b2d99ffacdc187bcbf356451dd23ab65168f707..aa22297ea74f82c6e6becfa77f1a1f809ef4aaef 100644 --- a/packages/person-select/src/vpu-person-select.js +++ b/packages/person-select/src/vpu-person-select.js @@ -33,6 +33,7 @@ class PersonSelect extends VPULitElementJQuery { this.lastResult = {}; this.showReloadButton = false; this.reloadButtonTitle = ''; + this.showBirthDate = false; } static get properties() { @@ -44,6 +45,7 @@ class PersonSelect extends VPULitElementJQuery { object: { type: Object, attribute: false }, showReloadButton: { type: Boolean, attribute: 'show-reload-button' }, reloadButtonTitle: { type: String, attribute: 'reload-button-title' }, + showBirthDate: { type: Boolean, attribute: 'show-birth-date' }, }; } @@ -143,13 +145,16 @@ class PersonSelect extends VPULitElementJQuery { }; }, processResults: function (data) { - console.log(data); + // console.log(data); that.lastResult = data; + const members = data["hydra:member"]; + let results = []; + members.forEach((person) => { + results.push({id: person["@id"], text: that.generateOptionText(person)}); + }); - const results = that.jsonld.transformMembers(data, localContext); - - console.log("results"); - console.log(results); + // console.log("results"); + // console.log(results); return { results: results @@ -208,7 +213,7 @@ class PersonSelect extends VPULitElementJQuery { .then((person) => { that.object = person; const identifier = person["@id"]; - const option = new Option(person.name, identifier, true, true); + const option = new Option(that.generateOptionText(person), identifier, true, true); $this.attr("data-object", JSON.stringify(person)); $this.data("object", person); that.$select.append(option).trigger('change'); @@ -228,6 +233,18 @@ class PersonSelect extends VPULitElementJQuery { return true; } + generateOptionText(person) { + let text = person["name"]; + + // add birth date to name if present + if (this.showBirthDate && (person["birthDate"] !== undefined) && (person["birthDate"] !== "")) { + const date = new Date(person["birthDate"]); + text += ` (${date.toLocaleDateString("de-AT")})`; + } + + return text; + } + update(changedProperties) { changedProperties.forEach((oldValue, propName) => { switch (propName) {