Add birth day support

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

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) {