From 1b670028a352817e7337a2d6aaf31e388d830cdf Mon Sep 17 00:00:00 2001
From: GregoireDucharme <gregoire.ducharme@gmail.com>
Date: Tue, 7 Jan 2025 09:33:58 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20permet=20l'acc=C3=A8s=20en=20lecture=20?=
 =?UTF-8?q?seul=20au=20nouvel=20OC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SingleItemCertificationBodyForm.test.js   | 211 +++++++++++-------
 .../forms/SingleItemCertificationBodyForm.vue |  25 ++-
 .../forms/fields/AnnotationsSelector.vue      |   5 +
 .../forms/fields/ConversionLevelSelector.vue  |   2 +-
 .../forms/fields/CultureSelector.vue          |   2 +-
 .../forms/fields/CultureTypeSelector.vue      |   2 +-
 src/components/records/Header.test.js         |  19 +-
 src/components/records/Header.vue             |  16 +-
 src/components/records/Table/FeatureGroup.vue |  48 +++-
 src/components/records/Table/index.test.js    |  58 +++++
 src/components/records/Table/index.vue        |  19 +-
 src/components/setup/Flow/Preview.vue         |   2 +-
 src/components/widgets/Modal.vue              |   5 +
 .../[numeroBio]/[recordId]/index.vue          |   5 +-
 src/pages/exploitations/[numeroBio]/index.vue |  35 ++-
 src/stores/permissions.js                     |   8 +-
 src/stores/permissions.test.js                |  19 +-
 src/stores/record.js                          |   1 +
 src/utils/__fixtures__/operator.json          |   5 +-
 .../__fixtures__/record-with-features.json    |   1 +
 20 files changed, 378 insertions(+), 110 deletions(-)

