Structuration de l'application pour plusieurs calculettes

[DDorch]

L'introduction de plusieurs calculettes nécessite d'organiser le code source pour qu'il soit compréhensible et qu'on puisse facilement rajouter de nouvelles calculettes sans avoir à toucher le code existant et en évitant les redondances dans les codes dédiées à chaque calculette.

Proposition de structuration :

• app
  • index.ts (Component : Page d'index des formulaires)
  • index.html (Template : Page d'index des formulaires)
  • jacase.config.json (Liste des calculettes, voir exemple ci-dessous)
  • common (Sources et templates communs à toutes les calculettes)
  • formulaire.ts (Component formulaire : classe mère de tous les formulaires)
  • formulaire.html (Template commun des formulaires)
  • ...
  • exemple_calculette (Sources du formulaire "exemple_calculette")
  • exemple_calculette.config.json (Configuration du formulaire)
  • exemple_calculette.ts (Component du formulaire : classe fille de formulaire.ts)

Exemple de fichier jacase.config.json : [ {id: "exemple_calculette", name: "Exemple de calcul sur une équation scientifique"} ]

[manalaf]

Etant donné que l'interface des calculettes diffère de l'une à l'autre, il me semble nécessaire d'avoir un template relatif à chacune mis à part le template commun "formulaire.html". Ceci sera géré avec les différents selector de chaque classe fille et celui de la classe mère. Autrement, on va devoir cacher des blocks (avec hidden ou ngIf) relatifs à une calculette x dans formulaire.html et les afficher quand on renvoit vers cette calculette. Dis moi la solution qui te semble la plus adéquate, ou s'il y a bien une 3ème que je n'ai pas mentionné.

[manalaf]

Quand j'ai déplacé le template dans Formulaire.ts, j'ai eu l'erreur suivante: EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider for String!

[manalaf]

Je crois qu'il ne reconnait pas le nom du formulaire qui est paramètre du constructeur et qui est initialisé dans la classe fille avec "champ_cd"

[manalaf]

Au fait, on accède pas au constructeur de la classe fille où on initialise "nomForm". J'ai mis un console.log à l'interieur du constructeur et ça n'apparait pas sur la console.

[manalaf]

En mettant le template dans Formulaire.ts, on n'est plus capable d'accéder à la classe fille (bizarre). Le this.calculate qui est pris en compte est celui de la classe mère qui renvoi null. On ne peut plus récupérer le nom du json. C'est comme si la classe n'existait plus. J'ai essayé de la mettre dans directives (directives : [FormCondDistri, CHART_DIRECTIVES ...]), ça renvoie l'erreur suivante dans la console: EXCEPTION: Unexpected directive value 'undefined' on the View of component 'Formulaire'

[manalaf]

Désolée cette conversation devait avoir lieu dans #12

[DDorch]

Dans l'ancienne version, j'avais fait autrement. Si tu regardes le code du formulaire de Lechapt et Calmon (L&C), tu verras que le formulaire est tout ce qu'il y a de plus générique : http://zone.spip.org/trac/spip-zone/browser/_plugins_/hydraulic/trunk/formulaires/lechapt_calmon.html?rev=95765

Dans mon tableau fields, j'utilisais le paramètre "valeur par défaut" pour savoir si j'avais à afficher un input avec les 3 boutons ou un template (cf. condition d'affichage dans http://zone.spip.org/trac/spip-zone/browser/_plugins_/hydraulic/trunk/hyd_inc/formulaire_champs.html?rev=95765).

Dans le cas de L&C, tu verras que pour ce champ, on demande de charger le squelette form_lechapt_calmont_materiau (cf. http://zone.spip.org/trac/spip-zone/browser/_plugins_/hydraulic/trunk/hyd_inc/form_lechapt_calmon.class.php?rev=95765#L11).

Et dans ce squelette (qui est l'équivalent d'un template dans Angular2), on l'affichage du menu déroulant et du code javascript qui met à jour les champs M, L et N à partir du choix fait dans la liste(cf. http://zone.spip.org/trac/spip-zone/browser/_plugins_/hydraulic/trunk/hyd_inc/form_lechapt_calmont_materiau.html?rev=95765).

Je pense qu'on peut procéder de la même façon en gardant un template unique pour tous les formulaires avec la possibilité d'intégrer d'autres composants sur certains champs. Je suppose qu'intégrer un composant dans un autre ne doit pas être très compliqué en Angular2.

[DDorch]

Un article intéressant sur comment on intègre un composant dans un composant et comment on passe des informations entre les composants : https://www.themarketingtechnologist.co/building-nested-components-in-angular-2/

Une façon de procéder peut être :

• Il nous faut une variable permettant de savoir si on a affaire à un input ou à autre chose qu'on pourra appeler un "paramètre composite" (dans le cas de Lechapt et Calmon, il s'agit d'une drop list permettant de choisir le matériau).
• Dans le template formulaire, on peut utiliser ngIf pour afficher un tr avec un input ou un tr avec sélecteur appelé param_composite.
• Il nous faut un composant et un template qui se chargera de gérer le contenu du selecteur param_composite.

[DDorch]

J'ai réalisé un petit script de démonstration sur plunker : http://plnkr.co/edit/gNvzT2lnYvsw86lkF8cs?p=preview

Le composant CompositeField est intégrer dans le template du composant App. De cette façon, on peut avoir un champ composite par calculette, il suffit de créer à chaque fois un composant CompositeField mais qui sera importé d'un fichier différent pour chaque calculette.

[manalaf]

Quand j'ai essayé de réaliser la structuration ci-dessus, la page html ne s'affiche pas correctement elle est quasiment vide. Les variables de la classe Formulaire ne sont pas initialisées, le compilateur n'accède qu'à son constructeur.

[manalaf]

C'est bon j'ai résolu le problème.

[DDorch]

Un détail concernant e2ac94c : pour chaque calculette, je préférerais que les noms des répertoires et des fichiers soient les mêmes pour pouvoir les reconstituer et les reconnaître facilement (voir la proposition faite dans le sujet de cet issue.

Par exemple pour le calcul des conduites distributrices, on devrait avoir :

• app/cond_distri
  • app/cond_distri/cond_distri.config.json
  • app/cond_distri/cond_distri.ts

[manalaf]

Est ce que la forme des fichiers json te semble correcte ? Ou faudrait-il y faire des modifications ?

[DDorch]

J'ai regardé https://github.com/DDorch/jacase/blob/master/source/app/lechapt_calmon/lechapt_calmon.config.json et je pense qu'il y a un problème.

Dans le field et matériau, il devrait y avoir 4 champs : la liste déroulante du type de matériau et les 3 inputs L,M et N.

Je pense que dans fs_xxx, tu peux systématiquement mettre un item "name" pour gérer le titre du fieldset et un item fields pour y mettre la description de la liste des champs du fieldset. Tu pourras aussi rajouter un item option pour gérer le nombre de colonnes du tableau.

[DDorch]

Je me rends compte qu'il serait plus approprié de discuter de la structuration du fichier json dans le ticket dédié #18.

En voyant ce que tu as fait pour réaliser la drop-down list de choix du type de matériau, je me rends compte que tu as fait quelque chose qui est beaucoup plus générique que ce que j'avais réalisé pour la calculatrice en PHP. Dans la calculette en PHP, j'avais programmé dans des squelettes séparés les drop-down list et le contenu de celles-ci n'était pas présent dans la variable "fields". Avec ce que tu as fait, en fait, si on considère que le type de champ peut entièrement être décrit dans la variables "fields", il n'est pas nécessaire d'utiliser un composant ParamComposite pour traiter les drop-down list présents dans les différentes calculettes. Tu peux directement décrire la drop-down list dans le template Formulaire.ts à l'intérieur de la balise <tr *ngIf...>.

L'avantage par rapport à l'utilisation de ParamComposite, c'est que tu n'auras pas à gérer le passage des variables entre composants avec les décorateurs @input et @output et l'objet EventEmitter.

Pour les détails concernant la mise à jour des champs L, M et N, voir le ticket dédié #5.