fix: payload custom components for RowLabels and CustomSelect migrate

SocialGouv · Nov 20, 2024 · 59a4c3c · 59a4c3c
1 parent 3cb3337
commit 59a4c3c
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 17 deletions.
diff --git a/webapp/package.json b/webapp/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "seed:dev": "PAYLOAD_DROP_DATABASE=true tsx ./src/payload/seed/index.ts",

diff --git a/webapp/src/app/(payload)/admin/importMap.js b/webapp/src/app/(payload)/admin/importMap.js
@@ -1,5 +1,9 @@
-
+import { CustomSelectKind as CustomSelectKind_9dcf769af922a51107998c78ff4db18a } from '~/payload/components/CustomSelectKind'
+import { OfferRowLabel as OfferRowLabel_96c0a6bbcec834bdb17d8993615131f7 } from '~/payload/components/RowLabels'
+import { OrderRowLabel as OrderRowLabel_96c0a6bbcec834bdb17d8993615131f7 } from '~/payload/components/RowLabels'
 
 export const importMap = {
-
+  "~/payload/components/CustomSelectKind#CustomSelectKind": CustomSelectKind_9dcf769af922a51107998c78ff4db18a,
+  "~/payload/components/RowLabels#OfferRowLabel": OfferRowLabel_96c0a6bbcec834bdb17d8993615131f7,
+  "~/payload/components/RowLabels#OrderRowLabel": OrderRowLabel_96c0a6bbcec834bdb17d8993615131f7
 }
diff --git a/webapp/src/payload/collections/Offer.ts b/webapp/src/payload/collections/Offer.ts
@@ -143,7 +143,10 @@ export const Offers: CollectionConfig = {
       admin: {
         position: "sidebar",
         components: {
-          // Field: CustomSelectKind,
+          Field: {
+            path: "~/payload/components/CustomSelectKind",
+            exportName: "CustomSelectKind",
+          },
         },
       },
     },
@@ -246,7 +249,10 @@ export const Offers: CollectionConfig = {
           label: "Texte",
           admin: {
             components: {
-              // Field: CustomSelectTermsOfUse,
+              Field: {
+                path: "~/payload/components/CustomSelectTermsOfUse",
+                exportName: "CustomSelectTermsOfUse",
+              },
             },
           },
         },
@@ -293,7 +299,10 @@ export const Offers: CollectionConfig = {
           label: "Texte",
           admin: {
             components: {
-              // Field: CustomSelectConditionBlocks,
+              Field: {
+                path: "~/payload/components/CustomSelectConditionBlocks",
+                exportName: "CustomSelectConditionBlocks",
+              },
             },
           },
         },
@@ -317,11 +326,10 @@ export const Offers: CollectionConfig = {
           !!siblingData.source && siblingData.source === "obiz",
         initCollapsed: true,
         components: {
-          // RowLabel: ({ data, index }: any) => {
-          //   return data
-          //     ? `${data.available ? "🟢" : "🔴"} ${data.name}`
-          //     : `Article ${String(index).padStart(2, "0")}`;
-          // },
+          RowLabel: {
+            path: "~/payload/components/RowLabels",
+            exportName: "OfferRowLabel",
+          },
         },
       },
       fields: [

diff --git a/webapp/src/payload/collections/Order.ts b/webapp/src/payload/collections/Order.ts
@@ -76,9 +76,10 @@ export const Orders: CollectionConfig = {
       label: "Panier",
       admin: {
         components: {
-          // RowLabel: ({ data }: any) => {
-          //   return `${data.article_reference} (x${data.article_quantity})`;
-          // },
+          RowLabel: {
+            path: "~/payload/components/RowLabels",
+            exportName: "OrderRowLabel",
+          },
         },
       },
       fields: [

diff --git a/webapp/src/payload/components/CustomSelectBlocksOfUse.tsx b/webapp/src/payload/components/CustomSelectBlocksOfUse.tsx
@@ -79,7 +79,10 @@ export const CustomSelectConditionBlocks: React.FC<{ path: string }> = ({
         name={path}
         options={options}
         value={value}
-        onChange={(e) => setValue(e.value)}
+        onChange={(e) => {
+          const option = e as { label: string; value: string };
+          setValue(option.value);
+        }}
       />
     </div>
   );

diff --git a/webapp/src/payload/components/CustomSelectKind.tsx b/webapp/src/payload/components/CustomSelectKind.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { SelectInput, useField, useFormFields } from "@payloadcms/ui";
 import React from "react";
 import { Offer } from "../payload-types";
@@ -44,7 +46,10 @@ export const CustomSelectKind: React.FC<{ path: string }> = ({ path }) => {
         name={path}
         options={options}
         value={value}
-        onChange={(e) => setValue(e.value)}
+        onChange={(e) => {
+          const option = e as { label: string; value: string };
+          setValue(option.value);
+        }}
       />
     </div>
   );

diff --git a/webapp/src/payload/components/CustomSelectTermsOfUse.tsx b/webapp/src/payload/components/CustomSelectTermsOfUse.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { SelectInput, useField, useFormFields } from "@payloadcms/ui";
 import { Offer } from "../payload-types";
 import React from "react";
@@ -140,7 +142,10 @@ export const CustomSelectTermsOfUse: React.FC<{ path: string }> = ({
         name={path}
         options={options}
         value={value}
-        onChange={(e) => setValue(e.value)}
+        onChange={(e) => {
+          const option = e as { label: string; value: string };
+          setValue(option.value);
+        }}
       />
     </div>
   );

diff --git a/webapp/src/payload/components/RowLabels.tsx b/webapp/src/payload/components/RowLabels.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { useRowLabel } from "@payloadcms/ui";
+
+export const OfferRowLabel = () => {
+  const { data, rowNumber } = useRowLabel<{
+    name?: string;
+    available?: boolean;
+  }>();
+
+  return (
+    <div>{`${data.available ? "🟢" : "🔴"} ${(rowNumber ?? 0) + 1}. ${data.name ?? ""}`}</div>
+  );
+};
+
+export const OrderRowLabel = () => {
+  const { data } = useRowLabel<{
+    article_reference?: string;
+    article_quantity?: number;
+  }>();
+
+  return (
+    <div>{`${data.article_reference ?? ""} (x${data.article_quantity ?? 0})`}</div>
+  );
+};