diff --git a/src/options/App.vue b/src/options/App.vue index 6fdda5c..3523a4b 100644 --- a/src/options/App.vue +++ b/src/options/App.vue @@ -5,13 +5,19 @@ :selectedHost="selectedHost" :selectedHostOption="selectedHostOption" :isAddHost="isAddHost" + :isBackupMode="isBackupMode" + :isRestoreMode="isRestoreMode" @select-host="selectHost" @select-host-option="selectHostOption" @select-add-host="selectAddHost" + @select-backup-mode="selectBackupMode" + @select-restore-mode="selectRestoreMode" />
+ + @@ -28,6 +34,8 @@ import NewHost from './NewHost'; import EditHost from './EditHost'; import LocalCommands from './LocalCommands'; import RemoteCommands from './RemoteCommands'; +import Backup from './Backup'; +import Restore from './Restore'; import Run from './Run'; export default { @@ -39,6 +47,8 @@ export default { EditHost, LocalCommands, RemoteCommands, + Backup, + Restore, Run, }, @@ -47,6 +57,8 @@ export default { selectedHost: -1, selectedHostOption: null, isAddHost: false, + isBackupMode: false, + isRestoreMode: false, }; }, @@ -64,6 +76,20 @@ export default { selectAddHost() { this.selectedHost = -1; this.isAddHost = true; + this.isBackupMode = false; + this.isRestoreMode = false; + }, + + selectBackupMode() { + this.isAddHost = false; + this.isBackupMode = true; + this.isRestoreMode = false; + }, + + selectRestoreMode() { + this.isAddHost = false; + this.isBackupMode = false; + this.isRestoreMode = true; }, async addHost(form) { @@ -83,7 +109,7 @@ export default { } this.hosts.push(host); - await this.saveHosts(); + await this.saveHosts(this.hosts); this.selectedHost = this.hosts.length - 1; this.isAddHost = false; } finally { @@ -134,7 +160,10 @@ export default { }, created() { - this.loadHosts(); + const self = this; + this.loadHosts().then(hosts => { + self.hosts = hosts; + }); }, }; diff --git a/src/options/Autocomplete.vue b/src/options/Autocomplete.vue index 2c0b86d..0b0d4ec 100644 --- a/src/options/Autocomplete.vue +++ b/src/options/Autocomplete.vue @@ -72,23 +72,49 @@ export default { }, onKeyDown(event) { - if (event.key === 'Enter') { - this.showItems = false; - if (!this.$refs.items) { - return; + if (!this.$refs.items) { + return; + } + + const selected = this.$refs.items.querySelector('.selected'); + if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') { + switch (event.key) { + case 'Enter': + case ' ': + this.showItems = false; + if (!selected) { + return; + } + + this.$refs.input.value = selected.innerText; + this.$emit('change', selected.innerText); + break; + + case 'Tab': + this.selectNext(); + break; } - const selected = this.$refs.items.querySelector('.selected'); - if (!selected) { - return; - } - - this.$refs.input.value = selected.innerText; - this.$emit('change', selected.innerText); event.preventDefault(); } }, + selectPrev() { + if (this.selectedItem > 0) { + this.selectedItem--; + } else { + this.selectedItem = this.filteredItems.length - 1; + } + }, + + selectNext() { + if (this.selectedItem >= this.filteredItems.length - 1) { + this.selectedItem = this.filteredItems.length ? 0 : -1; + } else { + this.selectedItem++; + } + }, + onKeyUp(event) { if (event.key === 'Escape') { this.showItems = false; @@ -100,19 +126,10 @@ export default { if (['ArrowUp', 'ArrowDown'].indexOf(event.key) >= 0) { switch (event.key) { case 'ArrowUp': - if (this.selectedItem > 0) { - this.selectedItem--; - } else { - this.selectedItem = this.filteredItems.length - 1; - } + this.selectPrev(); break; - case 'ArrowDown': - if (this.selectedItem >= this.filteredItems.length - 1) { - this.selectedItem = this.filteredItems.length ? 0 : -1; - } else { - this.selectedItem++; - } + this.selectNext(); break; } diff --git a/src/options/Backup.vue b/src/options/Backup.vue new file mode 100644 index 0000000..a414929 --- /dev/null +++ b/src/options/Backup.vue @@ -0,0 +1,32 @@ +