feat: headers et breadcrumbs pour ajout et modif de parcelles

Signed-off-by: Maud Royer <[email protected]>
AgenceBio · Apr 9, 2024 · db325d3 · db325d3
1 parent 7dd1c81
commit db325d3
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 26 deletions.
diff --git a/src/components/record/Header.vue b/src/components/record/Header.vue
@@ -4,7 +4,7 @@
     <h1 class="fr-h4 fr-my-0 fr-mb-1v">
       {{ record.version_name }}
 
-      <button class="fr-btn fr-btn--tertiary-no-outline fr-icon fr-icon-edit-line" @click="showEditVersionModal = true">
+      <button v-if="!disableActions" class="fr-btn fr-btn--tertiary-no-outline fr-icon fr-icon-edit-line" @click="showEditVersionModal = true">
         Modifier la version
       </button>
     </h1>

diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/dessin.vue b/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/dessin.vue
@@ -7,14 +7,18 @@ meta:
 
 <template>
   <section class="fr-container fr-py-9v">
-        <p>
-          <router-link :to="`/exploitations/${numeroBio}/${recordStore.record.record_id}/ajout-parcelle`" class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-arrow-left-line">
-            Retour à l'ajout de parcelles
-          </router-link>
-        </p>
+        <nav role="navigation" class="fr-breadcrumb fr-mb-2w fr-mt-0">
+          <ol class="fr-breadcrumb__list">
+            <li><router-link class="fr-breadcrumb__link" :to="permissions.startPage">Exploitations</router-link></li>
+            <li><router-link class="fr-breadcrumb__link" :to="`/exploitations/${operator.numeroBio}`">{{ operator.nom }}</router-link></li>
+            <li><router-link class="fr-breadcrumb__link" :to="`/exploitations/${operator.numeroBio}/${ record.record_id }`">{{ record.version_name }}</router-link></li>
+            <li><router-link class="fr-breadcrumb__link" :to="`/exploitations/${operator.numeroBio}/${ record.record_id }/ajout-parcelle`">Ajout de parcelle</router-link></li>
+            <li><a class="fr-breadcrumb__link" aria-current="page">Dessin</a></li>
+          </ol>
+        </nav>
+
+        <RecordHeader disable-actions />
 
-        <ParcellaireState :record="recordStore.record" />
-        <h2 class="fr-h4 fr-my-3v">{{ operatorStore.operator.nom }}</h2>
         <h3 class="fr-h5 fr-my-3v">Ajouter une parcelle par dessin</h3>
 
         <CommuneSelect @feature="centerCommune" class="fr-mt-3v fr-mb-6v" style="max-width: 20.5rem" />
@@ -90,7 +94,7 @@ import baseStyle from "@/map-styles/base.json"
 import MapContainer from "@/components/Map/MapContainer.vue"
 import GeojsonLayer from "@/components/Map/GeojsonLayer.vue"
 import { useFeaturesStore, useOperatorStore, usePermissions, usePreferences, useRecordStore } from "@/stores/index.js"
-import ParcellaireState from "@/components/record/State.vue"
+import RecordHeader from "@/components/record/Header.vue"
 import CommuneSelect from "@/components/Forms/CommuneSelect.vue"
 import CertificationBodyEditForm from "@/components/Features/SingleItemCertificationBodyForm.vue"
 import OperatorEditForm from "@/components/Features/SingleItemOperatorForm.vue"
@@ -119,6 +123,8 @@ const featuresStore = useFeaturesStore()
 const permissions = usePermissions()
 const preferences = usePreferences()
 const router = useRouter()
+const { record } = recordStore
+const { operator } = operatorStore
 
 const map = ref(null) // MapContainer instance
 const { map: mapPrefs } = storeToRefs(preferences)

diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/index.vue b/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/index.vue
@@ -9,13 +9,17 @@
   <section class="fr-container fr-py-9v">
     <div class="fr-grid-row fr-grid-row--gutters">
       <div class="fr-col-6">
-        <p>
-          <router-link :to="backLink" class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-arrow-left-line">
-            Retour à l'exploitation
-          </router-link>
-        </p>
+        <nav role="navigation" class="fr-breadcrumb fr-mb-2w fr-mt-0">
+          <ol class="fr-breadcrumb__list">
+            <li><router-link class="fr-breadcrumb__link" :to="permissions.startPage">Exploitations</router-link></li>
+            <li><router-link class="fr-breadcrumb__link" :to="`/exploitations/${operator.numeroBio}`">{{ operator.nom }}</router-link></li>
+            <li><router-link class="fr-breadcrumb__link" :to="`/exploitations/${operator.numeroBio}/${ record.record_id }`">{{ record.version_name }}</router-link></li>
+            <li><a class="fr-breadcrumb__link" aria-current="page">Ajout de parcelle</a></li>
+          </ol>
+        </nav>
+
+        <RecordHeader disable-actions />
 
