diff --git a/src/renderer/components/backup-selector/backup-list-item/backup-list-item.html b/src/renderer/components/backup-selector/backup-list-item/backup-list-item.html
new file mode 100644
index 0000000..f67230b
--- /dev/null
+++ b/src/renderer/components/backup-selector/backup-list-item/backup-list-item.html
@@ -0,0 +1,20 @@
+
No backups found
-
-
-
- {{ option.displayedTime }}
-
-
-
-
+ @view="viewBackup(option.backup)"
+ :selected="option.selected"
+ :time="option.displayedTime"
+ >
diff --git a/src/renderer/components/backup-selector/backup-selector.js b/src/renderer/components/backup-selector/backup-selector.js
index 499e4f7..7de44d9 100644
--- a/src/renderer/components/backup-selector/backup-selector.js
+++ b/src/renderer/components/backup-selector/backup-selector.js
@@ -1,38 +1,30 @@
import { format } from 'date-fns';
import ChangeHistoryDialog from '../change-history-dialog/change-history-dialog';
+import BackupListItem from './backup-list-item/backup-list-item';
export default {
name: 'backup-selector',
template: require('./backup-selector.html'),
- components: { ChangeHistoryDialog },
+ components: {
+ BackupListItem,
+ ChangeHistoryDialog
+ },
props: {
backups: Array,
selectedTime: String,
disabled: Boolean
},
- data: () => ({
- hoveredOptionId: ''
- }),
computed: {
- availableBackupTimes() {
- return this.backups.map(backup => backup.backupTime);
- },
options() {
return this.backups.map(backup => ({
backup,
id: backup.backupTime,
- displayedTime: format(new Date(backup.backupTime), 'yyyy-MM-dd HH:mm:SS'),
+ displayedTime: format(new Date(backup.backupTime), 'yyyy-MM-dd HH:mm:ss'),
selected: backup.backupTime === this.selectedTime
}));
}
},
methods: {
- mouseEnterItem(id) {
- this.hoveredOptionId = id;
- },
- mouseLeaveItem() {
- this.hoveredOptionId = '';
- },
selectBackup(backup) {
this.$emit('input', backup);
},
diff --git a/src/renderer/components/backup-selector/backup-selector.spec.js b/src/renderer/components/backup-selector/backup-selector.spec.js
index 75b9c5f..0d4c892 100644
--- a/src/renderer/components/backup-selector/backup-selector.spec.js
+++ b/src/renderer/components/backup-selector/backup-selector.spec.js
@@ -21,13 +21,13 @@ describe('BackupSelector', () => {
expect(vm.options).to.eql([
{
id: '2020-12-24T18:00:00.000Z',
- displayedTime: format(new Date('2020-12-24T18:00:00.000Z'), 'yyyy-MM-dd HH:mm:SS'),
+ displayedTime: format(new Date('2020-12-24T18:00:00.000Z'), 'yyyy-MM-dd HH:mm:ss'),
selected: true,
backup: backups[0]
},
{
id: '2020-12-24T20:00:00.000Z',
- displayedTime: format(new Date('2020-12-24T20:00:00.000Z'), 'yyyy-MM-dd HH:mm:SS'),
+ displayedTime: format(new Date('2020-12-24T20:00:00.000Z'), 'yyyy-MM-dd HH:mm:ss'),
selected: false,
backup: backups[1]
}