diff --git a/app/assets/javascripts/directives/views/historyMenu.ts b/app/assets/javascripts/directives/views/historyMenu.ts index 762791070..7e96d7637 100644 --- a/app/assets/javascripts/directives/views/historyMenu.ts +++ b/app/assets/javascripts/directives/views/historyMenu.ts @@ -1,71 +1,64 @@ import { WebDirective } from '../../types'; import { WebApplication } from '@/ui_models/application'; import template from '%/directives/history-menu.pug'; -import { SNItem, ItemHistoryEntry } from '@standardnotes/snjs'; +import { HistoryEntry, SNItem } from '@standardnotes/snjs'; import { PureViewCtrl } from '@/views'; -import { ItemSessionHistory } from '@standardnotes/snjs'; import { RevisionListEntry, SingleRevision } from '@standardnotes/snjs'; -import { confirmDialog } from '@/services/alertService'; +import { alertDialog, confirmDialog } from '@/services/alertService'; type HistoryState = { - fetchingRemoteHistory: boolean -} + sessionHistory?: HistoryEntry[]; + remoteHistory?: RevisionListEntry[]; + fetchingRemoteHistory: boolean; + autoOptimize: boolean; + diskEnabled: boolean; +}; -interface HistoryScope { - application: WebApplication - item: SNItem -} +class HistoryMenuCtrl extends PureViewCtrl { + application!: WebApplication; + item!: SNItem; -class HistoryMenuCtrl extends PureViewCtrl implements HistoryScope { - - diskEnabled = false - autoOptimize = false - application!: WebApplication - item!: SNItem - sessionHistory?: ItemSessionHistory - remoteHistory?: RevisionListEntry[] + /** @template */ + showSessionOptions = false; /* @ngInject */ - constructor( - $timeout: ng.ITimeoutService - ) { + constructor($timeout: ng.ITimeoutService) { super($timeout); - this.state = { - fetchingRemoteHistory: false + } + + getInitialState() { + return { + fetchingRemoteHistory: false, + autoOptimize: this.application.historyManager.autoOptimize, + diskEnabled: this.application.historyManager.isDiskEnabled(), }; } + reloadState() { + this.setState({ + ...this.getInitialState(), + fetchingRemoteHistory: this.state.fetchingRemoteHistory, + }); + } + $onInit() { super.$onInit(); - this.reloadSessionHistory(); this.fetchRemoteHistory(); - this.diskEnabled = this.application.historyManager!.isDiskEnabled(); - this.autoOptimize = this.application.historyManager!.isAutoOptimizeEnabled(); - } - - reloadSessionHistory() { - this.sessionHistory = this.application.historyManager!.sessionHistoryForItem(this.item); - } - - get isfetchingRemoteHistory() { - return this.state.fetchingRemoteHistory; - } - - set fetchingRemoteHistory(value: boolean) { - this.setState({ - fetchingRemoteHistory: value - }); } async fetchRemoteHistory() { - this.fetchingRemoteHistory = true; - this.remoteHistory = await this.application.historyManager!.remoteHistoryForItem(this.item) - .finally(() => { - this.fetchingRemoteHistory = false; - }); + this.setState({ fetchingRemoteHistory: true }); + try { + const remoteHistory = await this.application.historyManager.remoteHistoryForItem( + this.item + ); + this.setState({ remoteHistory }); + } finally { + this.setState({ fetchingRemoteHistory: false }); + } } - async openSessionRevision(revision: ItemHistoryEntry) { + async openSessionRevision(revision: HistoryEntry) { this.application.presentRevisionPreviewModal( revision.payload.uuid, revision.payload.content @@ -73,11 +66,17 @@ class HistoryMenuCtrl extends PureViewCtrl implements His } async openRemoteRevision(revision: RevisionListEntry) { - this.fetchingRemoteHistory = true; - const remoteRevision = await this.application.historyManager!.fetchRemoteRevision(this.item.uuid, revision); - this.fetchingRemoteHistory = false; + this.setState({ fetchingRemoteHistory: true }); + const remoteRevision = await this.application.historyManager.fetchRemoteRevision( + this.item.uuid, + revision + ); + this.setState({ fetchingRemoteHistory: false }); if (!remoteRevision) { - this.application.alertService!.alert("The remote revision could not be loaded. Please try again later."); + alertDialog({ + text: + 'The remote revision could not be loaded. Please try again later.', + }); return; } this.application.presentRevisionPreviewModal( @@ -86,7 +85,7 @@ class HistoryMenuCtrl extends PureViewCtrl implements His ); } - classForSessionRevision(revision: ItemHistoryEntry) { + classForSessionRevision(revision: HistoryEntry) { const vector = revision.operationVector(); if (vector === 0) { return 'default'; @@ -97,81 +96,63 @@ class HistoryMenuCtrl extends PureViewCtrl implements His } } - clearItemSessionHistory() { - confirmDialog({ - text: "Are you sure you want to delete the local session history for this note?", - confirmButtonStyle: "danger" - }).then((confirmed) => { - if (!confirmed) { - return; - } - this.application.historyManager!.clearHistoryForItem(this.item).then(() => { - this.$timeout(() => { - this.reloadSessionHistory(); - }); - }); - }); - } - - clearAllSessionHistory() { - confirmDialog({ - text: "Are you sure you want to delete the local session history for all notes?", - confirmButtonStyle: "danger" - }).then((confirmed) => { - if (!confirmed) { - return; - } - this.application.historyManager!.clearAllHistory().then(() => { - this.$timeout(() => { - this.reloadSessionHistory(); - }); - }); - }); - } - - get sessionHistoryEntries() { - return this.sessionHistory?.entries; - } - - get remoteHistoryEntries() { - return this.remoteHistory; - } - - toggleSessionHistoryDiskSaving() { - const run = () => { - this.application.historyManager!.toggleDiskSaving().then(() => { - this.$timeout(() => { - this.diskEnabled = this.application.historyManager!.isDiskEnabled(); - }); - }); - }; - if (!this.application.historyManager!.isDiskEnabled()) { - confirmDialog({ - text: "Are you sure you want to save history to disk? This will decrease general " + - "performance, especially as you type. You are advised to disable this feature " + - "if you experience any lagging.", - confirmButtonStyle: "danger" - }).then((confirmed) => { - if (confirmed) { - run(); - } - }); - } else { - run(); + async clearItemSessionHistory() { + if ( + await confirmDialog({ + text: + 'Are you sure you want to delete the local session history for this note?', + confirmButtonStyle: 'danger', + }) + ) { + this.application.historyManager.clearHistoryForItem(this.item); + this.reloadState(); } } + async clearAllSessionHistory() { + if ( + await confirmDialog({ + text: + 'Are you sure you want to delete the local session history for all notes?', + confirmButtonStyle: 'danger', + }) + ) { + await this.application.historyManager.clearAllHistory(); + this.reloadState(); + } + } + + /** @entries */ + get sessionHistoryEntries() { + return this.state.sessionHistory?.entries; + } + + async toggleSessionHistoryDiskSaving() { + if (!this.state.diskEnabled) { + if ( + await confirmDialog({ + text: + 'Are you sure you want to save history to disk? This will decrease general ' + + 'performance, especially as you type. You are advised to disable this feature ' + + 'if you experience any lagging.', + confirmButtonStyle: 'danger', + }) + ) { + this.application.historyManager.toggleDiskSaving(); + } + } else { + this.application.historyManager.toggleDiskSaving(); + } + this.reloadState(); + } + toggleSessionHistoryAutoOptimize() { - this.application.historyManager!.toggleAutoOptimize().then(() => { - this.$timeout(() => { - this.autoOptimize = this.application.historyManager!.autoOptimize; - }); - }); + this.application.historyManager.toggleAutoOptimize(); + this.reloadState(); } previewRemoteHistoryTitle(revision: SingleRevision) { - const createdAt = revision.created_at!; - return new Date(createdAt).toLocaleString(); + return new Date(revision.created_at).toLocaleString(); } } @@ -185,7 +166,7 @@ export class HistoryMenu extends WebDirective { this.bindToController = true; this.scope = { item: '=', - application: '=' + application: '=', }; } } diff --git a/app/assets/templates/directives/history-menu.pug b/app/assets/templates/directives/history-menu.pug index b45f8ed81..15e88d5f1 100644 --- a/app/assets/templates/directives/history-menu.pug +++ b/app/assets/templates/directives/history-menu.pug @@ -17,12 +17,12 @@ ) menu-row( action='ctrl.toggleSessionHistoryAutoOptimize()' - label="(ctrl.autoOptimize ? 'Disable' : 'Enable') + ' auto cleanup'") + label="(ctrl.state.autoOptimize ? 'Disable' : 'Enable') + ' auto cleanup'") .sk-sublabel | Automatically cleans up small revisions to conserve space. menu-row( action='ctrl.toggleSessionHistoryDiskSaving()' - label="(ctrl.diskEnabled ? 'Disable' : 'Enable') + ' saving history to disk'" + label="(ctrl.state.diskEnabled ? 'Disable' : 'Enable') + ' saving history to disk'" ) .sk-sublabel | Saving to disk is not recommended. Decreases performance and increases app @@ -49,7 +49,7 @@ .sk-sublabel | Fetch history from server. menu-row( - ng-repeat='revision in ctrl.remoteHistoryEntries track by $index' + ng-repeat='revision in ctrl.remoteHistory track by $index' action='ctrl.openRemoteRevision(revision);' label='ctrl.previewRemoteHistoryTitle(revision);' )