diff --git a/src/components/forms/SingleItemCertificationBodyForm.test.js b/src/components/forms/SingleItemCertificationBodyForm.test.js
index 429da978..da149071 100644
--- a/src/components/forms/SingleItemCertificationBodyForm.test.js
+++ b/src/components/forms/SingleItemCertificationBodyForm.test.js
@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { afterEach, beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 import { defineComponent, markRaw } from "vue";
 import { createTestingPinia } from "@pinia/testing";
 import { flushPromises, mount } from "@vue/test-utils";
@@ -12,15 +12,19 @@ import {
   CERTIFICATION_BODY_DECISION,
   LEVEL_AB,
   LEVEL_C1,
+  LEVEL_C2,
+  LEVEL_C3,
   LEVEL_CONVENTIONAL,
 } from "@/referentiels/ab.js";
 
 import record from "@/utils/__fixtures__/record-with-features.json" assert { type: "json" };
 import EditForm from "@/components/forms/SingleItemCertificationBodyForm.vue";
 import TableComponent from "@/components/records/Table/index.vue";
+import { useOperatorStore } from "@/stores/operator";
 
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const recordStore = useRecordStore(pinia);
+const operatorStore = useOperatorStore(pinia);
 const permissions = usePermissions(pinia);
 const storage = useCartoBioStorage(pinia);
 
@@ -51,97 +55,146 @@ describe("SingleItemCertificationBodyForm", () => {
     document.body.outerHTML = "";
   });
 
-  test("we assign a certification state", async () => {
-    const form = wrapper.getComponent(EditForm);
-
-    // if "Conventionnel", there is no date field
-    await form.find(`#conversion-${LEVEL_CONVENTIONAL}`).setValue();
-    expect(form.find("#engagement_date").exists()).toEqual(false);
+  describe("item is not readonly", async () => {
+    beforeAll(async () => {
+      operatorStore.operator = {
+        organismeCertificateur: {
+          id: 1,
+        },
+      };
+    });
+    test("we assign a certification state", async () => {
+      const form = wrapper.getComponent(EditForm);
 
-    // if AB, date field is not mandatory
-    await form.find(`#conversion-${LEVEL_AB}`).setValue();
-    expect(form.find("#engagement_date").attributes()).not.toHaveProperty("required");
+      // if "Conventionnel", there is no date field
+      await form.find(`#conversion-${LEVEL_CONVENTIONAL}`).setValue();
+      expect(form.find("#engagement_date").exists()).toEqual(false);
 
-    // date field is mandatory otherwise
-    await form.find(`#conversion-${LEVEL_C1}`).setValue();
-    expect(form.find("#engagement_date").attributes()).toHaveProperty("required", "");
-  });
+      // if AB, date field is not mandatory
+      await form.find(`#conversion-${LEVEL_AB}`).setValue();
+      expect(form.find("#engagement_date").attributes()).not.toHaveProperty("required");
 
-  test("we toggle expanded annotations", async () => {
-    const form = wrapper.getComponent(EditForm);
+      // date field is mandatory otherwise
+      await form.find(`#conversion-${LEVEL_C1}`).setValue();
+      expect(form.find("#engagement_date").attributes()).toHaveProperty("required", "");
+    });
 
-    // We have all the tags tags and no expand button
-    expect(form.findAll(".fr-tags-group--annotations > .annotation-choice")).toHaveLength(5);
-    expect(form.find(".fr-tags-group--annotations > .annotation--more").attributes()).toHaveProperty("hidden");
+    test("we toggle expanded annotations", async () => {
+      const form = wrapper.getComponent(EditForm);
 
-    // expect(form.find('.fr-tags-group--annotations > .annotation--more').attributes()).not.toHaveProperty('hidden')
-    // await form.find('.fr-tags-group--annotations > .annotation--more button').trigger('click')
+      // We have all the tags tags and no expand button
+      expect(form.findAll(".fr-tags-group--annotations > .annotation-choice")).toHaveLength(5);
+      expect(form.find(".fr-tags-group--annotations > .annotation--more").attributes()).toHaveProperty("hidden");
 
-    const expectedChoices = Object.keys(AnnotationTags);
-    expect(form.findAll(".fr-tags-group--annotations > .annotation-choice")).toHaveLength(expectedChoices.length);
-  });
+      // expect(form.find('.fr-tags-group--annotations > .annotation--more').attributes()).not.toHaveProperty('hidden')
+      // await form.find('.fr-tags-group--annotations > .annotation--more button').trigger('click')
 
-  test("we select three choices, and two reasons", async () => {
-    const form = wrapper.getComponent(EditForm);
+      const expectedChoices = Object.keys(AnnotationTags);
+      expect(form.findAll(".fr-tags-group--annotations > .annotation-choice")).toHaveLength(expectedChoices.length);
+    });
 
-    // We have 5 tags
-    await form.find(`.fr-tags-group--annotations > .annotation--${ANNOTATIONS.DOWNGRADED} button`).trigger("click");
-    await form
-      .find(`.fr-tags-group--annotations > .annotation--${ANNOTATIONS.REDUCED_CONVERSION_PERIOD} button`)
-      .trigger("click");
-    await form.find(`.fr-tags-group--annotations > .annotation--${ANNOTATIONS.RISKY} button`).trigger("click");
+    test("we select three choices, and two reasons", async () => {
+      const form = wrapper.getComponent(EditForm);
+
+      // We have 5 tags
+      await form.find(`.fr-tags-group--annotations > .annotation--${ANNOTATIONS.DOWNGRADED} button`).trigger("click");
+      await form
+        .find(`.fr-tags-group--annotations > .annotation--${ANNOTATIONS.REDUCED_CONVERSION_PERIOD} button`)
+        .trigger("click");
+      await form.find(`.fr-tags-group--annotations > .annotation--${ANNOTATIONS.RISKY} button`).trigger("click");
+
+      expect(form.find("#downgraded_state").element.value).toEqual(CERTIFICATION_BODY_DECISION.PENDING);
+      expect(form.find("#downgraded_state").element.selectedOptions[0].textContent).toEqual("En cours de traitement");
+
+      expect(form.find("#reduced_conversion_period_state").element.value).toEqual(CERTIFICATION_BODY_DECISION.PENDING);
+      expect(form.find("#reduced_conversion_period_state").element.selectedOptions[0].textContent).toEqual(
+        "En cours de traitement",
+      );
+
+      // we toggle and cancel the tag
+      await form.find(`.fr-tags-group--annotations > .annotation--${ANNOTATIONS.SURVEYED} button`).trigger("click");
+      await form.find(`.fr-tags-group--annotations > .annotation--${ANNOTATIONS.SURVEYED} button`).trigger("click");
+
+      await form.find("#reduced_conversion_period_state").setValue(CERTIFICATION_BODY_DECISION.REJECTED);
+      await form.find("#downgraded_state").setValue(CERTIFICATION_BODY_DECISION.ACCEPTED);
+
+      // click and assess server update
+      axios.__createMock.patch.mockResolvedValueOnce({ data: record });
+      axios.__createMock.get.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.patch).toHaveBeenCalled();
+      expect(axios.__createMock.patch.mock.lastCall).toMatchObject([
+        "/v2/audits/054f0d70-c3da-448f-823e-81fcf7c2bf6e/parcelles/2",
+        {
+          properties: {
+            annotations: [
+              {
+                code: ANNOTATIONS.DOWNGRADED,
+                metadata: {
+                  [ANNOTATIONS.METADATA_STATE]: CERTIFICATION_BODY_DECISION.ACCEPTED,
+                },
+              },
+              {
+                code: ANNOTATIONS.REDUCED_CONVERSION_PERIOD,
+                metadata: {
+                  [ANNOTATIONS.METADATA_STATE]: CERTIFICATION_BODY_DECISION.REJECTED,
+                },
+              },
+              {
+                code: ANNOTATIONS.RISKY,
+              },
+            ],
+          },
+        },
+        {
+          headers: {
+            "If-Unmodified-Since": expect.any(String),
+          },
+        },
+      ]);
+    });
+  });
 
-    expect(form.find("#downgraded_state").element.value).toEqual(CERTIFICATION_BODY_DECISION.PENDING);
-    expect(form.find("#downgraded_state").element.selectedOptions[0].textContent).toEqual("En cours de traitement");
+  describe("item is readonly", async () => {
+    beforeAll(async () => {
+      operatorStore.operator = {
+        organismeCertificateur: {
+          id: 2,
+        },
+      };
+    });
+    test("certification state are disabled", async () => {
+      const form = wrapper.getComponent(EditForm);
+
+      expect(form.find(`#conversion-${LEVEL_CONVENTIONAL}`).isDisabled()).toEqual(true);
+      expect(form.find(`#conversion-${LEVEL_C1}`).isDisabled()).toEqual(true);
+      expect(form.find(`#conversion-${LEVEL_C2}`).isDisabled()).toEqual(true);
+      expect(form.find(`#conversion-${LEVEL_C3}`).isDisabled()).toEqual(true);
+      expect(form.find(`#conversion-${LEVEL_AB}`).isDisabled()).toEqual(true);
+    });
 
-    expect(form.find("#reduced_conversion_period_state").element.value).toEqual(CERTIFICATION_BODY_DECISION.PENDING);
-    expect(form.find("#reduced_conversion_period_state").element.selectedOptions[0].textContent).toEqual(
-      "En cours de traitement",
-    );
+    test("annotations are disabled", async () => {
+      const form = wrapper.getComponent(EditForm);
 
-    // we toggle and cancel the tag
-    await form.find(`.fr-tags-group--annotations > .annotation--${ANNOTATIONS.SURVEYED} button`).trigger("click");
-    await form.find(`.fr-tags-group--annotations > .annotation--${ANNOTATIONS.SURVEYED} button`).trigger("click");
+      // We have all the tags tags and no expand button
+      expect(form.findAll(".fr-tags-group--annotations > .annotation-choice")).toHaveLength(5);
+      expect(form.find(".fr-tags-group--annotations > .annotation--more").attributes()).toHaveProperty("hidden");
 
-    await form.find("#reduced_conversion_period_state").setValue(CERTIFICATION_BODY_DECISION.REJECTED);
-    await form.find("#downgraded_state").setValue(CERTIFICATION_BODY_DECISION.ACCEPTED);
+      // expect(form.find('.fr-tags-group--annotations > .annotation--more').attributes()).not.toHaveProperty('hidden')
+      // await form.find('.fr-tags-group--annotations > .annotation--more button').trigger('click')
 
-    // click and assess server update
-    axios.__createMock.patch.mockResolvedValueOnce({ data: record });
-    axios.__createMock.get.mockResolvedValueOnce({ data: record });
-    await form.find(".fr-modal__footer button.fr-btn").trigger("click");
+      const expectedChoices = Object.keys(AnnotationTags);
+      expect(form.findAll(".fr-tags-group--annotations > .annotation-choice")).toHaveLength(expectedChoices.length);
 
-    await flushPromises();
-    expect(wrapper.findComponent(EditForm).exists()).toEqual(false);
-    expect(axios.__createMock.patch).toHaveBeenCalled();
-    expect(axios.__createMock.patch.mock.lastCall).toMatchObject([
-      "/v2/audits/054f0d70-c3da-448f-823e-81fcf7c2bf6e/parcelles/2",
-      {
-        properties: {
-          annotations: [
-            {
-              code: ANNOTATIONS.DOWNGRADED,
-              metadata: {
-                [ANNOTATIONS.METADATA_STATE]: CERTIFICATION_BODY_DECISION.ACCEPTED,
-              },
-            },
-            {
-              code: ANNOTATIONS.REDUCED_CONVERSION_PERIOD,
-              metadata: {
-                [ANNOTATIONS.METADATA_STATE]: CERTIFICATION_BODY_DECISION.REJECTED,
-              },
-            },
-            {
-              code: ANNOTATIONS.RISKY,
-            },
-          ],
-        },
-      },
-      {
-        headers: {
-          "If-Unmodified-Since": expect.any(String),
-        },
-      },
-    ]);
+      const annotations = form.findAll(".fr-tags-group--annotations > .annotation-choice > button");
+      expect(annotations[0].isDisabled()).toEqual(true);
+      expect(annotations[1].isDisabled()).toEqual(true);
+      expect(annotations[2].isDisabled()).toEqual(true);
+      expect(annotations[3].isDisabled()).toEqual(true);
+      expect(annotations[4].isDisabled()).toEqual(true);
+    });
   });
 });
