From 06b8e01b1a32047b5ce0f11930c1c4ef078603b3 Mon Sep 17 00:00:00 2001
From: K Muller <karl.muller@ldc.fr>
Date: Wed, 17 Dec 2025 11:56:39 +0100
Subject: [PATCH] feat: :sparkles: add slugifycator button component

---
 .../back/Components/Inputs/Slugifycator.tsx   | 43 +++++++++++++++++++
 resources/ts/back/Pages/DynamicPages/Form.tsx | 34 +++------------
 resources/ts/back/Pages/News/Form.tsx         | 29 +++----------
 resources/ts/back/Pages/NewsCategory/Form.tsx | 29 +++----------
 4 files changed, 61 insertions(+), 74 deletions(-)
 create mode 100644 resources/ts/back/Components/Inputs/Slugifycator.tsx

diff --git a/resources/ts/back/Components/Inputs/Slugifycator.tsx b/resources/ts/back/Components/Inputs/Slugifycator.tsx
new file mode 100644
index 00000000..76c6a300
--- /dev/null
+++ b/resources/ts/back/Components/Inputs/Slugifycator.tsx
@@ -0,0 +1,43 @@
+import str from "@/hooks/use-string"
+import SimpleString from "./SimpleString"
+import useTrans from "@/hooks/use-translations"
+import BtnOptionnalLinkWithTooltip from "../BtnOptionnalLinkWithTooltip"
+import { GavelIcon } from "lucide-react"
+
+interface Props {
+    setData: (name: string, value: string) => void;
+    value:  string
+    targetValue: string
+    wordCounter?: boolean;
+}
+const Slugifycator = (props: Props) => {
+    const {value, targetValue, setData, wordCounter = false} = props;
+    return (
+        <div className="flex items-end gap-1">
+            <SimpleString
+                name="slug"
+                label={str(
+                    useTrans("back.form_associate_to", {
+                        params: {
+                            attribute: useTrans("validation.custom.slug"),
+                        },
+                        choice: 1,
+                    }),
+                ).ucFirst().value()}
+                placeholder="ex: John Doe"
+                wordCounter={wordCounter}
+                value={value}
+                setData={setData}
+            />
+            <BtnOptionnalLinkWithTooltip
+                content={<GavelIcon className="w-4 h-4 m-auto" />}
+                tooltipContent={str(useTrans('back.slugify')).ucFirst().value()}
+                type="button"
+                variant="secondary"
+                onClick={() => setData("slug", str(targetValue).slug().value())}
+            />
+        </div>
+    )
+}
+
+export default Slugifycator;
diff --git a/resources/ts/back/Pages/DynamicPages/Form.tsx b/resources/ts/back/Pages/DynamicPages/Form.tsx
index 2fe13d2e..c62f63c1 100644
--- a/resources/ts/back/Pages/DynamicPages/Form.tsx
+++ b/resources/ts/back/Pages/DynamicPages/Form.tsx
@@ -40,6 +40,7 @@ import {
 } from "@/back/types/global";
 import SubmitButton from "@/back/Components/SubmitButton";
 import { useCrudSubmit } from "@/hooks/use-crud-submit";
