Skip to content

Commit 8154c64

Browse files
bellangerqbellangerq
committed
add overview page with different states and route from step 1
1 parent b5f7af1 commit 8154c64

5 files changed

Lines changed: 344 additions & 7 deletions

File tree

‎confiture-web-app/src/components/AuditGeneralInformationsForm.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -247,11 +247,7 @@ const route = useRoute();
247247

248248
<div>
249249
<button class="fr-btn fr-mt-4w" type="submit">
250-
{{
251-
route.name === "new-audit-step-one"
252-
? "Commencer l’audit"
253-
: "Mettre à jour les paramètres"
254-
}}
250+
Valider les paramètres
255251
</button>
256252

257253
<button

‎confiture-web-app/src/pages/OverviewPage.vue‎

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
<script setup lang="ts">
2+
import { computed } from "vue";
3+
import { useRoute } from "vue-router";
4+
5+
import AuditProgressBar from "../components/AuditProgressBar.vue";
6+
import CopyBlock from "../components/CopyBlock.vue";
7+
import { useAuditStore, useResultsStore } from "../store";
8+
import { useWrappedFetch } from "../composables/useWrappedFetch";
9+
import { formatDate, getCriteriaCount } from "../utils";
10+
import { AuditType } from "../types";
11+
12+
const route = useRoute();
13+
const uniqueId = computed(() => route.params.uniqueId as string);
14+
const auditStore = useAuditStore();
15+
const resultsStore = useResultsStore();
16+
17+
useWrappedFetch(async () => {
18+
resultsStore.$reset();
19+
await auditStore.fetchAuditIfNeeded(uniqueId.value);
20+
await resultsStore.fetchResults(uniqueId.value);
21+
}, true);
22+
23+
const audit = computed(() => {
24+
return auditStore.currentAudit;
25+
});
26+
27+
const auditIsReady = computed(() => {
28+
return resultsStore.auditProgress === 1;
29+
});
30+
const auditIsPublishable = computed(() => {
31+
return !!audit.value?.initiator;
32+
});
33+
</script>
34+
35+
<template>
36+
<template v-if="audit">
37+
<h1>{{ audit.procedureName }}</h1>
38+
39+
<ul class="fr-p-0 fr-m-0 cards">
40+
<!-- Audit -->
41+
<li class="card-wrapper">
42+
<span
43+
:class="[
44+
'fr-icon--lg fr-icon-checkbox-circle-fill card-check',
45+
{ 'card-check--success': auditIsReady },
46+
]"
47+
aria-hidden="true"
48+
></span>
49+
50+
<div class="fr-px-4w fr-py-3w card">
51+
<h2 class="fr-h3 fr-mb-1w card-title">
52+
Audit
53+
<p v-if="audit.auditType" class="fr-badge">
54+
{{ getCriteriaCount(audit.auditType) }}
55+
critères
56+
</p>
57+
</h2>
58+
59+
<p class="fr-text--sm fr-mb-2w card-date">
60+
<template v-if="auditIsReady && audit.publicationDate">
61+
Terminé le
62+
<time datetime="30/12/2023">{{
63+
formatDate(audit.publicationDate)
64+
}}</time>
65+
<template v-if="audit.editionDate">
66+
- Mis à jour le
67+
<time datetime="30/12/2023">{{
68+
formatDate(audit.editionDate)
69+
}}</time></template
70+
>
71+
</template>
72+
<template v-else-if="audit.creationDate">
73+
Créé le
74+
<time :datetime="audit.creationDate.toString()">{{
75+
formatDate(audit.creationDate)
76+
}}</time>
77+
</template>
78+
</p>
79+
80+
<AuditProgressBar
81+
v-if="!auditIsReady"
82+
class="fr-mb-3w card-progress-bar"
83+
/>
84+
85+
<p v-else class="card-charts">TODO: Graphiques</p>
86+
87+
<ul
88+
:class="[
89+
'fr-btns-group fr-btns-group--icon-left audit-card-actions',
90+
{ 'audit-card-actions--half': auditIsReady },
91+
]"
92+
>
93+
<li>
94+
<RouterLink
95+
:to="{
96+
name: 'edit-audit-step-three',
97+
params: { uniqueId: uniqueId },
98+
}"
99+
class="fr-btn fr-btn--icon-left fr-mb-0"
100+
:class="
101+
auditIsReady
102+
? 'fr-btn--secondary fr-icon-file-line'
103+
: 'fr-icon-edit-fill'
104+
"
105+
>
106+
{{ auditIsReady ? "Accéder" : "Commencer" }}
107+
</RouterLink>
108+
</li>
109+
</ul>
110+
</div>
111+
</li>
112+
113+
<!-- Report -->
114+
<li class="card-wrapper">
115+
<span
116+
:class="[
117+
'fr-icon--lg fr-icon-checkbox-circle-fill card-check',
118+
{ 'card-check--success': auditIsReady },
119+
]"
120+
aria-hidden="true"
121+
></span>
122+
<div class="fr-px-4w fr-py-3w card">
123+
<h2 class="fr-h3 fr-mb-1w card-title">
124+
Rapport d’audit
125+
<p class="fr-badge fr-badge--info">Généré automatiquement</p>
126+
</h2>
127+
<p class="card-description">
128+
{{
129+
auditIsReady
130+
? "Vous pouvez livrer le rapport d’audit."
131+
: "Terminez l’audit avant de livrer le rapport d’audit."
132+
}}
133+
</p>
134+
<ul
135+
class="fr-btns-group fr-btns-group--icon-left fr-mb-3w report-card-actions"
136+
>
137+
<li>
138+
<RouterLink
139+
:to="{
140+
name: 'report',
141+
params: {
142+
uniqueId: audit.consultUniqueId,
143+
tab: 'declaration-daccessibilite',
144+
},
145+
}"
146+
class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-eye-fill fr-mb-0"
147+
>
148+
Consulter
149+
</RouterLink>
150+
</li>
151+
</ul>
152+
153+
<template v-if="auditIsReady">
154+
<CopyBlock
155+
class="fr-m-0 card-copy-block"
156+
:to="{
157+
name: 'report',
158+
params: { uniqueId: audit.consultUniqueId },
159+
}"
160+
description="Lien de partage"
161+
success-message="Le lien du rapport d’audit a bien été copié dans le presse-papier."
162+
/>
163+
</template>
164+
</div>
165+
</li>
166+
167+
<!-- a11y statement -->
168+
<li v-if="audit.auditType === AuditType.FULL" class="card-wrapper">
169+
<span
170+
:class="[
171+
'fr-icon--lg fr-icon-checkbox-circle-fill card-check',
172+
{ 'card-check--success': auditIsPublishable },
173+
]"
174+
aria-hidden="true"
175+
></span>
176+
<div class="fr-px-4w fr-py-3w card">
177+
<h2 class="fr-h3 fr-mb-1w card-title">Déclaration d’accessibilité</h2>
178+
<p class="card-description">
179+
{{
180+
auditIsReady
181+
? "La déclaration d’accessibilité est prête à être complétée."
182+
: "Terminez l’audit avant de compléter et livrer la déclaration d’accessibilité."
183+
}}
184+
</p>
185+
186+
<ul
187+
class="fr-btns-group fr-btns-group--inline-md fr-btns-group--icon-left fr-mb-3w statement-card-actions"
188+
>
189+
<li>
190+
<RouterLink
191+
:to="{
192+
name: 'report',
193+
params: {
194+
uniqueId: audit.consultUniqueId,
195+
},
196+
}"
197+
class="fr-btn fr-btn--icon-left fr-icon-edit-fill fr-mb-md-0"
198+
:class="{
199+
'fr-btn--secondary': !auditIsReady || auditIsPublishable,
200+
}"
201+
>
202+
{{ auditIsPublishable ? "Consulter" : "Compléter" }}
203+
</RouterLink>
204+
</li>
205+
<li v-if="auditIsPublishable">
206+
<RouterLink
207+
:to="{
208+
name: 'edit-audit-declaration',
209+
params: { uniqueId: audit.editUniqueId },
210+
}"
211+
class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-edit-fill fr-mb-md-0"
212+
>
213+
Modifier
214+
</RouterLink>
215+
</li>
216+
</ul>
217+
218+
<template v-if="auditIsPublishable">
219+
<CopyBlock
220+
class="fr-m-0 card-copy-block"
221+
:to="{
222+
name: 'report',
223+
params: { uniqueId: audit.consultUniqueId },
224+
}"
225+
description="Lien de partage"
226+
success-message="Le lien de la déclaration d’accessibilité a bien été copié dans le presse-papier."
227+
/>
228+
</template>
229+
</div>
230+
</li>
231+
</ul>
232+
</template>
233+
</template>
234+
235+
<style scoped>
236+
.cards {
237+
display: flex;
238+
flex-direction: column;
239+
gap: 3rem;
240+
}
241+
.card-wrapper {
242+
display: flex;
243+
gap: 1.5rem;
244+
align-items: center;
245+
max-width: 49.5rem;
246+
}
247+
248+
.card-check {
249+
color: var(--border-default-grey);
250+
margin: 0 auto;
251+
}
252+
253+
.card-check--success {
254+
color: var(--text-default-success);
255+
}
256+
257+
.card {
258+
border: 1px solid var(--border-default-grey);
259+
display: grid;
260+
grid-template-columns: 1fr 1fr;
261+
gap: 0 1rem;
262+
flex-grow: 1;
263+
}
264+
265+
.card-title {
266+
grid-column: 1 / -1;
267+
grid-row: 1;
268+
}
269+
270+
.card-date {
271+
color: var(--text-mention-grey);
272+
grid-column: 1 / -1;
273+
grid-row: 2;
274+
}
275+
.card-description {
276+
grid-column: 1 / -1;
277+
grid-row: 2;
278+
}
279+
280+
.card-progress-bar {
281+
grid-column: 1 / -1;
282+
grid-row: 3;
283+
}
284+
285+
.card-charts {
286+
grid-column: 1 / -1;
287+
grid-row: 3;
288+
}
289+
290+
.audit-card-actions {
291+
grid-column: 1 / -1;
292+
}
293+
294+
.audit-card-actions--half {
295+
grid-column: 1;
296+
}
297+
298+
.statement-card-actions {
299+
grid-column: 1 / -1;
300+
}
301+
302+
/* FIXME: overrides fr-btns-group style */
303+
.statement-card-actions > li:first-child {
304+
width: 50%;
305+
}
306+
307+
.statement-card-actions > li > a {
308+
width: 100%;
309+
}
310+
311+
.card-copy-block {
312+
grid-column: 1 / -1;
313+
grid-row: 4;
314+
}
315+
316+
@media (max-width: 48rem) {
317+
.card-wrapper {
318+
flex-direction: column;
319+
align-items: stretch;
320+
gap: 1rem;
321+
}
322+
323+
.statement-card-actions > li:first-child {
324+
width: 100%;
325+
}
326+
}
327+
</style>

