fix(basket): update basket, use levenschtein formula to find good name

dataesr · Jun 6, 2024 · cfcafba · cfcafba
1 parent f0a45fe
commit cfcafba
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 36 deletions.
diff --git a/src/pages/api-operation-page/contributor-requests.tsx b/src/pages/api-operation-page/contributor-requests.tsx
@@ -11,7 +11,8 @@ const ContributorRequests: React.FC<{
     productions: Production[];
   };
   setDataList;
-}> = ({ data, setDataList }) => {
+  coloredName;
+}> = ({ data, setDataList, coloredName }) => {
   const [copiedId, setCopiedId] = useState<string | null>(null);
 
   const copyToClipboard = (text: string) => {
@@ -57,13 +58,14 @@ const ContributorRequests: React.FC<{
               productionId={production.id}
               setDataList={setDataList}
               idRef={data.id}
+              coloredName={coloredName}
             />
+            <Row className="fr-grid-row--center fr-mt-2w">
+              <Text size="sm">
+                <ExternalLinks productionId={production.id} name={data.name} />
+              </Text>
+            </Row>
           </Text>
-          <Row className="fr-grid-row--center fr-mt-2w">
-            <Text size="sm">
-              <ExternalLinks productionId={production.id} name={data.name} />
-            </Text>
-          </Row>
         </Col>
       ))}
     </>

diff --git a/src/pages/api-operation-page/export-to-xlsx.tsx b/src/pages/api-operation-page/export-to-xlsx.tsx
@@ -1,4 +1,4 @@
-import { Button, Text } from "@dataesr/dsfr-plus";
+import { Button, Col, Row, Text, Title } from "@dataesr/dsfr-plus";
 import * as XLSX from "xlsx";
 import { AiOutlineDelete } from "react-icons/ai";
 
@@ -22,16 +22,33 @@ const ExcelExportButton = ({ dataList, setDataList }) => {
 
   return (
     <div className="basket">
+      <Title look="h6" className="basket-title">
+        Liste des publications à exporter
+      </Title>
       <ul style={{ listStyleType: "none", padding: 0 }}>
         {Array.isArray(dataList) &&
           dataList.map((item, index) => (
-            <li key={index} style={{ listStyleType: "none", padding: 0 }}>
-              <Text size="sm">
-                <button onClick={() => handleRemoveClick(index)}>
-                  <AiOutlineDelete color="red" />
-                </button>
-                Publication: {item.publi_id} - Nom validé: {item.fullName}
-              </Text>
+            <li
+              key={index}
+              style={{
+                listStyleType: "none",
+                padding: 0,
+                borderBottom: "1px solid #000",
+              }}
+            >
+              <br />
+              <div className="basket-item">
+                <Text size="sm" bold>
+                  {item.publi_id}
+                </Text>
+                <i>à lier à</i>
+                <Text size="sm" bold>
+                  {item.fullName}
+                  <button onClick={() => handleRemoveClick(index)}>
+                    <AiOutlineDelete color="red" />
+                  </button>
+                </Text>
+              </div>
             </li>
           ))}
       </ul>

diff --git a/src/pages/api-operation-page/index.tsx b/src/pages/api-operation-page/index.tsx
@@ -62,7 +62,6 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
     setData(fetchedData);
   }, [fetchedData]);
   const [dataList, setDataList] = useState([]);
-  console.log(dataList);
   const meta = (fetchedData as { meta: any })?.meta;
   const maxPage = meta ? Math.ceil(meta?.total / 10) : 1;
   const contrib: Contribute_Production[] = (
@@ -130,7 +129,9 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
           setDataList={setDataList}
         />
       ))}
-      <ExcelExportButton dataList={dataList} setDataList={setDataList} />
+      {dataList.length > 0 && (
+        <ExcelExportButton dataList={dataList} setDataList={setDataList} />
+      )}
       <BottomPaginationButtons
         page={page}
         maxPage={maxPage}

diff --git a/src/pages/api-operation-page/message-preview.tsx b/src/pages/api-operation-page/message-preview.tsx
@@ -4,8 +4,6 @@ import EditModal from "../../components/edit-modal";
 import { useState, useCallback } from "react";
 import ContributorRequests from "./contributor-requests";
 import "./styles.scss";
