From 42dc155b461acf39efab816f355758c6b6232920 Mon Sep 17 00:00:00 2001
From: Maud Royer <hello@maudroyer.fr>
Date: Fri, 31 May 2024 17:45:20 +0200
Subject: [PATCH] feat: edition hors-ligne et synchronisation

Signed-off-by: Maud Royer <hello@maudroyer.fr>
---
 src/components/Conflict.vue                   |  38 +++
 src/components/Features/FeatureGroup.vue      |   7 +-
 .../Features/MassActionsSelector.vue          |   4 +-
 .../SingleItemCertificationBodyForm.test.js   |  17 +-
 src/components/Features/Table.test.js         |  12 +-
 .../record/CertificationSection.vue           |  17 +-
 src/components/record/Header.test.js          |   2 +-
 src/components/record/Header.vue              |   1 -
 .../record/modals/CultureTypeModal.vue        |   7 +-
 src/components/versions/EditVersionModal.vue  |   4 +-
 .../versions/VersionConflictModal.vue         |  54 ++++
 .../certification/exploitations/index.vue     |   5 +-
 src/pages/exploitations/[numeroBio]/index.vue |  16 +-
 src/stores/features.js                        |  27 +-
 src/stores/operator.js                        |  34 ++-
 src/stores/record.js                          | 103 ++++---
 src/stores/record.test.js                     |  16 +-
 src/stores/storage.js                         | 289 +++++++++++++++++-
 src/stores/storage.test.js                    |  86 +++++-
 tests-setup.js                                |   7 +-
 20 files changed, 613 insertions(+), 133 deletions(-)
 create mode 100644 src/components/Conflict.vue
 create mode 100644 src/components/versions/VersionConflictModal.vue

diff --git a/src/components/Conflict.vue b/src/components/Conflict.vue
new file mode 100644
index 00000000..788f3aca
--- /dev/null
+++ b/src/components/Conflict.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { useCartoBioStorage } from "@/stores/storage.js"
+import VersionConflictModal from "@/components/versions/VersionConflictModal.vue"
+import { ref } from "vue"
+
+const storage = useCartoBioStorage()
+const modalRecordId = ref(null)
+</script>
+
+<template>
+  <div class="fr-alert fr-alert--error" role="alert">
+    <div class="fr-alert__title">Conflit entre versions</div>
+    <p>
+      Les exploitations suivantes ont été modifiées pendant que vous étiez hors-ligne. Cliquez sur l'exploitation pour
+      résoudre le conflit.
+    </p>
+
+    <ul class="fr-text--bold">
+      <li v-for="conflict in storage.conflicts" :key="conflict">
+        <a href="#" @click="modalRecordId = conflict">
+          {{ storage.operators[storage.records[conflict].numerobio].operator.nom }}
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <Teleport to="body">
+    <VersionConflictModal
+      v-if="modalRecordId"
+      :record-id="modalRecordId"
+      @close="modalRecordId = null"
+    />
+  </Teleport>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Features/FeatureGroup.vue b/src/components/Features/FeatureGroup.vue
index f09a5280..5f2e59c3 100644
--- a/src/components/Features/FeatureGroup.vue
+++ b/src/components/Features/FeatureGroup.vue
@@ -90,10 +90,9 @@
                   class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl"
                   :class="{'fr-btn': true, 'fr-btn--tertiary-no-outline': true, 'fr-icon-edit-line': true }"
                   @click="toggleEditForm(feature.id)" aria-label="Modifier"
-                  :disabled="!isOnline"
               />
 
-              <ActionDropdown with-icons :disabled="!isOnline">
+              <ActionDropdown with-icons>
                 <li v-if="permissions.canChangeGeometry && isOnline">
                   <router-link :to="`/exploitations/${operatorStore.operator.numeroBio}/${recordStore.record.record_id}/modifier/${feature.id}`" type="button" class="fr-btn fr-btn--tertiary-no-outline fr-icon-geometry fr-text--sm">
                   Modifier le contour
@@ -108,7 +107,7 @@
                   <button
                       type="button"
                       @click.prevent="toggleDeleteForm(feature.id)"
-                      :disabled="!permissions.canDeleteFeature || !isOnline"
+                      :disabled="!permissions.canDeleteFeature"
                       class="fr-btn fr-btn--tertiary-no-outline fr-icon-delete-line btn--error fr-text--sm"
                   >
                     Supprimer la parcelle
@@ -195,7 +194,7 @@ watch(selectedIds, (selectedIds, prevSelectedIds) => {
     open.value = true
 
     setTimeout(() => {
-      document.querySelector(`tr#parcelle-${newItems[0]}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      document?.querySelector(`tr#parcelle-${newItems[0]}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
     }, 200)
   }
 })
diff --git a/src/components/Features/MassActionsSelector.vue b/src/components/Features/MassActionsSelector.vue
index a1c28cab..98b1bddb 100644
--- a/src/components/Features/MassActionsSelector.vue
+++ b/src/components/Features/MassActionsSelector.vue
@@ -4,7 +4,6 @@
       <button
           class="fr-btn fr-btn--sm fr-btn--secondary fr-btn--icon-right fr-icon-arrow-down-s-line menu-button"
           @click.stop.prevent="toggle"
-          :disabled="!isOnline"
       >
         {{ label }}
       </button>
