fix(summary): summary bigger and add some colors / translation to badges

src/pages/api-operation-page/link-publications/contribution-production-card.tsx

@@ -11,6 +11,7 @@ import "./styles.scss";
 import { Contribute_Production } from "../../../types";
 import ContributorProductionInfo from "./contributor-production-info";
 import StaffProductionActions from "./staff-production-action";
+import { BadgeStatus, StatusLabel } from "../../contribution-page/utils";
 
 const ContributionProductionItem = ({
   data,
@@ -23,13 +24,15 @@ const ContributionProductionItem = ({
     <Container fluid className="accordion">
       <Row>
         <Col>
-          <Badge
-            size="sm"
-            color="purple-glycine"
-            className="fr-mr-1w fr-mb-1w status"
-          >
-            {data.status}
-          </Badge>
+          {data?.status && (
+            <Badge
+              size="sm"
+              color={BadgeStatus({ status: data?.status })}
+              className="fr-mr-1w fr-mb-1w"
+            >
+              {StatusLabel({ status: data.status })}
+            </Badge>
+          )}
           {data.tag && (
             <Badge
               size="sm"

src/pages/contribution-page/contribution-item.tsx

@@ -3,11 +3,17 @@ import { Badge, Col, Row, Text, Notice, Title } from "@dataesr/dsfr-plus";
 import ContributorInfo from "./contributor-info";
 import StaffActions from "./staff-action";
 import { Contribution } from "../../types";
-import { BadgeColor } from "./utils";
+import {
+  BadgeColor,
+  BadgeStatus,
+  StatusLabel,
+  TypeLabel,
+  typeIcon,
+} from "./utils";
 import "./styles.scss";
 
 interface ContributionItemProps {
-  data: Contribution;
+  data: Contribution & { type: string };
   highlightedQuery: string;
   refetch: () => void;
 }
@@ -18,15 +24,21 @@ const ContributionItem: React.FC<ContributionItemProps> = ({
 }) => {
   return (
     <>
-      <div>
+      <Row>
         {data?.tags?.length > 0 && (
           <Badge size="sm" color="purple-glycine" className="fr-mr-1w fr-mb-1w">
             {data.tags.join(", ")}
           </Badge>
         )}
-        <Badge size="sm" color="purple-glycine" className="fr-mr-1w fr-mb-1w">
-          {data?.status}
-        </Badge>
+        {data?.status && (
+          <Badge
+            size="sm"
+            color={BadgeStatus({ status: data?.status })}
+            className="fr-mr-1w fr-mb-1w"
+          >
+            {StatusLabel({ status: data?.status })}
+          </Badge>
+        )}
         {data?.responseFrom && (
           <Badge size="sm" color="blue-ecume" className="fr-mr-1w fr-mb-1w">
             {`Réponse envoyée par ${data.responseFrom}`}
@@ -42,11 +54,12 @@ const ContributionItem: React.FC<ContributionItemProps> = ({
             size="sm"
             color={BadgeColor({ type: data.type })}
             className="fr-mr-1w fr-mb-1w"
+            icon={typeIcon({ icon: data.type })}
           >
-            {data.type}
+            {TypeLabel({ type: data.type })}
           </Badge>
         )}
-      </div>
+      </Row>
       <Row>
         <Col>
           <Title look="h5">

src/pages/contribution-page/contributor-summary.tsx

@@ -1,7 +1,13 @@
 import React from "react";
-import { Badge, SideMenu, SideMenuItem, Text } from "@dataesr/dsfr-plus";
+import { Badge, Row, SideMenu, SideMenuItem, Text } from "@dataesr/dsfr-plus";
 import { Contribution } from "../../types";
-import { BadgeColor } from "./utils";
+import {
+  BadgeColor,
+  BadgeStatus,
+  StatusLabel,
+  TypeLabel,
+  typeIcon,
+} from "./utils";
 
 interface ContributorSummaryProps {
   contributions: Contribution[];
@@ -22,42 +28,49 @@ const ContributorSummary: React.FC<ContributorSummaryProps> = ({
       {contributions.map((contribution) => (
         <SideMenuItem
           key={contribution._id}
+          className="contribution-message"
           title={
-            <div>
-              {contribution?.status && (
-                <Badge
-                  size="sm"
-                  color="purple-glycine"
-                  className="fr-mr-1w fr-mb-1w"
-                >
-                  {contribution.status}
-                </Badge>
-              )}
+            <Row>
               {contribution?.type && (
                 <Badge
                   size="sm"
+                  icon={typeIcon({ icon: contribution.type })}
                   color={BadgeColor({ type: contribution.type })}
                   className="fr-mr-1w fr-mb-1w"
                 >
-                  {contribution.type}
+                  {TypeLabel({ type: contribution.type })}
                 </Badge>
               )}
-              {contribution?.tags?.length > 0 && (
+              {contribution?.status && (
                 <Badge
                   size="sm"
-                  color="purple-glycine"
+                  color={BadgeStatus({ status: contribution?.status })}
                   className="fr-mr-1w fr-mb-1w"
                 >
-                  {contribution.tags.join(", ")}
+                  {StatusLabel({ status: contribution.status })}
                 </Badge>
               )}
+              {contribution?.tags?.length > 0 &&
+                contribution.tags
+                  .filter((tag) => tag !== "")
+                  .map((tag) => (
+                    <Badge
+                      key={tag}
+                      size="sm"
+                      color="purple-glycine"
+                      className="fr-mr-1w fr-mb-1w"
+                    >
+                      {tag}
+                    </Badge>
+                  ))}
               <div>
-                <Text size="sm">{contribution.name}</Text>
-                <Text size="sm" className="fr-text--italic">
+                <Text size="sm">
+                  {contribution.name}{" "}
                   {new Date(contribution.created_at).toLocaleDateString()}
                 </Text>
+                <p className="contribution-message">{contribution.message}</p>
               </div>
-            </div>
+            </Row>
           }
           defaultExpanded={false}
           onClick={() => handleClick(contribution?._id)}

src/pages/contribution-page/index.tsx

@@ -171,13 +171,13 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
         </Col>
       </Row>
       <Row>
-        <Col md="3">
+        <Col md="4">
           <ContributorSummary
             contributions={filteredContributions}
             onSelectContribution={onSelectContribution}
           />
         </Col>
-        <Col md="9">
+        <Col md="7">
           {filteredContributions && filteredContributions.length > 0 && (
             <ContributionItem
               key={selectedContribution}

src/pages/contribution-page/styles.scss

@@ -46,3 +46,10 @@
 .fr-sidemenu__btn[aria-expanded="false"]:after {
   display: none;
 }
+.contribution-message {
+  font-style: italic;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/pages/contribution-page/utils/index.tsx

@@ -21,3 +21,91 @@ export const BadgeColor = ({ type }) => {
   }
   return badgeColor;
 };
+
+export const BadgeStatus = ({ status }) => {
+  let badgeStatus;
+  switch (status) {
+    case "new":
+      badgeStatus = "blue-ecume";
+      break;
+    case "treated":
+      badgeStatus = "orange-terre-battue";
+      break;
+    case "ongoing":
+      badgeStatus = "yellow-tournesol";
+      break;
+
+    default:
+      badgeStatus = "purple-glycine";
+  }
+  return badgeStatus;
+};
+
+export const StatusLabel = ({ status }) => {
+  let statusLabel;
+  switch (status) {
+    case "new":
+      statusLabel = "Nouveau";
+      break;
+    case "treated":
+      statusLabel = "Traité";
+      break;
+    case "ongoing":
+      statusLabel = "En cours";
+      break;
+
+    default:
+      statusLabel = "purple-glycine";
+  }
+  return statusLabel;
+};
+
+export const TypeLabel = ({ type }) => {
+  let typeLabel;
+  switch (type) {
+    case "persons":
+      typeLabel = "Personnes";
+      break;
+    case "structures":
+      typeLabel = "Structures";
+      break;
+    case "publications":
+      typeLabel = "Publications";
+      break;
+    case "production":
+      typeLabel = "Production";
+      break;
+    case "projects":
+      typeLabel = "Projets";
+      break;
+
+    default:
+      typeLabel = "";
+  }
+  return typeLabel;
+};
+
+export const typeIcon = ({ icon }) => {
+  let typeIcon;
+  switch (icon) {
+    case "persons":
+      typeIcon = "user-fill";
+      break;
+    case "structures":
+      typeIcon = "building-fill";
+      break;
+    case "publications":
+      typeIcon = "article-fill";
+      break;
+    case "production":
+      typeIcon = "git-commit-fill";
+      break;
+    case "projects":
+      typeIcon = "recycle-fill";
+      break;
+
+    default:
+      typeIcon = "";
+  }
+  return typeIcon;
+};