feat: Add company data filter to program catalog #1400
Conversation
Introduced a new company data filter to improve the customization of program listings based on selected company attributes. The filter integration enables toggling visibility and selection of programs through company-specific criteria, enhancing user navigation and interaction within the program catalog. Modifications include updates to related components, data handling, and eligibility checks to align with the new filter functionality.
dolemoine
changed the title
Updated ProgramFiltersAccordion component to enhance filter visibility control by replacing `shouldDisplayFilter` with `canDisplayFilter` and introducing `companyDataFilterVisibilityClass`. This change ensures proper class assignment based on company's data presence, improving clarity and maintainability of the filter logic. Adjusted active accordion index initialization for better UI responsiveness.
This commit introduces a newline to enhance code readability and maintain formatting consistency. While it may seem minor, such adjustments contribute to better organized code and ease of future maintenance.
Replaced hardcoded filter keys with `FilterItemKeys` enum for consistency and maintainability. Updated related components, stores, and utility functions to adopt the new structure. This simplifies key management and improves code readability.
Replaced hardcoded timeouts with a shared `timeOut` constant to enhance maintainability in e2e tests. Simplified logic in `usedTrack.ts` for clarity and updated Playwright reporter configuration for better control on CI systems.
… logic. Moved the company filter configuration into a standalone constant and adjusted its rendering logic. This enhances code clarity and maintainability by isolating the company filter from other filters in the accordion.
Replaced the `companyDataAccordion` ref with a primitive `number` value since reactivity was not required. Simplifies the code and avoids unnecessary overhead.
Updated filter to include conditional grey background and text for inactive state. Improved layout with grid rows for better alignment and spacing. This enhances the component's visual hierarchy and accessibility.
Introduce the `resetFilter` method to reset specific filters in the program store. Updated the `ProgramFilter` logic to utilize `resetFilter` for improved filter management consistency. Minor import adjustments were also made for better organization.
Introduced a mapping object to convert StructureSize enums to user-friendly text labels. Updated the company size filter to display these labels, improving clarity and usability of the company data filtering component.
There was a problem hiding this comment.
Remarque : Dans le ticket référencé, il faut signaler à JB et coline que le point suivant n'est pas traité dans le reste du ticket (s'ils veulent créer une autre carte sur ce point):
"En tant qu'entreprise, j'arrive sur une fiche aide depuis une recherche google, je m'identifie depuis la fiche aide et m'aperçois que je ne suis pas éligible à cette aide. Un CTA "voir mes aides éligibles" m'amène sur le catalogue des aides filtrées pour mon entreprise. "
Praise ++ sur le rendu vraiment très sympa !
Je ne reviens sur la petite remarque sur le tag effectif que je t'ai fait en direct.
J'ai par contre un autre point en bloquant : le filtre d'entreprise que tu as ajouté est visible et présent dans le résultat par aide du parcours je ne sais pas par ou commencer. Je pense que ce n'est pas voulu.
| [FilterItemKeys.typeAid]: [], | ||
| [FilterItemKeys.themeType]: '', | ||
| [FilterItemKeys.regionAid]: [], | ||
| [FilterItemKeys.operatorAid]: [], | ||
| [FilterItemKeys.companyData]: false |
There was a problem hiding this comment.
Ma seule autre remarque de la PR : Je me demande ce que cet enum apporte ?
Je trouve (préférence perso, à disctuer avec les autres devs) les calls "programFilters[FilterItemKeys.themeType]" un peu perturbants et un poil moins lisible que programFilters.X . Quel avantage au changement ?
There was a problem hiding this comment.
Bonne question, il me semble que je l'avais ajouté car j'avais besoin à un moment donné de vérifier qu'une key passée en param était bien un des enum, mais en revoyant le code je me dis que je peux probablement revenir à la version précédente. À vérifier tout de même, il y a sûrement une bonne raison si j'ai fait cette modif 😆
There was a problem hiding this comment.
@yvalentin en deuxième review pour voir ce que lui en pense ;)
# Conflicts: # apps/web-e2e/src/config.ts # apps/web-e2e/src/programResults.spec.ts # apps/web-e2e/src/projectResults.spec.ts # apps/web/src/components/identification/TeeRegisterModal.vue
Replaced all instances of `CompanyDataStorage` with `CompanyData` for streamlined and consistent company data access. Updated methods and references accordingly to enhance maintainability and readability across components.
Replaced `CompanyDataStorage` with `CompanyData` for improved consistency and modernized data handling. Adjusted related method calls and imports, ensuring better alignment with current code practices and reducing redundancy. Updated UI logic to reflect changes in navigation store behavior.
Updated the icon span with a new class for padding and adjusted its pseudo-element styling to improve alignment and consistency. Ensures better visual presentation across the component.
Reinstates the link for the "NotEligible" program state, redirecting users to the catalog of eligible programs. This provides a clearer path for users to explore relevant assistance options.
|
Réponse à tes commentaires généraux sur la PR :
Bien vu, j'ai réactivé le CTA (qui était présent mais commenté comme le filtrage n'était pas fonctionnel)
Ça a été vu avec Coline, on le laisse bien présent, j'ai juste fait une petite adaptation pour que le checkbox soit disable sur le parcours (il n'y a effectivement pas d'intérêt de proposer le choix sur le filtrage des résultats avec les données d'entreprise) |
Renamed the `programFiltersType` type to `ProgramFiltersType` across the codebase for consistency with PascalCase naming conventions. This improves code readability and aligns with type naming standards in the project.
|
Du coup pour moi, tu as répondu à mon point bloquant donc c'est bon. |
|
J'ai refait une passe fonctionnelle de mon côté, coté catalogue ET parcours "je ne sais pas par où commencer", pas de regressions identifiées |
Résumé :
Cette pull request inclut plusieurs modifications pour améliorer la fonctionnalité et l'expérience utilisateur des filtres sur le catalogue des programmes. Les changements les plus importants se concentrent sur l'ajout d'un nouveau filtre
données d'entrepriseet la modification de récupération et de filtrage de la liste de programmes.Note : Cette PR embarque quelques fix sur les tests playwright
Améliorations des filtres de programme (vue components) :
apps/web/src/components/program/list/filters/ProgramFilterByCompanyData.vue: Ajout d'un nouveau composant de filtre pour les données d'entreprise, permettant aux utilisateurs de filtrer les programmes en fonction des informations spécifiques à l'entreprise.apps/web/src/components/program/list/filters/ProgramFiltersAccordion.vue: Mise à jour du composant accordéon pour inclure le nouveau filtre de données d'entreprise et gérer sa visibilité en fonction de la présence de données d'entreprise. [1] [2]Améliorations de la récupération de la liste des programmes (catalogue) :
apps/web/src/components/catalog/CatalogPrograms.vue: Refactorisation de la logique de récupération des données de programme pour utiliser une nouvelle méthodegetProgramset ajout d'un watcher pour mettre à jour les programmes lorsque les données enregistrées changent. [1] [2]apps/web/src/stores/program.ts: Ajout d'un nouveau filtrecompanySelectedau store de programme et mise à jour de la logique de filtrage des programmes pour inclure ce nouveau filtre. [1] [2] [3]Modification du filtrage des programmes (logique de filtrage) :
apps/web/src/utils/program/programFilter.ts: Ajout d'une nouvelle méthode statiquebyCompanyDatapour filtrer les programmes en fonction de l'éligibilité de l'entreprise et mise à jour de la méthodeisValidFilterValuespour gérer les valeurs de filtre booléennes. [1] [2] [3]libs/data/src/program/programEligibility.ts: Ajout d'une nouvelle méthodeisEligiblepour vérifier l'éligibilité des programmes en fonction des données de l'entreprise.App test :
https://tee-preprod-pr1400.osc-fr1.scalingo.io/
close #1110