Skip to content

Commit

Permalink
Retours tests 🐛
Browse files Browse the repository at this point in the history
  • Loading branch information
@vincentlaine
vincentlaine committed Oct 2, 2024
1 parent 227ea5f commit 26237cc
Show file tree
Hide file tree
Showing 13 changed files with 508 additions and 212 deletions.
6 changes: 3 additions & 3 deletions client/components/carte/Map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ const resetZoneSelected = () => {
};
async function downloadMap() {
emit('downloadMap');
emit('downloadMap', selectedTypeEau.value);
}
watch(() => selectedTypeEau.value, () => {
Expand Down Expand Up @@ -379,7 +379,7 @@ watch(() => props.area, () => {

<template>
<div v-if="isMapSupported">
<div class="map-pre-actions">
<div class="map-pre-actions" data-html2canvas-ignore="true">
<div v-if="showError"
class="map-pre-actions-card fr-p-1w fr-m-1w">
<DsfrAlert description="Une erreur est survenue lors du chargement de la carte"
Expand Down Expand Up @@ -437,7 +437,7 @@ watch(() => props.area, () => {
</DsfrAccordionsGroup>
</div>
</div>
<div v-if="light" class="map-legend">
<div v-if="light" class="fr-grid-row map-legend">
<DsfrBadge small
no-icon
class="situation-level-bg-0 fr-mr-1w"
Expand Down
153 changes: 113 additions & 40 deletions client/components/carte/commune/Filter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import { Region } from '../../../dto/region.dto';
import { Departement } from '../../../dto/departement.dto';
import { useRefDataStore } from '../../../store/refData';
import moment from 'moment';
import { helpers, required } from '@vuelidate/validators';
import useVuelidate from '@vuelidate/core';
import utils from '../../../utils';
const props = defineProps<{
loading: boolean,
Expand All @@ -16,17 +19,77 @@ const emit = defineEmits<{
const refDataStore = useRefDataStore();
const dateMin = ref('2013-01');
const currentDate = moment();
const dateDebut = ref(moment(currentDate).subtract(1, 'year').format('YYYY-MM'));
const dateFin = ref(currentDate.format('YYYY-MM'));
const area = ref(null);
const computeDisabled = ref(true);
const modalOpened = ref(false);
const modalDescription = ref(`Nous vous informons que le lancement d'un calcul sur l'ensemble de la France peut prendre 1 Ă  2 minutes. Si vous ĂȘtes intĂ©ressĂ© par une zone spĂ©cifique, nous vous recommandons de la sĂ©lectionner Ă  l'aide du filtre "territoire".`);
const areaOptions = ref([]);
const askLoadData = (() => {
const areaText = areaOptions.value.find((a: any) => a.value === area.value)?.text;
const formData = reactive({
dateDebut: moment(currentDate).subtract(1, 'year').format('YYYY-MM'),
dateFin: currentDate.format('YYYY-MM'),
area: null,
});
const rules = computed(() => {
return {
dateDebut: {
required: helpers.withMessage('La date de début est obligatoire.', required),
minValue: helpers.withMessage('La date de dĂ©but doit ĂȘtre supĂ©rieure Ă  Janvier 2013.', (val: string) => {
if (val) {
return moment(val, 'YYYY-MM') >= moment(dateMin.value, 'YYYY-MM');
}
return true;
}),
maxValue: helpers.withMessage('La date de dĂ©but doit ĂȘtre infĂ©rieure Ă  la date de fin.', (val: string) => {
if (formData.dateFin && val) {
return moment(val, 'YYYY-MM') <= moment(formData.dateFin, 'YYYY-MM');
}
return true;
}),
isValid: helpers.withMessage('La date de dĂ©but doit ĂȘtre sous la forme YYYY-MM (ex : 2024-01).', (val: string) => {
if (val) {
return moment(val, 'YYYY-MM', true).isValid();
}
return true;
}),
},
dateFin: {
required: helpers.withMessage('La date de fin est obligatoire.', required),
minValue: helpers.withMessage('La date de fin doit ĂȘtre supĂ©rieure Ă  la date de dĂ©but.', (val: string) => {
if (formData.dateDebut && val) {
return moment(val, 'YYYY-MM') >= moment(formData.dateDebut, 'YYYY-MM');
}
return true;
}),
maxValue: helpers.withMessage('La date de fin doit ĂȘtre infĂ©rieure Ă  la date du jour.', (val: string) => {
if (val) {
return moment(val, 'YYYY-MM') <= moment().endOf('month');
}
return true;
}),
isValid: helpers.withMessage('La date de fin doit ĂȘtre sous la forme YYYY-MM (ex : 2024-01).', (val: string) => {
if (val) {
return moment(val, 'YYYY-MM', true).isValid();
}
return true;
}),
},
area: {
required: helpers.withMessage('Le territoire est obligatoire.', (val: string) => {
return val !== null;
}),
},
};
});
const v$ = useVuelidate(rules, formData);
const askLoadData = (async () => {
await v$.value.$validate();
if (v$.value.$error) {
return;
}
const areaText = areaOptions.value.find((a: any) => a.value === formData.area)?.text;
if (areaText === 'France entiĂšre') {
modalOpened.value = true;
return;
Expand All @@ -35,11 +98,11 @@ const askLoadData = (() => {
});
const loadData = (() => {
const areaText = areaOptions.value.find((a: any) => a.value === area.value)?.text;
const areaText = areaOptions.value.find((a: any) => a.value === formData.area)?.text;
emit('filterChange', {
dateDebut: dateDebut.value,
dateFin: dateFin.value,
area: area.value,
dateDebut: formData.dateDebut,
dateFin: formData.dateFin,
area: formData.area,
areaText: areaText,
});
computeDisabled.value = true;
Expand Down Expand Up @@ -89,44 +152,50 @@ watch(() => refDataStore.departements, () => {
<template>
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-lg-3 fr-col-12">
<DsfrSelect label="Territoire"
v-model="area"
@update:modelValue="computeDisabled = !(area !== null && dateDebut && dateFin)"
:options="areaOptions"
required />
<DsfrInputGroup :error-message="utils.showInputError(v$, 'area')">
<DsfrSelect label="Territoire"
v-model="formData.area"
@update:modelValue="computeDisabled = !(formData.area !== null && formData.dateDebut && formData.dateFin)"
:options="areaOptions"
required />
</DsfrInputGroup>
</div>
<div class="fr-col-lg-3 fr-col-6">
<DsfrInput
id="dateDebut"
v-model="dateDebut"
@update:modelValue="computeDisabled = !(area !== null && dateDebut && dateFin)"
label="Date début"
label-visible
type="month"
name="dateDebutCarte"
:min="dateMin"
:max="dateFin ? dateFin : currentDate.format('YYYY-MM')"
required
/>
<DsfrInputGroup :error-message="utils.showInputError(v$, 'dateDebut')">
<DsfrInput
id="dateDebut"
v-model="formData.dateDebut"
@update:modelValue="computeDisabled = !(formData.area !== null && formData.dateDebut && formData.dateFin)"
label="Date début"
label-visible
type="month"
name="dateDebutCarte"
:min="dateMin"
:max="formData.dateFin ? formData.dateFin : currentDate.format('YYYY-MM')"
required
/>
</DsfrInputGroup>
</div>
<div class="fr-col-lg-3 fr-col-6">
<DsfrInput
id="dateFin"
v-model="dateFin"
@update:modelValue="computeDisabled = !(area !== null && dateDebut && dateFin)"
label="Date fin"
label-visible
type="month"
name="dateCarte"
:min="dateDebut"
:max="currentDate.format('YYYY-MM')"
required
/>
<DsfrInputGroup :error-message="utils.showInputError(v$, 'dateFin')">
<DsfrInput
id="dateFin"
v-model="formData.dateFin"
@update:modelValue="computeDisabled = !(formData.area !== null && formData.dateDebut && formData.dateFin)"
label="Date fin"
label-visible
type="month"
name="dateCarte"
:min="formData.dateDebut"
:max="currentDate.format('YYYY-MM')"
required
/>
</DsfrInputGroup>
</div>
<div class="fr-col-lg-3 fr-col-6">
<div data-html2canvas-ignore="true" class="fr-col-lg-3 fr-col-6">
<DsfrButton :disabled="loading || computeDisabled"
@click="askLoadData()">
<div class="fr-grid-row fr-grid-row--middle" >
<div class="fr-grid-row fr-grid-row--middle">
Calculer
<Loader class="fr-ml-1w" :show="loading" />
</div>
Expand All @@ -152,5 +221,9 @@ watch(() => refDataStore.departements, () => {
font-weight: bold;
}
}
:deep(.fr-select-group) {
margin-bottom: 0;
}
}
</style>
13 changes: 5 additions & 8 deletions client/components/carte/commune/Map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,7 +467,7 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
<Loader :show="true" />
</div>
<div v-show=!loading>
<div class="map-pre-actions">
<div data-html2canvas-ignore="true" class="map-pre-actions">
<div v-if="showError"
class="map-pre-actions-card fr-p-1w fr-m-1w">
<DsfrAlert description="Une erreur est survenue lors du chargement de la carte"
Expand Down Expand Up @@ -519,8 +519,7 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
:id="true">
<div>
Les couleurs de la carte traduisent un "score de restrictions appliquées aux usages de l'eau". Ce score est
calculé pour chaque commune en combinant deux facteurs : la durée et l'intensité des
restrictions.<br /><br />
calculé pour chaque commune en combinant deux facteurs : la durée et la gravité des restrictions.<br /><br />
L'intensité des restrictions est classée en cinq niveaux, chacun pondéré selon sa sévérité&nbsp;:
<ul>
<li>Pas de restrictions&nbsp;: 0</li>
Expand All @@ -538,10 +537,8 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
%. Le score est limitĂ© pour Ă©viter des valeurs trop Ă©levĂ©es dans les cas extrĂȘmes.<br /><br />

Les résultats sont ensuite visualisés à l'aide d'un code couleur. Plus le score est élevé, plus la couleur
est
foncée, indiquant une gravité et/ou une durée importante des restrictions dans la commune. L'échelle
utilisée
est la suivante&nbsp;:
est foncée, indiquant une gravité et/ou une durée importante des restrictions dans la commune. L'échelle
utilisée est la suivante&nbsp;:

<ul>
<li>
Expand Down Expand Up @@ -582,7 +579,7 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
<CarteCommuneTable :dataCommune="communeDataComputed"
:maxPonderation="maxPonderation"
:dateDebut="dateBegin"
:dateFin="dateEnd"/>
:dateFin="dateEnd" />
</div>
</div>
<template v-else>
Expand Down
Loading

0 comments on commit 26237cc

Please sign in to comment.