fix(app): clean moderation table and fix combobox

Author: theolemague

api/src/controllers/mission.ts

@@ -44,7 +44,7 @@ const searchSchema = zod.object({
 });
 
 const autocompleteSchema = zod.object({
-  publishers: zod.array(zod.string()).optional(),
+  publishers: zod.union([zod.string(), zod.array(zod.string())]).optional(),
   field: zod.string(),
   search: zod.string(),
 });
@@ -155,7 +155,7 @@ router.get("/autocomplete", passport.authenticate("user", { session: false }), a
     }
 
     const missions = await missionService.findMissions({
-      publisherIds: query.data.publishers ?? [],
+      publisherIds: Array.isArray(query.data.publishers) ? query.data.publishers : query.data.publishers ? [query.data.publishers] : [],
       limit: 1000,
       skip: 0,
       domain: undefined,

app/src/components/combobox/MissionCombobox.jsx

@@ -1,4 +1,3 @@
-// import Combobox from "@/components/combobox/index";
 import Combobox from "@/components/combobox/DesignSystem";
 import api from "@/services/api";
 import { captureError } from "@/services/error";

app/src/scenes/broadcast/moderation/components/Constants.jsx

@@ -30,7 +30,7 @@ export const STATUS_COLORS = {
   PENDING: "var(--color-warning)",
   ONGOING: "var(--color-warning)",
   ACCEPTED: "var(--color-success)",
-  REFUSED: "var(--color-red-marianne)",
+  REFUSED: "var(--color-error)",
 };
 
 export const STATUS_GRAPH_COLORS = {

app/src/scenes/broadcast/moderation/components/Filters.jsx

@@ -79,10 +79,7 @@ const Filters = ({ filters, onChange, reload }) => {
         <PublisherCombobox
           id="publisherIds"
           values={filters.publisherIds}
-          onChange={(publisherIds) => {
-            console.log("publisherIds", publisherIds);
-            onChange({ ...filters, publisherIds });
-          }}
+          onChange={(publisherIds) => onChange({ ...filters, publisherIds })}
           placeholder="Annonceur"
           options={options.publishers}
         />
@@ -96,10 +93,10 @@ const Filters = ({ filters, onChange, reload }) => {
 
         <MissionCombobox
           id="organization"
-          values={filters.organizations}
-          onChange={(organizations) => onChange({ ...filters, organizations })}
+          values={filters.organizationNames}
+          onChange={(organizationNames) => onChange({ ...filters, organizationNames })}
           placeholder="Organisations"
-          filters={`${options.publishers.map((p) => `publishers[]=${p.key}`).join("&")}&field=organizationName`}
+          filters={`${filters.publisherIds?.length ? filters.publisherIds.map((p) => `publishers=${p}`).join("&") : options.publishers.map((p) => `publishers=${p.key}`).join("&")}&field=organizationName`}
         />
 
         <Select
@@ -126,7 +123,7 @@ const Filters = ({ filters, onChange, reload }) => {
           values={filters.cities}
           onChange={(cities) => onChange({ ...filters, cities })}
           placeholder="Villes"
-          filters={`${options.publishers.map((p) => `publishers[]=${p.key}`).join("&")}&field=city`}
+          filters={`${filters.publisherIds?.length ? filters.publisherIds.map((p) => `publishers=${p}`).join("&") : options.publishers.map((p) => `publishers=${p.key}`).join("&")}&field=city`}
         />
         <Select
           options={options.activities.map((e) => ({ value: e.key === "" ? "none" : e.key, label: e.key === "" ? "Non renseignée" : e.key, count: e.doc_count }))}
@@ -140,7 +137,7 @@ const Filters = ({ filters, onChange, reload }) => {
       <div className="flex flex-wrap gap-3">
         <Badge label="Statut" value={STATUS[filters.status]} onDelete={() => onChange({ ...filters, status: "" })} />
         <Badge label="Annonceur" value={options.publishers.find((p) => p.key === filters.publisherId)?.label} onDelete={() => onChange({ ...filters, publisherId: "" })} />
-        <Badge label="Organisation" value={filters.organizationName} onDelete={() => onChange({ ...filters, organizationName: "" })} />
+        <Badge label="Organisation" value={filters.organizationNames.join(", ")} onDelete={() => onChange({ ...filters, organizationNames: [] })} />
         <Badge
           label="Département"
           value={filters.department === "none" ? "Non renseigné" : DEPARTMENT_LABELS[filters.department]}

app/src/scenes/broadcast/moderation/components/MissionItem.jsx

@@ -2,7 +2,7 @@ import { toast } from "@/services/toast";
 import { Menu, Transition } from "@headlessui/react";
 import { Fragment, useEffect, useState } from "react";
 import { BsDot } from "react-icons/bs";
-import { RiCalendarEventFill, RiCheckboxCircleFill, RiCloseCircleFill, RiMapPin2Fill, RiMoreFill, RiPencilFill, RiTimeLine } from "react-icons/ri";
+import { RiCalendarEventFill, RiCheckboxCircleFill, RiCloseCircleFill, RiMapPin2Fill, RiMoreFill, RiTimeLine } from "react-icons/ri";
 import { useSearchParams } from "react-router-dom";
 
 import Modal from "@/components/Modal";
@@ -127,8 +127,8 @@ const MissionItem = ({ data, history, selected, onChange, onSelect, onFilter, on
         </div>
       </td>
       <td className="table-cell align-middle">
-        <div className="flex flex-col justify-center gap-3">
-          <div className="flex items-center gap-3">
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex w-full items-center gap-3">
             <select
               className="select flex-1 border-b-2 pr-2"
               style={{ borderBottomColor: STATUS_COLORS[values.status] }}
@@ -145,10 +145,10 @@ const MissionItem = ({ data, history, selected, onChange, onSelect, onFilter, on
             <MissionActionsMenu data={data} onFilter={onFilter} onChange={(v) => onChange({ ...data, ...v })} />
           </div>
           {values.status === "REFUSED" && (
-            <select className="select border-error border-b-2" name="motif" value={values.comment} onChange={(e) => handleSubmit({ status: "REFUSED", comment: e.target.value })}>
+            <select className="select mt-4 w-full border-b-2" name="motif" value={values.comment} onChange={(e) => handleSubmit({ status: "REFUSED", comment: e.target.value })}>
               <option value="">Motif de refus</option>
               {Object.entries(JVA_MODERATION_COMMENTS_LABELS).map(([key, value]) => (
-                <option key={key} value={key}>
+                <option key={key} value={key} className="whitespace-nowrap text-black">
                   {value}
                 </option>
               ))}

app/src/scenes/broadcast/moderation/index.jsx

@@ -223,7 +223,7 @@ const Moderation = () => {
               width: "40%",
             },
             { title: "Organisation" },
-            { title: "Actions", width: "30%" },
+            { title: "Actions", width: "35%" },
           ]}
           total={total}
           loading={loading}

app/src/scenes/my-missions/Flux.jsx

@@ -174,14 +174,14 @@ const Flux = ({ moderated }) => {
             values={filters.cities}
             onChange={(cities) => setFilters({ ...filters, cities })}
             placeholder="Villes"
-            filters={`publishers[]=${publisher.id}&field=city`}
+            filters={`publishers=${publisher.id}&field=city`}
           />
           <MissionCombobox
             id="organization"
             values={filters.organizations}
             onChange={(organizations) => setFilters({ ...filters, organizations })}
             placeholder="Organisations"
-            filters={`publishers[]=${publisher.id}&field=organizationName`}
+            filters={`publishers=${publisher.id}&field=organizationName`}
             className="w-96"
           />
         </div>
@@ -232,9 +232,7 @@ const Flux = ({ moderated }) => {
                 {item.organizationName && <p className="text-sm">{item.organizationName}</p>}
               </td>
               <td className="px-4">{item.places}</td>
-              <td className="px-4">
-                {item.city}
-              </td>
+              <td className="px-4">{item.city}</td>
               <td className="px-4">{new Date(item.createdAt).toLocaleDateString("fr")}</td>
               <td className="px-6">
                 <div className="flex items-center gap-1">