Documentation

À inclure dans votre code

Votre code doit contenir un ou plusieurs éléments avec la classe "nc-trigger". En conjonction avec la méthode watchTrigger(), cela va permettre à l'élément d'ouvrir le plugin au clic.

Html :

<button class="nc-trigger">Notifications</button>

Avec React :

<Button className="nc-trigger">Notifications</Button>

La version normale du compteur de notifications sera ajouté à la fin du composant parent :

En ajoutant la classe "nc-trigger-corner", le compteur de notifications sera positionné "absolute" en haut à droite du composant parent :

Méthode "initialize"

Description

Cette méthode va requêter les notifications, créer la sidebar du plugin et les événements associés.

Options

Options de la méthode "initialize" :

• api
  • endpoint : Endpoint de l'API (pour pouvoir requêter les notifications)
  • resourceUrn : L'Urn de l'utilisateur actuel (pour trouver le subscriber des notifications correspondant)
  • token : String contenant le token pour l'API (et donc notification)
• containerId : Le container du centre de notification
• mercure
  • endpoint : Endpoint de Mercure
  • getToken : Méthode qui doit retourner le token (string)
• notify : Méthode de notification de l'application, permet au package de notifier dans le même style que l'application (nouvelle notif, erreurs...)
• options (optionnel)
  • filter : Booléen pour activer les filtres
  • hideOnRead : Booléen pour activer le masquage des notifications lues
  • itemsPerPage : Nombre de notifications à afficher par chargement (initial et "charger plus")
  • minimizable : Booléen pour activer la taille minimale de chaque notification ; on affichera une phrase du message, puis onHover, on affichera tout le reste
  • readOnLinkClick : Booléen pour activer le marquage en "lu" lors du clic sur le lien d'une notification
