Add reload button

packages/person-select/README.md

@@ -19,6 +19,12 @@
     - 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-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
+    - example `<vpu-person-select show-reload-button></vpu-person-select>`
+- `reload-button-title` (optional): sets a title text on the reload button
+    - example `<vpu-person-select show-reload-button reload-button-text="Reload result list"></vpu-person-select>`
 
 ## Local development
 

packages/person-select/src/vpu-person-select-demo.js

@@ -66,7 +66,7 @@ class PersonSelectDemo extends LitElement {
                         <div class="field">
                             <label class="label">Person 2</label>
                             <div class="control">
-                                <vpu-person-select lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}"></vpu-person-select>
+                                <vpu-person-select lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}" show-reload-button reload-button-title="Click me"></vpu-person-select>
                             </div>
                         </div>
                     </form>

packages/person-select/src/vpu-person-select.js

@@ -30,6 +30,8 @@ class PersonSelect extends VPULitElementJQuery {
         this.ignoreValueUpdate = false;
         this.isSearching = false;
         this.lastResult = {};
+        this.showReloadButton = false;
+        this.reloadButtonTitle = '';
     }
 
     static get properties() {
@@ -38,6 +40,8 @@ class PersonSelect extends VPULitElementJQuery {
             active: { type: Boolean, attribute: false },
             entryPointUrl: { type: String, attribute: 'entry-point-url' },
             value: { type: String },
+            showReloadButton: { type: Boolean, attribute: 'show-reload-button' },
+            reloadButtonTitle: { type: String, attribute: 'reload-button-title' },
         };
     }
 
@@ -63,16 +67,6 @@ class PersonSelect extends VPULitElementJQuery {
                 }, 500);
             });
 
-            that.$('#reload-button').click(() => {
-                // fire a change event
-                that.dispatchEvent(new CustomEvent('change', {
-                    detail: {
-                        value: that.value,
-                    },
-                    bubbles: true
-                }));
-            });
-
             // try an init when user-interface is loaded
             that.initJSONLD();
         });
@@ -257,6 +251,20 @@ class PersonSelect extends VPULitElementJQuery {
         return this.$select !== null && this.$select.hasClass("select2-hidden-accessible");
     }
 
+    reloadClick() {
+        if (this.value === "") {
+            return;
+        }
+
+        // fire a change event
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                value: this.value,
+            },
+            bubbles: true
+        }));
+    }
+
     static get styles() {
         // language=css
         return css`
@@ -314,7 +322,12 @@ class PersonSelect extends VPULitElementJQuery {
                         <!-- https://select2.org-->
                         <select id="${this.selectId}" name="person" class="select" ?disabled=${!this.active}>${!this.active ? html`<option value="" disabled selected>${ i18n.t('person-select.login-required')}</option>` : ''}</select>
                     </div>
-                    <a class="control button" id="reload-button" style="display: none">
+                    <a class="control button"
+                       id="reload-button"
+                       ?disabled=${this.value === ""}
+                       @click="${this.reloadClick}"
+                       style="display: ${this.showReloadButton ? "flex" : "none"}"
+                       title="${this.reloadButtonTitle}">
                         <vpu-icon name="reload"></vpu-icon>
                     </a>
                 </div>