Skip to content

Commit 8a19f35

Browse files
skelz0rskelz0r
committed
Implement decision tree for API Entreprise start
* Introduce stimulus controller to handle the basic decision tree => Use tags to filter forms (thanks to previous commits) * New card decision for start (use a data-turbo-method, which is not a so great solution, but hey it works with the DSFR) * Activate js in cucumber to be sure that is works (without js it works too because it does not handle fr-hidden well with rack test)
1 parent 4f242bc commit 8a19f35

File tree

4 files changed

+226
-2
lines changed

4 files changed

+226
-2
lines changed

‎app/javascript/controllers/choose_authorization_request_form_controller.js

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { Controller } from '@hotwired/stimulus'
2+
3+
export default class extends Controller {
4+
static targets = ['editors', 'editor', 'forms', 'form', 'noTeamDisclaimer']
5+
static values = { editors: Array }
6+
7+
chooseTeam (event) {
8+
this.hideForms()
9+
10+
switch (event.target.value) {
11+
case 'internal':
12+
this.hideEditors()
13+
this.hideEditorForms()
14+
this.showFormsBlock()
15+
break
16+
case 'editor':
17+
this.showEditors()
18+
break
19+
case 'none':
20+
this.hideEditors()
21+
this.showNoTeamDisclaimer()
22+
break
23+
}
24+
}
25+
26+
chooseEditor (event) {
27+
const editor = event.target.value
28+
29+
this.formTargets.forEach((form) => {
30+
const formTags = this.getFormTags(form)
31+
32+
if (formTags.includes(editor) || formTags.includes('default')) {
33+
form.classList.remove('fr-hidden')
34+
} else {
35+
form.classList.add('fr-hidden')
36+
}
37+
})
38+
39+
this.showFormsBlock()
40+
}
41+
42+
getFormTags (form) {
43+
return JSON.parse(form.getAttribute('data-choose-authorization-request-form-tags'))
44+
}
45+
46+
showEditors () {
47+
this.editorsTarget.classList.remove('fr-hidden')
48+
}
49+
50+
hideEditors () {
51+
this.editorsTarget.classList.add('fr-hidden')
52+
this.editorTargets.forEach((editor) => {
53+
editor.checked = false
54+
})
55+
}
56+
57+
hideEditorForms () {
58+
this.showAllForms()
59+
60+
this.editorsValue.forEach((editor) => {
61+
this.formTargets.forEach((form) => {
62+
const formTags = this.getFormTags(form)
63+
64+
if (formTags.includes(editor)) {
65+
form.classList.add('fr-hidden')
66+
}
67+
})
68+
})
69+
}
70+
71+
showFormsBlock () {
72+
this.formsTarget.classList.remove('fr-hidden')
73+
}
74+
75+
showAllForms () {
76+
this.formTargets.forEach((form) => {
77+
form.classList.remove('fr-hidden')
78+
})
79+
}
80+
81+
hideForms () {
82+
this.formsTargets.forEach((form) => {
83+
form.classList.add('fr-hidden')
84+
})
85+
this.formTarget.classList.add('fr-hidden')
86+
this.noTeamDisclaimerTarget.classList.add('fr-hidden')
87+
}
88+
89+
showNoTeamDisclaimer () {
90+
this.noTeamDisclaimerTarget.classList.remove('fr-hidden')
91+
}
92+
}

‎app/views/authorization_request_forms/_authorization_request_form_card.html.erb

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div id="<%= dom_id(authorization_request_form) %>" class="fr-tile fr-tile--sm fr-tile--horizontal fr-enlarge-link" id="tile-6661">
2+
<div class="fr-tile__body">
3+
<div class="fr-tile__content">
4+
<h3 class="fr-tile__title">
5+
<%= link_to authorization_request_form.name, authorization_request_forms_path(form_uid: authorization_request_form.id), data: { turbo_method: 'post' } %>
6+
</h3>
7+
<p class="fr-tile__detail">
8+
<%= authorization_request_form.description %>
9+
</p>
10+
<% if authorization_request_form.editor %>
11+
<div class="fr-tile__start">
12+
<p class="fr-badge fr-badge--sm">
13+
Via l'éditeur <%= authorization_request_form.editor.name %>
14+
</p>
15+
</div>
16+
<% end %>
17+
</div>
18+
</div>
19+
</div>

