diff --git a/src/domain/session/rightpanel/MemberListViewModel.js b/src/domain/session/rightpanel/MemberListViewModel.js new file mode 100644 index 00000000..691efd0d --- /dev/null +++ b/src/domain/session/rightpanel/MemberListViewModel.js @@ -0,0 +1,24 @@ +import {ViewModel} from "../../ViewModel.js"; +import {MemberTileViewModel} from "./MemberTileViewModel.js"; + +function comparator(member, otherMember) { + return member.displayName?.localeCompare(otherMember.displayName); +} + +export class MemberListViewModel extends ViewModel { + constructor(options) { + super(options); + this.memberTileViewModels = this._mapTileViewModels(this._filterJoinedMembers(options.members)) + .sortValues(comparator); + } + + _filterJoinedMembers(members) { + return members.filterValues(member => member.membership === "join"); + } + + _mapTileViewModels(members) { + return members.mapValues((member, emitChange) => { + return new MemberTileViewModel(this.childOptions({member, emitChange})); + }); + } +} diff --git a/src/domain/session/rightpanel/MemberTileViewModel.js b/src/domain/session/rightpanel/MemberTileViewModel.js new file mode 100644 index 00000000..9ce14d78 --- /dev/null +++ b/src/domain/session/rightpanel/MemberTileViewModel.js @@ -0,0 +1,12 @@ +import {ViewModel} from "../../ViewModel.js"; + +export class MemberTileViewModel extends ViewModel { + constructor(options) { + super(options); + this.member = options.member; + } + + get displayName() { + return this.member.displayName; + } +} diff --git a/src/platform/web/ui/session/rightpanel/MemberListView.js b/src/platform/web/ui/session/rightpanel/MemberListView.js new file mode 100644 index 00000000..b441f319 --- /dev/null +++ b/src/platform/web/ui/session/rightpanel/MemberListView.js @@ -0,0 +1,9 @@ +import {TemplateView} from "../../general/TemplateView.js"; +import {ListView} from "../../general/ListView.js"; +import {MemberTileView} from "./MemberTileView.js"; + +export class MemberListView extends TemplateView { + render(t, vm) { + return t.view(new ListView({list: vm.memberTileViewModels}, tileViewModel => new MemberTileView(tileViewModel))); + } +} diff --git a/src/platform/web/ui/session/rightpanel/MemberTileView.js b/src/platform/web/ui/session/rightpanel/MemberTileView.js new file mode 100644 index 00000000..e4b010a4 --- /dev/null +++ b/src/platform/web/ui/session/rightpanel/MemberTileView.js @@ -0,0 +1,7 @@ +import {TemplateView} from "../../general/TemplateView.js"; + +export class MemberTileView extends TemplateView { + render(t, vm) { + return t.div(vm.displayName); + } +}