diff --git a/CHANGELOG.md b/CHANGELOG.md index d0a06a5b9..ee30b1e06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,24 @@ and this project adheres to ## Unreleased + + +* [3party]: french translation of contact and company +* [3party]: show parent in list +* [3party]: change color for badge "child" +* [3party]: fix address creation +* [household members editor] finalisation of editor +* [AccompanyingCourse banner]: replace translation referrer (https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/70) +* [Location]: add location system in activity and RV (calendar). User can choose in location list or create a new location. + + + +## Test releases + +### Test release 2021-10-11 + +* Address: zoom on postal code geometry + fix origin of manually entered postal code + * add 3 new fields to PostalCode and adapt postal code command and fixtures * [Aside activity] Fixes for aside activity @@ -28,14 +46,15 @@ and this project adheres to * filter thirdparties in list * [FilterOrder]: add development kit for generating filter and ordering in list -* [AccompanyingCourse banner]: replace translation referrer (https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/70) -* [Location]: add location system in activity and RV (calendar). User can choose in location list or create a new location. - -## Test releases +* [Capitalization of names] person names are capitalized on creation, on prePersist event +* [On-The-Fly] modale works for showing, editing and creating person or thirdparty ; +* [AccompanyingCourse Resume page] associated persons list, can see household when hover, and with show on-the-fly modale when clicking person ; ### test release 2021-10-04 * [Household editor][UI] Update how household suggestion and addresses are picked; + + See https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/80 * [AddAddress] Handle address suggestion; * [CenterType][Create a person] when overriding the ACL rules, allow to show a PickCenterType when no centers are reachable by the default ACL. @@ -54,8 +73,31 @@ and this project adheres to https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/37 https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/221 -* [On-The-Fly] modale works for showing, editing and creating person or thirdparty ; -* [AccompanyingCourse Resume page] associated persons list, can see household when hover, and with show on-the-fly modale when clicking person ; +* [Household editor] suggest only temporarily addresses; + See https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/82 +* On-The-Fly modale works for showing, editing and creating person and thirdparty ; +* AccompanyingCourse Resume page: list associated persons by household, see household when hover, and show on-the-fly modale when clicking on person ; +* [AddAddress] Handle address suggestion; +* [AddAddress][Entity address]: add a link between address and address reference; +* [Household editor] suggest household by comparing the temporary addresses from courses; -## Test release yyyy-mm-dd + See https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/81 +* On-The-Fly modale works for showing, editing and creating person and thirdparty + +## Test released + + + +## Stable releases + +No stable releases for v2+ + diff --git a/CONVENTIONS.md b/CONVENTIONS.md new file mode 100644 index 000000000..4dcdb08ea --- /dev/null +++ b/CONVENTIONS.md @@ -0,0 +1,383 @@ +# Conventions Chill + +en cours de rédaction + + +## Assets: nommage des entrypoints + +Trois types d'entrypoint: + +* application vue (souvent spécifique à une page) -> préfixé par `vue_`; +* code js/css qui est réutilisé à plusieurs endroits: + * ckeditor + * async_upload (utilisé pour un formulaire) + * bootstrap + * chill.js + * ... + + => on préfixe `mod_` +* code css ou js pour une seule page + * ré-utilise parfois des "foncitionnalités": ShowHide, ... + => on préfixe `page_` + + +Arborescence: + +``` +# Sous Resources/public + +- chill/ => theme (chill) + - chillmain.scss -> push dans l'entrypoint chill +- lib/ => ne vont jamais dans un entrypoint, mais sont ré-utilisés par d'autres + - ShowHide + - Collection + - Select2 +- module/ => termine dans des entrypoints ré-utilisables (mod_) + - bootstrap + - custom.scss + - custom/ + - variables.scss + - .. + - forkawesome + - AsyncUpload +- vue/ => uniquement application vue (vue_) + - _components + - app +- page/ => uniquement pour une seule page (page_) + - login + - person + - personvendee + - household_edit_metadata + - index.js +``` + +## Organisation des feuilles de styles + +Comment s'échaffaudent les styles dans Chill ? + + +1. l'entrypoint **mod_bootstrap** (module bootstrap) est le premier niveau. Toutes les parties(modules) de bootstrap sont convoquées dans le fichier ```bootstrap.js``` situé dans ```ChillMainBundle/Resources/public/module/bootstrap```. + * Au début, ce fichier importe le fichier ```variables.scss``` qui détermine la plupart des réglages bootstrap tels qu'on les a personnalisés. Ce fichier surcharge l'original, et de nombreuses variables y sont adaptées pour Chill. + * On veillera à ce qu'on puisse toujours comparer ce fichier à l'original de bootstrap. En cas de mise à jour de bootstrap, il faudra générer un diff, et adapter ce diff sur le fichier variable de la nouvelle version. + * A la fin on importe le fichier ```custom.scss```, qui comprends des adaptations de bootstrap pour le préparer à notre thème Chill. + * ce ```custom.scss``` peut être splitté en plus petits fichiers avec des ```@import 'custom/...'``` + * L'idée est que cette première couche bootstrap règle un partie importante des styles de l'application, en particulier ce qui touche aux position du layout, aux points de bascules responsive, aux marges et écarts appliqués par défauts aux éléments qu'on manipule. + +2. l'entrypoint **chill** est le second niveau. Il contient le thème Chill qui est reconnaissable à l'application. + * Chaque bundle a un dossier ```Resources/public/chill``` dans lequel on peut trouver une feuille sass principale, qui est éventuellement splittée avec des ```@imports```. Toutes ces feuilles sont compilées dans un unique entrypoint Chill, c'est le thème de l'application. Celui-ci surcharge bootstrap. + * La feuille chillmain.scss devrait contenir les cascades de styles les plus générales, celles qui sont appliquées à de nombreux endroits de l'application. + * La feuille chillperson.scss va aussi retrouver des styles propres aux différents contextes des personnes: person, household et accompanyingcourse. + * Certains bundles plus secondaires ne contiennent que des styles spécifiques à leur fonctionnement. + +3. les entrypoints **vue_** sont utilisés pour des composants vue. Les fichiers vue peuvent contenir un bloc de styles scss. Ce sont des styles qui ne concernent que le composant et son héritage, le tag ```scoped``` précise justement sa portée (voir la doc). + +4. les entrypoints **page_** sont utilisés pour ajouter des assets spécifiques à certaines pages, le plus souvent des scripts et des styles. + + +## Taguer du code html et construire la cascade de styles + +L'exemple suivant montre comment taguer sans excès un élément de code. On remarque que: +* il n'est pas nécessaire de taguer toutes les classes intérieures, +* il ne faut pas répéter la classe parent dans toutes les classes enfants. La cascade sass va permettre de saisir le html avec souplesse sans alourdir la structure des balises. +* souvent la première classe sera déclinée par plusieurs classes qui commencent de la même manière: ```bloc-dark``` ajoute juste la version sombre de ```bloc```, on ne met pas ```bloc dark```, car on ne souhaite pas que la classe ```dark``` de ```bloc``` interagisse avec la même classe ```dark``` de ```table```. On aura donc un élément ```bloc bloc-dark``` et un élément ```table table-dark```. + +```html +
+

