Skip to content

Commit

Permalink
Merge pull request #423 from AgenceBio/feat/maj_import
Browse files Browse the repository at this point in the history 
feat: mise a jour création et import du parcellaire
  • Loading branch information
@GregoireDucharme
GregoireDucharme authored Dec 5, 2024
2 parents a1cf11a + 01e37a7 commit 2969425
Show file tree
Hide file tree
Showing 10 changed files with 605 additions and 312 deletions.
23 changes: 0 additions & 23 deletions src/components/setup/Flow/Outro.vue
View file

This file was deleted.

303 changes: 232 additions & 71 deletions src/components/setup/Flow/Preview.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,74 +13,112 @@
</p>
<p v-else>{{ warning }}</p>
</div>

<div class="fr-mb-3w">
<MapContainer
:controls="false"
class="map map--preview"
:options="{ interactive: false, hash: false, trackResize: false }"
minInitialZoom="22"
:bounds="mapBounds"
>
<GeojsonLayer :style="baseStyle" name="base" />
<FeaturesLayer :data="featureCollection" />
</MapContainer>
</div>

<div v-if="operatorStore.records?.length" class="fr-alert fr-alert--info fr-mb-3w">
Récupération des informations
<p>
Vous pouvez récupérer les informations renseignées sur le dernier parcellaire créé&nbsp;: dates et niveaux de
conversion, parcelles ajoutées manuellement, variété des parcelles de la culture principale, commentaires et
noms de parcelle modifiés.
</p>
</div>

<form @submit.prevent="emit('submit', importPrevious === 'oui')">
<fieldset
v-if="operatorStore.records?.length"
class="fr-fieldset"
id="radio-import"
aria-labelledby="radio-import-legend"
>
<legend class="fr-fieldset__legend fr-fieldset__legend--regular" id="radio-import-legend">
Souhaitez-vous récupérer les informations renseignées dans le dernier parcellaire créé (<i>{{
lastCreatedRecord.version_name
}}</i
>) ?
</legend>

<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input
type="radio"
id="radio-import-oui"
name="radio-import"
v-model="importPrevious"
value="oui"
required="required"
/>
<label class="fr-label" for="radio-import-oui">Oui</label>
<form @submit.prevent="submitForm">
<div :class="{ 'copy-data': !!operatorStore.records?.length }">
<div>
<MapContainer
:controls="false"
class="map map--preview"
:options="{ interactive: false, hash: false, trackResize: false }"
minInitialZoom="22"
:bounds="mapBounds"
>
<GeojsonLayer :style="baseStyle" name="base" />
<FeaturesLayer :data="featureCollection" />
</MapContainer>
<div class="fr-mt-3w">
<Spinner v-if="isLoading">Import en cours</Spinner>
<p v-else>
<button class="fr-btn fr-btn--icon-right fr-icon-check-line" type="submit">
Terminer et accéder au parcellaire
</button>
</p>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input
type="radio"
id="radio-import-non"
name="radio-import"
v-model="importPrevious"
value="non"
required="required"
/>
<label class="fr-label" for="radio-import-non">Non</label>
<div class="data-form" v-if="operatorStore.records?.length">
<fieldset class="fr-fieldset" id="radio-import" aria-labelledby="radio-import-legend">
<legend class="fr-fieldset__legend fr-fieldset__legend--bold custom-legend" id="radio-import-legend">
Souhaitez-vous récupérer les informations renseignées dans une version précédente ?
</legend>

<div class="list-options">
<div class="fr-fieldset__element first-choice">
<div class="fr-radio-group">
<input
type="radio"
id="radio-import-oui"
name="radio-import"
v-model="importPrevious"
value="oui"
required="required"
/>
<label class="fr-label" for="radio-import-oui"
>Oui<small class="grey--text">Recommandé par l’organisme de certification</small></label
>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input
type="radio"
id="radio-import-non"
name="radio-import"
v-model="importPrevious"
value="non"
required="required"
/>
<label class="fr-label" for="radio-import-non">Non</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="fr-fieldset version-select">
<div class="fr-fieldset__element">
<label class="fr-label" for="select-version">Sélectionner la version</label>
<select
class="fr-select"
name="select-version"
id="select-version"
v-model="selectedRecord"
:disabled="importPrevious != 'oui'"
>
<option :value="record.record_id" :key="record.record_id" v-for="record in sortedRecords">
{{ getShortVersionName(record.version_name) }}
</option>
</select>
</div>
</fieldset>
<div v-show="showDetails && operatorStore.records?.length" class="more-infos-text">
<small>
Vous pouvez récupérer les informations renseignées dans une version de votre choix : dates et niveaux de
conversion, parcelles ajoutées manuellement, variété (si la culture est identique), notes de certification
et noms de parcelles modifiés.
<br />
<br />
Pour plus d’information :
<a
class="fr-link"
target="_blank"
:href="
permissions.isAgri
? 'https://docs-cartobio.agencebio.org/agriculteurs.trices/pas-a-pas/gestion-des-versions-de-parcellaire/importer-une-nouvelle-version-de-parcellaire'
: 'https://docs-cartobio.agencebio.org/organisme-certification/pas-a-pas/gestion-des-versions-de-parcellaire/importer-une-nouvelle-version'
"
>Accéder à la FAQ</a
>
</small>
</div>
<button
v-if="operatorStore.records?.length"
class="more-infos fr-btn--tertiary-no-outline"
@click.stop.prevent="showDetails = !showDetails"
>
Quelles informations sont reprises ?<span
:class="showDetails ? 'fr-icon-arrow-down-s-line' : 'fr-icon-arrow-up-s-line'"
/>
</button>
</div>
</fieldset>

