Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x | import { css, html, TemplateResult } from 'lit';
import { Select, SelectOption } from './Select';
import { property } from 'lit/decorators.js';
import { getFullName } from '../../display/TembaUser';
export interface UserOption extends SelectOption {
email: string;
name: string;
avatar: string;
}
export class UserSelect extends Select<UserOption> {
static get styles() {
return css`
${super.styles}
:host {
width: 150px;
display: block;
}
`;
}
@property({ type: String })
endpoint = '/api/v2/users.json';
@property({ type: String })
nameKey = 'name';
@property({ type: String })
valueKey = 'email';
@property({ type: String })
placeholder: string = 'Select a user';
@property({ type: Boolean })
sorted: boolean = true;
@property({ type: Object })
user: UserOption;
constructor() {
super();
this.shouldExclude = (option: UserOption) => {
const selected = this.values[0];
return option.email === selected?.email;
};
}
public prepareOptionsDefault(options: UserOption[]): UserOption[] {
options.forEach((option) => {
option.name = getFullName(option);
});
return options;
}
public renderOptionDefault(option: UserOption): TemplateResult {
if (!option) {
return html``;
}
return html`<temba-user
email=${option.email}
name=${option.name}
avatar=${option.avatar}
showname
></temba-user>`;
}
}
|