From f3f23d7ce7d62b71fbd05104d29c47657724f19c Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Thu, 24 Oct 2019 11:09:23 +0200
Subject: [PATCH] Add reload button
---
packages/person-select/README.md | 6 ++++
.../src/vpu-person-select-demo.js | 2 +-
.../person-select/src/vpu-person-select.js | 35 +++++++++++++------
3 files changed, 31 insertions(+), 12 deletions(-)
diff --git a/packages/person-select/README.md b/packages/person-select/README.md
index 995d0f2a..d4f26b91 100644
--- a/packages/person-select/README.md
+++ b/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
diff --git a/packages/person-select/src/vpu-person-select-demo.js b/packages/person-select/src/vpu-person-select-demo.js
index 457e1b1c..a698806d 100644
--- a/packages/person-select/src/vpu-person-select-demo.js
+++ b/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>
diff --git a/packages/person-select/src/vpu-person-select.js b/packages/person-select/src/vpu-person-select.js
index fb4c1d98..dcb1f33f 100644
--- a/packages/person-select/src/vpu-person-select.js
+++ b/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>
--
GitLab