feature: affichage du statut de notifications

src/components/records/NotificationState.test.js

@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import NotificationState from "./NotificationState.vue";
+
+describe("NotificationState", () => {
+  it('renders correctly for "BROUILLON" state', () => {
+    const wrapper = mount(NotificationState, {
+      props: {
+        operator: {
+          notifications: [
+            {
+              status: "BROUILLON",
+            },
+          ],
+        },
+        text: true,
+      },
+    });
+
+    expect(wrapper.find(".fr-icon--sm").classes()).toContain("fr-icon-article-line");
+    expect(
+      wrapper
+        .find("span")
+        .text()
+        .replace(/\u00A0/g, " "),
+    ).toContain("Brouillon");
+
+    const spanElement = wrapper.find("span");
+    expect(spanElement.attributes("style")).toContain("background-color: rgb(211, 211, 211)");
+    expect(spanElement.attributes("style")).toContain("color: rgb(128, 128, 128)");
+  });
+
+  it('does not render "BROUILLON" state IF another notifications exists', () => {
+    const wrapper = mount(NotificationState, {
+      props: {
+        operator: {
+          notifications: [
+            {
+              status: "BROUILLON",
+            },
+            {
+              status: "ENGAGEE",
+            },
+          ],
+        },
+        text: true,
+      },
+    });
+
+    expect(wrapper.find(".fr-icon--sm").classes()).toContain("fr-icon-success-line");
+    expect(
+      wrapper
+        .find("span")
+        .text()
+        .replace(/\u00A0/g, " "),
+    ).toContain("Engagée");
+
+    const spanElement = wrapper.find("span");
+    expect(spanElement.attributes("style")).toContain("background-color: rgb(158, 249, 190)");
+    expect(spanElement.attributes("style")).toContain("color: rgb(41, 114, 84)");
+  });
+
+  it('does not render text when "text" prop is false', () => {
+    const wrapper = mount(NotificationState, {
+      props: {
+        operator: {
+          notifications: [
+            {
+              etatCertification: "BROUILLON",
+            },
+          ],
+        },
+        text: false,
+      },
+    });
+
+    expect(wrapper.find(".mr-1").exists()).toBe(false);
+  });
+
+  it('applies styles and classes for "ENGAGEE" state', () => {
+    const wrapper = mount(NotificationState, {
+      props: {
+        operator: {
+          certificats: [
+            {
+              status: "ENGAGEE",
+            },
+          ],
+        },
+        text: true,
+      },
+    });
+
+    expect(wrapper.find(".fr-icon--sm").classes()).toContain("fr-icon-success-line");
+    expect(
+      wrapper
+        .find("span")
+        .text()
+        .replace(/\u00A0/g, " "),
+    ).toContain("Notification Engagée");
+
+    const spanElement = wrapper.find("span");
+    expect(spanElement.attributes("style")).toContain("background-color: rgb(158, 249, 190)");
+    expect(spanElement.attributes("style")).toContain("color: rgb(41, 114, 84)");
+  });
+});

src/components/records/NotificationState.vue

@@ -0,0 +1,81 @@
+<template>
+  <span :class="badgeClasses.class" :style="badgeClasses.style">
+    <span
+      v-if="stateInfo"
+      :class="['icon', 'fr-icon--sm', stateInfo != null ? stateInfo.icon : '']"
+      aria-hidden="true"
+    ></span>
+    <span v-if="text && stateInfo && stateInfo.label !== 'Brouillon'">Notification&nbsp;</span>
+    <span :class="{ lowercase: text && stateInfo && stateInfo.label !== 'Brouillon' }">{{
+      stateInfo ? stateInfo.label : "-"
+    }}</span>
+  </span>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import { notificationsStateLevel } from "@/referentiels/ab.js";
+
+const props = defineProps({
+  operator: {
+    type: Object,
+    required: true,
+  },
+  text: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const stateInfo = computed(() => {
+  const array = props.operator.certificats ?? props.operator.notifications;
+
+  array.sort((a, b) => new Date(b.dateSignatureContrat) - new Date(a.dateSignatureContrat));
+
+  for (const notif of array) {
+    const currentStatut = notif.etatCertification || notif.status;
+
+    if (currentStatut != "BROUILLON") {
+      return notificationsStateLevel[currentStatut];
+    }
+  }
+
+  return notificationsStateLevel["BROUILLON"];
+});
+
+const badgeClasses = computed(() => {
+  const baseClasses = ["component"];
+  let colorClasses;
+  if (stateInfo.value != null) {
+    colorClasses = {
+      backgroundColor: `${stateInfo.value.color} !important`,
+      color: `${stateInfo.value.textColor} !important`,
+    };
+  }
+
+  return {
+    class: [baseClasses],
+    style: colorClasses,
+  };
+});
+</script>
+
+<style>
+.component {
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 4px;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+</style>