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 | 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 124x 124x 124x 124x 124x 124x 124x 124x 124x 124x 124x 124x 124x 124x 124x 124x 124x 124x 124x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x | 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>`;
}
}
|