From b272284384d37b6d6864d26637ff766829b8a31f Mon Sep 17 00:00:00 2001
From: Maud Royer <hello@maudroyer.fr>
Date: Mon, 6 May 2024 17:00:14 +0200
Subject: [PATCH] feat: hors-ligne lecture seule

Signed-off-by: Maud Royer <hello@maudroyer.fr>
---
 src/components/ActionDropdown.vue             | 11 +++-
 src/components/Features/FeatureGroup.vue      | 31 ++++++++----
 .../Features/MassActionsSelector.vue          |  9 +++-
 src/components/MainHeader.vue                 | 23 +++++++--
 src/components/record/Header.vue              | 12 ++++-
 .../certification/exploitations/index.vue     | 50 ++++++++++++++-----
 src/pages/exploitations/[numeroBio]/index.vue | 41 +++++++++++++--
 src/stores/operator.js                        | 46 ++++++++++++++++-
 src/stores/record.js                          |  9 +++-
 tests-setup.js                                |  9 ++++
 10 files changed, 205 insertions(+), 36 deletions(-)

diff --git a/src/components/ActionDropdown.vue b/src/components/ActionDropdown.vue
index 86fc1d8e..805cb4fb 100644
--- a/src/components/ActionDropdown.vue
+++ b/src/components/ActionDropdown.vue
@@ -11,6 +11,10 @@ const props = defineProps({
   withIcons: {
     type: Boolean,
     default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -66,7 +70,12 @@ watch(show, (value) => {
 <template>
   <div class="menu-anchor">
     <slot name="trigger" :toggle="() => show =! show">
-      <button type="button" @click.stop.prevent="show = !show" class="fr-btn fr-btn--tertiary-no-outline fr-icon-more-fill show-actions">
+      <button
+          type="button"
+          @click.stop.prevent="show = !show"
+          class="fr-btn fr-btn--tertiary-no-outline fr-icon-more-fill show-actions"
+          :disabled="props.disabled"
+      >
         Autres actions
       </button>
     </slot>
diff --git a/src/components/Features/FeatureGroup.vue b/src/components/Features/FeatureGroup.vue
index 6c01ba21..c57dea17 100644
--- a/src/components/Features/FeatureGroup.vue
+++ b/src/components/Features/FeatureGroup.vue
@@ -56,7 +56,7 @@
                 <label class="fr-label" :for="'radio-' + feature.id" />
               </div>
             </th>
-            <td @click="toggleEditForm(feature.id)" v-if="isGroupedByCulture">
+            <td @click="isOnline && toggleEditForm(feature.id)" v-if="isGroupedByCulture">
               <span class="culture-name">{{ featureName(feature) }}</span>
               <small class="feature-precision" v-if="feature.properties.cultures.length > 1">Multi-culture</small>
               <small class="feature-precision fr-hidden-sm fr-hidden-md fr-hidden-lg fr-hidden-xl">
@@ -64,7 +64,7 @@
                 {{ inHa(legalProjectionSurface(feature)) }}&nbsp;ha
               </small>
             </td>
-            <td @click="toggleEditForm(feature.id)" v-else>
+            <td @click="isOnline && toggleEditForm(feature.id)" v-else>
               <span class="culture-type" v-if="feature.properties.cultures.length > 1">
                 Multi-cultures<span class="fr-sr-only"> : </span>
                 <small class="feature-precision" v-for="(culture, i) in feature.properties.cultures" :key="i">
@@ -74,21 +74,27 @@
               <span class="culture-name" v-else>{{ cultureLabel(feature.properties.cultures[0]) }}</span>
               <small class="feature-precision">{{ featureName(feature) }}</small>
             </td>
-            <td @click="toggleEditForm(feature.id)">
+            <td @click="isOnline && toggleEditForm(feature.id)">
               <span class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl">
                 <ConversionLevel :feature="feature" with-date />
               </span>
             </td>
-            <td @click="toggleEditForm(feature.id)" class="numeric">
+            <td @click="isOnline && toggleEditForm(feature.id)" class="numeric">
               <span class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl">
                 {{ inHa(legalProjectionSurface(feature)) }}&nbsp;ha
               </span>
             </td>
             <td class="actions">
-              <button type="button" 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" />
-
-              <ActionDropdown with-icons>
-                <li v-if="permissions.canChangeGeometry">
+              <button
+                  type="button"
+                  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">
+                <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
                 </router-link>
@@ -99,7 +105,12 @@
                   </button>
                 </li>
                 <li>
-                  <button type="button" @click.prevent="toggleDeleteForm(feature.id)" :disabled="!permissions.canDeleteFeature" class="fr-btn fr-btn--tertiary-no-outline fr-icon-delete-line btn--error fr-text--sm">
+                  <button
+                      type="button"
+                      @click.prevent="toggleDeleteForm(feature.id)"
+                      :disabled="!permissions.canDeleteFeature || !isOnline"
+                      class="fr-btn fr-btn--tertiary-no-outline fr-icon-delete-line btn--error fr-text--sm"
+                  >
                     Supprimer la parcelle
                   </button>
                 </li>
@@ -125,6 +136,7 @@ import { usePermissions } from "@/stores/permissions.js"
 
 import ConversionLevel from './ConversionLevel.vue'
 import ActionDropdown from "@/components/ActionDropdown.vue"
+import { useOnline } from "@vueuse/core"
 
 
 const route = useRoute()
@@ -133,6 +145,7 @@ const recordStore = useRecordStore()
 const featuresStore = useFeaturesStore()
 const featuresSets = useFeaturesSetsStore()
 const permissions = usePermissions()
+const isOnline = useOnline()
 
 const props = defineProps({
   featureGroup: {
diff --git a/src/components/Features/MassActionsSelector.vue b/src/components/Features/MassActionsSelector.vue
index 4fccb327..2e871819 100644
--- a/src/components/Features/MassActionsSelector.vue
+++ b/src/components/Features/MassActionsSelector.vue
@@ -1,7 +1,11 @@
 <template>
   <ActionDropdown>
     <template #trigger="{ toggle }">
-      <button class="fr-btn fr-btn--sm fr-btn--secondary fr-btn--icon-right fr-icon-arrow-down-s-line menu-button" @click="toggle">
+      <button
+          class="fr-btn fr-btn--sm fr-btn--secondary fr-btn--icon-right fr-icon-arrow-down-s-line menu-button"
+          @click="toggle"
+          :disabled="!isOnline"
+      >
         {{ label }}
       </button>
     </template>
@@ -22,7 +26,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useOnline } from '@vueuse/core'
 import ActionDropdown from "@/components/ActionDropdown.vue"
 
 defineProps({
@@ -38,6 +42,7 @@ 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/MainHeader.vue b/src/components/MainHeader.vue
index 5c334d6f..13fb3d14 100644
--- a/src/components/MainHeader.vue
+++ b/src/components/MainHeader.vue
@@ -144,19 +144,30 @@
       </div>
     </div>
 
+    <div class="fr-notice fr-notice--info" v-if="!online">
+      <div class="fr-container">
+        <div class="fr-notice__body">
+          <p class="fr-notice__title">
+            <b>Vous êtes actuellement hors ligne.</b> Seules les exploitations dont le parcellaire a été
+            téléchargé en amont sont visibles. Certaines fonctionnalités être indisponibles.
+          </p>
+        </div>
+      </div>
+    </div>
+
     <div class="fr-notice fr-notice--info" v-if="isStaging">
       <div class="fr-container">
         <div class="fr-notice__body">
           <p class="fr-notice__title">
             <mark>Vous êtes sur un environnement de test</mark>.
 
-          <a href="https://cartobio.agencebio.org" rel="noreferrer noopener">
-            Cliquez ici pour accéder à l'environnement avec données réelles.
-          </a>
-        </p>
+            <a href="https://cartobio.agencebio.org" rel="noreferrer noopener">
+              Cliquez ici pour accéder à l'environnement avec données réelles.
+            </a>
+          </p>
+        </div>
       </div>
     </div>
-  </div>
     <div class="fr-notice fr-notice--info" v-if="maintenance">
       <div class="fr-container">
         <div class="fr-notice__body">
@@ -177,9 +188,11 @@ import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router';
 import { useUserStore, ROLES } from '@/stores/user.js'
 import { storeToRefs } from 'pinia'
+import { useOnline } from "@vueuse/core"
 
 const userStore = useUserStore()
 const router = useRouter()
+const online = useOnline()
 
 const maintenance = ref(false)
 const checkStatus = async () => {
diff --git a/src/components/record/Header.vue b/src/components/record/Header.vue
index 33cc32ce..3205fe4d 100644
--- a/src/components/record/Header.vue
+++ b/src/components/record/Header.vue
@@ -4,7 +4,12 @@
     <h1 class="fr-h4 fr-my-0 fr-mb-1v">
       {{ record.version_name }}
 
-      <button v-if="!disableActions" 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"
+          :disabled="!isOnline"
+      >
         Modifier la version
       </button>
     </h1>
@@ -20,6 +25,7 @@
           <button
               class="fr-btn fr-btn--icon-left fr-btn--tertiary-no-outline fr-icon-git-pull-request-fill show-versions"
               @click.stop.prevent="versionMenu = !versionMenu"
+              :disabled="!isOnline"
           >
             Autres versions <span class="fr-icon-arrow-down-s-line" />
           </button>
@@ -83,7 +89,7 @@ import DeleteParcellaireModal from '@/components/record/modals/DeleteParcelaireM
 import { useFeaturesStore } from "@/stores/features.js"
 import { useOperatorStore } from "@/stores/operator.js"
 import { useRecordStore } from "@/stores/record.js"
-import { onClickOutside } from "@vueuse/core"
+import { onClickOutside, useOnline } from "@vueuse/core"
 import EditVersionModal from "@/components/versions/EditVersionModal.vue"
 
 const AsyncFeaturesExportModal = defineAsyncComponent(() => import('@/components/record/modals/ExportModal.vue'))
@@ -95,6 +101,8 @@ defineProps({
   }
 })
 
+const isOnline = useOnline()
+
 const exportModal = ref(false)
 const historyModal = ref(false)
 const deleteModal = ref(false)
diff --git a/src/pages/certification/exploitations/index.vue b/src/pages/certification/exploitations/index.vue
index 9024775c..eb6befd4 100644
--- a/src/pages/certification/exploitations/index.vue
+++ b/src/pages/certification/exploitations/index.vue
@@ -11,12 +11,30 @@ meta:
       <div class="fr-col-12">
         <h1 class="fr-h6">Exploitations {{ user.organismeCertificateur.nom }}</h1>
 
-        <form @submit.prevent="updateQuery({ search: userInput, page: 1 })" class="fr-search-bar fr-search-bar--lg" id="header-search" role="search">
+        <form
+            @submit.prevent="updateQuery({ search: userInput, page: 1 })"
+            class="fr-search-bar fr-search-bar--lg"
+            id="header-search"
+            role="search"
+        >
           <label class="fr-label" for="search-input">
             Recherche par nom d'exploitation, SIRET ou numéro bio
           </label>
-          <input class="fr-input" placeholder="Chercher par nom d'opérateur, SIRET ou numéro bio…" minlength="1" autocomplete="cartobio-operator" v-model.trim="userInput" autofocustype="search" id="search-input">
-          <button class="fr-btn" type="submit" title="Rechercher" :disabled="isSearching">
+          <input
+              class="fr-input"
+              placeholder="Chercher par nom d'opérateur, SIRET ou numéro bio…"
+              minlength="1" autocomplete="cartobio-operator"
+              v-model.trim="userInput"
+              autofocustype="search"
+              id="search-input"
+              :disabled="!isOnline"
+          >
+          <button
+              class="fr-btn"
+              type="submit"
+              title="Rechercher"
+              :disabled="isSearching || !isOnline"
+          >
             Rechercher
           </button>
         </form>
@@ -50,7 +68,7 @@ meta:
                   </div>
                 </td>
               </tr>
-              <tr v-else-if="!isSearching && searchRecords.length === 0">
+              <tr v-else-if="!isSearching && operators.length === 0">
                 <td colspan="4">
                   <div class="fr-alert fr-alert--warning" role="alert">
                     <h3 class="fr-alert__title">Aucune exploitation trouvée</h3>
@@ -59,7 +77,7 @@ meta:
                   </div>
                 </td>
               </tr>
-              <tr v-for="{ record_id, audit_date, certification_date_debut, certification_date_fin, certification_state, ...operator } in searchRecords" :key="record_id" class="operator-record fr-enlarge-link">
+              <tr v-for="{ record_id, audit_date, certification_date_debut, certification_date_fin, certification_state, ...operator } in operators" :key="record_id" class="operator-record fr-enlarge-link">
                 <td>
                   <router-link :to="`/exploitations/${operator.numeroBio}`" class="fr-link">
                     {{ operator.nom }}
@@ -85,7 +103,7 @@ meta:
             </tbody>
             <tfoot v-if="!isSearching && hasResults">
               <tr>
-                <td colspan="3" class="results-total">{{ searchRecords.length }} sur {{ pagination.total }} résultats</td>
+                <td colspan="3" class="results-total">{{ operators.length }} sur {{ pagination.total }} résultats</td>
                 <td>
                   <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline fr-btns-group--pagination results-page-selector">
                     <li class="fr-mr-2v">
@@ -133,6 +151,7 @@ import { monthYearDateFormat, dateFormat } from '@/components/dates.js'
 
 import { searchOperators } from '@/cartobio-api.js'
 import { useUserStore } from '@/stores/user.js'
+import { useLocalStorage, useOnline } from "@vueuse/core"
 
 const props = defineProps({
   search: {
@@ -160,12 +179,17 @@ const props = defineProps({
 const userStore = useUserStore()
 const router = useRouter()
 const route = useRoute()
+const isOnline = useOnline()
+const operatorStorage = useLocalStorage('operators', {})
 
 const { startPage, user } = storeToRefs(userStore)
 
 const error = ref('')
 const isSearching = ref(false)
-const searchRecords = ref([])
+const searchResults = ref([])
+const operators = computed(() => isOnline.value ? searchResults.value : Object.entries(operatorStorage.value).map(
+  ([, [operator]]) => operator
+))
 
 // controlled by the form
 const userInput = ref(props.search)
@@ -183,8 +207,8 @@ const pagination = ref({
 })
 
 const showOptionalControl = computed(() => Boolean(searchInput.value))
-const hasResults = computed(() => searchRecords.value.length > 0)
-const hasPagination = computed(() => searchRecords.value.length && searchRecords.value.length < pagination.value.total)
+const hasResults = computed(() => searchResults.value.length > 0)
+const hasPagination = computed(() => searchResults.value.length && searchResults.value.length < pagination.value.total)
 
 const sortAttribute = (sort) => {
   if (sort !== sortOrder.value.sort) {
@@ -221,14 +245,16 @@ function isNetworkError (error) {
 
 async function doSearch (input, page, sort, order) {
   error.value = ''
-  isSearching.value = true
-  searchRecords.value = []
+  searchResults.value = []
+
+  if (!isOnline.value) return
 
+  isSearching.value = true
   try {
     const results = await searchOperators({ input: input.trim(), page, sort, order })
 
     pagination.value = results.pagination
-    searchRecords.value = results.records
+    searchResults.value = results.records
   }
   catch (e) {
     pagination.value = {
diff --git a/src/pages/exploitations/[numeroBio]/index.vue b/src/pages/exploitations/[numeroBio]/index.vue
index d54fa1cd..aac3fee8 100644
--- a/src/pages/exploitations/[numeroBio]/index.vue
+++ b/src/pages/exploitations/[numeroBio]/index.vue
@@ -18,7 +18,12 @@ meta:
       <h3>
         {{ operatorStore.operator.nom }}
       </h3>
-      <button v-if="permissions.canCreateVersion" class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-line" @click="newVersionModal = true">
+      <button
+          v-if="permissions.canCreateVersion"
+          class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-line"
+          @click="newVersionModal = true"
+          :disabled="!isOnline"
+      >
         Créer une nouvelle version
       </button>
     </div>
@@ -51,6 +56,7 @@ meta:
           <col class="audit-date"/>
           <col class="surface"/>
           <col class="parcelles"/>
+          <col class="statut"/>
           <col class="offline"/>
           <col class="actions"/>
         </colgroup>
@@ -63,6 +69,7 @@ meta:
             <th>Nombre de parcelles</th>
             <th>Statut</th>
             <th></th>
+            <th></th>
           </tr>
         </thead>
       </table>
@@ -96,14 +103,16 @@ meta:
               <th>Nombre de parcelles</th>
               <th>Statut</th>
               <th></th>
+              <th></th>
             </tr>
           </thead>
           <tr
               v-for="record in records"
               :key="record?.record_id"
               class="version-row"
+              :class="{ 'version-row--disabled': !isOnline && !record.storedOffline }"
               role="link"
-              @click="$router.push(`/exploitations/${operatorStore.operator.numeroBio}/${record.record_id}`)"
+              @click="(isOnline || record.storedOffline) && $router.push(`/exploitations/${operatorStore.operator.numeroBio}/${record.record_id}`)"
           >
             <td></td>
             <td><b class="fr-no">{{ record.version_name }}</b></td>
@@ -117,7 +126,21 @@ meta:
               </span>
             </td>
             <td>
-              <ActionDropdown with-icons>
+              <button
+                v-if="record.storedOffline"
+                type="button"
+                class="fr-btn fr-btn--tertiary-no-outline fr-icon-success-fill"
+                @click.stop.prevent="operatorStore.clearDownloadRecord(record.record_id)"
+                >Supprimer des téléchargements</button>
+              <button
+                v-else
+                type="button"
+                class="fr-btn fr-btn--tertiary-no-outline fr-icon-download-line"
+                @click.stop.prevent="operatorStore.downloadRecord(record.record_id)"
+                >Télécharger en hors-ligne</button>
+            </td>
+            <td>
+              <ActionDropdown with-icons :disabled="!isOnline">
                 <li>
                   <button type="button" @click.stop.prevent="editVersion(record.record_id)" class="fr-btn fr-btn--tertiary-no-outline fr-icon-edit-line fr-text--sm">
                     Modifier les informations
@@ -176,10 +199,12 @@ import { inHa } from "@/components/Features/index.js"
 import { dateFormat } from "@/components/dates.js"
 import toast from "@/components/toast.js"
 import { useRecordStore } from "@/stores/record.js"
+import { useOnline } from "@vueuse/core"
 
 const operatorStore = useOperatorStore()
 const recordStore = useRecordStore()
 const permissions = usePermissions()
+const isOnline = useOnline()
 
 const newVersionModal = ref(false)
 const deleteRecordModal = ref(null)
@@ -319,6 +344,16 @@ tr.version-row:nth-child(2n) {
   background-color: transparent;
 }
 
+tr.version-row--disabled,
+tr.version-row--disabled:nth-child(2n) {
+  background-color: var(--background-default-grey-hover);
+  color: var(--text-disabled-grey);
+
+  :deep(.fr-btn) {
+    color: var(--text-disabled-grey) !important;
+  }
+}
+
 tr.version-row:hover {
   background-color: var(--background-default-grey-hover);
 }
diff --git a/src/stores/operator.js b/src/stores/operator.js
index 2cafd164..226a50df 100644
--- a/src/stores/operator.js
+++ b/src/stores/operator.js
@@ -2,6 +2,8 @@ import { defineStore } from "pinia"
 import { computed, ref, watch } from "vue"
 import { CUSTOM_DIMENSION_DEPARTEMENT, deleteCustomDimension, setCustomDimension } from "@/stats.js"
 import { apiClient } from "@/cartobio-api.js"
+import { getRecord } from "@/stores/record.js"
+import { useLocalStorage } from "@vueuse/core"
 
 /**
  * @typedef {import('@vue/reactivity').Ref} Ref
@@ -13,6 +15,8 @@ function date(record) {
 }
 
 export const useOperatorStore = defineStore('operator', () => {
+  const operatorsStorage = useLocalStorage('operators', {})
+
   /**
    * @typedef {import('@agencebio/cartobio-types').AgenceBioNormalizedOperator}
    */
@@ -47,6 +51,13 @@ export const useOperatorStore = defineStore('operator', () => {
    * @return {Promise<void>}
    */
   async function ready (numeroBio) {
+    if (!navigator.onLine && operatorsStorage.value[numeroBio]) {
+      const [operatorData, recordsData] = operatorsStorage.value[numeroBio]
+      operator.value = operatorData
+      records.value = recordsData
+      return
+    }
+
     if (String(operator.value.numeroBio) !== numeroBio) {
       const { data: fetchedOperator } = await apiClient.get(`/v2/operator/${numeroBio}`)
       operator.value = fetchedOperator
@@ -54,10 +65,36 @@ export const useOperatorStore = defineStore('operator', () => {
     }
 
     apiClient.get(`/v2/operator/${numeroBio}/records`).then(({ data: r }) => {
-      records.value = r.sort((recordA, recordB) => date(recordB) - date(recordA))
+      records.value = r.sort((recordA, recordB) => date(recordB) - date(recordA)).map(record => ({
+        ...record,
+        storedOffline: localStorage.getItem(`record-${record.record_id}`)
+      }))
     })
   }
 
+  async function downloadOperator() {
+    operatorsStorage.value[operator.value.numeroBio] = [operator.value, records.value]
+  }
+
+  async function clearDownloadOperator() {
+    delete operatorsStorage.value[operator.value.numeroBio]
+  }
+
+  async function downloadRecord (recordId) {
+    const record = await getRecord(recordId)
+    localStorage.setItem(`record-${record.record_id}`, JSON.stringify(record))
+    records.value.find(r => r.record_id === record.record_id).storedOffline = true
+    await downloadOperator()
+  }
+
+  async function clearDownloadRecord (recordId) {
+    localStorage.removeItem(`record-${recordId}`)
+    records.value.find(r => r.record_id === recordId).storedOffline = false
+    if (records.value.every(r => !r.storedOffline)) {
+      await clearDownloadOperator()
+    }
+  }
+
   function $reset () {
     operator.value = { ...initialState }
     records.value = null
@@ -72,9 +109,16 @@ export const useOperatorStore = defineStore('operator', () => {
   })
 
   return {
+    // ref
     operator,
     records,
+    // computed
     recordsByYear,
+    // methods
+    downloadOperator,
+    clearDownloadOperator,
+    downloadRecord,
+    clearDownloadRecord,
     ready,
     $reset
   }
diff --git a/src/stores/record.js b/src/stores/record.js
index 1518b0b1..e84ea529 100644
--- a/src/stores/record.js
+++ b/src/stores/record.js
@@ -10,8 +10,15 @@ import { apiClient, createOperatorRecord } from "@/cartobio-api.js"
  * @param {UUID} recordId
  * @return {Promise<NormalizedRecord>}
  */
-async function getRecord (recordId) {
+export async function getRecord (recordId) {
+  if (!navigator.onLine && localStorage.getItem(`record-${recordId}`)) {
+    return JSON.parse(localStorage.getItem(`record-${recordId}`))
+  }
+
   const { data } = await apiClient.get(`/v2/audits/${recordId}`)
+  if (localStorage.getItem(`record-${recordId}`)) {
+    localStorage.setItem(`record-${recordId}`, JSON.stringify(data))
+  }
 
   return data
 }
diff --git a/tests-setup.js b/tests-setup.js
index 57e0d429..2a3585ae 100644
--- a/tests-setup.js
+++ b/tests-setup.js
@@ -73,6 +73,15 @@ vi.stubGlobal('localStorage', {
   setItem: vi.fn()
 })
 
+vi.mock('@vueuse/core', async (importActual) => {
+  const vueuse = await importActual()
+  return {
+    __esModule: true,
+    ...vueuse,
+    useOnline: vi.fn().mockImplementation(() => ({ value: true }))
+  }
+})
+
 vi.stubGlobal('matchMedia', vi.fn(() => ({
   addEventListener: vi.fn(),
   matches: vi.fn().mockReturnValue(true)