feat: réutiliser les couleurs de dossiers existantes (#129)

closes #101

src/components/CategorieDossierTag.module.scss

@@ -0,0 +1,22 @@
+.tag {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden !important;
+  display: inline-block !important;
+  max-width: 100%;
+}
+
+.cinema {
+  background-color: var(--red-marianne-main-472) !important;
+  color: white !important;
+}
+
+.television {
+  background-color: var(--yellow-moutarde-main-679) !important;
+  color: white !important;
+}
+
+.theatre, .enregistrement, .spectacle, .radio, .publicite, .nouvellesTechnologies, .divers {
+  background-color: var(--purple-glycine-main-494) !important;
+  color: white !important;
+}

src/components/CategorieDossierTag.tsx

@@ -0,0 +1,26 @@
+import type { TagSize } from "@dataesr/react-dsfr";
+import { Tag } from "@dataesr/react-dsfr";
+import type { Dossier } from "@prisma/client";
+import React from "react";
+import {
+  categorieToGrandeCategorieClassName,
+  categorieToGrandeCategorieLabel,
+} from "src/lib/categories";
+
+import styles from "./CategorieDossierTag.module.scss";
+
+interface Props {
+  dossier: Dossier;
+  size?: TagSize;
+}
+
+const CategorieDossierTag: React.FC<Props> = ({ dossier, size }) => {
+  const categorieClass = categorieToGrandeCategorieClassName(dossier.categorie);
+  return (
+    <Tag className={`${styles.tag} ${styles[categorieClass]}`} size={size}>
+      {categorieToGrandeCategorieLabel(dossier.categorie)}
+    </Tag>
+  );
+};
+
+export default CategorieDossierTag;

src/components/Commission.module.scss

@@ -1,6 +1,6 @@
 
 .dossierGrid {
-  grid-template-columns: 10rem 1.3fr 1.3fr .4fr 1fr;
+  grid-template-columns: 10rem 1.3fr 1.3fr .6fr 1fr 8rem;
 }
 
 

src/components/Commission.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import React from "react";
 import AssignedAgent from "src/components/AssignedAgent";
+import CategorieDossierTag from "src/components/CategorieDossierTag";
 import StatutDossierTag from "src/components/StatutDossierTag";
 import { frenchDateText, frenchDepartementName } from "src/lib/helpers";
 import type { CommissionData, DossierDataLight } from "src/lib/queries";
@@ -27,6 +28,9 @@ const Dossier: React.FC<DossierProps> = ({ dossier }) => {
       <div>
         <AssignedAgent dossier={dossier} />
       </div>
+      <div>
+        <CategorieDossierTag dossier={dossier} />
+      </div>
     </div>
   );
 };
