Skip to content

Commit

Permalink
Merge pull request #3823 from betagouv/badge-accordeons
Browse files Browse the repository at this point in the history 
Affiche : utiliser des accordéons pour les badges
  • Loading branch information
@hfroot
hfroot authored May 2, 2024
2 parents 2c18d44 + f78c23b commit 56b39ef
Show file tree
Hide file tree
Showing 12 changed files with 372 additions and 205 deletions.
17 changes: 17 additions & 0 deletions ...end/src/components/CanteenPublication/ResultsComponents/DiversificationMeasureResults.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<GenericMeasureResults :badge="badge" :canteen="canteen" :diagnosticSet="diagnosticSet" />
</template>

<script>
import GenericMeasureResults from "./GenericMeasureResults"
export default {
name: "DiversificationMeasureResults",
props: {
badge: Object,
canteen: Object,
diagnosticSet: Array,
},
components: { GenericMeasureResults },
}
</script>
15 changes: 15 additions & 0 deletions frontend/src/components/CanteenPublication/ResultsComponents/GenericMeasureResults.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<template>
<div>
<p v-if="badge.earned">{{ badge.subtitle }}</p>
<p v-else>Cet établissement ne respecte pas encore la loi EGAlim pour cette mesure.</p>
</div>
</template>

<script>
export default {
name: "GenericMeasureResults",
props: {
badge: Object,
},
}
</script>
30 changes: 30 additions & 0 deletions frontend/src/components/CanteenPublication/ResultsComponents/InformationMeasureResults.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<template>
<div>
<GenericMeasureResults :badge="badge" :canteen="canteen" :diagnosticSet="diagnosticSet" />
<p v-if="diagnostic && diagnostic.communicationSupportUrl" class="fr-text">
Cette cantine communique aux usagers sur
<a :href="diagnostic.communicationSupportUrl">{{ diagnostic.communicationSupportUrl }}</a>
</p>
</div>
</template>

<script>
import GenericMeasureResults from "./GenericMeasureResults"
import { latestCreatedDiagnostic } from "@/utils"
export default {
name: "InformationMeasureResults",
props: {
badge: Object,
canteen: Object,
diagnosticSet: Array,
},
components: { GenericMeasureResults },
computed: {
diagnostic() {
if (!this.diagnosticSet) return
return latestCreatedDiagnostic(this.diagnosticSet)
},
},
}
</script>
17 changes: 17 additions & 0 deletions frontend/src/components/CanteenPublication/ResultsComponents/NoPlasticMeasureResults.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<GenericMeasureResults :badge="badge" :canteen="canteen" :diagnosticSet="diagnosticSet" />
</template>

<script>
import GenericMeasureResults from "./GenericMeasureResults"
export default {
name: "NoPlasticMeasureResults",
props: {
badge: Object,
canteen: Object,
diagnosticSet: Array,
},
components: { GenericMeasureResults },
}
</script>
215 changes: 19 additions & 196 deletions ...end/src/components/CanteenPublication.vue → ...sultsComponents/QualityMeasureResults.vue
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,11 @@
<template>
<div class="text-left" v-if="canteen">
<v-col v-if="!editDescription" cols="12" sm="6" class="px-0">
<h2 class="fr-text grey--text text--darken-4 mb-6">
Description de l'établissement
</h2>
<div class="ml-n8">
<DsfrHighlight>
<p>
{{ canteen.publicationComments }}
</p>
</DsfrHighlight>
</div>
<v-btn
v-if="editable"
@click="
editDescription = true
oldPublicationComments = canteen.publicationComments
"
outlined
small
color="primary"
class="fr-btn--tertiary px-2 mt-4"
>
<v-icon primary x-small class="mr-1">mdi-pencil-outline</v-icon>
Modifier la description
</v-btn>
</v-col>
<v-col v-else-if="editable" cols="12" sm="6">
<v-form v-model="publicationFormIsValid" ref="publicationCommentsForm">
<DsfrTextarea
class="mt-2"
rows="5"
counter="500"
v-model="canteen.publicationComments"
:rules="[validators.maxChars(500)]"
>
<template v-slot:label>
<span class="fr-label mb-1">Déscription de l'établissement</span>
<span class="fr-hint-text mb-2">
Si vous le souhaitez, personnalisez votre affiche en écrivant quelques mots sur votre établissement&nbsp;:
son fonctionnement, l'organisation, l'historique...
</span>
</template>
</DsfrTextarea>
<v-btn @click="saveDescription" class="primary">Enregistrer</v-btn>
</v-form>
</v-col>
<div class="mb-8">
<p v-if="badge.earned" class="mb-0">
Ce qui est servi dans les assiettes est au moins à {{ applicableRules.qualityThreshold }} % de produits durables
et de qualité, dont {{ applicableRules.bioThreshold }} % bio, en respectant
<a href="https://ma-cantine.agriculture.gouv.fr/blog/16">les seuils d'Outre-mer</a>
</p>
<p v-else>Cet établissement ne respecte pas encore la loi EGAlim pour cette mesure.</p>
<div v-if="showPercentagesBlock">
<h2 class="font-weight-black text-h6 grey--text text--darken-4 my-4">
Que mange-t-on dans les assiettes en {{ publicationYear }} ?
Expand Down Expand Up @@ -212,38 +172,6 @@
</div>
</div>

