Harsh/auto add url (#4997)
* add: auto complete for slug * Remove useStates not required for feature * remove: states logic * Using touched validation from react-hook-form * Fix size of width for steps indicador * Apply same changes for react-hook-form touched from createNewTeam Co-authored-by: root <root@pop-os.localdomain> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Alan <alannnc@gmail.com>pull/5049/head^2
parent
aa038acafd
commit
06732c5c6d
|
@ -22,12 +22,12 @@ const Steps = (props: ISteps) => {
|
|||
key={`step-${index}`}
|
||||
onClick={() => navigateToStep(index)}
|
||||
className={classNames(
|
||||
"h-1 w-1/4 rounded-[1px] bg-black dark:bg-white",
|
||||
"h-1 w-full rounded-[1px] bg-black dark:bg-white",
|
||||
index < currentStep ? "cursor-pointer" : ""
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div key={`step-${index}`} className="h-1 w-1/4 rounded-[1px] bg-black bg-opacity-25" />
|
||||
<div key={`step-${index}`} className="h-1 w-full rounded-[1px] bg-black bg-opacity-25" />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
@ -2,6 +2,7 @@ import { useForm, Controller } from "react-hook-form";
|
|||
|
||||
import { WEBAPP_URL } from "@calcom/lib/constants";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import slugify from "@calcom/lib/slugify";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Icon } from "@calcom/ui";
|
||||
import { Button, Avatar } from "@calcom/ui/v2";
|
||||
|
@ -45,7 +46,11 @@ const CreateANewTeamForm = (props: { nextStep: () => void; setTeamId: (teamId: n
|
|||
value={value}
|
||||
onChange={(e) => {
|
||||
formMethods.setValue("name", e?.target.value);
|
||||
if (formMethods.formState.touchedFields["slug"] === undefined) {
|
||||
formMethods.setValue("slug", slugify(e?.target.value));
|
||||
}
|
||||
}}
|
||||
autoComplete="off"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
@ -63,7 +68,7 @@ const CreateANewTeamForm = (props: { nextStep: () => void; setTeamId: (teamId: n
|
|||
addOnLeading={`${WEBAPP_URL}/team/`}
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
formMethods.setValue("slug", e?.target.value);
|
||||
formMethods.setValue("slug", slugify(e?.target.value), { shouldTouch: true });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
|
@ -84,16 +84,6 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
|
|||
// If query params change, update the form
|
||||
}, [router.isReady, router.query, setValue]);
|
||||
|
||||
useEffect(() => {
|
||||
const subscription = watch((value, { name, type }) => {
|
||||
if (name === "title" && type === "change") {
|
||||
if (value.title) setValue("slug", slugify(value.title));
|
||||
else setValue("slug", "");
|
||||
}
|
||||
});
|
||||
return () => subscription.unsubscribe();
|
||||
}, [watch, setValue]);
|
||||
|
||||
const createMutation = trpc.useMutation("viewer.eventTypes.create", {
|
||||
onSuccess: async ({ eventType }) => {
|
||||
await router.replace("/event-types/" + eventType.id);
|
||||
|
@ -202,7 +192,17 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
|
|||
value={teamId}
|
||||
/>
|
||||
)}
|
||||
<TextField label={t("title")} placeholder={t("quick_chat")} {...register("title")} />
|
||||
<TextField
|
||||
label={t("title")}
|
||||
placeholder={t("quick_chat")}
|
||||
{...register("title")}
|
||||
onChange={(e) => {
|
||||
form.setValue("title", e?.target.value);
|
||||
if (form.formState.touchedFields["slug"] === undefined) {
|
||||
form.setValue("slug", slugify(e?.target.value));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{process.env.NEXT_PUBLIC_WEBSITE_URL !== undefined &&
|
||||
process.env.NEXT_PUBLIC_WEBSITE_URL?.length >= 21 ? (
|
||||
|
@ -211,6 +211,9 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
|
|||
required
|
||||
addOnLeading={<>/{pageSlug}/</>}
|
||||
{...register("slug")}
|
||||
onChange={(e) => {
|
||||
form.setValue("slug", slugify(e?.target.value), { shouldTouch: true });
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<TextField
|
||||
|
|
Loading…
Reference in New Issue