‎confiture-web-app/src/pages/edit/EditAuditStepOnePage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function submitStepOne(data: CreateAuditRequestData) {
3232
);
3333
3434
router.push({
35-
name: "edit-audit-step-three",
35+
name: "overview",
3636
params: { uniqueId: auditUniqueId },
3737
});
3838
})

‎confiture-web-app/src/pages/edit/NewAuditStepOnePage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ async function submitStepOne(data: CreateAuditRequestData) {
7878
auditStore.showAuditEmailAlert = true;
7979
// TODO: replace current history entry with the edit page
8080
return router.push({
81-
name: "edit-audit-step-three",
81+
name: "overview",
8282
params: { uniqueId: audit.editUniqueId },
8383
});
8484
})

‎confiture-web-app/src/router.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createRouter, createWebHistory, RouteLocation } from "vue-router";
22

3+
import OverviewPage from "./pages/OverviewPage.vue";
34
import ContextPage from "./pages/consult/ContextPage.vue";
45
import ReportPage from "./pages/consult/ReportPage.vue";
56
import EditAuditStepOnePage from "./pages/edit/EditAuditStepOnePage.vue";
@@ -354,6 +355,19 @@ const router = createRouter({
354355
],
355356
},
356357
},
358+
// Overview
359+
{
360+
path: "/audits/:uniqueId/synthese",
361+
name: "overview",
362+
component: OverviewPage,
363+
meta: {
364+
name: `Synthèse ${getProcedureName}`,
365+
breadcrumbLinks: () => [
366+
getHomeBreadcrumbLink(),
367+
{ label: `Synthèse ${getProcedureName()}`, name: "overview" },
368+
],
369+
},
370+
},
357371
// Report pages
358372
{
359373
path: "/rapports/:uniqueId/contexte",

0 commit comments

Comments
 (0)
⚡