<div v-if="Object.keys(earnedBadges).length">
<h2 class="font-weight-black text-h6 grey--text text--darken-4 mt-8 mb-n4">
Nos démarches
</h2>
<v-row class="my-6">
<v-col cols="12" v-for="(badge, key) in earnedBadges" :key="key">
<v-card class="fill-height" elevation="0">
<div class="d-flex align-start">
<v-img width="40" max-width="40" contain :src="`/static/images/badges/${key}.svg`" alt=""></v-img>
<div>
<v-card-title class="py-0">
<h3 class="text-body-2 font-weight-bold">{{ badge.title }}</h3>
</v-card-title>
<v-card-subtitle class="pt-4" v-if="key !== 'appro' || applicableRules.qualityThreshold === 50">
<p class="mb-0">{{ badge.subtitle }}</p>
</v-card-subtitle>
<div v-else>
<v-card-subtitle class="pt-0">
<p class="mb-0">
Ce qui est servi dans les assiettes est au moins à {{ applicableRules.qualityThreshold }} % de
produits durables et de qualité, dont {{ applicableRules.bioThreshold }} % bio, en respectant
<a href="https://ma-cantine.agriculture.gouv.fr/blog/16">les seuils d'Outre-mer</a>
</p>
</v-card-subtitle>
</div>
</div>
</div>
</v-card>
</v-col>
</v-row>
</div>

<div v-if="shouldDisplayGraph">
<h2 id="appro-heading" class="font-weight-black text-h6 grey--text text--darken-4 mt-12 mb-2">
Évolution des produits dans nos assiettes sur les années
Expand All @@ -258,116 +186,48 @@
/>
</div>
</div>

<div v-if="diagnostic && diagnostic.communicationSupportUrl">
<h2 class="font-weight-black text-h6 grey--text text--darken-4 mt-8 mb-2">
Information des usagers et des convives
</h2>
<p class="body-2">
Cette cantine communique aux usagers sur
<a :href="diagnostic.communicationSupportUrl">{{ diagnostic.communicationSupportUrl }}</a>
.
</p>
</div>

<div v-if="!editable && canteen.images && canteen.images.length > imageLimit">
<h2 class="font-weight-black text-h6 grey--text text--darken-4 mt-8 mb-0">
Galerie
</h2>
<p class="body-2">
Cliquez sur une image pour l'agrandir
</p>
<div>
<ImageGallery :images="canteen.images.slice(imageLimit)" />
</div>
</div>
</div>
</template>

