Toast Notify Service

Description

A toast notification is a user interface element that typically appears as a small popup with text, an image, or a button. They are suitable for conveying information that doesn't demand much user attention.

toastSuccess(messages, position?)

• 🧱 Purpose: Displays a styled success toast with dynamic duration based on message length.
• 📌 Parameters:
  • messages (Array or Object): A list of success messages to show.
  • position (String, optional): Location on screen where the toast will appear (default: "top-center").
• ⚙️ Behavior:
  • Formats the message using getMessageHtml.
  • Calculates how long the toast should stay visible using getMessageDuration.
  • Renders HTML-based toast using vue3-toastify with a "success" type.

toastErrors(errors, position?)

• 🧱 Purpose: Displays an error toast with multiple error messages and logs the error.
• 📌 Parameters:
  • errors (Array or Object): Error messages to be shown.
  • position (String, optional): Position of the toast (default: "top-center").
• ⚙️ Behavior:
  • Converts messages to formatted HTML via getMessageHtml.
  • Duration dynamically calculated through getMessageDuration.
  • Displays an "error" type toast.
  • Logs the error using trackError.

getMessageHtml(messages)

• 🧱 Purpose: Converts a list of messages into a single HTML-formatted string for toast rendering.
• 📌 Parameters:
  • messages (Array or Object): Collection of messages to be displayed.
• ⚙️ Behavior:
• If multiple messages exist, they are rendered as a numbered list with <br/> separators.
• If a single message exists, it is returned without formatting.

getMessageDuration(message_html)

• 🧱 Purpose: Dynamically determines how long the toast should remain visible.
• 📌 Parameters:
  • messages (String): The final formatted message string.
• ⚙️ Behavior:
  • Counts total characters in the message.
  • Uses the formula: (message length / 10 readable chars/sec) * 3000ms to set duration.
  • Ensures longer messages have sufficient reading time.