use urls instead of callbacks to navigate in session picker
This commit is contained in:
Bruno Windels
parent
7b86b483ed
commit
35e85c55e0
2 changed files with 18 additions and 49 deletions
|
|
@ -15,15 +15,14 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import {SortedArray} from "../observable/index.js";
|
||||
import {SessionLoadViewModel} from "./SessionLoadViewModel.js";
|
||||
import {ViewModel} from "./ViewModel.js";
|
||||
import {avatarInitials, getIdentifierColorNumber} from "./avatar.js";
|
||||
|
||||
class SessionItemViewModel extends ViewModel {
|
||||
constructor(sessionInfo, pickerVM) {
|
||||
super({});
|
||||
constructor(options, pickerVM) {
|
||||
super(options);
|
||||
this._pickerVM = pickerVM;
|
||||
this._sessionInfo = sessionInfo;
|
||||
this._sessionInfo = options.sessionInfo;
|
||||
this._isDeleting = false;
|
||||
this._isClearing = false;
|
||||
this._error = null;
|
||||
|
|
@ -76,6 +75,10 @@ class SessionItemViewModel extends ViewModel {
|
|||
return this._sessionInfo.id;
|
||||
}
|
||||
|
||||
get openUrl() {
|
||||
return this.urlRouter.urlForSegment("session", this.id);
|
||||
}
|
||||
|
||||
get label() {
|
||||
const {userId, comment} = this._sessionInfo;
|
||||
if (comment) {
|
||||
|
|
@ -127,11 +130,10 @@ class SessionItemViewModel extends ViewModel {
|
|||
export class SessionPickerViewModel extends ViewModel {
|
||||
constructor(options) {
|
||||
super(options);
|
||||
const {storageFactory, sessionInfoStorage, sessionCallback, createSessionContainer} = options;
|
||||
const {storageFactory, sessionInfoStorage, sessionInfoCallback} = options;
|
||||
this._storageFactory = storageFactory;
|
||||
this._sessionInfoStorage = sessionInfoStorage;
|
||||
this._sessionCallback = sessionCallback;
|
||||
this._createSessionContainer = createSessionContainer;
|
||||
this._sessionInfoCallback = sessionInfoCallback;
|
||||
this._sessions = new SortedArray((s1, s2) => s1.id.localeCompare(s2.id));
|
||||
this._loadViewModel = null;
|
||||
this._error = null;
|
||||
|
|
@ -140,7 +142,9 @@ export class SessionPickerViewModel extends ViewModel {
|
|||
// this loads all the sessions
|
||||
async load() {
|
||||
const sessions = await this._sessionInfoStorage.getAll();
|
||||
this._sessions.setManyUnsorted(sessions.map(s => new SessionItemViewModel(s, this)));
|
||||
this._sessions.setManyUnsorted(sessions.map(s => {
|
||||
return new SessionItemViewModel(this.childOptions({sessionInfo: s}), this);
|
||||
}));
|
||||
}
|
||||
|
||||
// for the loading of 1 picked session
|
||||
|
|
@ -148,34 +152,6 @@ export class SessionPickerViewModel extends ViewModel {
|
|||
return this._loadViewModel;
|
||||
}
|
||||
|
||||
async pick(id) {
|
||||
if (this._loadViewModel) {
|
||||
return;
|
||||
}
|
||||
const sessionVM = this._sessions.array.find(s => s.id === id);
|
||||
if (sessionVM) {
|
||||
this._loadViewModel = new SessionLoadViewModel({
|
||||
createAndStartSessionContainer: () => {
|
||||
const sessionContainer = this._createSessionContainer();
|
||||
sessionContainer.startWithExistingSession(sessionVM.id);
|
||||
return sessionContainer;
|
||||
},
|
||||
sessionCallback: sessionContainer => {
|
||||
if (sessionContainer) {
|
||||
// make parent view model move away
|
||||
this._sessionCallback(sessionContainer);
|
||||
} else {
|
||||
// show list of session again
|
||||
this._loadViewModel = null;
|
||||
this.emitChange("loadViewModel");
|
||||
}
|
||||
}
|
||||
});
|
||||
this._loadViewModel.start();
|
||||
this.emitChange("loadViewModel");
|
||||
}
|
||||
}
|
||||
|
||||
async _exportData(id) {
|
||||
const sessionInfo = await this._sessionInfoStorage.get(id);
|
||||
const stores = await this._storageFactory.export(id);
|
||||
|
|
@ -213,9 +189,7 @@ export class SessionPickerViewModel extends ViewModel {
|
|||
return this._sessions;
|
||||
}
|
||||
|
||||
cancel() {
|
||||
if (!this._loadViewModel) {
|
||||
this._sessionCallback();
|
||||
}
|
||||
get cancelUrl() {
|
||||
return this.urlRouter.urlForSegment("login");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ class SessionPickerItemView extends TemplateView {
|
|||
}));
|
||||
const errorMessage = t.if(vm => vm.error, t.createTemplate(t => t.p({className: "error"}, vm => vm.error)));
|
||||
return t.li([
|
||||
t.div({className: "session-info"}, [
|
||||
t.a({className: "session-info", href: vm.openUrl}, [
|
||||
t.div({className: `avatar usercolor${vm.avatarColorNumber}`}, vm => vm.avatarInitials),
|
||||
t.div({className: "user-id"}, vm => vm.label),
|
||||
]),
|
||||
|
|
@ -98,11 +98,6 @@ export class SessionPickerView extends TemplateView {
|
|||
render(t, vm) {
|
||||
const sessionList = new ListView({
|
||||
list: vm.sessions,
|
||||
onItemClick: (item, event) => {
|
||||
if (event.target.closest(".session-info")) {
|
||||
vm.pick(item.value.id);
|
||||
}
|
||||
},
|
||||
parentProvidesUpdates: false,
|
||||
}, sessionInfo => {
|
||||
return new SessionPickerItemView(sessionInfo);
|
||||
|
|
@ -118,9 +113,9 @@ export class SessionPickerView extends TemplateView {
|
|||
className: "styled secondary",
|
||||
onClick: async () => vm.import(await selectFileAsText("application/json"))
|
||||
}, vm.i18n`Import a session`),
|
||||
t.button({
|
||||
className: "styled primary",
|
||||
onClick: () => vm.cancel()
|
||||
t.a({
|
||||
className: "button styled primary",
|
||||
href: vm.cancelUrl
|
||||
}, vm.i18n`Sign In`)
|
||||
]),
|
||||
t.if(vm => vm.loadViewModel, vm => new SessionLoadStatusView(vm.loadViewModel)),
|
||||
|
|
|
|||
Reference in a new issue