Skip to content

Commit

Permalink
add transverse callout in results detail tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@bellangerq
bellangerq committed Sep 6, 2024
1 parent 2954b25 commit b796eb3
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 109 deletions.
1 change: 0 additions & 1 deletion confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@ const result = computed(
)!
);
// TODO: UX is not finalized.
const transverseStatus = computed((): CriteriumResultStatus | null => {
if (store.data) {
return store.data?.[-1][props.topicNumber][props.criterium.number].status;
Expand Down
260 changes: 157 additions & 103 deletions confiture-web-app/src/components/report/ReportResults.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useReportStore } from "../../store";
import { AuditStatus, AuditType } from "../../types";
import { getAuditStatus, pluralize, slugify } from "../../utils";
import { StatDonutTheme } from "../StatDonut.vue";
import SummaryCard from "../SummaryCard.vue";
defineEmits<{
(e: "toTab", payload: string): void;
}>();
const route = useRoute();
const uniqueId = route.params.uniqueId as string;
const report = useReportStore();
const stats = computed(() => {
Expand Down Expand Up @@ -57,8 +65,11 @@ const pageDistributionTableData = {
? report.data.pageDistributions.slice(1).map((p) => {
return [
p.name,
`${Math.round(p.compliant.raw)}`,
`${Math.round(p.notCompliant.raw)}`
Math.round(p.compliant.raw),
Math.round(p.notCompliant.raw) +
(report.data
? report.data.pageDistributions[0].notCompliant.raw
: 0)
];
})
: [])
Expand All @@ -78,9 +89,9 @@ const topicDistributionTableData = {
? report.data.topicDistributions.map((t, i) => {
return [
`${i + 1}. ${t.name}`,
`${Math.round(t.compliant.raw)}`,
`${Math.round(t.notCompliant.raw)}`,
`${Math.round(t.notApplicable.raw)}`
Math.round(t.compliant.raw),
Math.round(t.notCompliant.raw),
Math.round(t.notApplicable.raw)
];
})
: [])
Expand All @@ -90,6 +101,10 @@ const topicDistributionTableData = {
const auditInProgress = computed(
() => !!report.data && getAuditStatus(report.data) === AuditStatus.IN_PROGRESS
);
const transverseNotCompliantCount = computed(() => {
return report.data?.pageDistributions[0].notCompliant.raw;
});
</script>

<template>
Expand Down Expand Up @@ -132,113 +147,152 @@ const auditInProgress = computed(
</div>
</div>

<h2 class="fr-mt-8w">Détails des résultats</h2>

<!-- Per page -->
<h3 :id="slugify(pageDistributionTableData.title)" class="fr-h4 fr-mb-3w">
{{ pageDistributionTableData.title }}
</h3>

<div class="fr-table fr-table--no-caption fr-mb-6w">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table class="fr-cell--multiline">
<caption>
{{
pageDistributionTableData.title
}}
</caption>
<thead>
<tr>
<th
v-for="header in pageDistributionTableData.data[0]"
:key="header"
scope="col"
>
{{ header }}
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, i) in pageDistributionTableData.data.slice(1)"
:key="i"
>
<td>
<a
:href="
report.data.context.samples.find(
(s) => s.name === row[0]
)?.url
"
target="_blank"
class="fr-text--bold"
<div class="wrapper">
<h2 class="fr-mt-8w">Détails des résultats</h2>

<!-- Per page -->
<h3 :id="slugify(pageDistributionTableData.title)" class="fr-h4 fr-mb-3w">
{{ pageDistributionTableData.title }}
</h3>

<div class="fr-table fr-table--no-caption fr-mb-3v">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table class="fr-cell--multiline">
<caption>
{{
pageDistributionTableData.title
}}
</caption>
<thead>
<tr>
<th
v-for="header in pageDistributionTableData.data[0]"
:key="header"
scope="col"
>
{{ row[0] }}
</a>
</td>
<td v-for="data in row.slice(1)" :key="data">{{ data }}</td>
</tr>
</tbody>
</table>
{{ header }}
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, i) in pageDistributionTableData.data.slice(1)"
:key="i"
>
<td>
<a
:href="
report.data.context.samples.find(
(s) => s.name === row[0]
)?.url
"
target="_blank"
class="fr-text--bold"
>
{{ row[0] }}
</a>
</td>
<td v-for="data in row.slice(1)" :key="data">{{ data }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Per topic -->
<h3 :id="slugify(topicDistributionTableData.title)" class="fr-h4 fr-mb-3w">
{{ topicDistributionTableData.title }}
</h3>
<div class="fr-table fr-table--no-caption fr-m-0">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table class="fr-cell--multiline">
<caption>
{{
topicDistributionTableData.title
}}
</caption>
<thead>
<tr>
<th
v-for="header in [
'Thématique du RGAA',
'Critères conformes',
'Critères non conformes',
'Critères non applicables'
]"
:key="header"
scope="col"
<div v-if="transverseNotCompliantCount" class="fr-callout fr-mb-6w">
<p class="fr-callout__text fr-mb-2w">
<strong>{{ transverseNotCompliantCount }}</strong>
{{ pluralize("critère", "critères", transverseNotCompliantCount) }}
non
{{ pluralize("conforme", "conformes", transverseNotCompliantCount) }}
concernent des éléments transverses à toutes les pages de
l’échantillon.
</p>
<!-- TODO: make this link work -->
<RouterLink
:to="{
name: 'report',
params: { uniqueId, tab: slugify('Détails des non-conformités') }
}"
class="fr-link"
@click="$emit('toTab', 'Détails des non-conformités')"
>Voir
{{
pluralize(
"le critère non conforme transverse",
"les critères non conformes transverses",
transverseNotCompliantCount
)
}}</RouterLink
>
</div>
<!-- Per topic -->
<h3
:id="slugify(topicDistributionTableData.title)"
class="fr-h4 fr-mb-3w"
>
{{ topicDistributionTableData.title }}
</h3>
<div class="fr-table fr-table--no-caption fr-m-0">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table class="fr-cell--multiline">
<caption>
{{
topicDistributionTableData.title
}}
</caption>
<thead>
<tr>
<th
v-for="header in [
'Thématique du RGAA',
'Critères conformes',
'Critères non conformes',
'Critères non applicables'
]"
:key="header"
scope="col"
>
{{ header }}
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, i) in report.data.topicDistributions.map(
(t, i) => {
return [
`${i + 1}. ${t.name}`,
`${Math.round(t.compliant.raw)}`,
`${Math.round(t.notCompliant.raw)}`,
`${Math.round(t.notApplicable.raw)}`
];
}
)"
:key="i"
>
{{ header }}
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, i) in report.data.topicDistributions.map(
(t, i) => {
return [
`${i + 1}. ${t.name}`,
`${Math.round(t.compliant.raw)}`,
`${Math.round(t.notCompliant.raw)}`,
`${Math.round(t.notApplicable.raw)}`
];
}
)"
:key="i"
>
<td v-for="data in row" :key="data">{{ data }}</td>
</tr>
</tbody>
</table>
<td v-for="data in row" :key="data">{{ data }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
</template>
<style scoped>
.wrapper {
max-width: 46rem;
}
</style>
10 changes: 5 additions & 5 deletions confiture-web-app/src/pages/report/ReportPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const targetTabIndex = computed(() => {
});
const router = useRouter();
function handleTabChange(tab: { title: string }) {
function handleTabChange(tabTitle: string) {
// change the URL in the browser adress bar without triggering vue-router navigation
history.pushState(
{},
Expand All @@ -97,12 +97,12 @@ function handleTabChange(tab: { title: string }) {
name: "report",
params: {
uniqueId,
tab: slugify(tab.title)
tab: slugify(tabTitle)
}
}).fullPath
);
targetTab.value = slugify(tab.title);
targetTab.value = slugify(tabTitle);
}
const csvExportUrl = computed(() => `/api/reports/${uniqueId}/exports/csv`);
Expand Down Expand Up @@ -286,9 +286,9 @@ const siteUrl = computed(() => {
role="tabpanel"
:aria-labelledby="`tabpanel-${slugify(tab.title)}`"
tabindex="0"
v-on="{ 'dsfr.disclose': () => handleTabChange(tab) }"
v-on="{ 'dsfr.disclose': () => handleTabChange(tab.title) }"
>
<component :is="tab.component" />
<component :is="tab.component" @to-tab="handleTabChange" />
</div>
</div>
</template>
Expand Down

0 comments on commit b796eb3

Please sign in to comment.