diff --git a/packages/resource-select/README.md b/packages/resource-select/README.md index 0ff89144bbbc78c00d50d29f5ee7c715ff98e14c..084d9ff65974b3e8add64735b0e3e010da5c86a1 100644 --- a/packages/resource-select/README.md +++ b/packages/resource-select/README.md @@ -39,13 +39,15 @@ Or directly via CDN: - example auth property: `{token: "THE_BEARER_TOKEN"}` - note: most often this should be a property that is not set directly, but subscribed at a provider +## Override Properties + +- `buildUrl` - A function which takes the select and the base URL, can return a + different URL for fetching the list of resources. +- `formatResource` - A function which takes the select and a resource, should + return the text used for displaying the resource. + ## Events - `change` - Gets dispatched when either `value` or `valueObject` change. - `event.detail.value` - Same as the `value` property - `event.detail.object` - Same as the `valueObject` property -- `build-url` - Gets dispatched when during URL building. - - `event.detail.url` - Set this to the URL representing the collection endpoint -- `format-resource` - Gets dispatched when creating the display test for earch resource. - - `event.detail.object` - The resource that which should be represented by the text - - `event.detail.text` - Set this to the text that should be displayed diff --git a/packages/resource-select/src/dbp-resource-select-demo.js b/packages/resource-select/src/dbp-resource-select-demo.js index ee23176afe0c38d9057f408b3bdf7121e93a0095..96575b619139162831041f608664442c806e7eb6 100644 --- a/packages/resource-select/src/dbp-resource-select-demo.js +++ b/packages/resource-select/src/dbp-resource-select-demo.js @@ -78,17 +78,15 @@ export class ResourceSelectDemo extends ScopedElementsMixin(DBPLitElement) { } render() { - let buildUrl = (event) => { - let select = event.target; - let url = new URL(select.resourcePath, select.entryPointUrl).href; + let buildUrl = (select, url) => { url += '/' + encodeURIComponent(select.auth['person-id']); url += '/organizations'; url += '?' + new URLSearchParams({lang: select.lang}).toString(); - event.detail.url = url; + return url; }; - let formatResource = (event) => { - event.detail.text = event.detail.object.name; + let formatResource = (select, resource) => { + return resource['name']; }; let change = (event) => { @@ -113,8 +111,8 @@ export class ResourceSelectDemo extends ScopedElementsMixin(DBPLitElement) { entry-point-url="${this.entryPointUrl}" resource-path="base/people" @change="${change}" - @build-url="${buildUrl}" - @format-resource="${formatResource}"></dbp-resource-select> + .buildUrl="${buildUrl}" + .formatResource="${formatResource}"></dbp-resource-select> </div> </div> </form> diff --git a/packages/resource-select/src/resource-select.js b/packages/resource-select/src/resource-select.js index bf33437a401b20eee7da247b2bf7040d8705137e..91c86ae9483f459ff06e128b0e093ee50197baca 100644 --- a/packages/resource-select/src/resource-select.js +++ b/packages/resource-select/src/resource-select.js @@ -86,6 +86,14 @@ export class ResourceSelect extends AdapterLitElement { } } + buildUrl(select, url) { + return url; + } + + formatResource(select, resource) { + return resource.name ?? resource['@id']; + } + _getUrl() { if (this.entryPointUrl === null) { return null; @@ -94,26 +102,12 @@ export class ResourceSelect extends AdapterLitElement { if (this.resourcePath !== null) { url = new URL(this.resourcePath, this.entryPointUrl).href; } - let detail = { - url: url, - }; - const event = new CustomEvent('build-url', { - detail: detail, - }); - this.dispatchEvent(event); - return detail.url; + url = this.buildUrl(this, url); + return url; } _getText(resource) { - let detail = { - text: resource.name ?? null, - object: resource, - }; - const event = new CustomEvent('format-resource', { - detail: detail, - }); - this.dispatchEvent(event); - return detail.text; + return this.formatResource(this, resource); } _setValue(value) {