Skip to content
Snippets Groups Projects
Select Git revision
  • 433d5c8532fdf2d35823a3e9fa86a8ebab6e5c94
  • main default protected
  • renovate/lock-file-maintenance
  • demo protected
  • person-select-custom
  • dbp-translation-component
  • icon-set-mapping
  • port-i18next-parser
  • remove-sentry
  • favorites-and-recent-files
  • revert-6c632dc6
  • lit2
  • advertisement
  • wc-part
  • automagic
  • publish
  • wip-cleanup
  • demo-file-handling
18 results

resource-select

Christoph Reiter's avatar
Add a new resource-select package/web-component
Reiter, Christoph authored 
The goal of this new component is to be a generic selector for API resources,
unlike the organization/person select, which hardcode various things for their
used resource.

Instead this provides some events which can be used to customize the creation of the
URL for fetching as well as for formatting the list of results.

Atm this only handles the organization and no search-as-you-type like the person select,
but maybe this can be extended in the future.
433d5c85
History
Christoph Reiter's avatar 433d5c85
History
Name Last commit Last update
..
assets
src
test
.eslintignore
.eslintrc.json
.gitignore
.npmignore
.prettierignore
.prettierrc.json
LICENSE
README.md
i18next-scanner.config.js
karma.conf.js
package.json
rollup.config.js
README.md

Resource Select Web Component

You can install this component via npm:

npm i @dbp-toolkit/resource-select

Usage

<dbp-resource-select></dbp-resource-select>
<script type="module" src="node_modules/@dbp-toolkit/resource-select/dist/dbp-resource-select.js"></script>

Or directly via CDN:

<dbp-resource-select></dbp-resource-select>
<script type="module" src="https://unpkg.com/@dbp-toolkit/resource-select@latest/dist/dbp-resource-select.js"></script>

Attributes

  • lang (optional, default: de): set to de or en for German or English
    • example <dbp-resource-select lang="de"></dbp-resource-select>
  • entry-point-url: entry point url to access the api
    • example <dbp-resource-select entry-point-url="http://127.0.0.1:8000"></dbp-resource-select>
  • resource-path (optional): path to the resource
    • example <dbp-resource-select resource-path="base/people"></dbp-resource-select>
  • value (optional): api path of recource to preload the selector with
    • example <dbp-resource-select value="/base/people/testuser"></dbp-resource-select>
    • the value will also be set automatically when an organization is chosen in the selector

Properties

  • valueObject (optional): The resource object corresponding to value
  • auth {object}: you need to set that object property for the auth token
    • 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

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