Skip to content

Commit

Permalink
Merge pull request #476 from AgenceBio/feature/badge-status-notif
Browse files Browse the repository at this point in the history
feature: affichage du statut de notifications
  • Loading branch information
GregoireDucharme authored Dec 18, 2024
2 parents 535475c + 4d69e93 commit e82702e
Showing 11 changed files with 554 additions and 52 deletions.
106 changes: 106 additions & 0 deletions src/components/records/NotificationState.test.js
Original file line number Diff line number Diff line change
@@ -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)");
});
});
81 changes: 81 additions & 0 deletions src/components/records/NotificationState.vue
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit e82702e

Please sign in to comment.