forge-joniko/ldc-groupe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'feat/slugifycator' into 'develop'

Browse source 
feat: ✨ add slugifycator button component

See merge request ldc-web/projets/ldc!89
This commit is contained in:
karl.muller 2025-12-17 10:55:16 +00:00
commit 2f8ea974e1
4 changed files with 61 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
resources/ts/back/Components/Inputs/Slugifycator.tsx Normal file
View file

@ -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;

34
resources/ts/back/Pages/DynamicPages/Form.tsx
View file

@ -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 })}

29
resources/ts/back/Pages/News/Form.tsx
View file

@ -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 })}

29
resources/ts/back/Pages/NewsCategory/Form.tsx
View file

@ -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(