Improve UX when displaying toast message when contact is created

CrowdDotDev · Oct 16, 2023 · c65d438 · c65d438
1 parent da5675d
commit c65d438
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/frontend/src/i18n/en.js b/frontend/src/i18n/en.js
@@ -150,12 +150,12 @@ const en = {
         title: 'Contacts',
       },
       create: {
-        success: 'Contact successfully saved',
+        success: 'Contact added successfully',
         error: 'There was an error creating the contact',
         message: 'View contact',
       },
       update: {
-        success: 'Contact successfully saved',
+        success: 'Contact edited successfully',
         error: 'There was an error updating the contact',
       },
       destroy: {

diff --git a/frontend/src/shared/store/actions.js b/frontend/src/shared/store/actions.js
@@ -1,3 +1,4 @@
+import { h } from 'vue';
 import { attributesAreDifferent } from '@/shared/filter/helpers/different-util';
 import { router } from '@/router';
 import Errors from '@/shared/error/errors';
@@ -116,9 +117,20 @@ export default (moduleName, moduleService = null) => {
           if (moduleName === 'member') {
             const contactId = response.id;
             const successMessageAction = i18n(`entities.${moduleName}.create.message`);
-            const message = `<button class="btn btn--xs btn--bordered">
-                                <a href="/contacts/${contactId}" class="text-current">${successMessageAction}</a>
-                             </button>`;
+            const message = h(
+              'el-button',
+              {
+                class: 'btn btn--xs btn--bordered !h-6',
+                onClick: () => {
+                  router.push({
+                    name: 'memberView',
+                    params: { id: contactId },
+                  });
+                  Message.closeAll();
+                },
+              },
+              successMessageAction,
+            );
 
             Message.success(i18n(`entities.${moduleName}.create.success`), {
               message,