@@ -57,7 +61,8 @@ const Commission: React.FC<Props> = ({ commission }) => {
         <div>Dossier</div>
         <div>Société</div>
         <div>Enfants</div>
-        <div>suivi par</div>
+        <div>Suivi par</div>
+        <div>Catégorie</div>
       </div>
       <div>
         {commission.dossiers.map((dossier) => (

src/components/Dossier.tsx

@@ -1,6 +1,7 @@
 import { Icon, Title } from "@dataesr/react-dsfr";
 import React from "react";
 import AssignedAgentSelect from "src/components/AssignedAgentSelect";
+import CategorieDossierTag from "src/components/CategorieDossierTag";
 import ChangeStatutDossierButton from "src/components/ChangeStatutDossierButton";
 import styles from "src/components/Dossier.module.scss";
 import Enfant from "src/components/Enfant";
@@ -9,10 +10,7 @@ import Info from "src/components/Info";
 import InfoSociete from "src/components/InfoSociete";
 import { JustificatifsDossier } from "src/components/Justificatifs";
 import { useDossier } from "src/lib/api";
-import {
-  categorieToGrandeCategorieLabel,
-  categorieToLabel,
-} from "src/lib/categories";
+import { categorieToLabel } from "src/lib/categories";
 import { frenchDateText, frenchDepartementName } from "src/lib/helpers";
 
 interface Props {
@@ -41,9 +39,10 @@ const Dossier: React.FC<Props> = ({ dossierId }) => {
             {frenchDateText(dossier.commission.date)} -{" "}
             {frenchDepartementName(dossier.commission.departement)}
           </Info>
-          <Info title="Type de dossier" className={styles.infoSuccessive}>
-            {categorieToLabel(dossier.categorie)} (
-            {categorieToGrandeCategorieLabel(dossier.categorie)})
+          <Info title="Catégorie" className={styles.infoSuccessive}>
+            {categorieToLabel(dossier.categorie)}
+            <br />
+            <CategorieDossierTag dossier={dossier} size="sm" />
           </Info>
         </div>
         <div>

src/lib/categories.ts

@@ -16,6 +16,7 @@ type GrandeCategorieValue =
   | "THEATRE";
 interface GrandeCategorie {
   label: string;
+  className: string;
   value: GrandeCategorieValue;
   categories: Categorie[];
 }
@@ -26,6 +27,7 @@ const grandesCategories: GrandeCategorie[] = [
       { label: "Tournage film long-métrage", value: "LONG_METRAGE" },
       { label: "Tournage film moyen ou court-métrage", value: "COURT_METRAGE" },
     ],
+    className: "cinema",
     label: "Cinéma",
     value: "CINEMA",
   },
@@ -36,11 +38,13 @@ const grandesCategories: GrandeCategorie[] = [
       { label: "Émission TV", value: "EMISSION_TV" },
       { label: "Clip", value: "CLIP" },
     ],
+    className: "television",
     label: "Télévision",
     value: "TELEVISION",
   },
   {
     categories: [{ label: "Pièce de théâtre", value: "THEATRE" }],
+    className: "theatre",
     label: "Théâtre",
     value: "THEATRE",
   },
@@ -49,6 +53,7 @@ const grandesCategories: GrandeCategorie[] = [
       { label: "Enregistrement doublage", value: "DOUBLAGE" },
       { label: "Enregistrement musique en studio", value: "MUSIQUE_STUDIO" },
     ],
+    className: "enregistrement",
     label: "Enregistrement",
     value: "ENREGISTREMENT",
   },
@@ -61,11 +66,13 @@ const grandesCategories: GrandeCategorie[] = [
       { label: "Spectacle de danse", value: "DANSE" },
       { label: "Cirque", value: "CIRQUE" },
     ],
+    className: "spectacle",
     label: "Spectacle",
     value: "SPECTACLE",
   },
   {
     categories: [{ label: "Émission radio", value: "RADIO" }],
+    className: "radio",
     label: "Radio",
     value: "RADIO",
   },
@@ -74,6 +81,7 @@ const grandesCategories: GrandeCategorie[] = [
       { label: "Photo", value: "PHOTO" },
       { label: "Film institutionnel", value: "FILM_INSTITUTIONNEL" },
     ],
+    className: "publicite",
     label: "Publicité",
     value: "PUBLICITE",
   },
@@ -82,11 +90,13 @@ const grandesCategories: GrandeCategorie[] = [
       { label: "Compétition de jeux vidéos", value: "JEU_VIDEO" },
       { label: "Plateforme de vidéos en ligne", value: "VIDEO_EN_LIGNE" },
     ],
+    className: "nouvellesTechnologies",
     label: "Nouvelles technologies",
     value: "NOUVELLES_TECHNOLOGIES",
   },
   {
     categories: [{ label: "Autre", value: "AUTRE" }],
+    className: "divers",
     label: "Divers",
     value: "DIVERS",
   },
@@ -111,6 +121,14 @@ function categorieToGrandeCategorieLabel(
   )?.label;
 }
 
+function categorieToGrandeCategorieClassName(
+  categorie: CategorieDossier
+): string | undefined {
+  return grandesCategories.find((gc) =>
+    gc.categories.find((c) => c.value == categorie)
+  )?.className;
+}
+
 function grandeCategorieToCategorieValues(
   grandeCategorieValue: GrandeCategorieValue
 ): CategorieDossier[] {
@@ -123,6 +141,7 @@ function grandeCategorieToCategorieValues(
 }
 
 export {
+  categorieToGrandeCategorieClassName,
   categorieToGrandeCategorieLabel,
   categorieToLabel,
   grandeCategorieToCategorieValues,

src/styles/globals.scss

@@ -1,3 +1,9 @@
+:root {
+  --red-marianne-main-472: #e1000f;
+  --yellow-moutarde-main-679: #C3992A;
+  --purple-glycine-main-494: #A558A0;
+}
+
 .card {
   padding: 2rem;
   margin: 2rem 0;