-        <OperatorSummary disable-actions />
         <FeatureAddFlow :back-link="backLink" @update="pendingChangesCollection = $event" />
       </div>
 
@@ -46,13 +50,13 @@ import { bounds } from '@/components/Features/index.js'
 import MapContainer from '@/components/Map/MapContainer.vue'
 import GeojsonLayer from '@/components/Map/GeojsonLayer.vue'
 import SetupOverlay from '@/components/Map/SetupOverlay.vue'
-import OperatorSummary from '@/components/records/Summary.vue'
+import RecordHeader from '@/components/record/Header.vue'
 import FeatureAddFlow from '@/components/Features/AddFlow.vue'
 
 import baseStyle from '@/map-styles/base.json'
 import cadastreStyle from '@/map-styles/cadastre.json'
 
-import { usePreferences, useRecordStore } from '@/stores/index.js'
+import { useOperatorStore, usePermissions, usePreferences, useRecordStore } from '@/stores/index.js'
 import satelliteStyle from "@/map-styles/satellite.json"
 import surroundingsStyle from "@/map-styles/surroundings.json"
 import LayerSelector from "@/components/Map/LayerSelector.vue"
@@ -65,8 +69,12 @@ const props = defineProps({
   }
 })
 
+const operatorStore = useOperatorStore()
 const recordStore = useRecordStore()
 const preferences = usePreferences()
+const permissions = usePermissions()
+const { operator } = operatorStore
+const { record } = recordStore
 
 const { map: mapPrefs } = storeToRefs(preferences)
 

diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/modifier/[featureId].vue b/src/pages/exploitations/[numeroBio]/[recordId]/modifier/[featureId].vue
@@ -7,14 +7,16 @@ meta:
 
 <template>
   <section class="fr-container fr-py-9v">
-    <p>
-      <router-link :to="`/exploitations/${props.numeroBio}`" class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-arrow-left-line">
-        Retour au parcellaire
-      </router-link>
-    </p>
+    <nav role="navigation" class="fr-breadcrumb fr-mb-2w fr-mt-0">
+      <ol class="fr-breadcrumb__list">
+        <li><router-link class="fr-breadcrumb__link" :to="permissions.startPage">Exploitations</router-link></li>
+        <li><router-link class="fr-breadcrumb__link" :to="`/exploitations/${operator.numeroBio}`">{{ operator.nom }}</router-link></li>
+        <li><router-link class="fr-breadcrumb__link" :to="`/exploitations/${operator.numeroBio}/${ record.record_id }`">{{ record.version_name }}</router-link></li>
+        <li><a class="fr-breadcrumb__link" aria-current="page">Modifier une parcelle</a></li>
+      </ol>
+    </nav>
 
-    <ParcellaireState :record="recordStore.record" />
-    <h2 class="fr-h4 fr-my-3v">{{ operatorStore.operator.nom }}</h2>
+    <RecordHeader disable-actions />
     <h3 class="fr-h5 fr-my-3v">Modifier le contour de «&nbsp;{{ modifiedFeature && featureName(modifiedFeature) }}&nbsp;»</h3>
 
     <div class="fr-grid-row fr-grid-row--gutters">
@@ -89,10 +91,9 @@ import { useRouter } from "vue-router"
 import { feature, featureCollection } from "@turf/helpers"
 
 import baseStyle from "@/map-styles/base.json"
-import ParcellaireState from "@/components/record/State.vue"
 import MapContainer from "@/components/Map/MapContainer.vue"
 import GeojsonLayer from "@/components/Map/GeojsonLayer.vue"
-import { useFeaturesStore, useOperatorStore, usePreferences, useRecordStore } from "@/stores/index.js"
+import { useFeaturesStore, useOperatorStore, usePermissions, usePreferences, useRecordStore } from "@/stores/index.js"
 import { TerraDraw, TerraDrawMapLibreGLAdapter, TerraDrawPolygonMode, TerraDrawSelectMode } from "terra-draw"
 import intersect from "@turf/intersect"
 import { bounds, featureName, inHa, surface } from "@/components/Features/index.js"
@@ -105,6 +106,7 @@ import cadastreStyle from "@/map-styles/cadastre.json"
 import surroundingsStyle from "@/map-styles/surroundings.json"
 import LayerSelector from "@/components/Map/LayerSelector.vue"
 import FeaturesLayer from "@/components/Map/FeaturesLayer.vue"
+import RecordHeader from "@/components/record/Header.vue"
 
 const props = defineProps({
   numeroBio: {
@@ -117,11 +119,14 @@ const props = defineProps({
   },
 })
 
+const permissions = usePermissions()
 const operatorStore = useOperatorStore()
 const recordStore = useRecordStore()
 const featuresStore = useFeaturesStore()
 const preferences = usePreferences()
 const router = useRouter()
+const { operator } = operatorStore
+const { record } = recordStore
 
 const otherCollection = computed(() => loadingError.value ? featuresStore.collection : featureCollection(
     featuresStore.collection.features.filter(f => f.id !== String(props.featureId)))