@@ -26,7 +25,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { onClickOutside, useOnline } from '@vueuse/core'
+import { onClickOutside } from '@vueuse/core'
 import ActionDropdown from "@/components/ActionDropdown.vue"
 
 defineProps({
@@ -42,7 +41,6 @@ defineProps({
 
 const emit = defineEmits(['submit'])
 
-const isOnline = useOnline()
 const isMenuOpen = ref(false)
 const isModalOpen = ref(false)
 const openerElement = ref(null)
diff --git a/src/components/Features/SingleItemCertificationBodyForm.test.js b/src/components/Features/SingleItemCertificationBodyForm.test.js
index 74a64feb..46b4961a 100644
--- a/src/components/Features/SingleItemCertificationBodyForm.test.js
+++ b/src/components/Features/SingleItemCertificationBodyForm.test.js
@@ -5,10 +5,10 @@ import { flushPromises, mount } from "@vue/test-utils"
 import axios from 'axios'
 import { useRecordStore } from "@/stores/record.js"
 import { usePermissions } from "@/stores/permissions.js"
+import { useCartoBioStorage } from "@/stores/storage.js"
 import {
   ANNOTATIONS,
   AnnotationTags,
-  AUDITOR_RULES,
   CERTIFICATION_BODY_DECISION,
   LEVEL_AB,
   LEVEL_C1,
@@ -22,14 +22,16 @@ import TableComponent from "../record/Table.vue"
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
 const recordStore = useRecordStore(pinia)
 const permissions = usePermissions(pinia)
+const storage = useCartoBioStorage(pinia)
 
 describe("SingleItemCertificationBodyForm", () => {
   let wrapper
 
   beforeEach(async () => {
-    recordStore.reset()
+    recordStore.$reset()
     recordStore.update(record)
     permissions.isOc = true
+    storage.online = true
 
     const AsyncComponent = defineComponent({
       components: { TableComponent },
@@ -101,11 +103,13 @@ describe("SingleItemCertificationBodyForm", () => {
     await form.find('#downgraded_state').setValue(CERTIFICATION_BODY_DECISION.ACCEPTED)
 
     // click and assess server update
-    axios.__createMock.put.mockResolvedValueOnce({ data: record })
+    axios.__createMock.patch.mockResolvedValueOnce({ data: record })
     await form.find('.fr-modal__footer button.fr-btn').trigger('click')
 
+    await flushPromises()
     expect(wrapper.findComponent(EditForm).exists()).toEqual(false)
-    expect(axios.__createMock.put.mock.lastCall).toMatchObject([
+    expect(axios.__createMock.patch).toHaveBeenCalled()
+    expect(axios.__createMock.patch.mock.lastCall).toMatchObject([
       '/v2/audits/054f0d70-c3da-448f-823e-81fcf7c2bf6e/parcelles/2',
       {
         properties: {
@@ -127,6 +131,11 @@ describe("SingleItemCertificationBodyForm", () => {
             }
           ]
         }
+      },
+      {
+        headers: {
+          "If-Unmodified-Since": expect.any(String)
+        }
       }
     ])
   })
diff --git a/src/components/Features/Table.test.js b/src/components/Features/Table.test.js
index 07c635c3..0ebf3df5 100644
--- a/src/components/Features/Table.test.js
+++ b/src/components/Features/Table.test.js
@@ -8,6 +8,7 @@ import { DeletionReasonsCode, GROUPE_COMMUNE } from "@/components/Features/index
 import { useFeaturesStore } from "@/stores/features.js"
 import { usePermissions } from "@/stores/permissions.js"
 import { useRecordStore } from "@/stores/record.js"
+import { useCartoBioStorage } from "@/stores/storage.js"
 
 import record from './__fixtures__/record-with-features.json' assert { type: 'json' }
 import Modal from "@/components/Modal.vue"
@@ -16,14 +17,16 @@ import EditForm from "@/components/Features/SingleItemOperatorForm.vue"
 import TableComponent from "../record/Table.vue"
 
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+const storageStore = useCartoBioStorage(pinia)
 const recordStore = useRecordStore(pinia)
 const featuresStore = useFeaturesStore(pinia)
 const permissions = usePermissions(pinia)
 
 describe("Features Table", () => {
   beforeEach(() => {
-    recordStore.reset()
+    recordStore.$reset()
     recordStore.update(record)
+    storageStore.online = true
   })
 
   afterEach(() => {
@@ -113,7 +116,7 @@ describe("Features Table", () => {
     await table.find('tr#parcelle-2 td').trigger('click')
     await flushPromises()
 
-    axios.__createMock.put.mockResolvedValueOnce({ data: record })
+    axios.__createMock.patch.mockResolvedValueOnce({ data: record })
 
     // this throws if the modal form does not exist
     // it catches the Component reference even if it has been Teleport-ed in the <body>
@@ -123,8 +126,9 @@ describe("Features Table", () => {
     //submit form
     await form.find('.fr-modal__footer button.fr-btn').trigger('click')
 
+    await flushPromises()
     // modal is down, and the table should be updated
-    expect(axios.__createMock.put).toHaveBeenCalled()
+    expect(axios.__createMock.patch).toHaveBeenCalled()
     expect(wrapper.findComponent(EditForm).exists()).toEqual(false)
   })
 
@@ -182,7 +186,7 @@ describe("Features Table", () => {
     expect(modal.exists()).toEqual(false)
 
     // now, we change a field and we should not be able to close it
-    axios.__createMock.put.mockResolvedValueOnce({ data: record })
+    axios.__createMock.patch.mockResolvedValueOnce({ data: record })
 
     table.find('tr.parcelle td').trigger('click')
     await flushPromises()
diff --git a/src/components/record/CertificationSection.vue b/src/components/record/CertificationSection.vue
index 1ff1f0ee..ab595460 100644
--- a/src/components/record/CertificationSection.vue
+++ b/src/components/record/CertificationSection.vue
@@ -7,9 +7,7 @@ import { usePermissions } from "@/stores/permissions.js"
 import { useRecordStore } from "@/stores/record.js"
 import CertificationModal from "@/components/record/modals/CertificationModal.vue"
 import SaveAuditModal from "@/components/record/modals/SaveAuditModal.vue"
-import { useOnline } from "@vueuse/core"
 
-const isOnline = useOnline()
 const recordStore = useRecordStore()
 const operatorStore = useOperatorStore()
 const featuresSets = useFeaturesSetsStore()
@@ -23,8 +21,8 @@ const showCertificationModal = ref(false)
 
 const canEndAudit = computed(() => permissions.isOc && recordStore.hasFeatures && !featuresSets.hasRequiredSets)
 
-async function handleSaveAudit ({ patch }) {
-  await recordStore.updateInfo({
+function handleSaveAudit ({ patch }) {
+  recordStore.updateInfo({
     ...patch,
     certification_state: CERTIFICATION_STATE.AUDITED
   })
@@ -32,14 +30,14 @@ async function handleSaveAudit ({ patch }) {
   showSaveAuditModal.value = false
 }
 
-async function handleSendAudit () {
-  await recordStore.updateInfo({
+function handleSendAudit () {
+  recordStore.updateInfo({
     certification_state: CERTIFICATION_STATE.PENDING_CERTIFICATION
   })
 }
 
-async function handleCertify ({ patch }) {
-  await recordStore.updateInfo({
+function handleCertify ({ patch }) {
+  recordStore.updateInfo({
     ...patch,
     certification_state: CERTIFICATION_STATE.CERTIFIED
   })
@@ -81,7 +79,6 @@ async function handleCertify ({ patch }) {
         v-if="permissions.canSaveAudit"
         class="fr-btn"
         @click="showSaveAuditModal = true"
-        :disabled="!isOnline"
     >Terminer l'audit</button>
     <span v-else>L'auditeur doit maintenant terminer l'audit.</span>
   </div>
@@ -93,7 +90,6 @@ async function handleCertify ({ patch }) {
         v-if="permissions.canSendAudit"
         class="fr-btn"
         @click="handleSendAudit"
-        :disabled="!isOnline"
     >Soumettre pour certification</button>
     <span v-else>L'auditeur doit maintenant soumettre l'audit pour certification.</span>
   </div>
@@ -104,7 +100,6 @@ async function handleCertify ({ patch }) {
     <button
         v-if="permissions.canCertify"
         class="fr-btn" @click="showCertificationModal = true"
-        :disabled="!isOnline"
     >Certifier le parcellaire</button>
     <span v-else>Le chargé de certification doit maintenant certifier le parcellaire.</span>
   </div>
diff --git a/src/components/record/Header.test.js b/src/components/record/Header.test.js
index 10e3fce8..b7ea9d06 100644
--- a/src/components/record/Header.test.js
+++ b/src/components/record/Header.test.js
@@ -31,7 +31,7 @@ describe("RecordHeader", () => {
   afterEach(() => {
     operatorStore.$reset()
     userStore.$reset()
-    recordStore.reset()
+    recordStore.$reset()
   })
 
   it('should display store informations', () => {
diff --git a/src/components/record/Header.vue b/src/components/record/Header.vue
index 0a4050b9..23ad260a 100644
--- a/src/components/record/Header.vue
+++ b/src/components/record/Header.vue
@@ -8,7 +8,6 @@
           v-if="!disableActions"
           class="fr-btn fr-btn--tertiary-no-outline fr-icon fr-icon-edit-line edit-version-info"
           @click="showEditVersionModal = true"
-          :disabled="!isOnline"
       >
         Modifier la version
       </button>
diff --git a/src/components/record/modals/CultureTypeModal.vue b/src/components/record/modals/CultureTypeModal.vue
index 116c0d2d..f879e7ee 100644
--- a/src/components/record/modals/CultureTypeModal.vue
+++ b/src/components/record/modals/CultureTypeModal.vue
@@ -10,7 +10,7 @@
 
     <form id="mass-edit-form" @submit.prevent="emit('submit', { ids: selectedIds, patch })">
       <div class="fr-input-group">
-        <CultureSelector :cultures="patch.cultures" @change="$cultures => patch.cultures = $cultures" ref="autofocusedElement" />
+        <CultureSelector :cultures="patch.cultures" @change="$cultures => patch.cultures = $cultures" />
       </div>
     </form>
 
@@ -27,8 +27,7 @@
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue'
-import { useFocus } from '@vueuse/core'
+import { reactive } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useFeaturesStore } from '@/stores/features.js'
 
@@ -40,8 +39,6 @@ const emit = defineEmits(['submit'])
 
 const store = useFeaturesStore()
 const { selectedIds } = storeToRefs(store)
-const autofocusedElement = ref()
-useFocus(autofocusedElement, { initialValue: true })
 
 const patch = reactive({
   cultures: [ { CPF: '' }]
diff --git a/src/components/versions/EditVersionModal.vue b/src/components/versions/EditVersionModal.vue
index 6e69251e..ea23ba36 100644
--- a/src/components/versions/EditVersionModal.vue
+++ b/src/components/versions/EditVersionModal.vue
@@ -22,8 +22,8 @@ const patch = reactive({
   certification_date_fin: record.certification_date_fin
 })
 
-async function save() {
-  await recordStore.updateInfo({
+function save() {
+  recordStore.updateInfo({
     version_name: patch.version_name,
     ...(patch.audit_date && { audit_date: patch.audit_date }),
     ...(patch.certification_date_fin && { certification_date_fin: patch.certification_date_fin })
diff --git a/src/components/versions/VersionConflictModal.vue b/src/components/versions/VersionConflictModal.vue
new file mode 100644
index 00000000..7ec459bd
--- /dev/null
+++ b/src/components/versions/VersionConflictModal.vue
@@ -0,0 +1,54 @@
+<script setup>
+import Modal from "@/components/Modal.vue"
+import { useCartoBioStorage } from "@/stores/storage.js"
+
+const emit = defineEmits(['close'])
+const props = defineProps({
+  recordId: {
+    type: String,
+    required: true
+  }
+})
+
+const storage = useCartoBioStorage()
+
+async function duplicate() {
+  await storage.resolveConflict(props.recordId, true)
+  emit('close')
+}
+
+async function merge() {
+  await storage.resolveConflict(props.recordId, false)
+  emit('close')
+}
+</script>
+
+<template>
+  <Modal @close="$emit('close')" v-bind="$attrs" icon="fr-icon-warning-fill">
+    <template #title>Conflit entre versions</template>
+    <p>
+      Il semblerait qu’une autre personne ait effectué des modifications sur un parcellaire pendant que vous le modifiiez hors-ligne :
+    </p>
+    <p>
+      Version : <b>{{ storage.records[recordId].version_name }}</b> de l’exploitation <b>{{ storage.operators[storage.records[recordId].numerobio].nom }}</b><br/>
+    </p>
+    <p>
+      Souhaitez-vous tout de même appliquer les changements faits hors-ligne sur cette version ?
+    </p>
+
+    <template #footer>
+      <ul class="fr-btns-group fr-btns-group--inline">
+        <li>
+          <button class="fr-btn" @click="duplicate">Créer une nouvelle version</button>
+        </li>
+        <li>
+          <button class="fr-btn fr-btn--tertiary" @click="merge">Appliquer les changements</button>
+        </li>
+      </ul>
+    </template>
+  </Modal>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/certification/exploitations/index.vue b/src/pages/certification/exploitations/index.vue
index edced7e4..c521dc53 100644
--- a/src/pages/certification/exploitations/index.vue
+++ b/src/pages/certification/exploitations/index.vue
@@ -43,6 +43,9 @@ meta:
       </div>
 
       <div class="fr-col-12">
+
+        <Conflict v-if="storage.conflicts.size" />
+
         <div class="fr-table fr-table--bordered">
           <table>
             <colgroup>
@@ -154,8 +157,8 @@ import { monthYearDateFormat, dateFormat } from '@/components/dates.js'
 import { searchOperators } from '@/cartobio-api.js'
 import { useUserStore } from '@/stores/user.js'
 import { useOnline } from "@vueuse/core"
-import { useOperatorStore } from "@/stores/operator.js"
 import { useCartoBioStorage } from "@/stores/storage.js"
+import Conflict from "@/components/Conflict.vue"
 
 const props = defineProps({
   search: {
diff --git a/src/pages/exploitations/[numeroBio]/index.vue b/src/pages/exploitations/[numeroBio]/index.vue
index 2ce573bd..565a1bac 100644
--- a/src/pages/exploitations/[numeroBio]/index.vue
+++ b/src/pages/exploitations/[numeroBio]/index.vue
@@ -48,6 +48,8 @@ meta:
       </template>
     </OperatorSetupFlow>
 
+    <Conflict v-if="storage.conflicts.size" />
+
     <div v-else class="fr-table fr-table--bordered version-table">
       <table aria-hidden="true">
         <colgroup>
@@ -110,12 +112,12 @@ meta:
               v-for="record in records"
               :key="record?.record_id"
               class="version-row fr-enlarge-link"
-              :class="{ 'version-row--disabled': !isOnline && !record.storedOffline }"
+              :class="{ 'version-row--disabled': !isOnline && !storage.records[record.record_id] }"
               role="link"
           >
             <td></td>
             <th scope="row">
-              <router-link class="fr-text" :disabled="!isOnline && !record.storedOffline" :to="`/exploitations/${operatorStore.operator.numeroBio}/${record.record_id}`">
+              <router-link class="fr-text" :disabled="!isOnline && !storage.records[record.record_id]" :to="`/exploitations/${operatorStore.operator.numeroBio}/${record.record_id}`">
                 {{ record.version_name }}
               </router-link>
             </th>
@@ -130,7 +132,14 @@ meta:
             </td>
             <td>
               <button
-                v-if="storage.records[record.record_id]"
+                  v-if="storage.syncQueues[record.record_id]"
+                  type="button"
+                  class="fr-btn fr-btn--tertiary-no-outline fr-icon-refresh-line"
+                  title="Changements non-synchronisés"
+                  disabled
+              >Changements non-synchronisés</button>
+              <button
+                v-else-if="storage.records[record.record_id]"
                 type="button"
                 class="fr-btn fr-btn--tertiary-no-outline fr-icon-success-fill"
                 @click.stop.prevent="deleteDownloadModal = record.record_id"
@@ -211,6 +220,7 @@ import toast from "@/components/toast.js"
 import { useRecordStore } from "@/stores/record.js"
 import { useOnline } from "@vueuse/core"
 import { useCartoBioStorage } from "@/stores/storage.js"
+import Conflict from "@/components/Conflict.vue"
 
 const operatorStore = useOperatorStore()
 const recordStore = useRecordStore()
diff --git a/src/stores/features.js b/src/stores/features.js
index 47471455..ec79d607 100644
--- a/src/stores/features.js
+++ b/src/stores/features.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import { useFeaturesSetsStore } from "@/stores/features-sets.js"
-import { apiClient } from "@/cartobio-api.js"
+import { SyncOperation, useCartoBioStorage } from "@/stores/storage.js"
 
 
 /**
@@ -242,9 +242,13 @@ export const useFeaturesStore = defineStore('features', () => {
    * @param {CartoBioFeature} feature
    * @returns {Promise<void>}
    */
-  async function updateSingleFeature ({ id, properties, geometry }) {
-    const { data: updatedRecord } = await apiClient.put(`/v2/audits/${recordId.value}/parcelles/${id}`, { properties, geometry })
-    setAll(updatedRecord.parcelles.features)
+  function updateSingleFeature ({ id, properties, geometry }) {
+    const storage = useCartoBioStorage()
+    storage.addSyncOperation(recordId.value, new SyncOperation(
+        SyncOperation.ACTIONS.UPDATE_FEATURE,
+        { properties, geometry },
+        id
+    ))
   }
 
   /**
@@ -253,8 +257,11 @@ export const useFeaturesStore = defineStore('features', () => {
    * @returns {Promise<void>}
    */
   async function updateFeatureCollectionProperties (featureCollection) {
-    const { data: updatedRecord } = await apiClient.patch(`/v2/audits/${recordId.value}/parcelles`, featureCollection)
-    setAll(updatedRecord.parcelles.features)
+    const storage = useCartoBioStorage()
+    storage.addSyncOperation(recordId.value, new SyncOperation(
+      SyncOperation.ACTIONS.UPDATE_COLLECTION,
+      featureCollection
+    ))
   }
 
   /**
@@ -262,8 +269,12 @@ export const useFeaturesStore = defineStore('features', () => {
    * @return {Promise<void>}
    */
   async function deleteSingleFeature ({ id, reason }) {
-    const { data: updatedRecord } = await apiClient.delete(`/v2/audits/${recordId.value}/parcelles/${id}`, {data: { reason }})
-    setAll(updatedRecord.parcelles.features)
+    const storage = useCartoBioStorage()
+    storage.addSyncOperation(recordId.value, new SyncOperation(
+        SyncOperation.ACTIONS.DELETE_FEATURE,
+        { reason },
+        id
+    ))
   }
 
   /**
diff --git a/src/stores/operator.js b/src/stores/operator.js
index f315c8d6..3e7b0fc3 100644
--- a/src/stores/operator.js
+++ b/src/stores/operator.js
@@ -3,6 +3,7 @@ import { computed, ref, watch } from "vue"
 import { CUSTOM_DIMENSION_DEPARTEMENT, deleteCustomDimension, setCustomDimension } from "@/stats.js"
 import { apiClient } from "@/cartobio-api.js"
 import { useCartoBioStorage } from "@/stores/storage.js"
+import { legalProjectionSurface } from "@/components/Features/index.js"
 
 /**
  * @typedef {import('@vue/reactivity').Ref} Ref
@@ -38,10 +39,13 @@ export const useOperatorStore = defineStore('operator', () => {
    */
   const operator = ref(initialState)
   /**
-   * @type {Ref<UnwrapRef<null | import('@agencebio/cartobio-types').NormalizedRecordSummary[]>>}
+   * @type {Ref<UnwrapRef<null | NormalizedRecordSummary[]>>}
    */
   const records = ref(null)
 
+  /**
+   * @type {ComputedRef<NormalizedRecordSummary[]>}
+   */
   const recordsByYear = computed(() => {
     if (!records.value?.length) return [];
 
@@ -65,8 +69,7 @@ export const useOperatorStore = defineStore('operator', () => {
     if (!navigator.onLine && storage.operators[numeroBio]) {
       const {operator: operatorData, records: recordsData} = storage.operators[numeroBio]
       operator.value = operatorData
-      records.value = recordsData
-      return
+      records.value = recordsData.sort((recordA, recordB) => date(recordB) - date(recordA))
     }
 
     if (String(operator.value.numeroBio) !== numeroBio) {
@@ -75,10 +78,7 @@ export const useOperatorStore = defineStore('operator', () => {
     }
 
     getRecordsSummary(numeroBio).then(r => {
-      records.value = r.sort((recordA, recordB) => date(recordB) - date(recordA)).map(record => ({
-        ...record,
-        storedOffline: !!storage.records[record.record_id]
-      }))
+      records.value = r.sort((recordA, recordB) => date(recordB) - date(recordA))
     })
   }
 
@@ -95,10 +95,22 @@ export const useOperatorStore = defineStore('operator', () => {
     }
   })
 
-  // Update storedOffline properties when storage changes
-  watch(storage, () => {
-    for (let i = 0; i < records.value?.length; i++) {
-      records.value[i].storedOffline = !!localStorage.getItem(`record-${records.value[i].record_id}`)
+  // Keep operator store records summary updated with storage
+  watch([records, () => storage.records], () => {
+    if (!records.value) return
+    for (let i = 0; i < records.value.length; i++) {
+      if (!storage.records[records.value[i].record_id]) continue
+
+      const [updatedRecord, hasChanges] = storage.getRecordWithQueuedOps(records.value[i].record_id)
+      if (!hasChanges) continue
+
+      records.value[i].version_name = updatedRecord.version_name
+      records.value[i].certification_state = updatedRecord.certification_state
+      records.value[i].audit_date = updatedRecord.audit_date
+      records.value[i].certification_date_debut = updatedRecord.certification_date_debut
+      records.value[i].certification_date_fin = updatedRecord.certification_date_fin
+      records.value[i].parcelles = updatedRecord.parcelles.features.length
+      records.value[i].surface = legalProjectionSurface(updatedRecord.parcelles.features)
     }
   })
 
diff --git a/src/stores/record.js b/src/stores/record.js
index 77454ac9..2b2e72e3 100644
--- a/src/stores/record.js
+++ b/src/stores/record.js
@@ -1,21 +1,11 @@
 import { defineStore } from 'pinia'
-import { computed, reactive } from 'vue'
+import { computed, reactive, watch } from 'vue'
 import { useFeaturesStore } from "@/stores/features.js"
 import { useFeaturesSetsStore } from "@/stores/features-sets.js"
 import bbox from '@turf/bbox'
 import { useOperatorStore } from "@/stores/operator.js"
 import { apiClient, createOperatorRecord } from "@/cartobio-api.js"
-import { useCartoBioStorage } from "@/stores/storage.js"
-
-/**
- * @param {UUID} recordId
- * @return {Promise<NormalizedRecord>}
- */
-export async function getRecord (recordId) {
-  const { data } = await apiClient.get(`/v2/audits/${recordId}`)
-
-  return data
-}
+import { SyncOperation, useCartoBioStorage } from "@/stores/storage.js"
 
 /**
  * @typedef {import('@agencebio/cartobio-types').NormalizedRecord} NormalizedRecord
@@ -77,12 +67,20 @@ export const useRecordStore = defineStore('record', () => {
   })
 
   /**
-   * Soft update of a record
+   * Soft partial update of a record, used internally to update the store with new values.
    *
-   * Use case: when navigating from /parcellaire/:id to /parcellaire/:id/new-stuff
-   * @param {NormalizedRecord} updatedRecord
+   * You should not use this method to update a record from outside the store
+   * (there are dedicated methods for this which handle offline and syncing).
+   * External use case should be limited to previews of yet non-existing records.
+   *
+   * @param {Partial<NormalizedRecord>} updatedRecord
    */
   function update (updatedRecord = {}) {
+    // Prevent updating with outdated or identical data
+    if (updatedRecord.updated_at && record.updated_at && updatedRecord.updated_at <= record.updated_at) {
+      return
+    }
+
     Object.entries(record).forEach(([key]) => {
       if (key in updatedRecord) {
         record[key] = updatedRecord[key]
@@ -100,32 +98,15 @@ export const useRecordStore = defineStore('record', () => {
 
   /**
    * Update non-geographical data for a record (name, audit and certification dates, etc.)
+   *
    * @param {Partial<Omit<NormalizedRecord, 'parcelles', 'operator'>>} patch
    * @returns {Promise<void>}
    */
-  async function updateInfo (patch) {
-    const { data: updatedRecord } = await apiClient.patch(`/v2/audits/${record.record_id}`, patch)
-    update(updatedRecord)
-
-    /* Update also version info in operatorStore version list */
-    const recordSummary = operatorStore.records.find(record => record.record_id === updatedRecord.record_id)
-    Object.entries(patch).forEach(([key]) => {
-      recordSummary[key] = updatedRecord[key]
-    })
-  }
-
-  /**
-   * Replace a record with new values
-   * Use case: when navigating from /parcellaire/1234 to /parcellaire/9999 or even /parcellaires then /parcellaire/1234
-   *
-   * @param {NormalizedRecord} maybeNewRecord
-   */
-  function replace (maybeNewRecord) {
-    reset()
-    update(maybeNewRecord)
+  function updateInfo (patch) {
+    storage.addSyncOperation(record.record_id, new SyncOperation(SyncOperation.ACTIONS.RECORD_INFO, patch))
   }
 
-  function reset() {
+  function $reset() {
     update({ ...initialState, metadata: { ...initialState.metadata } })
     featuresStore.$reset()
     sets.$reset()
@@ -134,8 +115,8 @@ export const useRecordStore = defineStore('record', () => {
   async function ready(recordId) {
     if (!navigator.onLine && storage.records[recordId]) {
       await operatorStore.ready(storage.records[recordId].numerobio)
-      reset()
-      update(storage.records[recordId])
+      $reset()
+      update(storage.getRecordWithQueuedOps(recordId)[0])
       return
     }
 
@@ -146,7 +127,7 @@ export const useRecordStore = defineStore('record', () => {
 
     const newRecord = await getRecord(recordId)
     await operatorStore.ready(newRecord.numerobio)
-    reset()
+    $reset()
     update(newRecord)
   }
 
@@ -154,6 +135,10 @@ export const useRecordStore = defineStore('record', () => {
     getRecord(record.record_id).then(update)
   }
 
+  /**
+   * @param id
+   * @return {Promise<NormalizedRecord>}
+   */
   async function duplicate(id) {
     const recordSummary = operatorStore.records.find(record => record.record_id === id)
     const record = await getRecord(id)
@@ -171,6 +156,23 @@ export const useRecordStore = defineStore('record', () => {
       parcelles: recordSummary.parcelles,
       surface: recordSummary.surface,
     })
+    return newRecord
+  }
+
+  /**
+   * @param {UUID} recordId
+   * @param {boolean} store
+   * @return {Promise<NormalizedRecord>}
+   */
+  async function getRecord (recordId, store= false) {
+    const { data } = await apiClient.get(`/v2/audits/${recordId}`)
+
+    // Update storage if requested or if already present and no local changes are pending
+    if ((store || storage.records[recordId]) && !storage.syncQueues[recordId]) {
+      storage.recordsStorage[recordId] = data
+    }
+
+    return data
   }
 
   /**
@@ -188,20 +190,35 @@ export const useRecordStore = defineStore('record', () => {
    */
   const hasFeatures = computed(() => featuresStore.hasFeatures)
 
+  /**
+   * Keep store in sync with storage and queued operations
+   */
+  watch(() => {
+    if (!record.record_id) return
+    return [storage.records[record.record_id], storage.syncQueues[record.record_id]]
+  }, async () => {
+    if (!record.record_id) return
+
+    if (storage.records[record.record_id]?.updated_at > record.updated_at) {
+      await ready(record.record_id)
+    }
+  })
+
   return {
+    // current record
     record,
     // computed
     bounds,
     exists,
     hasFeatures,
     isSetup,
-    // methods
-    $reset: reset,
-    replace,
-    reset,
+    // current record methods
     update,
     updateInfo,
+    // store methods
+    $reset,
     ready,
     duplicate,
+    getRecord,
   }
 })
diff --git a/src/stores/record.test.js b/src/stores/record.test.js
index a45da070..2dd9a221 100644
--- a/src/stores/record.test.js
+++ b/src/stores/record.test.js
@@ -11,7 +11,7 @@ const featuresStore = useFeaturesStore(pinia)
 const store = useRecordStore(pinia)
 const operatorStore = useOperatorStore(pinia)
 
-afterEach(() => store.reset())
+afterEach(() => store.$reset())
 
 describe('exists', () => {
   it('does not exist by default', () => {
@@ -77,18 +77,6 @@ describe('bounds', () => {
   })
 })
 
-describe('replace', () => {
-  it('does not keep track of previous data, even when it is from the same record/operator', () => {
-    store.update(record)
-    expect(store.record).toHaveProperty('record_id', '054f0d70-c3da-448f-823e-81fcf7c2bf6e')
-    expect(store.record).toHaveProperty('certification_state', 'OPERATOR_DRAFT')
-
-    store.replace({ record_id: 'newId' })
-    expect(store.record).toHaveProperty('record_id', 'newId')
-    expect(store.record).toHaveProperty('certification_state', null)
-  })
-})
-
 
 describe('update', () => {
   it('has a blank slate by default', () => {
@@ -116,7 +104,7 @@ describe('update', () => {
 
   it('resets the feature store as well', () => {
     store.update(record)
-    store.reset()
+    store.$reset()
     expect(featuresStore.all).toHaveLength(0)
   })
 })
diff --git a/src/stores/storage.js b/src/stores/storage.js
index fc126f04..20b62e92 100644
--- a/src/stores/storage.js
+++ b/src/stores/storage.js
@@ -1,16 +1,159 @@
 import { defineStore } from "pinia"
-import { getRecord } from "@/stores/record.js"
-import { computed } from "vue"
-import { useLocalStorage } from "@vueuse/core"
+import { computed, ref, watch } from "vue"
+import { useLocalStorage, useOnline } from "@vueuse/core"
 import { getOperator, getRecordsSummary } from "@/stores/operator.js"
+import { apiClient, createOperatorRecord } from "@/cartobio-api.js"
+import { useRecordStore } from "@/stores/record.js"
 
 /**
  * @typedef {import('@agencebio/cartobio-types').AgenceBioNormalizedOperator} AgenceBioNormalizedOperator
  * @typedef {import('@agencebio/cartobio-types').NormalizedRecordSummary} NormalizedRecordSummary
  * @typedef {import('@agencebio/cartobio-types').NormalizedRecord} NormalizedRecord
+ * @typedef {import('@agencebio/cartobio-types').CartoBioFeatureProperties} CartoBioFeatureProperties
+ * @typedef {import('geojson').Feature} Feature
+ * @typedef {import('geojson').FeatureCollection} FeatureCollection
  */
 
+class SyncQueue {
+  /**
+   * @type {SyncOperation[]}
+   */
+  operations
+
+  /**
+   * @type Date
+   */
+  ifUnmodifiedSince
+
+  /**
+   * @param {SyncOperation[]} operations
+   * @param {Date} [ifUnmodifiedSince]
+   */
+  constructor(operations, ifUnmodifiedSince = new Date()) {
+    this.operations = operations
+    this.ifUnmodifiedSince = ifUnmodifiedSince
+  }
+
+  /**
+   * @param recordId
+   * @param {Date} unmodifiedSince
+   * @return {Promise<SyncOperation>|null}
+   */
+  async syncNext(recordId, unmodifiedSince) {
+    if (this.operations.length === 0) return null
+
+    /**
+     * @type {{headers: AxiosHeaders}}
+     */
+    const config = { headers: {
+        'If-Unmodified-Since': unmodifiedSince.toUTCString()
+    }}
+    const op = this.operations[0]
+    switch (op.action) {
+      case SyncOperation.ACTIONS.RECORD_INFO:
+        await apiClient.patch(`/v2/audits/${recordId}`, op.payload, config)
+        break
+      case SyncOperation.ACTIONS.DELETE_FEATURE:
+        await apiClient.delete(`/v2/audits/${recordId}/parcelles/${op.featureId}`, { data: op.payload, ...config })
+        break
+      case SyncOperation.ACTIONS.UPDATE_FEATURE:
+        await apiClient.patch(`/v2/audits/${recordId}/parcelles/${op.featureId}`, op.payload, config)
+        break
+      case SyncOperation.ACTIONS.UPDATE_COLLECTION:
+        await apiClient.patch(`/v2/audits/${recordId}/parcelles`, op.payload, config)
+        break
+    }
+
+    return this.operations.shift()
+  }
+
+  /**
+   * @param recordId
+   */
+  async sync(recordId) {
+    while (await this.syncNext(recordId, this.ifUnmodifiedSince)) {
+      this.ifUnmodifiedSince = new Date()
+    }
+  }
+}
+
+/**
+ * @typedef {Partial<NormalizedRecord>|Partial<FeatureCollection<Polygon, Partial<CartoBioFeatureProperties>>>|Partial<Feature<Polygon, Partial<CartoBioFeatureProperties>>>|{reason: string}} SyncOperationPayload
+ */
+
+/**
+ * Every modification to the store must be queued as a sync operation.
+ *
+ * @typedef {Object} SyncOperation
+ * @property {ACTIONS} action
+ * @property {SyncOperationPayload} payload
+ * @property {string} [featureId]
+ */
+export class SyncOperation {
+  action;
+  payload;
+  featureId = null;
+  /**
+   * @type {Date}
+   */
+  ifUnmodifiedSince;
+
+  /**
+   * @enum {String}
+   */
+  static ACTIONS = {
+    RECORD_INFO: 'recordInfo',
+    DELETE_FEATURE: 'deleteFeature',
+    UPDATE_FEATURE: 'updateFeature',
+    UPDATE_COLLECTION: 'updateCollection'
+  }
+
+  /**
+   * @param {ACTIONS} action
+   * @param {SyncOperationPayload} payload
+   * @param {string} [featureId]
+   */
+  constructor(action, payload, featureId = null) {
+    this.action = action
+    this.payload = payload
+    this.featureId = featureId
+  }
+
+  /**
+   * @param {NormalizedRecord} record
+   */
+  apply(record) {
+    const result = JSON.parse(JSON.stringify(record))
+    switch (this.action) {
+      case SyncOperation.ACTIONS.RECORD_INFO:
+        Object.assign(result, this.payload)
+        return result
+      case SyncOperation.ACTIONS.UPDATE_COLLECTION: {
+        const features = this.payload.features
+        for (let i = 0; i < features.length; i++) {
+          Object.assign(
+              result.parcelles.features.find(f => f.id === features[i].id).properties,
+              features[i].properties
+          )
+        }
+        result.parcelles.features = result.parcelles.features.filter(f => features.find(f2 => f2.id === f.id))
+        return result
+      }
+      case SyncOperation.ACTIONS.DELETE_FEATURE:
+        result.parcelles.features = result.parcelles.features.filter(f => f.id !== this.featureId)
+        return result
+      case SyncOperation.ACTIONS.UPDATE_FEATURE:
+        Object.assign(
+            result.parcelles.features.find(f => f.id === this.featureId).properties,
+            this.payload.properties
+        )
+        return result
+    }
+  }
+}
+
 export const useCartoBioStorage = defineStore('storage', () => {
+  const recordStore = useRecordStore()
   /**
    * @type {RemovableRef<{
    *   [numeroBio: string]: {
@@ -38,6 +181,34 @@ export const useCartoBioStorage = defineStore('storage', () => {
    */
   const records = computed(() => recordsStorage.value)
 
+  /**
+   * @type {Ref<UnwrapRef<Set<string>>>} - list of record ids that have conflicts
+   */
+  const conflicts = ref(/** @type Set<string> */new Set())
+
+  /**
+   * @type {RemovableRef<{
+   *   string: SyncQueue
+   * }>}
+   */
+  const syncQueues = useLocalStorage(
+    'syncQueue',
+    /** @type {{string: SyncQueue}} */{},
+    {
+      serializer: {
+        read: (s) => Object.fromEntries(
+          Object.entries(JSON.parse(s)).map(
+            ([recordId, queue]) => [recordId, new SyncQueue(
+              queue.operations.map(op => new SyncOperation(op.action, op.payload, op.featureId)),
+              new Date(queue.ifUnmodifiedSince)
+            )]
+          )
+        ),
+        write: JSON.stringify
+      }
+    }
+  )
+
   /**
    * Add an operator to the store.
    * @param numeroBio
@@ -66,8 +237,7 @@ export const useCartoBioStorage = defineStore('storage', () => {
    */
   async function addRecord (recordId) {
     try {
-      const record = await getRecord(recordId)
-      recordsStorage.value[record.record_id] = record
+      const record = await recordStore.getRecord(recordId, true)
       await addOperator(record.numerobio)
     } catch (e) {
       if (e instanceof DOMException &&
@@ -89,6 +259,24 @@ export const useCartoBioStorage = defineStore('storage', () => {
     return true
   }
 
+  /**
+   * @param recordId
+   * @return {[NormalizedRecord, boolean]} - the record and a boolean indicating if there are queued operations for this record
+   */
+  function getRecordWithQueuedOps (recordId) {
+    let record = recordsStorage.value[recordId]
+
+    if (!syncQueues.value[recordId]) return [record, false]
+
+    const changes = syncQueues.value[recordId].operations
+
+    for (let i = 0; i < changes.length; i++) {
+      record = changes[i].apply(record)
+    }
+
+    return [record, true]
+  }
+
   /**
    * Clear a record from the store.
    * @param recordId
@@ -106,10 +294,99 @@ export const useCartoBioStorage = defineStore('storage', () => {
     return true
   }
 
+  /**
+   * Sync logic
+   */
+  const online = useOnline()
+
+  /**
+   * @param {string} recordId
+   * @param {SyncOperation} sync
+   */
+  function addSyncOperation (recordId, sync) {
+    syncQueues.value[recordId] = syncQueues.value[recordId] || new SyncQueue([])
+    syncQueues.value[recordId].operations.push(sync)
+  }
+
+  /**
+   * Resolve a conflict by either duplicating the record
+   * or removing operations on deleted features before applying operations on new version.
+   * @param {UUID} recordId
+   * @param {boolean} duplicate
+   * @return {Promise<void>}
+   */
+  async function resolveConflict (recordId, duplicate = true) {
+    const record = recordsStorage.value[recordId]
+
+    if (duplicate) {
+      const newRecord = await createOperatorRecord(record.numerobio, {
+        versionName: `${record.version_name} (copie hors-ligne)`,
+        geojson: record.parcelles,
+        metadata: {
+          provenance: window.location.host,
+          source: 'Copie lors de la résolution de conflits',
+          copy_of: record.record_id
+        }
+      })
+      await addRecord(newRecord.record_id)
+      syncQueues.value[newRecord.record_id] = syncQueues.value[recordId]
+      syncQueues.value[newRecord.record_id].ifUnmodifiedSince = new Date()
+      delete syncQueues.value[recordId]
+    } else {
+      // we remove operations on deleted features
+      const newRecord = await recordStore.getRecord(recordId, true)
+      syncQueues.value[recordId].operations = syncQueues.value[recordId].operations.filter(
+          op => newRecord.parcelles.features.find(f => f.id === op.featureId)
+      )
+      syncQueues.value[recordId].ifUnmodifiedSince = new Date()
+    }
+    conflicts.value.delete(recordId)
+  }
+
+  const syncing = ref(false)
+  watch(() => [online, syncQueues], async ([, syncQueues]) => {
+    if (!navigator.onLine) return
+    if (syncing.value) return
+    syncing.value = true
+
+    try {
+      for (const [recordId, queue] of Object.entries(syncQueues.value)) {
+        try {
+          await queue.sync(recordId)
+          delete syncQueues.value[recordId]
+          if (records.value[recordId]) {
+            await addRecord(recordId) // update storage
+          }
+        } catch (e) {
+          if (e.response?.status === 412 || e.response?.status === 404) {
+            conflicts.value.add(recordId)
+          }
+
+          throw e
+        }
+      }
+    } finally {
+      syncing.value = false
+    }
+  }, { deep: true })
+
+
   return {
+    // storage ref
+    operatorsStorage,
+    recordsStorage,
+    syncQueues,
+    // read-only refs
     operators,
     records,
+    online,
+    // state ref
+    conflicts,
+    // store methods
     addRecord,
-    clearRecord
+    getRecordWithQueuedOps,
+    clearRecord,
+    addSyncOperation,
+    resolveConflict,
   }
 })
diff --git a/src/stores/storage.test.js b/src/stores/storage.test.js
index 4a821b1e..16078195 100644
--- a/src/stores/storage.test.js
+++ b/src/stores/storage.test.js
@@ -1,19 +1,28 @@
-import { describe, expect, it, vi } from "vitest"
+import { beforeEach, describe, expect, it, vi } from "vitest"
 import { createTestingPinia } from "@pinia/testing"
-import { useCartoBioStorage } from "@/stores/storage.js"
+import { SyncOperation, useCartoBioStorage } from "@/stores/storage.js"
 import record from '@/components/Features/__fixtures__/record-with-features.json' assert { type: 'json' }
 import operator from '@/components/Features/__fixtures__/operator.json' assert { type: 'json' }
+import axios from "axios"
 
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
 
-vi.mock('@/stores/record.js', () => ({
-  getRecord: vi.fn(() => Promise.resolve(record))
-}))
 
-vi.mock('@/stores/operator.js', () => ({
-  getOperator: vi.fn(() => Promise.resolve(operator)),
-  getRecordsSummary: vi.fn(() => Promise.resolve([]))
-}))
+beforeEach(() => {
+  axios.__createMock.get.mockResolvedValue({
+    data: record
+  })
+})
+
+vi.mock('@/stores/operator.js', async (importOriginal) => {
+  const original = await importOriginal()
+
+  return ({
+    ...original,
+    getOperator: vi.fn(() => Promise.resolve(operator)),
+    getRecordsSummary: vi.fn(() => Promise.resolve([]))
+  })
+})
 
 
 const storage = useCartoBioStorage(pinia)
@@ -38,4 +47,63 @@ describe('storage', () => {
     expect(storage.records).not.toHaveProperty(record.record_id)
     expect(storage.operators).not.toHaveProperty(record.numerobio)
   })
+
+  describe('getRecordWithQueuedOps', () => {
+    it('should return the record with deleted feature operations applied', async () => {
+      const recordId = record.record_id
+      await storage.addRecord(recordId)
+      storage.addSyncOperation(recordId, new SyncOperation(
+          SyncOperation.ACTIONS.DELETE_FEATURE,
+          { reason: 'error' },
+          "1"
+      ))
+
+      expect(storage.getRecordWithQueuedOps(recordId)[0].parcelles.features.length).toBe(3)
+    })
+
+    it('should return the record with feature update operations applied', async () => {
+      const recordId = record.record_id
+      await storage.addRecord(recordId)
+      storage.addSyncOperation(recordId, new SyncOperation(
+          SyncOperation.ACTIONS.UPDATE_FEATURE,
+          { type: 'Feature', properties: { NOM: 'Nom test' } },
+          "1"
+      ))
+
+      expect(storage.getRecordWithQueuedOps(recordId)[0].parcelles.features[0].properties.NOM).toEqual('Nom test')
+    })
+
+    it('should return the record with record info operations applied', async () => {
+      const recordId = record.record_id
+      await storage.addRecord(recordId)
+      storage.addSyncOperation(recordId, new SyncOperation(
+          SyncOperation.ACTIONS.RECORD_INFO,
+          { version_name: 'Version test au nom changé' }
+      ))
+
+      expect(
+        storage.getRecordWithQueuedOps(recordId)[0].version_name
+      ).toBe('Version test au nom changé')
+    })
+
+    it('should return the record with feature collection operations applied', async () => {
+      const recordId = record.record_id
+      await storage.addRecord(recordId)
+      storage.addSyncOperation(recordId, new SyncOperation(
+          SyncOperation.ACTIONS.UPDATE_COLLECTION,
+          {
+            type: 'FeatureCollection',
+            features: [
+              { id: "1", properties: { conversion_niveau: 'CONV' } },
+              { id: "2", properties: { conversion_niveau: 'CONV' } },
+              { id: "3", properties: { conversion_niveau: 'CONV' } }
+            ]
+          }
+      ))
+
+    expect(
+      storage.getRecordWithQueuedOps(recordId)[0].parcelles.features.map(f => f.properties.conversion_niveau)
+    ).toStrictEqual(['CONV', 'CONV', 'CONV'])
+    })
+  })
 })
diff --git a/tests-setup.js b/tests-setup.js
index 2a3585ae..619a9f89 100644
--- a/tests-setup.js
+++ b/tests-setup.js
@@ -22,7 +22,7 @@ vi.mock('axios', async (importActual) => {
     get: vi.fn(),
     post: vi.fn(),
     head: vi.fn(),
-    put: vi.fn(),
+    patch: vi.fn(),
     defaults: {
       headers: {
         common: {}
@@ -38,7 +38,7 @@ vi.mock('axios', async (importActual) => {
       get: vi.fn(),
       head: vi.fn(),
       post: vi.fn(),
-      put: vi.fn()
+      patch: vi.fn()
     },
     post: vi.fn(),
     AxiosError: axios.AxiosError
@@ -90,7 +90,8 @@ vi.stubGlobal('matchMedia', vi.fn(() => ({
 vi.spyOn(global, 'navigator', 'get').mockImplementation(() => ({
   clipboard: {
     writeText: vi.fn()
-  }
+  },
+  onLine: true
 }))
 
 beforeEach(() => vi.clearAllMocks())