Tableaux
Présentation
L'objet de cette page est de présenter la documentation utilisateur concernant les tableaux de la version 4 d'OpenFlyers.
Cahier des charges
Icône accès internet
TODO: A déplacer dans une page plus générale.
Cette icône est là pour indiquer à l'utilisateur si l'application fonctionne en mode connecté ou en mode déconnecté.
En mode connecté : il y a un accès internet, les informations sont donc en temps réel.
En mode déconnecté : il n'y a pas d'accès internet, les informations ne sont pas en temps réel.
Icône BDD
TODO: A déplacer dans une page plus générale.
L'icône BDD est là pour montrer l'état de ses données. A côté de cette icône, il y a également une icône qui indique si l'application est en mode connectée ou déconnectée.
L'icône BDD dispose de plusieurs états. Ces états sont représentés par l'ajout d'une icône sur l'icône BDD :
- icône BDD + gif animé : Les données sont en cours de synchronisation. Cet état apparait après la connexion de l'utilisateur.
- icône BDD + check : Les données sont synchronisées (il n'y a pas de différence entre la base de données et les données affichées). A essayer : cet état pourrait appraître dès qu'il y a une sauvegarde.
- icône BDD grisée : Les données ne sont pas synchronisées avec la base de données.
- icône BDD + panneau warning : Certaines données n'ont pas pû être sauvegardées.
- icône BDD + sens interdit : Il y a une erreur dans la page courante qui empêchera la sauvegarder des données. Cet état est prioritaire sur tous les autres.
- Pour le moment lorsque l'on change de page alors que des données ne peuvent être sauvegardées, alors ces données sont oubliées. Avant il y aura quand même un pop-up pour signaler que des données ne vont pas être sauvegardées. A terme il faut pouvoir changer de page tout en gardant en mémoire les données non sauvegardées (et signaler ces données via l'état warning).
En plus de l'icône BDD il y a une zone d'information qui apparaît lorsque l'on survole - ou que l'on clique, sur tactile - l'icône. Cette zone permet donner plus de détails à l'utilisateur sur l'état de l'icône. Par exemple, il peut y a voir comme informatino :
- la date et l'heure de la dernière synchronisation
- la ou les erreurs détectées
- etc.
Moteur DDT
Il doit y avoir le moins possible de fichiers JS dédiés au métier :
- DDT arborescence : à voir si il peut être intégré au moteur.
- DDT relevé de comptes (comptabilité) : contient du métier qui ne peut être intégré au moteur.
Données
Le moteur DDT côté JavaSript ne traite qu'avec des données au format JSON. Les structures des tableaux sont stockées au format XML. Il y a donc côté PHP un parsage de ses structures afin de les convertir au format JSON. Lors de ce parsage les structures sont combinées aux donnés sotckées en base de données. L'une des tâches du moteur DDT est de sotcker dans la base de données client les tableaux au format JSON. Cette tâche a pour but de faire fonctionner l'application en mode déconnecté.
Données reçues = contenu + comportement IHM
Comportement IHM :
- Interactions entre cellules : des cellules sont rattachées à d’autres cellules
- Lignes enregistrables –> cellules nécessaires
Types de cellule
A noter : les cellules peuvent être en lecture seule.
Check box
Check box multiple
Affiché dans une pop-up.
Il faudra pouvoir via un lien ou autre tout cocher / tout décocher.
Combo box
Saisie libre
Texte
Nombre à virgule
+ avec intervalle
Nombre entier
+ avec intervalle
DateTime
Il faudra peut-être une solution pour le tactile et une pour le clavier.
Sur clavier il est par exemple plus rapide de remplir un input contenant __/__/__ __:__. On peut également coupler les deux solutions : en plus de l'input il y a une icône qui permet d'accéder à l'interface graphique.
Date
Time
Thumbnail (photo)
Textearea
Affiché dans une pop-up.
A voir si ce type est nécessaire.
Fonctionnalités
Touche TAB
La touche tabulation doit permettre de passer d'une cellule à une autre.
Touches HAUT/BAS
Les touches HAUT et BAS doivent permettrent de se déplacer d'une ligne à une autre (tout en restant dans la colonne active).
Attention : dans une combobox les flèches HAUT/BAS permettent de parcourir la combobox.
Les flèches GAUCHE / DROITE en peuvent être utilisés car elles permettent de naviguer dans une cellule.
Déplacement
Cacher les colonnes
Pas urgent.
Système de page
Le système de pagination permet d'accéder à d'autres DDT depuis un premier DDT.
Exemple d'utilisation :
- sans pagination :
Dans le tableau qui liste les utilisateurs il y a une action qui permet de voir les validités d'un utilisateur. Cette action amène vers une nouvelle page de l'application contenant la liste des validités de l'utilisateur.
- avec pagination :
Un clic sur l'action amène vers ce DDT mais sans changer de page dans l'application. C'est une nouvelle page "dans le DDT" qui est ouverte. Grâce à cela il est possible de revenir sur le DDT des utilisateurs.
Détail de ce qu'il se passe :
- A l'arrivée sur la page, la pagination du DDT 1/1 + deux flèches inactives. (voir la pagination n'est pas affichée).
- Clic sur les validités de toto : le premier DDT s'efface pour laisser la place au nouveau. La pagination affiche 2/2, la flèche de gauche est active et affiche Liste des utilisateurs
- Clic sur la flèche de gauche :
- On revient sur le premier DDT
- Pagination : 1/2, la flèche de gauche est inactive, la flèche de droite est active et affiche Validités de toto.
- Si l'utilisateur clique sur les validités de tata : changement de DDT, pagination 2/2 (les validités de toto sont oubliés).
- Si on revient sur le premier DDT la flèche de droite affichera Validités de tata.
Système d'onglet
Le système d'onglet permet de séparer une information en plusieurs thèmes. Le but étant de ne pas avoir trop de colonnes dans un DDT.
Exemple pour un utilisateur : il y aura un onglet pour les infos persos, un pour voir son solde, etc.
Options de ligne
Chaque ligne à un menu contextuel qui contient différentes actions.
Exemple d'action :
- Annuler les modifications
- Ajout d'une ligne
- Suppression de la ligne
- Accéder aux validités de l'utilisateur
- etc.
Liens entre cellules
Sur le même principe que sous Excel des cellules peuvent être reliées entre elles.
Exemple :
Il y a 3 colonnes A, B et C.
C est le réultat de l'addition du contenu de A et de B. Par conséquent lorsque A ou B sont modifiés alors C doit être mis à jour.
Edition d'une cellule
Lors de l'édition d'une cellule, la ligne qui la contient est plus foncée que les autres.
S'il y a une erreur de saisie alors la cellule devient rouge. En plus de ça, les lignes contenant une erreur sont identifiés par à définir : soit par une icône dans la colonne de gauche soit par un changement de la couleur du texte dans la colonne de gauche.
Plaque tectonique
Dans un tableau certaines données doivent être toujours visibles. Les données concernées sont dans la ou les premiers lignes du tableau (l'en-tête) ainsi que dans la ou les premières colonnes. Par conséquent lorsque l'on se déplace dans le contenu du tableau - via les scrollbars horizontales et verticales - il faut que ces lignes et/ou colonnes restent fixes.
La solution est de considérer le contenu du tableau comme une plaque tectonique. Lorsque l'on va la déplacer celle-ci va passer "sous" les premières lignes/colonnes.
Mode Pointage
Les tableaux DDT de comptabilité présentent un mode Pointage, qui permet d'enregistrer définitivement des écritures. Ce mode est inactif par défaut. Des éléments graphiques permettent de passer d'une étape à l'autre.
Inactif
En bas de tableau, un bouton bleu Pointer est présent. On clique dessus pour entrer dans le mode Pointage.
<html4strict>
</html4strict>
Actif
- Le bouton Pointer est remplacé par un texte simple à côté duquel on trouve une icône permettant de sortir du mode Pointer.
- Un bouton Valider apparaît. Il est alors dans un état inactif : bouton plat gris avec texte en gris, peu de contraste.
<html4strict>
</html4strict>
- La sélection d'une ou plusieurs lignes du DDT rend le bouton Valider actif. Il devient vert et légèrement bombé, comme les autres boutons de validation de l'application.
<html4strict>
</html4strict>
- Dans le tableau, les lignes sélectionnées deviennent légèrement plus foncées grâce à l'application de la classe .modify.