‎app/views/authorization_request_forms/index/_api_entreprise.html.erb

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<h3>
2+
Qui se charge techniquement de l'intégration de l'API ?
3+
</h3>
4+
5+
<div class="fr-mb-2w" data-controller="choose-authorization-request-form" data-choose-authorization-request-form-editors-value="<%= @authorization_definition.editors.map(&:id).to_json %>">
6+
<fieldset class="fr-fieldset" aria-labelledby="radio-rich-inline-legend radio-rich-inline-messages">
7+
<div class="fr-grid-row">
8+
<div class="fr-col-md-4 fr-col-12">
9+
<div class="fr-fieldset__element fr-fieldset__element">
10+
<div class="fr-radio-group fr-radio-rich">
11+
<input type="radio" id="team-internal" data-action="click->choose-authorization-request-form#chooseTeam" value="internal" name="team">
12+
<label class="fr-label" for="team-internal">
13+
Vos développeurs internes ou prestataires
14+
<span class="fr-hint-text">
15+
Ils conçoivent une solution logicielle sur-mesure pour votre organisation
16+
</span>
17+
</label>
18+
</div>
19+
</div>
20+
</div>
21+
22+
<div class="fr-col-md-4 fr-col-12">
23+
<div class="fr-fieldset__element fr-fieldset__element">
24+
<div class="fr-radio-group fr-radio-rich">
25+
<input type="radio" id="team-editor" value="editor" data-action="click->choose-authorization-request-form#chooseTeam" name="team">
26+
<label class="fr-label" for="team-editor">
27+
Votre éditeur
28+
<span class="fr-hint-text">
29+
Rien à coder, vous utilisez une solution clé en main proposée par un éditeur.
30+
</span>
31+
</label>
32+
</div>
33+
</div>
34+
</div>
35+
36+
<div class="fr-col-md-4 fr-col-12">
37+
<div class="fr-fieldset__element fr-fieldset__element">
38+
<div class="fr-radio-group fr-radio-rich">
39+
<input type="radio" id="team-none" value="none" data-action="click->choose-authorization-request-form#chooseTeam" name="team">
40+
<label class="fr-label" for="team-none">
41+
Ni équipe technique, ni éditeur
42+
<span class="fr-hint-text">
43+
Vous traitez tout manuellement.
44+
</span>
45+
</label>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</fieldset>
51+
52+
<div data-choose-authorization-request-form-target="editors" id="editor-list" class="fr-hidden">
53+
<h3>
54+
Quel est votre éditeur de logiciel ?
55+
</h3>
56+
<fieldset class="fr-fieldset" id="editors" aria-labelledby="radio-hint-legend radio-hint-messages">
57+
<%
58+
@authorization_definition.editors.each do |editor|
59+
%>
60+
<div class="fr-fieldset__element">
61+
<div class="fr-radio-group">
62+
<input type="radio" id="<%= dom_id(editor) %>" data-action="click->choose-authorization-request-form#chooseEditor" value="<%= editor.id %>" name="editor">
63+
<label class="fr-label" for="<%= dom_id(editor) %>">
64+
<%= editor.name %>
65+
</label>
66+
</div>
67+
</div>
68+
<% end %>
69+
70+
<div class="fr-fieldset__element">
71+
<div class="fr-radio-group">
72+
<input type="radio" id="no_editor" data-action="click->choose-authorization-request-form#chooseEditor" value="none" name="editor">
73+
<label class="fr-label" for="no_editor">
74+
Aucun de ces éditeurs
75+
</label>
76+
</div>
77+
</div>
78+
</fieldset>
79+
</div>
80+
81+
<div data-choose-authorization-request-form-target="forms" id="forms" class="fr-bg-alt-blue-france fr-hidden">
82+
<p class="center fr-px-5w fr-py-1w">
83+
Il existe plusieurs formulaires pour obtenir une habilitation à <%= @authorization_definition.name %>, vos réponses ont permis de réduire le choix aux formulaires ci-dessous.
84+
<br />
85+
<br />
86+
En cas de doute, nous vous invitons à consulter le site d'<a href="https://entreprise.api.gouv.fr" target="_blank">API Entreprise</a>, plus spécifiquement la page des <a href="https://entreprise.api.gouv.fr/cas_usages" target="_blank">cas d'usages</a>.
87+
88+
</p>
89+
90+
<div class="fr-grid-row">
91+
<% @authorization_definition.available_forms.map(&:decorate).each do |authorization_request_form| %>
92+
<div data-choose-authorization-request-form-target="form" data-choose-authorization-request-form-tags="<%= authorization_request_form.tags.to_json %>" class="fr-col-md-6 fr-col-xl-4 fr-col-12 fr-p-3w">
93+
<%= render partial: 'authorization_request_forms/authorization_request_form_card', locals: { authorization_request_form: } %>
94+
</div>
95+
<% end %>
96+
</div>
97+
</div>
98+
99+
<div data-choose-authorization-request-form-target="noTeamDisclaimer" class="fr-bg-alt-blue-france fr-hidden">
100+
<p class="center fr-px-5w fr-py-1w">
101+
Vous êtes éligible mais n'avez pas les <a href="https://entreprise.api.gouv.fr/developpeurs#prerequis-techniques" target="_blank">prérequis techniques</a> pour utiliser l’API Entreprise
102+
103+
<br />
104+
105+
🔎 L’API Entreprise s’utilise au travers d’un logiciel métier, comme par exemple un profil acheteur pour les marchés publics. Si vous collectez et traitez les données à la main, vous n’avez probablement pas un logiciel dédié aux démarches.
106+
</p>
107+
</div>
108+
</div>

‎features/habilitations/api_entreprise.feature

+7-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ Fonctionnalité: Soumission d'une demande d'habilitation API Entreprise
77
Et je démarre une nouvelle demande d'habilitation "API Entreprise"
88
Et que je clique sur "Démarrer"
99

10+
@javascript
1011
Scénario: Je soumets une demande d'habilitation libre valide
11-
Quand je clique sur "Démarrer" pour le formulaire "Demande libre"
12+
Quand je choisis "Vos développeurs"
13+
Et que je clique sur "Demande libre"
1214

1315
* je renseigne les infos de bases du projet
1416
* je remplis "Date de mise en production" avec "25/12/2042"
@@ -38,8 +40,11 @@ Fonctionnalité: Soumission d'une demande d'habilitation API Entreprise
3840
Alors il y a un message de succès contenant "soumise avec succès"
3941
Et je suis sur la page "Accueil"
4042

43+
@javascript
4144
Scénario: Je soumets une demande d'habilitation MGDIS valide
42-
Quand je clique sur "Démarrer" pour le formulaire "MGDIS"
45+
Quand je choisis "Votre éditeur"
46+
Et que je choisis "MGDIS"
47+
Et que je clique sur "Solution Portail des aides de l'éditeur MGDIS"
4348

4449
* je renseigne les informations des contacts RGPD
4550
* j'adhère aux conditions générales

0 commit comments

Comments
 (0)