You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
import _ from 'lodash';
|
|
import tpl from 'vj/utils/tpl';
|
|
import request from 'vj/utils/request';
|
|
import DOMAttachedObject from 'vj/components/DOMAttachedObject';
|
|
import AutoComplete from '.';
|
|
|
|
function getText(user) {
|
|
return user.uname;
|
|
}
|
|
|
|
function getItems(val) {
|
|
return request.get('/user/search', { q: val });
|
|
}
|
|
|
|
function renderItem(user) {
|
|
return tpl`
|
|
<div class="media">
|
|
<div class="media__left medium">
|
|
<img class="small user-profile-avatar" src="${user.gravatar}" width="30" height="30">
|
|
</div>
|
|
<div class="media__body medium">
|
|
<div class="user-select__uname">${user.uname}</div>
|
|
<div class="user-select__uid">UID = ${user._id}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
export default class UserSelectAutoComplete extends AutoComplete {
|
|
static DOMAttachKey = 'vjUserSelectAutoCompleteInstance';
|
|
|
|
constructor($dom, options) {
|
|
super($dom, {
|
|
classes: 'user-select',
|
|
items: getItems,
|
|
render: renderItem,
|
|
text: getText,
|
|
...options,
|
|
});
|
|
}
|
|
}
|
|
|
|
_.assign(UserSelectAutoComplete, DOMAttachedObject);
|
|
window.Hydro.components.UserSelectAutoComplete = UserSelectAutoComplete;
|