<p>
<button class="fr-btn" type="submit">Importer ces données</button>
</p>
</div>
</form>
</section>
</template>
Expand All @@ -96,8 +134,11 @@ import baseStyle from "@/map-styles/base.json";
import FeaturesLayer from "@/components/map/FeaturesLayer.vue";
import MapContainer from "@/components/map/MapContainer.vue";
import GeojsonLayer from "@/components/map/GeojsonLayer.vue";
import { usePermissions } from "@/stores/permissions";
import { CertificationState } from "@agencebio/cartobio-types";
import Spinner from "@/components/widgets/Spinner.vue";
const emit = defineEmits(["submit", "cancel"]);
const emit = defineEmits(["submit"]);
const props = defineProps({
featureCollection: {
type: Object,
Expand All @@ -107,29 +148,149 @@ const props = defineProps({
type: Array,
default: () => [],
},
isLoading: {
type: Boolean,
default: () => false,
},
});
const operatorStore = useOperatorStore();
const lastCreatedRecord = computed(
const permissions = usePermissions();
const sortedRecords = computed(
() =>
operatorStore.records.toSorted(
(recordA, recordB) => new Date(recordB.created_at) - new Date(recordA.created_at),
)[0],
operatorStore.records?.toSorted((recordA, recordB) => {
if (recordA.certification_state != recordB.certification_state) {
if (
recordA.certification_state === CertificationState.CERTIFIED ||
recordB.certification_state === CertificationState.CERTIFIED
) {
return recordA.certification_state === CertificationState.CERTIFIED ? -1 : 1;
}
if (
recordA.certification_state === CertificationState.PENDING_CERTIFICATION ||
recordB.certification_state === CertificationState.PENDING_CERTIFICATION
) {
return recordA.certification_state === CertificationState.PENDING_CERTIFICATION ? -1 : 1;
}
if (
recordA.certification_state === CertificationState.AUDITED ||
recordB.certification_state === CertificationState.AUDITED
) {
return recordA.certification_state === CertificationState.AUDITED ? -1 : 1;
}
}
return new Date(recordB.created_at) - new Date(recordA.created_at);
}) || [],
);
const importPrevious = ref();
const selectedRecord = ref(sortedRecords.value?.length ? sortedRecords.value[0].record_id : null);
const importPrevious = ref("oui");
const showDetails = ref(false);
const surfaceTotale = computed(() => inHa(legalProjectionSurface(props.featureCollection)));
const mapBounds = computed(() => bounds(props.featureCollection));
const submitForm = () => {
const importPrev = importPrevious.value === "oui";
emit("submit", importPrev, importPrev ? selectedRecord.value : null);
};
const getShortVersionName = (name) => {
const maxLength = 40;
if (name.length < maxLength) {
return name;
}
const index = name.indexOf(" ", maxLength);
if (index != -1) {
return name.slice(0, index) + " ...";
}
return name;
};
</script>
<style>
.map {
background: #ccc;
height: 276px;
height: 390px;
width: 100%;
@media (width >= 78em) {
max-width: 40vw;
}
}
.copy-data {
display: flex;
.map {
@media (width >= 78em) {
max-width: 100%;
}
}
> div {
flex: 1;
}
.data-form {
padding-left: 3rem;
}
.list-options {
display: flex;
justify-content: space-between;
flex: 1;
.fr-fieldset__element {
flex: 1;
}
.first-choice {
flex: 2;
}
}
.first-choice {
-webkit-box-shadow: inset -1px 0 0 0 #ddd;
box-shadow: inset -1px 0 0 0 #ddd;
-webkit-box-shadow: inset -1px 0 0 0 var(--border-default-grey);
box-shadow: inset -1px 0 0 0 var(--border-default-grey);
margin-right: 1em;
}
small {
color: var(--text-mention-grey);
}
.custom-legend {
padding-top: 1em;
font-size: 1.25rem;
}
.version-select {
width: 66%;
padding: 0 0 0 0.25rem;
}
.version-select .fr-fieldset__element {
padding-right: 0;
}
.more-infos {
padding-left: 0;
font-size: 0.8em;
}
.more-infos-text {
margin-bottom: 1em;
}
}
</style>
Loading

0 comments on commit 2969425

Please sign in to comment.