Merge pull request #361 from AgenceBio/maud/hors_ligne_lecture_seule

Hors-ligne lecture seule

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>

src/components/Features/FeatureGroup.vue

@@ -56,15 +56,15 @@
                 <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">
                 <ConversionLevel :feature="feature" with-date /><br />
                 {{ 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: {

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)

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 () => {

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)

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 = {