diff --git a/src/components/forms/SingleItemCertificationBodyForm.vue b/src/components/forms/SingleItemCertificationBodyForm.vue
index 352a1b1a..8a22a1a1 100644
--- a/src/components/forms/SingleItemCertificationBodyForm.vue
+++ b/src/components/forms/SingleItemCertificationBodyForm.vue
@@ -12,6 +12,7 @@
             :required="requiredName"
             :class="{ 'fr-input--error': nameErrors.size }"
             ref="autofocusedElement"
+            :disabled="readonly"
           />
           <div v-for="[id, result] in nameErrors" :key="id" class="fr-hint-text fr-error-text">
             {{ result.errorMessage }}.
@@ -41,6 +42,7 @@
             :feature-id="feature.properties.id"
             :cultures="patch.cultures"
             @change="($cultures) => (patch.cultures = $cultures)"
+            :disabled-input="readonly"
           />
         </AccordionSection>
       </AccordionGroup>
@@ -53,7 +55,7 @@
         >
           <ConversionLevelSelector
             :feature-id="feature.properties.id"
-            :readonly="!permissions.canChangeConversionLevel"
+            :readonly="!permissions.canChangeConversionLevel || readonly"
             v-model="patch.conversion_niveau"
           />
 
@@ -78,9 +80,10 @@
             v-if="permissions.canAddAnnotations"
             v-model="patch.annotations"
             :feature-id="feature.properties.id"
+            :readonly="readonly"
           />
 
