feat: switch vue mobile

Signed-off-by: Maud Royer <hello@maudroyer.fr>
AgenceBio · Apr 2, 2024 · c54bf0e · c54bf0e
1 parent 2a273c9
commit c54bf0e
Showing 1 changed file with 29 additions and 9 deletions.
diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/index.vue b/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
@@ -14,21 +14,39 @@ meta:
         <li><a class="fr-breadcrumb__link" aria-current="page">{{ record.version_name }}</a></li>
       </ol>
     </nav>
+
     <div class="fr-grid-row fr-grid-row--gutters">
-      <div class="fr-col-6">
+      <div class="fr-col-12 fr-col-lg-6">
         <RecordHeader />
-        <CertificationSection />
 
-        <div v-if="record.record_id !== operatorStore.records?.[0]?.record_id" class="fr-alert fr-alert--warning fr-alert--sm fr-my-2w">
-          <p>
-            Cette version du parcellaire n'est pas la plus récente.
-          </p>
+        <fieldset class="fr-segmented fr-segmented--sm fr-hidden-lg fr-hidden-xl">
+          <legend class="fr-segmented__legend">Vue</legend>
+          <div class="fr-segmented__elements">
+            <div class="fr-segmented__element">
+              <input type="radio" name="vue" id="vue-parcellaire" value="parcellaire" v-model="vue" />
+              <label class="fr-label fr-icon-table-line" for="vue-parcellaire">Parcellaire</label>
+            </div>
+            <div class="fr-segmented__element">
+              <input type="radio" name="vue" id="vue-carte" value="carte" v-model="vue" />
+              <label class="fr-label fr-icon-map-pin-2-line" for="vue-carte">Carte</label>
+            </div>
+          </div>
+        </fieldset>
+
+        <div class="fr-unhidden-lg fr-mt-3w" :class="{ 'fr-hidden': vue !== 'parcellaire'}">
+          <CertificationSection />
+
+          <div v-if="record.record_id !== operatorStore.records?.[0]?.record_id" class="fr-alert fr-alert--warning fr-alert--sm fr-my-2w">
+            <p>
+              Cette version du parcellaire n'est pas la plus récente.
+            </p>
+          </div>
+          <ValidationErrors />
+          <FeaturesTable :edit-form="EditForm" :mass-actions="massActions" />
         </div>
-        <ValidationErrors />
-        <FeaturesTable :edit-form="EditForm" :mass-actions="massActions" />
       </div>
 
-      <div class="fr-col-6 fr-col--map">
+      <div class="fr-col-12 fr-col-lg-6 fr-unhidden-lg fr-col--map" :class="{ 'fr-hidden': vue !== 'carte' }">
         <div class="sticky-map" :class="{ 'sticky-map--full-size': isMapFullSize }">
           <div :class="{ 'full-size-map fr-card fr-card--shadow fr-p-2w': isMapFullSize }">
             <MapContainer class="map" :class="{ 'map--full-size': isMapFullSize }" :mode="isMapFullSize ? 'fullsize' : 'compact'" :bounds="recordStore.bounds" :show-attribution="true" ref="mapRef">
@@ -84,6 +102,8 @@ const recordStore = useRecordStore()
 const { record } = recordStore
 const { operator } = operatorStore
 
+const vue = ref('parcellaire')
+
 const mapRef = shallowRef(null)
 const { map: mapPrefs } = storeToRefs(preferences)
 const isMapFullSize = ref(false)