Problems with the current notification implementation

• It's often not clear what caused a notification.
  • => Notifications should be displayed closer to their source.
• Important notifications can easily be missed. (e.g. notification after importing data)
• Normal usage can lead to error notifications (e.g. clicking on empty tasks). This might lead users to ignoring other notifications.
• Notifications permanently cover other UI elements.
  • => Notifications should always have a timeout or a close button.

I think we should try to move away from notifications in most cases where they are currently used:

util/interceptor.ts

Notifications used for

Error message whenever an axios error occurs.

Suggestions

Currently we don't really know what action caused the error. For those cases it's probably fine to keep the notification for now.

PasswordChangeDialog, RegisterDialog

Notifications used for

Displaying error / success message.

Suggestions

Error messages should be displayed inline inside the dialog.

The success notification is actually fine: Since it's not a very important message, it can just time out after a few seconds. We can use the snackbar component from vuetify for that.

• PasswordChangeDialog
• RegisterDialog

ImportDialog

Notifications used for

Displaying error / success message.

Suggestions

Error messages should be displayed inline inside the dialog.

If the import succeeds, the user has to log out and log back in again for the ui to become responsive. This is currently communicated in a notification which is easy to miss. I suggest we just leave the import dialog open with no way to close it and a message asking the user to reload the page and log in again. That way, no one can get to the broken ui.

• ImportDialog

router/index.ts

Notifications used for

Error when someone tries to access a page they don't have permission to access.

This should not happen during normal usage, so we can just redirect people to a 403 error page.

• router/index.ts

StudentSubmissionSideView

TODO

InstanceExport, DataExport

Notifications used for

Displaying missing Students in mapping file. One notification is shown per student.

Suggestions

There should be a single grouped list of missing students. This should be shown immediately after selecting the file as a warning under the file selector.

• InstanceExport
• DataExport

TutorList

Notifications used for

Displaying error when revoking / granting access fails.

Suggestions

TODO

Maybe we can use the input message system from vuetify (https://vuetifyjs.com/en/components/inputs/) but it might look bad in the table.

SubmissionCorrection

Notifications used for

Displaying error when submitting the correction has failed.

Suggestions

"You need to give a score": Display under score input using vuetifys input messages.

Other errors: Display above the row with the buttons using an alert component. The "You need to add a comment" alert should disappear when a comment is added. (Edit: This is also under the score input now.)

• SubmissionCorrection

FeedbackLabelForm

TODO

AnnotatedSubmissionBottomToolbar

Notifications used for

Displaying an error when this is the last submission

Suggestions

Disable the skip button when on the last submission

• AnnotatedSubmissionBottomToolbar

Clicking on empty submission types

Notifications used for

Displaying an error message.

Suggestions

This is not really an error. Instead, the normal submission correction page should show up but with a message "All submissions corrected." or similar in place of the submission.

• clicking on empty submission types