tildefriends/apps/ssb/tf-id-picker.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

55 lines
1.1 KiB
JavaScript
Raw Normal View History

import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
import {styles} from './tf-styles.js';
/*
2024-02-24 11:09:34 -05:00
** Provide a list of IDs, and this lets the user pick one.
*/
class TfIdentityPickerElement extends LitElement {
static get properties() {
return {
ids: {type: Array},
selected: {type: String},
users: {type: Object},
};
}
static styles = styles;
constructor() {
super();
this.ids = [];
this.users = {};
}
changed(event) {
this.selected = event.srcElement.value;
2024-02-24 11:09:34 -05:00
this.dispatchEvent(
new Event('change', {
srcElement: this,
})
);
}
render() {
return html`
2024-02-24 11:09:34 -05:00
<select
2024-04-04 20:35:09 -04:00
class="w3-select w3-theme-d1 w3-padding w3-border"
2024-02-24 11:09:34 -05:00
@change=${this.changed}
style="max-width: 100%; overflow: hidden"
>
${(this.ids ?? []).map(
(id) =>
html`<option ?selected=${id == this.selected} value=${id}>
${this.users[id]?.name
? this.users[id]?.name + ' - '
: undefined}<small>${id}</small>
</option>`
)}
</select>
`;
}
}
customElements.define('tf-id-picker', TfIdentityPickerElement);