-import { FaExclamationTriangle } from "react-icons/fa";
-import { FaCheck } from "react-icons/fa";
 import NameFromIdref from "../../api/contribution-api/getNamesFromIdref";
 
 const MessagePreview = ({
@@ -89,10 +87,16 @@ const MessagePreview = ({
         </Link>
         <Text
           size="sm"
-          style={{ cursor: "pointer" }}
+          bold
+          style={{
+            cursor: "pointer",
+            color: fetchedData ? "inherit" : "#f95c5e",
+          }}
           onClick={() => copyToClipboard(fetchedData, "Nom copié")}
         >
-          {fetchedData ? `${fetchedData}` : "Nom inéxistant sur scanR"}
+          {fetchedData
+            ? `${fetchedData} ${data.name}`
+            : "Nom non-inéxistant sur scanR"}
           {copySuccess === "Nom copié" && (
             <span
               style={{
@@ -104,10 +108,15 @@ const MessagePreview = ({
                 fontSize: "0.8em",
               }}
             >
-              {copySuccess}
+              Copié !
             </span>
           )}
         </Text>
+        <Text size="sm">
+          {"Nom lié à l'idref "}
+          <span style={{ fontWeight: "bold" }}>{data.name}</span>
+        </Text>
+
         {data.email && (
           <Text
             size="sm"
@@ -134,7 +143,11 @@ const MessagePreview = ({
       </Row>
       <Row>
         <Col className="contributorProductionSide">
-          <ContributorRequests data={data} setDataList={setDataList} />
+          <ContributorRequests
+            data={data}
+            setDataList={setDataList}
+            coloredName={data.name}
+          />
         </Col>
       </Row>
       <Row className="fr-mb-2w">

diff --git a/src/pages/api-operation-page/name-selector.tsx b/src/pages/api-operation-page/name-selector.tsx
@@ -1,15 +1,29 @@
+import ReactSelect from "react-select";
 import NameFromScanr from "../../api/contribution-api/getNames";
+import { levenshteinDistance } from "./utils/compare";
 
-export default function SelectWithNames({ productionId, setDataList, idRef }) {
+export default function SelectWithNames({
+  productionId,
+  setDataList,
+  idRef,
+  coloredName,
+}) {
   const { fullName, firstName, lastName } = NameFromScanr(productionId);
-  const handleChange = (event) => {
-    const selectedName = event.target.value;
-    const selectedIndex = fullName.indexOf(selectedName);
+  const customStyles = {
+    option: (provided, state) => ({
+      ...provided,
+      color: state.data.isColored ? "#1f8d49" : "black",
+    }),
+  };
+
+  const threshold = 10;
 
+  const handleChange = (selectedOption) => {
+    const selectedIndex = fullName.indexOf(selectedOption.value);
     setDataList((prevState) => [
       ...prevState,
       {
-        fullName: selectedName,
+        fullName: selectedOption.value,
         person_id: idRef,
         publi_id: productionId,
         first_name: firstName[selectedIndex],
@@ -18,14 +32,19 @@ export default function SelectWithNames({ productionId, setDataList, idRef }) {
     ]);
   };
 
+  const options = fullName.map((name, index) => ({
+    value: name,
+    label: name,
+    firstName: firstName[index],
+    isColored: levenshteinDistance(name, coloredName) <= threshold,
+  }));
+
   return (
-    <select onChange={handleChange}>
-      <option value="">Select a name</option>
-      {fullName.map((name, index) => (
-        <option key={index} value={name}>
-          {name}
-        </option>
-      ))}
-    </select>
+    <ReactSelect
+      options={options}
+      onChange={handleChange}
+      styles={customStyles}
+      placeholder="Trouver le nom"
+    />
   );
 }
diff --git a/src/pages/api-operation-page/styles.scss b/src/pages/api-operation-page/styles.scss
@@ -23,7 +23,7 @@
   position: fixed;
   right: 0;
   top: 0;
-  padding: 20px;
+  padding: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -34,3 +34,8 @@
   border-radius: 20px;
   border: 2px solid black;
 }
+.basket-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/src/pages/api-operation-page/utils/compare.tsx b/src/pages/api-operation-page/utils/compare.tsx
@@ -0,0 +1,19 @@
+export const levenshteinDistance = (s, t) => {
+  if (!s.length) return t.length;
+  if (!t.length) return s.length;
+  const arr = [];
+  for (let i = 0; i <= t.length; i++) {
+    arr[i] = [i];
+    for (let j = 1; j <= s.length; j++) {
+      arr[i][j] =
+        i === 0
+          ? j
+          : Math.min(
+              arr[i - 1][j] + 1,
+              arr[i][j - 1] + 1,
+              arr[i - 1][j - 1] + (s[j - 1] === t[i - 1] ? 0 : 1)
+            );
+    }
+  }
+  return arr[t.length][s.length];
+};