archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-17 18:32:35 +00:00
Code Issues Projects Releases Wiki Activity

Resolve "Rename notifications to toasts"

Browse source
This commit is contained in:
Davide Silvestri 2023-06-28 16:31:32 +00:00
parent 4d2f1936b1
commit b074d2e1cc
59 changed files with 378 additions and 395 deletions

2
web-frontend/modules/builder/applicationTypes.js
View file

@ -54,7 +54,7 @@ export class BuilderApplicationType extends ApplicationType {
)
return true
} else {
$store.dispatch('notification/error', {
$store.dispatch('toast/error', {
title: $i18n.t('applicationType.cantSelectPageTitle'),
message: $i18n.t('applicationType.cantSelectPageDescription'),
})

4
web-frontend/modules/builder/jobTypes.js
View file

@ -27,7 +27,7 @@ export class DuplicatePageJobType extends JobType {
const { i18n, store } = this.app
store.dispatch(
'notification/error',
'toast/error',
{
title: i18n.t('clientHandler.notCompletedTitle'),
message: i18n.t('clientHandler.notCompletedDescription'),
@ -48,7 +48,7 @@ export class DuplicatePageJobType extends JobType {
page: duplicatedPage,
})
store.dispatch('notification/info', {
store.dispatch('toast/info', {
title: i18n.t('duplicatePageJobType.duplicatedTitle'),
message: duplicatedPage.name,
})

2
web-frontend/modules/core/assets/scss/components/all.scss
View file

@ -60,7 +60,7 @@
@import 'array_field';
@import 'views/form';
@import 'loading';
@import 'notifications';
@import 'toast';
@import 'dashboard';
@import 'placeholder';
@import 'style_guide';

12
web-frontend/modules/core/assets/scss/components/notifications.scss → web-frontend/modules/core/assets/scss/components/toast.scss
View file

@ -1,26 +1,26 @@
.top-right-notifications {
.toast__top-right {
position: fixed;
top: 0;
right: 30px;
width: 320px;
z-index: $z-index-notifications;
z-index: $z-index-toasts;
}
.bottom-right-notifications {
.toast__bottom-right {
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
position: fixed;
bottom: 0;
right: 30px;
z-index: $z-index-notifications;
z-index: $z-index-toasts;
}
.undo-delete-notification {
.toast__undo-delete {
margin: 5px;
box-shadow: $color-primary-200;
&.undo-delete-notification--pulsing {
&.toast__undo-delete--pulsing {
animation: pulse 1s 2;
}
}

4
web-frontend/modules/core/assets/scss/variables.scss
View file

@ -77,9 +77,9 @@ $z-index-context: 7 !default;
// and contexts.
$z-index-tooltip: 8 !default;
// The notifications will be on top of anything else, because the message is temporary
// The toasts will be on top of anything else, because the message is temporary
// and must always be visible.
$z-index-notifications: 9 !default;
$z-index-toasts: 9 !default;
// normalize overrides
$base-font-family: $text-font-stack !default;

6
web-frontend/modules/core/components/DefaultErrorPage.vue
View file

@ -81,14 +81,14 @@ export default {
}),
},
created() {
const showSessionExpiredNotification =
const showSessionExpiredToast =
this.$store.getters['auth/isUserSessionExpired']
if (showSessionExpiredNotification) {
if (showSessionExpiredToast) {
this.redirecting = true
logoutAndRedirectToLogin(
this.$router,
this.$store,
showSessionExpiredNotification
showSessionExpiredToast
)
}
},

4
web-frontend/modules/core/components/files/UploadFileDropzone.vue
View file

@ -77,7 +77,7 @@ export default {
const files = [...getFilesFromEvent(event)]
if (!this.multipleFiles && files.length > 1) {
return this.$store.dispatch('notification/error', {
return this.$store.dispatch('toast/error', {
title: this.$t('uploadFileDropzone.errorTooManyFilesTitle'),
message: this.$t('uploadFileDropzone.errorTooManyFilesMessage'),
})
@ -89,7 +89,7 @@ export default {
files.forEach((file) => {
if (!this.fileTypesAcceptable.includes(file.type)) {
hasInvalidFile = true
this.$store.dispatch('notification/error', {
this.$store.dispatch('toast/error', {
title: this.$t('uploadFileDropzone.errorWrongFileTypeTitle'),
message: this.$t('uploadFileDropzone.errorWrongFileTypeMessage', {
type: file.type,

11
web-frontend/modules/core/components/notifications/ClearingNotification.vue
View file

@ -1,11 +0,0 @@
<template>
<Alert loading simple shadow :title="$t('clearingNotification.title')">
{{ $t('clearingNotification.content') }}
</Alert>
</template>
<script>
export default {
name: 'ClearingNotification',
}
</script>

11
web-frontend/modules/core/components/notifications/ConnectingNotification.vue
View file

@ -1,11 +0,0 @@
<template>
<Alert loading shadow simple :title="$t('connectingNotification.title')"
>{{ $t('connectingNotification.content') }}
</Alert>
</template>
<script>
export default {
name: 'ConnectingNotification',
}
</script>

11
web-frontend/modules/core/components/notifications/CopyingNotification.vue
View file

@ -1,11 +0,0 @@
<template>
<Alert loading simple shadow :title="$t('copyingNotification.title')">
{{ $t('copyingNotification.content') }}
</Alert>
</template>
<script>
export default {
name: 'CopyingNotification',
}
</script>

35
web-frontend/modules/core/components/notifications/Notification.vue
View file

@ -1,35 +0,0 @@
<template>
<Alert
simple
shadow
close-button
icon="exclamation"
:type="notification.type"
:title="notification.title"
@close="close(notification)"
>
{{ notification.message }}
</Alert>
</template>
<script>
export default {
name: 'Notification',
props: {
notification: {
type: Object,
required: true,
},
},
mounted() {
setTimeout(() => {
this.close(this.notification)
}, 5000)
},
methods: {
close(notification) {
this.$store.dispatch('notification/remove', notification)
},
},
}
</script>

101
web-frontend/modules/core/components/notifications/Notifications.vue
View file

@ -1,101 +0,0 @@
<template>
<div class="notifications">
<div class="top-right-notifications">
<PermissionsUpdatedNotification v-if="permissionsUpdated" />
<ConnectingNotification v-if="connecting"></ConnectingNotification>
<UserSessionExpiredNotification
v-if="isUserSessionExpired"
></UserSessionExpiredNotification>
<FailedConnectingNotification
v-if="failedConnecting"
></FailedConnectingNotification>
<AuthorizationErrorNotification
v-if="unauthorized"
></AuthorizationErrorNotification>
<Notification
v-for="notification in normalNotifications"
:key="notification.id"
:notification="notification"
></Notification>
</div>
<div class="bottom-right-notifications">
<UndoRedoNotification
v-if="undoRedoIsNotHidden"
:state="undoRedoState"
></UndoRedoNotification>
<CopyingNotification v-if="copying"></CopyingNotification>
<PastingNotification v-if="pasting"></PastingNotification>
<ClearingNotification v-if="clearing"></ClearingNotification>
<RestoreNotification
v-for="notification in restoreNotifications"
:key="notification.id"
:notification="notification"
></RestoreNotification>
</div>
</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import Notification from '@baserow/modules/core/components/notifications/Notification'
import ConnectingNotification from '@baserow/modules/core/components/notifications/ConnectingNotification'
import FailedConnectingNotification from '@baserow/modules/core/components/notifications/FailedConnectingNotification'
import RestoreNotification from '@baserow/modules/core/components/notifications/RestoreNotification'
import CopyingNotification from '@baserow/modules/core/components/notifications/CopyingNotification'
import PastingNotification from '@baserow/modules/core/components/notifications/PastingNotification'
import ClearingNotification from '@baserow/modules/core/components/notifications/ClearingNotification'
import AuthorizationErrorNotification from '@baserow/modules/core/components/notifications/AuthorizationErrorNotification'
import UserSessionExpiredNotification from '@baserow/modules/core/components/notifications/UserSessionExpiredNotification'
import UndoRedoNotification from '@baserow/modules/core/components/notifications/UndoRedoNotification'
import { UNDO_REDO_STATES } from '@baserow/modules/core/utils/undoRedoConstants'
import PermissionsUpdatedNotification from '@baserow/modules/core/components/notifications/PermissionsUpdatedNotification'
export default {
name: 'Notifications',
components: {
PermissionsUpdatedNotification,
RestoreNotification,
Notification,
ConnectingNotification,
FailedConnectingNotification,
CopyingNotification,
PastingNotification,
ClearingNotification,
AuthorizationErrorNotification,
UndoRedoNotification,
UserSessionExpiredNotification,
},
computed: {
undoRedoIsNotHidden() {
return this.undoRedoState !== UNDO_REDO_STATES.HIDDEN
},
restoreNotifications() {
return this.notifications.filter((n) => n.type === 'restore')
},
normalNotifications() {
return this.notifications.filter((n) => n.type !== 'restore')
},
...mapState({
unauthorized: (state) => state.notification.authorizationError,
connecting: (state) => state.notification.connecting,
failedConnecting: (state) => state.notification.failedConnecting,
copying: (state) => state.notification.copying,
pasting: (state) => state.notification.pasting,
clearing: (state) => state.notification.clearing,
notifications: (state) => state.notification.items,
undoRedoState: (state) => state.notification.undoRedoState,
isUserSessionExpired: (state) => state.notification.userSessionExpired,
permissionsUpdated: (state) => state.notification.permissionsUpdated,
}),
...mapGetters({ isAuthenticated: 'auth/isAuthenticated' }),
},
watch: {
isAuthenticated(value) {
if (!value) {
this.$store.dispatch('notification/userLoggedOut')
}
},
},
}
</script>

11
web-frontend/modules/core/components/notifications/PastingNotification.vue
View file

@ -1,11 +0,0 @@
<template>
<Alert loading simple shadow :title="$t('pastingNotification.title')">
{{ $t('pastingNotification.content') }}
</Alert>
</template>
<script>
export default {
name: 'PastingNotification',
}
</script>

2
web-frontend/modules/core/components/settings/DeleteAccountSettings.vue
View file

@ -132,7 +132,7 @@ export default {
methods: {
logoff() {
logoutAndRedirectToLogin(this.$nuxt.$router, this.$store)
this.$store.dispatch('notification/success', {
this.$store.dispatch('toast/success', {
title: this.$t('deleteAccountSettings.accountDeletedSuccessTitle'),
message: this.$t('deleteAccountSettings.accountDeletedSuccessMessage'),
})

2
web-frontend/modules/core/components/sidebar/SidebarApplication.vue
View file

@ -223,7 +223,7 @@ export default {
try {
await this.$store.dispatch('application/delete', this.application)
await this.$store.dispatch('notification/restore', {
await this.$store.dispatch('toast/restore', {
trash_item_type: 'application',
trash_item_id: this.application.id,
})

8
web-frontend/modules/core/components/notifications/AuthorizationErrorNotification.vue → web-frontend/modules/core/components/toasts/AuthorizationErrorToast.vue
View file

@ -4,21 +4,21 @@
shadow
type="error"
icon="exclamation"
:title="$t('AuthorizationErrorNotification.title')"
:title="$t('authorizationErrorToast.title')"
>
{{ $t('AuthorizationErrorNotification.content') }}
{{ $t('authorizationErrorToast.content') }}
<a
class="button margin-top-1"
:class="{ 'button--loading': loading }"
@click="reload()"
>{{ $t('AuthorizationErrorNotification.action') }}</a
>{{ $t('authorizationErrorToast.action') }}</a
>
</Alert>
</template>
<script>
export default {
name: 'AuthorizationErrorNotification',
name: 'AuthorizationErrorToast',
data() {
return {
loading: false,

11
web-frontend/modules/core/components/toasts/ClearingToast.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<Alert loading simple shadow :title="$t('clearingToast.title')">
{{ $t('clearingToast.content') }}
</Alert>
</template>
<script>
export default {
name: 'ClearingToast',
}
</script>

11
web-frontend/modules/core/components/toasts/ConnectingToast.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<Alert loading shadow simple :title="$t('connectingToast.title')"
>{{ $t('connectingToast.content') }}
</Alert>
</template>
<script>
export default {
name: 'ConnectingToast',
}
</script>

11
web-frontend/modules/core/components/toasts/CopyingToast.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<Alert loading simple shadow :title="$t('copyingToast.title')">
{{ $t('copyingToast.content') }}
</Alert>
</template>
<script>
export default {
name: 'CopyingToast',
}
</script>

8
web-frontend/modules/core/components/notifications/FailedConnectingNotification.vue → web-frontend/modules/core/components/toasts/FailedConnectingToast.vue
View file

@ -4,20 +4,20 @@
simple
type="error"
icon="exclamation"
:title="$t('failedConnectingNotification.title')"
>{{ $t('failedConnectingNotification.content') }}
:title="$t('failedConnectingToast.title')"
>{{ $t('failedConnectingToast.content') }}
<a
class="button margin-top-1"
:class="{ 'button--loading': loading }"
@click="reload()"
>{{ $t('failedConnectingNotification.action') }}
>{{ $t('failedConnectingToast.action') }}
</a>
</Alert>
</template>
<script>
export default {
name: 'FailedConnectingNotification',
name: 'FailedConnectingToast',
data() {
return {
loading: false,

11
web-frontend/modules/core/components/toasts/PastingToast.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<Alert loading simple shadow :title="$t('PastingToast.title')">
{{ $t('PastingToast.content') }}
</Alert>
</template>
<script>
export default {
name: 'PastingToast',
}
</script>

10
web-frontend/modules/core/components/notifications/PermissionsUpdatedNotification.vue → web-frontend/modules/core/components/toasts/PermissionsUpdatedToast.vue
View file

@ -5,21 +5,21 @@
simple
type="warning"
icon="exclamation"
:title="$t('permissionsUpdatedNotification.title')"
:title="$t('permissionsUpdatedToast.title')"
@close="close"
>{{ $t('permissionsUpdatedNotification.content') }}
>{{ $t('permissionsUpdatedToast.content') }}
<a
class="button margin-top-1"
:class="{ 'button--loading': loading }"
@click="reload()"
>{{ $t('permissionsUpdatedNotification.action') }}
>{{ $t('permissionsUpdatedToast.action') }}
</a>
</Alert>
</template>
<script>
export default {
name: 'PermissionsUpdatedNotification',
name: 'PermissionsUpdatedToast',
data() {
return {
loading: false,
@ -31,7 +31,7 @@ export default {
location.reload()
},
close() {
this.$store.dispatch('notification/setPermissionsUpdated', false)
this.$store.dispatch('toast/setPermissionsUpdated', false)
},
},
}

16
web-frontend/modules/core/components/notifications/RestoreNotification.vue → web-frontend/modules/core/components/toasts/RestoreToast.vue
View file

@ -1,17 +1,17 @@
<template>
<button
class="button undo-delete-notification"
class="button toast__undo-delete"
:disabled="loading"
:class="{
'button--loading': loading,
'undo-delete-notification--pulsing': pulsing,
'toast__undo-delete--pulsing': pulsing,
}"
@click="restore"
>
<i class="button__icon fas fa-undo"></i>
{{
$t('restoreNotification.restore', {
type: $t('trashType.' + notification.data.trash_item_type),
$t('restoreToast.restore', {
type: $t('trashType.' + toast.data.trash_item_type),
})
}}
</button>
@ -22,9 +22,9 @@ import TrashService from '@baserow/modules/core/services/trash'
import { notifyIf } from '@baserow/modules/core/utils/error'
export default {
name: 'RestoreNotification',
name: 'RestoreToast',
props: {
notification: {
toast: {
type: Object,
required: true,
},
@ -45,13 +45,13 @@ export default {
},
methods: {
close() {
this.$store.dispatch('notification/remove', this.notification)
this.$store.dispatch('toast/remove', this.toast)
},
async restore() {
this.loading = true
this.pulsing = false
try {
await TrashService(this.$client).restore(this.notification.data)
await TrashService(this.$client).restore(this.toast.data)
} catch (error) {
notifyIf(error, 'trash')
}

35
web-frontend/modules/core/components/toasts/Toast.vue Normal file
View file

@ -0,0 +1,35 @@
<template>
<Alert
simple
shadow
close-button
icon="exclamation"
:type="toast.type"
:title="toast.title"
@close="close(toast)"
>
{{ toast.message }}
</Alert>
</template>
<script>
export default {
name: 'Toast',
props: {
toast: {
type: Object,
required: true,
},
},
mounted() {
setTimeout(() => {
this.close(this.toast)
}, 5000)
},
methods: {
close(toast) {
this.$store.dispatch('toast/remove', toast)
},
},
}
</script>

97
web-frontend/modules/core/components/toasts/Toasts.vue Normal file
View file

@ -0,0 +1,97 @@
<template>
<div>
<div class="toast__top-right">
<PermissionsUpdatedToast v-if="permissionsUpdated" />
<ConnectingToast v-if="connecting"></ConnectingToast>
<UserSessionExpiredToast
v-if="isUserSessionExpired"
></UserSessionExpiredToast>
<FailedConnectingToast v-if="failedConnecting"></FailedConnectingToast>
<AuthorizationErrorToast v-if="unauthorized"></AuthorizationErrorToast>
<Toast
v-for="toast in normalToasts"
:key="toast.id"
:toast="toast"
></Toast>
</div>
<div class="toast__bottom-right">
<UndoRedoToast
v-if="undoRedoIsNotHidden"
:state="undoRedoState"
></UndoRedoToast>
<CopyingToast v-if="copying"></CopyingToast>
<PastingToast v-if="pasting"></PastingToast>
<ClearingToast v-if="clearing"></ClearingToast>
<RestoreToast
v-for="toast in restoreToasts"
:key="toast.id"
:toast="toast"
></RestoreToast>
</div>
</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import Toast from '@baserow/modules/core/components/toasts/Toast'
import ConnectingToast from '@baserow/modules/core/components/toasts/ConnectingToast'
import FailedConnectingToast from '@baserow/modules/core/components/toasts/FailedConnectingToast'
import RestoreToast from '@baserow/modules/core/components/toasts/RestoreToast'
import CopyingToast from '@baserow/modules/core/components/toasts/CopyingToast'
import PastingToast from '@baserow/modules/core/components/toasts/PastingToast'
import ClearingToast from '@baserow/modules/core/components/toasts/ClearingToast'
import AuthorizationErrorToast from '@baserow/modules/core/components/toasts/AuthorizationErrorToast'
import UserSessionExpiredToast from '@baserow/modules/core/components/toasts/UserSessionExpiredToast'
import UndoRedoToast from '@baserow/modules/core/components/toasts/UndoRedoToast'
import { UNDO_REDO_STATES } from '@baserow/modules/core/utils/undoRedoConstants'
import PermissionsUpdatedToast from '@baserow/modules/core/components/toasts/PermissionsUpdatedToast'
export default {
name: 'Toasts',
components: {
PermissionsUpdatedToast,
RestoreToast,
Toast,
ConnectingToast,
FailedConnectingToast,
CopyingToast,
PastingToast,
ClearingToast,
AuthorizationErrorToast,
UndoRedoToast,
UserSessionExpiredToast,
},
computed: {
undoRedoIsNotHidden() {
return this.undoRedoState !== UNDO_REDO_STATES.HIDDEN
},
restoreToasts() {
return this.toasts.filter((n) => n.type === 'restore')
},
normalToasts() {
return this.toasts.filter((n) => n.type !== 'restore')
},
...mapState({
unauthorized: (state) => state.toast.authorizationError,
connecting: (state) => state.toast.connecting,
failedConnecting: (state) => state.toast.failedConnecting,
copying: (state) => state.toast.copying,
pasting: (state) => state.toast.pasting,
clearing: (state) => state.toast.clearing,
toasts: (state) => state.toast.items,
undoRedoState: (state) => state.toast.undoRedoState,
isUserSessionExpired: (state) => state.toast.userSessionExpired,
permissionsUpdated: (state) => state.toast.permissionsUpdated,
}),
...mapGetters({ isAuthenticated: 'auth/isAuthenticated' }),
},
watch: {
isAuthenticated(value) {
if (!value) {
this.$store.dispatch('toast/userLoggedOut')
}
},
},
}
</script>

34
web-frontend/modules/core/components/notifications/UndoRedoNotification.vue → web-frontend/modules/core/components/toasts/UndoRedoToast.vue
View file

@ -14,7 +14,7 @@
import { UNDO_REDO_STATES } from '@baserow/modules/core/utils/undoRedoConstants'
export default {
name: 'UndoRedoNotification',
name: 'UndoRedoToast',
props: {
state: {
type: String,
@ -31,50 +31,50 @@ export default {
case UNDO_REDO_STATES.UNDONE:
return base({
icon: 'check',
title: this.$t('undoRedoNotification.undoneTitle'),
content: this.$t('undoRedoNotification.undoneText'),
title: this.$t('undoRedoToast.undoneTitle'),
content: this.$t('undoRedoToast.undoneText'),
})
case UNDO_REDO_STATES.REDONE:
return base({
icon: 'check',
title: this.$t('undoRedoNotification.redoneTitle'),
content: this.$t('undoRedoNotification.redoneText'),
title: this.$t('undoRedoToast.redoneTitle'),
content: this.$t('undoRedoToast.redoneText'),
})
case UNDO_REDO_STATES.UNDOING:
return base({
loading: true,
title: this.$t('undoRedoNotification.undoingTitle'),
content: this.$t('undoRedoNotification.undoingText'),
title: this.$t('undoRedoToast.undoingTitle'),
content: this.$t('undoRedoToast.undoingText'),
})
case UNDO_REDO_STATES.REDOING:
return base({
loading: true,
title: this.$t('undoRedoNotification.redoingTitle'),
content: this.$t('undoRedoNotification.redoingText'),
title: this.$t('undoRedoToast.redoingTitle'),
content: this.$t('undoRedoToast.redoingText'),
})
case UNDO_REDO_STATES.NO_MORE_UNDO:
return base({
icon: 'times',
title: this.$t('undoRedoNotification.failed'),
content: this.$t('undoRedoNotification.noMoreUndo'),
title: this.$t('undoRedoToast.failed'),
content: this.$t('undoRedoToast.noMoreUndo'),
})
case UNDO_REDO_STATES.NO_MORE_REDO:
return base({
icon: 'times',
title: this.$t('undoRedoNotification.failed'),
content: this.$t('undoRedoNotification.noMoreRedo'),
title: this.$t('undoRedoToast.failed'),
content: this.$t('undoRedoToast.noMoreRedo'),
})
case UNDO_REDO_STATES.ERROR_WITH_UNDO:
return base({
icon: 'exclamation',
title: this.$t('undoRedoNotification.failed'),
content: this.$t('undoRedoNotification.skippingUndoDueToError'),
title: this.$t('undoRedoToast.failed'),
content: this.$t('undoRedoToast.skippingUndoDueToError'),
})
case UNDO_REDO_STATES.ERROR_WITH_REDO:
return base({
icon: 'exclamation',
title: this.$t('undoRedoNotification.failed'),
content: this.$t('undoRedoNotification.skippingRedoDueToError'),
title: this.$t('undoRedoToast.failed'),
content: this.$t('undoRedoToast.skippingRedoDueToError'),
})
default:
return base()

8
web-frontend/modules/core/components/notifications/UserSessionExpiredNotification.vue → web-frontend/modules/core/components/toasts/UserSessionExpiredToast.vue
View file

@ -4,15 +4,15 @@
shadow
type="info"
icon="exclamation"
:title="$t('UserSessionExpiredNotification.title')"
:title="$t('userSessionExpiredToast.title')"
>
{{ $t('UserSessionExpiredNotification.content') }}
{{ $t('userSessionExpiredToast.content') }}
</Alert>
</template>
<script>
export default {
name: 'UserSessionExpiredNotification',
name: 'UserSessionExpiredToast',
mounted() {
setTimeout(() => {
this.acknowledge()
@ -23,7 +23,7 @@ export default {
},
methods: {
acknowledge() {
this.$store.dispatch('notification/setUserSessionExpired', false)
this.$store.dispatch('toast/setUserSessionExpired', false)
},
},
}

2
web-frontend/modules/core/components/workspace/WorkspaceContext.vue
View file

@ -102,7 +102,7 @@ export default {
try {
await this.$store.dispatch('workspace/delete', this.workspace)
await this.$store.dispatch('notification/restore', {
await this.$store.dispatch('toast/restore', {
trash_item_type: 'workspace',
trash_item_id: this.workspace.id,
})

8
web-frontend/modules/core/jobTypes.js
View file

@ -134,7 +134,7 @@ export class DuplicateApplicationJobType extends JobType {
const application = job.duplicated_application
try {
await store.dispatch('application/forceCreate', application)
store.dispatch('notification/info', {
store.dispatch('toast/info', {
title: i18n.t('duplicateApplicationJobType.duplicatedTitle'),
message: application.name,
})
@ -148,7 +148,7 @@ export class DuplicateApplicationJobType extends JobType {
async onJobFailed(job) {
const { i18n, store } = this.app
await store.dispatch(
'notification/error',
'toast/error',
{
title: i18n.t('clientHandler.notCompletedTitle'),
message: job.human_readable_error,
@ -196,7 +196,7 @@ export class InstallTemplateJobType extends JobType {
for (const application of installedApplications) {
await store.dispatch('application/forceCreate', application)
}
store.dispatch('notification/info', {
store.dispatch('toast/info', {
title: i18n.t('InstallTemplateJobType.installedTitle'),
message: installedApplications[0].name,
})
@ -210,7 +210,7 @@ export class InstallTemplateJobType extends JobType {
async onJobFailed(job) {
const { i18n, store } = this.app
await store.dispatch(
'notification/error',
'toast/error',
{
title: i18n.t('clientHandler.notCompletedTitle'),
message: i18n.t('clientHandler.notCompletedDescription'),

6
web-frontend/modules/core/layouts/app.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<Notifications></Notifications>
<Toasts></Toasts>
<div :class="{ 'layout--collapsed': isCollapsed }" class="layout">
<div class="layout__col-1">
<Sidebar></Sidebar>
@ -20,7 +20,7 @@
<script>
import { mapGetters } from 'vuex'
import Notifications from '@baserow/modules/core/components/notifications/Notifications'
import Toasts from '@baserow/modules/core/components/toasts/Toasts'
import Sidebar from '@baserow/modules/core/components/sidebar/Sidebar'
import undoRedo from '@baserow/modules/core/mixins/undoRedo'
import { CORE_ACTION_SCOPES } from '@baserow/modules/core/utils/undoRedoConstants'
@ -28,7 +28,7 @@ import { isOsSpecificModifierPressed } from '@baserow/modules/core/utils/events'
export default {
components: {
Notifications,
Toasts,
Sidebar,
},
mixins: [undoRedo],

6
web-frontend/modules/core/layouts/login.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<Notifications></Notifications>
<Toasts></Toasts>
<div class="auth__page">
<nuxt />
</div>
@ -8,10 +8,10 @@
</template>
<script>
import Notifications from '@baserow/modules/core/components/notifications/Notifications'
import Toasts from '@baserow/modules/core/components/toasts/Toasts'
export default {
components: { Notifications },
components: { Toasts },
middleware: ['settings', 'urlCheck'],
head() {
return {

20
web-frontend/modules/core/locales/en.json
View file

@ -208,40 +208,40 @@
"applicationForm": {
"nameLabel": "Name"
},
"connectingNotification": {
"connectingToast": {
"title": "Reconnecting",
"content": "Reconnecting with server."
},
"failedConnectingNotification": {
"failedConnectingToast": {
"title": "Failed",
"content": "Connection to the server has failed. Please refresh the page.",
"action": "Refresh page"
},
"AuthorizationErrorNotification": {
"authorizationErrorToast": {
"title": "Authorization error",
"content": "It looks like you do not have the permissions to see this resource.",
"action": "Refresh page"
},
"UserSessionExpiredNotification": {
"userSessionExpiredToast": {
"title": "Session expired",
"content": "You were logged out because your authentication token has expired. Please login again."
},
"restoreNotification": {
"restoreToast": {
"restore": "Restore deleted {type}"
},
"copyingNotification": {
"copyingToast": {
"title": "Copying...",
"content": "Preparing your data"
},
"pastingNotification": {
"PastingToast": {
"title": "Pasting...",
"content": "Preparing your data"
},
"clearingNotification": {
"clearingToast": {
"title": "Clearing...",
"content": "Preparing your data"
},
"undoRedoNotification": {
"undoRedoToast": {
"undoingTitle": "Undoing...",
"undoingText": "Undoing your action",
"undoneTitle": "Undone",
@ -256,7 +256,7 @@
"skippingRedoDueToError": "Redo failed due to unknown error, skipping it.",
"failed": "Failed"
},
"permissionsUpdatedNotification": {
"permissionsUpdatedToast": {
"title": "Permissions updated",
"content": "This might affect what you have access to, please reload the page.",
"action": "Reload"

12
web-frontend/modules/core/mixins/undoRedo.js
View file

@ -10,16 +10,16 @@ export default {
}),
},
methods: {
async undo(showLoadingNotification = true) {
await this.action('undo', showLoadingNotification)
async undo(showLoadingToast = true) {
await this.action('undo', showLoadingToast)
},
async redo(showLoadingNotification = true) {
await this.action('redo', showLoadingNotification)
async redo(showLoadingToast = true) {
await this.action('redo', showLoadingToast)
},
async action(name, showLoadingNotification = true) {
async action(name, showLoadingToast = true) {
try {
await this.$store.dispatch(`undoRedo/${name}`, {
showLoadingNotification,
showLoadingToast,
})
} catch (e) {
notifyIf(e)

65
web-frontend/modules/core/pages/styleGuide.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<Notifications></Notifications>
<Toasts></Toasts>
<div class="style-guide__wrapper">
<div class="style-guide">
<div class="margin-bottom-3">
@ -427,13 +427,13 @@
</div>
</div>
<div class="margin-bottom-3">
<Alert title="Notification message" icon="exclamation">
<Alert title="Toast message" icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Notification message">
<Alert title="Toast message">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
@ -443,49 +443,44 @@
sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc
laoreet ligula a nunc eleifend, nec accumsan felis euismod.
</Alert>
<Alert title="Notification message" type="success" icon="exclamation">
<Alert title="Toast message" type="success" icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Notification message" type="warning" icon="exclamation">
<Alert title="Toast message" type="warning" icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Notification message" type="error" icon="exclamation">
<Alert title="Toast message" type="error" icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Notification message" simple icon="exclamation">
<Alert title="Toast message" simple icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Notification message" simple>
<Alert title="Toast message" simple>
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert title="Toast message" type="success" simple icon="exclamation">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert
title="Notification message"
type="success"
simple
icon="exclamation"
>
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula.
Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra
urna. Praesent.
</Alert>
<Alert
title="Notification message"
title="Toast message"
type="warning"
simple
shadow
@ -497,7 +492,7 @@
urna. Praesent.
</Alert>
<Alert
title="Notification message"
title="Toast message"
type="error"
simple
shadow
@ -1154,45 +1149,45 @@
<Button
type="success"
@click="
$store.dispatch('notification/success', {
title: 'Custom success notification',
$store.dispatch('toast/success', {
title: 'Custom success toast',
message: 'Mauris dignissim massa ac justo consequat porttitor.',
})
"
>
toggle success notification
toggle success toast
</Button>
<Button
type="error"
@click="
$store.dispatch('notification/error', {
title: 'Custom error notification',
$store.dispatch('toast/error', {
title: 'Custom error toast',
message: 'Mauris dignissim massa ac justo consequat porttitor.',
})
"
>
toggle error notification
toggle error toast
</Button>
<Button
type="warning"
@click="
$store.dispatch('notification/warning', {
title: 'Custom warning notification',
$store.dispatch('toast/warning', {
title: 'Custom warning toast',
message: 'Mauris dignissim massa ac justo consequat porttitor.',
})
"
>
toggle warning notification
toggle warning toast
</Button>
<Button
@click="
$store.dispatch('notification/info', {
title: 'Custom info notification',
$store.dispatch('toast/info', {
title: 'Custom info toast',
message: 'Mauris dignissim massa ac justo consequat porttitor.',
})
"
>
toggle info notification
toggle info toast
</Button>
</div>
<div class="margin-bottom-3">
@ -1751,13 +1746,13 @@
</template>
<script>
import Notifications from '@baserow/modules/core/components/notifications/Notifications'
import Toasts from '@baserow/modules/core/components/toasts/Toasts'
import AutoExpandableTextarea from '@baserow/modules/core/components/helpers/AutoExpandableTextarea'
import BaserowIcon from '@baserow/modules/core/static/img/logoOnly.svg'
export default {
components: {
Notifications,
Toasts,
AutoExpandableTextarea,
},
data() {

4
web-frontend/modules/core/plugin.js
View file

@ -40,7 +40,7 @@ import authProviderStore from '@baserow/modules/core/store/authProvider'
import authStore from '@baserow/modules/core/store/auth'
import workspaceStore from '@baserow/modules/core/store/workspace'
import jobStore from '@baserow/modules/core/store/job'
import notificationStore from '@baserow/modules/core/store/notification'
import toastStore from '@baserow/modules/core/store/toast'
import sidebarStore from '@baserow/modules/core/store/sidebar'
import undoRedoStore from '@baserow/modules/core/store/undoRedo'
import integrationStore from '@baserow/modules/core/store/integration'
@ -116,7 +116,7 @@ export default (context, inject) => {
store.registerModule('auth', authStore)
store.registerModule('job', jobStore)
store.registerModule('workspace', workspaceStore)
store.registerModule('notification', notificationStore)
store.registerModule('toast', toastStore)
store.registerModule('sidebar', sidebarStore)
store.registerModule('undoRedo', undoRedoStore)
store.registerModule('integration', integrationStore)

4
web-frontend/modules/core/plugins/clientHandler.js
View file

@ -400,7 +400,7 @@ export class ErrorHandler {
}
this.store.dispatch(
'notification/error',
'toast/error',
{
title: message.title,
message: message.message,
@ -487,7 +487,7 @@ export default function ({ app, store, error }, inject) {
client.interceptors.request.use(prepareRequestHeaders(store))
// Create a response interceptor to add more detail to the error message
// and to create a notification when there is a network error.
// and to create a toast when there is a network error.
client.interceptors.response.use(
null,
makeErrorResponseInterceptor(store, app, clientErrorMap, error)

10
web-frontend/modules/core/plugins/realTimeHandler.js
View file

@ -43,7 +43,7 @@ export class RealTimeHandler {
token === null ||
(!this.authenticationSuccess && token === this.lastToken)
) {
this.context.store.dispatch('notification/setFailedConnecting', true)
this.context.store.dispatch('toast/setFailedConnecting', true)
return
}
@ -58,7 +58,7 @@ export class RealTimeHandler {
this.socket = new WebSocket(`${url}?jwt_token=${token}`)
this.socket.onopen = () => {
this.context.store.dispatch('notification/setConnecting', false)
this.context.store.dispatch('toast/setConnecting', false)
this.connected = true
this.attempts = 0
@ -114,7 +114,7 @@ export class RealTimeHandler {
}
this.attempts++
this.context.store.dispatch('notification/setConnecting', true)
this.context.store.dispatch('toast/setConnecting', true)
this.reconnectTimeout = setTimeout(
() => {
@ -164,8 +164,8 @@ export class RealTimeHandler {
this.socket.close()
}
this.context.store.dispatch('notification/setConnecting', false)
this.context.store.dispatch('notification/setFailedConnecting', false)
this.context.store.dispatch('toast/setConnecting', false)
this.context.store.dispatch('toast/setFailedConnecting', false)
clearTimeout(this.reconnectTimeout)
this.reconnect = false
this.attempts = 0

16
web-frontend/modules/core/store/notification.js → web-frontend/modules/core/store/toast.js
View file

@ -16,11 +16,11 @@ export const state = () => ({
})
export const mutations = {
ADD(state, notification) {
state.items.unshift(notification)
ADD(state, toast) {
state.items.unshift(toast)
},
REMOVE(state, notification) {
const index = state.items.indexOf(notification)
REMOVE(state, toast) {
const index = state.items.indexOf(toast)
state.items.splice(index, 1)
},
SET_CONNECTING(state, value) {
@ -54,7 +54,7 @@ export const mutations = {
export const actions = {
/**
* Shows a notification message to the user.
* Shows a toast message to the user.
*/
add({ commit }, { type, title = null, message = null, data = null }) {
commit('ADD', {
@ -83,8 +83,8 @@ export const actions = {
data: restoreData,
})
},
remove({ commit }, notification) {
commit('REMOVE', notification)
remove({ commit }, toast) {
commit('REMOVE', toast)
},
setConnecting({ commit }, value) {
if (value) {
@ -120,7 +120,7 @@ export const actions = {
commit('SET_PERMISSIONS_UPDATED', value)
},
userLoggedOut({ commit }) {
// Add any notifications here that should be closed when the user logs out
// Add any toasts here that should be closed when the user logs out
commit('SET_PERMISSIONS_UPDATED', false)
commit('SET_COPYING', false)
commit('SET_PASTING', false)

54
web-frontend/modules/core/store/undoRedo.js
View file

@ -46,37 +46,37 @@ export const mutations = {
let hideTimeout = null
export const actions = {
async undo({ dispatch }, { showLoadingNotification }) {
async undo({ dispatch }, { showLoadingToast }) {
return await dispatch('action', {
showLoadingNotification,
showLoadingToast,
serviceMethod: 'undo',
doingNotificationState: UNDO_REDO_STATES.UNDOING,
doneNotificationState: UNDO_REDO_STATES.UNDONE,
nothingToDoNotificationState: UNDO_REDO_STATES.NO_MORE_UNDO,
skippedDueToErrorNotificationState: UNDO_REDO_STATES.ERROR_WITH_UNDO,
doingToastState: UNDO_REDO_STATES.UNDOING,
doneToastState: UNDO_REDO_STATES.UNDONE,
nothingToDoToastState: UNDO_REDO_STATES.NO_MORE_UNDO,
skippedDueToErrorToastState: UNDO_REDO_STATES.ERROR_WITH_UNDO,
commitName: 'SET_UNDOING',
})
},
async redo({ dispatch }, { showLoadingNotification }) {
async redo({ dispatch }, { showLoadingToast }) {
return await dispatch('action', {
showLoadingNotification,
showLoadingToast,
serviceMethod: 'redo',
doingNotificationState: UNDO_REDO_STATES.REDOING,
doneNotificationState: UNDO_REDO_STATES.REDONE,
nothingToDoNotificationState: UNDO_REDO_STATES.NO_MORE_REDO,
skippedDueToErrorNotificationState: UNDO_REDO_STATES.ERROR_WITH_REDO,
doingToastState: UNDO_REDO_STATES.REDOING,
doneToastState: UNDO_REDO_STATES.REDONE,
nothingToDoToastState: UNDO_REDO_STATES.NO_MORE_REDO,
skippedDueToErrorToastState: UNDO_REDO_STATES.ERROR_WITH_REDO,
commitName: 'SET_REDOING',
})
},
async action(
{ getters, commit, dispatch },
{
showLoadingNotification,
showLoadingToast,
serviceMethod,
doingNotificationState,
doneNotificationState,
nothingToDoNotificationState,
skippedDueToErrorNotificationState,
doingToastState,
doneToastState,
nothingToDoToastState,
skippedDueToErrorToastState,
commitName,
}
) {
@ -87,10 +87,8 @@ export const actions = {
clearTimeout(hideTimeout)
commit(commitName, true)
await dispatch(
'notification/setUndoRedoState',
showLoadingNotification
? doingNotificationState
: UNDO_REDO_STATES.HIDDEN,
'toast/setUndoRedoState',
showLoadingToast ? doingToastState : UNDO_REDO_STATES.HIDDEN,
{ root: true }
)
@ -98,15 +96,15 @@ export const actions = {
const { data } = await UndoRedoService(this.$client)[serviceMethod](
getters.getCurrentScope
)
const resultCodeToNotificationState = {
[UNDO_REDO_RESULT_CODES.SUCCESS]: doneNotificationState,
[UNDO_REDO_RESULT_CODES.NOTHING_TO_DO]: nothingToDoNotificationState,
const resultCodeToToastState = {
[UNDO_REDO_RESULT_CODES.SUCCESS]: doneToastState,
[UNDO_REDO_RESULT_CODES.NOTHING_TO_DO]: nothingToDoToastState,
[UNDO_REDO_RESULT_CODES.SKIPPED_DUE_TO_ERROR]:
skippedDueToErrorNotificationState,
skippedDueToErrorToastState,
}
await dispatch(
'notification/setUndoRedoState',
resultCodeToNotificationState[data.result_code],
'toast/setUndoRedoState',
resultCodeToToastState[data.result_code],
{
root: true,
}
@ -114,7 +112,7 @@ export const actions = {
} finally {
hideTimeout = setTimeout(
() =>
dispatch('notification/setUndoRedoState', UNDO_REDO_STATES.HIDDEN, {
dispatch('toast/setUndoRedoState', UNDO_REDO_STATES.HIDDEN, {
root: true,
}),
2000

6
web-frontend/modules/core/utils/auth.js
View file

@ -43,12 +43,12 @@ export const getTokenIfEnoughTimeLeft = (
export const logoutAndRedirectToLogin = (
router,
store,
showSessionExpiredNotification = false
showSessionExpiredToast = false
) => {
store.dispatch('auth/logoff')
router.push({ name: 'login', query: { noredirect: null } }, () => {
if (showSessionExpiredNotification) {
store.dispatch('notification/setUserSessionExpired', true)
if (showSessionExpiredToast) {
store.dispatch('toast/setUserSessionExpired', true)
}
store.dispatch('auth/clearAllStoreUserData')
})

4
web-frontend/modules/core/utils/error.js
View file

@ -1,10 +1,10 @@
/**
* Adds a notification error if the error response has 404 status code.
* Adds a toast error if the error response has 404 status code.
*/
export function notifyIf404(dispatch, error, title, message) {
if (error.response && error.response.status === 404) {
dispatch(
'notification/error',
'toast/error',
{
title,
message,

2
web-frontend/modules/database/applicationTypes.js
View file

@ -117,7 +117,7 @@ export class DatabaseApplicationType extends ApplicationType {
)
return true
} else {
$store.dispatch('notification/error', {
$store.dispatch('toast/error', {
title: $i18n.t('applicationType.cantSelectTableTitle'),
message: $i18n.t('applicationType.cantSelectTableDescription'),
})

6
web-frontend/modules/database/components/field/DuplicateFieldModal.vue
View file

@ -77,11 +77,7 @@ export default {
this.actionGroupId = null
},
showError(title, message) {
this.$store.dispatch(
'notification/error',
{ title, message },
{ root: true }
)
this.$store.dispatch('toast/error', { title, message }, { root: true })
},
// eslint-disable-next-line require-await
async onJobFailed() {

2
web-frontend/modules/database/components/field/FieldContext.vue
View file

@ -108,7 +108,7 @@ export default {
await this.$store.dispatch('field/forceUpdateFields', {
fields: data.related_fields,
})
await this.$store.dispatch('notification/restore', {
await this.$store.dispatch('toast/restore', {
trash_item_type: 'field',
trash_item_id: field.id,
})

4
web-frontend/modules/database/components/field/InsertFieldContext.vue
View file

@ -53,8 +53,8 @@ export default {
}
this.position = position
const popupAnchor = position === 'left' ? 'right' : 'left'
this.$refs.createFieldContext.toggle(ref, 'bottom', popupAnchor, 0)
const toastAnchor = position === 'left' ? 'right' : 'left'
this.$refs.createFieldContext.toggle(ref, 'bottom', toastAnchor, 0)
},
},
}

2
web-frontend/modules/database/components/sidebar/SidebarItem.vue
View file

@ -254,7 +254,7 @@ export default {
database: this.database,
table: this.table,
})
await this.$store.dispatch('notification/restore', {
await this.$store.dispatch('toast/restore', {
trash_item_type: 'table',
trash_item_id: this.table.id,
})

2
web-frontend/modules/database/components/view/ViewFilterForm.vue
View file

@ -76,7 +76,7 @@ export default {
try {
const field = this.getFirstCompatibleField(this.fields)
if (field === undefined) {
await this.$store.dispatch('notification/error', {
await this.$store.dispatch('toast/error', {
title: this.$t(
'viewFilterContext.noCompatibleFilterTypesErrorTitle'
),

14
web-frontend/modules/database/components/view/grid/GridView.vue
View file

@ -696,7 +696,7 @@ export default {
getScrollTop,
}
)
await this.$store.dispatch('notification/restore', {
await this.$store.dispatch('toast/restore', {
trash_item_type: 'row',
parent_trash_item_id: this.table.id,
trash_item_id: row.id,
@ -1040,7 +1040,7 @@ export default {
return
}
try {
this.$store.dispatch('notification/setCopying', true)
this.$store.dispatch('toast/setCopying', true)
await this.copySelectionToClipboard(
this.$store.dispatch(`${gridStore}/getCurrentSelection`, {
fields: this.allVisibleFields,
@ -1049,7 +1049,7 @@ export default {
} catch (error) {
notifyIf(error, 'view')
} finally {
this.$store.dispatch('notification/setCopying', false)
this.$store.dispatch('toast/setCopying', false)
// prevent Safari from beeping since window.getSelection() is empty
event.preventDefault()
}
@ -1104,7 +1104,7 @@ export default {
return
}
this.$store.dispatch('notification/setPasting', true)
this.$store.dispatch('toast/setPasting', true)
try {
await this.$store.dispatch(
@ -1124,7 +1124,7 @@ export default {
notifyIf(error)
}
this.$store.dispatch('notification/setPasting', false)
this.$store.dispatch('toast/setPasting', false)
return true
},
/**
@ -1157,7 +1157,7 @@ export default {
*/
async clearValuesFromMultipleCellSelection() {
try {
this.$store.dispatch('notification/setClearing', true)
this.$store.dispatch('toast/setClearing', true)
await this.$store.dispatch(
this.storePrefix + 'view/grid/clearValuesFromMultipleCellSelection',
@ -1171,7 +1171,7 @@ export default {
} catch (error) {
notifyIf(error, 'view')
} finally {
this.$store.dispatch('notification/setClearing', false)
this.$store.dispatch('toast/setClearing', false)
}
},
/**

2
web-frontend/modules/database/components/view/grid/fields/GridViewFieldFile.vue
View file

@ -158,7 +158,7 @@ export default {
}
},
select() {
// While the field is selected we want to open the select row popup by pressing
// While the field is selected we want to open the select row toast by pressing
// the enter key.
this.$el.keydownEvent = (event) => {
if (event.key === 'Enter' && !this.modalOpen) {

2
web-frontend/modules/database/components/view/grid/fields/GridViewFieldLinkRow.vue
View file

@ -121,7 +121,7 @@ export default {
},
methods: {
select() {
// While the field is selected we want to open the select row popup by pressing
// While the field is selected we want to open the select row toast by pressing
// the enter key.
this.$el.keydownEvent = (event) => {
if (event.key === 'Enter' && !this.modalOpen) {

4
web-frontend/modules/database/jobTypes.js
View file

@ -28,7 +28,7 @@ export class DuplicateTableJobType extends JobType {
const { i18n, store } = this.app
store.dispatch(
'notification/error',
'toast/error',
{
title: i18n.t('clientHandler.notCompletedTitle'),
message: i18n.t('clientHandler.notCompletedDescription'),
@ -51,7 +51,7 @@ export class DuplicateTableJobType extends JobType {
data: duplicatedTable,
})
store.dispatch('notification/info', {
store.dispatch('toast/info', {
title: i18n.t('duplicateTableJobType.duplicatedTitle'),
message: duplicatedTable.name,
})

2
web-frontend/modules/database/locales/en.json
View file

@ -742,7 +742,7 @@
},
"table": {
"adjacentRow": {
"notification": {
"toast": {
"notFound": {
"next": {
"title": "No more rows",

2
web-frontend/modules/database/mixins/fileField.js
View file

@ -34,7 +34,7 @@ export default {
*/
renameFile(value, index, newName) {
if (newName === '' || newName === null) {
this.$store.dispatch('notification/error', {
this.$store.dispatch('toast/error', {
title: this.$t('fileField.errorEmptyFileNameTitle'),
message: this.$t('fileField.errorEmptyFileNameMessage'),
})

6
web-frontend/modules/database/pages/form.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<Notifications></Notifications>
<Toasts></Toasts>
<div class="form-view__page">
<div v-if="fields.length === 0" class="form-view__body">
<div class="form-view__no-fields margin-bottom-4">
@ -36,7 +36,7 @@
<script>
import { clone, isPromise } from '@baserow/modules/core/utils/object'
import { notifyIf } from '@baserow/modules/core/utils/error'
import Notifications from '@baserow/modules/core/components/notifications/Notifications'
import Toasts from '@baserow/modules/core/components/toasts/Toasts'
import FormService from '@baserow/modules/database/services/view/form'
import {
getHiddenFieldNames,
@ -47,7 +47,7 @@ import FormViewPoweredBy from '@baserow/modules/database/components/view/form/Fo
export default {
components: {
Notifications,
Toasts,
FormViewPoweredBy,
},
async asyncData({ params, error, app, route, redirect, store }) {

6
web-frontend/modules/database/pages/publicView.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<Notifications></Notifications>
<Toasts></Toasts>
<div class="public-view__table">
<Table
:database="database"
@ -16,7 +16,7 @@
</template>
<script>
import Notifications from '@baserow/modules/core/components/notifications/Notifications'
import Toasts from '@baserow/modules/core/components/toasts/Toasts'
import Table from '@baserow/modules/database/components/table/Table'
import ViewService from '@baserow/modules/database/services/view'
import { PUBLIC_PLACEHOLDER_ENTITY_ID } from '@baserow/modules/database/utils/constants'
@ -25,7 +25,7 @@ import { mapGetters } from 'vuex'
import languageDetection from '@baserow/modules/core/mixins/languageDetection'
export default {
components: { Table, Notifications },
components: { Table, Toasts },
mixins: [languageDetection],
async asyncData({ store, params, error, app, redirect, route }) {
const slug = params.slug

2
web-frontend/modules/database/pages/publicViewLogin.vue
View file

@ -93,7 +93,7 @@ export default {
const statusCode = e.response?.status
// hide the authorization error here and show the correct error message
if (statusCode === 401) {
this.$store.dispatch('notification/setAuthorizationError', false)
this.$store.dispatch('toast/setAuthorizationError', false)
this.showError(
this.$t('publicViewAuthLogin.error.incorrectPasswordTitle'),
this.$t('publicViewAuthLogin.error.incorrectPasswordText')

10
web-frontend/modules/database/pages/table.vue
View file

@ -239,17 +239,17 @@ export default {
)
if (status === 204 || status === 404) {
const translationPath = `table.adjacentRow.notification.notFound.${
const translationPath = `table.adjacentRow.toast.notFound.${
previous ? 'previous' : 'next'
}`
await this.$store.dispatch('notification/info', {
await this.$store.dispatch('toast/info', {
title: this.$t(`${translationPath}.title`),
message: this.$t(`${translationPath}.message`),
})
} else if (status !== 200) {
await this.$store.dispatch('notification/error', {
title: this.$t(`table.adjacentRow.notification.error.title`),
message: this.$t(`table.adjacentRow.notification.error.message`),
await this.$store.dispatch('toast/error', {
title: this.$t(`table.adjacentRow.toast.error.title`),
message: this.$t(`table.adjacentRow.toast.error.message`),
})
}

2
web-frontend/modules/database/store/view/grid.js
View file

@ -1426,7 +1426,7 @@ export const actions = {
const diff = oldCount - getters.getCount + rowsPopulated.length
if (!isSingleRowInsertion && diff > 0) {
dispatch(
'notification/success',
'toast/success',
{
title: this.$i18n.t('gridView.hiddenRowsInsertedTitle'),
message: this.$i18n.t('gridView.hiddenRowsInsertedMessage', {

8
web-frontend/test/unit/database/__snapshots__/publicView.spec.js.snap
View file

@ -2,11 +2,9 @@
exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
<div>
<div
class="notifications"
>
<div>
<div
class="top-right-notifications"
class="toast__top-right"
>
<!---->
@ -21,7 +19,7 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
</div>
<div
class="bottom-right-notifications"
class="toast__bottom-right"
>
<!---->