<script>
import labels from "@/data/quality-labels.json"
import {
lastYear,
badges,
hasDiagnosticApproData,
latestCreatedDiagnostic,
applicableDiagnosticRules,
getSustainableTotal,
getPercentage,
latestCreatedDiagnostic,
} from "@/utils"
import labels from "@/data/quality-labels.json"
import MultiYearSummaryStatistics from "@/components/MultiYearSummaryStatistics"
import FamiliesGraph from "@/components/FamiliesGraph"
import ImageGallery from "@/components/ImageGallery"
import DsfrHighlight from "@/components/DsfrHighlight"
import DsfrTextarea from "@/components/DsfrTextarea"
import Constants from "@/constants"
import validators from "@/validators"
export default {
name: "QualityMeasureResults",
props: {
badge: Object,
canteen: Object,
editable: {
type: Boolean,
default: false,
},
diagnosticSet: Array,
},
components: { MultiYearSummaryStatistics, FamiliesGraph },
data() {
return {
labels,
editDescription: !this.canteen?.publicationComments,
publicationFormIsValid: true,
oldPublicationComments: undefined,
}
},
components: { MultiYearSummaryStatistics, ImageGallery, DsfrHighlight, DsfrTextarea, FamiliesGraph },
computed: {
validators() {
return validators
},
diagnosticSet() {
if (!this.canteen) return
if (!this.usesCentralKitchenDiagnostics) return this.canteen.diagnostics
// Since the central kitchen might only handle the appro values, we will merge the diagnostics
// from the central and satellites when necessary to show the whole picture
return this.canteen.centralKitchenDiagnostics.map((centralDiag) => {
const satelliteMatchingDiag = this.canteen.diagnostics.find((x) => x.year === centralDiag.year)
if (centralDiag.centralKitchenDiagnosticMode === "APPRO" && satelliteMatchingDiag) {
const satelliteDiagCopy = Object.assign({}, satelliteMatchingDiag)
this.approFields.forEach((x) => delete satelliteDiagCopy[x])
return Object.assign(satelliteDiagCopy, centralDiag)
}
return centralDiag
})
},
approFields() {
const approSimplifiedFields = [
"valueTotalHt",
"valueBioHt",
"valueSustainableHt",
"valueExternalityPerformanceHt",
"valueEgalimOthersHt",
]
const characteristicGroups = Constants.TeledeclarationCharacteristicGroups
const approFields = characteristicGroups.egalim.fields
.concat(characteristicGroups.outsideLaw.fields)
.concat(characteristicGroups.nonEgalim.fields)
.concat(approSimplifiedFields)
const percentageApproFields = approFields.map((x) => `percentage${x.charAt(0).toUpperCase() + x.slice(1)}`)
return approFields.concat(percentageApproFields)
},
diagnostic() {
if (!this.diagnosticSet) return
return latestCreatedDiagnostic(this.diagnosticSet)
},
publicationYear() {
return this.diagnostic?.year
},
usesCentralKitchenDiagnostics() {
return (
this.canteen?.productionType === "site_cooked_elsewhere" && this.canteen?.centralKitchenDiagnostics?.length > 0
)
},
publicationYear() {
return this.diagnostic?.year
},
showPercentagesBlock() {
return (
this.diagnostic &&
Expand All @@ -378,6 +238,9 @@ export default {
this.fishEgalimPercentage)
)
},
applicableRules() {
return applicableDiagnosticRules(this.canteen)
},
hasPercentages() {
return "percentageValueTotalHt" in this.diagnostic
},
Expand Down Expand Up @@ -406,14 +269,6 @@ export default {
? this.toPercentage(this.diagnostic.percentageValueFishEgalimHt)
: getPercentage(this.diagnostic.valueFishEgalimHt, this.diagnostic.valueFishHt)
},
earnedBadges() {
const canteenBadges = badges(this.canteen, this.diagnostic, this.$store.state.sectors)
let earnedBadges = {}
Object.keys(canteenBadges).forEach((key) => {
if (canteenBadges[key].earned) earnedBadges[key] = canteenBadges[key]
})
return earnedBadges
},
shouldDisplayGraph() {
if (!this.diagnosticSet || this.diagnosticSet.length === 0) return false
const completedDiagnostics = this.diagnosticSet.filter(hasDiagnosticApproData)
Expand All @@ -430,43 +285,11 @@ export default {
}
return diagnostics
},
applicableRules() {
return applicableDiagnosticRules(this.canteen)
},
imageLimit() {
return this.$vuetify.breakpoint.xs ? 0 : 3
},
},
methods: {
toPercentage(value) {
return Math.round(value * 100)
},
saveDescription() {
if (this.canteen.publicationComments === this.oldPublicationComments) {
this.editDescription = false
return
}
this.$refs.publicationCommentsForm.validate()
if (!this.publicationFormIsValid) {
this.$store.dispatch("notifyRequiredFieldsError")
return
}
this.$store
.dispatch("updateCanteen", {
id: this.canteen.id,
payload: { publicationComments: this.canteen.publicationComments },
})
.then(() => {
this.$store.dispatch("notify", {
status: "success",
message: "Description mise à jour",
})
this.editDescription = false
})
.catch(() => {
this.$store.dispatch("notifyServerError")
})
},
},
}
</script>
17 changes: 17 additions & 0 deletions frontend/src/components/CanteenPublication/ResultsComponents/WasteMeasureResults.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<GenericMeasureResults :badge="badge" :canteen="canteen" :diagnosticSet="diagnosticSet" />
</template>

<script>
import GenericMeasureResults from "./GenericMeasureResults"
export default {
name: "WasteMeasureResults",
props: {
badge: Object,
canteen: Object,
diagnosticSet: Array,
},
components: { GenericMeasureResults },
}
</script>
Loading

0 comments on commit 56b39ef

Please sign in to comment.