Show email instead of birthday in person selector (dbp/apps/library#78)

packages/person-select/README.md

@@ -24,9 +24,9 @@ npm i @dbp-toolkit/person-select
     - 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 `<dbp-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"}"></dbp-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 `<dbp-person-select show-birth-date></dbp-person-select>`
+- `show-details` (optional): also shows the email address of the persons to distinguish people with the same name
+    - the currently logged in user needs to have permissions to show the email address of people
+    - example `<dbp-person-select show-details></dbp-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/person-select.js

@@ -18,7 +18,7 @@ import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
 const personContext = {
     "@id": "@id",
     "name": "http://schema.org/name",
-    "birthDate": "http://schema.org/Date"
+    "email": "http://schema.org/email"
 };
 
 select2(window, $);
@@ -43,7 +43,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
         this.lastResult = {};
         this.showReloadButton = false;
         this.reloadButtonTitle = '';
-        this.showBirthDate = false;
+        this.showDetails = false;
     }
 
     static get scopedElements() {
@@ -66,7 +66,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
             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' },
+            showDetails: { type: Boolean, attribute: 'show-details' },
             auth: { type: Object },
         };
     }
@@ -261,9 +261,8 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
         let text = person["name"];
 
         // add birth date to name if present
-        if (this.showBirthDate && (person["birthDate"] !== undefined) && (person["birthDate"] !== null)) {
-            const date = new Date(person["birthDate"]);
-            text += ` (${date.toLocaleDateString("de-AT")})`;
+        if (this.showDetails && (person["email"] !== undefined) && (person["email"] !== null)) {
+            text += ` (${person["email"]})`;
         }
 
         return text;