114 lines
2.5 KiB
JavaScript
114 lines
2.5 KiB
JavaScript
import { isEmpty } from "@ember/utils";
|
|
import { INPUT_DELAY } from "discourse-common/config/environment";
|
|
import Component from "@ember/component";
|
|
import { action } from "@ember/object";
|
|
import { schedule } from "@ember/runloop";
|
|
import ChatApi from "discourse/plugins/chat/discourse/lib/chat-api";
|
|
import discourseDebounce from "discourse-common/lib/debounce";
|
|
|
|
const LIMIT = 50;
|
|
|
|
export default class ChatChannelMembersView extends Component {
|
|
tagName = "";
|
|
channel = null;
|
|
members = null;
|
|
isSearchFocused = false;
|
|
isFetchingMembers = false;
|
|
onlineUsers = null;
|
|
offset = 0;
|
|
filter = null;
|
|
inputSelector = "channel-members-view__search-input";
|
|
canLoadMore = true;
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
|
|
if (!this.channel || this.channel.isDraft) {
|
|
return;
|
|
}
|
|
|
|
this._focusSearch();
|
|
this.set("members", []);
|
|
this.fetchMembers();
|
|
|
|
this.appEvents.on("chat:refresh-channel-members", this, "onFilterMembers");
|
|
}
|
|
|
|
willDestroyElement() {
|
|
this._super(...arguments);
|
|
this.appEvents.off("chat:refresh-channel-members", this, "onFilterMembers");
|
|
}
|
|
|
|
get chatProgressBarContainer() {
|
|
return document.querySelector("#chat-progress-bar-container");
|
|
}
|
|
|
|
@action
|
|
onFilterMembers(username) {
|
|
this.set("filter", username);
|
|
this.set("offset", 0);
|
|
this.set("canLoadMore", true);
|
|
|
|
discourseDebounce(
|
|
this,
|
|
this.fetchMembers,
|
|
this.filter,
|
|
this.offset,
|
|
INPUT_DELAY
|
|
);
|
|
}
|
|
|
|
@action
|
|
loadMore() {
|
|
if (!this.canLoadMore) {
|
|
return;
|
|
}
|
|
|
|
discourseDebounce(
|
|
this,
|
|
this.fetchMembers,
|
|
this.filter,
|
|
this.offset,
|
|
INPUT_DELAY
|
|
);
|
|
}
|
|
|
|
fetchMembersHandler(id, params = {}) {
|
|
return ChatApi.chatChannelMemberships(id, params);
|
|
}
|
|
|
|
fetchMembers(filter = null, offset = 0) {
|
|
this.set("isFetchingMembers", true);
|
|
|
|
return this.fetchMembersHandler(this.channel.id, {
|
|
username: filter,
|
|
offset,
|
|
})
|
|
.then((response) => {
|
|
if (this.offset === 0) {
|
|
this.set("members", []);
|
|
}
|
|
|
|
if (isEmpty(response)) {
|
|
this.set("canLoadMore", false);
|
|
} else {
|
|
this.set("offset", this.offset + LIMIT);
|
|
this.members.pushObjects(response);
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.set("isFetchingMembers", false);
|
|
});
|
|
}
|
|
|
|
_focusSearch() {
|
|
if (this.capabilities.isIpadOS || this.site.mobileView) {
|
|
return;
|
|
}
|
|
|
|
schedule("afterRender", () => {
|
|
document.getElementsByClassName(this.inputSelector)[0]?.focus();
|
|
});
|
|
}
|
|
}
|