+import Slugifycator from "@/back/Components/Inputs/Slugifycator";
 
 export default function Form({
     model,
@@ -247,34 +248,11 @@ export default function Form({
                     setData={setData}
                     onSelectValue={(value) => setSelectedGroup((value as DynamicPageModel).title[locale])}
                 />
-                <div className="flex items-end gap-1">
-                    <SimpleString
-                        name="slug"
-                        label={str(
-                            useTrans("back.form_associate_to", {
-                                params: {
-                                    attribute: useTrans("validation.custom.slug"),
-                                },
-                                choice: 1,
-                            }),
-                        )
-                            .ucFirst()
-                            .value()}
-                        wordCounter={false}
-                        value={data.slug}
-                        pattern="[a-z0-9\-]{3,255}"
-                        setData={setData}
-                    />
-                    <BtnOptionnalLinkWithTooltip
-                        content={<GavelIcon className="w-4 h-4 m-auto" />}
-                        tooltipContent={str(useTrans('back.slugify')).ucFirst().value()}
-                        type="button"
-                        variant="secondary"
-                        onClick={() => {
-                            setData("slug", str(data.title).slug().value());
-                        }}
-                    />
-                </div>
+                <Slugifycator
+                    value={data.slug}
+                    targetValue={data.title}
+                    setData={setData}
+                />
                 <div className="col-span-1 md:col-span-2">
                     <GoToFrontView
                         modelName={useTrans(`models.classes.${modelName}`, { choice: 1 })}
diff --git a/resources/ts/back/Pages/News/Form.tsx b/resources/ts/back/Pages/News/Form.tsx
index 3da17702..8113d184 100644
--- a/resources/ts/back/Pages/News/Form.tsx
+++ b/resources/ts/back/Pages/News/Form.tsx
@@ -28,6 +28,7 @@ import str from "@/hooks/use-string";
 import { useCrudSubmit } from "@/hooks/use-crud-submit";
 import SubmitButton from "@/back/Components/SubmitButton";
 import { mapPivotOptions } from "@/lib/mapPivotOptions";
+import Slugifycator from "@/back/Components/Inputs/Slugifycator";
 
 export default function Form({
     model,
@@ -169,29 +170,11 @@ export default function Form({
                         value={data.title}
                         setData={setData}
                     />
-                    <div className="flex items-end gap-1">
-                        <SimpleString
-                            name="slug"
-                            label={str(
-                                useTrans("back.form_associate_to", {
-                                    params: {
-                                        attribute: useTrans("validation.custom.slug"),
-                                    },
-                                    choice: 1,
-                                }),
-                            ).ucFirst().value()}
-                            placeholder="ex: John Doe"
-                            value={data.slug}
-                            setData={setData}
-                        />
-                        <BtnOptionnalLinkWithTooltip
-                            content={<GavelIcon className="w-4 h-4 m-auto" />}
-                            tooltipContent={str(useTrans('back.slugify')).ucFirst().value()}
-                            type="button"
-                            variant="secondary"
-                            onClick={() => setData("slug", str(data.title).slug().value())}
-                        />
-                    </div>
+                    <Slugifycator
+                        value={data.slug}
+                        targetValue={data.title}
+                        setData={setData}
+                    />
                 </div>
                 <GoToFrontView
                     modelName={useTrans(`models.classes.${modelName}`, { choice: 1 })}
diff --git a/resources/ts/back/Pages/NewsCategory/Form.tsx b/resources/ts/back/Pages/NewsCategory/Form.tsx
index 23dfd16e..5fe05740 100644
--- a/resources/ts/back/Pages/NewsCategory/Form.tsx
+++ b/resources/ts/back/Pages/NewsCategory/Form.tsx
@@ -13,6 +13,7 @@ import { useCrudSubmit } from "@/hooks/use-crud-submit";
 import SubmitButton from "@/back/Components/SubmitButton";
 import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
 import SimpleColorPicker from "@/back/Components/Inputs/SimpleColorPicker";
+import Slugifycator from "@/back/Components/Inputs/Slugifycator";
 
 export default function Form({
     model,
@@ -71,29 +72,11 @@ export default function Form({
                         value={data.name ?? ""}
                         setData={setData}
                     />
-                    <div className="flex items-end gap-1">
-                        <SimpleString
-                            name="slug"
-                            label={str(
-                                useTrans("back.form_associate_to", {
-                                    params: {
-                                        attribute: useTrans("validation.custom.slug"),
-                                    },
-                                    choice: 1,
-                                }),
-                            ).ucFirst().value()}
-                            placeholder="ex: John Doe"
-                            value={data.slug}
-                            setData={setData}
-                        />
-                        <BtnOptionnalLinkWithTooltip
-                            content={<GavelIcon className="w-4 h-4 m-auto" />}
-                            tooltipContent={str(useTrans('back.slugify')).ucFirst().value()}
-                            type="button"
-                            variant="secondary"
-                            onClick={() => setData("slug", str(data.name).slug().value())}
-                        />
-                    </div>
+                    <Slugifycator
+                        value={data.slug}
+                        targetValue={data.name}
+                        setData={setData}
+                    />
                     <SimpleColorPicker
                         name="color"
                         label={str(