Alerts
Last modified by Pierre Jeanjean on 2024/10/28 11:54
Description
The Alerts API provides components that can be used to create and display alerts on Cristal pages.
Details
An AlertService is a component that offers methods to create and manage alerts:
/**
* Service to create and manage alert messages in Cristal.
*/
interface AlertsService {
/**
* List created and not dismissed alerts.
* @returns the current alerts
*/
list(): Ref<Alert[]>;
/**
* Create an "info" alert.
* @param message - the content of the alert
* @param actions - possible actions to include in the alert
*/
info(message: string, actions?: Action[]): void;
/**
* Create a "success" alert.
* @param message - the content of the alert
* @param actions - possible actions to include in the alert
*/
success(message: string, actions?: Action[]): void;
/**
* Create a "warning" alert.
* @param message - the content of the alert
* @param actions - possible actions to include in the alert
*/
warning(message: string, actions?: Action[]): void;
/**
* Create an "error" alert.
* @param message - the content of the alert
* @param actions - possible actions to include in the alert
*/
error(message: string, actions?: Action[]): void;
/**
* Dismiss an alert.
* @param id - the id of the alert to dismiss
*/
dismiss(id: number): void;
}
* Service to create and manage alert messages in Cristal.
*/
interface AlertsService {
/**
* List created and not dismissed alerts.
* @returns the current alerts
*/
list(): Ref<Alert[]>;
/**
* Create an "info" alert.
* @param message - the content of the alert
* @param actions - possible actions to include in the alert
*/
info(message: string, actions?: Action[]): void;
/**
* Create a "success" alert.
* @param message - the content of the alert
* @param actions - possible actions to include in the alert
*/
success(message: string, actions?: Action[]): void;
/**
* Create a "warning" alert.
* @param message - the content of the alert
* @param actions - possible actions to include in the alert
*/
warning(message: string, actions?: Action[]): void;
/**
* Create an "error" alert.
* @param message - the content of the alert
* @param actions - possible actions to include in the alert
*/
error(message: string, actions?: Action[]): void;
/**
* Dismiss an alert.
* @param id - the id of the alert to dismiss
*/
dismiss(id: number): void;
}
An Alert is a simple data structure that stores all the information required to render an alert. It can optionally include clickable actions for the user that will see the alert:
type Action = { name: string; callback: () => void };
type Type = "info" | "success" | "warning" | "error";
/**
* Description of an alert.
*/
interface Alert {
id: number;
type: Type;
message: string;
actions?: Action[];
}
type Type = "info" | "success" | "warning" | "error";
/**
* Description of an alert.
*/
interface Alert {
id: number;
type: Type;
message: string;
actions?: Action[];
}
The Vue component AlertsToast can then be used to display created alerts anywhere on Cristal UI.
This project is being financed by the French State as part of the France 2030 program
Ce projet est financé par l’État Français dans le cadre de France 2030