mon titre

+ +
+``` + +Finalement, il importe ici de définir ce qu'est un bloc, ce qu'est une zone d'actions et ce qu'est un bouton. Ces 3 éléments existent de manière autonome, ce sont les seuls qu'on tagge. + +Par exemple pour mettre un style au titre on précise juste h3 dans la cascade bloc. + +```sass +div.bloc { + // un bloc générique, utilisé à plusieurs endroits + &.bloc-dark { + // la version sombre du bloc + } + h3 {} + ul { + // une liste standard dans bloc + li { + // des items de liste standard dans bloc + } + } +} +div.mon-bloc { + // des exceptions spécifiques à mon-bloc, + // qui sont des adaptations de bloc +} + +ul.record_actions { + // va uniformiser tous les record_actions de l'application + li { + //... + } +} + +.btn { + // les boutons de bootstrap + .btn-edit { + // chill étends les boutons bootstrap pour ses propres besoins + } +} + +``` + +## Render box + + +## URL + +### Nommage des routes + +:::warning +Ces règles n'ont pas toujours été utilisées par le passé. Elles sont souhaitées pour le futur. +::: + +Les routes sont nommées de cette manière: + +`chill_bundle_entite_action` + +1. d'abord chill_ (pour tous les modules chill) +2. ensuite une string qui est identique, par bundle +3. si le point est un point d'api (json), alors ajouter la string `api` +4. ensuite une string qui indique sur quelle entité porte la route, voire également les sous-entités +5. ensuite une action (`list`, `view`, `edit`, `new`, ...) + +Le fait d'indiquer `api` en 3 permet de distinguer les routes d'api qui sont générées par la configuration (qui sont toutes préfixées par `chill_api`, de celles générées manuellement. (Exemple: `chill_api_household__index`, et `chill_person_api_household_members_move`) + +Si les points 4 et 5 sont inexistants, alors ils sont remplacés par d'autres éléments de manière à garantir l'unicité de la route, et sa bonne compréhension. + +### URL + +Les URL respectent également une convention: + +#### Pour les pages html + +:::warning +Ces règles n'ont pas toujours été utilisées par le passé. Elles sont souhaitées pour le futur. +::: + +Syntaxe: + +``` +/{_locale}/bundle/entity/{id}/action +/{_locale}/bundle/entity/sub-entity/{id}/action +``` + +Les éléments suivants devraient se trouver dans la liste: + +1. la locale; +2. un identifiant du bundle +3. l'entité auquel il se rapporte +4. les éventuelles sous-entités auxquelles l'url se rapport +5. l'action + +Ces éléments peuvent être entrecoupés de l'identifiant d'une entité. Dans ce cas, cet identifiant se place juste après l'entité auquel il se rapporte. + +Exemple: + +``` +# liste des échanges pour une personne +/fr/activity/person/25/activity/list + +# nouvelle activité +/fr/activity/activity/new?person_id=25 + +``` + +#### Pour les API + +:::info +Les routes générées automatiquement sont préfixées par chill_api +::: + +Syntaxe: + +``` +/api/1.0/bundle/entity/{id}/action +/api/1.0/bundle/entity/sub-entity/{id}/action +``` + +Les éléments suivants devraient se trouver dans la liste: + +1. la string `/api/` et puis la version (1.0) +2. un identifiant du bundle +3. l'entité auquel il se rapporte +4. les éventuelles sous-entités auxquelles l'url se rapport +5. l'action + +Ces éléments peuvent être entrecoupés de l'identifiant d'une entité. Dans ce cas, cet identifiant se place juste après l'entité auquel il se rapporte. + +## Règles UI chill + +### Titre des pages + +#### Chaque page contient un titre + +Chaque page contient un titre dans la balise head. Ce titre est normalement identique à celui de l'entête de la page. + +Astuce: il est possible d'utiliser la fonction `block` de twig pour cela: + +```htmlmixed= +{% block title "Titre de la page" %} + +{% block content %} +

+ {{ block('title')}} +

+{% endblock %} +``` + + +### Utilisation des `entity_render` + +#### En twig + +Les templates twig doivent toujours utiliser la fonction chill_entity_render_box pour effectuer le rendu des éléments suivants: + +* User +* Person +* SocialIssue +* SocialAction +* Address +* ThirdParty +* ... + +Exemple: + +``` +address|chill_entity_render_box +``` + +Justification: + +* des éléments sont parfois personnalisés par installation (par exemple, le nom de chaque utilisateur sera suivi par le nom du service) +* pour rationaliser et rendre semblable les affichages +* pour simplifier le code twig + +A prevoir: + +* toujours trois positions: + * inline + * block + * item (dans un tableau, une ligne) + +> block et item sont en fait la même option passée au render_box: render: bloc. Il y a aussi ‘raw’ pour le inline, et ‘label’ pour une titraille configurable avec des options. + +> quand on passe l’option render: bloc, on peut placer le render_box dans une boucle for plus large qui fonctionne avec la classe flex-table ou la classe flex-bloc, ce qui donnera un affichage en rangée (table) ou en blocs. [name=Mathieu] + + + +#### En vue + +Il existe systématiquement une "box" équivalente en vue. + +#### Lien vers des sections + +A chaque fois qu'on indique le nom d'une personne, un parcours, un ménage, il y a toujours: + +* un lien pour accéder à son dossier (pour autant que l'utilisateur ait les droits d'accès); +* à moins qu'il ne soit indiqué dans une phrase, l'icône de son dossier avant ou après (donc un bonhomme pour la personne, une maison pour le ménage, un fa-random pour les parcours); + +Ces éléments sont toujours proposé par des `render_box` par défaut. Des options permettent de les désactiver dans des cas particuliers + +> à discuter, quelques réflexion: +> quelle est la logique qui domine pour les boutons ? on a symbolisé les 4 actions du crud par des couleurs: bleu(show) orange(edit) vert(create) et rouge(delete). +> Est-ce que c'est ça qui prime, et comment ça s'articule avec la logique des pictos ? +> Par exemple, il pourrait être logique d'utiliser l'oeil bleu pour voir l'objet, qu'il s'agisse d'une personne ou d'un parcours, ce serait plutôt le contexte, et l'infobulle (title) qui préciserait le contexte. +> Je pense que les pictos de boutons doivent faire référence à l'action, mais pas à l'objet. Autrement dit je n'utiliserais jamais l'icone du ménage ou du parcours dans les boutons. +> Pour représenter les ménages et les parcours, je pense qu'il faudrait trouver autre chose que forkawesome. Si c'est des pictos, trouver un motif différents et de tailles différente. Réfléchir à un couplage picto-couleur-forme différent, qui exprime le contexte et qui se distingue bien des boutons. +> Idem pour les badges, il faut une palette de badge qui couvre tous les besoins: socialIssue, socialActions, socialReason, members, etc. [name=Mathieu] + +### Formulaires + +#### Vocabulaire: + +Utiliser toujours: + +* `Créer` dans un `bt bt-create` pour les **liens** vers le formulairep pour créer une entité (pour parvenir au formulaire); +* `Enregistrer` dans un `bt bt-save` pour les boutons "Enregistrer" (dans un formulaire édition **ou** création); +* `Enregistrer et nouveau` +* `Enregistrer et voir` +* `Modifier` dans un `bt bt-edit` pour les **liens** vers le formulaire d'édition +* `Dupliquer` (préciser là où on peut le voir) +* `Annuler` pour quitter une page d'édition avec un lien vers la liste, ou le `returnPath` + +#### Retour après un enregistrement + +Après avoir cliqué sur "Créer" ou "Sauver", la page devrait revenir: + +* vers le returnPath, s'il existe; +* sinon, vers la page "vue". + + +### Bandeaux contenant les boutons d'actions + +Les boutons sont toujours dans un bandeau "sticky-form" dans le bas du formulaire ou de la page de liste. + +Si pertinent: + +* Le bandeau contient un bouton "Annuler" qui retourne à la page précédente. Il est obligatoire pour les formulaires, optionnel pour les listes ou les pages "résumés" +* Ce bouton "annuler" est toujours à gauche + +``` + +``` + +### Messages flash + +#### A la création d'une entité + +A chaque fois qu'un élément est créé par un formulaire, un message flash doit apparaitre. Il indique: + +> "L'élément a été créé" + +Le nom de l'élément peut être remplacé par quelque chose de plus pertinent: + +> * L'activité a été créée +> * Le rendez-vous a été créé +> * ... + + +#### A l'enregistrement d'une entité + +A chaque fois qu'un élément est enregistré, un message flash doit apparaitre: + +> * Les données ont été modifiées +> + +#### Erreur sur un formulaire (erreur de validation) + +En tête d'un formulaire, un message flash doit indiquer que des validations n'ont pas réussi: + +> Ce formulaire contient des erreurs + +Les erreurs doivent apparaitre attachée au champ qui les concerne. Toutefois, il est acceptable d'afficher les erreurs à la racine du formulaire s'il était complexe, techniquement, d'attacher les erreurs. + +### Liens de retour + +A chaque fois qu'un lien est indiqué, vérifier si on ne doit pas utiliser la fonction `chill_return_path`, `chill_forward_return_path` ou `chill_return_path_or`. + +* depuis la page liste, vers l'ouverture d'un élément, ou le bouton création => utiliser `chill_path_add_return_path` +* dans ces pages d'éditions, + * utiliser `chill_return_path_or` dans le bouton "Cancel"; + * pour les boutons "enregistrer et voir" et "Enregistrer et fermer" => ? + diff --git a/src/Bundle/ChillActivityBundle/DataFixtures/ORM/LoadActivity.php b/src/Bundle/ChillActivityBundle/DataFixtures/ORM/LoadActivity.php index ce32143f5..a23b2d73f 100644 --- a/src/Bundle/ChillActivityBundle/DataFixtures/ORM/LoadActivity.php +++ b/src/Bundle/ChillActivityBundle/DataFixtures/ORM/LoadActivity.php @@ -141,7 +141,6 @@ class LoadActivity extends AbstractFixture implements OrderedFixtureInterface, C $ref = 'activity_'.$person->getFullnameCanonical(); for($i = 0; $i < $activityNbr; $i ++) { - print "Creating an activity type for : ".$person." (ref: ".$ref.") \n"; $activity = $this->newRandomActivity($person); $manager->persist($activity); } diff --git a/src/Bundle/ChillCustomFieldsBundle/Resources/views/Form/fields.html.twig b/src/Bundle/ChillCustomFieldsBundle/Resources/views/Form/fields.html.twig index a19f22e6f..e4e611b8d 100644 --- a/src/Bundle/ChillCustomFieldsBundle/Resources/views/Form/fields.html.twig +++ b/src/Bundle/ChillCustomFieldsBundle/Resources/views/Form/fields.html.twig @@ -1,16 +1,16 @@ {# * Copyright (C) 2014, Champs Libres Cooperative SCRLFS, - * + * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License as * published by the Free Software Foundation, either version 3 of the * License, or (at your option) any later version. - * + * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Affero General Public License for more details. - * + * * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . #} @@ -33,7 +33,7 @@ {# CFChoice : render the different elements in a choice list #} {% block cf_choices_row %}

{{ 'Choices'|trans }}

- +
@@ -47,8 +47,8 @@ {% endfor %}
- - + + {# we use javascrit to add an additional element. All functions are personnalized with the id ( = form.vars.id) #} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue new file mode 100644 index 000000000..1f76c8a5b --- /dev/null +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue index be332523d..c40cc9cbc 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue @@ -1,5 +1,8 @@ diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig index c00e8aed1..e99c1dc1a 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig @@ -94,7 +94,7 @@