-          <div class="fr-input-group">
+          <div v-if="!readonly" class="fr-input-group">
             <label class="fr-label" for="auditeur_notes">Vos notes de certification (facultatif)</label>
             <textarea class="fr-input" id="auditeur_notes" name="auditeur_notes" v-model="patch.auditeur_notes" />
           </div>
@@ -92,7 +95,9 @@
 
     <template #footer>
       <div class="fr-input-group">
-        <button class="fr-btn" type="submit" form="single-feature-edit-form">Enregistrer</button>
+        <button class="fr-btn" type="submit" form="single-feature-edit-form">
+          {{ readonly ? "Fermer" : "Enregistrer" }}
+        </button>
       </div>
     </template>
   </Modal>
@@ -130,6 +135,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["submit", "close"]);
 
@@ -159,6 +168,10 @@ function requiresAction(properties) {
 }
 
 const validate = () => {
+  if (props.readonly) {
+    emit("close");
+    return;
+  }
   const set = featuresSet.byFeature(props.feature.id, true);
 
   if (set.size) {
@@ -169,7 +182,7 @@ const validate = () => {
 };
 
 function handleClose() {
-  if (featuresSet.isDirty) {
+  if (featuresSet.isDirty && !props.readonly) {
     showCancelModal.value = true;
   } else {
     emit("close");
@@ -179,6 +192,10 @@ function handleClose() {
 onBeforeUnmount(() => featuresSet.setCandidate([]));
 
 watch(patch, (properties) => {
+  if (props.readonly) {
+    return;
+  }
+
   featuresSet.setCandidate([
     {
       id: props.feature.id,
diff --git a/src/components/forms/fields/AnnotationsSelector.vue b/src/components/forms/fields/AnnotationsSelector.vue
index 4215457c..98fc9260 100644
--- a/src/components/forms/fields/AnnotationsSelector.vue
+++ b/src/components/forms/fields/AnnotationsSelector.vue
@@ -16,6 +16,7 @@
           type="button"
           :aria-pressed="isSelected(annotationId)"
           @click="toggleAnnotation(annotationId)"
+          :disabled="readonly"
         >
           {{ annotation.label }}
         </button>
@@ -93,6 +94,10 @@ const props = defineProps({
     required: true,
     default: () => [],
   },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const isUserExpanded = ref(false);
diff --git a/src/components/forms/fields/ConversionLevelSelector.vue b/src/components/forms/fields/ConversionLevelSelector.vue
index 88af9dd6..26012a74 100644
--- a/src/components/forms/fields/ConversionLevelSelector.vue
+++ b/src/components/forms/fields/ConversionLevelSelector.vue
@@ -36,7 +36,7 @@ const props = defineProps({
   },
   readonly: {
     type: Boolean,
-    default: () => false,
+    default: false,
   },
 });
 
diff --git a/src/components/forms/fields/CultureSelector.vue b/src/components/forms/fields/CultureSelector.vue
index e8e95fb9..a456dfd1 100644
--- a/src/components/forms/fields/CultureSelector.vue
+++ b/src/components/forms/fields/CultureSelector.vue
@@ -92,7 +92,7 @@ const props = defineProps({
   },
   disabledInput: {
     type: Boolean,
-    default: () => false,
+    default: false,
   },
 });
 
diff --git a/src/components/forms/fields/CultureTypeSelector.vue b/src/components/forms/fields/CultureTypeSelector.vue
index 49d307f5..455d387c 100644
--- a/src/components/forms/fields/CultureTypeSelector.vue
+++ b/src/components/forms/fields/CultureTypeSelector.vue
@@ -53,7 +53,7 @@ const props = defineProps({
   },
   disabledInput: {
     type: Boolean,
-    default: () => false,
+    default: false,
   },
 });
 
diff --git a/src/components/records/Header.test.js b/src/components/records/Header.test.js
index 856dcaaf..4a3ce8a1 100644
--- a/src/components/records/Header.test.js
+++ b/src/components/records/Header.test.js
@@ -12,11 +12,13 @@ import record from "@/utils/__fixtures__/record-with-features.json" assert { typ
 
 import RecordHeader from "./Header.vue";
 import EditVersionModal from "@/components/forms/EditVersionForm.vue";
+import { usePermissions } from "@/stores/permissions";
 
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const operatorStore = useOperatorStore(pinia);
 const recordStore = useRecordStore(pinia);
 const userStore = useUserStore(pinia);
+const permissions = usePermissions(pinia);
 
 describe("RecordHeader", () => {
   const AsyncComponent = defineComponent({
@@ -44,7 +46,7 @@ describe("RecordHeader", () => {
     expect(wrapper.find(".version-name").text()).toEqual("Version créée le 01/01/2024");
   });
 
-  describe("Modifier la version", () => {
+  describe("modify version", () => {
     afterEach(() => userStore.$reset());
 
     it("should allow agri when OPERATOR_DRAFT", async () => {
@@ -117,5 +119,20 @@ describe("RecordHeader", () => {
         expect.anything(),
       );
     });
+    it("I should see readonly badge if we are not the creator of record", async () => {
+      userStore.isOc = true;
+      userStore.isAgri = false;
+      operatorStore.operator = {
+        organismeCertificateur: {
+          id: 2,
+        },
+      };
+
+      let wrapper = mount(AsyncComponent);
+
+      await flushPromises();
+      expect(await wrapper.find(".readonly-badge").exists()).toBe(true);
+      expect(await wrapper.find(".edit-version-info").exists()).toBe(false);
+    });
   });
 });
diff --git a/src/components/records/Header.vue b/src/components/records/Header.vue
index 8ec7759f..776d0baa 100644
--- a/src/components/records/Header.vue
+++ b/src/components/records/Header.vue
@@ -6,6 +6,7 @@
       <h2 class="fr-h4 fr-my-0 fr-mb-1v version-name">
         {{ record.version_name }}
       </h2>
+      <span v-if="readonly" class="readonly-badge">Lecture seule</span>
 
       <button
         v-if="!disableActions && permissions.canEditVersion"
@@ -142,7 +143,9 @@ const canDisplayHistory = computed(() => Array.isArray(record.audit_history) &&
 const versionMenu = ref(false);
 const versionMenuRef = ref(null);
 const showEditVersionModal = ref(false);
-
+const readonly = computed(
+  () => permissions.isOc && recordStore.record.oc_id !== operatorStore.operator?.organismeCertificateur?.id,
+);
 onClickOutside(versionMenuRef, ({ target }) => {
   if (!target.classList.contains("show-versions")) {
     versionMenu.value = false;
@@ -225,4 +228,15 @@ header {
     @extend .fr-btn--tertiary-no-outline;
   }
 }
+
+.readonly-badge {
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--background-default-grey-active);
+  font-weight: 700;
+  margin-bottom: 0.25em;
+}
 </style>
diff --git a/src/components/records/Table/FeatureGroup.vue b/src/components/records/Table/FeatureGroup.vue
index 14447d62..b988e75e 100644
--- a/src/components/records/Table/FeatureGroup.vue
+++ b/src/components/records/Table/FeatureGroup.vue
@@ -98,7 +98,7 @@
                   />
                 </div>
               </th>
-              <td @click="isOnline && toggleEditForm(feature.id)" v-if="isGroupedByCulture">
+              <td @click="clickFeature(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">
@@ -128,15 +128,22 @@
               </td>
               <td class="actions">
                 <button
+                  v-if="!readonly"
                   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 }"
+                  class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl fr-btn fr-btn--tertiary-no-outline fr-icon-edit-line"
                   @click="toggleEditForm(feature.id)"
                   aria-label="Modifier"
                 />
+                <button
+                  v-else
+                  type="button"
+                  class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl fr-btn fr-btn--tertiary-no-outline ri-eye-line"
+                  @click="toggleViewForm(feature.id)"
+                  aria-label="Modifier"
+                />
 
-                <ActionDropdown with-icons>
-                  <li v-if="permissions.canChangeGeometry && isOnline">
+                <ActionDropdown v-if="!readonly" with-icons>
+                  <li v-if="permissions.canChangeGeometry && isOnline" class="more-actions">
                     <router-link
                       :to="`/exploitations/${operatorStore.operator.numeroBio}/${recordStore.record.record_id}/modifier/${feature.id}`"
                       type="button"
@@ -211,7 +218,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["edit:featureId", "delete:featureId"]);
+const emit = defineEmits(["edit:featureId", "view:featureId", "delete:featureId"]);
 
 const { selectedIds, hoveredId } = storeToRefs(featuresStore);
 const { toggleSingleSelected } = featuresStore;
@@ -225,11 +232,28 @@ const groupErrors = computed(() => {
   return featureIds.value.reduce((sum, id) => sum + featuresSets.byFeature(id, true).size, 0);
 });
 
+const readonly = computed(() => {
+  return permissions.isOc && recordStore.record.oc_id !== operatorStore.operator?.organismeCertificateur?.id;
+});
+
 function toggleEditForm(featureId) {
+  if (readonly.value) {
+    return;
+  }
   return emit("edit:featureId", featureId);
 }
 
+function toggleViewForm(featureId) {
+  if (!readonly.value) {
+    return;
+  }
+  return emit("view:featureId", featureId);
+}
+
 function toggleDeleteForm(featureId) {
+  if (readonly.value) {
+    return;
+  }
   return emit("delete:featureId", featureId);
 }
 
@@ -242,6 +266,18 @@ function toggleFeatureGroup() {
   }
 }
 
+function clickFeature(featureId) {
+  if (!isOnline) {
+    return;
+  }
+
+  if (readonly.value) {
+    toggleViewForm(featureId);
+  } else {
+    toggleEditForm(featureId);
+  }
+}
+
 watch(selectedIds, (selectedIds, prevSelectedIds) => {
   const newItems = featureIds.value.filter((id) => {
     return selectedIds.includes(id) && !prevSelectedIds.includes(id);
diff --git a/src/components/records/Table/index.test.js b/src/components/records/Table/index.test.js
index fd4e1937..2d9d57e5 100644
--- a/src/components/records/Table/index.test.js
+++ b/src/components/records/Table/index.test.js
@@ -15,10 +15,12 @@ import DeleteFeatureModal from "@/components/forms/DeleteFeatureForm.vue";
 import EditForm from "@/components/forms/SingleItemOperatorForm.vue";
 import TableComponent from "@/components/records/Table/index.vue";
 import { DeletionReasonsCode, GROUPE_COMMUNE } from "@/utils/features.js";
+import { useOperatorStore } from "@/stores/operator";
 
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const storageStore = useCartoBioStorage(pinia);
 const recordStore = useRecordStore(pinia);
+const operatorStore = useOperatorStore(pinia);
 const featuresStore = useFeaturesStore(pinia);
 const permissions = usePermissions(pinia);
 
@@ -103,6 +105,11 @@ describe("Features Table", () => {
   });
 
   test("we click on a row to edit a feature in a Modal, then save", async () => {
+    operatorStore.operator = {
+      organismeCertificateur: {
+        id: 1,
+      },
+    };
     const AsyncComponent = defineComponent({
       components: { TableComponent },
       template: '<Suspense><TableComponent v-bind="$attrs" /></Suspense>',
@@ -132,7 +139,45 @@ describe("Features Table", () => {
     expect(wrapper.findComponent(EditForm).exists()).toEqual(false);
   });
 
+  test("we click on a row to view a feature in a Modal, then close", async () => {
+    operatorStore.operator = {
+      organismeCertificateur: {
+        id: 2,
+      },
+    };
+    const AsyncComponent = defineComponent({
+      components: { TableComponent },
+      template: '<Suspense><TableComponent v-bind="$attrs" /></Suspense>',
+    });
+
+    const wrapper = mount(AsyncComponent, {
+      props: { editForm: markRaw(EditForm) },
+    });
+
+    const table = wrapper.getComponent(TableComponent);
+    await table.find("tr#parcelle-2 td").trigger("click");
+    await flushPromises();
+
+    // this throws if the modal form does not exist
+    // it catches the Component reference even if it has been Teleport-ed in the <body>
+    const form = wrapper.getComponent(EditForm);
+    expect(table.vm.viewedFeatureId).toEqual("2");
+
+    //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.patch).not.toHaveBeenCalled();
+    expect(wrapper.findComponent(EditForm).exists()).toEqual(false);
+  });
+
   test("we delete a feature", async () => {
+    operatorStore.operator = {
+      organismeCertificateur: {
+        id: 1,
+      },
+    };
     permissions.canDeleteFeature = true;
 
     const wrapper = mount(TableComponent);
@@ -157,6 +202,19 @@ describe("Features Table", () => {
     });
   });
 
+  test("there is not other action if we are not the correct OC", async () => {
+    operatorStore.operator = {
+      organismeCertificateur: {
+        id: 2,
+      },
+    };
+    permissions.canDeleteFeature = true;
+
+    const wrapper = mount(TableComponent);
+
+    expect(wrapper.find(".more-actions").exists()).toEqual(false);
+  });
+
   test("we open a modal and test various cases it should remain open, or close", async () => {
     permissions.isOc = false;
     permissions.isAgri = true;
diff --git a/src/components/records/Table/index.vue b/src/components/records/Table/index.vue
index 8e825328..9c4d835b 100644
--- a/src/components/records/Table/index.vue
+++ b/src/components/records/Table/index.vue
@@ -112,6 +112,7 @@
         :featureGroup="featureGroup"
         :key="featureGroup.key"
         @edit:featureId="(featuredId) => (editedFeatureId = featuredId)"
+        @view:featureId="(featuredId) => (viewedFeatureId = featuredId)"
         @delete:featureId="(featureId) => (maybeDeletedFeatureId = featureId)"
       />
     </table>
@@ -133,7 +134,7 @@
 
   <Teleport to="body">
     <Component
-      v-if="editedFeatureId && editForm"
+      v-if="editedFeature && editForm"
       :is="editForm"
       :feature="editedFeature"
       @submit="handleSingleFeatureSubmit"
@@ -142,6 +143,17 @@
     >
       <template #title>Modification de parcelle</template>
     </Component>
+    <Component
+      v-if="viewedFeature && editForm"
+      :is="editForm"
+      :feature="viewedFeature"
+      :readonly="true"
+      @close="viewedFeatureId = null"
+      @submit="viewedFeatureId = null"
+      icon="fr-icon-file-text-fill"
+    >
+      <template #title>Visualisation de parcelle</template>
+    </Component>
 
     <DeleteFeatureModal
       v-if="maybeDeletedFeatureId"
@@ -179,6 +191,9 @@ defineProps({
   editForm: {
     type: Object,
   },
+  viewForm: {
+    type: Object,
+  },
   massActions: {
     type: Array,
     default: () => [],
@@ -202,6 +217,8 @@ const { getFeatureById, toggleAllSelected } = featuresStore;
 const editedFeatureId = ref(null);
 const editedFeature = computed(() => (editedFeatureId.value ? getFeatureById(editedFeatureId.value) : null));
 const maybeDeletedFeatureId = ref(null);
+const viewedFeatureId = ref(null);
+const viewedFeature = computed(() => (viewedFeatureId.value ? getFeatureById(viewedFeatureId.value) : null));
 
 const userGroupingChoice = ref("CULTURE");
 const featureGroups = computed(() => getFeatureGroups({ features: features.value }, userGroupingChoice.value));
diff --git a/src/components/setup/Flow/Preview.vue b/src/components/setup/Flow/Preview.vue
index f8c47eb5..39344697 100644
--- a/src/components/setup/Flow/Preview.vue
+++ b/src/components/setup/Flow/Preview.vue
@@ -150,7 +150,7 @@ const props = defineProps({
   },
   isLoading: {
     type: Boolean,
-    default: () => false,
+    default: false,
   },
 });
 
diff --git a/src/components/widgets/Modal.vue b/src/components/widgets/Modal.vue
index 3b5a2a12..ae047922 100644
--- a/src/components/widgets/Modal.vue
+++ b/src/components/widgets/Modal.vue
@@ -96,3 +96,8 @@ onBeforeUnmount(() => {
   display: none;
 }
 </style>
+<style>
+:root[data-fr-scrolling] body {
+  position: inherit !important;
+}
+</style>
diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/index.vue b/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
index c3dde20a..bd9d63bf 100644
--- a/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
+++ b/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
@@ -61,7 +61,7 @@ meta:
           >
             <p>Cette version du parcellaire n'est pas la plus récente.</p>
           </div>
-          <FeaturesTable :edit-form="EditForm" :mass-actions="massActions" />
+          <FeaturesTable :edit-form="editForm" :mass-actions="massActions" />
         </div>
       </div>
 
@@ -169,9 +169,10 @@ const mapRef = shallowRef(null);
 const { map: mapPrefs } = storeToRefs(preferences);
 const isMapFullSize = ref(false);
 
-const EditForm = computed(() =>
+const editForm = computed(() =>
   permissions.isOc ? markRaw(SingleItemCertificationBodyForm) : markRaw(SingleItemOperatorForm),
 );
+
 const massActions = computed(() =>
   permissions.isOc
     ? [
diff --git a/src/pages/exploitations/[numeroBio]/index.vue b/src/pages/exploitations/[numeroBio]/index.vue
index c424a49f..638ba6f1 100644
--- a/src/pages/exploitations/[numeroBio]/index.vue
+++ b/src/pages/exploitations/[numeroBio]/index.vue
@@ -164,6 +164,7 @@ meta:
                 >
                   {{ record.version_name }}
                 </router-link>
+                <span v-if="isReadonly(record)" class="readonly-badge"> Lecture seule </span>
               </th>
               <td>{{ record.audit_date ? dateFormat(record.audit_date) : "non audité" }}</td>
               <td>{{ inHa(record.surface) }} ha</td>
@@ -196,7 +197,7 @@ meta:
                   v-else
                   type="button"
                   class="fr-btn fr-btn--tertiary-no-outline fr-icon-download-line"
-                  :disabled="!isOnline"
+                  :disabled="!isOnline || isReadonly(record)"
                   @click.stop.prevent="tryDownloadRecord(record.record_id)"
                 >
                   Télécharger pour un fonctionnement hors-ligne
@@ -208,8 +209,9 @@ meta:
                     <button
                       v-if="permissions.isOc || record.certification_state === CertificationState.OPERATOR_DRAFT"
                       type="button"
-                      @click.stop.prevent="editVersion(record.record_id)"
+                      @click.stop.prevent="editVersion(record)"
                       class="fr-btn fr-btn--tertiary-no-outline fr-icon-edit-line fr-text--sm"
+                      :disabled="isReadonly(record)"
                     >
                       Modifier les informations
                     </button>
@@ -227,8 +229,9 @@ meta:
                     <button
                       v-if="permissions.isOc || record.certification_state === CertificationState.OPERATOR_DRAFT"
                       type="button"
-                      @click.stop.prevent="deleteRecordModal = record.record_id"
+                      @click.stop.prevent="deleteRecordModal = !isReadonly(record) ? record.record_id : null"
                       class="fr-btn fr-btn--tertiary-no-outline fr-icon-delete-line btn--error fr-text--sm"
+                      :disabled="isReadonly(record)"
                     >
                       Supprimer la version
                     </button>
@@ -335,9 +338,12 @@ useHead({
   title: `Versions du parcellaire - ${operatorStore.operator.nom}`,
 });
 
-async function editVersion(recordId) {
-  await recordStore.ready(recordId);
-  editVersionModal.value = recordId;
+async function editVersion(record) {
+  if (isReadonly(record)) {
+    return;
+  }
+  await recordStore.ready(record.record_id);
+  editVersionModal.value = record.recordId;
 }
 
 async function duplicateVersion(recordId) {
@@ -347,6 +353,9 @@ async function duplicateVersion(recordId) {
 }
 
 async function tryDownloadRecord(recordId) {
+  if (isReadonly(record)) {
+    return;
+  }
   if (!(await storage.addRecord(recordId))) {
     fullStorageModal.value = true;
   } else {
@@ -358,6 +367,10 @@ async function handleRedirect(record) {
   await router.push(`/exploitations/${record.numerobio}/${record.record_id}`);
   toast.success(`Version créée aujourd'hui à ${hhmm(new Date())}`);
 }
+
+function isReadonly(record) {
+  return permissions.isOc && record.oc_id !== operatorStore.operator?.organismeCertificateur?.id;
+}
 </script>
 
 <style scoped>
@@ -486,4 +499,14 @@ tr.version-row:hover {
     --hover-tint: var(--background-default-grey-active);
   }
 }
+
+.readonly-badge {
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--background-default-grey-active);
+  margin-top: 0.2rem;
+}
 </style>
diff --git a/src/stores/permissions.js b/src/stores/permissions.js
index 4611ce0a..67816405 100644
--- a/src/stores/permissions.js
+++ b/src/stores/permissions.js
@@ -3,10 +3,12 @@ import { useUserStore } from "@/stores/user.js";
 import { computed } from "vue";
 import { defineStore } from "pinia";
 import { CertificationState } from "@agencebio/cartobio-types";
+import { useOperatorStore } from "./operator";
 
 export const usePermissions = defineStore("permissions", () => {
   const userStore = useUserStore();
   const recordStore = useRecordStore();
+  const operatorStore = useOperatorStore();
 
   // proxy the values so as they can be overriden by unit tests
   const isOc = computed(() => userStore.isOc);
@@ -15,7 +17,7 @@ export const usePermissions = defineStore("permissions", () => {
   // Tests
 
   const canEditParcellaire = computed(() => {
-    if (isOc.value) {
+    if (isOc.value && recordStore.record.oc_id === operatorStore.operator?.organismeCertificateur?.id) {
       return true;
     }
 
@@ -39,7 +41,7 @@ export const usePermissions = defineStore("permissions", () => {
   const canDeleteParcellaire = canEditParcellaire;
 
   const canCreateVersion = computed(() => isOc.value || isAgri.value);
-  const canEditVersion = computed(() => canEditParcellaire.value);
+  const canEditVersion = canEditParcellaire;
 
   const canChangeCulture = canEditParcellaire;
   const canChangeGeometry = canEditParcellaire;
@@ -48,7 +50,7 @@ export const usePermissions = defineStore("permissions", () => {
     return Boolean(recordStore.record.certification_state);
   });
 
-  const canChangeConversionLevel = isOc;
+  const canChangeConversionLevel = computed(() => isOc.value && canEditParcellaire.value);
 
   const canSaveAudit = computed(() => Boolean(userStore.isOcAudit));
   const canSendAudit = computed(() => Boolean(userStore.isOcAudit));
diff --git a/src/stores/permissions.test.js b/src/stores/permissions.test.js
index 854c5aba..ef03179a 100644
--- a/src/stores/permissions.test.js
+++ b/src/stores/permissions.test.js
@@ -5,10 +5,12 @@ import { useUserStore } from "./user.js";
 import { ROLES } from "./user.js";
 import { CertificationState } from "@agencebio/cartobio-types";
 import { createTestingPinia } from "@pinia/testing";
+import { useOperatorStore } from "./operator.js";
 
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const permissions = usePermissions(pinia);
 const recordStore = useRecordStore(pinia);
+const operatorStore = useOperatorStore(pinia);
 const user = useUserStore(pinia);
 
 describe("roles", () => {
@@ -47,8 +49,19 @@ describe("roles", () => {
     user.roles = [ROLES.OC_CERTIF];
 
     expect(permissions.isOc).toEqual(true);
-    expect(permissions.canAddParcelle).toEqual(true);
+    expect(permissions.canAddParcelle).toEqual(false);
+
+    operatorStore.operator = { organismeCertificateur: { id: 2 } };
+    recordStore.record.oc_id = 1;
 
+    expect(permissions.canAddParcelle).toEqual(false);
+    expect(permissions.canDeleteFeature).toEqual(false);
+    expect(permissions.canDeleteParcellaire).toEqual(false);
+    expect(permissions.canChangeCulture).toEqual(false);
+    expect(permissions.canAddParcelleNote).toEqual(false);
+    expect(permissions.canChangeConversionLevel).toEqual(false);
+
+    operatorStore.operator = { organismeCertificateur: { id: 1 } };
     recordStore.record.certification_state = CertificationState.OPERATOR_DRAFT;
 
     expect(permissions.canAddParcelle).toEqual(true);
@@ -77,9 +90,11 @@ describe("roles", () => {
     user.roles = [ROLES.OC_AUDIT];
 
     expect(permissions.isOc).toEqual(true);
-    expect(permissions.canAddParcelle).toEqual(true);
+    expect(permissions.canAddParcelle).toEqual(false);
 
     recordStore.record.certification_state = CertificationState.OPERATOR_DRAFT;
+    operatorStore.operator = { organismeCertificateur: { id: 1 } };
+    recordStore.record.oc_id = 1;
 
     expect(permissions.canAddParcelle).toEqual(true);
     expect(permissions.canDeleteFeature).toEqual(true);
diff --git a/src/stores/record.js b/src/stores/record.js
index ab7c0455..53d0731c 100644
--- a/src/stores/record.js
+++ b/src/stores/record.js
@@ -29,6 +29,7 @@ export const useRecordStore = defineStore("record", () => {
     created_at: null,
     updated_at: null,
     audit_date: null,
+    oc_id: null,
     audit_notes: "",
     audit_demandes: "",
     audit_history: [],
diff --git a/src/utils/__fixtures__/operator.json b/src/utils/__fixtures__/operator.json
index f61add2c..c5a98fbb 100644
--- a/src/utils/__fixtures__/operator.json
+++ b/src/utils/__fixtures__/operator.json
@@ -14,5 +14,8 @@
       "codeCommune": "42271"
     }
   ],
-  "certificats": []
+  "certificats": [],
+  "organismeCertificateur": {
+    "id": 1
+  }
 }
diff --git a/src/utils/__fixtures__/record-with-features.json b/src/utils/__fixtures__/record-with-features.json
index fdd3cb9d..87873cd6 100644
--- a/src/utils/__fixtures__/record-with-features.json
+++ b/src/utils/__fixtures__/record-with-features.json
@@ -25,6 +25,7 @@
       }
     }
   ],
+  "oc_id": 1,
   "audit_notes": "",
   "audit_demandes": "",
   "parcelles": {