• styles (optionnel)
  • backgroundColor: Couleur css pour le background de la sidebar (doit être un ton clair, par défaut #eaeaea)
  • fontFamily : String contenant la famille de police à utiliser (sans-serif est déjà configuré en fallback)
  • primaryColor : Couleur css pour agrémenter le module avec la couleur de l'application (par défaut #4c8eaf)
  • textColor : Couleur css du texte normal de la sidebar (doit être un ton sombre, par défaut #222)

Exemple d'utilisation

import { notificationsSidebar } from 'notifications-sidebar';


const options = {
	api: {
		endpoint: "https://api.staging.stonecode.io/notifications",
		resourceUrn: appStore.user.urn,
		token: authStore.token,
	},
	containerId: 'root',
	mercure: {
		endpoint: "https://api.staging.stonecode.io/.well-known/mercure",
		getToken: async (subscriberUrn: Urn) => {
			const test = new MercureTokenRequest();
			await test.patch({
				subscriber: subscriberUrn,
				transportTypeReference: `studio_notification_center`,
			});

			return test.token;
		},
	},
	options: {
		filter: true,
		minimizable: true,
		readOnLinkClick: true,
	},
	notify: (content, type) => message.open({ content, type, duration: 4 }),
	styles: { primaryColor: '#51bff1' },
}

// React use :
React.useEffect(() => {
	notificationsSidebar.initialize(options).then()
})

// JS/TS use :
window.onload = function (){
	notificationsSidebar.initialize(OPTIONS);
};

Méthode "watchTrigger"

Description

Cette méthode aura deux fonctions principales :

• Ajouter un eventListener au clic sur les éléments marqués d'une classe "nc-trigger" permettant l'ouverture du centre de notification.
• Ajouter un compteur de notification sur l'élément.

Aide

• Il peut y avoir plusieurs éléments "triggers" (et donc plusieurs compteurs de notifications), s'il y a plusieurs éléments avec la classe "nc-trigger", ils fonctionneront tous et seront tous mis à jour.
• La fonction watchTrigger peut être utilisé au changement d'url dans une application React pour vérifier qu'il n'y ait pas un nouveau trigger à activer (par exemple, changement de layout global de l'application, le bouton notification n'est plus dans le header mais dans un autre menu).

Exemple d'utilisation

Si l'application n'a qu'un bouton déclencheur, l'usage est assez simple, on utilisera watchTrigger une seule fois, par exemple une fois que l'utilisateur est connecté et le composant App monté :

import { notificationsSidebar } from 'notifications-sidebar';

// React use :
location = useLocation();

React.useEffect(() => {
	notificationsSidebar.watchTrigger();
}, [location]);

Si cependant, l'application change d'interface selon l'url active, on pourra l'utiliser en réagissant à la modification de l'url ; cela permettra d'activer les différents boutons déclencheurs et leur compteur de notification (initialement utilisé sur le frontend "studio" de Tokamap, voir usages entre les vues accueil et éditeur) :

import { notificationsSidebar } from 'notifications-sidebar';
import { useLocation }          from 'react-router-dom';

const Layout = () => {
	location = useLocation();

	React.useEffect(() => {
		notificationsSidebar.watchTrigger();
	}, [location])
    
    return location.pathname.startsWith('/fullscreen-editor/')
        ? <LayoutWithNotifCompactButton />
        : <LayoutWithNotifButton />;
}

Peut-être aussi utilisé sur n'importe quel projet javascript/typescript

Méthode "cleanPlugin"

Description

Cette méthode supprimera le plugin du HTML de la page. À utiliser par exemple au logout. Elle permettra de remettre à zéro toutes les variables / filtres liées au centre de notification avant un changement d'utilisateur.

Exemple d'utilisation

import { notificationsSidebar } from 'notifications-sidebar';

const App = () => {
	const onLogout = () => {
		// ... logout methods
            
        notificationsSidebar.cleanPlugin();  
	};
	
	return <AuthProvider onLogout={onLogout} {...otherAttributes} />
}

Réflexions

Roadmap

• Templates et events de base (4h restantes)
• Copie et adaptation du nécessaire ApiModel / ApiCollection / Models du service Notification (1h)
• Fetch & intégration des datas (2h)
• Mercure et logique du token (3h)
• Compteur et rafraichissement (Header du drawer + Pin du bouton) (2h)
• Styles et animations (2h)
• Build et packaging (2h) Supp:
• Options supplémentaires (drawer config, custom style, custom button, renderItem… ) (??)
• Liste étendue avec filtres (??)

En vrac

• Deux fichiers, les events & mécaniques VS un file par UI (antd, chakra...) ?
  • un fichier type ?
  • une balise script qui appel le main file et les autres.
• Fonctionnement full-event?

Tâches

Front

| État | Tâche | |------|------------------------------------------------------------------------------------------| | ✓ | Mercure adapter filtres | | ✓ | Mode "bouton fourni" | | ✓ | Afficher les filtres actifs sur le bouton "Afficher / Cacher les filtres" | | ✓ | Proposer un filtre "lu / non lu" coché par défaut sur non lu Peut être plus tard | | ✓ | Ajouter date / heure a la notif | | ✓ | Marquer comme lu quand on clique sur le lien | | ✓ | HideOnRead - option pour cacher une notification lue | | ✓ | Packager le tout | | x | Ajouter l'expediteur si pas systeme ? | | x | Scinder marquer comme lu en 2 boutons : Marquer l'écran comme lu / marquer tout comme lu | | x | Bouton voir les lus ? | | x | Style css faciliter l'overrride ? | | x | Export button | | x | Comment inclure le css de SlimSelect ?? | | x | Nettoyer les warnings @mathquis au start de exemple ? | | x | Failed to parse source map ? |

Back

| État | Tâche | |------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ✓ | Filtres à ajouter OK | | ✓ | Mercure token et envoi message | | ✓ | Dto read multiple -> ROUTE ALL ET ROUTE DTO AVEC IDS | | ✓ | Préparer une commande clean notif read X mois / X années | | ✓ | Maybe filtrer les notifs par un transport "Application" (front) ? | | ✓ | fixtures / migration ? Ajouter un label aux services (pour affichage des channels, exemple le channel d'export existe dans tout les services, j'affiche donc en préfixe le service, mais pour l'instant je ne capitalize que la partie centrale de l'urn, "Invoice", "Sales" ...) |