Afficher la liste des notifications dans l'app

L'application devrait permettre d'afficher les notifications sous la forme d'une liste. Cette dernière devrait permettre à l'utilisateur de distinguer entre les notifications et non lues. Un clic sur une notification devrait marquer celle-ci comme étant lue et mener l'utilisateur vers l'écran concernée. Pour ce faire, il serait judicieux de partager la logique avec #189.

### Endpoints
Une collection Postman est disponible pour les membres d'ApplETS.

Si vous n'y avez pas accès, vous pouvez consulter les appels AJAX effectués sur [MonÉTS](https://portail.etsmtl.ca/).

Pour ce faire, naviguez vers votre page [MonÉTS](https://portail.etsmtl.ca/) et assurez-vous que votre tableau de bord comporte le portlet des notifications. Ensuite, ouvez l'inspecteur de votre navigateur.

L'onglet « Network » avec le filtre « XHR » vous permettra de visualiser les appels AJAX.
Alternativement, dans l'onglet « Sources », consultez `(index)` pour connaître dont ceux-si sont utilisés.

Au moment de la création de cet issue, il est possible de consulter, entre autres, les appels AJAX suivants :
Cliquez pour développer ou masquer les extraits de code

Archivage :
```javascript
onSubmitClick: function() {
//archiver les notfications

ko.utils.arrayForEach(this.Notifications(), function(item) {
item.IdDossier = 2; //Dossier archive
$.ajax({
url: '/api/notification/' + item.Id,
type: 'PUT',
data: item,
success: function (result) {

}
});
});
$("#wid-notifications-enseignants").hide('blind');
}
```
Chargement des nouvelles notifications :
```javascript
loadNewNotifications: function () {
//Vérifier si nouvelles notifications on été ajoutés depuis que la page est ouverte
//seulement utile si dans dossier reception
if (notification.viewModel.selectedDossier() == notification.viewModel.idDossierReception()){
var request = $.ajax({
url: '/api/notification/dossier/' + notification.viewModel.selectedDossier(),
type: 'GET',
cache:false,
data: JSON.stringify({skip: 0, nbMessages: 10}),
contentType: "application/json; charset=utf-8",
success: function (data) {

ko.utils.arrayForEach(data, function (item) {
var isInArray = false;
ko.utils.arrayForEach(notification.viewModel.notifications(), function(notification){
if ( notification.Id == item.Id)
{
isInArray = true;
}
});
if (!isInArray)
{
item.recentlyAdded = true;
notification.viewModel.newNotifications(notification.viewModel.newNotifications()+1)
notification.viewModel.notifications.splice(0,0,item); //add on top
}
});
//notification.viewModel.pendingRequest(false);
}});
request.fail(function (jqXHR, textStatus, errorThrown) {
console.log("ERROR: obtenir notifications du dossier " + notification.viewModel.selectedDossier());
console.log("textStatus: " + textStatus);
console.log("errorThrown " + errorThrown);
});
request.always(function () {
// console.log("loadNewNotifications() complete");
//notification.viewModel.pendingRequest(false);
});
}
}
```

Chargement des notifications :
```javascript
var request = $.ajax({
url: '/api/notification/dossier/' + notification.viewModel.selectedDossier(),
type: 'GET',
cache:false,
data: {skip: notification.viewModel.notifications().length, nbMessages: 10 },
contentType: "application/json; charset=utf-8",
success: function (data) {
//notification.viewModel.notifications(data);
if (data !== null){
if (data.length > 0)
{
ko.utils.arrayForEach(data, function (item) {
notification.viewModel.notifications.push(item);
})
notification.viewModel.notifications.sort(notification.viewModel.sortNotificationByDateAffichageDesc);
}
if (data.length < 10 ) {
$("#notification_load-more").css("display","none");
}

notification.viewModel.newNotifications(0);
}
notification.viewModel.pendingRequest(false);
}});
request.fail(function (jqXHR, textStatus, errorThrown) {
console.log("ERROR: obtenir notifications du dossier " + notification.viewModel.selectedDossier());
console.log("textStatus: " + textStatus);
console.log("errorThrown " + errorThrown);
animatePortletError('#notification-zone-notification', "Impossible de récupérer les notifications.");
});
request.always(function () {
// console.log("loadNotifications() complete");
$('#wid-id-message .jarviswidget-loader').css("display", "none");
notification.viewModel.pendingRequest(false);
**});**
```

Voici un tableau présentant les endoints qui ont été utilisé dans ce code.

| API | Description |
|------------------------------------------------------------------------------ |-------------------------------------------------------------------------------------------- |
| PUT api/notification/{id} | Modification / Archivage de la notification (dans le dossier spécifié) |
| GET api/notification/dossier/{idDossier}?skip={skip}&nbMessages={nbMessages} | Obtention de toutes les notifications du dossier spécifié de l'utilisateur (limite de 100) |
| GET api/notification | Obtention de toutes les notifications de l'utilisateur **(à éviter, car la requête peut durer longtemps)** |

### Contenu des notifications
Si vous êtes ou étiez un étudiant de l'ÉTS, afin de vous renseigner davantage à propos du contenu des notifications, il serait possible de consulter directement le site web [MonÉTS](https://portail.etsmtl.ca/). En effet, le portlet « Notifications » vous permet de consulter les notifications vous ayant été transmises. Pour consulter le contenu de celles-ci, il suffit d'observer l'activité réseau en utilisant l'inspecteur de votre navigateur.

Sinon, effectuez simplement une requête GET vers `https://portail.etsmtl.ca/api/notification` après vous êtes authentifié via une requête POST vers `https://portail.etsmtl.ca/api/authentification`. Pour l'authentification, spécifiez dans l'entête, `Content-Type: application/json`. De plus, le corps doit contenir votre code universel et votre mot de passe :
```json
{
"Username": "ens\\AX12345",
"Password": ""
}
```
Le cookie obtenu vous permettra d'effectuer la plupart des autres requêtes.