Skip to content

Commit

Permalink
dev / UI: notifications: refactor and improve consistency
Browse files Browse the repository at this point in the history
  • Loading branch information
aleksey-hoffman committed Sep 4, 2021
1 parent 402857f commit 7802ac8
Show file tree
Hide file tree
Showing 4 changed files with 186 additions and 36 deletions.
1 change: 1 addition & 0 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -334,6 +334,7 @@ export default {
this.$eventHub.$emit('notification', {
action: 'add',
hashID,
colorStatus: 'red',
timeout: 0,
closeButton: true,
icon: 'mdi-alert-octagon-outline',
Expand Down
6 changes: 4 additions & 2 deletions src/components/Dialogs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2676,9 +2676,10 @@ export default {
this.dialogs.workspaceEditorDialog.data.selected = items.find(item => item.isTemplate)
this.$eventHub.$emit('notification', {
action: 'add',
colorStatus: 'green',
timeout: 3000,
closeButton: true,
title: 'Success | workspace changes were saved'
title: 'Workspace changes were saved'
})
}
this.closeDialog('workspaceEditorDialog')
Expand All @@ -2702,9 +2703,10 @@ export default {
})
this.$eventHub.$emit('notification', {
action: 'add',
colorStatus: 'green',
timeout: 3000,
closeButton: true,
title: 'Success | workspace was deleted',
title: 'Workspace was deleted',
message: item.name
})
},
Expand Down
63 changes: 29 additions & 34 deletions src/store.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import TimeUtils from './utils/timeUtils.js'
import * as fsManager from './utils/fsManager'
import { getField, updateField } from 'vuex-map-fields'
import {readFile, readFileSync, writeFile, writeFileSync} from 'atomically'

import Notification from './utils/notifications.js'
const electron = require('electron')
const electronRemote = require('@electron/remote')
const fsExtra = require('fs-extra')
Expand Down Expand Up @@ -2289,7 +2289,7 @@ export default new Vuex.Store({
progress.eta = 0
notificationData.timeout = 5000
notificationData.title = status.isCanceled ? 'Download canceled' : 'Download failed'
notificationData.message = error
notificationData.message = status.isCanceled ? undefined : error
notificationData.actionButtons = []
eventHub.$emit('notification', notificationData)
return
Expand Down Expand Up @@ -3860,8 +3860,9 @@ export default new Vuex.Store({
action: 'update-by-type',
type: 'successItemsDeleted',
icon: 'mdi-tab',
colorStatus: 'green',
timeout: 3000,
title: `Success | deleted ${params.items.length} ${localizeUtils.pluralize(params.items.length, 'item')}`
title: `Deleted ${params.items.length} ${localizeUtils.pluralize(params.items.length, 'item')}`
})
}
})
Expand All @@ -3872,8 +3873,9 @@ export default new Vuex.Store({
action: 'update-by-type',
type: 'successItemsDeleted',
icon: 'mdi-tab',
colorStatus: 'red',
timeout: 3000,
title: `Failure | some items were not deleted`,
title: `Failed to delete some items`,
message: error
})
}
Expand Down Expand Up @@ -4912,12 +4914,11 @@ export default new Vuex.Store({
onClick: () => {
fs.promises.rename(newPath, oldPath)
.then(() => {
eventHub.$emit('notification', {
action: 'add',
timeout: 5000,
closeButton: true,
title: 'Success: undo rename',
message: oldPath
new Notification({
name: 'renameSuccess',
props: {
message: oldPath
}
})
})
.catch((error) => {
Expand All @@ -4933,36 +4934,30 @@ export default new Vuex.Store({
})
.catch((error) => {
if (error.code === 'ENOENT') {
eventHub.$emit('notification', {
action: 'add',
timeout: 5000,
closeButton: true,
title: 'Failure: cannot rename item',
message: 'File / directory that you are renaming no longer exists'
new Notification({
name: 'renameFailedNoLongerExists',
format: {
oldPath
}
})
}
else {
eventHub.$emit('notification', {
action: 'add',
timeout: 5000,
closeButton: true,
title: 'Failure: cannot rename item',
message: `Error: ${error}`
new Notification({
name: 'renameFailedError',
format: {
error
}
})
}
})
}
// If path already exists, do not rename
else {
eventHub.$emit('notification', {
action: 'add',
timeout: 3000,
closeButton: true,
title: 'Failure: cannot rename item',
message: `
Item with that name already exists
<br>${newName}
`
}
// If path already exists, do not rename
else {
new Notification({
name: 'renameFailedAlreadyExists',
format: {
newName
}
})
}
})
Expand Down
152 changes: 152 additions & 0 deletions src/utils/notifications.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
// SPDX-License-Identifier: GPL-3.0-or-later
// License: GNU GPLv3 or later. See the license file in the project root for more information.
// Copyright © 2021 - present Aleksey Hoffman. All rights reserved.

import utils from './sharedUtils.js'
import localizeUtils from './localizeUtils.js'
const eventHub = require('./eventHub').eventHub

class Notification {
constructor (params) {
this.notifications = {
copyDirItemsInProgress: {
action: 'update-by-hash',
hashID: utils.getHash(),
type: 'dir-item-transfer',
icon: 'mdi-progress-clock',
colorStatus: 'blue',
closeButton: true,
timeout: 0,
title: 'In progress: copying items'
},
copyDirItemsSuccess: {
action: 'update-by-hash',
hashID: utils.getHash(),
type: 'dir-item-transfer',
colorStatus: 'green',
icon: '',
closeButton: true,
timeout: 3000,
title: 'Copied {{items}}'
},
moveDirItemsInProgress: {
action: 'update-by-hash',
hashID: utils.getHash(),
type: 'dir-item-transfer',
icon: 'mdi-progress-clock',
colorStatus: 'blue',
closeButton: true,
timeout: 0,
title: 'In progress: moving items'
},
moveDirItemsSuccess: {
action: 'update-by-hash',
hashID: utils.getHash(),
type: 'dir-item-transfer',
colorStatus: 'green',
icon: '',
closeButton: true,
timeout: 3000,
title: 'Moved {{items}}'
},
transferDirItemsError: {
action: 'update-by-hash',
hashID: utils.getHash(),
type: 'dir-item-transfer',
icon: 'mdi-progress-close',
colorStatus: 'red',
closeButton: true,
timeout: 5000,
title: 'Error during transfer'
},
renameFailedNoLongerExists: {
action: 'add',
colorStatus: 'red',
timeout: 6000,
closeButton: true,
title: 'Failed to rename item',
message: `
File / directory that you are renaming no longer exists:
<br><b>Path:</b> {{oldPath}}
`
},
renameFailedError: {
action: 'add',
colorStatus: 'red',
timeout: 6000,
closeButton: true,
title: 'Failed to rename item',
message: `<b>Error:</b> {{error}}`
},
renameFailedAlreadyExists: {
action: 'add',
colorStatus: 'red',
timeout: 5000,
closeButton: true,
title: 'Failed to rename item',
message: `
Item with that name already exists:
<br>{{newName}}
`
},
renameSuccess: {
action: 'add',
colorStatus: 'green',
timeout: 3000,
closeButton: true,
title: 'Rename undone',
message: ''
},
}

this.data = this.notifications[params.name]
if (params.format) {
this.update(params)
}
else {
eventHub.$emit('notification', this.data)
}
}

update (params) {
let newNotification = this.notifications[params.name]
for (const [key, value] of Object.entries(newNotification)) {
if (!['hashID', 'id'].includes(key)) {
this.data[key] = value
this._formatProp({key, value, params})
}
}
if (params.error) {
this.data.message = `
<b>Error:</b><br>${params.error}
`
}
if (params.props) {
for (const [key, value] of Object.entries(params.props)) {
this.data[key] = value
}
}
eventHub.$emit('notification', this.data)
}

hide () {
this.data.action = 'hide'
eventHub.$emit('notification', this.data)
}

_formatProp (scope1Params) {
if (scope1Params.params.format) {
if (typeof scope1Params.value === 'string') {
for (const [formatKey, formatValue] of Object.entries(scope1Params.params.format)) {
let formattedText = formatValue
if (formatKey === 'items') {
formattedText = `${formatValue} ${localizeUtils.pluralize(formatValue, 'item')}`
}
this.data[scope1Params.key] = scope1Params.value.replace(`{{${formatKey}}}`, formattedText)
}
}
}
}
}

export default Notification

0 comments on commit 7802ac8

Please sign in to comment.