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}`}
|
key={`step-${index}`}
|
||||||
onClick={() => navigateToStep(index)}
|
onClick={() => navigateToStep(index)}
|
||||||
className={classNames(
|
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" : ""
|
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>
|
</div>
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { useForm, Controller } from "react-hook-form";
|
||||||
|
|
||||||
import { WEBAPP_URL } from "@calcom/lib/constants";
|
import { WEBAPP_URL } from "@calcom/lib/constants";
|
||||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
|
import slugify from "@calcom/lib/slugify";
|
||||||
import { trpc } from "@calcom/trpc/react";
|
import { trpc } from "@calcom/trpc/react";
|
||||||
import { Icon } from "@calcom/ui";
|
import { Icon } from "@calcom/ui";
|
||||||
import { Button, Avatar } from "@calcom/ui/v2";
|
import { Button, Avatar } from "@calcom/ui/v2";
|
||||||
|
@ -45,7 +46,11 @@ const CreateANewTeamForm = (props: { nextStep: () => void; setTeamId: (teamId: n
|
||||||
value={value}
|
value={value}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
formMethods.setValue("name", e?.target.value);
|
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/`}
|
addOnLeading={`${WEBAPP_URL}/team/`}
|
||||||
value={value}
|
value={value}
|
||||||
onChange={(e) => {
|
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
|
// If query params change, update the form
|
||||||
}, [router.isReady, router.query, setValue]);
|
}, [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", {
|
const createMutation = trpc.useMutation("viewer.eventTypes.create", {
|
||||||
onSuccess: async ({ eventType }) => {
|
onSuccess: async ({ eventType }) => {
|
||||||
await router.replace("/event-types/" + eventType.id);
|
await router.replace("/event-types/" + eventType.id);
|
||||||
|
@ -202,7 +192,17 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
|
||||||
value={teamId}
|
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 !== undefined &&
|
||||||
process.env.NEXT_PUBLIC_WEBSITE_URL?.length >= 21 ? (
|
process.env.NEXT_PUBLIC_WEBSITE_URL?.length >= 21 ? (
|
||||||
|
@ -211,6 +211,9 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
|
||||||
required
|
required
|
||||||
addOnLeading={<>/{pageSlug}/</>}
|
addOnLeading={<>/{pageSlug}/</>}
|
||||||
{...register("slug")}
|
{...register("slug")}
|
||||||
|
onChange={(e) => {
|
||||||
|
form.setValue("slug", slugify(e?.target.value), { shouldTouch: true });
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<TextField
|
<TextField
|
||||||
|
|
Loading…
Reference in New Issue