feat: make user-friendly cat name

src/main/webapp/src/components/MemberCustomFiels.jsx

@@ -1,5 +1,5 @@
 import {useEffect, useState} from "react";
-import {getCategoryFormBirthDate} from "../utils/Tools.js";
+import {getCategoryFormBirthDate, getCatName} from "../utils/Tools.js";
 import {useCountries} from "../hooks/useCountries.jsx";
 
 export function BirthDayField({inti_date, inti_category, required = true}) {
@@ -27,7 +27,7 @@ export function BirthDayField({inti_date, inti_category, required = true}) {
             <div className="input-group mb-3">
                 <span className="input-group-text" id="category">Catégorie</span>
                 <input type="text" className="form-control" placeholder="" name="category"
-                       aria-label="category" value={category ? category : ""} aria-describedby="category"
+                       aria-label="category" value={category ? getCatName(category) : ""} aria-describedby="category"
                        disabled/>
                 {canUpdate && <button className="btn btn-outline-secondary" type="button" id="button-addon1"
                                       onClick={updateCat}>Mettre à jours</button>}

src/main/webapp/src/pages/MemberList.jsx

@@ -6,7 +6,7 @@ import {useEffect, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
 import {Checkbox} from "../components/MemberCustomFiels.jsx";
 import * as Tools from "../utils/Tools.js";
-import {apiAxios, errFormater} from "../utils/Tools.js";
+import {apiAxios, errFormater, getCatName} from "../utils/Tools.js";
 import {toast} from "react-toastify";
 import {SearchBar} from "../components/SearchBar.jsx";
 import * as XLSX from "xlsx-js-style";
@@ -387,28 +387,45 @@ function MakeCentralPanel({data, visibleMember, navigate, showLicenceState, page
 
 function MakeRow({member, showLicenceState, navigate, source}) {
     const rowContent = <>
-        <div className="row">
+        <div className="row" style={{padding: "0.6em 0"}}>
             <span className="col-auto">{(member.licence_number ? String(member.licence_number).padStart(5, '0') : "-------") + "   "}
                 {(showLicenceState && member.licence != null && member.licence.pay) ? <FontAwesomeIcon icon={faEuroSign}/> : <>&nbsp;&nbsp;</>}</span>
             <div className="ms-2 col-auto">
                 <div className="fw-bold">{member.fname} {member.lname}</div>
             </div>
         </div>
-        {source === "club" ?
+        <div style={{verticalAlign: "center", margin: "auto 0"}}>
-            <small>{member.categorie}</small>
+            {source === "club" ?
-            : <small>{member.club?.name || "Sans club"}</small>}
+                <small>{getCatName(member.categorie)}</small>
+                : <div style={{
+                    textAlign: "right",
+                    fontSize: "small"
+                }}>{member.club?.name || "Sans club"}<br/><small>{getCatName(member.categorie)}</small></div>}
+        </div>
+
     </>
 
     if (showLicenceState && member.licence != null) {
-        return <div
+        return <a className={"list-group-item d-flex justify-content-between align-items-start list-group-item-action list-group-item-"
-            className={"list-group-item d-flex justify-content-between align-items-start list-group-item-action list-group-item-"
+            + (member.licence.validate ? "success" : (member.licence.certificate.length > 1 ? "warning" : "danger"))}
-                + (member.licence.validate ? "success" : (member.licence.certificate.length > 1 ? "warning" : "danger"))}
+                  style={{padding: "0 1em"}}
-            onClick={() => navigate("" + member.id)}>{rowContent}</div>
+                  onClick={e => {
-    } else {
+                      e.preventDefault();
-        return <div className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
+                      navigate("" + member.id)
-                    onClick={() => navigate("" + member.id)}>
+                  }}
+                  href={"member/" + member.id}>
             {rowContent}
-        </div>
+        </a>
+    } else {
+        return <a className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
+                  style={{padding: "0 1em"}}
+                  onClick={e => {
+                      e.preventDefault();
+                      navigate("" + member.id)
+                  }}
+                  href={"member/" + member.id}>
+            {rowContent}
+        </a>
     }
 }
 

src/main/webapp/src/utils/Tools.js

@@ -60,3 +60,32 @@ export function getSaison(currentDate = new Date()) {
         return currentDate.getFullYear() - 1
     }
 }
+
+export function getCatName(cat) {
+    switch (cat) {
+        case "SUPER_MINI":
+            return "Super Mini";
+        case "MINI_POUSSIN":
+            return "Mini Poussin";
+        case "POUSSIN":
+            return "Poussin";
+        case "BENJAMIN":
+            return "Benjamin";
+        case "MINIME":
+            return "Minime";
+        case "CADET":
+            return "Cadet";
+        case "JUNIOR":
+            return "Junior";
+        case "SENIOR1":
+            return "Senior 1";
+        case "SENIOR2":
+            return "Senior 2";
+        case "VETERAN1":
+            return "Vétéran 1";
+        case "VETERAN2":
+            return "Vétéran 2";
+        default:
+            return cat;
+    }
+}